/*Спецификация*/

body, div, h1, h2, h3, h4, h5, p, ul, li, span, button {
	margin: 0;
	padding: 0;
}

h1, h2, h4 {
	font-family: 'Century Gothic', sans-serif;
}

header, div, p, h1, h2, h3, h4, span, ul, li, button, input, form {
	box-sizing: border-box;
}

ul, li {
	display: block;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5 {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

h2 {
	font-size: 37px;
	color: #143160;	
}

h4 {
	font-size: 22px;
	color: #888886;
}

h5 {
	font: 15px 'Museo Sans Cyrl 900', sans-serif;
	color: #4b4c47;
}

p {

	line-height: 1.68em;
}

a {
	text-decoration: none;
}

button {
	display: block;
	border: none;
	outline: none;
	cursor: pointer
}

.d-flex {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
}

.j-content-space-between {
	justify-content: space-between;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
}

.j-content-space-around {
	justify-content: space-around;
	-webkit-align-content: space-around;
	-ms-flex-line-pack: distribute;
}

.j-content-center {
	justify-content: center;
}

.a-items-center {
	align-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
}

.f-wrap {
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
}	

.clearfix {
	content: '';
	display: table;
	width: 100%;
	clear: both;
}

.container {
	width: 1170px;
	margin: 0 auto;
}

/*Шапка сайта*/

header {
	background: url('../img/Layer 15.png') no-repeat top center/cover;
	color: #fff;
	letter-spacing: 0.12em;
	padding: 53px 0 78px;
}
header .container {
	height: 100vh;
}

.logo {
	font: 17px 'Museo Sans Cyrl 900', sans-serif;
	text-transform: uppercase;
}

.logo__text {
	font-family: 'Museo Sans Cyrl 100', sans-serif;
}

.menu__item {
	text-transform: uppercase;
	font: 15px 'Museo Sans Cyrl 900', sans-serif;
	margin-right: 47px;
}

.menu__link {
	color: #fff;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;

}

.menu__link:hover {
	color: #888886;
}

.ukr {
	color: #fff;
	position: relative;
	font: 13px 'Museo Sans Cyrl 300', sans-serif;
	text-decoration: none;
}

.mail:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #666863;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.mail:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.head-middle {
	text-align: center;
	margin-top: 287px;
}

.head-middle__title {
	font-size: 55px;
}

.head-middle__text {
	font: 29px 'Museo Sans Cyrl 100', sans-serif;
	margin-top: 21px;
}

.arrow {
	width: 35px;
	height: 35px;
	border: 3px solid #a9aba4;
	border-radius: 50%;
	text-align: center;
	padding-left: 2px;
	margin: 250px auto 0;
	font-size: 18px;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
}

.arrow:hover {
	background: rgba(255,255,255, 0.1);
}

.arrow__link {
	font: 18px 'Arial', sans-serif;
	line-height: 30px;
	color: #b2b3af;
	transition: all .4s ease;
    -webkit-transition: all .4s ease;
}

.arrow__link:hover {
	color: #fff;
}

/*Первая сеция*/

#design {
	padding: 86px 0;
}

.achiev {
	margin-top: 69px;
}

.achiev__col-left {
	flex-basis: 430px;
}

.achiev__title {
	margin-bottom: 28px;
}

.achiev__col-left p {
	font: 15px 'Museo Sans Cyrl 300', sans-serif;
	letter-spacing: 0.02em;
	line-height: 1.68em;
	margin-bottom: 24px;
}

.achiev__col-right {
	flex-basis: 460px;
	-webkit-flex-basis: 460px;
	-ms-flex-preferred-size: 460px;
}

.advant {
	margin: 38px 0 64px 0;
}

.advant__elem {
	width: 112px;
	font: 40px 'Museo Sans Cyrl 100', sans-serif;
}

