body {
    margin: 0;
    font-family: 'Abel', sans-serif;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    background-color: #fff;
    /*position: fixed;*/
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.myheight {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    
}
.code{
    margin-left:20px;
    font-family:monospace;
    white-space: pre;
    font-size:smaller;
}
#myhead {
    font-family: 'Abel', sans-serif;
    font-size: 5vw;
    width: 100%;
    text-align: center;
    line-height: 5vw;
    position: fixed;
    top: 50%;
    height: 5vw;
    vertical-align: middle;
    margin-top: -2.5vw;
    left: 0;
    letter-spacing: 1vw;
    z-index: 9999;
    color: #fff;
}
.wave {
    position: fixed;
    top: 0%;
    left: 0;
    width: 100%;
    height:100%;
    background: none;
    z-index: 999;
    
}

.vertwave {
    position: absolute;
    left: 0;
    top: 50%;
    background-color: rgb(225, 220, 200);
    border: solid;
    z-index: 99;
}

.spacer {
    height: 50%;
    position: relative;
    background: none;
}



/*-----------------------------*/

#preloaded{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background-color: #232323;
    z-index:9999;
    display:none;
}
#page{
    position: fixed;
    position: relative;
}
#nameloader{
    font-family: 'Roboto Slab', serif;
    font-size:30vw;
    position: absolute;
    width:100%;
    top:50%;
    margin-top:-30vw;
    color:#8d706a;
    text-align:center;
    
}
#hide{
    visibility: hidden;
    
}
#hide img{
    width:20px;
}
@media (max-width:870px) {
    /*  
    header img{
        width:100%;
    }
    #bgbd,img#bgbottom{
        width:100%;
    }
    */
    header{
        height:100%;
        position: relative;
        
    }
  
    #page header>div {
        position: absolute;
        top: 20%;
        right: 10vw;
        
        z-index: 3;
        
    }
    #me {
        z-index: 3;
        font-family: 'Roboto Slab', serif;
        font-weight: 300;
        text-transform: uppercase;
        font-size: 10vw;
        letter-spacing: 0.2vw;
        text-align: left;
        color: #8d706a;
        position: relative;
        width: 75vw;
        
    }
    #me #first {
        position: relative;
        top: 4vw;
        font-size: 4.7vw;
        z-index: 3;
    }
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    overflow-y: scroll;
    background-color: #fff;
}

a {
    color: black;
}

#cover {
    background-color: #fff;
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display:none;
}

#page {
    height: 100%;
    width: 100%;
    z-index:99999;
   
}

header {
    position: relative;
    z-index: 2;
    width: 100%;
    width: 100%;
    margin: auto;
    height: 100%;
    background: none;
    background-image: url(webimages/bgvert.jpg);
    background-position: bottom left;
    min-height: 700px;
    background-repeat: repeat-x;
}

header img {
    position: absolute;
    bottom: 0;
    right: 0;
}

header>div {
    position: absolute;
    top: 20%;
    right: 149px;
    z-index: 3;
}

#me {
    z-index: 3;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 10vw;
    letter-spacing: 0.2vw;
    text-align: left;
    color: #8d706a;
    position: relative;
    width: 75vw;
}

#me #first {
    position: relative;
    top: 4vw;
    font-size: 4.7vw;
    z-index: 3;
}

#sub {
    color: #8d706a;
    margin: auto;
    text-align: left;
    font-size: 1.5vw;
    font-family: 'Roboto', sans-serif;
    position: relative;
    top: -2.5vw;
}

#last {
    position: relative;
    z-index: 2;
}

#rev {
    font-family: "Roboto", sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#rev span {
    position: absolute;
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    bottom: 5px;
    ;
    /* color:#f4f4f4;*/
}


#rev span#h {
    left: 30.1vw;
    /*color:#dedede;*/
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    color: #e8e8e8
}

#w {
    left: 38.2vw;
    /*color:#dddddd;*/
    color: #f0f0f0;
}

#rev span#i1 {
    left: 48.1vw;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    /*color:#dcdcdc;*/
    color: #f2f2f2;
}

#rev span#n {
    left: 51vw;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    /*color:#dbdbdb;*/
    color: #f4f4f4;
}

#rev span#s {
    left: 58.5vw;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    /* color:#dadada;*/
    color: #f6f6f6;
}

#rev span#k {
    left: 64.9vw;
    bottom: .1vw;
    /*color:#d9d9d9;*/
    color: #f7f7f7;
}

#rev span#i2 {
    left: 72.1vw;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    /*color:#d8d8d8;*/
    color: #f9f9f9;
}

nav {
    text-align: center;
}

.sectitle {
    width: 100%;
    margin: auto;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 8vw;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    letter-spacing: 2.2vw;
    color: #7c7470;
    bottom: 0px;
    opacity: 1;
    padding-top:200px;
    font-size:10vw;
    letter-spacing: -.5vw;
    text-align:left;
    line-height:15vw;
    left:1.2%;
    margin-bottom:0;
    
}
#students .sectitle{
    left:auto;
    right:2.5%;
    text-align: right;
    
}
#mine {
    text-align: center;
    background:none;
    position: relative;
}

#students {
    margin-top:200px;
    text-align: center;
    position: relative;
    top: 0vw;
}

#students .materials {
    color: #393030;
    font-size: 3vw
}

main {
    text-align: right;
    position: relative;
}

