@charset "UTF-8";

*{
   margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    
}

nav{
    
    height: 90px;
    display: flex;
    justify-content: space-around;
    align-items:center;
    min-height: 12vh;
    padding-top: 70px;
    background-color:none;
   
 
}

#burger-btn {
	
	display: none;
	
} 

ul{
    
    list-style-type: none; 
    display: flex;
	justify-content: flex-start;
    margin-left: -250px;
    
}

li a{
    font-family: 'Poppins', sans-serif;
    color: black;
    font-weight: bold;
    font-size: 1.7rem;
    text-decoration: none;
    padding: 20px;
    
    
}


nav li:nth-child(1) a:hover {
    color:rgba(100,22,152,1.00)
}

nav li:nth-child(2) a:hover {
    color:rgba(89,144,69,1.00)
}

nav li:nth-child(3) a:hover {
    color: rgba(203,145,33,1.00)
}

nav li:nth-child(4) a:hover {
    color:rgba(56,129,167,1.00)
}

nav li:nth-child(5) a:hover {
    color:rgba(172,88,159,1.00)
}



h1{                                        
    font-family: 'Poppins', sans-serif;
    font-size: 10rem;
    padding-top: 20%;
    margin-left: 5%;
    line-height: 10rem;
  
}


h2{
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 2rem;
    font-weight:bold;
    padding-top: 20px;
    padding-bottom: 1%;
    line-height: 2rem;
    
    
}

h3{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 2rem;
    margin-bottom: 0%;
    padding-bottom: 0px;
    
}

h4{
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    padding-top: 5%;
    margin-left: 0%;
    line-height: 4rem;  
    
}


body{

    
}



footer{                           
    height: 80px;
    width: 100%;

    
}

.burger{
    padding: 30px;
    align-content: flex-start;
    display: none;
  
}

.burger div{
    
    width: 40px;
    height: 5px;
    background-color: black;
    margin: 5px;
    align-content: flex-start;
}

/*.tmcc-logo{
    display: flex;
    justify-content: flex-end;
    padding-bottom: 40px;
    
}  <-- this is saved css for working 1st version of logo that didn't have a rollover funness*/  

   .tmcc-logo {
        width: 250px;
        height: auto;
       padding-bottom: 20px;
        position: relative;
        display: inline-block;
    }
    .tmcc-logo .img-green {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .tmcc-logo:hover .img-green {
        display: inline;
    }



.background-image{
    
    background-image:url("../images/bg-tmcc-mts-bw.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
  
}



    

hr {
    height:2px;
    border-width:0;
    background-color:black;
    margin-bottom: 1%;
    margin-top: -1.3%;
    }







/* HOME */


.landing-page-flex-container1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    
}

.image-graphic{
    max-width: 29%;
    max-height: auto;
    margin-left: 20%;
    margin-top: 1%;
}

.image-arts{
    background-color:none;
    max-width: 29%;
    max-height: auto;
    margin-left: 54%;
    margin-top: -12%;
}

.image-media-tech{
    max-width: 40%;
    margin-left: 45%;
    margin-top: 35;
}

.landing-page-flex-container2{
    display: flex;
    flex-direction: column;
    alight-content: center;
    
}


.overview-text{  
    
  
    background-color:rgba(231,224,224,0.62);
    border-bottom-right-radius: 110px;
    max-width: 45%;
    max-height: auto;
    font-size: 1.4rem;
    font-display: wrap;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4rem;
    padding: 20px;
    margin-left: 38%;
    margin-top:-35%;
 
    
}

.page-title{
    
    margin-left: 10%;
    margin-bottom: 5%;
  
}




/* DEGREES */

.background-image-green{
    
    background-image:url("../images/bg-tmcc-mts-green.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
    
}


.page-rectangle-green{                
    
    float: left;
    width: 200px;
    height: 480%;
    background-color:rgba(89,144,69,0.50); 
    margin-left: 10%;
    margin-top: -16%;
    }

.degrees-container{
    
    display: flex;
    flex-direction: column;
    vertical-aligh: top;
    
}

.degree-chart{
    max-width: 70%;
    min-width: 50%;
    margin-left: 10%;
    
}

.degree-text{
    
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align:left;
    flex-wrap: none;
    margin-left: 5%;
    margin-right: 10%;
    margin-top: 5%;
    padding-top: 2%;
    

}

.degree-text p{
    margin-left: 8%;
    
}

#degree-list{
    display:block;
    margin-left: 10%;
    padding-top: 1%;
    list-style-type: square;
    
    
}

#degree-list-last-child{
    padding-bottom: 5%;
}

        
        




