@font-face {
    font-family: 'Montserrat-Light';
    src: url(/fonts/Montserrat-Light.woff);
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(/fonts/Montserrat-Medium.woff);
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url(/fonts/Montserrat-Bold.woff);
}

:root {
    --red: #C60001;
    --white: #ffffff;
    --header: #666666;
    --text: #999999;
}

::selection {
    background-color: var(--red);
    color: var(--white);
}

html, body {
    overflow-x:hidden;
    height:100%;
  }

body {
    font-family: 'Montserrat-Light', sans-serif;
    margin: 0;
}


.d-flex {
    display: flex;
}

.d-md-flex {
    display: flex;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-100 {
    width: 100%;
}

.w-a-50 {
    width: 50%;
}

.text-lg-right {
    text-align: right;
}

.text-md-right {
    text-align: right;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-lg-center {
    text-align: center;
}

.d-md-block {
    display: none;
}

.d-md-none {
    display: block;
}

.ml-auto {
    margin-left: auto;
}

.mb-27 {
    margin-bottom: 27px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.absolute {
    position: absolute;
}

.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: fit-content;
}




@media only screen and (max-width: 920px) {
  
    .w-20 {
        width: 100%;
    }
    
    .w-30 {
        width: 100%;
    }
    
    .w-40 {
        width: 100%;
    }
    
    .w-60 {
        width: 100%;
    }
    
    .w-80 {
        width: 100%;
    }
    
    .w-md-100 {
        width: calc(100% - 30px);
    }
    .w-a-50 {
        width: 100%;
    }
    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-left {
        text-align: left;
    }

    .mb-md-20 {
        margin-bottom: 20px;
    }

    .d-md-block {
        display: block;
    }
    
    .d-md-none {
        display: none;
    }

    
}

@media only screen and (max-width: 768px) {
    .d-md-flex {
        display: block;
    }

    .text-sm-center {
        text-align: center;
    }

    .d-sm-none {
        display: none;
    }
    
}

img.background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/* navbar */

.navbar {
    background-color: var(--white);
}

.navbar .logo {
    padding: 40px 70px;
    position: relative;
}

.navbar .text-right {
    padding: 50px 100px;
}

.navbar div > a {
    color: var(--red);
    text-transform: uppercase;
    font-size: 13px;
    margin-left: 20px;
    text-decoration: none;
}


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

    .navbar .logo {
        padding: 20px;
    }
    
    .navbar .text-right {
        padding: 30px 20px;
    }
}

/* navbar */

/* section1 */

.section1 {
    padding: 0px 80px;
    height: 475px;
    position: relative;
}

.section1 button.absolute{
    right: 0;
}
.section1 .social button.absolute{
    left: 50px;
}

.section1 > .social{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.section1 .social img{
    margin-top: 25px;
    margin-bottom: 25px;
}

.section1 h1{
    max-width: 45%;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.section1 h1 img{
    width: 100%;
}



@media only screen and (max-width: 768px) {
    .section1 {
        padding: 20px;
        height: 175px;
    }

    .section1 .social img{
        margin-top: 10px;
        margin-bottom: 10px;
        height: 20px;
    }

    .section1 h1{
        max-width: 70%;
    }
}

/* section1 */


/* section2 */

.section2 {
    padding: 100px 25%;
    position: relative;
}

.section2 button.absolute{
    right: 0;
}

.section2 h1 {
    font-family: 'Montserrat-Light', monospace;
    font-size: 51px;
    color: var(--header);
    margin-bottom: 50px;
    font-weight: normal;
}

.section2 .dareToDress {
    font-size: 16px;
    letter-spacing: 10px;
    padding: 10px 20px;
    color: var(--red);
    border: 1px solid var(--red);
    text-transform: uppercase;
    margin-bottom: 50px;
    width: fit-content;
    display: block;
}

.section2 .text {
    font-size: 19px;
    color: var(--text);
}



@media only screen and (max-width: 768px) {
    .section2 {
        padding: 20px 3%;
    }

    .section2 h1 {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .section2 .dareToDress {
       padding: 10px;
       margin-bottom: 25px;
    }
    
    .section2 .text {
        font-size: 14px;
    }

}

/* section2 */

/* section3 */

.section3 {
    margin: 0px 160px;
    height: 475px;
    position: relative;
    display: flex;
}

.section3 button.absolute{
    right: 0;
}

.section3 .left {
    position: relative;
    width: calc(70% - 20px);
    color: var(--white);
}

.section3 .contact {
    padding-left: 10%;
}

.section3 hr {
    width: 207px;
    height: 0px;
    background-color: var(--white);
    margin-left: 0;
    margin-bottom: 35px;
}

.section3 .name {
    font-size: 23px;
    font-family: 'Montserrat-Bold', monospace;
    letter-spacing: 2.8px;
    margin-bottom: 25px;
}

.section3 .phone img,
.section3 .email img{
    margin-right: 10px;
}

.section3 .phone a,
.section3 .email a{
    font-size: 23px;
    font-family: 'Montserrat-Medium', monospace;
    letter-spacing: 2.8px;
    margin-bottom: 5px;
    color: var(--white);
    text-decoration: none;
}

.section3 .whiteLine {
    width: 40px;
}

.section3 .right {
    position: relative;
    width: calc(30% - 20px);
}

.section3 .logo img {
    width: 55%;
}

@media only screen and (max-width: 768px) {
    .section3 {
        display: block;
        margin: 0px 3%;
        height: auto;
    }

    .section3 .left {
        width: 100%;
        height: 300px;
    }

    .section3 .name {
        font-size: 14px;
    }

    .section3 .phone a,
    .section3 .email a{
        font-size: 14px;
}

    .section3 .whiteLine {
        height: 40px;
        width: 100%;
    }

    .section3 .right {
        width: 100%;
        height: 180px;
    }

    .section3 .logo img {
        height: 50px;
    }
}



/* section3 */

/* section4 */

.section4 {
    padding: 120px 25%;
    font-size: 19px;
    color: var(--text);
    text-align: center;
    position: relative;
}

.section4 button.absolute{
    right: 0;
}


@media only screen and (max-width: 768px) {
    .section4 {
        padding: 60px 3%;
        font-size: 14px;
    }
}


/* section4 */


/* section5 */

.section5 {
    margin: 0px 160px 120px 160px;
    position: relative;
}

.section5 button.absolute{
    right: 0;
}

.section5 img {
    width: 100%;
}

.section5 .dareToDressWhite {
    font-size: 23px;
    letter-spacing: 16px;
    padding: 10px 20px;
    color: var(--white);
    border: 2px solid var(--white);
    text-transform: uppercase;
    width: fit-content;
    display: block;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 768px) {
    .section5 {
        margin: 0px 3% 60px 3%;
    }

    .section5 .dareToDressWhite {
        font-size: 14px;
        letter-spacing: 4px;
        bottom: 17px;
    }
}



/* section5 */


/* footer */

.footer {
    background-image: url("./images/footer.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--white);
    font-size: 14px;
    padding: 70px;
    position: relative;
}

.footer p {
    margin-top: 0;
    margin-bottom: 25px;
}

.footer a{
    color: var(--white);
    text-decoration: none;
}

.footer .name{
    font-family: 'Montserrat-Bold', monospace;
    font-size: 21px;
    letter-spacing: 1.26px;
    color: var(--white);
    text-align: center;
    width: 160px;
}

.footer div.phone,
.footer div.email {
    margin-top: 10px;
}

.footer div.phone img,
.footer div.email img {
    margin-right: 10px;
}

.footer a:hover{
    font-weight: 700;
}

.footer .bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 768px) {
    .footer {
        padding: 50px 15px;  
    }

    .footer div.phone, .footer div.email {
        padding: 0px 24%;
    }
}

/* footer */