@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
#preloader {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #FFFFFF;z-index: 99;background-repeat: repeat;}
#status {width: 540px;height: 100px;position: absolute;left: 50%; top: 50%;background-image: url(../images/pre12.gif);background-size: contain;background-repeat: no-repeat;background-position: center center;text-align: center;vertical-align: bottom;margin-top: -100px;margin-right: 0;margin-bottom: 0;margin-left: -270px;
}
* {font-family: 'Lato', sans-serif;margin: 0px;padding: 0px;font-weight: 300;}
.clear {clear: both;}
.float-left {float: left;}
.float-right {float: right;}
h1, h2, h3, h4, h5, h6 {font-weight: 300;}
a {text-decoration: none;}
body {overflow: hidden;}
::-moz-selection {background-color: #c5f3ed;}
::selection {background-color: #c5f3ed;}
@-webkit-keyframes hvr-pop {50% { -webkit-transform: scale(1.3); transform: scale(1.3);}}
 @keyframes hvr-pop {50% { -webkit-transform: scale(1.3);transform: scale(1.3);}}
.sound-container {height: 120px;width: 30px;position: absolute;top: 50%;margin-top: -60px;right: 0px;}
.top-gif {height: 40px;width: 30px;float: right;background-image: url(../images/top-gif.gif);background-repeat: no-repeat;background-position: center bottom;}
.bottom-gif {height: 40px;width: 30px;float: right;background-image: url(../images/bottom-gif.gif);background-repeat: no-repeat;background-position: center top;}
.sound-shadow {height: 40px;width: 25px;background-color: rgba(51,51,51,0.5);float: right;margin-right: 4px;}
.melody-btn {height: 40px;width: 25px;background-color: #76ead4;margin-top: -4px;float: right;margin-right: -4px;}
.melody-btn:hover {cursor: pointer;}
.shadow-sound-over {background-image: url(../images/shadow-over-sound.png);background-repeat: no-repeat;background-position: right center;background-size: cover;height: 56px;width: 0px;position: absolute;top: 50%;right: 45px;margin-top: -32px;}
.copyright-pk {height: 28px;width: 245px;background-image: url(../images/cp-pk-bck.png);background-repeat: no-repeat;background-position: left top;position: absolute;top: 50%;right: 0px;right: 65px;margin-top: 25px;display: none;}
.title-sound {height: 40px;width: 0px;position: absolute;top: 50%;right: 25px;margin-top: -24px;background-color: #76EAD4;}
p.sound-txt {font-size: 14px;font-weight: 400;color: #1c997f;line-height: 40px;margin-left: 15px;display: none;}
p.copyright-txt {font-size: 11px;font-weight: 400;color: #EAEAEA;margin-left: 22px;line-height: 28px;}
.pause {background-image: url(../images/pause-ico.png);background-repeat: no-repeat;background-position: center center;height: 100%;width: 100%;}
.play {background-image: url(../images/play-ico.png);background-repeat: no-repeat;background-position: center center;height: 100%;width: 100%;display: none;}
#wrapper {height: 100%;width: 100%;position: absolute;overflow: hidden;background-image: url(../images/BCK.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;}
.nav-top-bar {width: 95%;margin-top: 20px;margin-right: auto;margin-left: auto;}
.btn {height: 20px;font-size: 18px;font-weight: 400;color: #FFF;-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;padding-bottom: 8px;}
.btn:hover {cursor: pointer;}
.btn.left {text-align: left;float: left;width: 48px;}
/*left hover btn*/
.btn.left:before {content: "";position: absolute;z-index: -1;left: 0;right: 100%;bottom: 0;height: 3px;-webkit-transition-property: right;transition-property: right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;background-color: #FFFFFF;}
.btn.left:hover:before {right: 0;}
.btn.right {float: right;text-align: right;width: 60px;}
/*right hover btn*/
.btn.right:before {content: "";position: absolute;z-index: -1;left: 100%;right: 0;bottom: 0;height: 3px;-webkit-transition-property: left;transition-property: left;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;background-color: #FFFFFF;}
.btn.right:hover:before {left: 0;}
img.dot-ico-left {float: left;margin-top: 2px;}
img.dot-ico-right {float: right;margin-top: 2px;}
.logo {position: absolute;top: 50%;left: 50%;margin-top: -120px;margin-left: -70px;width: 150px;-webkit-transform: scale(0);transform: scale(0);-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;}
.works-bottom {height: 150px;width: 100%;position: absolute;bottom: 0px;text-align: center;}
.works-bottom .left {width: 35%;height: 150px;text-align: center;vertical-align: middle;display: inline-block;}
img.shadow-img {-webkit-filter: drop-shadow(5px 7px 5px #121212);filter: drop-shadow(5px 5px 5px #121212);}
.works-bottom .img.cnt {margin-left: -10%;}
.works-bottom .img.vip-security {margin-left: -14%;}
.works-bottom .img {width: 30%;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;-ms-transform: rotate(-20deg); /* IE 9 */-webkit-transform: rotate(-20deg); /* Safari */transform: rotate(-20deg); /* Standard syntax */text-align: center;display: inline-block;vertical-align: top;-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;}
.works-bottom .img.top {margin-top: 40px;}
.works-bottom .img.onyx {margin-top: 20px;}
.works-bottom .img:hover, .works-bottom .img.first:hover, .works-bottom .img.second:hover {cursor: pointer;-ms-transform: rotate(0deg); /* IE 9 */-webkit-transform: rotate(0deg); /* Safari */transform: rotate(0deg); /* Standard syntax */-webkit-transform: scale(1.4);transform: scale(1.4);}
.works-bottom .img.first {-ms-transform: rotate(10deg); /* IE 9 */-webkit-transform: rotate(10deg); /* Safari */transform: rotate(10deg); /* Standard syntax */}
.works-bottom .img.second {-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari */transform: rotate(30deg); /* Standard syntax */}
.works-bottom .img.right {float: left;}
.down-arrow {width: 18px;margin-right: auto;margin-left: auto;background-image: url(../images/arrow-ico.png);background-repeat: no-repeat;background-position: center center;background-size: contain;height: 11px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.works-bottom .center-txt {height: 150px;width: auto;vertical-align: middle;display: inline-block;margin-top: -10px;color: #FFF;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
.works-bottom .center-txt:hover {cursor: pointer;color: #E1E1E1;}
p.works-txt {font-weight: 100;font-size: 164px;text-align: center;margin-top: -10px;}
.works-bottom .right {height: 150px;width: 35%;text-align: center;vertical-align: middle;display: inline-block;}
#works-container {height: 100%;width: 100%;right: 0px;bottom: 0px;position: absolute;text-align: center;display: none;}
.works-top-bar {max-width: 1500px;margin-right: auto;margin-left: auto;margin-top: 20px;}
.btn.left.blue {color: #28ba98;}
.btn.right.blue {color: #28ba98;}
/*left hover btn*/
.btn.left.blue:before {content: "";position: absolute;z-index: -1;left: 0;right: 100%;bottom: 0;height: 3px;-webkit-transition-property: right;transition-property: right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;background-color: #28ba98;}
.btn.left.blue:hover:before {right: 0;}
/*right hover btn*/
.btn.right.blue:before {content: "";position: absolute;z-index: -1;left: 100%;right: 0;bottom: 0;height: 3px;-webkit-transition-property: left;transition-property: left;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;background-color: #28ba98;}
.btn.right.blue:hover:before {left: 0;}
.btn.left.blue {color: #28ba98;}
.center-logo {width: 54px;margin-right: auto;margin-left: auto;margin-top: -40px;cursor: pointer;}
.center-logo .bl-arrow {background-image: url(../images/arrow-ico-02.png);background-repeat: no-repeat;background-position: center top;background-size: contain;height: 10px;width: 15px;margin-right: auto;margin-left: auto;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.center-logo .ico-bl-logo {height: 54px;width: 56px;margin-top: 8px;}
p.works {font-size: 100px;font-weight: 100;color: #FFF;line-height: -60px;text-align: center;vertical-align: top;display: inline-block;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;margin-top: 10px;}
.container-cards {max-width: 1510px;margin-right: auto;margin-left: auto;background-color: #FFF;margin-top: -28px;}
.line-separator {background-color: #27b794;height: 1px;width: 14px;}
.line-separator.right {float: right;}
.code-img {height: auto;text-align: center;vertical-align: top;display: inline-block;background-image: url(../images/12.jpg);
	/*Hover*/
	-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.4s;
	transition-duration: 0.4s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.code-img.second {background-image: url(../images/12345.jpg);}
.code-img.third {background-image: url(../images/12345.jpg);}
.code-img.fourth {background-image: url(../images/123456.jpg);}
.code-img.fifth {background-image: url(../images/1234.jpg);}
.code-img.sixth {background-image: url(../images/1234567.jpg);}
.card {height: 370px;max-width: 340px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;text-align: left;vertical-align: top;display: inline-block;background-color: rgba(255,255,255,1);padding: 15px;margin-left: -4px;}
.card:hover {cursor: pointer;}
.card .transition {height: 100%;width: 100%;position: relative;}
#works-container .card .left {height: 100%;width: 50%;position: absolute;}
.left-tr-cn {float: left;height: 100%;width: 15%;}
.left-tr-cn.min {width: 10%;}
.right-tr-cn.min {width: 10%;}
.right-tr-cn {float: left;height: 100%;width: 15%;}
#works-container .card .right {height: 100%;width: 50%;position: absolute;margin-left: 50%;}
#works-container .card .content {float: left;}
p.page-title {font-size: 36px;font-weight: 300;color: #434343;text-align: left;margin-left: 10px;margin-top: 15px;}
#works-container .card h1.txt-cn {font-weight: 300;color: #808080;text-align: left;font-size: 20px;margin-left: 10px;margin-top: 5px;}
#works-container .card p.txt-blue {font-weight: 300;color: #2dc1a1;text-align: left;font-size: 16px;margin-left: 10px;margin-top: 9px;}
.works-bottom-bar {background-color: #FFF;text-align: center;width: 90%;padding-top: 25px;padding-bottom: 25px;position: absolute;bottom: 0px;padding-right: 5%;padding-left: 5%;}
h6.copyright {font-size: 14px;color: #b5b5b5;}
.white-logo {background-image: url(../images/white-logo.png);background-repeat: no-repeat;background-position: center center;background-size: contain;height: 54px;width: 56px;margin-right: auto;margin-left: auto;margin-top: -35px;display: none;}
.content-shadow {height: auto;width: 90%;position: absolute;background-color: rgba(51,51,51,0.4);margin-right: 4%;margin-left: 6%;top: 100px;bottom: 60px;display: none;}
.content-shadow .white-content {background-color: #FFF;height: 100%;width: 100%;margin-top: -15px;margin-left: -15px;}
.content-shadow .white-content .left-image {background-image: url(../images/thumb.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;height: 100%;width: 25%;float: left;margin-right: 3%;}
.content-shadow .white-content .left-image.contact {background-image: url(../images/contact-image.jpg);background-size: contain;margin-right: 0%;}
.content-shadow .white-content .right-content {width: 72%;height: 100%;float: left;overflow-y: scroll;}
.content-shadow .white-content .right-content.contact {width: 75%;}
h1.title {font-size: 100px;font-weight: 100;color: #29ba97;text-align: left;margin-top: 50px;float: left;}
h2.text {font-family: 'Roboto', sans-serif; font-size: 40px;font-weight: 100;color: #393939;float: left;}
span.bold {font-weight: 500;color: #757575;}
h4.txt-cn {font-weight: 300;color: #808080;text-align: left;font-size: 20px;margin-left: 10px;margin-top: 5px;}
p.about-text {font-size: 18px;font-weight: 300;color: #949494;text-align: left;margin-top: 15px;float: left;width: 90%;margin-bottom: 15px;
}
p.contact-txt {font-size: 16px;font-weight: 300;color: #29ba97;}
p.contact-txt.first {margin-top: 15px;}
span.gry {color: #949494;}
.close-pop-up {background-image: url(../images/close-pop-ico.png);background-repeat: no-repeat;background-position: center center;background-size: contain;float: right;height: 30px;width: 30px;margin-top: 30px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;margin-right: 30px;}
.close-pop-up:hover {background-image: url(../images/close-pop-ico-over.png);cursor: pointer;}
.white-arrow-about {height: 15px;width: 15px;border-right-width: 3px;border-bottom-width: 3px;border-right-style: solid;border-bottom-style: solid;border-right-color: #FFF;border-bottom-color: #FFF;float: left;display: none;}
.white-arrow-contact {height: 15px;width: 15px;border-left-width: 3px;border-bottom-width: 3px;border-left-style: solid;border-bottom-style: solid;border-left-color: #FFF;border-bottom-color: #FFF;float: right;display: none;}
.blue-arrow-about {height: 15px;width: 15px;border-right-width: 3px;border-bottom-width: 3px;border-right-style: solid;border-bottom-style: solid;border-right-color: #25b793;border-bottom-color: #25b793;float: left;display: none;}
.blue-arrow-contact {height: 15px;width: 15px;border-left-width: 3px;border-bottom-width: 3px;border-left-style: solid;border-bottom-style: solid;border-left-color: #25b793;border-bottom-color: #25b793;float: right;display: none;}
.form-con {max-width: 800px;margin-top: 5px;}
.top-box {float: left;width: 47%;}
.top-box.right {float: right;}
p.title-input {font-size: 20px;font-weight: 300;color: #949494;text-align: left;margin-top: 20px;}
input {width: 98%;background-color: #f7f7f7;height: 55px;border: 1px solid #d9d9d9;font-size: 16px;font-weight: 300;margin-top: 3px;color: #949494;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;text-align: left;text-indent: 10px;margin-left: 0px;}
input:hover, input:active, input:focus {background-color: #fdfdfd;}
textarea.message {width: 99%;background-color: #f7f7f7;border: 1px solid #d9d9d9;font-size: 16px;font-weight: 300;margin-top: 3px;height: 170px;padding-top: 10px;color: #949494;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;text-align: left;text-indent: 10px;}
textarea.message:hover, textarea.message:focus {background-color: #fdfdfd;}
.button-shadow {float: left;width: 40%;background-color: #1c997f;margin-top: 35px;height: 60px;margin-left: 5px;margin-bottom: 20px;}
input.send-button {width: 100%;text-align: center;text-indent: 0px;padding-left: 0px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;background-color: #76ead4;font-size: 30px;color: #1c997f;font-weight: 300;margin-top: -5px;margin-left: -5px;height: 60px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;float: left;}
input.send-button:hover {cursor: pointer;background-color: #53d3bb;color: #FFFFFF;}
.safety {margin-top: 5px;}
p.safety-contact-txt {font-size: 14px;font-weight: 300;color: #949494;float: left;margin-left: 3px;width: 80%;}
.safety-icon {height: 15px;width: 15px;background-image: url(../images/safety-ico-contact.png);background-repeat: no-repeat;background-position: left center;background-size: contain;float: left;}
.thanks-pop-up {width: 100%;float: left;height: auto;padding-top: 10%;padding-bottom: 25px;display: none;}
h6.thanks {font-size: 50px;font-weight: 100;color: #29ba97;text-align: center;margin-top: 2%;}
p.text {font-size: 30px;font-weight: 100;color: #949494;text-align: center;margin-top: 3%;}
.thanks-pop-up .contact-logo {width: 150px;margin-right: auto;margin-left: auto;}
.social-btn {float: right; width: 30px; margin-top: 40px; margin-right: 5px; margin-left: 5px; border-radius: 30px;}


/* Hover Social Button Float Shadow */
.social-btn {
  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.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;
  position: relative;
}
.social-btn:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 90%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.social-btn:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.social-btn:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


			/*SCROLL WORKS CARDS*/
			
#scroll {position: relative;max-width: 100%;background-color: #FFF;}
#demo {position: relative;line-height: 20px;}
#examples {background-color: #FFF;overflow: hidden}
.content-scroll {overflow: auto;position: relative;background: #FFF;width: 100%;max-width: 100%;height: 800px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 3px;}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: rgba(0,187,150,1);}
.mCustomScrollBox {position: relative;overflow: hidden;height: 100%;max-width: 100%;outline: none;direction: ltr;}
.mCSB_inside > .mCSB_container {margin: 0px;}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {margin: 0;}
.mCSB_scrollTools {position: absolute;width: 16px;height: auto;left: auto;top: 0;right: 0;bottom: 0;}
.mCSB_scrollTools .mCSB_draggerContainer {position: absolute;top: 0;left: 0;bottom: 0;right: 0;height: auto;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {position: relative;width: 4px;height: 100%;margin: 0 auto;text-align: center;}