/*Make HTML5 elements display as block elements in older browsers*/
header, nav, aside, footer, section{
    display:block;
}
body{
    background-color: #292929; 
    color: #666666;
    text-align: left;
    font-family: Lato,Sans-Serif;
    font-size: 100%;
}
#titlewrapper{
    width: 50%;
    margin: auto;
    padding-top: 5%;
    padding-bottom: 1%;
    text-align: center;
   

}


h1{
    font: 1.6rem Lato,sans-serif;
    font-weight:400;    
    color:#666666;
}
h2{
    font: 1.125rem Lato,sans-serif;
    font-weight:400;    
    color:#2b2b2b;
}

a:link {
    color: #666666; 
    text-decoration: none;
}
a:visited{
    color: #666666;
    text-decoration: none;
}
a:hover {
    color:#ccc;
}

#wrapper{

    width: 100%;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding-top: 0px;
    /*	border:thin  solid #3D1DDD;*/

}
/*Style 'show menu' label button and hide it by default-because it will appear only at narrow screen*/
.show-menu {

    text-decoration: none;
    color: #666;
    text-align: center;
    padding: 10px 0;
    display: none;
    font-size: 2rem;
}

/*Make checkboxes invisible*/
input[type=checkbox ]{
    display: none;
}
/*Show  main menu when invisible checkbox is checked*/

#show-menu:checked + nav {
    display: block;
}
/*drawings submenu*/
#show-submenu1:checked + .hidden {
    display: block;
}
/*About submenu*/
#show-submenu2:checked + .hidden {
    display: block;
}
/*Make main menu label change color on hover (narrow desktop scenario)*/
label:hover, label:active, input:hover+label, input:active+label{
    color: #ccc;}

/*New Nav Styling*/

nav {
    font-family: Lato,sans-serif;
    font-size: 1rem;
    width:50%; margin: 20px 25% 0 25%;
    position: relative;
    z-index: 98;
}
/*Strip the ul of padding and list styling*/
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;                
    text-align: center; 
    width: 100%; 
}
nav a:link,
nav a:visited {
    color: #666; 
    text-decoration: none;
}
/*Create a horizontal list with spacing*/
nav li {
    display:inline-block;
    position:relative;/*I think this is making this a positioned element only so sub menus can be absolutely positioned*/
    float: left;
    width: 20%;
    background-color: #292929; 
}
/*Style for menu links*/
nav li a {
    display:block;
    padding: .5em 0 .25em 0; 
}

nav li:hover a {
    color: #ccc;
    text-decoration: none;
}

nav li li{

    width: 100%;height: auto;
}
/*Style for dropdown links when hovering over parent list element*/
li:hover ul a {
    background: #292929;
    color: #666666;

}
/*Style for dropdown links when hovering over links themselves*/
li:hover ul a:hover {
    background: #292929;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
    width: 100%;
    z-index: 99;
}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*endnav*/
/*Flexbox styling*/
/*This added to make galleries only 3 columns wide without thumbnails being too blown up*/
.wrap {width: 60%; position: relative; margin: auto;}
.box {
    width: 33%;
    padding-bottom: 30%;
    /*      background: #000000;*/
    /*      color: #FFF;*/
    position: relative;
    float: left;
}
.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    /*   top: 10px;*/
    /*   bottom: 10px;*/
    /*   background: #66F;*/
    text-align: center;
}
.boxInner img {
    width: 100%;
}
/*End Flexbox*/

article{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    position:static;
    font-size: 1rem;
    /*	border:thin solid #F81317;*/
}
article p{
    text-align: justify;
}
article p:first-child{
    /*to make top of text align with top of Nav on text-heavy pages-was 195px changed to 100 for horizontal menu*/
    padding-top: 50px;
}
/*Indent resume items and remove spaces between paragraphs */
.cv  p{
    margin-bottom: 0;
    margin-top: 0;
    text-indent: -41px;
    padding-left: 41px;
    line-height: 18px;
}

#frontimage{
    position:relative;
    /*top: -200px;*/
    right:50px;
    z-index:1;
    /*to undo first child rule above which meant for text*/
    padding-top: 0;
}

vertvideo {height: 600px;
           width:auto;}
footer{
    /*width: 900px;*/
    position:fixed;
    clear:both;
    margin-top: 0;
    margin-right: auto;
    margin-left: 0;
    margin-bottom: 0;
    height: 4em;
    text-align:left;
    font-family:sans-serif;
    font-size:.5625rem;
    color:#2b2b2b;
}



/*Media Queries*/
@media screen and (max-width : 650px){
    /*Make dropdown links appear inline*/
    nav ul {
        position: static;
        width: 100%;
    }
    nav {display: none;
         width: 100%;       
         margin: 0;
         font-size: 1.5rem;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Style for dropdown links when hovering over parent list element*/
    li:hover ul a {
        background: #434343;
        color: #666666;

    }
    /*Style for dropdown links when hovering over links themselves*/
    li:hover ul a:hover {
        background: #434343;
        color: #fff;
    }
    /*    makes name disappear*/
    #titlewrapper {display: none;}   
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}
@media only screen and (max-width : 480px) {
    /* Smartphone view: 1 tile */
    .wrap{width:100%;}
    .box {
        width: 100%;
        padding-bottom: 100%;
    }

}
@media only screen and (max-width : 650px) and (min-width : 481px) {
    /* Tablet view: 2 tiles */
    .wrap{width:100%;}
    .box {
        width: 50%;
        padding-bottom: 50%;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) 
{
    /* Small desktop / ipad view: 3 tiles */
    .wrap{width:100%;}
    .box {
        width: 33.3%;
        padding-bottom: 33.3%;
    }
    #titlewrapper {visibility: hidden;}

}

@media only screen and (max-width : 1290px) and (min-width : 1051px) {
    /* Medium desktop: 3 tiles */
    .box {
        width: 33.3%;
        padding-bottom: 30%;
    }
}
/*maintain nice spacing of nav links as screen transitions between wide and nav disappearing*/
@media only screen and (max-width : 1097px) and (min-width : 746px)
{
    nav{
        width: 60%;
        margin: 1.5% 20% 1% 20%;
    } 
    #titlewrapper {
        padding-bottom: 0;
        padding-top: 7%;
    }
    h1 {
        margin-bottom: .32em;
    }
}
@media only screen and (min-width : 651px) and (max-width : 745px) 
{
    nav {
        width: 70%;
        margin: 1.5% 15% 1% 15%;
    }
}
@media only screen and (min-width : 651px){
    /*Display the dropdown on hover*/
    nav li:hover > input[type="checkbox"] + .hidden {
        display: block;
    }
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
/*this is the dark background*/
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.5; filter: alpha(opacity = 50);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; font-size: .875rem; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; font-size: .75rem; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}