/*Colour variables*/
:root {
  --orange: #FF8C42;
  --darkorange: #FF771F;
  --lightorange: #FFA064;
  --shadoworange: #DA722F;
  --red: #B80C09;
  --otherred: #BD2220;
  --darkred: #941816;
  --white: #FFF2F1;
  --grey: #2F2F2F;
  --lightgrey: #4C4C4C;
  --othergrey: #535353;
  --lightergrey: #848484;
  --black: #000F08;
}




body { /*OVERALL BODY*/
    background-color: var(--grey);
    margin: 0;
    padding: 0;
    
}

/*My logo styling*/

.footerlogo {
  display: block;
  margin-left: -5em;
  margin-top: -100px;
  width: 80px;
  opacity: 60%;
}

/* Assigned names for grid*/
.header {grid-area:header;}
.main {grid-area:main;}
.footer {grid-area:footer;}

/*The Overall Grid (Mobile)*/

.grid {
    display:grid;
    grid-template-areas: 
    'header'
    'main'
    'footer';   
    
    
    
}

/*Header - flex layout with both headline and navigation*/

.header {  
    display: flex;
    flex-direction: column; /*Change this value in media query for desktop*/
    
    
    
}

/*Header styling, without the navigation*/

.headline {
    background-image: linear-gradient(var(--darkred), var(--otherred), var(--otherred), var(--darkred)); /*Headline gradient*/
    /* background-color: var(--orange); */
    font-family: "Saira", sans-serif;
    font-weight: 400;
    color: var(--white);
    padding: 1rem;
    margin: 0px;
    
    
    
}

.headlinetext1 {
  font-size: 1rem;
  letter-spacing: .6em;  
  text-shadow: .2rem .2rem 3px var(--lightorange);
  font-weight: 400;
  margin: 0;
}
.headlinetext2 {
  
  text-align: center;
  font-size: clamp(3rem, 2.5vw, 3.3rem);
  letter-spacing: .3em;  
  text-shadow: 2px 2px 5px var(--grey);
  margin: 0px;
  font-weight: 400;
}
.headlinetext3 {
  font-size: 1rem;
  text-align: right;
  letter-spacing: .6em;  
  text-shadow: -.2rem -.2rem 3px var(--lightorange);
  font-weight: 400;
  margin: 0;
}

/*Navigation*/

a { /*Removing all attributes from the <a> tag */
  text-decoration: none;
  color: var(--white);
}
.dropdown a {
  color: var(--black)
}

.container {
  display: flex;
  flex-direction: column; /*Change in media query*/
  

  margin: 0px;
  padding: 0px 4vw;
  

  text-align: left;
  list-style: none;
  
  background-color: var(--lightgrey); 

  border-bottom: 2px solid var(--black);
  border-top: 2px solid var(--black);

  box-shadow: inset 2px 2px 4px var(--black);
  
}

.container li {  /* Styling for every item in the navigation list */
  font-size: 1.5rem;
  font-family: "Saira", sans-serif;
  font-weight: 200;
  
  margin: .7rem;
  padding: .4rem;
  padding-left: 3rem;
  border-radius: 1rem;
  border: 2px solid var(--black);
  
  text-shadow: 2px 2px 5px var(--black);

  /* box-shadow: inset 2px 2px 2px var(--black); */
  
}

.container .dropdown { /*Styling for the dropdownable nav list items*/
  background-color: var(--darkorange);
  text-shadow: 2px 2px 5px var(--lightgrey); /*overwriting the other shadow color cuz black was too much on the orange*/
}

.container .notdrop { /*Styling for the NOT dropdownable nav list items*/
  background-color: var(--grey);
  color: var(--white);
  
  
}
.container .notdrop:hover {
  box-shadow: inset 0 1px 3px var(--lightergrey), 1px 1px 5px var(--grey);
  background-color: var(--othergrey);
  font-weight: 400;
  cursor: pointer;
}



.fa-bars { /*Burger menu icon styling, remove this in media query?*/
  
  float: right;
  padding: .4rem;
  padding-right: 2rem;
  
  
}





/* Dropdown */ 

    .container > .dropdown:hover {
      background-color: var(--orange);
      box-shadow: inset 0 1px 3px var(--white), 0 1px 2px var(--grey);
      font-weight: 400;
    }
    .dropdown {
      cursor: pointer;
      border: none;
      
    }


    .dropdown-content { /*Dropdown not showing without hovering*/
      display:none;
      position: absolute;   
      
    }


    .dropdown-content a {
      display: block;


      animation-name: dropdown;
      animation-duration: .5s;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0,.61,.37,1); /*Used Cubic-bezier.com, did a harsher ease out curve: https://cubic-bezier.com/#0,.61,.37,1 */
      
      
      
      border-left: 1px solid black;
      border-right: 1px solid black;
      border-top: 1px solid black;

      text-align: left;
      background-color: var(--darkorange);
      text-decoration: none;
      color: black;  
      font-size: 20px;
      width: 13.2rem;
      padding: .2em;
      padding-left: 2rem;
      font-weight: 200;


      
    }



    .lastdd-content {
      border-bottom: 1px solid black;
    }


    .dropdown-content a:hover {
      background-color: var(--orange);
      box-shadow: inset 0 1px 2px var(--white), 0 1px 2px var(--grey);
      font-weight: 400;
      
      
    }

      /*Animation*/
    @keyframes dropdown {
      from {
        
        height: 0px;
        opacity: 0%;
        
        
      }
      to {
        
        height: 1.7em;
        opacity: 100%;
        
      }

      
    }



    .dropdown:hover .dropdown-content {
      display: flex;
      flex-direction: column;
      
    }






