* {box-sizing: border-box; padding: 0; margin: 0}
nobr {display: none}
nobr a {display: none}
html {background-color: #000000}
body {font-family: 'Cinzel', serif; color: #ffffff;}
iframe {border: 0}

/* Header */
#nav {display: block; text-align: center; width: 1042px; height: 2190px;  background-color: transparent;
    margin-left: 3%; padding-top: 3%}
#nav h1 {color: white; font-size: 6rem}
#nav_container {display: flex; justify-content: space-around; align-items: center; flex-direction: row ;}
#gallery_link_mobile {display: none}
.nav_item {padding-top: 2%;}
.nav_item a {color: #ffffff; text-decoration: none; font-size: 2.5rem;}
.nav_item a:hover {cursor: pointer}

/* Bio */
#portrait_414, #portrait_375 {display: none}
#bio_wrap {background-image: url("img/portrait1024.jpg"); background-size: cover; background-repeat: no-repeat;}
#bio {width: 100%; height: 1590px; display: block; align-items: center}
.container_top_left {display:inline-block; width: 642px; text-align: center;}
.container_top_left p {font-style: italic; padding-top: 25%; font-size: 2rem; line-height: 175%}

/* Media */
/*#media {background-image: linear-gradient(135deg, #505050 5%, #252525 15%, #060606 30%, #000000 50%)}*/
/*.container_bottom_right {display: block; width: 1800px; float: right; margin: -300px 0 auto; text-align: center;}*/
.container_bottom_right {display: block; width: 2200px; float: none; margin: 0 auto; text-align: center;}
.container_bottom_right p {padding-top: 5%; font-size: 2rem; line-height: 175%;}
#media_container {width: 100%; height: 1600px; display: flex; justify-content: space-around; align-items: center;
    flex-direction: row; margin-top: 5%}
#videos {width: 30%; height: 1600px; display: flex; flex-direction: column; justify-content: space-between;
    align-items: center}
.video {width: 875px; height: 493px;}
#youtube {font-size: 2rem; text-align: center; padding: 5% 0 2.5% 0}
#youtube a {font-size: 2rem; text-decoration: none; line-height: 175%; color: #949494}
#youtube a:hover {cursor: pointer}
#slide_show_mobile {display: none}
#slide_show {width: 40%; height: 1600px; position: relative;}
.slide {width: 1200px; height: 1600px; position: absolute; left: 0; top: 0; border-radius: 5px}

/* Lessons */
#lessons {display: block; width: 100%; float: none; margin: 0 auto; text-align: center;}
#lessons h2 {font-size: 3rem; text-align: center;}
#lessons p {height: auto; padding: 2.5% 10% 0 10%; line-height: 175%; font-size:2rem }
#lessons p a {font-size: 2rem; text-decoration: none; line-height: 175%; color: #949494}
#lessons p a:hover {cursor: pointer}
#lesson_pic_box {display: flex; justify-content: center; align-items: center; width: 100%; height: auto;
    padding-top: 2.5%}
#lesson_pic {width: 50%; border-radius: .5%}