/* COURSES */

#courses-h3{
    
    padding-bottom: 20px;
    font-weight: 100;
    font-size: 2rem;
    
}

#courses-horizontal-line-break1{
    
    padding-top: 0px;
    padding-bottom: 20px;
}

#courses-horizontal-line-break2{
    
    padding-top: 0px;
    padding-bottom: 20px;
}

#courses-horizontal-line-break3{
    
    padding-top: 0px;
    padding-bottom: 20px;
}

#courses-horizontal-line-break4{
    
    padding-top: 0px;
    padding-bottom: 20px;
}



.background-image-orange{
    
    background-image:url("../images/bg-tmcc-mts-orange.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
   
    
}

.page-rectangle-orange{                
    
    float: left;
    width: 200px;
    height: 1150%;
    background-color:rgba(203,145,33,0.50);
    margin-left: 10%;
    margin-top: -15%;
    
}

.courses{
    display: flex;
    flex-direction: column;
    flex-wrap: none;
    justify-content: flex-start;
    align-content: flext-start;
    background-color:rgba(97,97,97,0.20);
    margin-right: 10%;
    margin-top:-10%;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 10%;
    padding-bottom: 5%;
}

.courses h2{
    
    background-color: rgba(203,145,1.0);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.courses p{
    
    padding-top: 5px;
}


.courses-term-offered{

    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2rem; 
    background-color:none;
    padding-bottom: 10px;
    
}









/* FACULTY */

.background-image-blue{
    
    background-image:url("../images/bg-tmcc-mts-blue.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
}


.page-rectangle-blue{                
    
    float: left;
    width: 200px;
    height: 600%;
    background-color:rgba(56,129,167,0.50); 
    margin-left: 10%;
    margin-top: -15%;
    }

.bio-container-top{
    
    display: flex;
    justify-content: flex-start;
    margin-left: 25%;
    margin-bottom: 0%;
}



.bio-opening-text{
    
    min-width: 30%;
    max-width: 75%;
    text-align:justify;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 2rem;
    margin-bottom: 0;
}

.bio-opening-text h2{
    
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    

    
}

#faculty-first-paragraph{
    
    padding-bottom: 20px;
    font-weight: 100;
    font-size: 2rem;
    
}


.bio-container-bottom{
    
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-left: 0%;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 1.5rem;
    max-width: 70%;
}


.bio-headshot-text img{
    padding: 5%;
    
}

.bio-headshot-text{
    
    margin-left: 5%;
    margint-right: 5%;
    margin-top: 5%;
    margin-bottom: 0%;
}


.bio-headshot-text h2{
     
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    text-align: center;
    padding: 15px;
    
    
}

.bio-headshot-text h3{
     
    
    font-size: 1.7rem;
    text-align: center;
    padding: 0px;
    max-width: 600px;
    margin-left: 0%;
    margint-right: 0%;
    margin-top: 5%;
    
    
}

.bio-headshot-text p{

    max-width: 600px;
    min-width: 200px;
    height: auto;
    text-align: justify;
    padding: 15px;

    
}

.bio-headshot-text img{
    
    max-width: 100%;
    align-item: center;
}












/* STUDENT GALLERY */

.background-image-pink{
    
    background-image:url("../images/bg-tmcc-mts-pink.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
 
    
}

.page-rectangle-pink{                
    
    float: left;
    width: 200px;
    height: 600%;
    background-color:rgba(172,88,159,0.50);  
    margin-left: 10%;
    margin-top: -15%;
        
}

.gallery-container{
    
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 0%;
    margin-left: 10%;
    margin-right: 10%;
    
}

.gallery-container img{
    padding:20px;
}
        
    

    








/* RESPONSIVE STUFF */


@media screen and (max-width: 1600px){
    li a{
        padding: 10px;
    }
    
    .tmcc-logo img{
        height: auto;
        min-width: 80%;
    }
    
    ul{
        margin-left: 100px;
    }
    
    .image-graphic{
    max-width: 45%;
    max-height: auto;
    margin-left: 10%;
    margin-top: 0%;
    }

    .image-arts{
        max-width: 35%;
        max-height: auto;
        margin-left: 50%;
        margin-top: -10%;
    }

    .image-media-tech{
        margin-left: 55%;
        margin-top: 0%;
    }


    .overview-text{  
        max-width: 40%;
        max-height: auto;
        font-size: 1.4rem;
        font-display: wrap;
        line-height: 1.8rem;
        padding: 20px;
        margin-left: 45%;
        margin-top:-55%;

     }
    
}

@media screen and (max-width: 1200px){
    ul{
        margin-left: 50px
    }
    
     .tmcc-logo img{
        height: auto;
        min-width: 200px;
    }
    
    .image-graphic{
        max-width: 45%;
        height: auto;
        margin-left: 10%;
        margin-top: 5%;
    }

    .image-arts{
        max-width: 45%;
        max-height: auto;
        margin-left: 50%;
        margin-top: -10%;
    }

    .image-media-tech{
        margin-left: 55%;
        margin-top: -1%;
    }


    .overview-text{  
        max-width: 50%;
        max-height: auto;
        font-size: 1.2rem;
        font-display: wrap;
        line-height: 1.2rem;
        padding: 20px;
        margin-left: 38%;
        margin-top:-60%;

     }
    
}

@media screen and (max-width: 1100px){
   
    
    
    ul li a {
        font-size:1.3rem;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .tmcc-logo img{
        height: auto;
        min-width: 200px;
        margin-right: 10%;
        
    }
    
      .image-media-tech{
        margin-left: 55%;
        margin-top: 2%;
    }


    .overview-text{  
        max-width: 50%;
        max-height: auto;
        font-size: 1.2rem;
        font-display: wrap;
        line-height: 1.2rem;
        padding: 20px;
        margin-left: 38%;
        margin-top:-60%;

     }
    
    
}

@media screen and (max-width: 1150px){
    
        .overview-text{  
        max-width: 50%;
        max-height: auto;
        font-size: 1.2rem;
        font-display: wrap;
        line-height: 1.2rem;
        padding: 20px;
        margin-left: 38%;
        margin-top:-65%;

     }
    
    
}


@media screen and (max-width: 768px){   
    
    body{
        overflow-x: hidden;
    }
    
    nav{
        margin-bottom: 10px;
    }
    
    h1{                                        
    font-size: 6rem;
    line-height: 5rem;
    padding-top: 35%;
    margin-top:0%;
    margin-left: 16%;
    
   
}
    
    h4{
    font-size: 3rem;
    padding-top: 2%;
    margin-left: 0%;
    line-height: 3rem;
    
    
}
    
      .tmcc-logo img{
        height: auto;
        width: 100px;
        
    }
 

    
    .background-image-green{
        
        height: 30vh;
    }
    
    .background-image-orange{
        
        height: 30vh;
    }
    
    .background-image-blue{
        
        height: 30vh;
    }
    
    .background-image-pink{
        
        height: 30vh;
    }
    
    .page-rectangle-green{
         width: 100px;
        height: 165%;
        margin-left: 10%;
        margin-top: -20%;


        }

    .page-rectangle-orange{

        width: 100px;
        height: 3650%;
        margin-left: 10%;
        margin-top: -20%;

        }

    .page-rectangle-blue{
        width: 100px;
        height: 235%;
        margin-left: 10%;
        margin-top: -20%;

        }

    .page-rectangle-pink{

        width: 100px;
        height: 1700%;
        margin-left: 10%;
        margin-top: -20%;

        }
    
    
    .burger{
        display: block;
        cursor: pointer;
    }
    
    .burger:hover{
		/*background-color: lime; <-- note to self: turn this on to double check navigation respoce */
        
    }
    
    
    .nav-links {
        
        position: absolute;
        background-color: white;
        left: 0px;
        height: 19vh;
        top: 6vh;
        display: block;
        flex-direction: column;
        align-items: center;
        justify-content: center;
		margin-left: -250px;
		margin-top: 55px;
        
    }
	
	nav input:checked ~ div .nav-links {
		transform: translateX(250px);
        transition: transform 0.5s ease-in;
	} 
    
      
    .image-graphic{
        max-width: 55%;
        height: auto;
        margin-left: 5%;
        margin-top: 4%;
        padding-top: 10%;
    }

    .image-arts{
        max-width: 53%;
        max-height: auto;
        margin-left: 28%;
        margin-top: -2%;
    }

    
    
    .image-media-tech{
        max-width: 58%;
        margin-left: 33%;
        margin-top: 0%;
    }


    .overview-text{  
        max-width: 55%;
        max-height: auto;
        font-size: 1rem;
        font-display: wrap;
        line-height: 1.1rem;
        padding: 20px;
        margin-left: 35%;
        margin-top:-100%;

     }
    

      #page-title-degree{
        font-size: 4.5rem;
          padding-top: 40%;
    }
    
    
    .degree-chart{
    
    margin-left: -15%;
    margin-top: 0%;
    min-width: 80%;
    max-width: 100%;
    
    
}
    
    .degree-text{
        margin-left: -15%;
        margin-right: 20%;
        font-size: 1rem;
        line-height: 1.2rem;
        
    }
    
    .degree-text h3{
        font-size: 1.2rem;
        line-height: 1.2rem;
    }
    
    
  
    
    .courses{
        
        margin-top: 0%;
        margin-left: -20%;
        font-size: 1rem;
        
    }
    
    .courses h2{
        font-size: 1.8rem;
    }
    
    #courses-h3{
        font-size: 1.3rem;
    }
    
    
    
      .bio-container-bottom{
          flex-direction: column;
          margin-left: 10%;
        
    }
    
    
    .bio-opening-text h2{
        font-size: 3rem;
       line-height: 3rem;
        margin-top: 10%;
        text-align: left;
    }
    
      .bio-opening-text p{
        font-size: 1.5rem;
        
    }
    
 

    
   
    
  
  
    
}

@media screen and (max-width: 390px){   
    
    .tmcc-logo img{
        height: auto;
        min-width: 100px;
        margin-right: 10%;
        
    }
 
    
   .background-image-green{
        
        height: 20vh;
    }
    
    .background-image-orange{
        
        height: 20vh;
    }
    
    .background-image-blue{
        
        height: 20vh;
    }
    
    .background-image-pink{
        
        height: 20vh;
    }
    
    .page-rectangle-green{
         width: 100px;
        height: 165%;
        margin-left: 10%;
        margin-top: -20%;


        }

    .page-rectangle-orange{

        width: 100px;
        height: 3650%;
        margin-left: 10%;
        margin-top: -20%;

        }

    .page-rectangle-blue{
        width: 100px;
        height: 235%;
        margin-left: 10%;
        margin-top: -20%;

        }

    .page-rectangle-pink{

        width: 100px;
        height: 1700%;
        margin-left: 10%;
        margin-top: -20%;

        }
    
      .tmcc-logo img{
        height: auto;
        min-width: 10%;
        max-width: 60%;
        margin-right: 10%;
        margin-top: 10%;
      
    }
    
 
     .image-graphic{
        max-width: 65%;
        height: auto;
        margin-left: 10%;
        margin-top: 0%;
    }

    .image-arts{
        max-width: 55%;
        max-height: auto;
        margin-left: 30%;
        margin-top: -4%;
    }

    
    
    .image-media-tech{
        max-width: 65%;
        margin-left: 15%;
        margin-top: 10%;
    }


    .overview-text{  
        max-width: 80%;
        max-height: auto;
        font-size: .7rem;
        font-display: wrap;
        line-height: .8rem;
        padding: 20px;
        margin-left: 10%;
        margin-top: 0%;

     }
    
    h1{                                        
    font-size: 4rem;
    line-height: 4rem;
    padding-top: 30%;
    margin-top: 10%;
    margin-left: 5%;
        
    }
    
   
       
    
    .courses{
        margin-left: -20%
        
    }
    
    
    

    
 
    
}