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

@media (min-width: 45em) {
  .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: 12px;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust: 100%;
	    text-align: center;                                                         
	}

	html, body, div, span, h1, p, blockquote {
		font: inherit;
	}

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

	h1 {
		font-size: 350%;
		line-height: 150%;
		padding-left: 10px;
   }	

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

	h3 {
		font-size: 200%;
		line-height: 100%;
   }	

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

   .translucentAU {
        background-color: #000;
        background-color: rgba(0,0,0,0.7);
        color: #ffcc00;
   }

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

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

  ul .heading {font-weight: normal; list-style: none; margin-bottom: 15px; margin-left: -15px;}

  .boxStyle{
    width: 75%;  
    padding: 5%; 
    border-radius:30px; 
    background-color: #F6E8CA;  
    margin: 0 auto;
  }

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

/* Scroll fade
*/

.fadeIn {
    opacity:0;
}

.centerAlign {
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
}	

.clear { clear: both; }

/* background
*/

.brownBG { 
    background-image: url('transparentBN.gif');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}

.headerbg { 
    background-image: url('headerbg.jpg');
    background-repeat: no-repeat;
    background-position: top;
/*    background-position: center; */
/*    background-size: cover; */
    background-size: 100%; 
    width: 100%;
	background-color: #000;
	display: block;  
	margin: 0;
	padding: 0;

}

/* image auto resize
*/

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





/* 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;

}



/*
## Website page
## Functions
*/


.startDiv {
    display: show;
    padding: 0;
	margin: 0 auto;   
	}

.hiddenDiv {
    display: none;
    padding: 0;
	margin: 0 auto;   
	}

/* Older browsers */
html { font-size: 12px; }

/* Modern browsers only need this one */

@media screen and (min-width: 25em){
  html { font-size: calc( 12px + (18 - 12) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 12px + (18 - 12) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){

html { font-size: calc( 12px + (18 - 12) * (100vw - 400px) / (800 - 400) ); }
}