/*
Theme Name: jonnotheme
Theme URI: n/a
Author: jacob blumberg
Author URI: greasey.me
Description: photo theme for jonno rattman
Version: 1.0
License: ???
License URI: ???
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: jonnotheme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
        .wrap {
           width: 900px;
            /*max-height: 860px;*/
            margin: 40px auto 0;
            font-family: 'Old Standard TT';
        }

        header {
            position: fixed;
            width: 100%;
            top: -10px;
            left: 0px;
            padding-top: 25px;
            padding-bottom: 25px;
            z-index: 1;   
            background: white;    
        }

        a, a:active, a:visited {
            color:#000;
            text-decoration: none;
        }

        h1 {

            width: 100%;
            text-align: center;
            font-size:4.75em;
            letter-spacing: .025em;
            
   
        }

        header ul {
            width: 639px;
            margin: 0 auto;
            font-size: 1em;
            z-index: 1;

        }

        header ul li {
            width: 213px;
            text-align: center;
            float: left;
            z-index: 1;
        }

        header ul li:hover {
            cursor: pointer;
        }

        header ul.sub, ul.sub2 {    
            position: absolute;
            white-space:nowrap;
            margin-left: -5px;     
            padding-top: .4em;
            padding-bottom: 1em;
            font-size: .75em;
            width: auto;
            z-index: 1;
        }

        header .noJS ul.sub, ul.sub2 {
            z-index: 1;
            display: none;
        }

        header ul.sub li, ul.sub2 li {
            width: auto;
            float: none;
            text-align: left;
            margin-left: 5em;
            padding-left: 2em;
            padding-right: 2em;
            padding-top: .24em;
            background: white;
            background: rgba(255,255,255,.93);
        }
        header ul.sub:first-child, ul.sub2:first-child{
            padding-top: 1em;
           
        }
        header ul.sub li:last-child, ul.sub2 li:last-child {
            padding-bottom: 1em;
        }

        header .noJS li:hover ul.sub {
            display: block;
        }

        header  ul.words {
            margin-left: 6px;
        }

/*        header ul.sub li:hover ul.sub2 {
            display: block;
        }*/

        .content_window {
            width: auto;
            z-index: 99;
            margin-bottom: 50px;

        }

        .metaslider {
            z-index: 99;
        }

        .metaslider img {

        }
        .content_window ul.pictures {
            width: 900px;
            margin: 150px auto 0;
        }
        
        .content_window .imgwrap {
            width: 610px;
            margin: 0 auto;
        }
        .content_window img {
        
            padding-bottom: 5px;
        }

        .content_window a {
            text-decoration: underline;
        }
        .content_window a:hover {
            text-decoration: none;
        }

        .content_window .homepage {
            width: 80%;
            height: auto;
            margin: 162px auto 0;
            margin-left: 9.7%;
       
        }

        .bio {
            width: 630px;
            margin: 300px auto 0;
            
            line-height: 2em;
            text-align: justify;
            letter-spacing: .0125em;
        }

        .bio em {
            font-style: italic;
        }

        .content_window .cv2 {
            margin-top: 200px;
            padding-top: 20px;
            font-size: .75em;
        }

        .content_window .cv2 img:hover {
            opacity: .6;
        }

        .content_window .cv2 .cvTitle {
            font-size: 1.4em;
        }
        .content_window .cv2 .cvTitle .h3 {
            font-size: 1.6em;
        }

        .content_window .cv2 .spacer {
            height: 14px;

        }

        .content_window .cv2 .h4 {
            font-size: 1.25em;
            margin: 40px 0 0;
            padding-top: 5px;
        }
        .content_window .cv2 .h5 {
            font-size: 1.05em;
            margin-top: 20px;
        }

        .content_window .cv2 strong {
            font-weight: bold;
        }

        .content_window .cv2 em {
            font-style: italic;
        }

        .content_window .line {
            width: 100%;
            border-bottom: 1px solid black;
            height: 2px;
            margin: 5px 0 20px;
        }

        .contact {
            margin-top: 200px;
            text-align: center;
            line-height: 2.2em;
        }
        footer {
            width: 100%;
            font-size: .75em;
            text-align: center;
            background: transparent;
            padding: 20px 0;
            display: none;
        }
        @media only screen and (min-height: 720px) {
                footer {
                    display: block;
                    position: fixed;
                    bottom: 0px;
                    right: 0;
                }
        }
        @media only screen and (max-width: 1100px) {
            .wrap, .content_window {
                width: auto;
            }

           footer {
                margin-top: 140px;
            }

            .content_window .homepage {
                width: 100%;
                height: auto;
                margin: 160px auto 0;
            }

        }

        @media only screen and (max-width: 679px) {
            h1 {font-size: 2em;float: none;text-align: center;}
            h1, header ul, header ul li {
                width: auto;
                float: none;
                text-align: center;
            }
            header ul li {
                padding-top: 1em;
            }
            header ul ul.sub {
                position: relative;

            }
            header ul ul.sub li {
                text-align: center;
                margin-left: 0em;
                margin-top: 1px;
            }
            .content_window {
                /*height: 500px;*/
               
            }

            .content_window ul.pictures li:hover a.title {
                opacity: 1;
                top: 80px;
                left: 222px;
            }
            .imgwrap {
                height: auto;
            }
            .content_window img {
                padding-left: 0;
                float: none;
                width: 500px;
                margin: 0 auto;
            }

            .content_window .homepage {
                margin-top: 0;
            }

            .content_window .cv2 {
                margin-top: 20px;
            }

            .content_window .cv2 img {
                width: 100%;
                display: none;
            }
            .bio {
                width: auto;
                margin-top: -30px;
                padding: 35px;
                font-size: .75em;
            }

            .contact {
                margin-top: 0px;
                font-size: .8em;
            }

            footer {
                width: 100%;
                position: fixed;
                bottom: 0;
                text-align: center;
            }


        }
        @media only screen and (max-device-width: 679px) {
            header {
                margin-left: 20px;
            }


        }
        @media all and (orientation:landscape) and (max-device-width: 679px){
            header {
                font-size: .6em;
                margin-top: 350px;
            }
            .wrap {
                width: 66%;
                margin: 0 auto;
            }
            .content_window {
                margin-top: 0;
            }
            .bio {
                font-size: .5em;
                padding: 0;
                margin-top: 15px;
            }
            footer {
                display: none;
            }
         }