/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,Cyrillic');
@import url('https://fonts.googleapis.com/css?family=Oswald');

@font-face {
	font-family: 'icomoon';
	src: url('/fonts/icomoon.eot');
	src: url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('/fonts/icomoon.woff') format('woff'),
		url('/fonts/icomoon.ttf') format('truetype'),
		url('/fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}


html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Удалить отступ по умолчанию. */

body {
  margin: 0;
  background-color: #0E1A46; 
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
cbp-af-header,
cbp-af-inner,
hgroup,
figcaption, 
figure,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/* Связи
   ========================================================================== */

/* Удалить серый цвет фона из активных ссылок в IE 10.*/

a {
  background-color: transparent;
}

/* Улучшение читаемости при фокусировании, а также наведении мыши во всех браузерах. */

a {
  color: #1EAEDB;
  text-decoration: none;
}
a:hover {
  color:#3B6AA7; 
}

a:active,
a:hover {
  outline: 0;
}


b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; 
  line-height: 1.6;
  font-weight: 400;
  font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #353535;
}

/* Типографика
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }

h1 {
  color:#8CB7D7;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.2rem;
  font-weight: 100;
  font-style: normal;
 }

h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: .05rem; }
h3 { font-size: 3.1rem; line-height: 1.3;  letter-spacing: .05rem; }
h4 { font-size: 2.1rem; line-height: 1.35; letter-spacing: .05rem; }
h5 { font-size: 1.6rem; line-height: 1.5;  letter-spacing: 0rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }


.cbp-af-inner {
  margin: 0 auto;
  padding-bottom: 0;
 }

main {
  display: block;
  padding: 0 20px;
 }

.main h2 {
  font-size: 3.9rem;
  font-weight: 200;
  text-align: center;
  margin-top: 20px;
  padding: 20px 0 20px 0;
}
.main .portfolio h2 {
	color: #29ABE2;
	margin-top: 0;
	padding-top: 40px;
}

.main h3 {
  	font-size: 2.7rem;
  	text-align: left;
  	margin-top: 10px;
  	color:#8CB7D7;
  	padding-left: 52px;
}
.main .portfolio h4 {
	color: #29ABE2;
	padding-top: 10px;
	padding-left: 52px;
}
.main .portfolio h5 {
	color: #999;
	padding-top: 5px;
	padding-left: 52px;
}

/* Шапка
   =========================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #FFFFFF;
}

.cbp-af-header {
  position: fixed;
  width: 1200px;
  height: 217px;
  background-color: #172f52;
  margin: 0 auto;
  z-index: 10000;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
	max-width: 100%;
	margin: 0 auto;
	margin-top: 0;
}

#foto {
	float: left;
	margin-top: 10px;
	margin-right: 0;
	margin-left: 50px;
	margin-bottom: 0;
}

 .cbp-af-header .cbp-af-inner h1 {
	font-size: 6em;
	line-height: 1em;
	margin: 35px 0 0 10px;
	float: left;
	font-weight: normal;
	font-style: normal;
}
.header-right {
	font-family: Roboto, Arial, sans-serif;
	font-size: 1em;
	line-height: 0.95em;
	color: rgb(145, 167, 188);
	float: right;
	margin: 33px 110px 0 0;
	opacity: 0.7;
	letter-spacing: 0.08em;
}


/* Главное меню */

.menu *{
	float: left;
}

.menu li {
	position: relative;
	list-style: none;
}
.menu a.parent {} 

.menu_list {
	display: flex;
}

.menu_list>li{ /* Знак > только для первого уровня */
	margin: 0px 0px 0px 13px;
}

.menu_list>li:hover {
	background: none;
}

.menu_list li:hover .sub-menu_list { /* Изначально скрыто, при наведении на первый уровень - есть */
	display: block;
}

.menu_list a {
	text-decoration: underline;
	color: rgb(73, 157, 222);
	font-family: Roboto, Arial, sans-serif;
	font-weight: 400;
	margin: 0 50px 0 0;
	font-size: 1.4em;
	line-height: 2.5em;
}

.menu_list a:hover {
	color: #8CE3FF;
}

.sub-menu_list {
	font-size: 0.8em;
	display: none;
	position: absolute;
	left: 0;
	top: 20px;
	padding: 15px 0px 0px 0px;
	min-width: 125px;
}

.sub-menu_list a {
	text-decoration: none;
	color: #FFFFFF;
	min-width: 125px;
}

.sub-menu_list a:hover {
	color: #152D80;
	min-width: 125px;
}


.sub-menu_list>li {
	background-color: rgb(73, 157, 222);
	display: block;
	width: auto;
}

.sub-menu_link {
	display: block;
	padding: 5px 0px 5px 15px;
	text-decoration: none;
	border-bottom: 1px solid #c7c8ca;
	width: 92%;
}


.arrow { /* Стили для тачскина */
	display: none;
	position: absolute;
	right: 20px;
	top: 23px;
	width: 0;
	height: 0;
	border-top: 8px solid #fff;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

.arrow.active {
	transform: rotate(-180deg);
}

.menu_arrow {}

body.mouse .menu_list>li:hover .sub-menu_list {
	display: block;
}

body.touch .sub-menu_list.open {
	display: block;
}

body.touch .arrow {
	display: block;
}


/* Переходы и уменьшение высоты */

.cbp-af-header h1,
.cbp-af-header img,
.cbp-af-header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	float: left;
	margin-left: 0;
}

.cbp-af-header-shrink {
	height: 88px;
	width: 1200px;
	margin: 0 auto;
}

.cbp-af-header .cbp-af-header-shrink h1,
.cbp-af-header .cbp-af-header-shrink nav a {
	line-height: 88px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
	font-size: 3em;
	letter-spacing: 0;
	float: left;
	margin: 17px 0 0 -160px;
}
.cbp-af-header.cbp-af-header-shrink nav {
	float: right;
	margin-right: 20px;
	margin-top: 13px;
}
.cbp-af-header.cbp-af-header-shrink #foto img {
	width: 37%;
	height: 37%;
	margin-top: 1px;
	}
.cbp-af-header.cbp-af-header-shrink .header-right {
	display: none;
}

/* Смена языка*/

.language {
	font-size: 0.9em;
	color: cyan;
	margin-top: 24px;
}

.lang_default {
	opacity: 0.2;
}


.projects {
	background-color: #DEEAF6;
	padding: 10px 0 60px 0;
	}

/* Слайдер */

.slider {
	max-width: 1080px;
	height: 522px;
	object-fit: cover;
	}

.slider__images {
	opacity: 1;
	position: relative;
  	top: 0px;
  	left: 0px;
  	list-style-type: none;
  	transition: opacity .4s ease-in, visibility .4s ease-in;
	height: 100%;
	object-fit: cover;
	}


.slider__images.loaded {
  opacity: 1;
  visibility: visible;
  height: 100%;
  }

.slider__images-item {
  position: absolute;
  top: 0px;
  left: 0px;
  }

.no-js .slider__images-item:first-of-type {
  position: relative;
}

.no-js .slider__images-item:not(:first-of-type) {
  display: none !important;
}

.slider__images-item .slider__images-image {
  display: block;
}

.slider .slider__controls {
  margin-top: 30px;
  user-select: none;
  text-align: center;
}

.slider  .slider__control {
  display: inline-block;
  color: #829995;
  cursor: pointer;
}

.slider__control--prev {
  margin-right: 10px;
}

.slider__control--next {
  margin-left: 10px;
}

.slider__pagers {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slider__pagers li {
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  color: #829995;
  padding: 0 10px;
}

.slider__pagers li.active {
  color: #333;
}


ul, ol, div {
  margin: 0; 
  padding: 0;
	}

/* Контент
   =========================================================================================== */


/* Карьера */

.boxes, .select, .figure, .figcaption, .content, .copyright, .contacts, .picture, .subtitle {
	display: flex;
	flex-flow: row wrap;
}

 .section.boxes {
	margin-left: 10px;
	margin-right: 10px;
}

.boxes .content {
	flex-flow: row wrap;
	justify-content: space-around;
	background: #17171D;
	padding: 0 20px 80px 20px;
}
.subheader {
	padding-left: 135px;
	padding-bottom: 0;
	margin-top: 0;
	color: #662d91;
	font-weight: 600;
}
.skill {
	padding-left: 135px;
	padding-bottom: 0;
	margin-top: 0;
}
.skill_ua {
	padding-left: 140px;
	padding-bottom: 0;
	margin-top: 0;
}

.skillBold {
	color: #053657;
	font-weight: 700;
}

.sub-header {
	padding: 0;
	text-align: left;
	margin-top: 0;
	font-weight: 600;
	color: #8217B7
}
.years {
	font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #738596; 
    font-weight: 500;
}

/* Проекты. Достижения */

.article {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
    padding: 0 20px 0 20px;
	margin: 0 10px 0 10px;
}
.article box {
	flex: 1 1 510px;
}
.article .figure {
	width: 510px;
	margin: 30px 0 0 0;
}
.article .figure .figcaption {
	flex: 2;
	padding: 0;
	margin: 0 0 0 15px;
}
.article .figure .figcaption p {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.6em;
}
.article .figure .figcaption .years {
	font-weight: 700;
}
.boxes div {
	flex: 1 1 250px;
	margin: 10px;
	padding: 10px 10px 0 10px;
	background-color: rgba(0, 0, 0, .1);
	display: flex;
	flex-flow: column;
}
.boxes .more {
	margin-top: auto; 
}
.boxes .select {
	background-color: #fff;
	font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.32em;
	color: #353535; 
    font-weight: 400;
    line-height: 28px;
	margin-left: 30px;
	margin-bottom: 30px;
}
.indent {
	text-indent: -135px;
    padding-left: 135px;
	padding-bottom: 0;
	margin-top: 0;
}

.indent_ua {
	text-indent: -140px;
    padding-left: 140px;
	padding-bottom: 0;
	margin-top: 0;
}

/* Портфолио */

.portfolio {
	background-color: #17171D;
	}

.date {
	font-family: Roboto, "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetica, Arial, "sans-serif";
	font-size: 13px;
	letter-spacing: 0.05rem;
	color: #555555;
    font-weight: 600;
    line-height: 16px;
    text-align: right;
    padding: 0px;
}

.subtitle {
	display: flex;
	padding-right: 45px;
	flex-flow: row nowrap;
    align-items: flex-start;
	justify-content: space-between;
}

.portfolio .subtitle h5 {
	flex: 8;
	color: #999;
	padding-top: 5px;
	padding-left: 52px;
}
.subtitle img {
	flex: 1;
	margin-top: 10px;
}
.assets {
	flex: 0.4;
	padding-left: 40px;
}
.HeadTeaser {
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-size: 22px;
	color: #FFFFFF;
	font-weight: bold;
    line-height: 30px;
    padding: 0;
	margin: 0 15px 0 0;
	width: 100%;
}
.teaser {
	font-family: Roboto, "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetica, Arial, "sans-serif";
    font-size: 15px;
	letter-spacing: 0.05rem;
	color:#D1D1D1;
    font-weight: 400;
    line-height: 20px;
    padding: 0px;
	margin: 10px 0 0 0;
	width: 100%;
}
figure {
	width: 30%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}

figure img {
	width: 100%;
	height: auto;
}
figcaption {
  	font: 1.1em Arial, Helvetica, sans-serif;
  	letter-spacing: 0.02rem;
  	line-height: 1.4em;
  	text-align: left;
 	color:#757575;
  	margin: 10px 0 0 0;
}
.caption {
	margin: 7px 0 0 0;
	font: 0.98em Arial, Helvetica, sans-serif;
	letter-spacing: 0.028rem;
  	line-height: 1.5em;
	width: auto;
}
.boxes .content figure:nth-of-type(1n+1) {
	margin: 20px 0 0 0;
}
.boxes .content a:nth-of-type(1n+1) {
	margin: 25px 0 0 0;
}

.imgSmall {
	max-width: 100%;
	max-height: auto;
}

.content .infopack {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	background-color: #17171D;
}



/* Футер
   ===================================================== */

footer {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  background-color:#181437;
  padding: 30px 30px 50px 52px;
}
.copyright {
	flex: 1;
	color: #868383;
	padding-top: 5px;
}
.contacts {
	flex: 2;
	flex-direction: column;
	color:#D1D1D1;
}
.contacts h2 {
	color: #29ABE2;
	text-align: left;
	margin: 10 0 15px 0;
	padding-top: 0;
	font-size: 3.6rem;
    font-weight: 200;
}
.contacts h4 {
	margin-bottom: 10px;
}
.network {
	display: flex;
}
.network img {
	margin-left: 10px;
}
.note {
	font: 0.9em Arial, Helvetica, sans-serif;
  	letter-spacing: 0.02rem;
  	line-height: 1.6em;
  	text-align: center;
 	color:#757575;
  	margin: 10px 0 0 0;
	padding: 0 33px 0 33px;
}

.mail {
	color: #91BAD5;
}

/* Галерея*/

.content .gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
	float:left;
	background-color: #17171D;
}
.gallery figure {
	display: block;
	width: 300px;
	height: auto;
	margin-top: 40px;
	padding: 0;
}
.gallery figure img {
	display: block;
	width: 300px;
	height: auto;
	margin: 0 auto;
}
.gallery figcaption {
	font: 1.1em Arial, Helvetica, sans-serif;
  	text-align: left;
	margin: 10px 0 0 0;
}
.gallery figcaption p {
	width: auto;
}

/* Видео */

.border0 {
	border:0;
}
.blue {
	font-size: 1.1em;
	color: #29ABE2;
}


/* Мобильное меню */


.container-menu {
  margin: 0 auto;
  z-index: 20000;
  display: none;
  position: fixed;
	
}
.header-menu {
  height: 55px;
  background-color: none;
  position: relative;
  z-index: 2;
}
.container-menu nav {
  width: 100%;
  box-shadow: inset 0 5px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
}
.nav__item {
  display: block;
  height: 60px;
  font-family: Roboto, Arial, sans-serif;
  color: #fff;
  font-size: 1.1em;
  letter-spacing: 1.5px;
  line-height: 56px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #4583d8;
  transition: background-color 0.1s linear, color 0.1s linear;
}
.nav__item:not(:first-of-type) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.nav__item:not(:last-of-type) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.nav__item:last-of-type {
  box-shadow: inset 0 -5px 10px -5px rgba(0, 0, 0, 0.4);
}
.nav__item:hover {
  background-color: #2768c1;
}
.nav__item:active {
  background-color: #2768c1;
  color: #fff;
}
.nav-burger {
  display: block;
  width: 25px;
  height: 23px;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  background: url("/images/icon-menu.svg") no-repeat;
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 1;
}
.nav-burger__checkbox {
  display: none;
}
.nav-burger__checkbox:checked + .nav-burger {
  background-image: url("/images/icon-cross.svg");
}
.nav-burger__checkbox:checked ~ .nav {
  display: block;
}

.nav ul {
  margin: 0;
  padding: 0;
  display: none;
}
.nav li {
	display: block;
	width: 100%;
	height: 56px;
	line-height: 56px;
	font-family: Roboto, Arial, sans-serif;
	font-size: 1.2em;
	text-align: center;
	background: rgb(173,213,255);
	cursor: pointer;
}
	
.nav__item:hover + ul {
	display: block;
}
ul:hover {
	display: block;
}
li:hover {
	background: rgb(127,174,237);
}



/* Отображение меню, когда пользователь нажал кнопку*/
	.nav .active + .nav-burger ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}

.slider {
	margin: 230px auto 0 auto;
	padding: 10px 10px 20px 10px;
	background: #FFFFFF;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}