.banner{
    box-sizing: border-box;
    width: 100%;
    padding: 50px;
}

.bannerHeadText>h1{
    text-align: center;
    font-size: 3em;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    color: aquamarine;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.bannerVideo{
    /* position: relative; */
    width: 100%;
    border-radius: 10px;
}

/* .cardHolder */

.eventType{
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
    width: 100%;
}

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

/*controls Buttons*/
.controlButtons{
    box-sizing: border-box;

    color: black;

    display: inline-flex;
    justify-content: space-evenly;

    width: 100%;
    height: 20%;
        
    padding: 20px;
}

.controlButtons>i{
    padding: 20px;
    border-radius: 10px;
    border: 1px solid black;
    cursor: pointer;
}

/*Overlapping title block*/
.titleBlock{
    background: none;
    width: 100%;
}

.titleBlock>h1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: monospace;
    color: white;
    z-index: 1;
}

.sympo,.tech,.ntech{
    text-align: center;
    font-size: 5rem;
    font-family: monospace;
    font-weight: 700;
}

/*mobile Large*/
@media screen and (max-width: 500px) {

    .titleBlock>h1{
        top: 50%;
    }

    .sympo,.tech,.ntech{
        font-size: 1.7rem;
    }

    .banner{
        padding: 10px;
    }
}

@media screen and (max-width: 375px){
    
    .titleBlock>h1{
        top: 45%;
    }

    .sympo,.tech,.ntech{
        font-size: 1.5rem;
    }

    .banner{
        padding: 10px;
    }

}

#ntechCardHolder{
    display: none;
}

#techCardHolder{
    display: none;
}

#workshopCardHolder{
    display: none;
}

/*Block Quote*/
.blockquote>p{
    font-size: 3.5rem;
}

#link1,#link2,#link3,#link4{
    font-size: larger;
}


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

    .navLogo{
        height: 70px;
        width: 70px;    
    }

    a{
        margin: 20px;
    }

}

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

    a{
        margin: 50px;
    }

}

.cardMain{
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;

    margin: 30px;
    
    box-shadow: 5px 10px black;

    /*only takes 25% of the page size*/
    max-width: auto;

    border-radius: 25px;
    border: 5px solid black;
}

@media only screen and (max-width: 700px) {
    .cardMain{
      flex-wrap: wrap;
      /* background-color: tomato; */
    }
}

.mainIcon{
    height: 100%;
    display: flex;
    justify-content: center;
}

.mainIcon>img{
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}