/* Page Styling */


::-moz-selection { 
    background: #2d343a;
    color: #FFF;        
  }

::selection { 
    background: #2d343a;
    color: #FFF;

 }


@font-face {
    font-family: "Fabric Serif Regular";
    src:    url("fonts/FabricSerif-Regular.woff") format("woff"),
            url("fonts/FabricSerif-Regular.woff2") format("woff2"),
            url("fonts/FabricSerif-Regular.eot") format('embedded-opentype');
}

@font-face {
    font-family: "Neue moderne Grotesk Normal";
    src:    url("fonts/NeuemoderneGroteskNormal.woff") format("woff"),
            url("fonts/NeuemoderneGroteskNormal.woff2") format("woff2"),
            url("fonts/NeuemoderneGroteskNormal.eot") format('embedded-opentype');
}

  
html, body {
    background-color: #F0F8FF;
    color: #000000;
    font-family: "Fabric Serif Regular", times, serif;
}


        /* DIVs */


.container {
    font-family: "Fabric Serif Regular", times, serif;
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.content {
    height: 100vh;
    display: flex;
    justify-content: center;
    margin-top:23vh;
    margin-bottom:18em;
    }

.content-about {
    height: 100vh;
    display: flex;
    justify-content: center;
    margin-top:23vh;
    margin-bottom:18em;
    }
        

.photo-container {
    margin-top:-10vh;
    }
    
.photos {
    max-width:70vw;
    position: relative;
    box-sizing: border-box;
    display: block;
    }

img {
    max-width:70vw;
    margin-top: 16em;
    }

img.top {
    max-width:70vw;
    margin-top: 0em;
    }

.writing {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:24px;
    display: block;    
    text-align:left;
    margin-top: 10em;
    padding-bottom:10em;
    }

.writing-about {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:24px;
    display: block;    
    text-align:left;
    margin-top: 5em;
    padding-bottom:10em;
    }

p { /*
    margin:0;
    padding:0;*/
    }

p.indent {
    /*text-indent: 6em;*/
    }

p.quote {
    padding-left: 4em;
    padding-right: 4em;
    }

p.author {
    font-style: italic;
    }

p.about {
    margin-top:12em;
    }
    
p.last {
    /*text-indent: 6em;*/
}

p a {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    text-decoration: none;
    color:#000;
    }   

p a:hover {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    color: #808080;
    text-decoration: none;
    }   

p.home {
    margin-top:10em;
    text-align:center;
    text-transform:capitalize;
    font-size:.6em;
    letter-spacing: .1em;
    }

    p.home a {
        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
        text-align:center;
        text-transform:capitalize;
        color:#000;
        text-decoration: none;
        }

    p.home a:hover {
        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
        text-align:center;
        text-transform:capitalize;
        color:#808080;
        text-decoration: none;
        }

.nav-names {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:24px;
    position: fixed;     
    text-align:left;  
    bottom: 2vh; 
    width: 97;
    left:2vw;
    }     

.nav-names a {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:24px;
    text-decoration: none;
    color:#000;
    }   

.nav-names a:hover {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:24px;
    color: #808080;
    text-decoration: none;
    }   

    

.small-num {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:14px;
    }  

    .small-num a {
        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
        font-size:14px;
        color:#000
        }  

        .small-num a:hover {
            font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
            font-size:14px;
            color: #808080;
            }  

.en-dash {
    font-family: Arial, sans-serif;
    font-size:24px;
    }  

.romance {
    font-family: "Fabric Serif Regular", times, serif;
    font-size:48px;
    letter-spacing: .15rem;
    position: fixed;     
    text-align:left;  
    left:2vw;
    bottom: 11vh; 
    width: 100%;
    }   

.action {
    font-family: "Fabric Serif Regular", times, serif;
    font-size:48px;
    letter-spacing: .15rem;
    position: fixed;     
    text-align:center;  
    bottom: 11vh; 
    width: 100%;
    }   

.mystery {
    font-family: "Fabric Serif Regular", times, serif;
    font-size:48px;
    letter-spacing: .15rem;
    position: fixed;     
    text-align:right;
    right:2vw;  
    bottom: 11vh; 
    width: 100%;
    }   
   

.mobile-description {
    display:none;
    }  


        /* Text Styling */


p.caption {
    font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
    font-size:.75em;
    color: #000;
}

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.6em;
    font-size:.6em;
  }

  sub { 
    top: 0.6em; 
  }


        /* Links */







        /* Shapes  */

 .shape{
 	max-width:1em;
 	max-height:1em;
 	padding-left:3px;
 	padding-right:2px;
 }








        /* For Mobile: */

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



    .container {

        display: none;
        }

    .photo-container {
        display:none;
    }   

    .content-about {
        height: 100vh;
        display: flex;
        justify-content: center;
        margin-top:0em;
        margin-bottom:18em;
        }
    
    .photos {
        max-width:90vw;
        position: relative;
        box-sizing: border-box;
        display: block;
        }
    
    img {
        max-width:90vw;
        margin-top: 8em;
        }
    
    img.top {
        max-width:90vw;
        margin-top: 0em;
        }


        .writing {
            font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
            font-size:18px;
            display: block;    
            text-align:left;
            margin-top: 6em;
            padding-bottom:6em;
            }

            .writing-about {
                font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
                font-size:18px;
                display: block;    
                text-align:left;
                margin-top: 0em;
                padding-bottom:6em;
                }

            p.quote {
                padding-left: 2em;
                padding-right: 2em;
                }

                p.home {
                    margin-top:10em;
                    text-align:center;
                    text-transform:capitalize;
                    font-size:.6em;
                    letter-spacing: .1em;
                    }
                
                    p.home a {
                        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
                        text-align:center;
                        text-transform:capitalize;
                        color:#000;
                        text-decoration: none;
                        font-size:1.1em;
                        }
                
                    p.home a:hover {
                        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
                        text-align:center;
                        text-transform:capitalize;
                        color:#808080;
                        text-decoration: none;
                        }
                

    .mobile-description {
            display: block;
            width: 100%;
            font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
            font-size:18px;
        }  

    .mobile-title {
        font-family: "Fabric Serif Regular", times, serif;
        font-size:18px;
        text-align:center;

        }  

    .en-dash {
        font-family: Arial, sans-serif;
        font-size:1em;
        }  

    .small-num {
        font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
        font-size:.6em;
        } 

            a {
                font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
                font-size:18px;
                text-decoration: none;
                color:#000;
                }   
            
            a:hover {
                font-family: "Neue moderne Grotesk Normal", Arial, sans-serif;
                font-size:18px;
                color: #808080;
                text-decoration: none;
                }   

                

        .romance {
            display:none;
            }   
            .action {
                display:none;
                }  
                .mystery {
                    display:none;
                    }  
                    .nav-names{
                        display:none;
                    }
}