section {
    padding-bottom: 10vw;
}

#bgbd {
    width: 100%;
    overflow: hidden;
    text-align: right;
    background-image: url('webimages/lrepaet.jpg');
    ;
}

#bgbottom {
    position: relative;
    margin-top: -1px;
    background-color: #1c1818;
    float: right;
}
.makefixed{
    position: fixed;

}

.item {
    display: inline-block;
    width: 19%;
    vertical-align: top;
    margin: 5px 0;
    margin-top: 0px;
    position: relative;
    opacity: 1.0;
}
.hoveroverlay{
    height:90%;
    width:100%;
    background-color:#fff;
    position: absolute;
    z-index: 999;
    top:5%;
    left:0%;
    opacity:0;
    cursor:pointer;
}
.title {
    font-size: 1.6vw;
    margin-bottom: 5px;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    padding-top: 5px;
    
    display: none;
}

.images img {
    width: 100%;
}

.images {
    /*height:200px;;*/
    overflow: hidden;
}

.desc {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #000;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    cursor: pointer;
        overflow:hidden;

}

.materials {
    position: absolute;
    top: 150%;
    width: 70%;
    left: 15%;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;
    font-size: 1.2vw;
    
    opacity: 0.0;
    text-transform: lowercase;
    color: #222;
    z-index:9999;
    margin-top:-.7vw;
}

.twoline{
    top:50%;
    margin-top:-1.4vw;
    
}
.desc:hover {}

.desc:hover .materials {}

.words {
    width: 80%;
    height: 80%;
    margin: auto;
    position: relative;
    top: 10%;
    display: none;
}

#overlay {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(230, 230, 230, 0.95);
    z-index: 9999999999;
    display: none;
         
 
}

#og {
    overflow-x: hidden;
    position: relative;
    top: 30px;
    width: 100%;
    background-color: rgba(230, 230, 230, 0.95);

}

#ogimages {
    width: 49%;
    min-height: 100%;
    position: relative;
    display: inline-block;
    top: 0px;
    left: 0;
    vertical-align: top;
    
}

#ogimages img {
    width: 100%;
}

#ogimages iframe {
    width: 100%;
}

#ogdesc {
    vertical-align: top;
    width: 49%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 2%;
    position: relative;
    display: inline-block;
}

#ogtitle {
    font-size: 5.5vw;
    width: 80%;
    left: 10%;
    position: relative;
    text-transform: uppercase;
    line-height: 5vw;
    font-family: 'Roboto Slab', serif;
    text-align: right;
}

#ogtitle span {
    display: block;
}

#ogmaterials {
    font-size: 1.5vw;
    width: 80%;
    left: 10%;
    position: relative;
    text-transform: lowercase;
    line-height: 1.3vw;
    font-family: 'Roboto Condensed', serif;
    text-align: right;
    margin-top: 1vw;
}

#ogwords {
    font-size: 1.2vw;
    width: 80%;
    left: 10%;
    position: relative;
    font-family: 'Roboto', serif;
    text-align: justify;
    margin-top: 1vw;
}

nav {
    position: fixed;
    z-index: 11;
    background-color: rgba(230, 230, 230, 0.95);
    top: 0;
    right: 5%;
    width: 40%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    overflow: hidden;
}

nav div {
    display: inline-block;
    cursor: pointer;
    line-height: 100%;
}

nav img {
    height: 60%;
    margin-top: 7px;
}

.otherimages {
    display: none;
}
.ogonly{
    display:none;
}
#og .ogonly{
    display:block;
}
#og #ogstudents{
    font-size:10vw;
    position: relative;
    right:36vw;
    top:5vw;
    line-height:9vw;
    text-align:left;
    
}
#og .otherimages {
    display: block;
}

#og img.noshow {
    display: none;
}

#og .excerpt {
    display: block;
    margin-top: 20px;
    padding-bottom: 10px;
    margin-top: 10px;
}

#og .excerpt #tit {
    font-weight: 900;
    margin-left: 20px;
}

.excerpt {
    display: none;
}

iframe {
    width: 100%;
    height: 350px;
}

iframe#matchiframe {
    overflow: hidden;
    height: 100%;
}

div.excerpt {
    position: relative;
    padding-left: 20px;
}

#sg {
    text-align: justify;
    font-size: 12px;
    font-family: serif;
    width: 300px;
}

#og .play {
    position: absolute;
    z-index: 9;
    bottom: 10px;
    right: -15px;
    width: 30px;
    cursor: pointer;
    height: auto;
}

.gif {
    position: relative;
    
}
img#g1,
img#g2,
img#g3,
img#g4
{
    position: absolute;
    top:-1px;left:-1px;
    width:20%;
    border:solid #bbb 3px;
    background-color:#fff;
}

.classname {
    padding-top: 0.3vw;
    display: none;
}

#og div.classnam {
    display: block;
}

#og img {
    margin-bottom: 10px;
}

div.four {
    width: 19%%;
}

div.three {
    width: 19%;
}

#students .materials {
    font-size: 1.2vw;
}

.subsection {
    font-family: 'Roboto Condensed', serif;
    font-size: 3vw;
    display: inline-block;
    width: 19%;
    position: relative;
    text-transform: uppercase;
    color: #e3e3e3;
    margin-bottom: .2vw;
    margin-top: 4.0vw;
}

.gallery {
    
    position: relative;
    margin-top:-3vw;
}