@import url("reset.css");
@import url("font/stylesheet.css");

body {
	font-family:'Roboto-Light';
	font-size:16px;
	color:#000000;
}

a {
	text-decoration:none;
}

a:hover,
a:active {
	text-decoration:none;
}

h1 {
	font-size:64px;
	margin-bottom:40px;
}

h2 {
	font-size:32px;
	text-align:center;
}

section {
	position:relative;
	max-width:945px;
	margin:0 auto;
	padding:0 5px;
}

.title {
	position:fixed;
	background:#fafafa;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
	width:100%;
	padding:17px 0;
	top:0;
	z-index:100;
}

.title section {
	max-width:1040px;
}

.title .logo {
	background:url(../../img/main/GA_Lab-logo.svg);
	background-size:cover;
	width:163px;
	height:33px;
	margin:2px 114px 0 0;
	float:left;
}

.logo-mob {
	background:url(../../img/main/GA_Lab-logo.svg);
	background-size:cover;
	width:103px;
	height:21px;
	position:absolute;
	top:5px;
	left:50%;
	margin-left:-81.5px;
	display:none;
}

.icon-menu {
	width:24px;
	height:26px;
	padding:5px 0;
	cursor:pointer;
	display:none;
	position:absolute;
	top:2px;
	left:22px;
	z-index:1;
}

.sw-topper {
	position:relative;
	top:0;
	width:24px;
	height:2px;
	background:#000000;
	border:none;
	transition:transform 0.5s, top 0.2s;
	-moz-transition:transform 0.5s, top 0.2s;
	-webkit-transition:transform 0.5s, top 0.2s;
	-o-transition:transform 0.5s, top 0.2s;
}

.sw-bottom {
	position:relative;
	width:24px;
	height:2px;
	top:5px;
	background:#000000;
	border:none;
	transition:transform 0.5s, top 0.2s;
	-moz-transition:transform 0.5s, top 0.2s;
	-webkit-transition:transform 0.5s, top 0.2s;
	-o-transition:transform 0.5s, top 0.2s;
	transition-delay:0.2s, 0s;
	-moz-transition-delay:0.2s, 0s;
	-webkit-transition-delay:0.2s, 0s;
	-o-transition-delay:0.2s, 0s;
}

.sw-footer {
	position:relative;
	width:24px;
	height:2px;
	top:10px;
	background:#000000;
	border:none;
	transition:transform 0.5s, top 0.2s;
	-moz-transition:transform 0.5s, top 0.2s;
	-webkit-transition:transform 0.5s, top 0.2s;
	-o-transition:transform 0.5s, top 0.2s;
	transition-delay:0.2s, 0s;
	-moz-transition-delay:0.2s, 0s;
	-webkit-transition-delay:0.2s, 0s;
	-o-transition-delay:0.2s, 0s;
}

.icon-menu.active .sw-topper {
	top:7px;
	transform:rotate(140deg);
	-moz-transform:rotate(140deg);
	-webkit-transform:rotate(140deg);
	-o-transform:rotate(140deg);
}

.icon-menu.active .sw-bottom {
	top:5px;
	transform:rotate(-140deg);
	-moz-transform:rotate(-140deg);
	-webkit-transform:rotate(-140deg);
	-o-transform:rotate(-140deg);
}

.icon-menu.active .sw-footer {
	top:0;
	transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	opacity:0;
}

nav {
	padding-top:8px;
	float:left;
}

nav ul {
	font-size:0;
	text-align:center;
}

nav ul li {
	margin:0 15px;
	vertical-align:top;
	display:inline-block;
}

nav ul li a {
	position:relative;
	font-family: 'RobotoRegular';
	font-size:18px;
	color:#000000;
}

nav ul li a:hover {
	color:#356e91;
	text-shadow:1px 1px 1px #fff;
}

nav ul li a:hover:after {
	background:#356e91;
	width:100%;
	height:3px;
	content:'';
	position:absolute;
	left:0;
	bottom:-24px;
}

.title .button {
	background:#356e91;
	width:97px;
	height:36px;
	font-family: 'RobotoBold';
	font-size:16px;
	line-height:36px;
	color:#ffffff;
	text-align:center;
	text-transform:uppercase;
	float:right;
}

.jcarousel {
	position:relative;
	width:100%;
	height:779px;
	overflow:hidden;
}

