/* G E N E R A L */

html, body {
   /* scroll-behavior: smooth;*/
   height: 100%;
   overflow:hidden;
}

body {
    margin: 0;
    font-family: inter-variable, Arial, sans-serif;
    background: #323e77;
}

.super-wrap {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    width: 100vw;
}

p {
    font-family: inter-variable, Arial, sans-serif;
    font-weight: 300;
    color: #323e77;
    font-size: 16px;
    text-align: justify;
    margin: 10px 0;
    line-height: 1.4;
}

a {
    text-decoration: none !important;
    color:inherit !important;
}

a:hover {
    color: #a01836 !important;
    font-family: gelica, sans-serif !important;
    font-weight: 400 !important;
}

.red-hover a:hover {
    color: #323e77 !important;
}

a:visited {
    color: inherit;
}

.full-height {
    min-height: 100vh;
    z-index: 1;
    position: relative;
}

.headercontent {
    z-index: 1;
    display:grid;
    grid-template-columns: 15% 1% 9% 8% 33%;
    grid-template-rows: 6% 3% 5% 44% 42%;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    position: fixed;
}

.headercontent img {
    width: 60vw;
    height: auto;
}

.headerimg {
    z-index: 15;
    opacity: 1;
    transition: all 1s;
}

.headerimg:hover {
    opacity:0;
}

.headerimg-clone {
    z-index: 15;
    opacity: 0;
    transition: all 1s;
}

.headerimg-clone:hover {
    z-index: 120;
    opacity:1;
}
.headercontent img:nth-child(1), .headercontent img:nth-child(2) {
    grid-row: 2 / 6;
    grid-column: 5 / 6;
}

.headercontent img:nth-child(3), .headercontent img:nth-child(4) {
    grid-row: 3 / 6;
    grid-column: 4 / 6;
}

.headercontent img:nth-child(5), .headercontent img:nth-child(6) {
    grid-row: 4 / 6;
    grid-column: 3 / 6;
}

.headerh1 {
    grid-row: 5/6;
    grid-column: 1/7;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1 {
    text-align: left;
    font-family: gelica, sans-serif;
    font-style:italic;
    font-weight: 300;
    color: #c3a6cd;
    font-size: 52px;
    line-height: 1;
}

h2 {
    text-align: center;
    font-family: gelica, sans-serif;
    font-weight: 200;
    color: #323e77;
    font-size: 35px;
    line-height: 1;
}

h3 {
    text-align: left;
    font-family: inter-variable, Arial, sans-serif;
    color: inherit;
    font-size: 16px;
    text-transform: uppercase;
    font-weight:300;
}

h4, h5, h6 {
    font-family: inter-variable, Arial, sans-serif;
    font-weight:300;
    font-size: 16px;
    color: #c3a6cd;
}

h5 {
    text-align: center;
}

.mini-menu {
    position: fixed;
    font-weight: 300;
    z-index: 30;
    color: #c3a6cd;
}

.mini-menu a:hover {
    color: inherit !important;
}

.main-menu {
    position: fixed;
    display: grid;
    /*grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 10% 10% 52% 20% 8%;*/
    width: 90vw;
    /*height: 84vh;
    bottom: 0;*/
    z-index: 20;
    color: #c3a6cd;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 10% 10% 42% 15% 8%;
    height: 100vh;
}

#menu-top-left {
    top: 2vh;
    left: 5vw;
}

#menu-top {
    /*top: 5vh;
    left: 5vw;*/
    padding-top: 5vh;
    padding-left: 5vw;
    padding-right: 5vw; 
}

.menu-style {
    font-family: inter-variable, Arial, sans-serif;
    letter-spacing: 2px;
    font-size: 30px;
    text-align: justify;
    line-height: 1.2;
    font-weight: 300;
    color: inherit;
    transition: all 0.5s;
    grid-column: 1/6;
    grid-row: 5/6;
}

.menu-style:nth-child(1) {
    text-align: left;
    grid-column:1/2;
}

.menu-style:nth-child(2) {
    text-align: center;
    grid-column:2/3;
}

.menu-style:nth-child(3) {
    text-align: right;
    grid-column:3/4;
}

.no-background {
    background: transparent !important;
}

.overwrite-padding {
    padding: 0 !important;
}

.section {
    padding: 15% 5% 0;
    display: grid;
    grid-template-columns: 24% 16% 20% 16% 24%;
    grid-template-rows: 10% 36% 47% 7%;
    height: 70vh;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}


