/*layers*/
/*#fullpage {z-index: 1;}*/
img.line1 {z-index: 3;}
img#main-logo {z-index: 5;}
#fullpage {z-index: 10;}
ul.dots, ul.services-tabs, #testimonials .test-nav, ul.home-nav {z-index: 40;}
.nav, .logo-wrapper {z-index: 50;}
.nav img.logo, button.hamburger {z-index: 100;}
.q-modal {z-index: 150;}


/*fonts*/
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf'); /* IE9 Compat Modes */
  src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Montserrat-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Montserrat-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Montserrat-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Montserrat-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Montserrat SemiBold';
  src: url('fonts/Montserrat-SemiBold.ttf'); /* IE9 Compat Modes */
  src: url('fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Montserrat-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Montserrat-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Montserrat-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Montserrat-SemiBold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.font-montserrat-semibold {font-family: 'Montserrat SemiBold', sans-serif !important;}

/*colors*/
.f-white {color:white !important;}
.f-grey {color:#4d4d4d !important;}
.f-blue {color:#2196f3 !important;}

/*#home {background:#fff;}
#why {background:#8bc34a;}
#about {background:#9e9e9e;}
#services {background:#00bcd4;}*/
#home .left-side,
#home .right-side {
	width: 50%;
	float: left;
}
#home .left-side {
	padding-left:8%;
	padding-right:4%;
}
.home-art img {
	position: absolute;
	width: 50%;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	transition: all 0.5s linear;
	opacity: 0;
}
.home-art img.active {
	opacity: 1;
}
ul.home-nav {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translate(-50%,0);
	margin:0;
	padding:0;
}
ul.home-nav li {
	float: left;
	padding: 0 18px;
}
ul.home-nav li a {
	position: relative;
	font-size: 0;
	color:transparent;
}
ul.home-nav li a span {
	height: 8px;
    width: 8px;
    border-radius: 100%;
    position: absolute;
    background: #ccc;
    top: 0;
    right: 0;
    transition: all 0.1s linear;
}
ul.home-nav li:hover a span {
	height: 14px;
    width: 14px;
    background: #ccc;
    top: -3px;
    right: -3px;
    transition: all 0.1s linear;
}
ul.home-nav li.active a span {
	height: 14px;
    width: 14px;
    background: #666;
    top: -3px;
    right: -3px;
    transition: all 0.1s linear;
}
.left-texts {
	opacity: 0;
	display: none;
	transition: all 0.5s linear;
}
.left-texts.active {
	opacity: 1;
	display: block;
}
.nav ul.dots {
	margin:0;
	padding:0;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	padding-right: 70px;
}
.nav ul.dots li {
	list-style-type: none;
}
.nav ul.dots li a {
	position: relative;
	font-size: 0;
	color:transparent;
}
.nav ul.dots li a span {
	height: 8px;
    width: 8px;
    border-radius: 100%;
    position: absolute;
    background: #ccc;
    top: 4px;
    right: -22px;
    transition: all 0.1s linear;
}
.nav ul.dots li.active a span {
	height: 14px;
    width: 14px;
    background: #666;
    top: 2px;
    right: -25px;
    transition: all 0.1s linear;
}

.nav ul.dots li:hover a span {
	height: 14px;
    width: 14px;
    background: #ccc;
    top: 2px;
    right: -25px;
    transition: all 0.1s linear;
}

/*line arts*/
img.line1 {
	position: fixed;
	top: -10%;
	left: -10%;
	width: 130%;

	animation-name: lineskew;
	animation-duration: 50s; 
	animation-timing-function: ease-out; 
	animation-delay: 0s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running; 
}
@keyframes lineskew {
  0%, 100% {
  }
  50% {
  	transform: skew(0, 50deg);
  }
}

/*logo*/
#main-logo {
	position: fixed;
	top: 30px;
	left: 30px;
	width: 405px;
}
#main-logo-white {
	position: fixed;
	top: 30px;
	left: 30px;
	width: 310px;
	opacity: 0;
}
#main-logo.reduced {
	width: 310px;
}

