body {
    width: 1020px;
    color: #e0e0e0;
    margin : 0 auto;
}

header {
    background: #323232;
}

.visuallyhidden {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

h1 {
    color: #323232;
}

.menu {
    font-family: Lato-Bold;
    font-weight: bold;
    font-size: 7.21379pt;
    display: flex;
    list-style: none;
    justify-content: space-between;
    width: 371px;
    margin: auto;
    align-items: center;
    font-family: 'Lato-Bold';
    padding-left: 3px;
    padding-top: 8px;
}

a, .menu-item-active:hover {
    text-decoration: none;
    color: #e0e0e0;
    text-transform: uppercase;
}

a:hover, .menu-item-active {
    color: #2eb398;
}

.menu-dot {
    color: #484c5f;
}

.logo {
    position: relative;
    top: 2px;
    height: 56px;
    width: 65px;
    margin-left: 25px;
    margin-right: 26px;
}

header::after {
    content: "";
    border: 0.5px solid currentColor;
    position: absolute;
    margin: 10px 0px 0px 580px;
    width: 407px;
}

.triangle {
    position: absolute;
    z-index: -1;
    display: inline-flex;
    top: -118px;
    left: 45.2%;
}

.triangle .hex-layer-2 {
    background-color: #323232;
}

main::before {
    content: "";
    border: 0.5px solid currentColor;
    position: absolute;
    margin: -78px 0px 0px 30px;
    width: 407px;
}

.hexagon-container {
    background-color: #ffffff;
    height: 593px;
    width: 1020px;
    min-width: 1020px;
}

.hexagon-container::after {
    content: "";
    position: absolute;
    margin: 72px 0px 0px 30px;
    width: 960px;
    background: currentColor;
    height: 0.5px;
}

.hexagon {
    width: 180px;
    height: 208px;
    transform: rotate(120deg);
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
    margin: 0px 15px 0px 1px;
    transition: transform 2s ease-in;
}

.hexagon:hover {
    transform: rotate(-360deg);
    transition: transform 2s ease-in;
}

.hex-layer-1 {
    width: 100%;
    height: 100%;
    transform: rotate(120deg);
    overflow: hidden;
    visibility: hidden;
}

.hex-layer-2 {
    width: 100%;
    height: 100%;
    background: #ccc4;
    transform: rotate(120deg);
    visibility: visible;
    background-repeat: no-repeat;
    background-position: center;
}

.hex-line-left {
    border-left: 1px solid currentColor;
    margin-left: 99px;
    position: absolute;
    height: 104px;
    width: 0px;
    margin-top: 52px;
}

.hex-line-right {
    border-left: 1px solid currentColor;
    margin-left: 920px;
    position: absolute;
    height: 104px;
    width: 0px;
    margin-top: 52px;
}

.hex-line-left2 {
    border-left: 1px solid currentColor;
    margin-left: 99px;
    position: absolute;
    height: 104px;
    width: 0px;
    margin-top: 388px;
}

.hex-line-right2 {
    border-left: 1px solid currentColor;
    margin-left: 920px;
    position: absolute;
    height: 104px;
    width: 0px;
    margin-top: 388px;
}

.hex-picture1 {
    background: url(..//assets/images/Layer33@1X.png);
}

.hex-picture2 {
    background: url(..//assets/images/Layer31@1X.png);
}

.hex-picture3 {
    background: url(..//assets/images/Layer34@1X.png);
}

.hex-picture4 {
    background: url(..//assets/images/Layer35@1X.png);
    background-position: bottom;
    background-position-y: 2px;
    background-position-y: -16px;
}

.hex-picture5 {
    background: url(..//assets/images/Layer36@1X.png);
}

.hex-picture6 {
    background: url(..//assets/images/Layer44@1X.png);
}

.hex-picture7 {
    background: url(..//assets/images/Layer37@1X.png);
}

.hex-picture8 {
    background: url(..//assets/images/Layer38@1X.png);
}

.hex-picture9 {
    background: url(..//assets/images/Layer39@1X.png);
}

.hex-picture10 {
    background: url(..//assets/images/Layer40@1X.png);
}

.hex-picture11 {
    background: url(..//assets/images/Layer41@1X.png);
}

.hex-picture12 {
    background: url(..//assets/images/Layer43@1X.png);
}

.hex-picture13 {
    background: url(..//assets/images/Layer42@1X.png);
}

.first-row {
    margin-top: 88px;
    margin-left: 119px;
}

.first-row:not(:first-child) {
    margin-top: -84px;
    ;
}

.second-row .hexagon {
    position: relative;
    bottom: 42px;
    left: 19px;
}

.slider {
    margin-left: 28px;
    width: 55px;
    min-width: 55px;
    margin-bottom: 23px;
    display: inline-flex;
}

.slider-items {
    list-style: none;
    background-color: #ddd2c5;
    border: none;
    padding: 3px;
    margin: auto;
    align-items: center;
}

.slider-items.visited {
    background-color: #8b8784;
}

.about {
    background-color: #2eb398;
    height: 273px;
    width: 1020px;
    color: #d7fcf5;
    padding-top: 68px;
}

.about-line-left {
    border-left: 1px solid #219d84;
    margin-left: 99px;
    position: absolute;
    height: 316px;
    width: 0px;
    margin-top: -55px;
}

.about-line-right {
    border-left: 1px solid #219d84;
    margin-left: 920px;
    position: absolute;
    height: 316px;
    width: 0px;
    margin-top: -55px;
}

article {
    position: relative;
}

.picture-Smith {
    background: url(..//assets/images/Image@1X.png);
    background-position: 50%;
}

.about .hexagon {
    position: relative;
    top: -1px;
    left: 120px;
}

h2 {
    font-family: 'MavenPro-Regular';
    font-size: 29.35px;
    width: 212px;
    left: 319px;
    top: -4.5px;
    position: absolute;
}

h3 {
    font-family: 'MavenPro-Regular';
    font-size: 13.16pt;
    color: #20816d;
    width: 257px;
    left: 320px;
    top: 28.7px;
    position: absolute;
}

.about p {
    font-family: 'Lato-Regular';
    left: 320px;
    position: absolute;
    width: 581px;
    text-align: justify;
    top: 59px;
    font-size: 11.94px;
    line-height: 186%;
}

.getInTouch {
    background-color: #323232;
    height: 564px;
    width: 900px;
    padding-left: 120px;
    position: relative;
    font-family: 'MavenPro-Regular';
}

.getInTouch::before {
    content: "";
    position: absolute;
    margin: 13px 0px 0px -90px;
    width: 960px;
    background: #2b2b2b;
    height: 1px;
}

.getInTouch::after {
    content: "";
    position: absolute;
    margin: 53px 0px 0px -90px;
    width: 960px;
    background: #2b2b2b;
    height: 1px;
}

form {
    width: 580px;
    height: 370px;
}

h4 {
    text-transform: capitalize;
    font-size: 22.65pt;
    padding-top: 62px;
    color: #e0e0e0;
}

.getInTouch p {
    padding-top: 3px;
    font-size: 13.55pt;
    color: #bebebe;
    padding-left: 1px;
}

input {
    background-color: #454545;
    margin: 4.5px 0px 11px 0px;
    padding: 0;
    border: none;
    padding-left: 15px;
    color: #bebebe;
}

/* цвет текста для placeholder */

.input-small::-webkit-input-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

.input-small::-moz-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

.input-small:-moz-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

.input-small:-ms-input-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

/* плавное изменение прозрачности  placeholder-а при фокусе */

input::-webkit-input-placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

input::-moz-placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

input:-moz-placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

input:-ms-input-placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

input:focus::-moz-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

input:focus:-moz-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

input:focus:-ms-input-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.input-small {
    width: 564px;
    height: 38px;
}

textarea {
    width: 564px;
    height: 136px;
    color: #bebebe;
    background-color: #454545;
    margin: 6.5px 0px 17px 0px;
    resize: none;
    border: none;
    padding-left: 14px;
    overflow: auto;
    padding-top: 11px;
}

textarea::-webkit-input-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

textarea:-moz-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

textarea::-moz-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

textarea::-webkit-input-placeholder {
    font-size: 11.8px;
    font-family: 'MyriadPro-Regular';
    color: #bebebe;
}

button {
    background-color: #2eb398;
    color: #d7fcf5;
    width: 90px;
    height: 36px;
    border: none;
    margin-left: 490px;
    margin-top: -2px;
    text-transform: uppercase;
    font-family: 'Lato-Bold';
    font-size: 11px;
}

button:hover {
    width: 95px;
    height: 41px;
    margin-left: 487.5px;
    margin-top: -1px;
}

.comment span {
    font-weight: bold;
    color: #e0e0e0;
}

.comment p {
    position: absolute;
    width: 180px;
    height: 130px;
    text-align: justify;
    left: 720px;
    margin-top: -4px;
    font-size: 12px;
    color: #bebebe;
    font-family: 'Lato-Regular';
    line-height: 181%;
}

.contacts {
    position: absolute;
    top: 290px;
    left: 719px;
}

.contacts p {
    font-size: 12px;
    color: #bebebe;
    font-family: 'Lato-Bold';
    line-height: 155%;
}

a.href-contacts {
    font-size: 12px;
    color: #bebebe;
    font-family: 'Lato-Bold';
    line-height: 155%;
    text-transform: none;
}

a:hover.href-contacts {
    color: #2eb398;
}

.copyRight {
    background-color: #222222;
    height: 27px;
    width: 981px;
    margin: 0px;
    padding-top: 16px;
    padding-left: 39px;
    font-family: "MavenPro-Regular";
    font-size: 8.65655pt;
    color: rgba(69, 69, 69, 255);
}

.social-media {
    position: relative;
}

.social-list {
    position: absolute;
    left: 753px;
    bottom: 3px;
}

.social-list li {
    display: inline-flex;
}

.href-fb {
    background-image: url(..//assets/images/Facebook_green.png);
    width: 24px;
    height: 24px;
}

.href-fb:hover {
    background-image: url(..//assets/images/Facebook@1X.png);
}

.href-tw {
    background-image: url(..//assets/images/Twitter_green.png);
    width: 24px;
    height: 24px;
}

.href-tw:hover {
    background-image: url(..//assets/images/Twitter@1X.png);
}

.href-go {
    background-image: url(..//assets/images/Google_green.png);
    width: 25px;
    height: 24px;
}

.href-go:hover {
    background-image: url(..//assets/images/Google@1X.png);
}

.href-pin {
    background-image: url(..//assets/images/Pinterest_green.png);
    width: 25px;
    height: 24px;
}

.href-pin:hover {
    background-image: url(..//assets/images/Pinterest@1X.png);
}

.href-li {
    background-image: url(..//assets/images/Linkedin_green.png);
    width: 25px;
    height: 24px;
}

.href-li:hover {
    background-image: url(..//assets/images/Linkedin@1X.png);
}

.href-dr {
    background-image: url(..//assets/images/Dribbble_green.png);
    width: 24px;
    height: 24px;
}

.href-dr:hover {
    background-image: url(..//assets/images/Dribbble@1X.png);
}