@import url("https://use.typekit.net/qku7ovd.css");

/* --- RESET BROWSER DEFAULTS -------- */ 

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- GLOBAL TYPOGRAPHY -------------------- */

/* BODY TYPOGRAPHY*/

body {

    /* BASE FONT SIZE FOR ALL TYPE ON PAGE */

    font-size: 1rem;                                     

    /* BASE TYPEFACE/FONT FOR ALL TEXT/TYPE ON PAGE */

    font-family: 'montserrat', sans-serif;

    /* BASE LINEHEIGHT FOR ALL TEXT/TYPE ON PAGE */

    line-height: 1.7em;

/* BASE FONT COLOUR FOR ALL TEXT UNLESS CHANGED */
    
    color: white;
    
}

/* HEADINGS TYPOGRAPHY & STYLES UNLESS CHANGED */

h1 {
    font-family:proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 10px;
    text-align: center;
}

h2 {
    font-family:proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 1rem;                               
    letter-spacing: 15px;
    text-align: center;
}

h3 {
    font-family:proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 5px;
    text-align: center;
}

h4 {
    font-family:proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 5px;
    text-align: center;
}

h5 {
    font-family:proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 5px;
    text-align: center;}

h1,
h2,
h3,
h4,
h5,
h6,
P {margin-bottom: 1rem;
    margin-top: 1rem;}
/* -----------------------------------------PARAGRAPH TYPOGRAPHY & STYLES--------------------------------------*/
   
P{  font-size: 1rem;
    text-align: center;
    line-height: 40px;
}
    
    
/* ------------------------------------------MOBILE-FIRST LAYOUT ----------------------------------------------*/ 
    
html {background-color: #303030;}


/* --- --------------------------------------SECTION PADDING---------------------------------------------- */
     

.logo {  
    max-height: ;
    width: 100%;
    margin: ;
    }

#about,{
    padding-top:0px;
    padding-bottom: 0px;
margin: 0px;} 


/*-----------------------------------------ABOUT SECTION PHOTOGRAPHY------------------------------------ */

#about {
    background-color: #303030;
    text-align: center;
    min-height: 800px;
    max-height: 1000px;
    
}


#about h2 {font-size: 1.8rem;
        font-weight: 500;
        color: #6ec6d9;
        letter-spacing: 7px; }

/* ------------------------------------------TABLET-PORTRAIT LAYOUT -------------------------------------------*/


@media only screen and (min-width: 600px) and (max-width: 900px){
    
    html {background-color: #303030;}

/* --------------------------------------------SECTION PADDING------------------------------------------- */

   
    #about,
 {
        padding-top: 10px;
        padding-bottom: 10px;
        max-width: 900px;}

   


/* ---------------------------------------------WEBSITE SECTIONS-------------------------------------------*/


    


#about {
    background-color: #303030;
    text-align: center;
    min-height: 700px;
    
}

#about h2 { 
    
            font-size: 2.4rem;
            color: #6ec6d9;
            letter-spacing: 10px; }

#about p {  font-size: 1.15rem;
            text-align: center;
            display: inline-block; }


    }

/* --------------------------------------TABLET-LANDSCAPE LAYOUT ----------------------------------------------*/

@media only screen and (min-width: 900px) and (max-width:1200px ) {
        
        
        html {background-color: #303030;}



    
      
  
    }

/*----------------------------------------ABOUT SECTION PHOTOGRAPHY---------------------------------------*/

    #about {
        min-height: 500px;
        background-color: #303030;}
    
  
    #about p {
        font-size: 1.22rem;
        text-align: center;
        line-height: 40px;
        padding-top: 20px;
    letter-spacing: 2px;}
    
    
    
        
/* -----------------------------------------------DESKTOP LAYOUT --------------------------------------------- */

