body{
	font-family: 'Montserrat', sans-serif;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	font-weight: 300; /* light */
	font-size: 18px;
	line-height: 1.5; /* 21 px */
	color: #000;
}

.banner{
	background: url(images/banner.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 300%;
   	height: 100vh;
}

h3{
	font-size: 16px;
	font-weight: 500;
}

a{
	text-decoration: none;
	color: #dbdbdb;
	cursor: pointer;
}

a:hover{
	color: white;
	text-decoration: underline;
}

.a{
	color: #000;
	font-weight: 500;
}

.a:hover{
	color: #173341;
	text-decoration: underline;
}

.ul--menu{
	line-height: 3;
	font-weight: 300; 
	cursor: pointer;
	margin-top: 40px;
	margin-left: 5px;
	list-style: none;
}

/* MENU */

.burger{
  	position: fixed;
	width: 30px;
	height: 30px;
	display: inline-block;

	background-image: url(images/menu.svg);
	background-repeat: no-repeat;
	background-size: contain;

	padding: 0;
	border: none;
 	margin-top: 15px;
	margin-right: 15px;
	background-color: transparent;

	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	z-index: 15;

	cursor: pointer;
	top: 0px;
	right: 0px;
}

.menu{
	position: fixed;
	top: 0;
	left: 100%;
	width: 80vw;
	height: 100vh;
	text-transform: none;
 	overflow: hidden;
	background-color: #0f1315;
	z-index: 10;
	transition: transform .3s ease-out;
}

.menu--open{
	transform: translateX(-100%);
	overflow: hidden;
}

/* SECTION */


.section-video{

	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	padding-top: 20px;
	padding-bottom: 40px;
}

/* PARAGRAPHE */

.paragraph{
	margin-left: 12%;
	margin-right: 12%;
	margin-top: 0;
	margin-bottom: 20px;
}

.paragraph--ajust{
	padding-top: 360px;
}

/* TITRE */

.title--hidden{
	background-color: transparent; 
    text-indent: 100%;
    overflow: hidden; 
    margin: 0;
	padding: 0;
}

.title{
		color: white;
		margin: 0;
		padding: 0;
		position:absolute;
		text-align: center;
		font-weight: 700; 
		opacity: 0;
		line-height: 3;
		left: 5%; 
}

.title--first{
		margin-top: 30%;
		font-size: 35vw;
		letter-spacing: 10px;
}

.title--second{
		margin-top: 45%;
		font-size: 11vw;
		letter-spacing: 5px;
}

	/* ANIMATION TITRE */

	.anim--title1{
		-webkit-animation: effet 1.5s 1;
				animation: effet 1.5s 1;
		-webkit-animation-delay: 0s;
				animation-delay: 0s;
	}

	.anim--title2{
		-webkit-animation: effet--second 5s 1;
				animation: effet--second 5s 1;
		-webkit-animation-delay: 1.5s;
				animation-delay: 1.5s;
		animation-fill-mode: forwards;		
	}

		/* TRANSITION */

		@keyframes effet {
		  0% { opacity: 0; }
		  16%,84% { opacity: 1; }
		  100% { opacity: 0; }
		}

		@keyframes effet--second {
		  0% { opacity: 0; }
		  16%,100% { opacity: 1; }
		}

/* IMAGES */

.container{
	position: relative;
}

.img{
	width: 60%;
}

.img--widthmax{
	width: 100%
}

.img--widthmin{
	width: 48.9%
}

.img--logo{
	width: 30%;
}

.img--center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.img--position{
	position: absolute;
	right: 0%;
	top:150px;
}

.imgcolor{
	filter: grayscale(1);
	-webkit-filter: grayscale(1); 
}

.img--decor1{
	background-image: url(images/gsm.jpg);
	background-position: -70px 10px;
	background-size: 350px;
	background-repeat: no-repeat;
}

.img--decor2{
	background-image: url(images/computer.jpg);
	background-position: -70px 10px;
	background-size: 350px;
	background-repeat: no-repeat;
}

.img--decor3{
	background-image: url(images/women.jpg);
	background-position: -70px 10px;
	background-size: 350px;
	background-repeat: no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2),
		(min-resolution: 192dpi){
			.img--decor1{
				background-image: url(images/gsm@2x.jpg);
			}
			.img--decor2{
				background-image: url(images/computer@2x.jpg);
			}
			.img--decor3{
				background-image: url(images/women@2x.jpg);
			}
	   }

.hide{
	display: none;
}

.columns {
 	border: 1px transparent;
  	grid-template-columns: 100% 100%;
  	margin-top: -3px;
  	margin-right: auto;
  	margin-left: auto;
  	width: 70%;
}

/* FOOTER */

footer {
    width: 100%;
    display: inline-block;
    height: 100%;
    background-color: #0f1315;
    margin-top: 1%;
	color: #dbdbdb;
}

.copyright {
    text-transform: capitalize;
    margin-left: 40px;
    padding: 10px;
}

.container--footer{
	display: flex;
	justify-content: space-between;
	margin-right: 20px;
}


/* VERSION TABLETTE */

@media (min-width: 700px){

.banner{
    background-size: 200%;
}

/* TITRE TABLETTE */

.title{
	left:17%;
}

.title--first{
		margin-top: 15%;
		font-size: 28vw;
		letter-spacing: 10px;
}

.title--second{
		font-size: 9vw;
		letter-spacing: 5px;
}

/* IMAGE TABLETTE */

.img{
	width: 50%;
}

.img--groupe{
	display: flex;
	float: left;
}

.img--decor1{
	background-position: -120px 30px;
	background-size: 650px;
}

.img--decor2{
	background-position: -120px 30px;
	background-size: 650px;
}

.img--decor3{
	background-position: -120px 30px;
	background-size: 650px;
}

.img--position{
	top:250px;
}

.img--widthmin{
	width: 45%;
}

.img--logo{
	width: 20%;
}

.columns {
 	border: 1px transparent;
  	grid-template-columns: 10% 10%;
  	margin-top: -3px;
  	margin-right: inherit;
  	margin-left: inherit;
  	width: 50%;
  	float: right;
}

/* CONTAINER TABLETTE */

.container{
	position: relative;
	float: left;
}

.container2{
	position: relative;
	padding-top: 20px;
}

.container3{
	position: relative;
	padding-bottom: 20px;
}

.container4{
	position: relative;
	padding-bottom: 20px;
	float: left;
}


/* PARAGRAPHE TABLETTE */

.paragraph--ajust{
	padding-top: 600px;
}

.paragraph--ajust2{
	position: relative;
	margin-top: 40px;
}
}





@media (min-width: 1000px){

.banner{
    background-size: 100%;
}

/* ANIMATION */

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  animation-duration: 4s;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  animation-duration: 3s;
}

	/* TRANSITION */

	@-webkit-keyframes fadeInLeft {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(-100%, 0, 0);
	    transform: translate3d(-100%, 0, 0);
	  }

	  to {
	    opacity: 1;
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}

	@keyframes fadeInLeft {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(-100%, 0, 0);
	    transform: translate3d(-100%, 0, 0);
	  }

	  to {
	    opacity: 1;
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	}


	@-webkit-keyframes zoomIn {
	  from {
	    opacity: 0;
	    -webkit-transform: scale3d(0.3, 0.3, 0.3);
	    transform: scale3d(0.3, 0.3, 0.3);
	  }

	  50% {
	    opacity: 1;
	  }
	}

	@keyframes zoomIn {
	  from {
	    opacity: 0;
	    -webkit-transform: scale3d(0.3, 0.3, 0.3);
	    transform: scale3d(0.3, 0.3, 0.3);
	  }

	  50% {
	    opacity: 1;
	  }
	}

/* TITRE PC */

.title{
	left:21%;
}


.title--first{
		margin-right: auto;
		margin-left: auto;
		margin-top: -10%;
		font-size: 20vw;
		letter-spacing: 50px;
}

.title--second{
		margin-top: 15%;
		font-size: 7vw;
		letter-spacing: 20px;
		line-height: 1.5;
}

.burger{
	width: 50px;
	height: 50px;
}

.menu{
	width: 40vw;
}

.paragraph--ajust2{
	position: relative;
	margin-top: 3%;
	left: 5%;
}

/* IMAGES PC */

.img{
	width: 30%;
}

.img--decor1{
	background-position: 25% 10%;
	background-size: 45%;
}

.img--decor2{
	background-position: 25% 10%;
	background-size: 45%;
}

.img--decor3{
	background-position: 25% 0%;
	background-size: 45%;
}

.img--position{
	right: 20%;
	top:22%;
	width: 25%;
}

.img--position2{
	top:8%;
}

.img--widthmin{
	width: 25%;
}

.img--widthmax{
	width: 60%
}

.img--logo{
	width: 10%;
}

/* CONTAINER PC */

.content{
	float: left;
}

.container{
	padding-top: 0px;
	padding-left: 100px;
	padding-right: 100px;
	padding-bottom: 30px;
}

.container4{
	position: relative;
	padding-bottom: 20px;
	float: left;
	margin-left: 15%;
}


/* PARAGRAPHE PC */

.paragraph--ajust{
	padding-top: 50%;
}

.paragraph--ajust3{
	padding-top: 43%;
}


.paragraph{
	margin-left: 25%;
	margin-right: 25%;
	margin-bottom: 5%;
}

.paragraph--deskop1{
	margin-left: 15%;
	margin-right: 40%;
}

.paragraph--deskop2{
	margin-left: 40%;
	margin-right: 15%;
}


.section-video{
	width: 70%;
}

}