a,div,p,span,br,hr,ul,ol,li{
    box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
}
a{
    color:white;
    text-decoration:none;
    /* font-size:.75em; */
    /* line-height:1.25em; */
    /* text-transform:uppercase; */
    /* letter-spacing:3px; */
}
body,html{
    background-color: black;
    color:white;
    margin:0;
    min-height:100%;
}
body{
    /* background-image:url('/images/bg2.jpg');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:top center;
        background-attachment: fixed; */
    color:#b0babb;
    text-decoration:none;
    font-size:18px;
    width:100%;
    /* overflow:hidden; */
    line-height: 1.25em;
   
    font-family:'M Plus 1p';
        font-weight:300;

}
h1,h2,h3,h4,h5,h6{}
h1{
    color:#2bd4d3;
    margin:0;
    padding:0;
    width: 100%;

    font-family: 'Modak';
        font-style: italic;
        font-size:7em;
        font-weight:normal;
        line-height: .75em;

    font-family: 'Bagel Fat One';
        font-size:3em;
        line-height: .85em;
        font-weight:normal;
        font-style: normal;
        margin-bottom:20px;

    /* font-family: 'Poetsen One';
        line-height: 1.25em;
        font-size:3em;
        font-weight:normal;
        font-style: normal; */

    /* font-family: 'Knewave';
        line-height: 1.25em;
        font-size:3em;
        font-weight:normal;
        font-style: normal; */
}
#content h1 {
    /* font-size:3em; */
    /* width: 100%; */
}

#title h1 {
    color: #00f1ff1a;
    color: #00f1ff40;
    color: rgba(0, 241, 255, .20);
    color: rgb(0 241 255 / 20%);
    font-family: 'Modak';
    font-size: 50vw;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    /* top: 75%;*/

    margin: 0;
    padding: 0;
    line-height: 1em;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    
    font-size: 8em;
    /* color: white; */
    text-align: left;

    font-family: 'Poetsen One';
    font-family: 'Knewave';
    font-family: 'Bagel Fat One';
}
h2{
    line-height: 1em;
    margin: 0;
    padding: 0;
    color:#d4d4d4;

    /* font-family:Calibri,sans-serif;
        font-size:3em;
        font-weight:bold;    */

    font-family: 'M PLUS 2',sans-serif;
        font-weight: 100;
        font-size: 2em;

    /* font-family: 'Quicksand';
        font-weight: 700;*/

    /* font-family: 'Domine';
        font-weight: 700;*/

    font-family: 'Bagel Fat One';
        font-weight: normal;
        margin-bottom:10px;
    
}
h3{
    font-family: 'M PLUS 2',sans-serif;
    font-size:2.5em;
    font-weight:bold;
    line-height:1em;
    margin:0;
    padding:0;
}
h4{
    font-family: 'M PLUS 2',sans-serif;
    font-size:2em;
    font-weight:bold;
    line-height:1em;
    margin:0;
    padding:0;
}
h5{
    font-family: 'M PLUS 2',sans-serif;
    font-family: 'M PLUS 2';
        font-weight:bold;
        font-weight: 900;
    font-size:1.5em;
    line-height:1em;
    margin:0;
    padding:0;
}
h6{
    font-family: 'M PLUS 2',sans-serif;
    font-size:1em;
    font-weight:bold;
    line-height:1.25em;
    margin:0;
    padding:0;
}
hr{
    border:none;
        border-top:10px solid #2f2f2f;
    margin:30px 0;
}
p {
    margin: 0 0 40px;
}
pre{olor:limegreen;}

#connect{
    display:flex;
        align-items:stretch;
        flex:1;
        justify-content:center;
    margin:0 auto;
        margin-top:25px;
    padding:0;
    width:200px;
}
#connect .logo{
    flex:1;
    align-items:center;
    justify-content:center;
    padding:10px;
    font-family:Modak;
        font-weight:normal;
        font-size:2em;
        font-style:italic;
    text-align:center;
}
#connect .logo img{
    width:35px;
    height:auto;
}
#nav .full{
    display:block;
}

#nav .mobile{
    display:none;
}



#nav a{
    letter-spacing:3px;
    font-size:.75em;
    line-height:1.25em;
    text-transform:uppercase;
}


#page{
    /* display:flex;
        flex:1;
        align-items:stretch;
        justify-content:center;*/

    /* height: 100%; */
    /* overflow-y: auto; */
    width: 100%;
    padding: 0 30px;
        padding-bottom: 100px !important;

    width:75%;
    margin:0 auto;
    position:relative;
    z-index: 3;
}


#page #content{
    margin:0 auto;
    width: 100%;
}


#page #header{
    display: flex;
        flex: 1;
        justify-content:center;
    padding:0;
    position:relative;
    z-index:999999999999999999999999999999;
    margin-bottom:25px;
}


#page #header #nav{
    padding:25px 0; 
    flex: 1;
}


#page #header #nav ul{
    display:flex;
        flex: 0 0 300px;
        align-items:center;
        justify-content:center;
        justify-content:left;
    margin:0;
    padding:0;
}


#page #header #nav ul li{
    padding:0 10px;
    list-style-type:none;
}

#page #header #nav .mobile .menu{
    cursor:pointer;
    padding:20px;
}

#page #header #nav .mobile .menu .bar1,
#page #header #nav .mobile .menu .bar2,
#page #header #nav .mobile .menu .bar3 {
        width: 25px;
        height: 2px;
        background:#2bd4d3;
        margin: 4px 0;
        transition: 0.4s;
    }