/*main menu*/
.nav.main {
	position: fixed;
	top: 0;
	left: -2500px;
	height: 100%;
	width:100%;
	background: #2196f3;
	text-align: center;
}
.nav.main ul {
	margin:0;
	padding:0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.nav.main ul li {
	list-style-type: none; 
}
.nav.main ul li a {
	color: white;
	text-decoration: none;
	font-family: 'Montserrat SemiBold';
	font-size: 26px;
	line-height: 60px;
}
.nav.main img.logo {
	width:310px;
	position: absolute;
	top: 30px;
	left: 50px;
}
.nav.main li.nav-footer {
	color: white;
	opacity: 0.8;
	line-height: 1.8em;
	margin-top: 40px;
}
/*button to open/close menu*/
button.hamburger {
	width:40px;
	position: absolute;
	top: 30px;
	right: 50px;
	opacity: 0;
}
button.hamburger:focus {
	outline:0;
}
.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
	background-color:#666;
}
.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner::before, 
.hamburger.is-active .hamburger-inner::after {
	background-color:#fff;
}
.nav.opened {
	left:0;
	animation: mobile-nav-appear 0.3s ease;
}
.nav.closed {
	animation: mobile-nav-closed 0.3s ease;
}
@keyframes mobile-nav-closed {
  0% {
    left: 0;
  }
  100% {
    left: -2500px;
    opacity: 0;
  }
}
@keyframes mobile-nav-appear {
  0% {
    left: -2500px;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

/*main css*/
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #606060;
  overflow-x: hidden;
}
a:hover {
	text-decoration: none;
	color: inherit;
}
h1.main {
	font-family: 'Montserrat SemiBold', sans-serif;
	font-size: 50px;
}
.q-button-blue {
	color: white;
	padding:15px 30px;
	border-radius: 30px;
	background: #2196f3;
	text-decoration: none;
}
.q-button-blue:hover {
	background: #0f7ed6;
	color: white;
	transform: scale(1.05);
}
.q-button-blue.q-button-outline {
	color: #0f7ed6;
	padding:14px 28px;
	border-radius: 30px;
	background: #fff;
	border: 2px solid #0f7ed6;
	text-decoration: none;
}
.q-button-blue.q-button-outline:hover {
	background: #fff;
	color: #1f70a9;
	border: 2px solid #1f70a9;
	transform: scale(1.05);
}
.q-button-white {
	color: #0f7ed6;
	padding:15px 30px;
	border-radius: 30px;
	background: #fff;
	text-decoration: none;
}
.q-button-white:hover {
	background: #fff;
	color: #0f7ed6;
	transform: scale(1.02);
}
.q-button-white.q-button-outline {
	color: #fff;
	padding:14px 28px;
	background: transparent;
	border: 2px solid #fff;
	text-decoration: none;
}
.q-button-white.q-button-outline:hover {
	color: #fff;
	transform: scale(1.02);
}
.q-form-control input, 
.q-form-control textarea {
	width: 100%;
	border: 0px;
	padding:10px 25px;
	border-radius: 100px;
}
.q-form-control textarea {
	padding:10px 25px;
	border-radius: 25px;
	resize: none;
}
.q-modal {
	position: fixed;
	height: 100%;
	width:100%;
	background: #2196f3;
	color: white;
	padding: 80px 0;
	overflow: scroll;
}
ul.blue-bg {
	margin:0;
	padding:0;
}
ul.blue-bg li {
}
ul.blue-bg li a {
	color: white;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #ffffff66;
    font-size:16px;
    transition: all 0.1s linear;
}
ul.blue-bg li:hover a {
	transform: scale(1.01);
}
ul.blue-bg li:first-child a {
    border-top: 1px solid #ffffff66;
}

ul.services-tabs {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translate(-50%,0);
}
ul.services-tabs li {
	float: left;
	padding: 0 8px;
}
ul.services-tabs li a img {
	width:48px;
	transition: all 0.1s linear;
	opacity: 0.3;
}
ul.services-tabs li a:hover img {
	transform: scale(1.1);
	opacity: 1;
}
ul.services-tabs li.active a img {
	opacity: 1;
}

#resources .res-item {
	background:white;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	text-align: left;
	cursor: pointer;
}
#resources .res-item span {
	font-size: 16px;
	padding: 10px;
	display: block;
}
#resources .res-item:hover {
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	transform: scale(1.01);
}
.q-form input,
.q-form button {
	border: 1px solid #cecece;
	padding:15px 30px;
	border-radius: 30px;
	width: 100%;
}
.q-form input:focus,
.q-form button:focus {
	outline:0;
}
.q-form button {
	border: 0px;
	background: #2196f3;
	color: white;
	cursor: pointer;
}
.q-form button:hover {
	background: #0f7ed6;
}
img.why {
	margin-bottom: -700px;
	max-width: 200%;
}
.wrap-why2 {padding-top: 43px;}
.wrap-why3 {padding-top: 146px;}
#testimonials .test-img {
	float: left;
	width: 80px;
	margin-right: 20px;
}
#testimonials .test-names {
	margin-top: 14px;
	line-height: 22px;
}
#testimonials .test-nav {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}
#testimonials .test-nav img {
	width: 40px;
	cursor: pointer;
	transition: all 0.1s linear;
	opacity: 0.1;
}
#testimonials .test-nav:hover img {
	transform: scale(1.1);
	opacity: 0.3;
}
#testimonials .nav-right {
	right: 50px;
}
#testimonials .nav-left {
	left: 50px;
}
.sv-item p {
	line-height: 24px;
}	
.sv-item:hover a img {
	opacity: 0.9;
	transform: scale(1.05);
}	
#contact .item img {
	width: 80px;
}
#contact .item:hover img {
	transform: scale(1.05);
}
#contact .item span {
	height: 5px;
	width: 25px;
	background: #2196f3;
	display: block;
	margin: 15px auto 20px auto;
}
#careers .item {
	background:white;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	padding: 32px;
	line-height: 16px;
	cursor: pointer;
}
#careers .item:hover {
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	transform: scale(1.01);
}
#careers .item span	{
	position: absolute;
	top: 50%;
	right: 32px;
	transform: translate(0, -50%);
}
#about .content {
	width: 50%;
	height: 100%;
	float: left;
}
#about .left-about {
	
}
#about .left-about ul {
	position: absolute;
	width: 100%;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	margin:0;
}
#about .left-about ul li {
	list-style-type: none;
}
#about .left-about ul li a {
	color: white;
	font-size: 24px;
	line-height: 50px;
	padding: 15px 75px 15px 0;
}	
#about .left-about ul li a:hover {
	font-size:24.5px;
}	
#about .left-about ul li.selected a {
	background-image: url(img/diamond.svg); 
    background-size: 50px 50px;
    background-repeat:no-repeat;
    background-position: right -26px center;
}	
#about .right-about .about-slide {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	padding:0 150px 0 90px;
	opacity: 0;
}
#about .right-about .about-slide.selected {
	opacity: 1;
}
#about .tab-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/bg/about9a.jpg) no-repeat left center; 
    background-size: cover !important;
}
.guide-icon {
	left: 0;
    top: 0;
    width: 28px;
}