/*Main Styling*/

.main {
  
  min-height: 35vh;
}

.main h2 {
  font-family: "Saira", sans-serif;
  text-align: center;
  color: var(--orange);
  font-size: 3rem;
  margin-top: 2rem;
  padding: 0;
  letter-spacing: .2rem;
  font-weight: 300;
  text-shadow: 2px 2px 5px var(--black);
  
}

.main h3 {
  font-family: "Saira", sans-serif;
  text-align: center;
  color: var(--orange);
  font-size: 2rem;
  margin-top: 2rem;
  padding: 0;
  letter-spacing: .2rem;
  font-weight: 500;
}

.main p {
  font-family: "Raleway", sans-serif;
  color: var(--white);
  
  
  margin-left: 2rem;
  margin-right: 2rem;
  

}

.maincontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1rem; 
  
}

.maincontainer2 {
  display: flex;
  flex-direction: column;
  
  
  margin: 1rem; 
  
}

.mainchild {
  
  background-color: var(--lightgrey);
  margin-bottom: 5rem;
  text-align: center;
}
.mainchild2 {
  background-color: var(--lightgrey);
  text-align: center;
}
.mainchild3 {
  
  background-color: var(--lightgrey);
  text-align: center;
  margin-bottom: 5rem;
  text-align: center;
}

/*Photo styling in the main*/

.logos {
  max-width: 85vw;
  max-height: 48vw;
  display: block;
  margin: auto;
  margin-bottom: 1rem;
}

.photo {
  border: 1px solid var(--black);
  border-radius: 10px;
  margin-top: 1rem;
  max-width: 85vw;
  max-height: 48vw;
  width: 32rem;
  height: 18rem;
}

.thumbphoto {
  
  max-width: 85vw;
  max-height: 48vw;
  margin-top: 1rem;
  margin-bottom: 1rem;
  
}


.photoabout {
  max-width: 85vw;
  max-height: 48vw;
}




.hamphoto {
  display: block;
  margin: auto;


  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 85vw;
  max-height: 48vw;
}

.coverphoto {
  display: block;
  margin: auto;
  margin-top: 2rem;
  max-width: 85vw;
  max-height: 48vw;
  width: 32rem;
  height: 18rem;
}

/*Videos styling*/

iframe {
  max-width: 85vw;
  max-height: 48vw;
}


/*Footer Styling*/

.footer {
  font-family: "Raleway", sans-serif;
  text-align: left;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  padding-left: 2rem;
  background-color: rgba(148, 24, 22, 0.5);
  color: var(--white);
  
}
.footer p {
  padding: 0px;
  margin-left: 10vw;

}
.footer a {
  opacity: 50%;
}
.footer a:hover {
  text-shadow: 1px 1px 3px var(--grey);
  opacity: 100%;
}

/*Contact Form Styling*/

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--black);
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  
}

.label {
  font-size: 20px;
  color: var(--white);
  font-family: "Raleway", sans-serif;
  
}

.contactcontainer {
  margin: auto;
}



textarea {

  background-color: var(--white);
  color: var(--white);
}
#subject {
  color: var(--black);
}

input[type=submit] {
  background-color: var(--orange);
  color: var(--white);
  padding: 1rem;
  border: 1px solid var(--black);
  border-radius: 4px;
}
input[type=submit]:hover {
  background-color: var(--lightorange);

}



#text {
  text-align: left;;
}

.text {
  text-align: left;

}



/* Tablet */

@media only screen and (min-width: 550px) and (max-width: 959px){
  .grid {
    grid-template-areas: 
    'header header header'
    'main main main'
    'footer footer footer';
    
    
  }

.container li {
  width: 60vw;
  margin: .7rem auto;
}

}

/* Desktop */



@media only screen and (min-width: 960px) {
  .grid {
    display: grid;
    grid-template-areas: 
    'header header header'
    'main main main'
    'footer footer footer';
    
  }


.headline{
  background-image: none;
  border: none;
  
}

.header{
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(var(--darkred), var(--otherred), var(--otherred), var(--darkred));
    padding-left: 2rem;
    box-shadow: 0px 5px 10px var(--black);
}

.headlinetext2 {
  
  
  font-size: clamp(1.5rem, 2.5vw, 3.3rem);
  
}

  .container {
    display: flex;
    flex-direction: row; 
    border-left: 2px solid var(--black);
    

    
}
  .container li {
    padding: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    

}
.fa-bars { /*Burger menu icon styling, remove this in media query?*/
  
  float: right;
  padding: .4rem;
  padding-left: 2rem;
   
}



.main {
  min-height: 70vh;
}


.maincontainer {
  flex-direction: row;
  align-items: flex-start;
  
}

/*
.mainchild {
  display: flex;
  flex-wrap: wrap;
  
  
  
}
.mainchild2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}


*/
.mainchild {
  padding: 1vw;
  margin-left: 10vw;
  margin-right: 5vw;
  
}
.mainchild2 {
  padding: 1vw;
  margin-right: 10vw;
  
}




/*Videos styling*/

iframe {
  max-width: 25vw;
  max-height: 14vw;
}

/*Photo styling*/

.logos {
  max-width: 25vw;
  max-height: 14vw;
}

.thumbphoto {
  
  max-width: 25vw;
  max-height: 14vw;
}



.photo {
  max-width: 25vw;
  max-height: 14vw;
  width: 32rem;
  height: 18rem;
}


form {
  
  margin: auto;
  
}

/*
.photo {
  width: 20vw;
  height: 20vw;
  
}*/

}