#main{
	width:100%;
}


h1, h2, h3, a {
	font-family:  "Larish Alte Semibold", Larish, serif;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    color:#336666;
    text-decoration:none;
    hyphens:none;
}

h1{
    font-family:  "Larish Alte Semibold", Larish, serif;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    color:#336666;
    font-size: 4.8vw;
    margin-top:0;
    margin-bottom:0;
    hyphens:none;
}

p{
    font-family:  Arial;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    color:#336666;
    background-color:transparent;
    font-size:13px;
    z-index: 1000;
    text-align: right; 
    padding-top:0px;
    margin-top:0px;
    padding-bottom:120px; 
    hyphens:none;
}

#media a { 

    font-family:  Arial;
    text-decoration: underline;
    color:#336666;

}

#media a:hover { 
    font-family:  Arial;
    

}


/*-----------------------------------------nav---------------------------------------------------*/



#bknav {
    position:fixed;
    z-index: 0;
    margin:24px 20px 0px 24px;
}


#bknav a{
    text-decoration:none;
    border:none;
    background-color:transparent;
    font-size:4.8vw;
    outline:0;
    font-family:  "Larish Alte Semibold", Larish, serif;
    color:#336666;
    line-height:118%;
    z-index: 0;
    opacity:100;
    padding-left: 0.1em;
}

#nav {
    position:fixed;
    display:inline-block;
    z-index: 1000;
    margin:24px 20px 0px 24px;
}

#nav a{
    text-decoration:none;
    border:none;
    background-color:transparent;
    font-size:4.8vw;
    outline:0;
    z-index: 1000;
    font-family:  "Larish Alte Semibold", Larish, serif;
    opacity:0;
    line-height:118%;  
    padding-left: 0.1em;
}

.yellow:hover { 
    cursor: pointer;
    color:yellow!important;
    z-index: 1000;
    opacity:100;
    -webkit-text-stroke-width: 0.5px!important;
   -webkit-text-stroke-color: yellow!important;
}

#nav a:hover { 
    cursor: pointer;
    color:white;
    z-index: 1000;
    opacity:100;
    -webkit-text-stroke-width: 0.5px;
   -webkit-text-stroke-color: white;
}



#nav a:active {
    opacity:100;
    color:white;
    z-index: 1000;
           -webkit-text-stroke-width: 0.02vw;
   -webkit-text-stroke-color: white;
}


/*-----------------------------------------pages---------------------------------------------------*/


body{
    margin:0;
}

#navblock {
    z-index: 0;
    margin:24px 20px 0px 24px;
    position: relative;
    display: inline-block;
}
#navblock a{
    text-decoration:none;
    border:none;
    background-color:transparent;
    font-size:4.8vw;
    outline:0;
    z-index: 0;
    font-family:  "Larish Alte Semibold", Larish, serif;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    opacity:0;
    line-height:118%; 
    position: relative;
    display: inline-block;
        padding-left: 0.1em;
}

#media {
    z-index: 100;
    position: relative;
    background-color:transparent;
    width:100%;
    display: inline-block;
    padding-top:15px;
}

img{
    width:100%;
    z-index: 100;
}


/*-----------------------------------------about---------------------------------------------------*/

#about :hover {
    cursor: url(images/x3.png), auto;
}

#about{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100000;
    display:none;
}

#yellowbg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 100;
    z-index:100000;
}

#abouttext{
    position:fixed;
    text-decoration:none;
    margin:24px 36px 0px 24px;
    border:none;
    background-color:transparent;
    font-size:4.8vw;
    outline:0;
    font-family:  "Larish Alte Semibold", Larish, serif;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    color:#336666;
    line-height:118%;
    z-index:100000;
}


#abouttext a:hover { 
    cursor: pointer;
    color:white;
    z-index: 1000;
    opacity:100;
    -webkit-text-stroke-width: 0.02vw;
   -webkit-text-stroke-color: white;




}




#credits p{
    position:fixed;
    text-decoration:none;
    text-align:left;
    bottom:24px;
    left:24px;
    border:none;
    background-color:transparent;
    font-size:13px;
    outline:0;
    font-family:  Arial;
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
    color:#336666;
    line-height:118%;
    z-index:100000;
    padding-bottom:0!important;
}

#credits a:hover { 
    cursor: pointer;
    color:white;
    z-index: 1000;
    opacity:100;
           -webkit-text-stroke-width: 0.02vw;
   -webkit-text-stroke-color: white;
}

/*-----------------------------------------articles---------------------------------------------------*/

.article {
    width:66%;
    background-color:rgb(246,249,228);
}

.article-content {
    padding:4vw;
    }

.article-content p {
    text-align: left;
    font-size:17px;
    line-height: 23px;
    padding-bottom: 20px;
    }

.article-content h2 {
    line-height: 45px;
    font-size:35px;
    }

.article-content h3 {
    font-size:13px;
    font-family: arial;
    padding-bottom: 30px;
    margin:0;
    }

.article-caption {
    width: 66%;
}



/*-----------------------------------------bottom buttons---------------------------------------------------*/


#bp {
    position:absolute;
    z-index: 10000;
    bottom:47px;
    margin-left:30px;
}

#benpynebtn a{
    text-decoration:none;
    border:none;
    background-color:transparent;
    font-size:13px;
    outline:0;
    z-index: 10000;
    font-family: arial;
    opacity:100;
    color:white;
    line-height:118%; 
    height:50px;
    display:block;
    position:fixed;
    font-family: arial!important;
}

#aboutbtn a{
    text-decoration:none;
    border:none;
    background-color:transparent;
    font-size:13px;
    outline:0;
    z-index: 10000;
    font-family: arial;
    opacity:100;
    color:white;
    line-height:118%; 
    font-family: arial!important;
    left:140px;
    position:fixed;
    height:50px;
}



/*-----------------------------------------responsive styles---------------------------------------------------*/



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

#navblock a{ font-size:7.2vw}
#bknav a{ font-size:7.2vw}
#nav a{ font-size:7.2vw}
#abouttext{ font-size:7vw}
#abouttext h1{font-size:7vw}

#bknav, #nav, #navblock, #abouttext {margin: 10px 28px 0px 12px}

#bp {margin-left:15px;}
#aboutbtn a { left:100px;}

    
p {padding-bottom:40px;font-size:9px;}

#media {padding-top:15px}

.article {
    width:100%;
}

.article-content h2 {
    line-height: 30px;
    font-size:25px;
    }

.article-content p {
    text-align: left;
    font-size:14px;
    line-height: 19px;
    padding-bottom: 20px;
    }
.article-content h3 {
    font-size:9px;
    font-family: arial;
    padding-bottom: 30px;
    margin:0;
    }

    .article-caption {
    width: 100%;
}

}



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

    iframe{
        height:800px;
    }


}

@media only screen and (min-width: 1100px) and (max-width: 1430px){

    iframe{
        height:800px;
    }


}

@media only screen and (min-width: 915px) and (max-width: 1100px){

    iframe{
        height:600px;
    }


}


@media only screen and (min-width: 765px) and (max-width: 915px){

    iframe{
        height:500px;
    }

}

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

    iframe{
        height:400px;
    }

}

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

    iframe{
        height:200px;
    }

}