@import url('https://fonts.cdnfonts.com/css/manly-signature');

@font-face {
    font-family: 'migraextrabold';
    src: url('../fonts/migra-extrabold-webfont.woff2') format('woff2'),
        url('../fonts/migra-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'migraextralight';
    src: url('../fonts/migra-extralight-webfont.woff2') format('woff2'),
        url('../fonts/migra-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}









html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

:root {
    font-size: 62.5%;
}


/*DEBUG*/
/* div {
    border: 1px solid #c34343;
} */
/*DEBUG*/


body {
    color: #383545;
    ;
    font-size: 1.6rem;
    font-family: 'Montserrat';
    background-color: #f0eeee;

}

.margin5 {
    margin: 5rem;
}



.separator {
    height: 1px;
    background-color: #383545;
    width: 60%;
    margin: 5rem auto;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background-color: #f0eeee;
    z-index: 2;
}

.logo {
    width: 17.5rem;
}

nav {
    width: 40%;
}

nav ul {
    padding: 0;
    width: 100%;
    display: flex;

}

nav li {
    font-size: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    list-style: none;
    width: 33.33%;
}


nav li a {
    font-family: 'Montserrat';
    text-decoration: none;
    color: #383545;
    transition: font-family .2s;
    opacity: 60%;
}

nav li a:hover {
    opacity: 100%;
}


/* Section Hero */

.hero {
    width: 60%;
    margin: 0 auto;
    margin-top: 8rem;
    margin-bottom: 20rem;
    color: #383545;
}

.hero h2 {
    font-family: 'Montserrat';
    font-size: 9.6rem;
    margin: 0;
    padding: 0;
    margin-bottom: 4rem;
    color: #383545;
}

.hero p {
    font-size: 4rem;
    margin: 0;
    padding: 0;
    font-weight: light;

}

.custom-h1 {
    text-align: right;
    font-family: 'Manly Signature';
    font-size: 80px;
    margin: unset;
    font-weight: unset;
}

/* Section projects */

.projects {
    display: flex;
    width: 100%;
    /* margin: 0 12px; */
    /*Deactivated - adds extra margin*/
}

.projects-aside {
    width: 20%;
    padding-top: 20rem;
    padding-bottom: 20rem;
}

.projects-aside h2 {
    font-size: 7.8rem;
    transform: rotate(-90deg);
    font-family: 'Montserrat';

}

.projects-main {
    width: 80%;
    padding-top: 5rem;
    padding-bottom: 5rem;

}


.projects-illustrations {
    margin: 4rem;
}



.projects-illustrations .number1 {
    font-family: 'Montserrat';
    background-color: rgb(222 222 222);
    ;
    font-size: 5rem;
    font-weight: bold;
    padding: 4rem;

}

.projects-illustrations .number1:hover {
    background-color: #97969e;

}

.projects-illustrations .title1 {
    margin-left: -4rem;
    font-size: 5rem;
}

.projects-visual .number2 {
    font-family: 'Montserrat';
    background-color: rgb(222 222 222);
    font-weight: bold;
    padding: 4rem;
    font-size: 5rem;



}


.projects-visual .number2:hover {
    background-color: #97969e;


}


.projects-visual .title2 {
    margin-left: -4rem;
    font-size: 5rem;
}

.projects-visual {
    margin: 8rem 0 8rem 17rem;
}

.projects-ux .number3 {
    font-family: 'Montserrat';
    background-color: rgb(222 222 222);
    font-weight: bold;
    padding: 4rem;
    font-size: 5rem;

}

.projects-ux .number3:hover {
    background-color: #97969e;
}

.projects-ux .title3 {
    margin-left: -4rem;
    font-size: 5rem;
}

.projects-ux {
    margin: 4rem;
}

.projects-print .number4 {
    font-family: 'Montserrat';
    background-color: rgb(222 222 222);
    font-weight: bold;
    padding: 4rem;
    font-size: 5rem;

}

.projects-print .number4:hover {
    background-color: #97969e;

}

.projects-print .title4 {
    margin-left: -4rem;
    font-size: 5rem;
}

.projects-print {
    margin: 8rem 0 8rem 17rem;
}

.projects-aboutme .number5 {
    font-family: 'Montserrat';
    background-color: rgb(222 222 222);
    font-weight: bold;
    padding: 4rem;
    font-size: 5rem;

}

.projects-aboutme .number5:hover {
    background-color: #97969e;

}

.projects-aboutme .title5 {
    margin-left: -4rem;
    font-size: 5rem;
}

.projects-aboutme {
    margin: 4rem;
}

/* Second page */

.second-page {
    display: flex;
    width: 100%;
    flex-direction: column;
    font-family: 'Montserrat 600', sans-serif;

}



.firstt {
    font-size: 3.6rem;
}

.second-title {
    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;


}

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

.portait {
    width: 777px;
    height: 461px;
    margin: 0px;
    padding: 0px;


}

.portait-page {
    display: flex;
    flex-direction: row;

}

.portait-text {
    font-size: 3rem;

    padding: 8px 0px;
    margin: 0px;
    font-family: 'Montserrat';

}

.clickedmenu {
    text-decoration: none;
    color: #383545;

}

.third-title {
    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;

}

.poster-image {
    height: 535px;
}

.mockup-poster {
    height: 535px;
}

.poster-page {
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
}

.poster-title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.poster-description {
    font-size: 3.2rem;
    margin: 30px;
    font-family: 'Montserrat 600', sans-serif;
}

.fourth-title {

    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;
}


.book-image {
    width: 434px;
    height: 428px;
}

.book-title {
    display: flex;
    flex-direction: column;
    text-align: center;
}


.book-description {
    font-size: 3.2rem;
    margin: 30px;
    font-family: 'Montserrat 600', sans-serif;
    margin: 0px 10px;
}

.book-page {
    display: flex;
    flex-direction: row;
}

.label-title {
    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;

}

.etiquette {
    width: 488px;
    height: 745px;
    margin: 20px;
}

.label {
    width: 562px;
    height: 376px;
    margin: 20px;
}

.clothing-label {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.clothing-img {
    display: flex;
    flex-direction: row;

}

.clothing-description {
    display: flex;
    font-size: 3.2rem;
    margin: 30px;
    font-family: 'Montserrat', sans-serif;
}


.clothing-label-right-column {
    display: flex;
    flex-direction: column;
    width: min-content;
}

.bc {
    width: 100%;
    height: 1084px;
}

.bussinescard-title {
    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;

}

.bussines-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.bc-description {
    font-size: 3.2rem;
    margin: 30px;
    font-family: 'Montserrat', sans-serif;

}

.uiux-title {
    text-align: center;
    font-size: 5.5rem;
    font-family: 'Montserrat 600', sans-serif;

}

.title-uiux {
    /*text-align: center;*/
}

.login {
    width: 380px;
    height: 694.58px;
}

.product {
    width: 425px;
    height: 714px;
}

.menu {
    width: 464.46px;
    height: 722px;
    margin-top: 133px;
}

.ui {

    display: flex;
    flex-direction: row;

}

.clothingapp-description {
    font-size: 3.2rem;
    margin: 30px;
    font-family: 'Montserrat', sans-serif;


}

.bank-app {
    font-size: 5.5rem;
    font-family: 'Montserrat', sans-serif;

}

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

.bank-appimage {
    width: 953px;
    height: 673px;
}

.bankapp-description {
    font-size: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: light;
    margin: 10px;

}

.box-bank {
    display: flex;
    flex-direction: row;
}

.dr-app {
    font-size: 5.5rem;
    font-family: 'Montserrat', sans-serif;
    text-align: center;


}

.dr-image {
    /*width: 801px;*/
    height: 1406px;
    float: left;
}


.dr-app-right-column {
    display: flex;
    flex-direction: column;
    width: min-content;
    margin: auto;
}

.doctorapp-description {

    font-size: 3.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: light;

    margin: 10px;

}

.flyer-title {
    font-size: 5.5rem;
    font-family: 'Montserrat ', sans-serif;

    text-align: center;

}

.flyer {
    /*text-align: center;*/
}

.img-flyer {
    width: 100%;
    height: 1001px;

}

.img-flyerverso {
    width: 100%;
    height: 1001px;

}

.flyer-desc {
    font-size: 3.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: light;

    padding: 20px;
}

.mercedes-title {
    font-size: 5.5rem;
    font-family: 'Montserrat', sans-serif;


}

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

.img-mercedes {
    /*width: 702px;*/
    /*height: 495px;*/
    width: 46.5vw;
}

.mockup-mercedes {
    /*width: 702px;*/
    /*height: 495px;*/
    width: 46.5vw;
    /*height: 85vh;*/
}

.first-row {
    display: flex;
    flex-direction: row;

}

.second-row {
    display: flex;
    flex-direction: row;

}

.column {
    display: flex;
    flex-direction: column;
}

.img-desc {
    font-size: 3.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: light;

    /*margin: 40px;*/
    padding: 0 20px;
    width: 50vw;

}





.aboutme-sec {
    display: flex;
    flex-direction: row;
    font-weight: light;
    padding: 0 20px;
    font-size: 3.2rem;
}

.effect {
    --custom_size: 0em;
    /* the thickness of the line */
    --custom_color: #c98262;
    /* the color */

    color: black;
    padding-bottom: var(--custom_size);
    background:
        linear-gradient(90deg, var(--custom_color) 50%, black 0%) calc(100% - var(--custom_percentage, 0%))/200% 100%,
        linear-gradient(var(--custom_color) 0 0) 0% 100%/var(--custom_percentage, 0%) var(--custom_size) no-repeat;
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    transition: 0.5s;
}

.effect:hover {
    --custom_percentage: 100%
}

.effect {
    font-family: system-ui, sans-serif;
    font-size: 5rem;
    cursor: pointer;
}


.legend {
    font-size: 1.5rem;
    font-style: italic;
    color: #676565;
    border-top: 20px solid 383545;
    padding-top: 10px;
}





/* Footer */
footer p {
    font-size: 2.4rem;
    /* text-align: center; */
    color: white;
    /* margin: 0px;
    padding: 0px; */
}

.footer-block {
    width: 100%;
    display: flex;
    background-color: #383545;
    justify-content: space-around;
}

.footer-title {
    color: #383545;
    font-size: 3.2rem;
    padding-left: 30px;
    padding-top: 20px;
    font-family: 'Montserrat';
    letter-spacing: .5rem;
    margin: 5px;

}

.footer-text {
    color: #f0eeee;
    /* width: 35%; */
    font-size: 1.2rem;

}

.footer-des {
    /* padding-top: 20px;
    padding-left: 30px; */
    line-height: 25px;
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
}



.network-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 35%;
    padding-top: 10px;
}

.network-icon:hover {

    color: #97969e;
    ;
}

.network-icon {
    color: #f0eeee;
    font-size: 30px;

}

.network-cv {
    color: #f0eeee;
    font-size: 34px;
}


.connect {
    font-size: 3.9rem;
    color: #383545;
    margin-bottom: 20px;
}

.el-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.form {
    align-self: center;
    font-family: 'Montserrat sans-serif';
}

.message {
    margin-top: 10px;
    font-family: 'Montserrat sans-serif';
}

.send {
    color: #f0eeee;
    font-size: 1.3rem;
    /* margin-top: 10PX;
    padding-left: 20px;
    padding-top: 10px; */



}


.sendform {
    text-align: center;
    display: flex;
    flex-direction: row;
    font-family: 'Montserrat sans-serif';


}

.send-button {

    width: 150px;
    height: 35Px;
    color: #f0eeee;
    background-color: #b2b2b2;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: none;
    margin-top: 18px;



}



.leaveamessage {
    text-decoration: none;
    color: #383545;
    font-size: 2.3rem;
    background-color: #f0eeee;
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
}

.wave {
    animation-name: wave-animation;

    animation-duration: 2.5s;

    animation-iteration-count: infinite;

    transform-origin: 70% 70%;

    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }

    10% {
        transform: rotate(14.0deg)
    }

    20% {
        transform: rotate(-8.0deg)
    }

    30% {
        transform: rotate(14.0deg)
    }

    40% {
        transform: rotate(-4.0deg)
    }

    50% {
        transform: rotate(10.0deg)
    }


}









/*START */
.gallery {
    display: flex;
    padding: 2px;
    transition: 0.3s;

}

.gallery:hover .gallery__image {
    filter: grayscale(1);
}

.gallery__column {
    display: flex;
    flex-direction: column;

}

.gallery__link {
    margin: 2px;
    overflow: hidden;
    width: 25%;
    filter: grayscale(1);
}

.link_1 {
    margin: 2px;
    overflow: hidden;
    width: 25%;
}





.gallery__link:hover .gallery__image {
    filter: grayscale(0);
}


.link_1:hover .gallery__image {
    filter: grayscale(0);
}



.gallery__link:hover .gallery__caption {
    opacity: 1;
}



.gallery__thumb {
    position: relative;
}

.gallery__image {
    display: block;
    width: 100%;
    height: 210px;
    transition: 0.3s;
}

.gallery__image:hover {
    transform: scale(1.1);
}

.gallery__caption {
    position: absolute;

    left: 0;
    padding: 25px 15px 15px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #f0eeee;
    opacity: 0;
    background: linear-gradient(0deg, #383545 0%, #383545 100%);
    transition: 0.3s;
}

.custombottom1 {
    bottom: 0px;
}

.custombottom2 {
    bottom: 0px;
}



.rowrow {
    display: flex;
    flex-direction: row;
    height: 220px;
}

.imgtwo {
    display: flex;
    width: 500px;
    height: 400px;
}

.main-image {
    width: 70%;
}

#main-image {
    max-width: 100%;
}

.graphicalchart {

    color: #383545;
    font-size: 2rem;
    font-style: italic;
    padding-top: 20px;
}





.imageA {
    width: 350px;
    height: auto;
    padding-top: 18px;

}



.imageB {
    display: none;
    padding-top: 18px;


}


.imageC {
    display: none;
    padding-top: 18px;
}


.imageD {
    /* width: 150px; */
    width: 350px;
    height: auto;
    padding-top: 5px;
    margin-left: 5rem;
}


.imageE {
    display: none;
}

.imageF {
    display: none;
}


.imageG {
    width: 510px;
    height: auto;
    position: relative;
    top: 20px;

}



.imageH {
    display: none;
}

.imageI {
    display: none;
}


.imageJ {
    width: 510px;
    height: auto;


}


.imageK {
    display: none;

}

.imageL {
    display: none;
}





.image1p {
    margin: -15px 0px 0px 20px;
    font-size: 2.4rem;
    font-family: 'Montserrat';
}


.image2p {
    margin: -15px 0px 0px 20px;
    font-size: 2.4rem;
    font-family: 'Montserrat';


}

.image3p {

    margin: -15px 0px 0px 20px;
    font-size: 2.4rem;

    font-family: 'Montserrat';
}



.image5p {
    margin: 9px 21px 20px 20px;
    font-size: 2.4rem;

}

.image6p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;

}

.image6p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;

}

