*{
    box-sizing: border-box;
    margin:0;
    border:0;
    padding:0;
    color:#000013;
    font-family: 'laroLight';
    text-align: justify;

}

.popUpArchive{
    width:100vw;
    height:auto;
    position:absolute;
    top:15vh;
}

html{width:100vw;
min-height:100vh;}

@font-face {
    font-family: 'laroLight';
    src: url('media/Laro\ Light.otf');
}

@font-face {
    font-family: 'laroMedium';
    src: url('media/laromed.otf');
}

a{text-decoration: none;
    color:black;}

.popup-wrapper{position:fixed;
bottom:5%;
right:5%;
width:auto;
height:5vh;
background-color: white;
border-radius:5px;
padding:10px;
animation:bounce 5.2s ease-out;
cursor:pointer;
text-decoration-line: underline;}

#popup-link{
    position:fixed;
bottom:5%;
right:7%;
width:auto;
color:white;
height:auto;
background-color:#ff0020;
border-radius:5px;
font-weight: 900;
padding:10px;
transition:.4s ease;
animation:bounce 5.2s ease-out;
cursor:pointer;
text-decoration: underline ;
}


#popup-link:hover{color:black;
    cursor:pointer;
background-color: white;
transition:.3s ease;
font-weight: 900;}



@keyframes bounce {
	0% {
		transform:translateY(-100%);
	}
	5% {
		transform:translateY(-100%);
	}
	15% {
		transform:translateY(0);
		padding: 4px auto;
	}
	20% {
		transform:translateY(-80%);
	}
	25% {
		transform:translateY(0%);
		padding: 4px auto;
	}
	30% {
		transform:translateY(-70%);
	}
	35% {
		transform:translateY(0%);
		padding: 5px auto;
	}
	40% {
		transform:translateY(-60%);
	}
	45% {
		transform:translateY(0%);
		padding: 5px auto;
	}
	50% {
		transform:translateY(-50%);
	}
	55% {
		transform:translateY(0%);
		padding: 6px auto;
	}
	60% {
		transform:translateY(-30%);
	}
	65% {
		transform:translateY(0%);
		padding: 6px auto;
	}
	70% {
		transform:translateY(-15%);
	}
	75% {
		transform:translateY(0);
		padding: 8px auto;
	}
	80% {
		transform:translateY(-10%);
	}
	85% {
		transform:translateY(0);
		padding: 8px auto;
	}
	90% {
		transform:translateY(-5%);
	}
	95% {
		transform:translateY(0);
		padding: 10px;
	}
	100% {
		transform:translateY(0);
		padding: 10px;
	}
}


.no-overflow{overflow:hidden;}

.colors{
color:#e6d7c4;
color: #7fcaff;
color: #c55560;
color: #ff0020} 

.landing-vid{
    position:fixed;
    width:100vw;
height:90vh;
margin:0;
padding:0;
border:0;
top:10%;
}


.landing-iframe{width:100%;
height:100%;
margin:0;
padding:0;
border:0;}

.lab-link{color:#010123;
font-weight: bold;}

.nav-screen{
    position:fixed;
    z-index: 10000;
    top:0%;
    background-color:#010123;
    width:19%;
    height:0;
    min-height:0vh;
    opacity: 0;
    pointer-events: none;
    transition: 1s ease;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: 2em;
    overflow-x: scroll;
}

.thelab{display:flex;
padding:0;
margin-left:20px;}

.red-text{color:red;}

.red-text:hover{
cursor:pointer;
transition:.3s ease;
font-size:110%;
font-weight: bold;}

.thelab:hover > * {color:#ff0020;
transition: .3s ease;}

.rotate-text{
    transform: rotate(-90deg) translate(-15px);
    transition: .3s ease;
    
    color:white;
    font-weight: lighter;
    font-size: .6em;
    width:0;
}

.archive-wrapper{
    margin:0 auto;
    width:90%;
    height:fit-content;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content: flex-start;
    flex-direction: column;
    background-color: white;
    padding-top:10vh;
}

.coming-soon{
    text-decoration: line-through;
    pointer-events:none;
    color:rgb(139, 136, 136);
}

.navHeader{
    color:white;
    font-weight: bold;
    margin-bottom: .6em;
    font-size:1.6em;
    transition:1s ease;
}


.lat-img{height:auto;
max-width:100%;}

.lat-img-wrap{width:30vw;
background-color:white;
padding:1em;}

.navHeader:hover, .navMid:hover{color:#ff0020;
cursor: pointer;
transition: .3s ease;}



.navMid{
    color:white;
    transition: 1s ease;
    margin-left: 2em;
    font-size:1.5em;
    padding: 0.3em 0;
    margin-bottom: .3em;
}
.navBlock{
    padding:2em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.top-bar, .mid-bar, .bot-bar{width:30px;
margin: 0 20px 6px 20px;
height:2px;
background-color:#010123;
transition: 1s ease;}

#white-bg.top-bar{transform:rotate(45deg) translateY( 6px);
margin:0px,0px,6px,0px}

#white-bg.bot-bar{transform:rotate(-45deg) translateY( -6px)}

.nav-links-nav{
    width:30px;
    height:30px;
    margin-bottom:20px;
}

.latte-dot{
    transform:translateY(-10px)
}

.cross{height:auto;
width:100%;
cursor:pointer;
transform:translateX(-5px)}

#sticky{
    position:sticky;
}
#white-bg{
    background-color: white;
}

