@import url('https://fonts.googleapis.com/css?family=Baloo+Da|Exo+2|Great+Vibes|Montserrat|Open+Sans|Poiret+One');

html {
font-family: Ubuntu, sans-serif;
font-family: 'Exo 2', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Great Vibes', cursive;
font-family: 'Baloo Da', cursive;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
    font-size: 100%;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body { width: 100%; height:auto; padding:0; margin:0; margin: auto; background: #ffffff; font-family: Ubuntu, sans-serif; font-size: 14px; color: #3c444d; }
a:link { text-decoration: none; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
a:visited {text-decoration: none; }
a:hover {text-decoration: none; }
a:active { text-decoration: none; } 
ol, ul, li { list-style-type:none; }
h1 {font-family: 'Montserrat', sans-serif;}
h2 {font-family: 'Exo 2', sans-serif;}

#wrapper { width: 100%; margin: 0 auto; }
.clear {clear: both;}
header { width: 100%; height: 105px; position: fixed; top: 0; left: 0; z-index: 9999999; clear: both; background-color: #ffffff; -webkit-transition: height 0.3s; -moz-transition: height 0.3s;
  -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; }
header img#logo { display: inline-block; position: fixed; top: 10px; height: 75px; border-radius: 3px; line-height: auto; float: left;  -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
header img#icon {display: inline-block; height: 24px; margin: 10px 0px 10px 10px; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
header img#icon:hover { -moz-transform: rotate(24deg); -webkit-transform: rotate(24deg); -o-transform: rotate(24deg); -ms-transform: rotate(24deg); transform: rotate(24deg); opacity: 0.5; }
header.smaller { height: 70px; background: #66C2FF; background-image:url('navsmallbg.jpg'); background-repeat: no-repeat; background-size: 100% 100%;  background-attachment: fixed; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out; border-bottom: 5px solid #4C4CFF; }
header.smaller a {color: #FAF0E6;}
header.smaller img#logo { height: 45px; }
header.smaller img#icon { height: 16px; margin: 5px 0px 5px 10px; }
header.smaller nav > ul { font-family: Open Sans; font-weight: bold; font-size: 87.5%; letter-spacing: 0px; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
header.smaller nav > ul > li { text-align: center; line-height: 30px; }
.inner { max-width: 96%; margin: 0 auto; padding: 0px; position: relative; }
nav > ul { float: right; list-style-type: none; font-family: Open Sans; font-weight: bold; font-size: 100%; letter-spacing: 0.5px; }
nav > ul > li { text-align: center; line-height: 50px; 	padding: 0px 22px 0px 22px; }
nav > ul li ul li { width: 100%; text-align: left; }
nav ul li:hover { cursor: pointer; position: relative; }
nav ul li:hover > ul { display: block; }
nav ul li:hover > a { color: #ff0000;}
nav > ul > li > a { cursor: pointer; display: block; outline: none; width: 100%; text-decoration: none; }
nav > ul > li { float: left; }
nav a { color: #003D5C; }
nav > ul li ul { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 9999; }
nav > ul li ul li > a { text-decoration: none; }
[type="checkbox"], label { display: none; }
@media screen and (max-width: 1024px) { 
header img#logo { display: block; float: left; margin: 0 auto; height: 55px; }
nav ul { display: none; margin-top: 50px; margin-right: 50px; }
header label { display: block; background: #ffffff; width: 50px; height: 40px; cursor: pointer; position: absolute; right: 20px; top: 0px; border: 1px solid #003D5C; }
header label:after{ content:''; display: block; width: 40px; height: 8px; background: #003D5C; margin: 7px 5px; box-shadow: 0px 10px 0px #003D5C, 0px 20px 0px #003D5C }
[type="checkbox"]:checked ~ ul { display: block; z-index: 999; position: absolute; right: 20px; left: 20px; }
nav a { background: #0099FF; color: #003D5C; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
nav a:hover { background: #66C2FF; }
nav ul li { display: block; width: 100%; text-align: center; background: #0099FF; border: 1px solid #BFCED6; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
nav ul li:hover { background: #66C2FF; 	}
nav > ul > li { margin-left: 0px; }
nav > ul li ul li { display: block; float: none; }
nav > ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; }
}
.navawake { background: #4C4CFF; padding: 0px 30px 0px 30px; border-radius: 3px; -webkit-transform: translateZ(0);   transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;   position: relative;
  -webkit-transition-property: color; transition-property: color;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s; }
.navawake::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FFD98C; -webkit-transform: scaleY(0); transform: scaleY(0);
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.navawake:hover, .navawake:focus, .navawake:active { color: white; }
.navawake:hover:before, .navawake:focus:before, .navawake:active:before { -webkit-transform: scaleY(1);   transform: scaleY(1);  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }
.top { width: 100%; margin: 0 auto; padding: 0; }
.clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
#main { background-color: #fff; padding-top: 105px; }
#cometop {width: 100%; height: 0px; clear: both; }
#slidearea {width: 100%; height: 560px; margin: auto; clear: both; background: #000F1F;}
.c50left {width: 50%; height: auto; padding-right: 12px; float: left; text-align: justify;}
.c50right {width: 50%; height: auto; padding-left: 12px; float: right; text-align: justify;}
@media screen and (max-width: 1080px) and (min-width: 768px) {
.c50left {width: 100%; float: none; clear: both;}
.c50right {width: 100%; float: none; margin-top: 50px; clear: both;}
}

@media screen and (max-width: 767px) and (min-width: 220px)  {
.c50left {width: 100%; float: none; clear: both;}
.c50right {width: 100%; float: none; margin-top: 50px; clear: both;}
}
#divbg {width: 100%; height: 380px; position: relative; }
.bgdivtxt {width: auto; height: auto;  position: absolute; text-align: center; top: 45%; left: 40%; font-family: 'Montserrat', sans-serif; font-size: 48px; font-weight: bold; color: #3333FF;}
#welcome { width: 100%; height:auto; margin: auto; padding:40px 2%; }
#welcome h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#welcome h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
#aboutarea {width: 100%; height: auto;}
#aboutus { width: 100%; height:auto; margin: auto; padding:40px 2%; text-align: justify; }
#aboutus h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#aboutus h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
#servicesarea {width: 100%; height: auto;}
#services { width: 100%; height:auto; margin: auto; padding:40px 2%; text-align: justify; }
#services h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#services h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
#keypersonnel {width: 100%; height: auto;}
#kp { width: 100%; height: auto; margin: auto; padding:40px 2%; text-align: justify;}
#kp h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#kp h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
.kpimgblk {
  position: relative;
  width: 25%;
  float: left;
  padding: 15px;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.kpimgblk  {position: relative;
  width: 50%;
  float: left;
  padding: 15px;}
}

@media screen and (max-width: 767px) and (min-width: 220px)  {
.kpimgblk {position: relative;
  width: 100%;
  float: left;
  padding: 15px;}
}
.kpimage {
  display: block;
  width: auto;
  height: 190px;
  margin: auto;
  border-radius: 3px;
}

.kpoverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #0f1829;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  border-radius: 3px;
}

.kpimgblk:hover .kpoverlay {
  height: 100%;
  cursor: pointer;
}

.kptext {
  white-space: nowrap; 
  color: #b8c1d2;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#membership {width: 100%; height: auto;}
#member { width: 100%; height:auto; margin: auto; padding:40px 2%; text-align: justify; }
#member h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#member h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
#products {width: 100%; height: auto; margin: 20px auto; padding: 10px 2%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#products h2 {font-size: 24px; font-weight: bold; color: #F2910D; padding: 15px 0px;}
#products h3 {font-size: 18px; font-weight: bold; padding: 5px 0px;}
.orderbtn {width: 180px; height: auto; text-align: center; padding: 15px 10px; margin: 15px auto; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; color: #FFF5E6; background: #F2910D; border-radius: 3px;}
.orderbtn:hover {background: #FF6E0D;}
#ordernow {width: 100%; min-height: 500px; height: auto; margin: 20px auto; padding: 10px 2%;}

#gallery { width: 100%; min-height: 640px; height:auto; margin: auto; padding:40px 0.0005%;}
#gallery img {width: 16%; height: 180px; box-sizing: border-box; border: 3px solid #f2f2f2; border-radius: 2px; padding: 1px;}
@media screen and (max-width: 1080px) and (min-width: 768px) {
#gallery img {width: 20%; height: 200px; box-sizing: border-box; border: 3px solid #f2f2f2; border-radius: 2px; padding: 1px;}
}    
@media screen and (max-width: 767px)  {
#gallery img {width: 24%; height: 220px; box-sizing: border-box; border: 3px solid #f2f2f2; border-radius: 2px; padding: 1px;}    
}    
#contactus { width: 100%; min-height: 900px; height:auto; margin: auto; padding:60px 2%; background: #000514; color: #A6A8AD;}
#contactus h2 {font-family: 'Exo 2', sans-serif; font-size: 36px; margin: 10px 0px;}
#contactus h3 {font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0px;}
#footer { display: block; width: 100%; min-height: 450px; height:auto; margin: auto; padding: 70px 2%; background: #000514; background-image:url('footerbg.jpg'); background-repeat:no-repeat; background-size: 100% 100%;  background-attachment: fixed;
font-family: 'Open Sans', sans-serif; color: #B2B2FF; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.f25 { display: block; width: 25%; min-height: 200px; height: auto; float: left; padding: 5px; margin-bottom: 25px; }
.f25 li { list-style-image: url('rightarrow14.png'); list-style-position: inside; }
.f25 li a { color: #B2B2FF; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; text-transform: uppercase; }
.f25 li a:hover {color:#FFFAF7;}
.f25 img { -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
  backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;
    -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.f25 img:hover, .f25 img:focus, .f25 img:active { opacity: 0.5; -webkit-transform: skew(-20deg); transform: skew(-20deg); }
.f25 h3 {font-weight: bold; font-size: 16px; margin-bottom: 15px;}
.f50 { display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: bold; width: 50%; min-height: 100px; height: auto; float: left; padding: 10px 0px;}

#footer input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: 'Open Sans', sans-serif;
    font-weight: bold; color: #26A8FF; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out }
#footer input[type=text]:focus {background:#8CD1FF;}
#footer input[type=submit] { width: 60%; background-color: #009900; color: #E6F5E6; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; float: right;
    font-family: 'Open Sans', sans-serif; font-weight: bold; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#footer input[type=submit]:hover { background-color: #0075ED; }
@media screen and (max-width: 1080px) and (min-width: 768px) {
#footer {display: block; width: 100%; min-height: 650px; height: auto; margin: auto; padding: 20px 2%;}
.f25 { width: 50%;}    
.f50 {  width: 100%; float: none; clear: both;}
}
@media screen and (max-width: 767px) and (min-width: 220px) {
#footer {display: block; width: 100%; min-height: 800px; height: auto; margin: auto; padding: 20px 2%;}
.f25 { width: 100%; float: none; clear: both;}    
.f50 { width: 100%; float: none; clear: both;}
}


/* start feedback forms */
.field_set { width: 100%; height: auto; padding: 5px; font-family: 'Open Sans', sans-serif; }
.field_set p { font-size: 14px; line-height:16px; text-align: left; color: #f2f2f2;  margin: 5px; padding: 0px; font-weight: bold; }
.form_title { width: 20%; height: auto; display: inline-block; padding: 10px 10px; border: 1px solid #BFCCD9; font-weight: bold;  font-size: 14px; text-align: center; color:#E6F5FF; background: #3c444d; text-shadow: 2px 2px #000000; }
.field_set input[type="text"] { font-size: 14px; border: 1px solid #BFCCD9; color: #01A9DB; font-weight: bold; padding: 10px 10px; width:60%; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.field_set input[type="text"]:focus {background: #99D6FF;}
.field_set textarea {width:60%; font-size: 14px; font-weight: bold; color: #003366; border: 1px solid #BFCCD9; padding: 10px 10px; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;   }
.field_set textarea:focus {background: #0099FF; color: #BFE6FF;}
.field_set input[type="submit"] { font-size: 16px; font-weight: bold; text-shadow: 1px 1px #000000; background: #009900; color: #E6F5E6; padding: 15px 35px; border: none; border-radius: 3px; margin: 15px 20%;  -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.field_set input[type="submit"]:hover {background: #0057FF; cursor: pointer;}
.required { font-size: 16px; color: #ff0000; position: relative; top: 1px; margin: 0px 3px;}
.not_required { font-size: 16px; color: #45c2ed; position: relative; top: 1px; margin: 0px 3px; }
.form_message_success { width: 90%; height: auto; font-size: 14px; color: #0579fc; display: block; padding: 10px; border: 0px solid #45c2ed; margin: 10px 0px; }
.form_message_fail { width: 90%; height: auto;font-size: 14px; color: #ff0000; display: block; padding: 10px; border: 0px solid #ff0000; margin: 10px 0px; }
.yes { font-size: 14px; color: #01A9DB; padding: 5px; }
.no { font-size: 14px; color: #FF6600; padding: 5px; }
/* End feedback forms */
/* start lightbox */
.lightbox body:after { content: url(close.png) url(loading.gif) url(prev.png) url(next.png); display: none; }
.lightboxOverlay { position: absolute;  top: 0; left: 0; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; display: none; }
.lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal; }
.lightbox .lb-image { display: block; height: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.lightbox a img { border: none; }
.lb-outerContainer { position: relative; background-color: white; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px;
  -o-border-radius: 4px; border-radius: 4px; }
.lb-outerContainer:after { content: ""; display: table; clear: both; }
.lb-container { padding: 0px; }
.lb-loader { position: absolute; top: 43%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
.lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto;  background: url(loading.gif) no-repeat; }
.lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
.lb-container > .nav { left: 0; }
.lb-nav a { outline: none; }
.lb-prev, .lb-next { width: 49%; height: 100%; cursor: pointer; display: block; }
.lb-prev { left: 0; float: left; }
.lb-prev:hover { background: url(prev.png) left 48% no-repeat; }
.lb-next { right: 0; float: right; }
.lb-next:hover { background: url(next.png) right 48% no-repeat; }
.lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.lb-dataContainer:after { content: ""; display: table; clear: both; }
.lb-data { padding: 0 4px; color: #bbbbbb; }
.lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; }
.lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; }
.lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999999; }
.lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; background: url(close.png) top right no-repeat; text-align: right; outline: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
.lb-data .lb-close:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
/* end lightbox, slider start */
svg {
  display: block;
  overflow: visible;
}

.slider-container {
  position: relative;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: all-scroll;
  overflow: hidden;
}

.slider-control {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  will-change: opacity;
  opacity: 0;
}
.slider-control.inactive:hover {
  cursor: auto;
}
.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: pointer;
}
.slider-control.left {
  left: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
  right: 0;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider-pagi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 0;
  list-style-type: none;
}
.slider-pagi__elem {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}
.slider-pagi__elem:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.slider {
  z-index: 1;
  position: relative;
  height: 100%;
}
.slider.animating {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}
.slider.animating .slide__bg {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  will-change: transform;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slide.active .slide__overlay,
.slide.active .slide__text {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slide__bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background-size: cover;
  will-change: transform;
}
.slide:nth-child(1) {
  left: 0;
}
.slide:nth-child(1) .slide__bg {
  left: 0;
  background-image: url("01.jpg");
}
.slide:nth-child(1) .slide__overlay-path {
  fill: #e99c7e;
}
@media (max-width: 991px) {
  .slide:nth-child(1) .slide__text {
    background-color: rgba(233, 156, 126, 0.8);
  }
}
.slide:nth-child(2) {
  left: 100%;
}
.slide:nth-child(2) .slide__bg {
  left: -50%;
  background-image: url("02.jpg");
}
.slide:nth-child(2) .slide__overlay-path {
  fill: #e1ccae;
}
@media (max-width: 991px) {
  .slide:nth-child(2) .slide__text {
    background-color: rgba(225, 204, 174, 0.8);
  }
}
.slide:nth-child(3) {
  left: 200%;
}
.slide:nth-child(3) .slide__bg {
  left: -100%;
  background-image: url("03.jpg");
}
.slide:nth-child(3) .slide__overlay-path {
  fill: #adc5cd;
}
@media (max-width: 991px) {
  .slide:nth-child(3) .slide__text {
    background-color: rgba(173, 197, 205, 0.8);
  }
}
.slide:nth-child(4) {
  left: 300%;
}
.slide:nth-child(4) .slide__bg {
  left: -150%;
  background-image: url("04.jpg");
}
.slide:nth-child(4) .slide__overlay-path {
  fill: #cbc6c3;
}
@media (max-width: 991px) {
  .slide:nth-child(4) .slide__text {
    background-color: rgba(203, 198, 195, 0.8);
  }
}
.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-height: 810px;
  -webkit-transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
  will-change: transform, opacity;
  -webkit-transform: translate3d(-20%, 0, 0);
          transform: translate3d(-20%, 0, 0);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__overlay {
    display: none;
  }
}
.slide__overlay path {
  opacity: 0.8;
}
.slide__text {
  position: absolute;
  width: 25%;
  bottom: 15%;
  left: 12%;
  color: #fff;
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  will-change: transform, opacity;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
}
@media (max-width: 991px) {
  .slide__text {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20rem;
    text-align: center;
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
    padding: 0 1rem;
  }
}
.slide__text-heading {
  font-family: "Polar", Helvetica, Arial, sans-serif;
  font-size: 5rem;
  margin-bottom: 2rem;
}
@media (max-width: 991px) {
  .slide__text-heading {
    line-height: 20rem;
    font-size: 3.5rem;
  }
}
.slide__text-desc {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .slide__text-desc {
    display: none;
  }
}
.slide__text-link {
  z-index: 5;
  display: inline-block;
  position: relative;
  padding: 0.5rem;
  cursor: pointer;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 2.3rem;
  -webkit-perspective: 1000px;
          perspective: 1000px;
          color: #FCF7F2;
}
@media (max-width: 991px) {
  .slide__text-link {
    display: none;
  }
}
.slide__text-link:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: rotateX(-85deg);
          transform: rotateX(-85deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  will-change: transform;
}
.slide__text-link:hover:before {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}
/* slider end */