.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #E1DED7;
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: ; */
  transition: opacity 0.3s linear;
  overflow: hidden;
  z-index: 2;
}

.page-content {
  max-width: 768px;
  margin: 0 auto;
}

 
.noscroll{
    overflow: hidden;
} 

.hidden{
    display: none;
}




/* IMAGES ////////////////////////////////////////////////////////////////////////////////////////////////*/
.greenBg{
    background-image: url(../images/backgrounds/greenBg.png);
    z-index: -1;
}

/*.heroTextImg{
    background-image:url(../images/backgrounds/LargeDesktop.gif);
}*/

.blueBg{
    background-image: url(../images/backgrounds/blueBg.png);
/*    background-size: contain !important;*/

    mix-blend-mode: overlay;
    opacity: 1;
}

.blueBg2{
    background-image: url(../images/backgrounds/blueBg2.png);
/*    background-size: contain !important;*/

    mix-blend-mode: overlay;
    opacity: 1;
}

.blueBgchart{
    background-image: url(../images/backgrounds/projectBlue.svg);
    width: 100%;
    padding-top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

/*    mix-blend-mode: overlay;*/
}

.projectsBgImg{
    background-image: url(../images/backgrounds/project.svg);
}

.posterBgIm{
    background-image: url(../images/backgrounds/poster.svg);
    width: 100%;
    padding-top: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

body{
    cursor: url(../images/cursors/cursor.png) 15 15, auto; ;
}

.logoTwo:hover{
    cursor: url(../images/cursors/cursor2.png)15 15 , auto;
}

    /* Mercy Berglund //////////////////////////////////// */
        .mbName:hover{
            cursor: url(../images/cursors/mb-cursor.png) 30 30, auto;
        }

        .mbLogoBlack{
            background-image: url(../images/logos/BL/mb-blacklogo.png);
        }

        .mbLogoWhite{
            background-image: url(../images/logos/WL/mb-whitelogo.png);
            background-color: #126fb7 !important;
        }


    /* Karen Cherek //////////////////////////////////// */
        .kcLogoBlack{
            background-image: url(../images/logos/BL/kc-blacklogo.png);
        }

        .kcLogoWhite{
            background-image: url(../images/logos/WL/kc-whitelogo.png);
            background-color: #7fb0cc !important;
        }

        .kcName:hover{
            cursor: url(../images/cursors/kc-cursor.png) 30 30, auto;
        }
    /* Hari Chun //////////////////////////////////// */
        .hcName:hover{
            cursor: url(../images/cursors/hc-cursor.png) 30 30, auto;
        }

        .hcLogoBlack{
            background-image: url(../images/logos/BL/hc-blacklogo.png);
        }

        .hcLogoWhite{
            background-image: url(../images/logos/WL/hc-whitelogo.png);
            background-color: #2e3192 !important;
        }

    /* Emily Faucett //////////////////////////////////// */
        .efName:hover{
            cursor: url(../images/cursors/ef-cursor.png) 30 30, auto;
        }

        .efLogoBlack{
            background-image: url(../images/logos/BL/ef-blacklogo.png);
        }

        .efLogoWhite{
            background-image: url(../images/logos/WL/ef-whitelogo.png);
            background-color: #a7c34f !important;
        }
/*        a7c34f*/

    /* Lauren Fencl //////////////////////////////////// */
        .lfLogoBlack{
            background-image: url(../images/logos/BL/lf-blacklogo.png);
        }

        .lfLogoWhite{
            background-image: url(../images/logos/WL/lf-whitelogo.png);
            background-color: #007c78 !important;
        }

        .lfName:hover{
            cursor: url(../images/cursors/lf-cursor.png) 30 30, auto;
        }
    /* Dylan Frey //////////////////////////////////// */
        .dfLogoBlack{
            background-image: url(../images/logos/BL/df-blacklogo.png);
        }

        .dfLogoWhite{
            background-image: url(../images/logos/WL/df-whitelogo.png);
            background-color: #bf3d34 !important;
        }

        .dfName:hover{
            cursor: url(../images/cursors/df-cursor.png) 30 30, auto;
        }
    /* Kylie Ganther //////////////////////////////////// */
        .kgLogoBlack{
            background-image: url(../images/logos/BL/kg-blacklogo.png);
        }

        .kgLogoWhite{
            background-image: url(../images/logos/WL/kg-whitelogo.png);
            background-color: #f2779c !important;
        }

        .kgName:hover{
            cursor: url(../images/cursors/kg-cursor.png) 30 30, auto;
        }
    /* Logan Glaser //////////////////////////////////// */
        .lgLogoBlack{
            background-image: url(../images/logos/BL/lg-blacklogo.png);
        }

        .lgLogoWhite{
            background-image: url(../images/logos/WL/lg-whitelogo.png);
            background-color: #232323 !important;
        }

        .lgName:hover{
            cursor: url(../images/cursors/lg-cursor.png) 30 30, auto;
        }
    /* Annalise Groff //////////////////////////////////// */
        .agLogoBlack{
            background-image: url(../images/logos/BL/ag-blacklogo.png);
        }

        .agLogoWhite{
            background-image: url(../images/logos/WL/ag-whitelogo.png);
            background-color: #ed3b24 !important;
        }

        .agName:hover{
            cursor: url(../images/cursors/ag-cursor.png) 30 30, auto;
        }
    /* Murphy Hill //////////////////////////////////// */
        .mhLogoBlack{
            background-image: url(../images/logos/BL/mh-blacklogo.png);
        }

        .mhLogoWhite{
            background-image: url(../images/logos/WL/mh-whitelogo.png);
            background-color: #9fbb3b !important;
        }

        .mhName:hover{
            cursor: url(../images/cursors/mh-cursor.png) 30 30, auto;
        }
    /* Ella Johnson //////////////////////////////////// */
        .ejLogoBlack{
            background-image: url(../images/logos/BL/ej-blacklogo.png);
        }

        .ejLogoWhite{
            background-image: url(../images/logos/WL/ej-whitelogo.png);
            background-color: #414042 !important;
        }

        .ejName:hover{
            cursor: url(../images/cursors/ej-cursor.png) 30 30, auto;
        }
    /* Nathan Kinsley //////////////////////////////////// */
        .nkLogoBlack{
            background-image: url(../images/logos/BL/nk-blacklogo.png);
        }

        .nkLogoWhite{
            background-image: url(../images/logos/WL/nk-whitelogo.png);
            background-color: #9Ed4b2 !important;
        }

        .nkName:hover{
            cursor: url(../images/cursors/nk-cursor.png) 30 30, auto;
        }
    /* Nicole Kress //////////////////////////////////// */
        .nikLogoBlack{
            background-image: url(../images/logos/BL/nik-blacklogo.png);
        }

        .nikLogoWhite{
            background-image: url(../images/logos/WL/nik-whitelogo.png);
            background-color: #6fccdc !important;
        }

        .nkrName:hover{
            cursor: url(../images/cursors/nik-cursor.png) 30 30, auto;
        }
    /* Andy Lor //////////////////////////////////// */
        .alName:hover{
            cursor: url(../images/cursors/al-cursor.png) 30 30, auto;
        }

        .alLogoBlack{
            background-image: url(../images/logos/BL/al-blacklogo.png);
        }

        .alLogoWhite{
            background-image: url(../images/logos/WL/al-whitelogo.png);
        }

    /* Alex Martin //////////////////////////////////// */
        .amLogoBlack{
            background-image: url(../images/logos/BL/am-blacklogo.png);
        }

        .amLogoWhite{
            background-image: url(../images/logos/WL/am-whitelogo.png);
            background-color: #035A5A !important;
        }

        .amName:hover{
            cursor: url(../images/cursors/am-cursor.png) 30 30, auto;
        }
    /* Jonathan Mazaba //////////////////////////////////// */
        .jmName:hover{
            cursor: url(../images/cursors/jm-cursor.png) 30 30, auto;
        }

        .jmLogoBlack{
            background-image: url(../images/logos/BL/jm-blacklogo.png);
        }

        .jmLogoWhite{
            background-image: url(../images/logos/WL/jm-whitelogo.png);
            background-color: #38006A !important;
        }

        /*    38006A    */

    /* Eli Meehl //////////////////////////////////// */
        .emName:hover{
            cursor: url(../images/cursors/em-cursor.png) 30 30, auto;
        }

        .emLogoBlack{
            background-image: url(../images/logos/BL/em-blacklogo.png);
        }

        .emLogoWhite{
            background-image: url(../images/logos/WL/em-whitelogo.png);
            background-color: #30423c !important;
        }
/*        30423c*/

    /* Libby Meyer //////////////////////////////////// */
        .lmLogoBlack{
            background-image: url(../images/logos/BL/lm-blacklogo.png);
        }

        .lmLogoWhite{
            background-image: url(../images/logos/WL/lm-whitelogo.png);
            background-color: #572f2f !important;
        }

        .lmName:hover{
            cursor: url(../images/cursors/lm-cursor.png) 30 30, auto;
        }
    /* Kyle Mialkowski //////////////////////////////////// */
        /*    #efa321*/
        .kmLogoBlack{
            background-image: url(../images/logos/BL/km-blacklogo.png);
        }

        .kmLogoWhite{
            background-image: url(../images/logos/WL/km-whitelogo.png);
            background-color: #efa321 !important;
        }

        .kmName:hover{
            cursor: url(../images/cursors/km-cursor.png) 30 30, auto;
        }
    /* Sara Moen //////////////////////////////////// */
        .smLogoBlack{
            background-image: url(../images/logos/BL/sm-blacklogo.png);
        }

        .smLogoWhite{
            background-image: url(../images/logos/WL/sm-whitelogo.png);
            background-color: #101011 !important;
        }

        .smName:hover{
            cursor: url(../images/cursors/sm-cursor.png) 30 30, auto;
        }
    /* Faith Petrina //////////////////////////////////// */
        .fpName:hover{
            cursor: url(../images/cursors/fp-cursor.png) 30 30, auto;
        }

        .fpLogoBlack{
            background-image: url(../images/logos/BL/fp-blacklogo.png);
        }

        .fpLogoWhite{
            background-image: url(../images/logos/WL/fp-whitelogo.png);
            background-color: #27b7ea !important;
        }

/*        27b7ea*/

    /* Abigail Luna Ramirez //////////////////////////////////// */
        .arLogoBlack{
            background-image: url(../images/logos/BL/ar-blacklogo.png);
        }

        .arLogoWhite{
            background-image: url(../images/logos/WL/ar-whitelogo.png);
            background-color: #4a6ef4 !important;
        }

        .arName:hover{
            cursor: url(../images/cursors/ar-cursor.png) 30 30, auto;
        }
    /* Abby Schmidtke //////////////////////////////////// */
        .asLogoBlack{
            background-image: url(../images/logos/BL/as-blacklogo.png);
        }

        .asLogoWhite{
            background-image: url(../images/logos/WL/as-whitelogo.png);
            background-color: #162e1a !important;
        }

        .asName:hover{
            cursor: url(../images/cursors/as-cursor.png) 30 30, auto;
        }
    /* Madison Skaggs //////////////////////////////////// */
        .msLogoBlack{
            background-image: url(../images/logos/BL/ms-blacklogo.png);
        }

        .msLogoWhite{
            background-image: url(../images/logos/WL/ms-whitelogo.png);
            background-color: #CD4B3D !important;
        }

        .msName:hover{
            cursor: url(../images/cursors/ms-cursor.png) 30 30, auto;
        }
    /* Caitlyn Wacholz //////////////////////////////////// */
        .cwLogoBlack{
            background-image: url(../images/logos/BL/cw-blacklogo.png);
        }

        .cwLogoWhite{
            background-image: url(../images/logos/WL/cw-whitelogo.png);
            background-color: #1b4539 !important;
        }

        .cwName:hover{
            cursor: url(../images/cursors/cw-cursor.png) 30 30, auto;
        }
    /* Evan walters //////////////////////////////////// */
        .ewName:hover{
            cursor: url(../images/cursors/ew-cursor.png) 30 30, auto;
        }

        .ewLogoBlack{
            background-image: url(../images/logos/BL/ew-blacklogo.png);
        }

        .ewLogoWhite{
            background-image: url(../images/logos/WL/ew-whitelogo.png);
            background-color: #2b4162 !important;
        }

/*    2b412    */

    /* Megan Waskosky //////////////////////////////////// */
        .mwName:hover{
            cursor: url(../images/cursors/mw-cursor.png) 30 30, auto;
        }

        .mwLogoBlack{
            background-image: url(../images/logos/BL/mw-blacklogo.png);
        }

        .mwLogoWhite{
            background-image: url(../images/logos/WL/mw-whitelogo.png);
            background-color: #588258 !important;
        }


.nameHolder a{
    transform: 500ms;
}

.nameHolder a:hover{
        color: #E5176D !important;
        transform: 500ms;
    }


.mapImg{
    background-image: url(../images/other/map.png);
}

/* UNIVERSAL//////////////////////////////////////////////////////////////////////////////////////////////// */

@font-face {
    font-family: 'SaintR';
    src: url('../fonts/saint_regular_1-webfont.woff2') format('woff2'),
         url('../fonts/saint_regular_1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextBold';
    src: url('../fonts/avenirnextltpro-bold-webfont.woff2') format('woff2'),
         url('../fonts/avenirnextltpro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirNextReg';
    src: url('../fonts/avenirnextltpro-regular-webfont.woff2') format('woff2'),
         url('../fonts/avenirnextltpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
    overflow-x: clip;
}

body{
    background-color: #E1DED7;

    overflow-x: clip;
}

.map{
    overflow-x: hidden;
}

h3{
    font-family: "AvenirNextBold";
}

p , a{
  font-family: "AvenirNextReg";  
}

.mention{
    color: #2B3B96;
}

.bold{
   font-family: "AvenirNextBold"; 
}

a{
    display: block;
    color: #2B3B96;

    text-decoration: none;
}

a::after{
    color: #2B3B96;
    text-decoration: none;
}

.container{
	margin-left:auto;
	margin-right:auto;
}

.flexParent{
    display: flex;
}

.bgImg{
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

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

.pink{
    color: #E5176D;
}

.blue{
    color: #2B3B96;
}

.logoOne{
    background-size: contain;
    background-position: center;
}

.logoTwo{
    background-size: contain;
    background-position: center;
}


/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){

    h1{ 
        font-size:47.78px;
        /* font-size: 11vw; */
    }
    
    h2{ 
        font-size:39.81px;
    }
    
    h3{ 
        /* font-size: 33.18px; */
        font-size: 5.1vw;
    }
    
    h4{ 
        font-size: 27.65px;
        /* font-size: 5.2vw; */
    }
    
    h5{ 
        font-size: 23.04px;
        /* font-size: 1.7vw; */
    }
    
    h6{ 
        font-size: 19.2px;
        /* font-size: 4.3vw; */
    }
    
    p , a{ 
        /* font-size: 16px; */
        font-size: 3vw;
        line-height: 4vw;
    }

    .container {
		width: 92.177% !important;
	}

    .hero{
        height: 70vh;
        position: relative;
        /*! margin-bottom: -26%; */
    }

    .heroBgImg{
        width: 100%;
        padding-top: 183%;

        position: absolute;
            left: 0%;
            top: -30%;
        background-size: 225%;

        transform: translateX(-50%) translateY(-60%);
    }

    .heroBgImg2{
        position: absolute;
            left: 0%;
            top: 20%;
    }

    .blueBgchart{
        padding-top: 60%;
    }

    .heroTextImg{
        width: 89%;
        padding-top: 15%;
        padding-bottom: 35%;

        position: absolute;
            left: 50%;
                margin-left: -43.5%;
            top: 45%;
                margin-top: -25%;

        background-image:url(../images/backgrounds/Desktop.gif);
    }

    .adjective{
        position: absolute;
        z-index: 10;

        color: #E5176D;

        font-family: "AvenirNextBold";
    }

    .adjective:nth-of-type(1){
        top: 7%;
        left: 7%;
    }
    
    .adjective:nth-of-type(2){
        top: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(3){
        bottom: 10%;
        left: 10%;
    } 

    .adjective:nth-of-type(4){
        bottom: 10%;
        right: 7%;
    } 

    .adjective:nth-of-type(5){
        width: 60%;
        padding-top: 5%;
        bottom: 23%;
        right: 50%;
            margin-right: -30%;
        
        text-align: center;
    } 

    .showAbout{
        margin-bottom: 17%;
        margin-top: 5%;
        position: relative;
    }

    .aboutShowBg{
        width: 110.6%;
        padding-bottom: 97%;
        position: absolute;
            left: -26%;
            top: -2%;
        z-index: -1;
    }

    .aboutShowBg2{
        width: 110.6%;
        padding-bottom: 97%;
        position: absolute;
            right: -26%;
            bottom: -12%;
        z-index: -1;
    }

    .showAbout p{
        margin-bottom: 2%;
    }

    .posterBgIm{
        padding-top: 150%;
    }

    .aboutHeading{
        width: 73.975%;
        height: auto;
        position: relative;
        z-index: -1;

        margin-bottom: 14.344%;
    }
    
    .textAi{
        width: 61.386%;

        margin-left: 24.871%;
        margin-bottom: 14.344%;
    }

    .textAi h3 , .schedule h3{
        margin-bottom: 1%;
    }

    .schedule{
        width: 68.588%;
        height: auto;
        margin-left: auto;
        margin-top: 10%;
    }

    .projects{
        position: relative;
        margin-bottom: 20%;
    }

    /* INFINATE SCROLL//////////////////////// */

    .marquee {
        font-family: "SaintR";
        margin: 4rem 0 5rem;
        font-size: 4.5vw;
        overflow: hidden;

        --tw: 176.5vw;
        --ad: 16s;
    }
    
    .marquee span {   
        display: inline-block;
        white-space: nowrap;
        /* color: #00112C; */
        width: var(--tw);
        text-shadow: var(--tw) 0 currentColor, 
                    calc(var(--tw) * 2) 0 currentColor, 
                    calc(var(--tw) * 3) 0 currentColor,
                    calc(var(--tw) * 4) 0 currentColor;
    
        will-change: transform;
        animation: marquee var(--ad) linear infinite;
        animation-play-state: paused;
    }
    
    .marquee:hover span {
        animation-play-state: running;
    }
     
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    
    /*  
    * on MacOs: System Preferences > 
    *           Accessibility > 
    *           Display > Reduce motion
    */
    
    @media (prefers-reduced-motion: reduce) {
        .marquee span {
            animation: none;
            text-shadow: none;
            width: auto;
            display: block;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
        }
    }
     
    .marquee span {
        animation-play-state: running;
        margin-right: 30%;
    }

    label {
        font: .85rem "SaintR"; 
    }

    /* //////////////////////////////////////////// */
    .projectsBgImg{
        width: 166%;
        padding-bottom: 288%;

        background-size: 220%;

        position: absolute;
            bottom: 50%;
                margin-bottom: -130%;
            left: 50%;
                margin-left: -83%;
        
        transform:rotate(12deg);
        z-index: -1;
    }
    
    .logos{
        flex-wrap: wrap;

        /*! margin-top: 0%; */
   }

   .logoHolder{
        width: 27.7%;
        height: 0%;
        padding-bottom: 27.7%;

        margin-right: 8.333%;
        margin-bottom: 8.333%;

        position:relative;
   } 
   
   .logoHolder:nth-of-type(3n){
        margin-right: 0;
   }

   .logoOne{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: white;
        border-radius: 50%;
        background-size: contain;

        position: absolute;

        z-index: -1;
   }

   .logoTwo{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: black;
        border-radius: 50%;

        position: absolute;

        opacity: 0;

        transition: opacity 450ms ease-in-out;
   }

   .logoTwo:hover{
        opacity: 1;

        transition: opacity 250ms ease-in-out;
   }

    .names{
        position: relative;
    }

    .names h3{
        margin-bottom: 6%;
    }

    .nameBg{
        width: 137%;
        padding-bottom: 110%;

        transform: rotate(196deg);
        position: absolute;
            left: -29%;
            top: -15%;
        z-index: -1;
    }

    .nameBg2{
        width: 119%;
        padding-bottom: 104%;

        transform: rotate(200deg);

        position: absolute;
            right: -33%;
            bottom: 0%;
        z-index: -1;
    }

    .classList{
        width:74.257%;
        margin-right: auto;
        margin-left: auto;
    }

    .nameContainer{
        /* display: flex; */
        width: 48.19%;
    }

    .nameContainer:nth-of-type(1){
        margin-right: auto;
    }

    .nameContainer:nth-of-type(2){
        margin-top: 30.5%;
        margin-right: 0%;     
    }
    
    .nameHolder a{
        margin-bottom: 23%;

        transform: 500ms;
    }

    

    .nameHolder:nth-of-type(2){
        /* margin-top: 31.7%; */
        margin-right: 0%;
    }

    .map{
        position: relative;

        overflow-y: hidden;
    }

    .mapHeading{
        margin-top: 13%;
        margin-bottom: 7%;
    }
    
    .mapImg{
        width: 100%;
        padding-bottom: 60%;
        margin-bottom: 10%;
        margin-top: 10%;
    }

    .map .schedule{
        margin-bottom: 10%;
    }

    .mapBlueBg{
        width: 74%;
        padding-bottom: 70%;

        transform: rotate(250deg);
        position: absolute;
            left: -14%;
            bottom: -20%;
        z-index: -1;
    }

    .mapGreenBg{
        width: 104%;
        padding-bottom: 75%;

        transform: rotate(180deg);
        position: absolute;
            right: -27%;
            bottom: 6%;
        z-index: -1;
    }

    .mention{
        padding-bottom: 2%;
        font-size: 1.5vw;
        text-align: right;
    }

}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
    h1{ 
        font-size:47.78px;
        /* font-size: 11vw; */
    }
    
    h2{ 
        font-size: 39.81px;
    }
    
    h3{ 
        /* font-size: 33.18px; */
        font-size: 3.4vw;
    }
    
    h4{ 
        font-size:27.65px;
        /* font-size: 5.2vw; */
    }
    
    h5{ 
        font-size: 23.04px;
        /* font-size: 1.7vw; */
    }
    
    h6{ 
        font-size: 19.2px;
        /* font-size: 4.3vw; */
    }
    
    p , a{ 
        /* font-size: 16px; */
        font-size: 1.7vw;
        line-height: 2vw;
    }
    
    .container{
		width: 92.969%;
	}	

    .hero{
        height: 100vh;
        position: relative;
    }

    .heroBgImg{
        width: 100%;
        padding-top: 117%;

        position: absolute;
            left: 0%;
            top: -10%;
        background-size: 166%;

        transform: translateX(-50%) translateY(-60%);
    }

    .heroTextImg{
        width: 89%;
        padding-top: 15%;
        padding-bottom: 35%;

        position: absolute;
            left: 50%;
                margin-left: -43.5%;
            top: 45%;
                margin-top: -25%;

        background-image:url(../images/backgrounds/Desktop.gif);
    }

    .heroBgImg2{
        position: absolute;
            left: 0%;
            top: 15%;
    }

    .blueBgchart{
        padding-top: 60%;
    }

    .adjective{
        position: absolute;
        z-index: 10;

        color: #E5176D;

        font-family: "AvenirNextBold";
    }

    .adjective:nth-of-type(1){
        top: 7%;
        left: 7%;
    }
    
    .adjective:nth-of-type(2){
        top: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(3){
        bottom: 7%;
        left: 7%;
    } 

    .adjective:nth-of-type(4){
        bottom: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(5){
        width: 35%;
        padding-top: 5%;
        bottom: 7%;
        right: 50%;
            margin-right: -17%;
        
        text-align: center;
    } 

    .showAbout{
        margin-top: 18%;
        margin-bottom: 15%;
        position: relative;
    }

    .aboutShowBg{
        width: 98.6%;
        padding-bottom: 86%;
        position: absolute;
            left: -19%;
            top: -5%;
    }

    .aboutShowBg2{
        width: 98.6%;
        padding-bottom: 86%;
        position: absolute;
            right: -19%;
            bottom: -46%;
    }

    .showAbout p{
        margin-bottom: 1.5%;
    }

    .aboutHeading{
        width: 58.898%;
        height: auto;

        margin-bottom: 11.344%;
    }

    .textAi{
        width: 48.588%;
        height: auto;

        margin-left: 28.621%;
        margin-bottom: 11.344%;
    }

    .textAi h3 , .schedule h3{
        margin-bottom: 1%;
    }

    .schedule{
        width: 38.277%;
        height: auto;
        margin-left: auto;
    }

    .projects{
        position: relative;

        margin-bottom: 20%;
    }

    /* INFINATE SCROLL//////////////////////// */

    .marquee {
        font-family: "SaintR";
        margin: 4rem 0 12rem;
        font-size: 4.5vw;
        overflow: hidden;

        --tw: 176.5vw;
        --ad: 16s;
    }
    
    .marquee span {   
        display: inline-block;
        white-space: nowrap;
        /* color: #00112C; */
        width: var(--tw);
        text-shadow: var(--tw) 0 currentColor, 
                    calc(var(--tw) * 2) 0 currentColor, 
                    calc(var(--tw) * 3) 0 currentColor,
                    calc(var(--tw) * 4) 0 currentColor;
    
        will-change: transform;
        animation: marquee var(--ad) linear infinite;
        animation-play-state: paused;
    }
    
    .marquee:hover span {
        animation-play-state: running;
    }
     
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    
    /*  
    * on MacOs: System Preferences > 
    *           Accessibility > 
    *           Display > Reduce motion
    */
    
    @media (prefers-reduced-motion: reduce) {
        .marquee span {
            animation: none;
            text-shadow: none;
            width: auto;
            display: block;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
        }
    }
    
    .marquee span {
        animation-play-state: running;
    }

    label {
        font: .85rem "SaintR"; 
        margin-left: .5em
    }

    /* //////////////////////////////////////// */

    .projectsBgImg{
        width: 100%;
        padding-bottom: 322%;

        background-size: 200%;

        position: absolute;
            bottom: 50%;
                margin-bottom: -166%;
            left: 50%;
                margin-left: -50%;
        
        z-index: -1;
    }

    .logos{
        flex-wrap: wrap;

        margin-top: 10%;
    }

   .logoHolder{
        width: 20.001%;
        height: 0%;
        padding-bottom: 20.001%;

        margin-right: 6.665%;
        margin-bottom: 6.665%;

        position:relative;
   } 
   
   .logoHolder:nth-of-type(4n){
        margin-right: 0;
   }

   .logoHolder:nth-of-type(25){
        margin-left: auto;
   }

   .logoHolder:nth-of-type(27){
    margin-right: auto;
}

   .logoOne{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: white;
        border-radius: 50%;

        position: absolute;

        z-index: -1;
   }

   .logoTwo{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: black;
        border-radius: 50%;

        position: absolute;

        opacity: 0;

        transition: opacity 450ms ease-in-out;
   }

   .logoTwo:hover{

        opacity: 1;

        transition: opacity 250ms ease-in-out;
   }

   .names{
        position: relative;
        margin-bottom: 10%;
    }

    .names h3{
        margin-bottom: 4.5%;
    }

    .nameBg{
        width: 106%;
        padding-bottom: 75%;

        transform: rotate(196deg);
        position: absolute;
            left: -29%;
            top: -44%;
        z-index: -1;
    }

    .nameBg2{
        width: 92%;
        padding-bottom: 82%;

        transform: rotate(200deg);

        position: absolute;
            right: -33%;
            bottom: -25%;
        z-index: -1;
    }

    .classList{
        width:80.379%;
        margin-right: auto;
        margin-left: auto;
    }

    .nameContainer{
        display: flex;
        width: 47.331%;
    }

    .nameContainer:nth-of-type(1){
        margin-right: auto;
    }

    .nameContainer:nth-of-type(2){
        margin-top: 15%;
        margin-right: 0%;
    }
    
    .nameHolder{
        width:50.609%;
        
        margin-right: auto;
    }

    .nameHolder a{
        margin-bottom: 23%;
    }

    .nameHolder:nth-of-type(2){
        margin-top: 15.7%;
        margin-right: 0%;
    }

    .map{
        position: relative;

        overflow-y: hidden;
    }

    .mapHeading{
        margin-top: 13%;
        margin-bottom: 7%;
    }
    
    .mapImg{
        width: 58.588%;
        padding-bottom: 38.531%;
    }

    .map .schedule{
        margin-bottom: 10%;
    }

    .mapBlueBg {
        width: 72%;
        padding-bottom: 92%;
        
        transform: rotate(250deg);
        position: absolute;
            left: -14%;
            bottom: -43%;
        z-index: -1;
      }

    .mapGreenBg{
        width: 103%;
        padding-bottom: 82%;

        transform: rotate(180deg);
        position: absolute;
            right: -29%;
            bottom: -21%;
        z-index: -1;
    }

    .mention{
        padding-bottom: 2%;
        font-size: 1vw;
        text-align: right;
    }
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px) and (max-width: 1439px){
    h1{ 
        font-size: 53.75px;
        /* font-size: 2.8vw; */
    }
    
    h2{ 
        font-size: 44.79px;
    }
    
    h3{ 
        /* font-size: 37.32px; */
        font-size: 2.75vw;
    }
    
    h4{ 
        /* font-size: 31.1px; */
        font-size: 2.25vw;
    }
    
    h5{ 
        font-size: 25.92px;
        /* font-size: 1.7vw; */
    }
    
    h6 { 
        font-size: 21.6px;
        /* font-size: 1.05vw; */
    }
    
    p , a{ 
        /* font-size: 18px; */
        font-size: 1.5vw;
        line-height: 1.8vw;
    }
    
	.container{
		width:95.415%;
    }

    .hero{
        height: 100vh;
        position: relative;
    }

    .heroBgImg{
        width: 100%;
        padding-bottom: 100%;

        position: absolute;
            left: 0%;
            top: -30%;
        background-size: 140%;

        transform: translateX(-50%) translateY(-60%);

    }

    .heroTextImg{
        width: 89%;
        padding-top: 15%;
        padding-bottom: 35%;

        position: absolute;
            left: 50%;
                margin-left: -43.5%;
            top: 45%;
                margin-top: -25%;

        background-image:url(../images/backgrounds/LargeDesktop.gif);
    }

    .heroBgImg2{
        position: absolute;
            left: 0%;
            top: 10%;
    }

    .adjective{
        position: absolute;
        z-index: 10;

        color: #E5176D;

        font-family: "AvenirNextBold";
    }

    .adjective:nth-of-type(1){
        top: 7%;
        left: 7%;
    }
    
    .adjective:nth-of-type(2){
        top: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(3){
        bottom: 7%;
        left: 7%;
    } 

    .adjective:nth-of-type(4){
        bottom: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(5){
        width: 30%;
        padding-top: 5%;
        bottom: 7%;
        right: 50%;
            margin-right: -15%;
        
        text-align: center;
    } 

    .showAbout{
        margin-top: 3%;
        margin-bottom: 15%;
        position: relative;
    }

    .aboutShowBg{
        width: 93.6%;
        padding-bottom: 82%;
        position: absolute;
            left: -18%;
            top: -8%;
    }

    .aboutShowBg2{
        width: 93.6%;
        padding-bottom: 82%;
        position: absolute;
            right: -18%;
            bottom: -28%;
    }

    .showAbout p{
        margin-bottom: 2%;
    }

    .aboutHeading{
        width: 48.466%;
        height: auto;

        margin-bottom: 11.344%;
    }

    .textAi{
        width: 41.288%;
        height: auto;

        margin-left: 30.356%;
        margin-bottom: 11.344%;
    }

    .textAi h3 , .schedule h3{
        margin-bottom: 1%;
    }

    .schedule{
        width: 31.288%;
        height: auto;
        margin-left: auto;
    }

    .projects{
        position: relative;

        margin-bottom: 10%;
    }

    /* INFINATE SCROLL//////////////////////// */
    .marquee {
        font-family: "SaintR";
        margin: 4rem 0 12rem;
        font-size: 4.5vw;
        overflow: hidden;

        --tw: 176.5vw;
        --ad: 16s;
    }

    .marquee span {   
        display: inline-block;
        white-space: nowrap;
        /* color: #00112C; */
        width: var(--tw);
        text-shadow: var(--tw) 0 currentColor, 
                    calc(var(--tw) * 2) 0 currentColor, 
                    calc(var(--tw) * 3) 0 currentColor,
                    calc(var(--tw) * 4) 0 currentColor;
    
        will-change: transform;
        animation: marquee var(--ad) linear infinite;
        animation-play-state: paused;
    }
    
    .marquee:hover span {
        animation-play-state: running;
    }
     
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    
    /*  
    * on MacOs: System Preferences > 
    *           Accessibility > 
    *           Display > Reduce motion
    */
    
    @media (prefers-reduced-motion: reduce) {
        .marquee span {
            animation: none;
            text-shadow: none;
            width: auto;
            display: block;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
        }
    }
     
    .marquee span {
        animation-play-state: running;
    }

    label {
        font: .85rem "SaintR"; 
        margin-left: .5em
    }

    /* //////////////////////////////////////// */

    .projectsBgImg{
        width: 104%;
        padding-bottom: 217%;

        background-size: 223%;

        position: absolute;
            bottom: 50%;
                margin-bottom: -108%;
            left: 50%;
                margin-left: -50%;
        
        z-index: -1;
    }
    
    .logos{
        flex-wrap: wrap;

        margin-top: 7%;
   }

   .logoHolder{
        width: 20.001%;
        height: 0%;
        padding-bottom: 20.001%;

        margin-right: 6.665%;
        margin-bottom: 9.202%;

        position:relative;
   } 
   
   .logoHolder:nth-of-type(4n){
        margin-right: 0;
   }

   .logoHolder:nth-of-type(25){
        margin-left: auto;
   }

   .logoHolder:nth-of-type(27){
    margin-right: auto;
}

   .logoOne{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: white;
        border-radius: 50%;

        position: absolute;

        z-index: -1;
   }

   .logoTwo{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: black;
        border-radius: 50%;

        position: absolute;

        opacity: 0;

        transition: opacity 450ms ease-in-out;
   }

   .logoTwo:hover{
        opacity: 1;

        transition: opacity 250ms ease-in-out;
   }

    .names{
        position: relative;
        margin-bottom: 15%;
    }

    .names h3{
        margin-bottom: 5%;
    }

    .nameBg{
        width: 106%;
        padding-bottom: 75%;

        transform: rotate(196deg);
        position: absolute;
            left: -30%;
            top: -33%;
        z-index: -1;
    }

    .nameBg2{
        width: 89%;
        padding-bottom: 78%;

        transform: rotate(200deg);

        position: absolute;
            right: -30%;
            bottom: -51%;
        z-index: -1;
    }

    .classList{
        width: 70.644%;
        margin-right: auto;
        margin-left: auto;
    }

    .nameContainer{
        display: flex;
        width: 47.664%;
    }

    .nameContainer:nth-of-type(1){
        margin-right: auto;
    }

    .nameContainer:nth-of-type(2){
        margin-top: 16%;
        margin-right: 0%;
    }
    
    .nameHolder{
        width: 48.098%;
        
        margin-right: auto;
    }

    .nameHolder a{
        margin-bottom: 23%;
    }

    .nameHolder:nth-of-type(2){
        margin-top: 16.7%;
        margin-right: 0%;
    }

    .map{
        position: relative;

        overflow-y: hidden;
    }

    .mapHeading{
        margin-top: 10%;
        margin-bottom: 7%;
    }
    
    .mapImg{
        width: 64.467%;
        padding-bottom: 42.984%;
    }

    .map .schedule{
        margin-bottom: 10%;
    }

    .mapBlueBg{
        width: 75%;
        padding-bottom: 65%;

        transform: rotate(250deg);
        position: absolute;
            left: -17%;
            bottom: -27%;
        z-index: -1;
    }

    .mapGreenBg{
        width: 100%;
        padding-bottom: 80%;

        transform: rotate(180deg);
        position: absolute;
            right: -24%;
            bottom: -15%;
        z-index: -1;
    }

    .mention{
        padding-bottom: 2%;
        font-size: .75vw;
        text-align: right;
    }

}

/*large screen/////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1440px){
    h1{ 
        font-size: 53.75px;
        /* font-size: 2.8vw; */
    }
    
    h2{ 
        font-size: 44.79px;
    }
    
    h3{ 
        /* font-size: 37.32px; */
        font-size: 2.6vw;
    }
    
    h4{ 
        font-size: 31.1px;
        /* font-size: 1.53vw; */
    }
    
    h5{ 
        font-size: 25.92px;
        /* font-size: 1.7vw; */
    }
    
    h6 { 
        font-size: 21.6px;
        /* font-size: 1.05vw; */
    }
    
    p , a{ 
        /* font-size: 18px; */
        font-size: 1.25vw;
        line-height: 1.5vw;
    }
    
    .container{
		width:79.583%; /*1146*/
	}

    .hero{
        height: 100vh;
        position: relative;
    }

    .heroBgImg{
        width: 100%;
        padding-bottom: 90%;

        position: absolute;
            left: 0%;
            top: -50%;
        background-size: 127%;

        z-index: -1;

        transform: translateX(-50%) translateY(-55%);
    }

    .heroTextImg{
        width: 89%;
        padding-top: 15%;
        padding-bottom: 35%;

        position: absolute;
            left: 50%;
                margin-left: -43.5%;
            top: 55%;
                margin-top: -25%;
        
        z-index: 1;

        background-image:url(../images/backgrounds/LargeDesktop.gif);
    }

    .adjective{
        position: absolute;
        z-index: 10;

        color: #E5176D;

        font-family: "AvenirNextBold";
    }

    .adjective:nth-of-type(1){
        top: 7%;
        left: 7%;
    }
    
    .adjective:nth-of-type(2){
        top: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(3){
        bottom: 7%;
        left: 7%;
    } 

    .adjective:nth-of-type(4){
        bottom: 7%;
        right: 7%;
    } 

    .adjective:nth-of-type(5){
        width: 24%;
        padding-top: 5%;
        bottom: 7%;
        right: 50%;
            margin-right: -12%;
        
        text-align: center;
    } 

    .showAbout{
        margin-top: 20%;
        margin-bottom: 10%;
        position: relative;
    }

    .aboutShowBg{
        width: 85.6%;
        padding-bottom: 75%;

        position: absolute;
            left: -16%;
            top: -8%;
    }

    .aboutShowBg2{
        width: 85.6%;
        padding-bottom: 75%;

        position: absolute;
            right: -16%;
            bottom: -35%;
    }

    .showAbout p{
        margin-bottom: 1%;
    }

    .aboutHeading{
        width: 48.691%;
        height: auto;

        margin-bottom: 11.344%;
    }

    .textAi{
        width: 47.083%;
        height: auto;

        margin-left: 30.649%;
        margin-bottom: 11.344%;
    }

    .textAi h3 , .schedule h3{
        margin-bottom: 1%;
    }

    .schedule{
        width: 30.702%;
        height: auto;
        margin-left: auto;
    }

    .projects{
        position: relative;

        margin-bottom: 25%;
    }

    /* INFINATE SCROLL/////////////////////// */
    .marquee {
        font-family: "SaintR";
        margin: 4rem 0 12rem;
        font-size: 4.5vw;
        overflow: hidden;

        --tw: 176.5vw;
        --ad: 16s;
    }
    
    .marquee--long { 
    font-size: 1.25rem; 
    }
    
    .marquee span {   
        display: inline-block;
        white-space: nowrap;
        /* color: #00112C; */
        width: var(--tw);
        text-shadow: var(--tw) 0 currentColor, 
                    calc(var(--tw) * 2) 0 currentColor, 
                    calc(var(--tw) * 3) 0 currentColor,
                    calc(var(--tw) * 4) 0 currentColor;
    
        will-change: transform;
        animation: marquee var(--ad) linear infinite;
        animation-play-state: paused;
    }
    
    .marquee:hover span {
        animation-play-state: running;
    }
     
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    
    /*  
    * on MacOs: System Preferences > 
    *           Accessibility > 
    *           Display > Reduce motion
    */
    
    @media (prefers-reduced-motion: reduce) {
        .marquee span {
            animation: none;
            text-shadow: none;
            width: auto;
            display: block;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
        }
    }
    
    .marquee span {
        animation-play-state: running;
    }

    label {
        font: .85rem "SaintR"; 
        margin-left: .5em
    }

    /* //////////////////////////////////////// */

    .projectsBgImg{
        width: 100%;
        padding-bottom: 166%;

        background-size: 185%;

        position: absolute;
            bottom: 50%;
                margin-bottom: -89%;
            left: 50%;
                margin-left: -50%;
        
            /* transform: translateX(-50%)s translateY(82%); */

        z-index: -1;
    }

    .logos{
         flex-wrap: wrap;

         margin-top: 7%;
    }

    .logoHolder{
        width: 20.099%;
        height: 0%;
            padding-bottom: 20.099%;

        margin-right: auto;
        margin-bottom: 7.853%;

        position:relative;
    } 
    
    .logoHolder:nth-of-type(4n){
        margin-right: 0;
    }

    .logoHolder:nth-of-type(25){
        margin-left: auto;
    }

    .logoHolder:nth-of-type(27){
        margin-right: auto;
    }

    .logoOne{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: white;
        border-radius: 50%;

        position: absolute;

        z-index: -1;
    }

    .logoTwo{
        display: block;
        width: 100%;
        padding-bottom: 100%;
        background-color: black;
        border-radius: 50%;

        position: absolute;

        opacity: 0;

        transition: opacity 450ms ease-in-out;
    }

    .logoTwo:hover{
        /* cursor: url(../images/cursor2.png) , auto; */

        opacity: 1;

        transition: opacity 250ms ease-in-out;
    }

    .names{
        position: relative;
        margin-bottom: 25%;
    }

    .names h3{
        margin-bottom: 7%;
    }

    .nameBg{
        width: 122%;
        padding-bottom: 90%;

        transform: rotate(200deg);
        position: absolute;
            left: -41%;
            top: -56%;
        z-index: -1;
    }

    .nameBg2{
        width: 87%;
        padding-bottom: 80%;

        transform: rotate(200deg);

        position: absolute;
            right: -32%;
            bottom: -44%;
        z-index: -1;
    }

    .classList{
        width: 70.635%;
        margin-left: auto;
        margin-right: auto;
    }

    .nameContainer{
        display: flex;
        width: 48.466%;
    }

    .nameContainer:nth-of-type(1){
        margin-right: auto;
        /* margin-right: 2.618%; */
    }

    .nameContainer:nth-of-type(2){
        margin-top: 16.3%;
    }
    
    .nameHolder{
        /* display: inline; */
        width: 46.835%;
        
        margin-right: auto;
    }

    .nameHolder a{
        margin-bottom: 23%;
    }

    .nameHolder:nth-of-type(2){
        margin-top: 16.9%;
        margin-right: 0%;
    }

    .map{
        position: relative;

        overflow-y: hidden;
    }

    .mapHeading{
        margin-top: 10%;
        margin-bottom: 7%;
    }
    
    .mapImg{
        width: 64.467%;
        padding-bottom: 42.984%;
    }

    .map .schedule{
        margin-bottom: 10%;
    }

    .mapBlueBg{
        width: 75%;
        padding-bottom: 80%;

        transform: rotate(250deg);
        position: absolute;
            left: -17%;
            bottom: -59%;
        z-index: -1;
    }

    .mapGreenBg{
        width: 100%;
        padding-bottom: 71%;

        transform: rotate(180deg);
        position: absolute;
            right: -24%;
            bottom: -31%;
        z-index: -1;
    }

    .mention{
        padding-bottom: 2%;
        font-size: .5vw;
        text-align: right;
    }
}