* {
    /* font-family: 'Roboto', ; */
    font-family: 'Rockwell', serif;
/*  font-family: rockwell; */
   
}

html,

body { 

margin: 0;
padding: 0; 
    

background-image: 
url("../images/IMG_4563blurcopy.jpeg");
background-repeat: no-repeat;
background-size: cover;  
}


header {
 background-color: black; 
width: 100%;
height: 113px;
display: flex;
align-items: center;
justify-content: space-around;    
}

.logo {
    margin-left: 0px;
}
 

h1 {
    color: white;
    padding: 1.25em;
}

h2 {
    font-size: 2em;
    color: darkblue;
    margin-left: 30px;
}

h3 {
    color:darkblue;
    
}

h4 {
    font-size: 1.25em;
    color: white;
    text-shadow:5px 5px 10px black;
}

h5 {
    font-size: 2em;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav {
    display: flex;
    justify-content: space-around;
    width: 30%;
}   

.navlink {
    list-style: none;
    margin: 0;
}
    
.navlink a {        
    color: #ccc;
    text-decoration: none;
    font-size: 1em;
}  

.slogan {
    text-align: center;
    grid-column: 1 / span 12;
    font: white;
    margin: auto;
    background-color: black;
    width: 100%;
    margin-top: -10px;
    margin-bottom: -10px;
}

img {
    max-width: 100%;
}


.page-slider {
    height: 675px !important;
    margin: auto !important;
    max-width: 1200px;
}

btn {
    grid-column: 2 / span 10;
    display: block;
    text-align: center;
}

.view_all, .view_all:visited {
  color: darkblue;  
 font-weight: 700; 
}
 

.hero-image {
    display: grid;
    grid-column: 2 / span 10;
    margin: auto;
    } 

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;    
}

.intro {
    grid-column: 3 / span 8;
    text-align: center;
}

.container2 {
    grid-column: 2 / span 6;
    margin-right: 30px;

}

.home {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
    grid-column: 1 / span 12;   
}

section.title {
    grid-column: 1 / span 12;
}

/*  Home Page; */




section.about {
    grid-column: 2 / span 10;
    
}

section.introtext {
   grid-column: 2 / span 10;
    margin-top: -30px;
    margin-left: 0px;
    margin-right: 20px;
    
}


section.abouttext {
    grid-column: 1 / span 12;
    margin-top: -50px;
    margin-left: 30px;
    margin-right: 20px;
    
}


section.photo {
    grid-column: 9 / span 4;
   
}

/*  Work Page; */

   

.summary {
    text-decoration: none;
}

section.portrait1 {
    grid-column: 1 / span 4;
    margin-left: 30px;
    margin-right: 0px;
    
}

section.portrait2 {
    grid-column: 5 / span 4;
    margin-left: 15px;
    margin-right: 10px;
    
}

section.portrait3 {
    grid-column: 9 / span 4;
    margin-right: 30px;
   
}




section.photo1 {
    grid-column: 1 / span 4;
    margin-left: 30px;
    margin-right: 0px;
    margin-top: -25px;
}

section.photo2 {
    grid-column: 5 / span 4;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -25px;
}

section.photo3 {
    grid-column: 9 / span 4;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: -25px;
}

section.photo4 {
    grid-column: 1 / span 4;
    margin-left: 30px;
    margin-right: 0px;
    margin-top: -15px;
}

section.photo5 {
    grid-column: 5 / span 4;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -15px;
    
}

section.photo6 {
    grid-column: 9 / span 4;
    margin-left: 0px;
    margin-right: 30px;
    margin-top: -15px;
}


/*  Individual Production Page; */



section.trailer {
    grid-column: 2 / span 6;
    margin-top: -10px;
    
   
}

section.poster {
    grid-column: 8 / span 4;
    margin-top: -10px;
     
}



/*  Contact Page; */

section.links {
    grid-column: 6 / span 8;
    
}

section.contact {
    grid-column: 6 / span 8;
   
}




/* .work {
    background-color: bisque;
} */



footer {
    grid-column: 1 / span 12;
  text-align: center;  
}





/* mobile settings; */


@media only screen and (max-width: 860px) {
    
    header h1 {
    font-size: 1.25em;
    }

.logo {
    flex-basis: 30%;

    }
    
    .nav {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }    
    
.navlink a { 
    flex-basis: 100%; 
    color: #ccc;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    
}

    

  
/* Home Page */
    
.hero-image {
        grid-column: 2 / span 12;    
}      
    
section.poster {
    grid-column: 8 / span 3;
    margin-top: -5px;
    margin-left: -40px;
  
   
}

/* About Page */

    section.portrait1,
    section.portrait2,
    section.portrait3 {
    grid-column: 2 / span 10;
    margin-left: 0px;    
    
}
    
    section.photo1,
    section.photo2, 
    section.photo3,
    section.photo4,
    section.photo5,
    section.photo6, 
    section.trailer,
    section.poster
    {
    grid-column: 1 / span 12;
    align-items: center;
    margin-left: 165px;
    margin-right: 165px;    
}


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

header {
    flex-wrap: wrap;
    height: auto;
    }

.logo {
    flex-basis: 30%;

    }

.nav {
    flex-basis: 100%;
    padding: 0px;
    }  
  
     
    
.navlink a { 
    flex-basis: 100%; 
    color: #ccc;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    
}
  
    h4 {
        font-size: 1em;
    }
    
    h5 {
        font-size: 1em;
    }    
/* Home Page */
    
.hero-image {
        grid-column: 1 /span 12;    
    }      
    
  
    
section.portrait1,
section.portrait2,
    section.portrait3 {
    grid-column: 2 / span 10;
    }       
   
   
    section.title {
        margin-right: 30px;
    }   
    
    section.photo1,
    section.photo2, 
    section.photo3,
    section.photo4, 
    section.photo5,
    section.photo6,
    section.trailer,
    section.poster 
    {
    grid-column: 1 / span 12;
    margin-left: 30px;
    margin-right: 30px;
}   

    section.contact {
        grid-column: 3 /span 8;
    }
   
    
.intro {
    grid-column: 3 / span 8;
    text-align: center;
}      
    
}