/** fonts **/
@import url(https://db.onlinewebfonts.com/c/7e5d4b5e37c0623759cbed868eb8c2ba?family=MAZIUS+REVIEW+20.09+Regular);
@import url(https://db.onlinewebfonts.com/c/10bae0c1ca71c8bca604cf63b7731533?family=Univers+67+Condensed+Bold);
@import url(https://db.onlinewebfonts.com/c/4b3f5b2997aa76eddbb23732ee341231?family=MAZIUS+REVIEW+20.09+Italic);
@import url('https://fonts.cdnfonts.com/css/be-vietnam-pro');

*{
    margin: 0;
}

@font-face {
    font-family: "MAZIUS REVIEW 20.09 Italic";
    src: url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.eot");
    src: url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/4b3f5b2997aa76eddbb23732ee341231.svg#MAZIUS REVIEW 20.09 Italic")format("svg");
}


@font-face {
    font-family: "MAZIUS REVIEW 20.09 Regular";
    src: url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.eot");
    src: url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/7e5d4b5e37c0623759cbed868eb8c2ba.svg#MAZIUS REVIEW 20.09 Regular")format("svg");
}
@font-face {
    font-family: "Univers 67 Condensed Bold";
    src: url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.eot");
    src: url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/10bae0c1ca71c8bca604cf63b7731533.svg#Univers 67 Condensed Bold")format("svg");
}

/* font-family: 'Be Vietnam Pro', sans-serif;
*/

:root{
    --blue: #1E39FF;
    --maz: "MAZIUS REVIEW 20.09 Regular";
    --uni: "Univers 67 Condensed Bold";
    --helv: 'Be Vietnam Pro', sans-serif;
    --mazitalic: "MAZIUS REVIEW 20.09 Italic";
    --solid: solid 2px #0358f6;
    --blue:#0358f6;
    --red:#ff0000;
}  

body::-webkit-scrollbar{
    display: none;
}

/*
.entrance{
    width: 100%;
    height: 100vh;
    background-color: var(--blue);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: putNone ease forwards 1 1s;
    animation-delay: 1s;

}

.logoEnter{
    width: 300px;
    height: 200px;
    background-image: url(img/caballo_logo.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    animation: logo ease forwards 1 1s;
}


@keyframes logo {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes putNone {
    0%{
        display: flex;
    }

    100%{
        display: none;
    }
}


.enterMessage{
    color: white;
    font-family: var(--uni);
    font-size: 30px;
    text-align: center;
    width: 300px;
}

/* landing == */
.landing{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: white;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

/*
@keyframes aparecerMain {
    0%{
        display: none;
    }

    100%{
        opacity: 1;
        display: flex;
    }
}
*/


.nav{
    z-index: 111;
    background-color: white;
    border:var(--solid);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    transition: all 400ms ease;
    width: 40%;
    height: 100px;
}

.activeNav{
    width: 40%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 400ms ease;
}

.restedNav{
    width: 100%;
    height: 100px;
    position: fixed;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 400ms ease;
    margin-bottom: 100px;
}

.activateNav{
    width: 100%;
    height: 100px;
    position: fixed;
    transform: scaleY(1);
    transform-origin: top;
    transition: all 400ms ease;
}

.logo{
    width: 500px;
    height: 50px;
    background-image: url(img/lumbrelogo_azul.png);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position: center;
}

.redStar{
    width: 40px;
    height: 40px;
    background-image: url(img/red_star\ 1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    animation: redStar ease forwards infinite 2s;
}

@keyframes redStar {
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.4);
    }
}

.redStarOne{
    top:20px;
    left: 20px;;
    animation-delay: 300ms;
}

.redStarTwo{
    bottom:20px;
    right:20px;
}

.leftLanding{
    width: 40%;
    height: 100vh;
    border: var(--solid);
    position: absolute;
    top: 100px;
    left:0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100px;
    align-items: center;
    overflow: hidden;
    z-index: 4;
}

.mainTitle{
    font-family: var(--maz);
    text-align: center;
    width: 500px;
    font-size: 45px;
    color: var(--blue);
}

.red{
    color: var(--red);
}


.rightLanding{
    width: 60%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
    justify-content: flex-end;
    align-items: center;
    border-top: solid 2px var(--blue);
    border-right: solid 2px var(--blue);
    border-bottom: solid 2px var(--blue);
}

.hatPhoto{
    width: 700px;
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    transform: translateY(60px);
    z-index: 1;
}

.hatPhoto::after{
    content: '';
    width: 100%;
    height: 200px;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
}

.buyNow{
    font-family: var(--maz);
    padding: 20px 100px;
    font-size: 20px;
    text-decoration: none;
    color: var(--blue);
    border: var(--solid);
    position: relative;
    transition: all 400ms ease;
    z-index: 3;
    background-color: white;
}


.buyNow::after{
    content:'';
    width: 200px;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top:0;
    background-image: url(img/triangle\ left.png);
    z-index: -1;
    left: -120px;
    right: auto;
    transform: scaleX(0);
    transition: all 400ms ease;
    transform-origin: right;
}


.buyNow:hover::after{
    transform: scaleX(1);
    transition: all 400ms ease;
    transform-origin: right;
    transition-delay: 200ms;
}


.buyNow::before{
    content:'';
    width: 200px;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top:0;
    background-image: url(img/triangle\ right.png);
    z-index: -1;
    right: -200px;
    transform: scaleX(0);
    transition: all 400ms ease;
    transform-origin: left;
}

.buyNow:hover::before{
    transform: scaleX(1);
    transition: all 300ms ease;
    transform-origin: left;
    transition-delay: 200ms;
}

.buyNow:hover{
    transform: scaleY(1.1);
    transition: all 400ms ease;
    color: whitesmoke;
    transform-origin: bottom;
    background-color: var(--blue);
}

.selectType{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top:20px;
    left: 30px;
    z-index: 3;
}

.btnType{
    width: 100px;
    height: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--solid);
    margin: 2px;
    color: var(--blue);
    background-color: white;
    font-size: 13px;
    cursor: pointer;
    z-index: 3;
}

.selectedType{
    font-family: var(--mazitalic);
    color: white;
    background-color: var(--blue);
}

.selectionHat{
    position: absolute;
    top: 40px;
    right: 30px;
    display: flex;
    width: 150px;
    height: 50px;
    background-color: white;
}

.size{
    border:none;
    font-family: var(--maz);
    color: var(--blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white;
    z-index: 3;
}

.selectDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--solid);
    font-family: var(--maz);
    padding: 20px;
    color: var(--blue);
    z-index: 3;
    margin-right: 10px;
    background-color: white;
}

.interrogation{
    position: absolute;
    cursor: pointer;
    top: 20px;
    right:180px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 100px;
    color: white;
    font-family: var(--mazitalic);
    z-index: 111;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--blue);
}