#page #header #nav .mobile.active .menu .bar1,
#page #header #nav .mobile.active .menu .bar2,
#page #header #nav .mobile.active .menu .bar3 {
        background:black;
    }
        
    #page #header #nav .mobile .menu.change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 3px);
        transform: rotate(-45deg) translate(-4px, 3px);
    }
        
    #page #header #nav .mobile .menu.change .bar2{
        opacity: 0;}
        
    #page #header #nav .mobile .menu.change .bar3{
        -webkit-transform: rotate(45deg) translate(-5px, -5px);
        transform: rotate(45deg) translate(-5px, -5px);}



#page #logo{
    display:flex;
        flex: 0 0 150px;
        align-items:center;
        justify-content:center;
    padding:10px;
}




#title {
    pointer-events: none;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    padding:0;
    text-align: center;
    overflow: hidden;
    display: flex;
        flex: 1;
        align-items: end;
        justify-content: center;
    height:100%;
    width: 100%;

    position: fixed;
    left: -15px;
    bottom: -30px;
    text-align: left;
}

.button{
    color:black;
    font-weight:bold;
    display:inline-block;
    background:#2bd4d3;
    padding:15px 20px;
    border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    
    font-size:.85em;
    line-height:1.25em;
    text-transform:uppercase;
}
.button:hover{
    background:#67e0e0;
}

.background{
    background-image:url('/images/bg2.jpg');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:bottom center;
    height:100%;
    width:100%;
    position:fixed;
        bottom:0;
        left:0;
    z-index:1;
}
.cover {
    position: fixed;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
    background: black;
    background: rgb(0 0 0 / 60%);
    background: rgba(0,0,0,.60);
    z-index:2;
}

.title {
    /* font-family: 'Modak';
    font-style: italic;
    font-size: 7em;
    font-weight: normal;
    line-height: .75em;
    margin: 0;
    padding: 0;
    width: 60%;
    color: white;
    position: fixed;
    bottom: -20px; */
}
.tmp{
    display: flex;
    flex:1;
    align-items: start;
    justify-content: center;
}


.wrap{
    display: flex;
    flex: 1;
}

@media(min-width:1300px){  
    #page{
        width:50%;
    }
    
}

@media(max-width:650px){ 

    body{
        background-position:bottom center;
        background-size:contain;
    }

    h1{
        font-size:2.5em;
    }
    

    /* h1{ont-size:4em; */
    /* h2{ont-size:3.5em; */
    /* h3{ont-size:4em; */
    /* h4{ont-size:4em; */
    /* h5{ont-size:4em; */
    /* h6{ont-size:4em; */

    /* #title{
        justify-content:right;
        overflow:visible;
    }
    #title h1 {
        font-size: 40vw;
        rotate: -90deg;
        display: flex;
        flex: 1;
        align-items: end;
        justify-content: left;
    } */

    #page{
        align-items:start;
        padding:0 20px;
        width:100%;
    } 

    #page #content{
        width: 100%;
    }
    #page #header{
        display:block;
    }
    /* #page #header #nav * {
        display: block;
    }
    #page #header #nav {
        padding: 0px;
        position: fixed;
            bottom: 0;
            left:0;
        width: 100%;
        background: #2bd4d3;
        display: flex;
            flex:1;
            justify-content:center;
        z-index:9999999999999999999999999999999999;
    }
    #page #header #nav li{
        padding:3px;
    }
    #page #header #nav li a{
        color:black; 
        padding:30px 20px;
        font-weight:bold;
    } */

    #page #header #logo {
        padding-top: 20px;
        width: 33%;
    }

    #page #header #logo img {
        width: 100%;
        height: auto;
    }

    #page #header #nav{
        padding:0;
    }

    #page #header #nav .full{
        display:none;
    }

    #page #header #nav .mobile{
        display:block;
        position:fixed;
            top:0;
            right:0;
        z-index:9999999999999999999999;
    }
    #page #header #nav .mobile .menu{
        display:block;
        position:fixed;
            top:0;
            right:0;
        z-index:9999999999999999999999;
    }

    #page #header #nav .mobile .nav{
        background:#2bd4d3;
            /* background: rgb(43 212 211 / 97%); */
            /* background: rgba(43,212,211,.97); */
        display:none;
        position:fixed;
            top:0;
            right:0;
            z-index:99;
        height:100%;
        width:100%;
        overflow-y:auto;
    }
    #page #header #nav .mobile.active .nav ul{
        display:block;
        flex: 0 0 90%;
    }

    #page #header #nav .mobile.active .nav{
        display:flex;
            flex:1;
            align-items:center;
            justify-content:center;
    }
    #page #header #nav .mobile.active  .nav ul{
        /* display:flex; */
    }

    #page #header #nav .mobile.active .nav a{
        color:black;
        display:block;
        font-family:'Bagel Fat One';
            font-size:3em;
            font-weight:normal;
        border-bottom:1px solid black;
        padding:20px 0;
        letter-spacing: 0px;
        line-height: 1em;
        text-transform: none;
    }
    #page #header #nav .mobile.active .nav li:last-of-type a{
        border:none !important;
    }







    #page #logo{
        flex: 0 0 90%;
        flex: 1;
    }

    .button{
        display:block;
        padding:20px;
        text-align:center;
    }

    .wrap{
        flex:1;
    }


}