html {
    font-size: 100%; /* with the standard base font size of 16px this will be equal to 10px */
}


/* { border: 1px solid red;} */

*, *:before, *:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    padding:0;
    margin:0;
}


/*--------------------------------------------- mobile ---------------------------------------------*/
@media screen and (max-width:40em) {
    html {
        font-size: 90%;
    }
    
    .flexgrid {
        display:flex;
        justify-content: center;
        flex-direction:column;
        flex-flow:wrap;
        width:100%;
        position:relative;
    }
    
    .container-width-std {
        width:100%;
    }
    
    
    .container-width-narrow {
        width:100%;
    }     
    
    .three-col {
    }
    
    .three-col > * {
        width:100%;
    }
    
    .two-col > {
        width:100%;
    }    
    
    
    .two-col > * {
        width:100%;
        padding:3rem;
        
    }
    
     .one-col {
    }

    .one-col > * {  
        width:100%;
    }
    
    
    .padding-std {
        padding:3rem;
    }
    
    .text-large {
        font-size:1.3rem;
        line-height:130%;
    }
    
    .text-med {
        font-size:1rem;
        line-height:140%;
    }
    
     .text-small {
        font-size:1rem;
        line-height:160%;
    }
    
    h1 {
    	font-size:3rem;
		margin-left:-0.5rem;
		margin-top:-1.2rem;
    }
    
    .skinny-col {
        width:100%;
    }
    
    
    .collapsible-row {
    
    }
    
    .collapsible-2col {
        width:100%;
    }
	
	
	header a, footer a{
		font-size: 88%;
		font-family: 'Montserrat', sans-serif;
	}
}




/*--------------------------------------------- narrow ---------------------------------------------*/

@media screen and (min-width:40em) and (max-width:65em){
    .container-width-std {
        width:100%;
    }
 
    .flexgrid {
        display:flex;
        justify-content: center;
        flex-direction:row;
    }
    
    .three-col {
        display:flex;
        justify-content: space-between;
        align-items:stretch;
    }
    
    .three-col > * {
        width:32%;
    }
    
    .two-col {
        display:flex;
        justify-content: center;
        align-items:stretch;
    }

    .two-col > * {
        font-size:2vw;
        width:50%;
    }

    .one-col > * {  
        width:100%;
    }
    
    .padding-std {
        padding:5vw;
    }
    
    .text-large, h2 {
        font-size:3vw;
        line-height:150%;
    }
    
    .text-med {
        font-size:1.9vw;
        line-height:140%;
    }
    
     .text-small {
        font-size:1.5vw;
        line-height:140%;
    }
	
    h1 {
       	font-size:10vw; 
		margin-top:-10vw;
		margin-bottom:-1.5vw;
		margin-left:-2vw;
    }	
    
    .skinny-col {
        width:70%;
    }
    
    .container-width-narrow {
        width:65%;
        margin-left:auto;
        margin-right:auto;
    } 
    
    .collapsible-row {
        display:flex;
        justify-content: center;
        align-items:stretch;       
    }
    
    .collapsible-2col {
        width:50%;
    }
    
    .flexgrid {
        display:flex;
        justify-content: center;
        flex-direction:row;
        flex-flow:wrap;
        width:100%;
        position:relative;
    }   
}



/*--------------------------------------------- wide ---------------------------------------------*/
@media screen and (min-width:65em){
    .container-width-std {
        width:60rem;
    }
    
    .container-width-narrow {
        width:40rem;
    }      
    
     .three-col {
        display:flex;
        justify-content:space-between;
        align-items:stretch;
        margin-left:auto;
        margin-right:auto;         
    }
    
    .three-col > * {
        width:31%;      
    }
    
    .two-col {
        display:flex;
        justify-content: center;
        align-items:stretch;
    }

    .two-col > * {
        width:30rem;
    }

     .one-col {
         width:100%;
    }

    .one-col > * {  
        
        margin-left:auto;
        margin-right:auto; 
    }
    
    
    .padding-std {
        padding:3rem;
    }    
    
    .text-large, h2 {
        font-size:2rem;
        line-height:150%;
    }
    
    .text-med {
        font-size:1.2rem;
        line-height:150%;
    }
    
     .text-small {
        font-size:1rem;
        line-height:140%;
    }
    
    .text_head , h1 {
        font-size:5rem; 
		margin-top:-5rem;
		margin-bottom:-1rem;
		margin-left:-0.9rem;
    }
    
    .skinny-col {
        width:70%;
    }
    
    .collapsible-row {
        display:flex;
        justify-content: center;
        align-items:stretch;       
    }
    
    .collapsible-2col {
        width:50%;
    }
    
    .flexgrid {
        display:flex;
        justify-content: center;
        flex-direction:row;
        flex-flow:wrap;
        width:100%;
        position:relative;
    }    
}