body { margin: 0px; padding: 0px; font-family: 'Metropolis';}
header { width:100%; float: left; height: 140px; padding: 12px 15%; box-sizing: border-box;  }
header #logo { height:115px; width:20%; background: url("../images/logo.png") no-repeat; background-size: contain;  float: left}
header .nav { width:40%; float: right; height: 20px; padding: 45px 0px; }
a { text-decoration: none; }
header .nav ul  { padding: 0px; margin: 0px;}
header .nav ul li { list-style: none; width: auto; padding: 0px 12px; line-height: 20px; color: #e2417a; font-weight: 600; display: inline; text-transform: uppercase; font-size: 16px;}
header .nav ul li:hover { color: #333;}
header .nav .icon { display: none;}

section#banner { width: 100%; float: left; box-sizing: border-box; padding: 0px 15%; background: url("../images/banner.jpg")  fixed no-repeat; background-size: cover;  height: 48vw; position: relative; background-position: right top; }
section#banner .box { width:50%; float: right; position: absolute; right: 10%; top: 5%; }
section#banner .box h2 { font-size: 3vw; color: #fff; font-weight: 500; line-height: 1.1;  text-align: center; margin-bottom: 10px;}
section#banner .box h1 { font-size: 4vw; color: #f33c7a; font-weight: 800; line-height: 1.1; margin-top: 0px;  text-align: center; text-transform: uppercase; letter-spacing: 5px; }


section#welcome { width: 100%; background: #e64f7c;  float: left; box-sizing: border-box; padding: 0px 15% 50px;  height: auto;  }
section#welcome .box1 { width:55%; float: left; padding: 70px 5px 70px 0px; box-sizing: border-box; }
section#welcome .box1 h2 { font-size: 3vw; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-weight: 600; line-height:1.1; margin-bottom: 0px; }
section#welcome .box1 p { font-size: 1.6vw;  letter-spacing:1px; color: #fff; font-weight: 400; line-height: 1.4; }
section#welcome .box2 { position: relative; right: 0%; top: 0px; width: 45%; float: right}
section#welcome .box2 img { width:100%; background-size: contain; }
section#welcome .box2 .img1 { position: absolute; top: -5%; left: -5%; animation: 2s infinite movem; animation-delay: 1s;  }
@keyframes movem { 0% { left: -5%; top: 0px;} 50% { left: 2%; top: 0px;} 100% { left:-5%; top: 0px;}}


section#usps { width: 100%; background: #d9d9d9;  float: left; box-sizing: border-box; padding: 60px 15% 60px;  height: auto; position: relative;}
section#usps .imgs { position: absolute; z-index: 9; left: 0px; top: 10px;  background-size: contain;  animation: 4s infinite bounce; animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;}
@keyframes bounce { 0% {  top: 0px;} 50% {  top: 10px;} 100% {  top: 0px;}}
section#usps .contents { width: 100%; float: left; }
section#usps .contents  h2 { font-size: 3vw; text-transform: uppercase; letter-spacing: 2px; color: #e64f7c; font-weight: 600; line-height:1.1; margin-bottom: 0px; text-align: center;}
section#usps .contents p { font-size: 1.4vw;  letter-spacing:1px; color: #e64f7c; font-weight: 400; line-height: 1.2;text-align: center; margin-top: 10px;  margin-bottom: 50px;}
section#usps .contents .box { width:25%; float: left; box-sizing: border-box; padding: 10px;}
section#usps .contents .box img { width:60%; margin:0px 20%; background-size: contain;}
section#usps .contents .box p { font-size: 1.2vw;  letter-spacing:1px; color: #e64f7c; font-weight: 400; line-height: 1.1;text-align: center;}


section#gallery { width: 100%; background: #d9d9d9;  float: left; box-sizing: border-box; padding: 0px 0% 0px;  height: auto; position: relative; background: #d9d9d9}
section#gallery ul { margin: 0px; padding: 0px; float:left}
section#gallery ul li { width:25%; float: left; list-style: none}
section#gallery ul li img { width:100%; background-size: contain; display: block;}
section#gallery .ars { width:100%; float: left; }
section#gallery .btn { color: #e64f7c;  width: 160px; font-size: 20px; padding: 10px 15px; margin:50px auto 0px; display: block;  border: 1px solid #e64f7c;; border-radius: 10px; text-align: center; font-weight: 400; cursor: pointer; }

section#gallery .mor::after{ content: "SEE MORE"}
section#gallery .les::after{ content: "SEE LESS"}
section#gallery .more { display: none; }
section#gallery .vis { display: inherit; } 
section#gallery  .imgdf { position: absolute; bottom: -10%; right: 10px; height: 15vw; width: 10vw; animation: 2s infinite movems; z-index: 9999;   }
@keyframes movems { 0% { right: 10px } 50% { right: 30px} 100% { right:10px; }}


section#advantages { width: 100%; background: url("../images/advantages-bg.jpg") no-repeat; background-size: cover;   float: left; box-sizing: border-box; padding: 60px 15% ;  height: auto; position: relative; z-index: 99; }

section#advantages h2 { font-size: 2.5vw; text-transform: uppercase;  color: #fff; font-weight: 700; line-height:1.1; margin-bottom: 0px; letter-spacing: 3px;text-align: center; margin-bottom: 0px; }
section#advantages h5 { font-size: 1.3vw;  color: #fff; font-weight: 400; line-height:1.2; margin-bottom: 30px;  text-align: center; margin-top: 10px;}
section#advantages .box { width:50%; float: left; box-sizing: border-box; padding-right: 5%; }
section#advantages .box h3 { font-size: 1.3vw;  color: #fff; font-weight: 500; line-height:1.1; margin-bottom: 0px; }
section#advantages .box p { font-size: .9vw;  color: #fff; font-weight: 400; line-height:1.1; margin-bottom: 40px; margin-top: 10px;  }


section#contact { width: 100%; background: url("../images/contact-bg.jpg") no-repeat; background-size: cover;   float: left; box-sizing: border-box; padding: 80px 15% ;  height: auto; position: relative; z-index: 99; }
section#contact  h2 { color:#fff; text-transform: uppercase; margin-bottom: 10vw; font-size: 2.5vw; line-height: 1.1; text-align: center; font-weight: 500;}
section#contact .texts { height: 45px; line-height: 45px; background: #fff; width: 30%; padding: 10px; box-sizing: border-box;  margin-bottom: 35px; border: 0px; font-size: 16px;}
section#contact .mars { margin-right: 4.4%;}
section#contact .tets { width:100%; background: #fff; height: 220px; padding: 10px; box-sizing: border-box; border: 0px;  font-size: 16px;}
section#contact .bttn { width:200px; text-align: center; height: 50px; background:#f33c7a; border: none; color: #fff; font-size: 17px; margin: 50px auto 10px; display: table; }
::placeholder { font-size: 16px !important; font-family: 'Metropolis'; }

.clear { width:100%; float: left; height:100px; background: #d9d9d9}

footer {width:100%; float:left; background: #fff; padding: 20px 15%; box-sizing: border-box; }
footer p { width:40% ; float: right; font-size: 16px; font-weight: 400; color: #f33c7a;  text-align: right; line-height: 50px;}
footer .navigation  { width:50%; float: left;}
footer .navigation ul {  padding: 0px; }
footer .navigation ul li { list-style: none;  line-height: 50px; font-size: 16px; color: #f33c7a; font-weight: 400; float: left; width: auto; padding: 15px 10px; display: block; }
footer .left { width:25%; float: left}
footer .social { width:140px; float: left; padding: 20px 0px; }
footer .social .fb { height: 25px; width: 25px; margin-right: 10px; float: left; background: url("../images/sc.png") no-repeat; background-position: 0px 0px; }
footer .social .tw { height: 25px; width: 25px; margin-right: 10px; float: left; background: url("../images/sc.png") no-repeat; background-position: -25px 0px; }
footer .social .insta { height: 25px; width: 25px; margin-right: 10px; float: left; background: url("../images/sc.png") no-repeat; background-position: -65px 0px; }
footer .social .pin { height: 25px; width: 25px; margin-right: 10px; float: left; background: url("../images/sc.png") no-repeat; background-position: -102px 0px; }

#myLinks { display: inherit}
.icon { display: none;}

@media only screen and (max-width:678px) {
	header { padding: 10px 5%;  height: 80px;}
	
	header  .icon { display: inherit; position: absolute; top: 25px; right: 5%;  height: 25px; width: 25px; z-index: 999999;}
	header  .icon i { color: #f33c7a; font-size: 23px;}
	#myLinks { display: none;}
	header .nav { width:100%;  position: absolute ; padding: 0px;z-index: 9999; left: 0px; top: 60px;}
	#myLinks {width: 100%;background: #333;}
	header .nav ul li { width:100%; text-align: center; line-height: 50px; display: block; font-size: 13px;}
	header .nav ul li:hover { color: #fff; }
	header #logo { height: 60px;}
	section#banner { height: 110vw; background: url("../images/banner-mobile.jpg") no-repeat; background-size: contain; }
	section#banner .box { width:100%; position: inherit; right: 0px;}
	section#banner .box h2 { font-size: 25px;}
	section#banner .box h1 { font-size: 40px;}
	section#welcome, section#usps, section#advantages, section#contact, footer { padding: 30px 5%; }
	section#welcome .box1 { width:100%;  padding: 0px 0px 30px 0px}
	section#welcome .box2 { width:100%; }
	section#welcome .box1 h2, section#usps .contents h2, section#advantages h2 { font-size: 26px; text-align: center;} 
	section#welcome .box1 p, section#usps .contents p { font-size: 18px; text-align: center;} 
	section#welcome .box1 p  br, section#usps .contents p br, section#advantages h5 br { display: none;}
	section#usps .imgs img {height: 200px; margin-top: 35vw }
	section#usps .contents .box { width:100%; }
	section#usps .contents .box img { width: 160px; margin: 10px auto; display: block; }
	section#usps .contents .box p { font-size: 20px;}
	section#gallery ul li { width:50%; }
	section#advantages h5 { font-size: 18px;}
	section#gallery .imgdf { bottom:5%; width: 100px; height: 148px; z-index: 99999}
	section#advantages .box { width:100%}
	section#advantages .box h3 { font-size: 22px; text-align: center; }
	section#advantages .box p { font-size:15px; text-align: center;  line-height: 1.3}
	section#contact h2 { font-size: 24px; margin-bottom: 50px;}
	section#contact .texts { width:100%; ; margin-bottom: 20px;}
	section#contact .mars { margin-right: 0px;}
	footer .navigation { width:100%;}
	footer p {width:100%;   text-align: center; line-height: 20px; }
	footer .social { margin: 15px auto; display: table; float: none; }
	footer .left { width:100%; }
	footer .social { margin: 0px auto; }
	footer .navigation ul li { width:100%; text-align: center;  line-height: 40px; padding: 0px; background: #76737b; margin-bottom: 5px; color: #fff; }
	footer .navigation ul li:hover { background: #e64f7c}
	footer .navigation ul { width:100%; }
}


@media only screen and (min-width:679px) and (max-width:800px) {
	header { padding: 10px 5%;  height: 80px;}
	
	header  .icon { display: inherit; position: absolute; top: 25px; right: 5%;  height: 25px; width: 25px; z-index: 999999;}
	header  .icon i { color: #f33c7a; font-size: 23px;}
	#myLinks { display: none;}
	header .nav { width:100%;  position: absolute ; padding: 0px;z-index: 9999; left: 0px; top: 60px;}
	#myLinks {width: 100%;background: #333;}
	header .nav ul li { width:100%; text-align: center; line-height: 50px; display: block; font-size: 13px;}
	header .nav ul li:hover { color: #fff; }
	header #logo { height: 60px;}
	section#banner { height: 110vw; background: url("../images/banner-mobile.jpg") no-repeat; background-size: contain; }
	section#banner .box { width:100%; position: inherit; right: 0px;}
	section#banner .box h2 { font-size: 32px;}
	section#banner .box h1 { font-size: 55px;}
	section#welcome, section#usps, section#advantages, section#contact, footer { padding: 30px 5%; }
	section#welcome .box1 { width:100%;  padding: 0px 0px 30px 0px}
	section#welcome .box2 { width:100%; }
	section#welcome .box1 h2, section#usps .contents h2, section#advantages h2 { font-size: 26px; text-align: center;} 
	section#welcome .box1 p, section#usps .contents p { font-size: 18px; text-align: center;} 
	section#welcome .box1 p  br, section#usps .contents p br, section#advantages h5 br { display: none;}
	section#usps .imgs img {height: 200px; margin-top: 15vw }
	section#usps .contents .box { width:50%; }
	section#usps .contents .box img { width: 160px; margin: 10px auto; display: block; }
	section#usps .contents .box p { font-size: 20px;}
	section#gallery ul li { width:50%; }
	section#advantages h5 { font-size: 18px;}
	section#gallery .imgdf { bottom:5%; width: 100px; height: 148px; z-index: 99999}
	section#advantages .box { width:100%}
	section#advantages .box h3 { font-size: 22px; text-align: center; }
	section#advantages .box p { font-size:15px; text-align: center;  line-height: 1.3}
	section#contact h2 { font-size: 24px; margin-bottom: 50px;}
	section#contact .texts { width:100%; ; margin-bottom: 20px;}
	section#contact .mars { margin-right: 0px;}
	footer .navigation { width:100%;}
	footer p {width:100%;   text-align: center; line-height: 20px; }
	footer .social { margin: 15px auto; display: table; float: none; }
	footer .left { width:100%; }
	footer .social { margin: 0px auto; }
	footer .navigation ul li { width:100%; text-align: center;  line-height: 40px; padding: 0px; background: #76737b; margin-bottom: 5px; color: #fff; }
	footer .navigation ul li:hover { background: #e64f7c}
	footer .navigation ul { width:100%; }
}

@media only screen and (min-width:801px) and (max-width:1000px) {
	header { padding: 10px 5%;  height: 110px;}
	header #logo { height: 80px;}
	section#welcome, section#usps, section#advantages, section#contact, footer { padding: 30px 5%; }
	header .nav { width:60%; }
	section#usps .imgs img {height: 300px; margin-top:5vw }
	
	section#welcome .box1 h2 { font-size: 26px; text-align: left;} 
	section#usps .contents h2,section#advantages h2  { font-size: 26px; }
	section#welcome .box1 p { font-size: 18px; text-align: left;} 
	section#usps .contents p  { font-size: 18px; }
	section#welcome .box1 p  br,  section#advantages h5 br { display: none;}
	section#usps .contents .box p { font-size: 20px !important; }
	section#advantages h5 { font-size: 18px; }
		section#advantages .box { width:100%}
	section#advantages .box h3 { font-size: 22px; text-align: center; }
	section#advantages .box p { font-size:15px; text-align: center;  line-height: 1.3}
	section#contact .texts { width:100%; ; margin-bottom: 20px;}
	section#contact .mars { margin-right: 0px;}
	footer p { line-height: 20px;}
	
}

@media only screen and (min-width:1000px) and (max-width:1100px) {
	header { padding: 10px 5%;  height: 110px;}
	header #logo { height: 80px;}
	section#welcome, section#usps, section#advantages, section#contact, footer { padding: 30px 5%; }
	header .nav { width:60%; }
	section#usps .imgs img {height: 300px; margin-top:5vw }
	
	section#welcome .box1 h2 { font-size: 26px; text-align: left;} 
	section#usps .contents h2,section#advantages h2  { font-size: 26px; }
	section#welcome .box1 p { font-size: 18px; text-align: left;} 
	section#usps .contents p  { font-size: 18px; }
	section#welcome .box1 p  br,  section#advantages h5 br { display: none;}
	section#usps .contents .box p { font-size: 20px !important; }
	section#advantages h5 { font-size: 18px; }
	section#advantages .box { width:100%}
	section#advantages .box h3 { font-size: 22px; text-align: center; }
	section#advantages .box p { font-size:15px; text-align: center;  line-height: 1.3}
	section#contact .texts { width:100%; ; margin-bottom: 20px;}
	section#contact .mars { margin-right: 0px;}
	footer p { line-height: 20px;}
	
}

@media only screen and (min-width:1200px) and (max-width:1300px) { 

	.imgs img { height: 30vw; } 
	section#contact .mars { margin-right: 4.4%; }
	
	
}


@media only screen and (min-width:1300px) and (max-width:1400px) { 

	.imgs img { height: 35vw; } 
	section#contact .mars { margin-right: 4.4%; }
	
	
}