.jcarousel-wrapper {
	position:relative;
	width:100%;
}

.jcarousel ul {
	position:relative;
	width:20000em;
}

.jcarousel ul li {
	width:100%;
	float:left;
}

.jcarousel-control-prev,
.jcarousel-control-next {
	background:url(../../img/main/arrow-slider.png) left;
	width:8px;
	height:14px;
	position:absolute;
	top:50%;
	left:50px;
	margin-top:-7px;
	text-indent:-9000px;

}

.jcarousel-control-next {
	background-position:right;
	left:auto;
	right:50px;
}

.jcarousel-pagination {
	width:100%;
	font-size:0;
	text-align:center;
	position:absolute;
	left:0;
	bottom:20px;
}

.jcarousel-pagination a {
	background:#9ab3c7;
	width:20px;
	height:5px;
	margin:0 5px;
	vertical-align:top;
	display:inline-block;
}

.jcarousel-pagination a:hover,
.jcarousel-pagination a.active {
	background:#ffffff;
}

header {
	background:url(../../img/main/bg-header.jpg) no-repeat center top;
	padding:230px 0 215px;
}

header div {
	max-width:610px;
	color:#ffffff;
}

header div p {
	font-size:18px;
	line-height:28px;
	margin-bottom:70px;
}

header div a {
	background:#8bc34a;
	width:240px;
	height:40px;
	font-family: 'RobotoBold';
	font-size:18px;
	line-height:40px;
	color:#ffffff;
	text-align:center;
	text-transform:uppercase;
	display:block;
}

.take-tour {
	padding:55px 0 27px;
}

.take-tour h2 {
	margin-bottom:30px;
}

.video {
	max-width:753px;
	height:423px;
	margin:0 auto;
}

.video iframe {
	width:100%;
	height:100%;
}

.how-works {
	padding-top:27px;
}

.how-works h2 {
	margin-bottom:50px;
}

.how-works ul {
	max-width:1200px;
	font-size:0;
	text-align:center;
	margin:0 auto;
}

.how-works ul li {
	width:262px;
	margin:0 49px 54px;
	vertical-align:top;
	display:inline-block;
}

.how-works ul li .icon {
	padding-bottom:50px;
}

.how-works ul li h4 {
	height:64px;
	font-family: 'RobotoBold';
	font-size:18px;
	line-height:21px;
	color:#356e91;
	padding:0 30px;
}

.how-works ul li p {
	font-family: 'RobotoRegular';
	font-size:14px;
	line-height:20px;
	text-align:left;
}

.features {
	background:#eceff1;
	padding:35px 0 51px;
}

.features h2 {
	margin-bottom:50px;
}

.features section > p {
	line-height:24px;
	margin-bottom:40px;
}

.tabs {
	width:27.5%;
	margin-top:-1px;
	float:left;
}

.tabs li {
	position:relative;
	height:48px;
	line-height:48px;
	padding-left:19px;
	cursor:pointer;
}

.tabs li:after {
	background:url(../../img/main/after-tabs.png);
	width:8px;
	height:12px;
	content:'';
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-6px;
}

.tabs li:hover:after,
.tabs li.current:after {
	background-position:bottom;
}

.tabs li:hover,
.tabs li.current {
	background:#356e91;
	color:#ffffff;
}

.box {
	background:#ffffff;
	outline:1px solid #356e91;
	width:72.5%;
	height:286px;
	display:none;
	float:left;
}

.box.visible {
	display: block;
}

.box div {
	padding:32px 45px 0 40px;
}

.box p {
	line-height:21px;
	margin-bottom:8px;
}

.accordion {
	width:290px;
	margin:0 auto;
	display:none;
}

#accordion li a {
	position:relative;
	height:48px;
	line-height:48px;
	color:#000000;
	padding-left:20px;
	display:block;
}

#accordion li a:after {
	background:url(../../img/main/after-accordion.png);
	width:12px;
	height:7px;
	content:'';
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-7px;
}

#accordion li.active a:after,
#accordion li a:hover:after {
	background-position:bottom;
} 

#accordion li.active a,
#accordion li a:hover {
	background:#356e91;
	color:#ffffff;
}

#accordion li div {
	background:#ffffff;
	border:2px solid #356e91;
	margin-bottom:2px; 
	padding:18px 41px 20px;
	display:none;
}

