/* Ungrid
   This is the master controller for columns
   The 100% attribute is needed in the specific media breakpoint.
*/

@media (min-width: 55em) {
  .row { width: 100%; display: table; table-layout: fixed; }
  .col { display: table-cell; }
}


/* rows and cols
*/

.row {                                                                          
    margin-top: 1em;                                                            
    margin-bottom: 1em;    
}                                                                               
                                                                                                                                       																			
.col {                                                                          
    height: auto;                                                                
    vertical-align: top;                                                     
    text-align: center;                                                     
    line-height: auto;                                                           
}                                                                               
                                                                                
.col:nth-of-type(2n) {                                                          
    background-color: transparent;                                                  
}                                                                               

/* basic CSS note its all percent based
*/

	html {
		font-size: 100%;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust: 100%;
	    text-align: center;                                                         
	}

	html, body, div, span, h1, p, blockquote {
		font-size: 100%;
		font: inherit;
	}

	body {
		margin: 0px;
		margin-top: 0px;
                font-family: 'TeXGyreAdventorRegular';	
		background-color:  #121212;
	}

	h1 {
		font-size: 250%;
		line-height: 150%;
		color: #ffdf69;
   }	

	h2 {
		font-size: 130%;
		line-height: 150%;
		text-align: left;
		padding-left: 10px;
   }	

	h3 {
		font-size: 80%;
		line-height: 100%;
		font-weight: normal;
		color: #ffdf69;
   }	

   .translucent {
        background-color: #000;
        background-color: rgba(0,0,0,0.9);
   }

   .gold {
		color: #ffdf69;
   }
   

	p {
		font-size: 100%;
		line-height: 150%;
		text-align: left;
		padding-left: 10px;
   }

	a {  font-size: 100%; 
	     color: #B5B5B5; 
     	 text-align: left;
 		 line-height: 150%;
    }

	a:hover {  font-size: 100%; 
	     color: #ffdf69; 
     	 text-align: left;
 		 line-height: 150%;
    }


.grey {font-size: 100%; color: #B5B5B5; line-height: 150%;}
.greyBox {font-size: 100%; color: #B5B5B5; line-height: 150%;}
.greySmall {font-size: 80%; color: #B5B5B5; line-height: 150%;}
.clear { clear: both; }


img {
    max-width: 100%;
    height: auto; 
    object-fit: contain;
}


 div.smLogo {
    display: none;
    text-align: center;
  }


  .smallCaps {
    font-variant: small-caps;
	letter-spacing: .2rem;
  }

  .rounded { padding: 2%;
    background-color: #232323;
	width: 90%;
	margin: auto;
    border: 2px solid #232323;
    border-radius: 15px;
    -moz-border-radius: 25px;
   }


#titleDiv { padding: 2% 0% 0% 0%; }	 



/* Desktops 
*/

@media only screen and (min-width: 1600px) {  

   html{
		font-size: 120%;
		lineheight: 120%;
		-webkit-text-size-adjust: 120%;
       }

	h1 {
		font-size: 275%;
		line-height: 200%;
       }	

 div.smLogo {
    display: none;
  }
}                                                                               

/* Breakpoints
*/

/* keep breakpoints simple let them be CUMULATIVE
*/

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

     h1{
		font-size: 250%;
		-webkit-text-size-adjust: 250%;
       }
 

 div.smLogo {
    display: none;
  }

}

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

     h1{
	    
		font-size: 220%;
		-webkit-text-size-adjust: 220%;
       }


 div.smLogo {
    display: none;
  }

}


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

    h1 {
	    
		font-size: 220%;
		-webkit-text-size-adjust: 220%;
       }

     h2{
		font-size: 120%;
		-webkit-text-size-adjust: 110%;
       }


 .dots {
    display: none;
  }

.rounded {
    background-color: #232323;
    border: 2px solid #232323;
}



}


/* Cutoff for phones to begin landscape and portrait
*/

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

	 .col { width: 100% !important; } 

      h1 {
	    
		font-size: 180%;
		-webkit-text-size-adjust: 150%;
       }
	  h2 { font-size: 95%;
		-webkit-text-size-adjust: 95%;
       }

/* Hide Desktop Elements */
#spacer1{
  position: absolute;
  left:-1000px; 
}
#spacer2{
  position: absolute;
  left:-1000px; 
}

.dots {
    display: none;
  }

.rounded {
    background-color: #343434;
    border: 2px solid #343434;
}

}

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

	 .col { width: 100% !important; } 


	  h1 {
	    
		font-size: 120%;
		-webkit-text-size-adjust: 120%;
       }

	  h2 {
		font-size: 85%;
		-webkit-text-size-adjust: 85%;
       }

/* Hide Desktop Elements */
#spacer1{
  position: absolute;
  left:-1000px; 
}
#spacer2{
  position: absolute;
  left:-1000px; 
}

.dots {
    display: none;
  }	 

.rounded {
    background-color: #343434;
    border: 2px solid #343434;
}


}


/* Embedded font
*/

@font-face {
    font-family: 'TeXGyreAdventorRegular';
    src: url('texgyreadventor-regular-webfont.eot');
    src: url('texgyreadventor-regular-webfont.eot?iefix') format('eot'),
         url('texgyreadventor-regular-webfont.woff') format('woff'),
         url('texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('texgyreadventor-regular-webfont.svg#webfontMYemPKqK') format('svg');
    font-weight: normal;
    font-style: normal;

}