#logo {
  background: url(../img/logo.png) no-repeat scroll top center;
  background-size: cover;
}
#girl{
  background: url(../img/girl.png) no-repeat scroll top center;
  background-size: cover;
}
.section1 {
  background: url(../img/bg.jpg) no-repeat;
  background-size:100% 100%;
   background-position: center top;
    background-attachment: fixed;
}
.section2{
  background: url(../img/bg2.jpg) no-repeat;
  background-size:auto 100%;
  background-position: center top;
}
.section3{
  background: url(../img/bg3.jpg) no-repeat;
  background-size: auto 100%;
  background-position: right top;
}

@media(min-width: 768px){
	#logo {
    	width: 179px;
    	height: 124px;
	}
	#girl {
    	width: 653px;
		height: 499px;
	}
}
/*retina css*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
  #logo {
  	background: url(../img/logo-@2.png) no-repeat scroll top center;
  	background-size: cover;
  }
  #girl{
  	background: url(../img/girl-@2.png) no-repeat scroll top center;
  	background-size: cover;
  }
  .section1 {
  	background: url(../img/bg-@2.jpg) no-repeat;
  	background-size:100% 100%;
	   background-position: center top;
	    background-attachment: fixed;
  }
  .section2{
  	background: url(../img/bg2-@2.jpg) no-repeat;
  	background-size:auto 100%;
	  background-position: center top;
  }
  .section3{
  	background: url(../img/bg3-@2.jpg) no-repeat;
  	background-size: auto 100%;
	  background-position: right top;
  }

}

@media only screen and (min-width: 1400px){
	#logo{
		width: 179px;
		height:124px;
	}
	#girl{
		width: 866px;
		height: 578px;
	}
	.img-container .arrow{
		width: 300px;
	}
  .section3{
    background-size: auto 70%;
    background-position: right 50%;
  }
}
@media only screen and (min-width: 1600px){
	#logo{
		width: 206px;
		height:141px;
	}
	#girl{
		width: 990px;
		height: 660px;
	}
	.img-container .arrow{
		width: 300px;
	}
  .section3{
    background-size: auto 70%;
    background-position: right 50%;
  }
}
@media only screen and (min-width: 2000px){
	#logo{
		width: 362px;
		height:250px;
	}
	#girl{
		width: 1500px;
		height: 1000px;
	}
	h2:before{
		height: 10px;
		width: 200px;
		margin-top: 96px;
	}

	h2 {
		font-size: 64px;
		line-height: 1.5;
		margin-bottom: 24px;

	}
	.section2 h2:before {
	  left:0;
	  right: 0;
	  margin: 96px auto auto;
	}
	body, p,.name, .email, .mesaj {
		font-size: 24px;
		line-height: 1.5;
	}
	.btn {
		font-size: 24px;
		padding: 24px 96px;
		border-radius: 50px;
		margin-top: 64px;
	}
	.section3 .btn::after{
		border-radius: 46px;
	}
	.img-container .arrow{
		width: 400px;
	}
  .section3{
    background-size: auto 70%;
    background-position: right 50%;
  }
}
/*end retina css*/

@media only screen and (max-width: 781px){
	
  #logo{
		width: 179px;
		height:124px;
	}
	#girl{
		width: 300px;
		height: 246px;
	}
  .section1 {
    background-attachment: scroll;
    background-size: auto 100%;
  }
  .section1 .caption, .section3 .caption{
    position: relative;
    top: 50%;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    width: 94%;
    padding: 90px 3%;
  }
  .btn{
    width: 100%;
  }
  .section2 .caption{
    position: static;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  #logo {
   position: static;
  }
  h2{font-size: 24px;line-height: 24px}
  .section1 {
    padding-bottom: 300px;
  }
  #girl{
    margin-right: 30%;
  }
  .btn{
    padding: 15px 0;
    font-size: 13px;
  }
  h2::before{margin-top: 21px;height: 3px;}
  .section3{
  background-size: 150% auto ;
  background-position: bottom right;
}
.section3 .caption{
  padding-bottom: 300px
}
.products .item{
  width: 50%;
}
.ct-left, .ct-right {
  width: 100%;
}
.img-container .arrow{
  width: 100px
}
}