html, body{
    overflow-x: hidden;}
    /* Typography */ 
        @font-face {
            font-family: 'Magistral';
            src:          url(Fonts/Magistral/Magistral-Book.ttf);
            font-weight:  normal;}
        @font-face {
            font-family: 'Univers';
            src:          url(Fonts/Univers/UniversLTW01-59UltCondensed.ttf);
            font-weight:  normal;}

        h1{
            font-family: univers;
            font-size: 32px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        h2{
            font-family: helvetica;
            font-size: 22px;
        font-weight: normal;}
        h3{
            font-family: helvetica;
            font-size: 14px;
            font-weight: normal;}
        h4{
            font-family: helvetica;
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 0;}

        p{
            font-family: Helvetica;
            font-size: 16px; }
            .terms{
                font-size: 12px;
                color: grey;
                text-align: left;
                font-family: helvetica;
                margin-bottom: 0;}
            p.terms{
                margin-left: 0px;
                margin-top: -15px; 
                max-width: 300px; }
                ul.terms{
                    padding-inline-start: 20px;
                    margin: 10px 0;
                    max-width: 300px;
                }
        a{
            color: black;
            text-decoration: none; }
        .footer a{
            color: white; }

        .link{
            color: #006AB3; 
            
            font-weight: bold;
            font-size: 16px;}
            .link:hover{
                color: #005085;  }


        li a{
            color: grey;
            margin: 0;   }
            li a:hover{
                color:black; }

        ul{
            margin-top: 0;}

        .uppercase{
            text-transform: uppercase !important;}
        .lowercase{
            text-transform: lowercase !important;}
        .capital{
            text-transform: capitalize !important;}

        hr{
            background: whitesmoke;
            height: 0.25px;
            width: 100%;
            border: none;
            margin: 25px 0;}
    /* /Typography */ 
   /* Cookies Banner */
        .cookie-banner{
            position: fixed;

            bottom: 0;

            z-index: 999999999;

            margin: auto;

            width: calc(100vw - 80px);
            height: auto;

            background-color: whitesmoke;
            border-top: 1px solid #aaa;


            text-align: center;

            padding: 2.5px 40px 0px 40px;
            line-height:30px;
        }
        .cookie-banner p{
            font-size: 12px;
        }

        .cookie-button{
            border: none;
            background: black;
            color: white;
            padding: 10px;
            margin: auto;
            text-align: center;

            font-size: 14px;
            font-family: 'Univers';
            letter-spacing: 1.5px;
            text-transform: uppercase;

            margin-left: 25px;

            cursor: pointer;
        }
    /* /Cookie Banner */
    /* Navigation Bar */
    .menu {
        width:      100%;
        background: black;
        height:     75px;}
        .container {
            position: relative;
            margin:   0 auto;
            width:    calc(100vw - 400px);
            padding:  0 200px;}
            .logo{
                height:   40px;
                width:    auto;
                position: absolute;
                top:      20px;
                left:     40px;}
    /* /Navigation Bar */ 

    /* Banner */ 
        .banner-main{
            width: calc(100vw - 50px); 
            height: 450px;
            position: relative; 
            
            background-size: cover;
            background-position: center; 
            
            padding-left: 50px;
        
            display: flex;
            justify-content: flex-start;
            align-items: center;
            transition: 1s ease-in-out}
        #top-area {
                
            background: url(Images/Home/MC-Header.jpg); 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;

            transition: 1s ease-in-out;  }

            .banner-main h2{
                font-family: 'Univers';
                font-size: 60px;
                letter-spacing: 0.025em;
                
                color: white;

                margin-top: 0;
                margin-left: 50px;
                transition: all 1s ease-in-out;
                text-shadow: 0px 0px 10px rgba(0,0,0,0.25);}

        
            .contain-main{
                width: 90vw;
                    max-width: 750px;
                
                margin:100px auto ;   }

                button{
                    width: 250px;
        
                    padding: 16px 32px;
        
                    background: #006AB3;
                    color: white;
        
                    font-family: helvetica;
                    font-size: 16px;
                    font-weight: bold;
        
                    border: 1px solid #006AB3;
                    outline: none;
                
                    cursor: pointer;
        
                    transition: all 0.5s ease-in-out;  }
                    button:hover{
                            background: #005085;    }
                
            .contain-sub{
                width: calc(100vw - 50px);
                padding: 100px 25px;
                background: whitesmoke;}
                    .contain-sub .terms{
                        width: 100%;
                        max-width: unset    }

@media screen and (max-width: 999px) {
    .logo {
        height: 30px;
        width: auto;
        position: absolute;
        top: 20px;
        left: 30px;  }

        
        .banner-main {
            width: calc(100vw);
            height: 150px;
            position: relative;
            background-size: cover;
            background-position: center !important;
            padding-left: 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            transition: 1s ease-in-out;}
            .banner-main h2 {
                font-family: 'Univers';
                font-size: 32px;
                letter-spacing: 0.05em;
                color: white;
                margin-top: 0;
                margin-left: 25px;
                transition: all 1s ease-in-out;}

        .contain-sub{
            width: calc(100vw - 50px);
            padding: 100px 25px;
            background: whitesmoke; ; }

            .cookie-button{
				background: black;
				color: white;
				padding: 10px;
				margin: auto;
				text-align: center;
			
				font-size: 16px;
				font-family: 'Univers';
				letter-spacing: 1.5px;
			
				text-transform: uppercase;
			
				margin-left: 0;

				margin-top: 10px;
			
				cursor: pointer;
			}
    
    
                

}

@media screen and (min-width: 1999px) {

    .banner-main{
        width: calc(100vw - 50px); 
        height:600px;
        position: relative; 
        
        background-size: cover;
        background-position: center; 
        
        padding-left: 50px;
    
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: 1s ease-in-out}
    #top-area {
            
        background: url(Images/Home/MC-Header.jpg); 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

        transition: 1s ease-in-out;  }

        .banner-main h2{
            font-family: 'Univers';
            font-size: 72px;
            letter-spacing: 0.05em;
            
            color: white;

            margin-top: 0;
            margin-left: 50px;
            transition: all 1s ease-in-out;}

}