* {box-sizing: border-box}
nav {
    overflow: hidden;
    background-color: blue;
    margin-bottom:20px;
}

nav li a {
    float: left;
    display: block;
    color: #F2F2F2;
    text-align: center;
    padding:10px;
    text-decoration: none;
}

nav li{
    margin-left:-40px;
}

li a:visited{
    color:yellow;
}

nav a:hover{	
    
    background-color: #DDD;
    color: black;
}
p img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}
h1{
    text-align:center;
}

h1, h2, h3, h4{
    font-family: Arial, Helvetica, sans-serif;
}

nav li{
    display:inline;
    padding-right: 25px;
}

#wrapper{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #F3F3F9;
    padding-right: 0;
    padding-left : 0;
    box-shadow: 5px 10px rgb(59, 55, 55);
   
}
body{
    background-color:rgba(255, 217, 0, 0.932);
    background-image: url(../images/pstcc2.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    display:block;
    
}
main{
    font-size:15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
main a{
    color:blue;
}

main a:visited{
    color:red;
}

main a:hover{
    color:purple;
}

footer{
    text-align:center;
    background-color:blue;
    color:white;
    clear: both;
}


footer a{
    color:rgba(255, 217, 0, 0.932);
}

#contact{
    background-color: gray;
    float: right;
    width: 20%;
    margin-right: 10px;
    text-align:center;
}

#format{
    width: 60%;
    float: left;
    
}

.border{
    border-radius:5px;
}


.format{
    padding-left:10px;
}

.tab{
    overflow: hidden;
    border: 1px solid black;
    background-color: gray;
    
}

.tab button{
    background-color: gray;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.5s;
    font-size: 15px;
    border: 1px solid black;
}

.tab button:hover{
    background-color: blue;
}

.tab button.active{
    background-color:orange;
}

.tabcontent{
    
    padding: 12px;
    border: 1px solid black;
    border-top: none;
    
}

.tab_format{
   
    width: 50%; 
    margin-right:auto;
    padding-right:10px;
    padding-left:40px;
 
}

.tab_format_course{
   
    width: 50%; 
    margin-right:auto;
    padding-right:10px;
    padding-left:40px;
    text-align:left;
    
}

.tab_format h3{
    text-align:center;

}

table{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

td, th{
    padding: 10px;
    text-align: center;
}
figcaption{
    font-size: 12px;
    background-color: #ddd;
    font-weight:bold;
    font-style:italic;
}
iframe{
    margin-right:auto;
    margin-left:auto;
    display:block;
}


#home_layout p{
    padding-left:20px; 
    float:left; 
    width:40%;
}

#home_layout figure{
    float:right;
}

#vanish{
    display:none;
}

#work_format{
    padding-left:25px; 
    padding-right:15px; 
    float:left; 
    width:60%;
}

#exhibit{
    float:right; 
    margin-left:-200px;
}

#course{
    clear:both;
    float:right; 
    width:60%; 
    padding-right:30px;
}

.fig_format{
    float:right;
    width:30%;
}

.professors{
    display:none;
}

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

    main div p{
        width:100%;
        clear:both;
    }

    #student_work h1{ 
        text-decoration:underline; 
        padding-top:200px;
    }
   
    #student_work iframe{ 
        width:80%;
    }

    #student_work figure img{
        float:left;
        clear:both;
        margin-right:auto;
        margin-left:auto;
    }

    #student_work figure figcaption{
        clear:both;
    }

    #exhibit_image{
        display:none;
    }

    #home_layout p{
        padding-left:20px;
        padding-right:20px;
        width:100%;
    }

    #home_layout figure{
        margin-right:auto;
        margin-left:auto;
    }

    .tab{
        float:left;
        border: 1px solid rgb(129, 116, 116);
        background-color: gray;
        width:20%;
        height:250px;
        
    }
    
    .tab button{
        display:block;
        background-color: gray;
        text-align:left;
        outline: none;
        cursor: pointer;
        padding: 5px 5px;
        transition: 0.5s;
        font-size: 15px;
        border: 1px solid black;
        width:100%;
    }
    
    .tabcontent{
        float:left;
        padding: 12px;
        border: 1px solid black;
        width:80%;
        height:auto;  
    }
    

    .course{
        width:90%;
        text-align:left; 
        clear:both;
        padding-right:10px;
        padding-left:10px;
        padding-bottom:20px;
    }

    .tab_format_course{
        width: 90%; 
        padding-right:10px;
        padding-left:10px;
    }

    .tab_format{
        width:90%;
    }

    .tab_format figure, #fig_format{
        width:100%;
        text-align:center;
    }

    .tabcontent h3{
        text-align:center;
    }

    .fig_format figcaption{
        width:80%;
        display:inline-block;
    }



#work_format{
    padding-left:25px; 
    padding-right:15px;  
    width:100%;
}

td, th{
    font-size:10px;
    padding:2px;
}

}


@media only screen and (max-width: 805px){
    .tab{
        float:left;
        border: 1px solid rgb(129, 116, 116);
        background-color: gray;
        width:20%;
        height:300px;
        overflow:show;
    }

    
    table{
        display:none;
    }


    .fig_format{
        display:none;
    }
}

@media only screen and (max-width: 743px){
    #student_work h1{ 
        text-decoration:underline; 
    }

    table{
        display:none;
    }

    
}

@media only screen and (max-width: 700px){
    .tab{
        float:left;
        border: 1px solid rgb(129, 116, 116);
        background-color: gray;
        width:100%;
        height:235px;
        overflow:show;
    }

    .tabcontent{
        width: 100%;
    }

    .tab button{
        padding: 10px 10px;
        width:100%;
    }


}

@media only screen and (max-width: 646px){
    #home_layout figure img{
        width:200px;
        height:200px;
    }

    #exhibit {
        margin-right:auto;
        margin-left:auto;
    }



    #contact{
       display:none; 
    }
}

@media only screen and (max-width: 555px){
    #student_work h1{ 
        text-decoration:underline; 
        padding-top:400px;
    }

    #student_work figure img{
        width:250px;
        height:250px;
    }


    li a{
        width: 90%;
    }
}