/* C O N T A C T */

#contact {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template: 10% 80% 10% / auto auto auto auto auto;
    position:relative;
    /*background: linear-gradient(135deg, #a01836 0%, #323e77 55%);*/
    z-index: 21;
}

.phone {
    background: url("");
    height: 66vh;
    grid-column: 1 / 6;
    grid-row: 2 / 5;
    display: grid;
    grid-template-columns: 20% 30% 30% 20%;
    grid-template-rows: 1% 1% 5% 10% 8% 10% 63%;
}

.contact-menu, #time, #date, #contact h2, #contact h4 {
    grid-column: 1/5;
    text-align:center;
    color:#f2f0ec;
}

#contact h2 {
    grid-row: 4 / 5;
    font-size: 38px;
    font-weight:400;
}

#contact h4 {
    grid-row: 5 / 6;
    font-size: 20px;
}

#contact h5 {
    margin-top: 20vh;
}

#time {
    font-weight: 300;
    font-size: 80px;
    line-height: 1.2;
    grid-row: 2 / 3;
    display:none;
}

#date {
    font-weight: 300;
    font-size: 20px;
    grid-row: 3 / 4;
    display:none;
}

.contact-menu {
    grid-row: 6 / 8;
    display:grid;
    height: 80%;
    grid-template: 25% 25% 25% 25% / 11% 23% 5% 23% 5% 23% 10%;
    z-index:120 !important;
}

.notification {
    font-weight: 200;
    letter-spacing: 1px;
    height: 85%;
    font-size: 14px;
    text-align: center;
    color: #f2f0ec;
    z-index:120 !important;
    display: grid;
    grid-template: 26% 38% 36% / 33% 33% 33%;
    transition: all 0.3s;
}

.notification:nth-child(3), .notification:nth-child(6) {
    grid-column: 6/7;
}

.notification:nth-child(2), .notification:nth-child(5), .notification:last-child {
    grid-column: 4/5;
}

.notification:first-child, .notification:nth-child(4) {
    grid-column: 2/3;
}

.notification:first-child img, .notification:nth-child(5) img {
    padding-top: 25%;
}

.notification:nth-child(2) img, .notification:nth-child(3) img {
    padding-top: 15%;
}

.notification svg {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.notification svg path {
    fill:#c3a6cd;
}

.notification img {
    width: 100%;
    height: auto;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.notification a {
    text-decoration: none;
    font-weight: bold;
    line-height: 1.2;
}

.notification p {
    text-decoration: none;
    text-align:center;
    font-weight: bold;
    font-size: 16px;
    color: #c3a6cd;
    font-weight: 300;
    letter-spacing: 0px;
    text-transform: none;
    line-height: 1.2;
    grid-row: 3 / 4;
    grid-column: 1 / 4;
    opacity:0;
}

.vienna {
    opacity:1 !important;
    padding-top: 10px;
}

.bg1 {
    background: none;
}

#contact:target ~ #work .section {
    pointer-events: none; /* Prevents #work from blocking clicks */
}

#contact:target ~ .headercontent {
    pointer-events: none; /* Prevents #work from blocking clicks */
}

/* A B O U T */

#about {
    background: #c3a6cd !important;
    color: #323e77 !important;
    z-index: 1;
    position:relative;
    transition: all 0.3s;
    height: 100vh;
    width: 100vw;
}

#checkpoint-a {
    height: 1px;
    grid-row: 3 / 6;
    grid-column: 1/6;
}

#about h2 {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
}

#about img {
    width: 100%;
    grid-column: 2 / 5;
    grid-row: 2 / 3;
}

#about p {
    color: #323e77 !important;
    grid-row: 3 / 5;
    grid-column: 1 / 6;
}

/* W O R K */

#work {
    background: #c3a6cd !important;
    color: #a01836 !important;
    z-index: 1;
    position:relative;
    transition: all 0.3s;
    height: 100vh;
    width: 100vw;
}

#checkpoint-b {
    height: 1px;
    grid-row: 3 / 6;
    grid-column: 1/6;
}

#work h2 {
    color: #a01836 !important;
    grid-column: 1 / 6;
    grid-row: 1 / 2;
}

#work p {
    color: #a01836 !important;
    grid-row: 2 / 5;
    grid-column: 1 / 6;
}

#work a {
    font-weight: 500;
}

#work img {
    width: 100%;
    grid-column: 2 / 5;
    grid-row: 2 / 3;
    display: none;
}