#accordion li div p {
	line-height:24px;
}

#accordion li.active div {
	display:block;
}

.about {
	max-width:945px;
	margin:0 auto;
	padding:55px 5px 40px;
}

.about h2 {
	margin-bottom:54px;
}

.about .logo {
	background:url(../../img/main/logo-about.jpg);
	width:219px;
	height:54px;
	margin-top:5px;
	float:left;
}

.about .text {
	width:69.3%;
	float:right;
}

.about p {
	line-height:24px;
	margin-bottom:15px;
}

.contacts {
	background:#eceff1;
	padding:39px 0 40px;
}

.contacts h2 {
	margin-bottom:30px;
}

.contacts > p {
	line-height:24px;
	text-align:center;
	margin-bottom:36px;
}

.contacts form {
	max-width:555px;
	margin:0 auto;
	padding:0 5px;
}

.contacts form p {
	width:100%;
	margin-bottom:20px;
	display:table;
}

.contacts form p span {
	float:left;
}

.contacts form p span+span {
	float:right;
}

.contacts input[type="text"],
.contacts input[type="email"] {
	border:1px solid #e0e0e0;
	width:97.8%;
	height:38px;
	color:#757575;
	padding-left:10px;
}

.contacts form p span input[type="text"],
.contacts form p span input[type="email"] {
	width:260px;
}

.contacts form p span.middle input[type="text"] {
	width:328px;
}

.contacts form p span.small {
	float:right;
}

.contacts form p span.small input[type="text"] {
	width:180px;
}

.contacts textarea {
	border:1px solid #e0e0e0;
	width:97.8%;
	height:217px;
	color:#757575;
	padding:10px 0 0 10px;
	resize:none;
}

.contacts input[type="text"]:focus,
.contacts input[type="email"]:focus,
.contacts textarea:focus,
select:focus,
.selectBox:focus {
	border-color:#356e91;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(53,110,145,0.75);
	-moz-box-shadow: 0px 0px 4px 0px rgba(53,110,145,0.75);
	box-shadow: 0px 0px 4px 0px rgba(53,110,145,0.75);	
}

.check {
	padding-top:12px;
	float:left;
}

label.checkbox {
	background:url(../../img/main/bocks.png);
	width:16px;
	height:16px;
	margin-right:10px;
	float:left;
}

input[type="checkbox"]:checked + label.checkbox {
	background-position:bottom;
}

.contacts input[type="submit"] {
	background:#356e91;
	width:130px;
	height:40px;
	font-family: 'RobotoBold';
	font-size:14px;
	color:#ffffff;
	text-transform:uppercase;
	float:right;
}

footer {
	background:#263238;
	padding: 1rem;
	font-family: 'RobotoRegular';
	color:#9e9e9e;
	text-align:center;
}

.form {
	background:#eceff1;
	width:265px;
	padding:0 15px 0;
}

a[href="#close"] {
	background:url(../../img/main/logo-popup.png);
	width:262px;
	height:52px;
	margin:0 auto 40px;
	display:block;
}

.popup label {
	height:32px;
	font-size:14px;
	color:#000000;
	display:block;
}

.popup input[type="email"],
.popup input[type="password"] {
	border:1px solid #a1a1a1;
	width:248px;
	height:42px;
	color:#a7a9ac;
	margin-bottom:20px;
	padding-left:15px;
}

.popup input[type="password"] {
	margin-bottom:8px;
}

.popup form p {
	position:relative;
	width:100%;
}

.popup form p a {
	background:url(../../img/main/icon-eye.jpg);
	width:18px;
	height:12px;
	position:absolute;
	top:16px;
	right:13px;
}

.popup form > a {
	font-size:14px;
	color:#000000;
	text-decoration:underline;
	margin-bottom:14px;
	display:block;
}

.popup input[type="submit"] {
	background:#8bc34a;
	width:100px;
	height:40px;
	font-family: 'RobotoBold';
	font-size:18px;
	color:#ffffff;
	text-transform:uppercase;
	float:right;
}

.popup {
	position:fixed;
	left:50%;
	z-index:1000;
	display:none;
}

#overlay {
    background:#eceff1;
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:500;
}

@media (min-width: 280px) and (max-width: 1070px) { 
	header div {
		padding-left:20%;
	}
}

