/* ----- General ----- */
*, *:before, *::after {box-sizing: border-box;}
body {font-family: 'Raleway', sans-serif; font-size: 14px; -webkit-font-smoothing:antialiased; color:#777076; background-color: #fff; margin: 0;}
.container {margin:0 auto; max-width: 1200px; padding: 0 15px; width: 100%;}
h1, h2, h3, h4, h5, h6 {margin: 0;}
p {margin: 0 0 10px;}

/* ----- Button ----- */
.btn {
    display: inline-block; vertical-align: top; padding: 14px 40px; 
    border-radius: 2px; border: 0; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: 'Raleway', sans-serif; color: #fff; text-transform: uppercase; text-align:center; text-decoration: none; transition: background .1s linear;}
.btn--color {background-color: #e53250;}
.btn--color:hover {background-color: #d32441;}

/* ----- Social ----- */
.social {display: flex;}
.social__item {
    display: flex; justify-content: center; align-items: center;
    height: 40px; width: 40px; margin-right: 4px;
    background-color: #fff; border: 1px solid #e8ecee;
    transition: background .1s linear;
}
.social__item:hover {background-color: #e8ecee;}
.social__icon {display: block; height: 18px; fill:#c6cacc; transition: fill .1s linear;}
.social__item:hover .social__icon {fill: #3a1437;}

.social--footer {justify-content: center;}
.social--footer .social__item {background-color: transparent; border: 2px solid #fff; border-radius: 2px;}
.social--footer .social__icon {fill:#fff;}
.social--footer .social__item:hover {background-color: #fff;}

/* ----- HEADER ----- */
.header {position: absolute; top:0; left:0; height: 100px; width: 100%; z-index: 1000;}
.header.fixed {height: auto; position: fixed; background-color: #382937;}

.header.fixed .header__inner {padding-top: 15px; padding-bottom: 15px; border-bottom: 0;}
.header__inner {
    display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid #7d677b; padding: 35px 0;
}
.nav  {display: flex; font-size: 13px; font-weight: 700; text-transform: uppercase;}
.nav__link {color:#fff; margin-left:50px; opacity: .75; text-decoration: none; transition: opacity .1s linear;}
.nav__link:first-child {margin-left: 0;}
.nav__link:hover {opacity: 1;}
.burger {display: none; background: none; border:0; padding: 9px 2px; cursor: pointer;}
.burger__item {display: block; height: 3px; width: 28px; background-color: #fff; font-size: 0; color: transparent; position: relative;}
.burger__item:before, .burger__item:after {content: ""; background-color: #fff; height: 100%; width: 100%; position: absolute; right: 0; z-index: 1;}
.burger__item:before {top: -8px; width:30px;}
.burger__item:after {top: 8px; width: 26px;}

/* ----- INTRO ----- */
.intro {height: 750px;
background:  #382937 url(../images/intro-bg.jpg) center no-repeat; background-size: cover;
display: flex; flex-direction: column; justify-content: center;}
.intro__inner {max-width: 970px; margin: 0 auto; padding-top: 100px; text-align: center; width: 100%;}
.intro__title {font-family: 'Open Sans', sans-serif; font-size: 65px; font-weight: 700; color: #fff; line-height: 1.1; margin: 0 0 30px; text-transform: uppercase;}
.intro__subtitle {font-size: 22px; color:#fff; line-height: 1.5; margin-bottom: 60px;}

/* ----- FEATURES ----- */
.features__inner {display: flex; flex-wrap: wrap; margin: 95px 0;}
.features__item {text-align:center; padding: 0 40px; margin: 25px 0; width:33.33333%;}
.features__icon {margin-bottom: 20px;}
.features__title {font-size: 14px; color: #3a1437; font-weight: 700; text-transform: uppercase; margin-bottom: 15px;}
.features__text {font-size: 14px; color: #777076; line-height: 1.5;}

/* ----- WORKS ----- */
#works {display: flex; flex-wrap: wrap;}
.works__item {width:25%; position: relative; overflow: hidden; height: 350px; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
.work__photo {min-width: 100%; position: absolute; top: 50%; left: 50%; z-index: 1;
transform: translate3d(-50%, -50%, 0);}
.work__content {position: absolute; top: 0; left: 0; z-index: 2; 
display: flex; flex-direction: column; justify-content: center; 
height: 100%; width: 100%; text-align:center; 
background-color: rgba(229, 50, 80, .95); opacity: 0; transition: opacity .2s linear;}
.works__item:hover .work__content {opacity: 1;}
.work__title {font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; text-transform: uppercase;}
.work__text {font-size: 14px; color: #fff;}

/* ----- TEAM ----- */
#team {margin: 100px 0 70px;}
.team__inner {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.team__item {margin-bottom: 30px; padding:0 15px; width: 25%;}
.team__photo {display: block; height: auto; max-width: 100%; margin-bottom: 20px;}
.team__name {font-size: 22px; color: #3a1437; margin-bottom: 8px;}
.team__prof {font-size: 13px; color:#e53250; margin-bottom: 15px;  text-transform: uppercase;}
.team__text {font-size: 14px; line-height: 1.5; color:#777076; margin-bottom: 20px;}

/* ----- REVIEWS + Slider ----- */
#reviews {background-color: #6B2765; overflow: hidden;}
.reviews__item {display: flex; flex-wrap: wrap;}
.reviews__photo {height: 499px; width: 50%; position: relative;}
.reviews__img {position: absolute; top: 50%; right: 0; z-index: 1; transform: translateY(-50%);}
.reviews__content {display: flex; flex-direction: column; justify-content: center; padding-left: 80px; width: 50%;}
.reviews__text {font-family: 'Bona Nova', serif; font-size: 36px; font-style: italic; line-height: 1.2; color: #fff; margin-bottom: 25px;}
.reviews__author {font-size:13px; font-weight: 700; text-transform: uppercase; color:#fff;}

.reviews__slider {height: 500px; overflow: hidden;}
.reviews__slider.slick-initialized {height: auto;}

.slick-dots {margin: 0; padding: 0; list-style: none; width: 50%; position: absolute; bottom: 0; right: 0; z-index: 2;
display: flex; justify-content: center;}
.slick-dots li {margin: 0 10px; padding-bottom: 50px;}
.slick-dots button {background-color: #fff; border: none; cursor: pointer; padding: 0; font-size: 0; color: transparent; height: 15px; width: 15px; border-radius: 50%; opacity: 0.5;}
.slick-dots button:focus {outline: none;}
.slick-dots .slick-active button {opacity: 1;}

/* ----- DOWNLOAD ----- */
#download {margin: 90px 0; text-align: center;}
.download__title {font-size: 28px; color: #3a1437; font-family: 'Raleway', sans-serif; font-weight: 300; margin-bottom: 10px;}
.download__text {font-size: 13px; color: #3a1437; font-weight: 700; ; text-transform: uppercase; margin-bottom: 40px;}

/* ----- FOOTER ----- */
.footer {background-color: #4B3049; color: #fff;}
.footer__inner {display: flex; flex-wrap: wrap; padding: 70px 0;}
.footer__block {width: 33.33333%; text-align: center; padding: 0 15px;}
.footer__title {font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 10px;}
.footer__text {color: rgba(255, 255, 255, .5); font-style: normal; line-height: 1.5;}

.copyright {background-color: #382937;padding: 20px 0;}
.copy__text {color:rgba(255, 255, 255, .5); font-size: 14px; line-height: 1.5; text-align: center;}
.copy__text a {color:#fff; text-decoration: none;}
.copy__text a:hover {text-decoration: underline;}
.copy__text .heart {font-size: 12px; color:#e53250;}

/* =============== MEDIA =============== */

@media (max-width: 991px) {
.nav {display: none; background-color: #4B3049; border-bottom: 1px solid #7d677b; padding: 5px 0;
    position: absolute; top: 100%; right: 0; flex-direction: column; text-align: right; width: 100%;}
    .nav.show {display: flex;}
.nav__link {margin-left: 0; padding: 9px 15px;}
.burger {display: block;}
.intro__title {font-size: 40px;}
.features__item {width: 50%;}
.works__item {width: 50%;}
.team__item {width: 50%; text-align: center;}
.team__photo {margin-left: auto; margin-right: auto;}
.social {justify-content: center;}
.reviews__photo {overflow: hidden; width: 100%;}
.reviews__img {min-width:100%;}
.reviews__content {padding: 30px 15px 60px; text-align: center; width: 100%;}
.slick-dots {right:25%;}
.slick-dots li {padding-bottom: 30px;}
}

@media (max-width: 767px) {
.intro {height: auto; padding-top: 130px; padding-bottom: 30px;}
.intro__title {font-size: 30px;}
.intro__subtitle {margin-bottom: 30px; font-size: 16px;}
.features__inner {margin: 40px 0;}
.features__item {width:100%;}
.works__item {height: 300px; width: 100%;}
#team {margin: 60px 0 30px;}
.team__item {width: 100%;}
.reviews__text {font-size: 28px;}
#download {margin: 50px 0;}
.download__title {font-size:24px;}
.footer__inner {padding: 50px 0;}
.footer__block {margin-bottom: 30px; padding-left: 0; padding-right: 0; width:100%;}
.footer__block:last-child {margin-bottom: 0;}
}
@media (max-width: 479px) {
.features__item {padding: 0;}
.reviews__img {right: -130px;}
}