/* M E D I A   Q U E R I E S */


/* Mobile Portrait*/

@media (orientation: portrait) and (max-width: 768px) {
    .menu-style {
        font-size: 23px !important;
    }

    .headerh1 h1 {
        font-weight: 100 !important;
        font-size: 35px !important;
        line-height:1.2;
    }

    .adjust-height {
        height: auto;
        width: 100vw;
    }
}

/* Only for Menu & Contact on Mobile */

@media (max-width: 760px) {
    .main-menu.contact-visible {
        background: linear-gradient(135deg, #a01836 0%, #323e77 55%);
    }
}

/* Mobile landscape */

@media (max-width: 812px) and (orientation: landscape) {
    html, body {
        overflow: auto;
    }

    .headercontent img {
        width: 30vw;
    }
}


/* Tablet portrait and bigger*/

@media (min-width: 769px) {
    html, body {
        overflow: hidden;
    }
    
    h3 {
        font-size: 20px;
    }
    
    p {
        font-size: 20px;
    }

    #menu-top-left {
        top: 5vh;
        left: 5vw;
    }

    #menu-top {
        left: 0;
        padding: 0;
        top: 5vh;
    }

    .main-menu {
        width: 100vw !important;
        height:15vh !important;
        grid-template-rows: 25% 25% 25% 5% 5% !important;
    }

    .menu-style {
        grid-column: 3/4;
        text-align: center;
        font-size: 35px;
    }

    .menu-style:nth-child(1) {
        text-align: center;
        grid-column:1/4 !important;
        grid-row:1/2 !important;
    }
    
    .menu-style:nth-child(2) {
        text-align: center;
        grid-column:1/4 !important;
        grid-row: 2/3 !important;
    }
    
    .menu-style:nth-child(3) {
        text-align: center;
        grid-column:1/4 !important;
        grid-row:3/4 !important;
    }

    .headercontent {
        grid-template-columns: 7% 29% 9% 8% 47% !important;
        grid-template-rows: 18% 3% 5% 46% 28% !important;
    }

    .headercontent img {
        width: 42vw !important;
    }

    .section {
        padding: 30% 5% 0;
        grid-template-columns: 20% 23% 5% 20% 32%;
        grid-template-rows: 11% 39% 44% 9%;
    }

    #about h2 {
        grid-column: 4 / 6 !important;
    }

    #about img {
        grid-column: 1 / 3 !important;
        grid-row: 1 / 5 !important;
    }

    #about p {
        grid-row: 2 / 5 !important;
        grid-column: 4 / 6 !important;
    }

    #contact {
        background: transparent !important;
        z-index: 1 !important;
        grid-template: 19% 80% 10% / 5% 45% 40% 5% 5% !important;
    }

    .phone {
        background: url("./Media/phone2.png") no-repeat !important;
        background-position: 50% 0% !important;
        background-size: contain !important;
        height: 80vh !important;
        grid-column: 2 / 3 !important;
        grid-template-rows: 12% 9% 6% 5% 5% 10% 53% !important;
        grid-template-columns: 11% 39% 39% 11% !important;
        position: relative;
        z-index: 5;
    }

    .contact-menu {
        height: 70% !important;
        grid-template: 25% 25% 25% 25% / 10% 37% 6% 37% 10% 0% 0% !important;
    }

    .contact-menu, #time, #date, #contact h2, #contact h4 {
        grid-column: 2 / 4 !important;
    }

    #contact h2 {
        font-size: 32px !important;
    }

    #contact h4 {
        font-size: 18px !important;
    }

    .notification {
        grid-template: 10% 42% 45% / 32% 36% 32%;
        position: relative;
        z-index: 1000;
        pointer-events: all;
    }

    .notification p {
        font-size: 16px !important;
        opacity: 1;
    }

    .notification:first-child, .notification:nth-child(3), .notification:nth-child(5) {
        grid-column:2/3 !important;
    }
    
    .notification:nth-child(2), .notification:nth-child(4), .notification:nth-child(6) {
        grid-column: 4/5 !important;
    }
    
    .notification:first-child img, .notification:nth-child(5) img {
        padding-top: 25% !important;
    }
    
    .notification:nth-child(2) img, .notification:nth-child(3) img {
        padding-top: 15% !important;
    }
    
    .notification:last-child {
        grid-column:2/3 !important;
    }

    #time {
        font-size: 70px !important;
        line-height: 1.2 !important;
    }
    #date {
        font-size: 18px !important;
    }

    #time, #date {
        display: block !important;
    }

    .bg1 {
        background: rgb(195 166 205 / 30%) !important;
        border-radius: 10px;
        background-position: 47% 0%;
        background-size: contain;
    }

    .adjust-height {
        height: 100vh;
        width: auto;
    }
}