.image7p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;

}


.image8p {

    margin: 9px 21px 0px;
    font-size: 2.4rem;



}

.image9p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;



}

.image10p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;

}

.image11p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;

}

.image12p {
    margin: 9px 21px 0px;
    font-size: 2.4rem;



}


.img_story_a {
    display: flex;
    flex-direction: row;
}

.img_story_b {
    display: none;
}

.img_story_c {
    display: none;
}


.img_story_d {
    display: flex;
    flex-direction: row;
}

.img_story_e {
    display: none;
}

.img_story_f {
    display: none;
}

.img_story_g {
    display: flex;
    flex-direction: row;
}

.img_story_h {
    display: none;
}

.img_story_i {
    display: none;
}

.img_story_j {
    display: flex;
    flex-direction: row;
}

.img_story_k {
    display: none;
}

.img_story_l {
    display: none;
}



/*STOP*/


.legend1 {
    font-size: 1.8rem;
    font-style: italic;
    color: #535252;
    border-top: 9px solid #383545;
    width: 180px;
    margin-top: 20px;
    margin-left: 20px;


}



.columnbox1 {
    display: flex;
    flex-direction: column;
}

.titletext {
    font-size: 3rem;
    padding-left: 20px;

}

.titletext2 {

    font-size: 3rem;
    padding-left: 20px;
}