.instructions{
    width:800px;
    height: 500px;
    background-image: url(img/medidas.jpeg);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1212;
    position: absolute;
    top: auto;
    right: 50%;
    transform: translateX(50%);
}



.mockNone{
    display: none;
}

.mockTrue{
    display: block;
}

@media (max-width:850px) {
    .instructions{
        width:500px;
    height: 300px;
    }
}

@media (max-width:550px) {
    .instructions{
        width:300px;
    height: 150px;
    background-size: 90%;
    top: 300px;
    }
}

.colorCont{
    display: flex;
    flex-wrap: wrap;
    width: 80px;
    height: 40px;
    z-index: 11;
    background-color: white;
}

.color{
    margin: 5px;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    box-sizing: border-box;
    cursor: pointer;
}

.selectedColor{
    border: solid 3px red;
}

.colorOne{
    background-color: beige;
}

.colorTwo{
    background-color: rgb(253, 197, 113);
}

.colorThree{
    background-color: rgb(100, 55, 1);
}

.colorFour{
    background-color: black;
}

.colorNone{
    background-color: black;
    opacity: 40%;
    pointer-events: none;
}

.humoOne{
    background-color: green;
}
.humoTwo{
    background-color: gray;
}

@media (max-width:1300px) {
    .mainTitle{
        width: 70%;
        font-size: 40px;
    }
}