/* Desktop and bigger*/

@media (min-width: 1200px) {
    h3 {
        font-size: 18px;
    }

    #menu-top-left {
        top: 5%;
        left: 5%;
    }

    #menu-top {
        top: 5%;
    }

    .main-menu {
        height: 20vh !important;
    }

    .headercontent {
        grid-template-columns: 50% 7% 6% 4% 33% !important;
        grid-template-rows: 5% 5% 8% 51% 31% !important;
        top: 5%;
        left: 5%;
        width: 90vw;
    }

    .headercontent img {
        width: 27vw !important;
        height: auto;
    }

    .headercontent img:nth-child(1), .headercontent img:nth-child(2) {
        grid-row: 2 / 6;
        grid-column: 5 / 6;
    }

    .headercontent img:nth-child(3), .headercontent img:nth-child(4) {
        grid-row: 3 / 6;
        grid-column: 4 / 6;
    }

    .headercontent img:nth-child(5), .headercontent img:nth-child(6) {
        grid-row: 4 / 6;
        grid-column: 3 / 6;
    }

    .headerh1 {
        position: relative;
        z-index: 10;
    }

    .headercontent p {
        grid-column: 1 / 6;
        text-align: center;
        grid-row: 6 / 6;
        font-size: 14px !important;
        opacity: 0;
        color:#c3a6cd;
        transition: opacity 0.3s;
    }

    .headercontent p:hover {
        opacity: 1;
    }

    .section {
        grid-template-columns: 18% 20% 24% 20% 18%;
        grid-template-rows: 5% 6% 5% 40% 4%;
        padding: 10% 5% 0;
    }

    #about h2 {
        grid-column: 4 / 5 !important;
        grid-row: 2 / 3 !important;
    }

    #about img {
        width: 28vw !important;
        height: auto;
        grid-column: 1 / 3 !important;
        grid-row: 1 / 3 !important;
    }

    #about p {
        grid-row: 3 / 5 !important;
        grid-column: 3 / 6 !important;
    }

    #work h2 {
        grid-column: 4 / 5 !important;
        grid-row: 2 / 3 !important;
    }
    
    #work p {
        grid-row: 3 / 5 !important;
        grid-column: 3 / 6 !important;
    }

    #work img {
        width: 28vw !important;
        grid-column: 1 / 3 !important;
        grid-row: 1 / 3 !important;
        display: initial !important;
    }

    #contact {
        z-index: 0 !important;
        grid-template: 10% 80% 10% / 5% 52% 33% 5% 5% !important;
    }

    .phone {
        background: url("./Media/phone2.png") no-repeat !important;
        background-position: 50% 0% !important;
        background-size: contain !important;
        height: 80vh !important;
        grid-column: 2 / 3 !important;
        grid-template-rows: 12% 9% 6% 5% 5% 10% 53% !important;
        grid-template-columns: 33% 17% 17% 33% !important;
        position: relative;
        z-index: 5;
    }

    .contact-menu, #time, #date, #contact h2, #contact h4 {
        grid-column: 2 / 4 !important;
    }

    #contact h2 {
        font-size: 25px !important;
    }

    #contact h4 {
        font-size: 16px !important;
    }

    .notification {
        grid-template: 25% 35% 38% / 37% 26% 37% !important;
        position: relative;
        z-index: 1000;
        pointer-events: all;
    }

    .notification:last-child {
        grid-column:4/5 !important;
    }

    .notification:hover {
        grid-template: 10% 38% 52% / 39% 22% 39% !important;
    }

    .notification p {
        font-size: 14px !important;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .vienna {
        opacity:0 !important;
        padding-top:0 !important;
    }

    .notification:hover .vienna {
        opacity:1 !important; 
    }

    .notification:hover p {
      opacity: 1;
    }

    #time {
        font-size: 60px !important;
        line-height: 0.8 !important;
    }
    #date {
        font-size: 15px !important;
    }

    .adjust-height {
        height: 100vh;
        width: auto;
    }
}


/* Large Desktop and bigger*/

@media only screen and (min-width: 1400px) {
    .adjust-height {
        height: 100vh;
        width: auto;
    }
}