@font-face {
            font-family: bnaxelgrotesk-bold;
            font-weight: bold;
            src: url("../assets/bnaxelgrotesk-bold.otf") format("opentype");
        }

        *, *:before, *:after {
            box-sizing: border-box;
        }
        
        html, body {
            margin: 0;
            padding: 0;
            font-family: bnaxelgrotesk-bold, Arial, sans-serif;
            background: #0e0e0e;
            height: 100%;
            color: rgb(211,209,210);
            letter-spacing: 0.2em; 
            line-height:1.2; 
            -webkit-font-smoothing: antialiased;
            text-shadow: 0px 0px 0 rgba(0,0,0,0.0), 0px 0px 22px rgba(0,0,0,0.5);
        }
        
        a {
          color: inherit;
          text-decoration: inherit;
        }
        
        .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .logo{
            width: calc(40vw);
            filter: drop-shadow(0 0 22px rgba(0,0,0,0.5));
        }
        
        .coming-soon{
            color:rgb(50,255,44);
            font-size: 2.7em;
        }
        
        .contact{           
            font-size: 1.5em;
        }
        
        .contact a{
            opacity:1.0;
             transition: opacity 0.3s ease-in-out;
            -webkit-transition: opacity 0.3s ease-in-out;
        }
                .contact a:hover{
                     opacity:0.7;
                }
        
        .nav-arrows{
             height: 4em;
             cursor:pointer;
             opacity:0.7;
             transition: opacity 0.3s ease-in-out;
             -webkit-transition: opacity 0.3s ease-in-out;
             animation: fadeinout 3s ease-in-out infinite;
        }
        
        .nav-arrows:hover{
            opacity:1.0;
            animation:unset;
        }
        
        @keyframes fadeinout {
           0% {
              opacity: 0.5;
           }
           50% {
              opacity: 1;
           }
           100% {
              opacity: 0.5;
           }
        }
           
        .intro{
            font-size: 2.7em;
        }

        .background-image{
            /*background-image: url("/images/back.jpg");*/
            background-position: 50% 0%;
            background-repeat: no-repeat;
            background-size: cover;
            opacity:0.0;
            
            transition: opacity 0.7s ease-in-out,margin-top 0.7s ease-in-out;
            -webkit-transition: opacity 0.7s ease-in-out,margin-top 0.7s ease-in-out;
            
            position:absolute;
            height: 200vh;
            width: 100%;
            top: 0;
        }       
        .background-image.loaded{
            opacity:0.7;
        } 
        
        .page-container{
            position:relative;
            margin:0;
            padding:0;
            width:100%;
            height:100vh;
        }
        
        .content-container{
            display: flex;
            flex-direction: column;
            height:100%;
        }
              
        .content-row{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column; 
        }
        
        #section1 .content-row:nth-child(1){
            flex:2;
        }
      
        #section1 .content-row:nth-child(2){
            height: 37vh;
        }

        
        .align-centre{
          text-align: center;
        }
      
      
      
        @media only screen and (max-width: 768px) {
                       
            .logo{
                width: calc(85vw);
            }
           
            .coming-soon{
                font-size: 1.5em;
            }
        
            .contact{
                font-size: 0.9em;
            }        
                    
            .nav-arrows{
                height: 2em;
            }
            
            .intro{
                font-size: 1.25em;
            }
            
            .background-image{
                position:fixed;
                height:100vh;             
            }

            #section1 .content-row:nth-child(4){
                flex:0.8;
            }
            
            #section1 .content-row:nth-child(5){
                flex:2;
            }
            
        }