/*//// STYLE.CSS SHEET FOR CCG WEBSITE ////*/
/*

Notes:
All sections are labeled clearly for their use
To change a colour use COMMAND F to find and then find and replace the hex code (ie.. #000000 -->> #1A1A1A)
The same method can be used to replace fonts or font sizes, or it can be done manually
To tinker with website spacing change the height of .divider's
Google web fonts have been used
CSS is pretty self explanatory so changing anything shouldn't be too difficult 

*/



/*//// Body ////*/

body {
  background-color: #000000;  
  background-attachment: fixed;  
  margin:0px;
  padding:0px; 
  
}



/*//// Navigation ////*/

.topnav {
  background-color: #000000; 
  overflow: hidden;
  float: center;
  display: block; 
  width: 96.5%;   
  margin-left: auto;
  margin-right: auto; 
  text-align: center;
  padding: 18px 25px; 
   
}

.topnav a {
  color: #FFFFFF;                 
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  padding: 18px 35px; 
  font-size: 28px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;  
  overflow: hidden; 
   
}

.topnav a:hover {
  background-color: #1A1A1A; 
  color: #FFFFFF;                        
  margin:0px; 
    
}

.topnav a.active {
  background-color: #1A1A1A;
  color: #C4C4C4; 
  margin:0px;
    
}

.navbar {
  background-color: #1A1A1A; 
  height: 6px;
  width: 100%;
     
}



/*//// Images ////*/

img {            
  display: block;
  margin-left: auto;
  margin-right: auto;
  image-orientation: from-image;
  
}

iframe {            
  display: block;
  margin-left: auto;
  margin-right: auto;
  image-orientation: from-image;
  
}



/*//// Dividers ////*/

.divider1 {     
  height: 65px;
    
}

.divider2 {     
  height: 10px;
    
}

.divider3 {     
  height: 30px;
    
}

.divider4 {     
  height: 5px;
    
}

.divider6 {     
  height: 140px;
    
}



/*//// Text ////*/

h1 {

  color: #CCCC33;          
  font-size: 40px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
    
}

h2 {

  color: #CCCC33;       
  font-size: 33px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: normal;
      
}

h3 {

  color: #F3F3F3;       
  font-size: 22px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
      
}

p {

  color: #F3F3F3;        
  font-size: 18px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
    
}

a {
  text-decoration: none; 
    
}



/*//// Footer ////*/

.footer {
  background-color: #1A1A1A; 
  overflow: hidden;
  float: center;
  display: inline-block; 
  width: 96.5%;
  margin-left: auto;
  margin-right: auto; 
  text-align: center;
  padding: 10px 25px; 
   
}
    
.footer a {
  color: #C4C4C4;   
  padding: 18px 100px; 
  font-size: 14px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif; 
  overflow: hidden; 
   
}



/*//// Gallery ////*/

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-content: space-evenly;
    
}

.grid .frame {
  text-align: center;

}

.frame {
  position: relative;
  padding: 0;
  width: 300px;
  display: block;
  cursor: pointer;
  overflow: hidden;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 20px;
    
}

.content {
  border: 0;
  opacity: 0;  
  font-size: 22px;
  position: absolute;
  top: 0;
  left: 0;
  color: #FFFFFF;
  background-color: #00000050;
  width: 300px;
  height: 200px;
  text-align: center;
  margin: ;
}

.frame .content:hover { 
  opacity: 1; 

}      

.frame .content:hover .text1 {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: 22px;
  color: #CCCC33;
  opacity: 1;
    
}

.frame .content:hover .text2 {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: 16px;
  color: #FFFFFF;
  opacity: 1;
    
}



/*//// Buttons ////*/

.btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  text-align: center;
  width: 100px;
  background-color: #1A1A1A;
  border: none;
  color: #FFFFFF;
  padding: 12px 12px;
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
    
}


.btn:hover {
  background-color: #C4C4C4;
    
}

.menu {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-align: center;
  width: 250px;
  background-color: #000000;
  border: none;
  color: #FFFFFF;
  padding: 18px 12px;
  cursor: pointer;
  font-size: 28px;
  text-decoration: none;
    
}


.menu:hover {
  background-color: #1A1A1A;
    
}

.link {
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-align: center;
  width: 360px;
  background-color: #000000;
  border: none;
  color: #FFFFFF;
  padding: 18px 12px;
  cursor: pointer;
  font-size: 28px;
  text-decoration: none;
    
}


.link:hover {
  background-color: #1A1A1A;
    
}