.advant__level-1 {
	width: 100px;
	height: 100px;
	border: 1px solid #3e6534;
	padding: 9px 0 0 9px;
	margin: 0 auto;
	transform: rotate(135deg) scale(0.8) skew(0deg) translate(0px);
	-webkit-transform: rotate(135deg) scale(0.8) skew(0deg) translate(0px);
	-moz-transform: rotate(135deg) scale(0.8) skew(0deg) translate(0px);
	-o-transform: rotate(135deg) scale(0.8) skew(0deg) translate(0px);
	-ms-transform: rotate(135deg) scale(0.8) skew(0deg) translate(0px);
}

.advant__level-2 {
	width: 80px;
	height: 80px;
	border: 1px solid #cddbc3;
	text-align: center;
	padding-top: 14px;
	color: #3c5e34;
}

.advant__num {
	transform: rotate(-135deg) scale(0.765) skew(0deg) translate(0px);
	-webkit-transform: rotate(-135deg) scale(0.765) skew(0deg) translate(0px);
	-moz-transform: rotate(-135deg) scale(0.765) skew(0deg) translate(0px);
	-o-transform: rotate(-135deg) scale(0.765) skew(0deg) translate(0px);
	-ms-transform: rotate(-135deg) scale(0.765) skew(0deg) translate(0px);
}

.advant__info {
	font: bold 12px 'Museo Sans Cyrl 100', sans-serif;
	color: #22241b;
	text-align: center;
	text-transform: uppercase;
	margin-top: 23px;
}

.wrapper {
	margin-top: 25px;
}

.connect {
	flex-basis: 200px;
	-webkit-flex-basis: 200px;
	-ms-flex-preferred-size: 200px;
}

.box {
	flex-basis: 245px;
	-webkit-flex-basis: 245px;
	-ms-flex-preferred-size: 245px;
}

.connect__item {
	color: #204d15;
	margin-bottom: 14px;
	font: 14px 'Museo Sans Cyrl 300', sans-serif;
	letter-spacing: 0.12em;
}

.connect__link {
	color: #204d15;
	padding-bottom: 4px;
	position: relative;
}

.connect__link:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #becbbb;;
  visibility: hidden;
  -webkit-transition: width .4s ease-in-out;
   transition: width .4s ease-in-out;
}

.connect__link:hover:before {
	visibility: visible;
	width: 100%;
}

.box {
	align-items: center;
}

.icon {
	background: #eef1ed url('../img/user-icon.png') no-repeat center center;
	width: 65px;
	height: 65px;
	border-radius: 50%;
}

.box p {
	font: 14px 'Museo Sans Cyrl 300 Italic', sans-serif;
	color: #797a77;
}

#skills {
	padding-bottom: 70px;
}

.box-skills {
	margin-top: 50px;
}

.col-skills {
	flex-basis: 270px;
}

.col-skills__level {
	width: 60px;
	height: 60px;
	border: 1px solid #234f18;
	border-radius: 50%;
	margin-right: 27px;
	padding-top: 6px;
}

.col-skills__num {
	width: 46px;
	height: 46px;
	border: 1px solid #adb2ac;
	border-radius: 50%;
	margin: 0 auto ;
	font: 13px 'Museo Sans Cyrl 100', sans-serif;
	text-align: center;
	color: #204d15;
	padding-top: 15px;
}

/*Третья секция*/

#work {
	padding-bottom: 117px;
}

.box-image {
	margin-top: 50px;
}

.box-image__col {
	flex-basis: 300px;
	flex-wrap: wrap;
	height: 299px;
	text-align: center;
	position: relative;
	cursor: pointer;
}

.box-image__info {
	visibility: hidden;
	width: 100%;
	height: 0px;
	position: absolute;
	top: 0px;
	background: rgba(0, 0, 0, 0.5);
	transition: all .3s ease-in-out;
}

.box-image__col:hover .box-image__info {
	visibility: visible;
	height: 100%
}

.box-image__title {
	color: #fff;
	margin: 130px 0 3px;
}

.box-image__link {
	font: 13px 'Museo Sans Cyrl 300', sans-serif;
	color: #fff;
	padding-bottom: 3px;
	border-bottom: 1px solid #858687;
}
.slider{
	background: #888886;
	
}
/*Fourth Section*/









* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
 .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
 }

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
/*Подвал сайта*/

footer {
	padding-bottom: 110px;
}

.right {
	width: 220px;
	font: 11px 'Museo Sans Cyrl 300', sans-serif;
	text-transform: uppercase;
	color: #a4a4a2;
}

/*Mobile Menu*/

.nav-trigger {
	display: none;
	position: fixed;
	width: 80px;
	height: 80px;
	left: -42px;
	top: 5px;
	cursor: pointer;
	z-index: 200;
	-webkit-transform-origin: 110px 0px;
	-moz-transform-origin: 110px 0px;
	-ms-transform-origin: 110px 0px;
	-o-transform-origin: 110px 0px;
	transform-origin: 110px 0px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-transition: background 0.3s linear;
	-moz-transition: background 0.3s linear;
	transition: background 0.3s linear;
}

.line {
	display: block;
	position: absolute;
	width: 50px;
	height: 8px;
	background: #888886;
	left: 15px;
	-webkit-transform-origin: -2px 3px;
	-moz-transform-origin: -2px 3px;
	-ms-transform-origin: -2px 3px;
	-o-transform-origin: -2px 3px;
	transform-origin: -2px 3px;
	-webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-transform 0.24s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
	-moz-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -moz-transform 0.24s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
	transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, transform 0.24s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.line:nth-child(1) {
	top: 16px;
}

.line:nth-child(2) {
	top: 35px;
}

.line:nth-child(3) {
	top: 53px;
}

.close .line:nth-child(1) {
	-webkit-transform: translateX(11px) rotate(45deg);
	-moz-transform: translateX(11px) rotate(45deg);
	-ms-transform: translateX(11px) rotate(45deg);
	-o-transform: translateX(11px) rotate(45deg);
	transform: translateX(11px) rotate(45deg);
}

.close .line:nth-child(2) {
	opacity: 0;
}

.close .line:nth-child(3) {
	-webkit-transform: translateX(11px) rotate(-45deg);
	-moz-transform: translateX(11px) rotate(-45deg);
	-ms-transform: translateX(11px) rotate(-45deg);
	-o-transform: translateX(11px) rotate(-45deg);
	transform: translateX(11px) rotate(-45deg);
}

#nav {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 100;
}

nav.out {
	pointer-events: none;
}

nav.in {
	pointer-events: auto;
}

.nav-list, .nav-list li {
	width: 100%;
	cursor: pointer;
}

.nav-list {
	height: 100%;
	width: 100%;
	position: absolute;
}

.nav-list li {
	height: 33.3%;
	position: relative;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-family: "Patua One", cursive;
	transition: all .5s ease;
}

.nav-list li:hover {
	background: rgba(121, 122, 119, 0.6);
}

nav.in li:nth-child(1) {
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s, opacity 0.5s linear 0.1s;
	-moz-transition: -moz-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s, opacity 0.5s linear 0.1s;
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s, opacity 0.5s linear 0.1s;
}

nav.in li:nth-child(2) {
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, opacity 0.5s linear 0.2s;
	-moz-transition: -moz-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, opacity 0.5s linear 0.2s;
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, opacity 0.5s linear 0.2s;
}

nav.in li:nth-child(3) {
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, opacity 0.5s linear 0.3s;
	-moz-transition: -moz-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, opacity 0.5s linear 0.3s;
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, opacity 0.5s linear 0.3s;
}

nav.in li:nth-child(4) {
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.5s linear 0.4s;
	-moz-transition: -moz-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.5s linear 0.4s;
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.5s linear 0.4s;
}

nav.in li:nth-child(5) {
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s linear 0.5s;
	-moz-transition: -moz-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s linear 0.5s;
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s, opacity 0.5s linear 0.5s;
}

nav.out li:nth-child(5) {
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s, opacity 0.3s linear 0s;
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s, opacity 0.3s linear 0s;
	transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s, opacity 0.3s linear 0s;
}