@media (max-width:1030px) {

    .nav{
        width: 100%;
        height:10%;
        position: fixed;
    }

    .landing{
        background-color: white;
        position: relative;
        overflow: hidden;
        border: none;
    }

    .leftLanding{
        width: 100%;
        height: 45%;
        bottom: 0;
         padding-top: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        top:auto;
        position: absolute;
        border:var(--solid);
        border-right: var(--solid);    
        box-sizing: border-box;
    }
    
    .mainTitle {
        font-size: 34px;
        width: 80%;
        position: sticky;
        transition: transform 0.5s ease-out;
    }

    .rightLanding{
        width: 100%;
        height:45%;
        box-sizing: border-box;
        position: absolute;
        top:10%;
        padding-bottom: 40px;
        padding-top: 20px;
        border:var(--solid);
        border-left: var(--solid);

    }

    .hatPhoto{
        width: 500px;
        height: 500px;
        background-repeat: no-repeat;
        background-size: 70%;
    }

    .hatPhoto::after{
        width: 0;
        height: 0;
    }
}




@media (max-width:700px) and (max-height:810px) {
   .selectionHat{
    flex-direction: column;
   }

   .selectDiv{
    padding: 10px;
    margin-right: 0;
    margin-bottom:4px;
   }

   .hatPhoto{
    width: 400px;
    height: 400px;
    background-size: 70%;
}

    .buyNow{
        padding:10px 30px;
        font-size:20px;
    }

    .rightLanding{
        padding-bottom: 20px;
    }

    .mainTitle{
        font-size:20px;
    }
}

@media (max-width:530px) {
    .landing{
        height: 200vh;
        padding: 0;
        z-index: 11;
        background-color: white;
    }

    .rightLanding{
        background-color: white;
        top: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 11;
        border-top: none;
    }

    .leftLanding{
        top: 100vh;
        height: 100vh;
        border-top: none;
        background-color: white;
    }

    .selectionHat{
        right: 10px;
        top:40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 50px;
    }

    .colorCont{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 100px;
        justify-content: flex-end;
        align-items: flex-end;
        width: 30px;
    }


    .size{
        padding: 0;
        width: 30px;
        border: none;
        border-bottom: solid 2px var(--blue);
        height: 20px;
        font-size: 12px;
    }


    .color{
        width: 15px;
        height: 15px;
    }
 
    .selectType{
        width: 240px;
        flex-direction: row;
        flex-wrap: wrap;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        z-index: 222;
        align-items: center;
    }

    .hatPhoto{
        height: 500px;
        width: 120;
        background-size: 100%;
        background-position: top;
        z-index: 1;
        bottom: 10px;
        z-index: 1;
    }

    .hatPhoto::after{
        width: 100%;
        height: 150px;
    }

    .selectType{
        top: 50px;
    }

    .btnType{
        width: 60px;
        height: 30px;
        z-index: 4;
        font-size: 12px;
    }

    .rightLanding{
        padding-bottom: 20px;
    }

    .buyNow{
        padding:10px 30px;
        font-size:30px;
    }

    .mainTitle{
        font-size: 25px;
    }

    .interrogation{
        right:20px;
        width: 30px;
        height: 30px;
        top: 60px;
    }
 }

 @media (max-width:420px) {
    
    .hatPhoto{
        height: 500px;
        width: 100%;
        background-size: 111%;
        background-position: top;
        z-index: 1;
        bottom: 10px;
        z-index: 1;
        transform: translateY(119px);
    }

    .hatPhoto::after{
        width: 100%;
        height: 200px;
    }
    .colorCont{
        background-color: transparent;
    }
 }

.main{
    width:100%;
    position: relative;
    height: 1000px;
}

/* == initiation == */
.one{
    width:100%;
    height:1600px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content:center;
    align-items: center;
    z-index: 11;
    padding-top: 100px;
}