.columnbox2 {
    display: flex;
    flex-direction: column;
}

.columnbox3 {
    display: flex;
    flex-direction: column;
}


/* 
.footer-block {
    display: flex;
    flex-direction: row;
} */

.footercolumn {
    display: flex;
    flex-direction: column;
    width: 60%;
}





/* .imageD {
    width: 350px;
    height: auto;
    padding-top: 18px;

} */



.firstn {
    margin-left: 5rem;
    font-family: 'Montserrat';
    font-size: 3.6rem;
    font-weight: bold;
}


.image4p {
    margin: -15px 0px 0px 20px;
    font-size: 2.4rem;
    font-weight: lighter;
}



.copy {
    text-align: center;
    background-color: #383545;

}

.copyright {
    margin: 0px;
    padding: 0px;
    padding-top: 40px;
    font-family: 'Montserrat';
    font-size: 1.4rem;
    color: #f0eeee;
}


.me {
    width: 458px;
    height: auto;
    margin-top: 20px;
}



.aboutme {
    padding: 10rem;
    font-size: 3.2rem;
    font-family: 'Montserrat', sans-serif;

}





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

    .hero p {
        font-size: 2rem;
    }

    .graphicalchart {
        font-size: 1.2rem;
    }

    .image2p {
        font-size: 1.2rem;
    }

    .image3p {
        font-size: 1.2rem;
    }

    .image7p {
        font-size: 1.2rem;
    }

    .image8p {
        font-size: 1.2rem;
    }

    .menu {
        font-size: 1.1rem;
    }

    .firstt {
        font-size: 2rem;
    }



    .footer-des {
        font-size: 1.2rem;

    }


    .image4p {
        font-size: 1.2rem;
    }

    .firstn {

        font-size: 2rem;
    }


    .legend1 {
        font-size: 1rem;
    }

    .legend2 {
        font-size: 1rem;
    }

    .legend3 {
        font-size: 1rem;
    }

    .hero h2 {
        font-size: 3.5rem;
    }

    .hero {
        width: 70%;
    }

    .nav li {
        font-size: 1.5rem;
    }

    .projects-main {
        width: 70%;
    }

    .projects-aside h2 {
        font-size: 5rem;
    }

    .projects-illustrations .number1 {
        font-size: 1.7rem;
        padding: 2rem;
        margin-right: 1.5rem;
    }

    .projects-illustrations .title1 {
        font-size: 1.7rem;
    }

    .projects-visual .number2 {
        font-size: 1.7rem;
        padding: 2rem;
        margin-right: 1.5rem;

    }

    .projects-visual .title2 {
        font-size: 1.7rem;
        margin-left: -4rem;

    }

    .projects-visual {
        margin: 8rem;

    }


    .projects-ux .number3 {
        font-size: 1.7rem;
        padding: 2rem;
        margin-right: 1.5rem;

    }

    .projects-ux .title3 {
        font-size: 1.7rem;
    }

    .projects-print .number4 {
        font-size: 1.7rem;
        padding: 2rem;
        margin-right: 1.5rem;
    }

    .projects-print .title4 {
        font-size: 1.7rem;

    }

    .projects-print {
        margin: 8rem;
    }

    .projects-aboutme .number5 {
        font-size: 1.7rem;
        padding: 2rem;
        margin-right: 1.5rem;

    }

    .projects-aboutme .title5 {
        font-size: 1.7rem;

    }

    .imageA {
        width: 220px;
        height: auto;
        padding-top: 5px;
        margin-left: -4px;
    }


    .imageB {
        width: 139px;
        height: auto;
        padding-top: 5px;
        margin-left: -4px;
    }

    .image1p {
        font-size: 1.2rem;
    }

    .imageC {
        width: 350px;
        height: auto;
        padding-top: 2rem;
        margin-left: -4px;

    }

    .imageD {
        width: 250px;
        height: auto;
        padding-top: 2rem;
        margin-left: -4px;

    }

    .imageG {
        width: 350px;
        height: auto;
        padding-top: 2rem;
        margin-left: -4px;

    }

    .imageJ {
        width: 350px;
        height: auto;
        padding-top: 2rem;
        margin-left: -4px;

    }


    .imageK {
        /* display: flex; */
        height: auto;
        margin-left: -4px;
    }


    .me {
        width: 150px;
        height: auto;
        margin-left: 5rem;
    }


    .aboutme {

        font-size: 1rem;
        padding: 0;
        width: 30%;
        margin-left: 4rem;
    }



    .connect {
        font-size: 2.6rem;
    }

}