@media only screen and (min-width: 1200px) and (max-width: 1400px) {

    html {
        background-color: #303030;}



   
/*---------------------------------------------NAVAGATION SECTION---------------------------------------*/
    
    
   
             

/*---------------------------------------------ABOUT SECTION PHOTOGRAPHY-------------------------------------- */

    #about {
        min-height:800px;
        background-color: #303030;}

/*----------------------------------------ABOUT SECTION PHOTOGRAPHY HEADER-------------------------------------- */
    #about h2 {
        font-size: 3rem;
        letter-spacing:10px;
        color: #6ec6d9;
        text-align: center;
    
    }
    
        
/*--------------------------------------ABOUT SECTION PHOTOGRAPHY PARAGRAPH------------------------------------ */
    #about p {
        font-size: 1.4rem;
        line-height: 50px;
        padding-top: 10px;
        }
    
    



/*----------------------------------------------DESKTOP-LARGE LAYOUT ----------------------------------------- */
@media only screen and (min-width: 1400px) {

    html {background-color: white;}

/* ----------------------------------------SECTION PADDING--------------------------------------------------- */

    header {
        height: 70px;
        width:1800px;
        background-color: #6ec6d9;
        margin: auto;}

   
    #hero,
    
    #about,
    
    #portfolio,
  
    footer
        {max-width:1800px;
    margin: auto;}
    
/*---------------------------------------------NAVAGATION SECTION--------------------------------------------*/

    
nav ul a {
        text-decoration: none;
        color: white;
        padding: 20px;
        font-size: 1.7rem;
        font-weight: 600;
        float:left;}
        
        
    nav ul {
        list-style: none;
        display: flex;
        float: left;}
    
    nav ol {

        list-style: none;
        display:flex;
        float: right;}
      
    nav ol a {padding: 20px;}

/* ---------------------------------------------WEBSITE SECTIONS--------------------------------------------- */


/*------------------------------------------------HERO SECTION----------------------------------------------- */

    #hero h1 {display: none;
        padding-top: 100px;
   
        letter-spacing: 20px;
        
        font-size: 4rem;}
    
    #hero h2 {letter-spacing: 5px;
            font-size: 1.7rem;}

    
    
    #hero {
        max-width: 1800px;
        min-height: 1000px;
        background-image: url("../img/nurse.jpg");
        background-position: 50% 100%;
        background-size: cover;
    }
    
/* -----------------------------------------ABOUT SECTION PHOTOGRAPHY----------------------------------------*/

    #about {
        min-height: 700px;
        background-color: #303030;
        margin: auto;
    }

/* --------------------------------------ABOUT SECTION PHOTOGRAPHY HEADER----------------------------------------*/
    #about h2 {
        font-size: 3rem;
        letter-spacing: 15px;
    
    }
/* -------------------------------------ABOUT SECTION PHOTOGRAPHY PARAGRAPH--------------------------------------*/
    #about p {
        
        font-size: 1.4rem;
        text-align: center;
        line-height: 40px;
        letter-spacing: 1px;}
    
    
    .watch {display: inline-block;
            max-width: 49%}
    
    
    .catherine {display: inline-block;
            max-width: 24.7%}
    .prison {display: inline-block;
            max-width: 23%}
    
    .hope { display: none;  max-width: 20%;}
    .juliet {display: none;max-width: 20%}
    
    
    .stop {display: inline-block;
            max-width: 20%}
    
    
    .bus {display: inline-block;
            max-width:35%}
    .anna {display: inline-block;
            max-width: 37%}

/* -----------------------------------------------PORTFOLIO SECTION-------------------------------------------*/

    #portfolio {
                text-align: center;
    margin: auto;}
    
/* ------------------------------------------PORTFOLIO SECTION HEADER---------------------------------------*/

    #portfolio h2 {
        
        letter-spacing: 15px;
        text-align: center;
    
    }
 /* ----------------------------------------PORTFOLIO SECTION IMAGE GRID---------------------------------------*/  
    #portfolio img {
        
    transition: 1s;
    display: inline;  
    margin-left: 20px;
max-width: 23%;}
    

/*-------------------------------------------------FOOTER SECTION---------------------------------------------*/

    footer ul {

        list-style: none;
        display: flex;
        justify-content: center;}

    footer {background-color: #aaaaaa;
    margin: auto; }
/*-------------------------------------------FOOTER SECTION PARAGRAPH------------------------------------------*/
    footer p {
        text-align: center;
        line-height: 50px;
        font-size: 1rem;}
    
    
    
}