.photoOne{
    width: 70%;
    height: 600px;
    position: absolute;
    top: 0;
    left:0;
    background-image: url(img/amigas.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    filter: saturate(0);
    border: solid 2px var(--blue);
}

.whiteAnimOne{
    width: 100%;
    height: 100%;
    background-color:var(--blue);
    top: 0;
    left: 0;
    transform:scaleY(1);
    transform-origin: top;
    transition: all 400ms ease;
    filter: saturate(1);
}


.rightChange{
    width: 30%;
    height: 1000px;
    right: 0;
    top: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    padding: 50px 20px;
    align-items: flex-start;
    position: absolute;
    border: solid 2px var(--blue);
}

.lightTitle{
    color: var(--blue);
    font-family: var(--maz);
    font-size: 30px;
}

.lightP{
    font-family: var(--helv);
    font-weight: lighter;
    margin-bottom: 20px;
    margin-top: 15px;
    opacity: 0;
    transform:translateY(40px);
    transition: all 400ms ease;
    text-align:justify;
}

.lightPicture{
    width:100%;
    height: 400px;
    background-image: url(img/catalogo/side.png);
    background-size:contain;
    border: solid 2px black;
    background-repeat: no-repeat;
    margin-bottom: 10px;
    overflow: hidden;
    background-position:right;
}



.footPic{
    font-family: var(--maz);
    text-align: right;
    width: 100%;
}

.fontBlue{
    color: var(--blue);
}

.footLight{
    width: 100%;
    text-align: center;
}

/* == manifesto == */

.manifesto{
    width: 40%;
    height: 1000px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    box-sizing: border-box;
    padding: 50px 20px;
    overflow: hidden;
    background-color: white;
    top: 600px;
    left: 0;
    border: solid 2px var(--blue);
}

.manifestoTitle{
    color: var(--blue);
    font-family: var(--maz);
    font-size: 30px;
    width: 90%;
    text-align:left;
}

.mafP{
    font-family: var(--helv);
    font-weight: lighter;
    margin-bottom: 20px;
    margin-top: 15px;
    width: 90%;
    opacity: 0;
    transform:translateY(40px);
    transition: all 400ms ease;
    text-align: justify;
}

.mafPic{
    width: 90%;
    height: 500px;
    background-image: url(img/OficinaSoledad-77.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    filter: saturate(0);
}

.footMafP{
    font-family: var(--maz);
    text-align: right;
    margin-top: 10px;
    width: 90%;
}

.bocetos{
    width: 30%;
    height: 400px;
    box-sizing: border-box;
    background-image: url(img/bocetoFinal.jpeg);
    background-repeat: no-repeat;
    background-size: 90%;
    position: absolute;
    background-position: center;
    top: 600px;
    left: 40%;
    overflow: hidden;
    border-top: solid 2px var(--blue);
    border-bottom: solid 2px var(--blue);
}

.lastOnePic{
    box-sizing: border-box;
    background-image: url(img/OficinaSoledad-15.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    background-position: center;
    top: 1000px;
    left: 40%;
    width: 60%;
    height: 600px;
    overflow: hidden;
    border: solid 2px var(--blue);
    filter: saturate(0);
}

@media (max-width:980px) {
    .bocetos{
        background-size: contain;
    }

    .mafP{
        font-size: 14px;
    }

    .lightP{
        font-size: 14px;
    }

    .footLight{
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
    }

    .footPic{
        font-size: 16px;
    }

    .footMafP{
        font-size: 14px;
    }
}


@media (max-width:720px) {
    .one{
        height: 1800px;
    }

    .photoOne{
        width: 50%;
        height: 800px;
    }
    .rightChange{
        width: 50%;
        height: 800px;
    }
    .manifesto{
        width: 50%;
        top: 800px;
        height: 1000px;
    }
    .bocetos{
        top: 800px;
        height: 500px;
        width: 50%;
        right: 0;
        left: auto;
    }

    .lastOnePic{
        top: 1300px;
        width: 50%;
        right: 0;
        left: auto;
    }

    .mafP{
        font-size: 14px;
    }

    .lightP{
        font-size: 14px;
    }

    .footLight{
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
    }

    .footPic{
        font-size: 16px;
    }

    .footMafP{
        font-size: 14px;
    }
}


@media (max-width:600px) {
    .one{
        height: 3300px;
    }

    .photoOne{
        width: 100%;
        height: 500px;
    }
    .rightChange{
        width: 100%;
        height: 1000px;
        top: 500px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 30px 60px;
    }
    .manifesto{
        width: 100%;
        top: 1400px;
        height: 800px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .bocetos{
        top: 2200px;
        height: 500px;
        width: 100%;
        right: 0;
        left: auto;
    }

    .lastOnePic{
        top: 2700px;
        height: 600px;
        width: 100%;
        right: 0;
        left: auto;
    }

    .mafP{
        font-size: 14px;
    }

    .lightP{
        font-size: 14px;
    }

    .footLight{
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
    }

    .footPic{
        font-size: 16px;
    }

    .footMafP{
        font-size: 14px;
    }
}


/* == slider == */

.slider{
    width: 100%;
    position: relative;
    height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    background-color:#004ef6 ;
    display: flex;
    border: solid 2px white;
}

.list{
    display: flex;
    width: 100%;
}

.item{
    width: 200px;
    height: 50px;
    background-image: url(img/lumbrelogo_blanco.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
}

@keyframes autoRun {
    from{
        left: 100%;
    }

    to{
        left: -200px;
    }
}

@media (max-width:1300px) {
    .item{
        width: 100px;
    }
    
    @keyframes autoRun {
        from{
            left: 100%;
        }
    
        to{
            left: -100px;
        }
    }
    
}

@media (max-width:700px) {
    .item{
        width: 300px;
        background-size: 24%;
    }
    
    @keyframes autoRun {
        from{
            left: 100%;
        }
    
        to{
            left: -300px;
        }
    }
    
}




/* == last pic == */
.lastPic{
    width: 100%;
    position: relative;
    height: 1000px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url(img/mujer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
}


.whiteAnimTwo{
    width: 100%;
    height: 100%;
    background-color:var(--blue);
    top: 0;
    left: 0;
    transform:scaleY(1);
    transform-origin: top;
    transition: all 400ms ease;
    filter: saturate(1);
}

footer{
    width:100%;
    height: 100px;
    background-color: var(--blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footp{
    text-align: center;
    font-family: var(--helv);
    font-size: 15px;
    color: white;
}
/* == form == */
.contact{
    width: 100%;
    height: 600px;
    background-color: red;
    display:flex;
    overflow: hidden;
}

form{
    width: 70%;
    height: 600px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.contactPicture{
    width: 30%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(img/fotochava.JPG);
}

.contactTitle{
    font-family: var(--maz);
    font-size: 40px;
    width: 600px;
    text-align: center;
}


input{
    width: 400px;
    height: 50px;
    padding: 10px;
    margin: 10px;
    border: solid 2px var(--blue);
}

input::placeholder{
    font-family: var(--helv);
}

.submit{
    font-family: var(--mazitalic);
    font-size: 17px;
    padding: 14px 30px;
    background-color: var(--red);
    color: white;
    transition: all 400ms ease;
}

.submit:hover{
    transition: all 400ms ease;
    padding: 14px 50px;
    cursor: pointer;
}

.message{
    width: 400px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: solid 2px var(--blue);
}

@media (max-width:1000px) {
    .form{
        width: 50%;
    }

    .contactPicture{
        width: 50%;
    }

    .contactTitle{
        width: 50%;
    }

    input{
        width: 50%;
    }

    .message{
        width: 50%;
    }
}


@media (max-width:600px) {
    .contact{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 1000px;
    }
    .form{
        width: 100%;
    }

    .contactPicture{
        width: 100%;
    }

    .contactTitle{
        width: 50%;
        font-size: 30px;
    }

    input{
        width: 50%;
        height: 30px;
    }

    .message{
        width: 50%;
        height: 60px;
    }
}

.footLink{
    color: white;
    text-decoration: none;
    margin-right: 10px;
    opacity: 50%;
}

.footLink:hover{
    opacity: 100%;
    transition: all 400ms ease;
}