@media (min-width: 280px) and (max-width: 960px) {
	.title {
		padding:10px 0;
	} 
	.title .logo {
		display:none;
	}
	.logo-mob {
		display:block;
	}
	.icon-menu {
		display:block;
	}
	nav ul {
		background:#fafafa;
		width:100%;
		padding:50px 0 25px;
		position:absolute;
		top:46px;
		left:0;
		z-index:10;
		display:none;
	}
	nav ul li {
		text-align:left;
		margin:0 0 27px 0;
		padding-left:85px;
		display:block;
	}
	nav ul li a:hover {
		color:#356e91;	
	}
	nav ul li a:hover:after {
		bottom:-12px;
	}
}

@media (min-width: 280px) and (max-width: 870px) {
	.tabs-box {
		display:none;
	}
	.accordion {
		display:block;
	}
}

@media (min-width: 280px) and (max-width: 760px) {
	.about .logo {
		margin:0 auto 38px;
		display:block;
		float:none;
	}
	.about .text {
		width:100%;
		margin:0 auto;
		float:none;
	}
}

@media (min-width: 280px) and (max-width: 720px) {
	header div {
		margin:0 auto;
		padding-left:0;
	}
	.video {
		height:300px;
	}
}

@media (min-width: 280px) and (max-width: 715px) {
	.jcarousel-control-prev {
		left:10px;
	}
	.jcarousel-control-next {
		right:10px;
	}
}

@media (min-width: 280px) and (max-width: 575px) {
	section {
		padding:0 15px;
	}
	h1 {
		font-size:34px;
		line-height:36px;
		margin-bottom:30px;
	}
	.jcarousel {
		height:370px;
	}
	header {
		padding:100px 0 56px;
	}
	header div p {
		font-family: 'RobotoRegular';
		font-size:16px;
		line-height:22px;
		margin-bottom:35px;
	}
	header div a {
		width:/*175px*/240px;
		height:34px;
		line-height:34px;
	}
	.take-tour {
		padding:48px 0 27px 0;
	}
	.take-tour h2 {
		margin-bottom:15px;
	}
	.how-works h2 {
		margin-bottom:22px;
	}
	.how-works ul li {
		width:290px;
	}
	.how-works ul li .icon {
		padding-bottom:15px;
	}
	.features {
		padding:35px 0 24px;
	}
	.features h2 {
		margin-bottom:25px;	
	}
	.how-works ul li {
		margin:0 0 37px;
	}
	.about {
		padding:55px 30px 40px;
	}
	.contacts form {
		padding:0;	
	}
	.contacts form p span,
	.contacts form p span + span {
		float:none;
	}
	.contacts form p span input[type="text"], 
	.contacts form p span input[type="email"],
	.contacts form p span.middle input[type="text"],
	.contacts input[type="text"] {
		width:96%;
	}
	.contacts form p span.small {
		width:100%;
		float:none;
	}
	.contacts form p span.small input[type="text"] {
		width:96%;
		margin:0;
	}
	.contacts form p span input[type="text"] {
		margin-bottom:19px;
	}
	.contacts textarea {
		width:96%;
	}
}
@media (min-width: 280px) and (max-width: 340px) {
	h1 {
		margin-bottom:10px;
	}
	h2 {
		font-size:24px;
	}
	header div {
		padding:0 10px;
	}
	header div p {
		margin-bottom:15px;
	}
	.video {
		height:163px;
	}
	.check {
		margin:0 auto 19px;
		padding:0;
		display:table;
		float:none;
	}
	.accordion {
		max-width:290px;
	}
	#accordion li div {
		padding:16px 20px 18px 19px;
	}
	.about {
		padding:36px 15px 25px;
	}
	.about h2 {
		margin-bottom:35px;
	}
	.contacts {
		padding-bottom:19px;
	}
	.contacts h2 {
		margin-bottom:20px;
	}
	.contacts form {
		width:290px;
		margin:0 auto;
	}
	.contacts > p {
		margin-bottom:30px;
		padding:0 18px;
	}
	.contacts textarea {
		height:135px;
	}
	.contacts input[type="submit"] {
		margin:0 auto;
		display:table;
		float:none;
	}
	footer {
		height:70px;
		line-height:70px;
	}
}