/* ------------------------------------------------------------ *
	#resets
* ------------------------------------------------------------ */

* {
	margin: 0; 
	padding: 0;
}
html {
	min-height: 100%;
	box-sizing: border-box;
}

body {
	min-height: 100%;
	font-family: 'akrobat';
	font-weight: normal;
	background-image: url('../images/bg.png'); 
	background-position: center top;
	background-repeat: repeat-y;
}

ul {
	list-style-type: none; 
}

a {
	text-decoration: none; 
}

img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------ *
	#fonts
* ------------------------------------------------------------ */

@font-face {
	font-family: 'akrobat';
	src: url('fonts/akrobat-regular_0-webfont.eot');
	src: url('fonts/akrobat-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/akrobat-regular_0-webfont.woff2') format('woff2'),
		 url('fonts/akrobat-regular_0-webfont.woff') format('woff'),
		 url('fonts/akrobat-regular_0-webfont.svg#akrobatregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'akrobat';
	src: url('fonts/akrobat-bold_0-webfont.eot');
	src: url('fonts/akrobat-bold_0-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/akrobat-bold_0-webfont.woff2') format('woff2'),
		 url('fonts/akrobat-bold_0-webfont.woff') format('woff'),
		 url('fonts/akrobat-bold_0-webfont.svg#akrobatbold') format('svg');
	font-weight: bold;
	font-style: normal;
}

/* ------------------------------------------------------------ *
	#keyframes
* ------------------------------------------------------------ */

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
/* ------------------------------------------------------------ *
	#accents
* ------------------------------------------------------------ */
.accents {
	overflow: hidden; 
}

.accent { 
	font-size: 0; 
}

.wrapper {
	width: 1270px;
	height: auto; 
	margin: 0 auto;
	padding: 150px 20px 75px;
}

.accents-hero-image {
	background-image: url('../images/hero-image.jpg');
	box-shadow: inset 0 0 0 470px rgba(37, 103, 159, 0.5);
	height: 940px;
	position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-image-text {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 50%;
	overflow: auto;
	margin: auto;
}

.hero-image-text {
	color: #fff;
	text-align: center; 
	font-weight: bold; 
	overflow: hidden; 
}

.hero-image-text h1 {
	margin-bottom: 80px;
	font-size: 80px;
	text-transform: uppercase; 
}

.hero-image-text h1 span {
	display: block; 
}

.hero-image-text p {
	margin-bottom: 60px; 
	font-size: 22px;
}

.hero-image-text a {
	position: relative;
	z-index: 1; 
	overflow: hidden; 
	display: inline-block; 
	vertical-align: top; 
	height: 50px; 
	padding: 0 15px;
	border: 1px solid #fff;
	font-size: 20px;
	line-height: 50px; 
	color: #fff;
	text-transform: uppercase;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.hero-image-text a:after {
	content: '';
	position: absolute;
	top: 5px;
	bottom: 5px; 
	left: 0;
	right: 0; 
	background: #fff;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
}
.hero-image-text a:hover {
	color: #467099;
}
.hero-image-text a:hover:after {
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform: scaleY(1);
}
.accents-features {
	width: 100%;
	height: 275px;
	padding: 0; 
	background: #1b78b0;
	background: -moz-linear-gradient(45deg, #1b78b0 0%, #1bb081 100%); 
	background: -webkit-linear-gradient(45deg, #1b78b0 0%,#1bb081 100%); 
	background: linear-gradient(45deg, #1b78b0 0%,#1bb081 100%); 
}

.accents-features .wrapper {
	padding: 0;
}

.feauters-box {
	font-size: 0;
}

.feauters-box .box {
	opacity: 0;
	width: 25%; 
	display: inline-block; 
	font-size: 13px;
	text-align: center; 
	-webkit-transition-duration:2s;
	transition-duration:2s;
	transform:translateY(30px);
	-ms-transform:translateY(30px);
	-webkit-transform:translateY(30px); 
}

.feauters-box .box .icon {
	width: 100px;
	height: 130px;  
	display: inline-block; 
	margin: 15px 0 25px;
	fill: #fff;
	vertical-align: top; 
}


.feauters-box .box.is-active {
	opacity: 1;
	transform:translateY(0px);
}

.box p {
	color: #fff;
	font-size: 26px;
	font-weight: bold; 
	padding-top: 15px; 
}

.box .box-title {
	max-width: 200px;
    margin: 0 auto;
    padding: 0 0 15px;
	border-bottom: 1px solid #fff; 
	font-size: 16px;
	font-weight: normal; 
}

.box sup {
	font-size: 16px;
}

.haracteristics-text .wrapper {
	padding-top: 75px; 
}

.section-title {
	position: relative;
	padding-bottom: 150px;
	color: #1bb081;
	font-size: 60px; 
	font-weight: bold;
}

.section-title:after {
	content: '';
	opacity: 0;
	position: absolute;
	top: auto;
	right: 0;
	bottom: 33%;
	left: 0;
	margin: 0 auto;
	width: 650px;
	height: 10px;
	background-image: url(../images/title-bg.png);
	background-position: center top;
	background-repeat: repeat-x;
	-webkit-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-ms-transform: translateX(200px);
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
}

.section-title.is-active:after {
	opacity: 1;
	transform: translateX(0px);
}

.article {
	opacity: 0;
	-webkit-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-ms-transform: translateY(60px);
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
}

.article.is-active {
	opacity: 1;
	transform: translateY(0px);
	
}

.article ul li {
	padding: 10px; 
	color: #353535;
	font-size: 16px;
}

.article ul.location {
	margin-left: 26%;
}

.article ul.location li {
	position: relative;
	margin-left: 0; 
}

.article ul.location li::before {
	content: "–––––";
	position: absolute;
	left: -37px;
	letter-spacing: -2px;	
}

.article .haracteristics {
	width: 30%;
	display: inline-block; 
	vertical-align: top; 
}

.article img {
	width: 70%; 
	display: inline-block; 
}

.accents-gallery {
	margin-bottom: 60px; 
}

.accents-gallery .wrapper { 
	padding-top: 75px; 
}

.grid {
	opacity: 0;
	transition: all 1s;
	-ms-transform: translateY(60px);
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
}
	
.grid.is-active {
	opacity: 1;
	transform: translateX(0px);
}

.grid-item {
	display: inline-block; 
	vertical-align: top; 
  	margin-bottom: 30px;
}

.grid-item .image-popup {
	position: relative;
	display: block; 
	cursor: pointer;	
}

.grid-item .image-popup:after {
	position: absolute;
	content: '';
	top:0;
	left:0;
	width:100%;
	height:100%;
	box-shadow: inset 0 0 0 470px rgb(0, 0, 0);
	opacity:0;
	z-index: 1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.grid-item .image-popup:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background-image: url("../images/search.svg");
	opacity: 0;
	z-index: 999
}

.grid-item .image-popup:hover:after {
	opacity:  0.6;
}

.grid-item .image-popup:hover:before {
	opacity: 1;
}

.accents-contacts {
	position: relative;
	font-size: 0; 
}

.contact-box {
	position: absolute;
	top: -70px; 
	right: 0; 
	bottom: 0;
	left: 0; 
	width: 977px; 
	height: 100px;
	margin: 0 auto;   
	z-index: 999;
	transition: all 1s; 
	-ms-transform: translateY(60px);
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
}

.contact-box.is-active {
	transform: translateX(0px);
}

.contact-box .icon {
	width: 70px;
	height: 50px;
	fill: #fff;
	vertical-align: middle; 
}

.contact-box .box {
	width: 325px;
	height: 100px; 
	display: inline-block;
	vertical-align: top; 
	background-color: #1b78b0;
	font-size: 16px; 
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.contact-box .box:hover {
	background-color: #1bb081;
}

.contact-box .box:hover .icon {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

.contact-box .box .box-content {
	padding: 25px 5px;
	text-align: center; 
}

.contact-box .box .box-content {
	border-right: 1px solid #fff;
}

.contact-box .box:last-child .box-content {
	border: none;
}

.contact-box .box p {
	display: inline-block; 
	padding: 0; 
	color: #fff;
	font-size: 18px; 
	font-weight: normal; 
}

#js-map {
	height: 450px;
}


/* ------------------------------------------------------------ *
	#footer
* ------------------------------------------------------------ */

.footer {
	height: 110px; 
	background-color: #1d1d1d;
	text-align: center;
}

.footer p {
	display: inline-block; 
}

.footer .powerd  {
	float: left;
	padding: 43px 150px;
	color: #fff;
}

.footer .made-by {
	float: right;
	padding: 27px 150px;
}

/* ------------------------------------------------------------ *
	#media queries
* ------------------------------------------------------------ */
@media screen and (max-width: 1280px) {
	.wrapper {
		width: auto;
		padding: 30px 20px;
	}

	.grid {
	  margin: 0 auto;
	}
}

@media screen and (max-width: 1024px) {
	.hero-image-text {
		height: 80%;
	}

	.footer .powerd {
	    padding: 43px 85px;
	}

	.footer .made-by {
		padding: 27px 85px;
	}
}

@media screen and (max-width: 768px) {
	.section-title {
		font-size: 42px; 
	}

	.section-title:after {
		width: 100%; 
	}

	.accents-gallery {
		margin-bottom: 100px; 
	}

	.contact-box {
		top: -90px;
	}

	.contact-box {
		position: relative;
		top: 0; 
		right: 0; 
		bottom: 0;
		left: 0;  
		width: 100%;
		height: 100%;
		margin-bottom: 1px;
	}
	
	.contact-box .box {
		width: 100%;
		height: 101px;
		display: block;
	}
	
	.contact-box .box-content {
		border-right: 0;
		border-bottom: 1px solid #fff;	
	}
	.hero-image-text h1 {
		margin-bottom: 40px;
		font-size: 54px;
}

@media screen and (max-width: 767px) {
	.accents-hero-image {
		height: 550px;
	}

	.hero-image-text {
		width: 80%;
		height: 95%;
	}

	.hero-image-text h1.js-animate {
		font-size: 50px; 
	}

	.accents-text ul.location {
		margin: 0; 
		padding-left: 55px;
	}

	.accents-features {
		height: 100%;
		padding: 20px 0 40px;
	}

	.feauters-box .box {
		width: 100%;
	}
	
	.article .haracteristics {
		width: 100%; 
	}

	.article img {
		width: 100%; 
	}

	.footer .powerd {
	    padding: 43px 10px;
	}

	.footer .made-by {
	    padding: 27px 10px;
	}

	.accents-text img {
		padding-top: 40px; 
	}
}

@media screen and (max-width: 320px) {
	.wrapper {
		padding: 30px 10px;
	}
}