/* Calender */
#calender {width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: 5%}
#calender_box {width: 80%; height: auto;}
#calender h2 {font-size: 3rem; text-align: center}
#calender ul {text-align: center; list-style-type: none; padding-top: 2.5%;}
#calender ul li {padding-bottom: 2.5%; line-height: 175%}
.event {font-size: 2rem;}
.new_window {font-size: 2rem; text-decoration: none; color: #949494}
.new_window:hover{cursor: pointer}

/* Footer */
footer {width:100%; height: 250px; background-color: transparent;}
#copyright {text-align: center; padding-bottom: 0; font-size: 1.5rem}
#back_to_top {text-align: center; padding: 5% 0 1% 0}
#back_to_top a {color: #949494; text-decoration: none; font-size: 2rem;}
#back_to_top a:hover {cursor: pointer;}

#bottom_wrap {padding-bottom: 20px; margin-bottom: -25px;
    background-image: linear-gradient(315deg, #505050 5%, #252525 15%, #060606 30%, #000000 50%)}

@media screen and (max-width: 2559px) {
    .container_bottom_right {width: 2079px;}
    #media_container {height: 1200px;}
    #videos {height: 1200px}
    .video {width: 656px; height: 370px;}
    #slide_show {height: 1200px}
    .slide {width: 900px; height: 1200px;}
}

@media screen and (max-width: 2304px){
    #nav {height: 1900px; width: 862px;}
    #nav h1{font-size: 5rem}
    .nav_item a {font-size: 2.3rem;}
    #bio {height: 1314px;}
    .container_top_left {width: 592px}
    .container_top_left p {font-size: 1.8rem}
    .container_bottom_right {width: 1836px;}
    .container_bottom_right p {font-size: 1.8rem}
    #youtube {font-size: 1.8rem;}
    #youtube a {font-size: 1.8rem;}
    #lessons h2 {font-size: 2.6rem;}
    #lessons p {font-size:1.8rem }
    #lessons p a {font-size: 1.8rem;}
    #calender h2 {font-size: 2.6rem;}
    .event {font-size: 1.8rem;}
    .new_window {font-size: 1.8rem;}
    #back_to_top a {font-size: 1.8rem;}
}

@media screen and (max-width: 1921px){
    #nav {height: 1600px; width: 776px;}
    #nav h1{font-size: 4.5rem}
    .nav_item a {font-size: 2.1rem;}
    #bio {height: 914px;}
    .container_top_left {width: 542px}
    .container_top_left p {font-size: 1.6rem}
    .container_bottom_right {width: 1240px;}
    .container_bottom_right p {font-size: 1.6rem}
    #youtube {font-size: 1.6rem;}
    #youtube a {font-size: 1.6rem;}
    #lessons h2 {font-size: 2.4rem;}
    #lessons p {font-size:1.6rem }
    #lessons p a {font-size: 1.6rem;}
    #calender h2 {font-size: 2.4rem;}
    .event {font-size: 1.6rem;}
    .new_window {font-size: 1.6rem;}
    #back_to_top a {font-size: 1.6rem;}
    #copyright {font-size: 1.25rem}
    #media_container {height: 900px;}
    #videos {height: 900px}
    .video {width: 492px; height: 278px;}
    #slide_show {height: 900px}
    .slide {width: 675px; height: 900px;}
    footer {height: 175px;}
}

@media screen and (max-width: 1440px){
    #nav {height: 1200px; width: 575px;}
    #nav h1{font-size: 3.4rem}
    .nav_item a {font-size: 1.5rem;}
    #bio {height: 914px;}
    .container_top_left {width: 440px}
    .container_top_left p {font-size: 1.25rem}
    .container_bottom_right {width: 1080px;}
    .container_bottom_right p {font-size: 1.25rem}
    #youtube {font-size: 1.25rem;}
    #youtube a {font-size: 1.25rem;}
    #lessons h2 {font-size: 2rem;}
    #lessons p {font-size:1.25rem }
    #lessons p a {font-size: 1.25rem;}
    #calender h2 {font-size: 2rem;}
    .event {font-size: 1.25rem;}
    .new_window {font-size: 1.25rem;}
    #back_to_top a {font-size: 1.25rem;}
    #copyright {font-size: 1rem}
    #media_container {height: 675px;}
    #videos {height: 675px}
    .video {width: 369px; height: 278px;}
    #slide_show {height: 675px}
    .slide {width: 506px; height: 675px;}
    footer {height: 130px;}
}

@media screen and (max-width: 1280px){
    #nav {height: 1100px; width: 500px;}
    #nav h1{font-size: 3rem}
    .nav_item a {font-size: 1.25rem;}
    #bio {height: 614px;}
    .container_top_left {width: 340px}
    .container_top_left p {font-size: 1rem}
    .container_bottom_right {width: 880px;}
    .container_bottom_right p {font-size: 1rem;}
    #youtube {font-size: 1rem;}
    #youtube a {font-size: 1rem;}
    #lessons h2 {font-size: 1.25rem;}
    #lessons p {font-size:1rem }
    #lessons p a {font-size: 1rem;}
    #calender h2 {font-size: 1.25rem;}
    .event {font-size: 1rem;}
    .new_window {font-size: 1rem;}
    #back_to_top a {font-size: 1rem;}
    #copyright {font-size: .8rem}
}

@media screen and (max-width: 1024px) {
    #nav {height: 875px; width: 390px;}
    #nav h1{font-size: 2.3rem}
    .nav_item a {font-size: 1rem;}
    #bio {height: 600px;}
    .container_top_left {width: 240px}
    .container_top_left p {font-size: .8rem}
    .container_bottom_right {width: 668px;}
    .container_bottom_right p {font-size: .8rem;}
    #youtube {font-size: .8rem;}
    #youtube a {font-size: .8rem;}
    #lessons h2 {font-size: 1rem;}
    #lessons p {font-size: .8rem }
    #lessons p a {font-size: .8rem;}
    #calender h2 {font-size: 1rem;}
    .event {font-size: .8rem;}
    .new_window {font-size: .8rem;}
    #back_to_top a {font-size: .8rem;}
    #copyright {font-size: .6rem}
    #media_container {height: 574px;}
    #videos {height: 574px}
    .video {width: 314px; height: 236px;}
    #slide_show {height: 574px}
    .slide {width: 430px; height: 574px;}
    footer {height: 100px;}
}

@media screen and (max-width: 900px) {
    #nav {height: 625px; width: 300px;}
    #nav h1{font-size: 1.7rem}
    .nav_item a {font-size: .8rem;}
    #bio {height: 500px;}
    .container_top_left {width: 220px}
    .container_top_left p {font-size: .65rem}
    .container_bottom_right {width: 568px;}
    .container_bottom_right p {font-size: .65rem;}
    #youtube {font-size: .65rem;}
    #youtube a {font-size: .65rem;}
    #lessons h2 {font-size: .8rem;}
    #lessons p {font-size: .65rem }
    #lessons p a {font-size: .65rem;}
    #calender h2 {font-size: .8rem;}
    .event {font-size: .65rem;}
    .new_window {font-size: .65rem;}
    #back_to_top a {font-size: .65rem;}
    #copyright {font-size: .5rem}
    #media_container {height: 506px;}
    #videos {height: 506px}
    .video {width: 277px; height: 209px;}
    #slide_show {height: 506px}
    .slide {width: 380px; height: 506px;}
    footer {height: 75px;}
}

@media screen and (max-width: 767px) {
    /* start of phone styles */
    #nav {width: 100%; height: auto; margin-left: 0; padding-top: 5%}
    #nav h1 {font-size: 2.1rem}
    #gallery_link {display: none}
    #gallery_link_mobile {display: inline}
    .nav_item {padding-top: 2.5%;}
    .nav_item a {font-size: 1.25rem;}
    #portrait_414 {display: block; width: 100%; height: auto; margin-top: 25px;}
    #bio {height: auto}
    #bio_wrap {background-image: none;}
    .container_top_left {width: 100%;}
    .container_top_left p {padding: 5% 5%; font-size: 1rem;}
    #media {background-image: none}
    .container_bottom_right {width: 100%;}
    .container_bottom_right p {padding: 5%; font-size: 1rem;}
    #media_container {height: 636px; margin-top: 0}
    #videos {height: 636px;}
    .video {width: 325px; height: 212px;}
    #youtube {width: 80%; font-size: 1rem; margin: 0 auto; padding: 5% 0}
    #youtube a {font-size: 1rem; text-decoration: none; line-height: 175%; color: #949494}
    #youtube a:hover {cursor: pointer}
    #slide_show_mobile {display: block; width: 325px; height: 433px; margin: 0 auto; position: relative;}
    #slide_show {display: none}
    .slide_mobile {display: inline-block; width: 100%; height: 433px; position: absolute; left: 0; top: 0; border-radius: 5px}
    .slide {display:none}
    #lessons h2 {font-size: 1.25rem;}
    #lessons p {font-size: 1rem}
    #lessons p a {font-size: 1rem;}
    #calender {padding-top: 5%}
    #calender_box {width: 80%; height: auto;}
    #calender h2 {font-size: 1.25rem;}
    #calender ul {padding-top: 5%;}
    #calender ul li {padding-bottom: 5%;}
    .event {font-size: 1rem;}
    .new_window {font-size: 1rem; }
    footer {width:100%; height: 110px; background-color: transparent;}
    #copyright {padding-bottom: 0; font-size: .75rem}
    #back_to_top {padding: 15% 0 1% 0}
    #back_to_top a {font-size: 1rem;}
}

@media screen and (max-width: 413px){
    #portrait_375 {display: block; width: 100%; height: auto; margin-top: 25px;}
    #portrait_414 {display: none;}
    footer {height: 100px}
}