@import "cssreset.css";

*       {   box-sizing:     border-box; }
body    {   background:     #333;
            color:          white;
            font-family:    sans-serif; }
#page   {   max-width:      900px;
            margin:         0 auto;     }

header  {   text-align:     center;     
            margin-bottom:  30px;       }
h1      {   text-transform: uppercase;
            font-stretch:   condensed;
            margin:         20px 20px 0;
            font-size:      1.95em;     }
h2      {   margin:         10px 20px 10px;
            font-size:      1.56em;     }
h3      {   margin:         25px 20px 0;
            font-size:      1.25em;     }

header nav      {   overflow:           auto;   }
header nav img  {   text-align:         left;   
                    padding:            3px; 
                    float:              left;
                    margin:             10px 20px 0;
                    display:            none;   }
header nav ul   {   list-style-type:    none;
                    padding:            0;      }
header nav li   {   display:            inline-block;
                    margin:             15px 0; }
header nav a    {   text-decoration:    none;
                    padding:            3px 10px;
                    margin:             5px 10px;
                    background:         gray;
                    color:              white;
                    border-radius:      20px;
                    z-index:            9;
                    font-size:          1.25em; }
header nav a:hover {    background:     white;
                        color:          gray;   }

main a  {   color:              white;
            background:         gray;
            text-decoration:    none;   }

.images {   text-align:     center;     }
figure  {   margin:         30px auto;   
            width:          600px;
            padding-top:    20px;
            border:         solid #222 5px; }
figcaption  {   padding:    20px;   }

article,
.contact    {   max-width:  600px;
                margin:     auto;   }

.pageUpdate {   clear:  both;   }

.stories section    {   clear:          both;   }
.stories section ul {   margin-left:    50px;   }
.stories img        {   width:          50%;    }
.stories quote      {   font-style:     italic; }

article img,
.bio img    {   float:      left; 
                margin:     25px 30px 20px 20px;
                border:     solid black 3px;    }
.bio ul     {   padding:    0 40px;         }
.bio li     {   padding-bottom:     7px;    }
.bio a      {   line-height:        1.1;    }
p           {   padding:    20px 20px 0 20px;   }

.about ul   {   padding:    0 40px; }

.studiosmap {   width:  70%;    }

.goback     {   cursor:     pointer;
                position:   fixed;
                right:      10px;
                top:        20px;
                border:     solid gray 2px;
                background: black ;
                color:      white;
                padding:    10px;   }

.totop      {   cursor:     pointer;
                position:   fixed;
                right:      20px;
                bottom:     20px;
                border:     solid gray 2px;
                background: black ;
                color:      white;
                padding:    10px;   }
.totop img  {   height:     0.75em;
                width:      auto;   }

.contact img    {   width:  initial;    
                    border: none;
                    margin: 0 auto;
                    float:  none;       }

td          {   padding:        20px 20px 0 0;
                vertical-align: bottom;         }

.email,.insta { display:        block; 
                background:     #999;
                color:          white;
                width:          250px;
                height:         90px;
                text-align:     center;     
                margin:         0 auto;
                padding:        10px;
                text-decoration:    none;   }
.email:hover,
.insta:hover  { background:     white;
                color:          gray;   }

footer  {   margin:         20px 5px;
            font-size:      0.75em; 
            clear:          both;       }
.press  {   text-align:     center;
            font-size:      1.5em;
            padding:        0;          }
.press a    {   text-decoration:    none;
                color:      white;
                background: gray;       }
.siteby {   float:          right;      }

/*  mobile  */
@media only screen and (max-width : 480px) {

body    {   font-size:  1.25em; }
img     {   width:      80%;    }

h1      {   font-size:      1.95em;     }
h2      {   font-size:      1.56em;     }
h3      {   font-size:      1.25em;     }

h1      {   font-size:      1.72em;     }
h2      {   font-size:      1.44em;     }
h3      {   font-size:      1.20em;     }

header nav img  {   display:    inline;
                    width:      initial;    }
header nav ul   {   display:    none;       }
header nav:hover *  {   display:    inline-block;   }
header nav:hover ul {   margin-left:   15%;         }
header nav:hover img    {   display:    none;       }

figure,
.about  {   width:      90%;    }

td      {   padding:    10px 10px 0 20px;   }

article img,
.about img  {   width:  50%;    }

.studiosmap {   width:  90%;    }

.stories img    {   width:  40%;    }

.goback     {   top:    auto;
                bottom: 20px;   }

.email,.insta { width:  275px;  
                height: 125px;  }
.email img,
.insta img  {   width:  33%;    }

}

/*  printer  */
@media only print {
@page   {   size:       auto;
            margin:     0;      }
body    {   text-align:     justify;
            background:     white;
            color:          black;
            font-family:    sans-serif; }
h1      {   position:       fixed;
            top:            25px;
            left:           257px;  }
h2      {   position:       fixed;
            top:            70px;
            left:           254px;  }
figure, section  {   page-break-inside:  avoid;      }
.studiosmap, .stories section {   page-break-before:      always; }
.stories section    {   padding-top: 115px;  }
nav, .goback, .contact {   display:    none;   }
}

/*  large device font sizes  0.56, 0.75, 
     1.00, 1.25, 1.56, 1.95, 2.44, 3.05
    mobile device font sizes 0.64, 0.80, 
     1.00, 1.20, 1.44, 1.73, 2.07, 2.49  */