nav.out li:nth-child(4) {
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.05s, opacity 0.3s linear 0.05s;
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.05s, opacity 0.3s linear 0.05s;
	transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.05s, opacity 0.3s linear 0.05s;
}

nav.out li:nth-child(3) {
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s, opacity 0.3s linear 0.1s;
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s, opacity 0.3s linear 0.1s;
	transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.1s, opacity 0.3s linear 0.1s;
}

nav.out li:nth-child(2) {
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.15s, opacity 0.3s linear 0.15s;
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.15s, opacity 0.3s linear 0.15s;
	transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.15s, opacity 0.3s linear 0.15s;
}

nav.out li:nth-child(1) {
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s, opacity 0.3s linear 0.2s;
	-moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s, opacity 0.3s linear 0.2s;
	transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.2s, opacity 0.3s linear 0.2s;
}

nav.out li {
	-webkit-transform: translateY(300%);
	-moz-transform: translateY(300%);
	-ms-transform: translateY(300%);
	-o-transform: translateY(300%);
	transform: translateY(300%);
	opacity: 0;
}

nav.in li {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.nav-label {
	font-size: 40px!important;
	font-family: 'Museo Sans Cyrl 900', sans-serif;		
	position: absolute;
	width: 100%;
	left: 0;
	text-align: center;
	height: 16px;
	top: 50%;
	margin-top: -8px;
}
/*media screen*/
@media screen and (max-width: 1170px) {

	.container {
		width: 90%;
	}

	.menu {
		display: none;
	}

	.head-top {
		display: block;
		text-align: center;
	}

	.logo {
		margin-bottom: 30px;
	}

	.nav-trigger {
		display: block;
	}

	.head-middle {
		margin-top: 150px;
	}

	.head-middle__title {
    	font-size: 35px;
    }
	
	.arrow {
		margin-top: 120px;
	}

	.title {
		text-align: center;
	}

	.connect {
		align-self: center;
	}

	.achiev {
		justify-content: center;
	}

	.achiev__col-right {
		flex-basis: 430px;
	}

	.box {
		margin-top: 10px;
	}

	.box-skills {
		width: 430px;
		margin: 30px auto 0;
		justify-content:space-between;
		align-items: center;
	}

	.col-skills {
		margin-bottom: 15px;
		flex-basis: 140px;
	}

	.box-image {
		justify-content: center;
	}

	.box-image__col_left {
		margin-right: 20px;
	}

	.box-image__col_right {
		margin-top: 20px;
	}

	.right {
		margin: 0 auto;
		text-align: center;
	}
}

@media screen and (max-width: 1024px) {

	.head-middle {
		margin-top: 100px;
	}

	.arrow {
		margin-top: 90px;
	}

	.container {
		width: 90%;
	}

	.head-middle__title {
    	font-size: 35px;
    }

    .box-image__col_left {
    	margin: 0 0 20px 0;
}


@media screen and (max-width: 768px) {

	.head-middle {
		margin-top: 100px;
	}

	.arrow {
		margin-top: 90px;
	}

	.container {
		width: 80%;
	}

	.head-middle__title {
    	font-size: 35px;
    }

    .box-image__col_left {
    	margin: 0 0 20px 0;
}

@media screen and (max-width: 768px) {
	
	.container {
		width: 100%;
	}

	.head-middle__title {
    	font-size: 30px;
    	line-height: 1.5em;
    }

    .head-middle__text {
    	font-size: 19px;
    }

    .title {
    	font-size: 27px;
    }

    h4 {
    	text-align: center;
    }

    .achiev {
    	margin-top: 50px;
    }

    .advant {
    	flex-direction: column;
    	align-items: center;
    }

    .advant__elem {
    	margin-bottom: 25px;
    }

    .wrapper {
    	justify-content: center;
    }

    .connect__item {
    	text-align: center;
    }

    .box-skills {
    	width: 287px;
    	justify-content: center;
    }

    .col-skills {
		flex-basis: 200px;
	}
    .mySlides{
	width: 100%;
	}
}