@font-face {
    font-family: 'MarkPro-Medium';
    src: url('../fonts/MarkPro/MarkPro-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/MarkPro/MarkPro-Medium.otf')  format('opentype'),
           url('../fonts/MarkPro/MarkPro-Medium.woff') format('woff'), url('../fonts/MarkPro/MarkPro-Medium.ttf')  format('truetype'), url('../fonts/MarkPro/MarkPro-Medium.svg#MarkPro-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  

* {
    box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


html {
    height:100%;
    max-height: 100%;
    overflow:hidden;
}

body {
    padding:0;
    margin:0;
    background:#293ce9;
    font-family: 'MarkPro-Medium';
    color:#fff;
    overflow:hidden;
    max-height: 100%;
    position: relative;
    height: 100%;
}

section.site {
    height:100%;
}

section.landscape {
    display:none;
}

h1 {
    font-family: 'MarkPro-Medium';
    font-weight: normal;
    color:#fff;
    font-size:50px;
    display:flex;
    
    justify-content:space-between;
    flex-wrap:wrap;
    height:100%;
    max-width: 1200px;
    margin: auto;
    margin-top:0;
    margin-bottom:0;
    font-size:180px;
}



h2 {
    position: fixed;
    top: 50%;
    width: 100%;
    max-width: 865px;
    text-align: center;
    font-family: 'MarkPro-Medium';
    font-weight: normal;
    margin:0;
    transform:translateY(-50%) translateX(-50%);
    line-height:40px;
    font-size:28px;
    left:50%;
    display: none;
}

h2.in {
    display: block;
}

h3 {
    position: fixed;
    top: 50%;
    width: 100%;
    max-width: 775px;
    text-align: center;
    font-family: 'MarkPro-Medium';
    font-weight: normal;
    margin:0;
    transform:translateY(-50%) translateX(-50%);
    line-height:40px;
    font-size:28px;
    left:50%; 
    display: none;
}

h3.in {
    display:block;
}

h3 a {
    display:block;
    color:#fff;
    text-decoration:none;
}


@media only screen and (max-width: 648px) {
    h2 {
        line-height: 30px;
        font-size: 22px;
        padding: 20px;
    }

    h2, h3 {
        font-size:16px;
        line-height: 1.4em;
    }
}


/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    section.site {
        display:none;
    }

    section.landscape {
        display: block;
        height:100%;
        max-height: 100%;
    }

    section.landscape h4 {
        display: block;
        width:100%;
        color:#fff;
        text-align: center;
        text-decoration:none;
        font-size:60px;
        margin:0;
        padding:0;
        top:50%;
        position: relative;
        transform:translateY(-50%);
    }

    section.landscape h4 a {
        display: block;
        width:100%;
        color:#fff;
        text-align: center;
        text-decoration:none;
        font-size: 20px;
        margin:0;
        padding:0;
    }
}



@media only screen and (max-width: 648px) {
    h1 {
        font-size:65px;
    }

    h4 {
        font-size:
    }
}

h1 span {
    display:flex;
    flex: 50%;
    flex-direction:column;
}

h1 a {
    color: #fff;
    text-decoration: none;
}

h1 span:nth-child(2), h1 span:nth-child(4) {
    text-align:right;
}

h1 span:nth-child(3) {
    flex:10%;
}

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

    h1 span:nth-child(4) {
        flex:70%;
    }
}

h1 em {
    margin-top:auto;
    font-style: normal;
}



h1 span:nth-child(1) em, h1 span:nth-child(2) em {
    margin-top:0;
    line-height: 225px;
}

h1 span:nth-child(3) em, h1 span:nth-child(4) em {
    line-height: 252px;
 }

@media only screen and (max-width: 648px) {
    h1 span:nth-child(1) em, h1 span:nth-child(2) em {
        margin-top:0;
        line-height: 69px;
    }
}

@media only screen and (max-width: 648px) {
    h1 span:nth-child(3) em, h1 span:nth-child(4) em {
        line-height: 74px;
    }
}

h1 span:nth-child(1) em {
    padding-top:20px;
    padding-left:20px;
}

h1 span:nth-child(2) em {
    padding-top:20px;
    padding-right:20px;
}

h1 span:nth-child(3) em {
    padding-bottom:20px;
    padding-left:20px;
}

h1 span:nth-child(4) em {
    padding-bottom:20px;
    padding-right:20px;
}


.contact {
    padding-right:20px;
}

.contact a {
    cursor:pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    padding-right:0;
}

.contact a em {
    padding:0 !important;
}