/*NAV BAR*/

#navbar {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 50px;
    background-color: #171717;
}

#navspace {
    height 25px;
    padding-top: 10px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 125%;
    text-transform:uppercase;
    letter-spacing: 3px;
}

#navspace a {
    padding-left: 3%;
    padding-right: 3%;
    color: white;
}

#navspace a:hover {
    text-decoration: none;
    color:#d6d6d6;
}

@media screen and (max-width:1000px) {
    #navspace {
        font-size: 100%;
    }
    
    #navbar {
        height:45px;
    }
}

@media screen and (max-width:900px) {
    #navspace {
        font-size: 75%;
    }
    
    #navbar {
        height:40px;
    }
}

@media screen and (max-width:675px) {
    #navspace {
        font-size: 50%;
    }
    
    #navbar {
        height:35px;
    }
}

@media screen and (max-width:555px) {
    #navspace {
        font-size: 125%;
    }
    
    #navbar {
        height:80px;
    }
}

/*Marquee Image*/

.BG {
    width: 100%;
}

/*Sections*/

#Editing {
    width: 100%;
    background-color: black;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 15pt;
    text-transform:uppercase;
    letter-spacing: 3px;
    color: white;
}

#Editing h2 {
    padding-top: .5%;
}

.video-icon img {
	cursor:pointer;
	width:100%;
    margin-left: 0%;
    margin-right: 0%;
}

.video-icon img:hover {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
	-webkit-transition: ease-out .5s;
	-moz-transition: ease-out .5s;
	-o-transition: ease-out .5s;
	opacity:.5;
	
}

#Photo {
    width: 100%;
    background-color: darkgrey;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 15pt;
    text-transform:uppercase;
    letter-spacing: 3px;
    color:black;
    padding-top: .5%;
}

.pgallery {
    width:100%;
}

#Writing {
    width: 100%;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 15pt;
    text-transform:uppercase;
    letter-spacing: 3px;
    color:black;
    
}

#writing_box {
    width:100%;
    background-color: white;
    text-align: center;
    z-index: 5;
}

#writing_box h1 {
    font-family: 'Lato', sans-serif;
    font-size: 15pt;
    color: black;
    padding-left: 5%;
    padding-right:5%;
    padding-top: 1%;
}

#writing_box h2 {
    padding-top: .5%;
}

#writing_box h1:hover {
    color:grey;
}

#writing_box h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 9pt;
    position: relative;
    top:-4px;
    text-transform:none;
    font-style: italic;
    color: grey;
    padding-bottom: 1%;
}

#writing_box a:hover {
    text-decoration: none;
}

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

#writing_box h1 {
    font-family: 'Lato', sans-serif;
    font-size: 10pt;
    color: black;
    padding-left: 5%;
    padding-right:5%;
    padding-top: 1%;
}
    
#writing_box h5 {
    font-family: 'Roboto', sans-serif;
    font-size: 6pt;
    position: relative;
    top:-4px;
    text-transform:none;
    font-style: italic;
    color: grey;
    padding-bottom: 1%;
}    
}

@media screen and (max-width:650px) {
    #writing_box {
    width:75%;
    margin-left: 12.5%;
    background-color: white;
    text-align: center;
    padding-top:.5%;
    padding-bottom:.5%;
    z-index: 5;
}
}

#Contact {
    width: 100%;
    background-color: black;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 15pt;
    text-transform:uppercase;
    letter-spacing: 3px;
    color: white;
    padding-bottom: .75%;
    padding-top: 1%;
}

.mail {
    width:75%;
    position: relative;
    left:12.5%;
}

.contact-label {
    width:100%;
}

#sender {
    padding-bottom: 1%;
    font-size: 12pt;
}

#senderEmail {
    font-size: 12pt;
}

#message-label {
    padding-top: 2%;
}

#message {
    padding-bottom: 1.5%;
    font-size: 12pt;
}

#button {
}

#footer {
    width: 100%;
    background-color: #4b4b4b;
    padding-bottom: 3px;
}

#copyright {
    width: 26%;
    text-align: center;
    margin-left: 37%;
    font-family: 'Roboto', sans-serif;
    color:white;
}

#copyright h5 {
    font-size: 11pt;
}

@media screen and (max-width:595px) {
    #copyright h5 {
    font-size: 8pt;
}
    #copyright h6 {
    font-size: 5.5pt;
    position: relative;
    top:-6px;
}
}

#copyright h6 {
    font-size: 8pt;
    position: relative;
    top:-6px;
}

.social_logos {
    width:20%;
    padding-left:1%;
    padding-right:1%;
    padding-top: 4%;
    padding-bottom: 4%;
}

@media screen and (max-width:1000px) {
    .social_logos {
    width:19%;
    padding-left:.5%;
    padding-right:.5%;
    padding-top: 4%;
    padding-bottom: 6%;
}
}

@media screen and (max-width:800px) {
    .social_logos {
    width:24%;
    padding-left:.5%;
    padding-right:.5%;
    padding-top: 4%;
    padding-bottom: 6%;
}
}

@media screen and (max-width:600px) {
    .social_logos {
    width:28%;
    padding-left:.5%;
    padding-right:.5%;
    padding-top: 4%;
    padding-bottom: 6%;
}
}