.nav-links:hover{
    cursor: pointer;                        
}

.logo{
    position:fixed;
    left:10%;
height:10vh;
margin-left:10vw;
width:fit-content;
display:flex;
align-items: center;}

.logo-img{height:100%;
width:auto;}

.nav{height:10vh;
    min-height:fit-content;
background-color:white;
width:100%;
display:flex;
align-items: center;
justify-content: space-between;
position:fixed;
top:0;
flex-wrap: wrap;
}

.nav-social-c{
    display:flex;
    align-items: center;
    justify-content: center;
}

.nav-social-c > * {padding:.5em 1em;
color: #010123;
transition: .3s ease;}

.nav-social-c > *:hover{
    color: #ff0020;
    transition: .3s ease;
}

.nav-left{
    display:flex;
    align-items: center;
    justify-content: center;
    padding-left:1em;
}

.contact{
    background-color:#ff0020;
    color:white;
    transition: 1s ease;
}

.contact:hover{
    outline-width: 2px;
    outline-style: solid;
    outline-color: #ff0020;
    color: black;
    background-color:white;
    transition:.3s ease;
}

.landing-w{
    padding-top: 10vh;
    width:100%;
    height:fit-content;
    background-image: url('media/background_website.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.n-w{
    padding-top: 10vh;
    width:100%;
    display:flex;
}


.bold{font-weight: 900;}

.bold-l{font-weight:900;
font-size:110%;
text-decoration-line:underline;}

.text-button{
    background-color: #ff0020;
    border-radius: 5px;
    transition: .3s ease;
    padding: .1em 1em;
    color:white;
    font-weight: bold;
}

.calendar-wrapper{
    position:fixed;
    top:10%;
    width:100vw;
    height:90vh;
    margin:0 auto;
}

.calendar-iframe{
    width:100%;
    height:100%;
}

.text-button:hover{
    background-color: #010123;
    color:white;
    transition: .3s ease;
}

.e-img-c{
    height:fit-content;
    width:40%;
}

.e-img{
    width:100%;
    height:auto;
    max-height: 90vh;
}

.e-text{
    overflow: scroll;
    flex-grow: 1;
    max-height: 90vh;
    width:60%;
    padding: 1em;
}

.landing-contact{
    height:100vh;
    width:100%;
    background-color: white;
    background-size: cover;
    background-position: center;
    padding-top:10vh;
}

.archive{
    display:flex;
    width:100%;
    padding:20px 80px;
    min-height:90vh;
    align-items: flex-start;
    justify-content: flex-start;
    background-color:white;
}

.contact-cont{
    width:100%;
    height:100vh;
    color:black;
    background-image: url(./media/cycle2/1.webp);
    background-size: cover;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: 3s ease;
    flex-direction: column;
}

.contact-l{
    text-decoration: none;
    cursor:pointer;
    font-weight: bold;
    color:white;
    font-size:2em;
    transition: .5s ease;
    width:80%;  
}

.shaded-cont{
    background-color: #00001376;
    width:100%;
    height:100vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

.contact-l:hover{
    color:#ff0020;
    transition:.3s ease;
    cursor: pointer;
    font-size:2.5em;
}


.nav-links > *:hover{color: #c55560;
transition: .2s ease;}


.footer{height:10vh;
background-color:white;
width:100%;
display: flex;
color:black;
justify-content: center;
align-items: flex-start;
flex-direction: column;
align-self: flex-end;
padding-left:2em;}

.footer2{height:10vh;
    background-color:white;
    width:100%;
    display: flex;
    color:black;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    align-self: flex-end;
padding-left:2em;}


.about-w{
min-height:100vh;
width:100%;
background-color:#010123;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.team-w{
min-height:100vh;
width:100%;
background-color:#010123;
display:flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}

.white{color:white;}
.header{
    font-size:3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2.4em;
}

.land-btns{width:100%;
display:flex;
align-items: center;
justify-content: center;}

.land-btn{
    padding: .4em 1em;
    margin: 0 5px;
    outline-style: solid;
    outline-width: 1px;
    outline-color: white;
    color:white;
    font-size:2em;
}

.land-btn:hover{background-color:white;
color:#010123;
cursor:pointer;
transition:.3s ease}


.mona-m{width:100%;
height:auto;
}

.archive-title{
    width:100vw;
    text-align: left;
    padding-left: 20vw;
    font-size: 1.4em;
    margin-top:1.4em;

}

.mona{width:300px;
height:fit-content;
color:white;
text-align: left;
font-size: 1em;}

.sml-head{
    font-size: 1.4em;
}

.team-c{
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}

.n-wrapper{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding-top:10vh
}


/* events */ 

.events{width:100%;
height:auto;
display: flex;
justify-content: center;
flex-direction: column;
padding:4em;
background-color:#010123a1; }

.event-cont{
    display:flex;
    align-items: flex-start;
    flex-direction: column;
    width:100%;
    padding:2em;
}

.event-header{
    font-size: 3em;
    font-weight: bold;
    padding-bottom:2em;
}

.event{
    width:100%;
    display:flex;
    margin-bottom:10em; 
    min-height:40vh;
    background-color:white;
    transition: 1s ease;
}

.event-img-c{width:50%;
max-height:80vh}

.event-img{width:100%;
height:auto;
max-height:80vh}



/* contact */

.sc-w{width:60px;
height:fit-content;
transition:3s ease;
margin:.2em 1em;
cursor:pointer}

.sc-w:hover{width:70px;
transition:.3s ease}

.sc{width:100%;
height:auto;
background-color: white;
border-radius: 90%;}

.contact-socials{
    display:flex;
    align-items:center;
    justify-content: center;
   
}

.lab-link:hover{
transition: .2s ease;
color:#ff0020;}


.index-w{
    padding-top:10vh;
    display:flex;
    flex-direction: column;
    width:100%;
    min-height:90vh;
    background-color:#010123ab;
    align-items: center;
    overflow-y: scroll;
}

.index-bg{
    background-image: url('media/Cycles\ 2-min.jpg');
    background-size: cover;
    background-position: center;
}

.index-frame{
    width:40%;
    background-color:rgb(240, 240, 240);
    display:flex;
    padding:1em;
    flex-direction: column;
    cursor: pointer;
    margin: 5em 0;
  
}

.index-img-c{
    width:100%;
    margin:0 auto;
}

.ytvid{width:40%;
height:60vh;
overflow: hidden;
background-color:white;
padding:1em;}


.but-m{
    background-color:#89898a;
    border-radius:5px;
    padding: .3em 2em;
    width:fit-content;
    margin:.5em auto;
    color:white;
}

.but-m:hover{background-color:black;
padding:.4em 2.2em;
transition: .5s ease;}

.index-img{
    width: 100%;
    height:auto;
}

.index-frame:hover{
width:42%;
transition: .8s ease;
}

.index-h{
    font-size:1.3em;
    font-weight: 600;
}

.noverflow{
    overflow: hidden;
}

.lab-img-c{
    width:50%;
    height:fit-content;
}
.lab-img{
    width:100%;
    height:auto;
}

.lab-text{
    padding:1em;
    overflow: scroll;
    width:100%;
    max-height:90vh;
    font-weight:100;
    color:#2e2e2e
}

.invis-full{
    display:none;
}

.normal-text{
    margin:2em auto;
    padding:0;
    padding-top:10vh;
    max-width:60%;
    height:auto;
    font-weight:100;
    color:#2e2e2e;
}

.normal-img{
    width:100%;
    height:auto;}

.normal-img-w{
    width: 50%;
    height:auto;
    margin-top: 1em;
}

.j-w{
    height:auto;
    width:100%;
    display:flex;
    align-items:center;
    justify-content: center;
}

strong{
    font-weight:800;
}

.big{
    font-size:2.5em;
}

.italic{
    font-style: italic;
}

.lab-w{
    display:flex;
    align-items: center;
    justify-content: center;
}


.endeb{
    background-color:#ff0020;
    color:white;
    border-radius: 5px;
    padding:.1em 1em;
    font-family:'laromed';
    align-self: center;
    transition: .3s ease;
}

.endeb:hover{
    transition: .3s ease;
    background-color: #010123;
}

.archive-link{
    opacity:1;
    background-color: #ff0020;
}


.latte-previous{
    transform:rotate(135deg)
}

.latte-next{
    transform:rotate(-45deg)
}
/* mobile */

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

.invis-full{
    display:block;
}


.archive-title{
    padding-left:0;
    font-size: 1.2em;
    text-align: center;
    margin-top: 1em;
    padding-bottom:1em;
}

    #carousel{background-color:white;
    justify-content: center;
align-items:center;
padding:1em;}

.normal-img-w{
    width:100%;
}

.normal-text{max-width:100%;
padding:1em;}

.archive-link{
    opacity: 0;
    pointer-events: none;
}

.archive-wrapper{width:100vw;}


    .lat-img-wrap{width:100vw;
    padding:0}

    .nav-social-c > * {padding:.4em}

    .logo-img{
        display: none;
    }
    .text-button{
        display:block;
        width:100%;
        height:auto;
        text-align: center;
        padding: .3em;
        margin: 1em 0 4em 0;
    }
    .index-frame{
        padding:.5em;
        width:90%;
    }

    .ytvid{
        width:90%;
        padding:.5em;
    }

    .nav-screen{width:100%;}

    .index-frame:hover{
        width:90%;
    }

    .t-img{width:100vw;
    height:auto;
flex-grow: 1;}
.event-header{font-size: 1.5em;}
    .navBlock{padding:1em;}
    .lab-w{flex-direction: column;}
    .lab-img-c{width:100%;}
    .lab-text{width:100%;
    overflow: hidden;
max-height:none;}

    .logo-img{height:60%}
    .header{font-size:2em;}
    .land-btn{font-size:1.3em;}
    .sc-w{width:40px;}
    .sc-w:hover{width:50px;}
    .nav-screen{flex-direction: column;
    flex-wrap: nowrap;
    min-height:none;
overflow-y: scroll;}
.footer2{display:none;}
.contact-l{font-size: 1.5em;
margin-bottom: 2em;}

.event{flex-direction: column;
align-items: center;
padding:1em;}
.event-cont{
    padding:0;
}
.event-img-c{width:100%;}

.events{padding:1em;
padding-bottom:0;}

.event{margin-bottom: 1em;}

.n-w{flex-direction: column;
justify-content: center;
}

.e-text{width:100%;
max-height: none;
overflow: hidden;}

.e-img{
    width:100%;
}

#noverflow{
    overflow: scroll;
}
.e-img-c{width:100%;
background-color: black;}

.event-header{text-align: center;
width:100%;}
  }

.t-img{
    width:70%;
    margin:0 auto;
}

.t-img-c{width:100%;
height:fit-content;
background-color: black;
display:flex;
align-items: center;
;}

.pad-sect{
    width:100%;
    height:20vh;
}

.event:hover{width:101%;
height:101%;
transition:.2s ease;}

.learn-more{
    background-color:  #010123;
    border-radius: 3px;
    padding: 0.2em .6em;
    color:white;
    width: fit-content;
    margin:1.3em 0;
transition: 1s ease;
font-size: 1em;}

    .learn-more:hover{
        background-color:#ff0020;
        color:white;
        transition: .4s ease;
    }


    @media only screen and (min-width: 900px) {
.e-img, .e-img-c{display:none;
width:0;
height:0;}

    }

    .cycle{
        background-color:rgb(228, 228, 228);
        border-radius:5px;
        padding:.4em;
    }