@charset "utf-8";


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

	img.right {
		float: right;
		display: inline;
		margin: 0 0 1em 2em;
		width:  40%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	img.left {
		float: left;
		display: inline;
		margin: 0 2em 1em 0;
		width:  40%;   /* So will stay proportional to the paragraph its inside */
		min-width: 200px;  /* So won't be too small on small screens  */
	}
	
	.right {
		float: right;
		clear: none;
	}
	
	.left {
		float: left;
		clear: none;
	}

}


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

	
}


@media screen and (min-width: 700px) {
	
	.narrow {
		width: 1220px;
		margin: 0 auto;
	}
	
   header {
	   display: flex;
	   display: -webkit-flex;
	   display: ms-flexbox;
	   flex-wrap:nowrap;
	    -webkit-flex-wrap: nowrap; 
	    -ms-flex-wrap: nowrap;
	   justify-content:  space-between;          /*    flex-start, center, space-between, space-around, flex-end    */
		 -webkit-justify-content: space-between;
		 -ms-flex-pack: justify;                  /*    start, end, center, justify  */

	   align-items: stretch;                  /*    stretch, flex-start, flex-end, center, baseline    */
		-webkit-align-items: stretch;
		-ms-flex-align: stretch;
	   
	   padding-top: 3em;
   }
   
	#hdr-left {
		flex: 1 1 34%;
		text-align: left;
		margin-right: 1em;
		margin-top: .5em;
	}

	#hdr-center {
		flex: 1 1 34%;
		margin-top: .75em;

	}

	#hdr-right {
		flex: 1 1 25%;
		
	}
	
	
		
/*  -----------  SWITCHABLE SIDEBAR  ------------  */	
	
	
	.sidebar-switcher {
		margin-top:1em;
		margin-left:0;
		margin-bottom:0;
		padding: 0 1em;
		color: hsl(0, 0%, 40%);
	}
	
	.sidebar-switcher a {
		color: hsl(0, 0%, 40%);
		padding-left: .4em;
	}

	.sidebar-switcher a:hover,
	.sidebar-switcher a:focus {
		color: hsl(0, 0%, 20%);
	}
	
	.fa {
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
			font-size: 14px;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		transform: translate(0, 0);
	}
	
	.screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}
	
	
/*  ------------- SIDEBAR & MAIN CONTENT SECTIONS ------------------------------  */
	
	
	
	 .page {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
			-ms-flex-direction: column;
				flex-direction: column;
    } 
    
    .content {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    
    #main-content {
        -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
		margin-right: 1em;
		
    }
	
	
	.sidebar {
        -webkit-flex: 0 0 12em;
            -ms-flex: 0 0 12em;
                flex: 0 0 12em;
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
        transition: padding .5s ease, -webkit-flex .5s ease, color .2s ease-in .3s;
        transition: padding .5s ease, -ms-flex .5s ease, color .2s ease-in .3s;
        transition: padding .5s ease, flex .5s ease, color .2s ease-in .3s;
		overflow: hidden;
		background: hsl(0, 0%, 90%);
		padding: 1em 0 0 .5em;
		margin-bottom: 1em;
    }
    
    .sidebar-left {
        -webkit-order: 0;
            -ms-flex-order: 0;
                order: 0;
		margin-right: 1em;
		margin-bottom: 1em;
    }
    
    .no-sidebar {
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
	.hide {
        -webkit-flex: 0 0 0;
            -ms-flex: 0 0 0;
                flex: 0 0 0;
		padding: 0;
        color: hsla(0, 0%, 0%, 0);
        transition: color .2s ease, -webkit-flex .5s ease .3s, padding .5s ease .3s;
        transition: color .2s ease, -ms-flex .5s ease .3s, padding .5s ease .3s;
        transition: color .2s ease, flex .5s ease .3s, padding .5s ease .3s;
	}
    
    .hide a {
        color: hsla(0, 0%, 0%, 0);
    }

	
/*  ----------- FLEX  ------------------------------------------  */
  

    .flex-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .flex2 {
        -webkit-flex: 0 0 calc(50% - 1em);
            -ms-flex: 0 0 calc(50% - 1em);
                flex: 0 0 calc(50% - 1em);
        margin-bottom: 1em;
    }
	
	
	.flex3 {
        -webkit-flex: 0 0 calc(33% - 1em);
            -ms-flex: 0 0 calc(33% - 1em);
                flex: 0 0 calc(33% - 1em);
        margin-bottom: 1em;
    }
	
}


@media screen and (min-width: 60em) {   /* 960px  */
  
	#hdr-left {
	   flex: 1 1 34%;
	    -webkit-flex: 0 1 calc(33% - 1em);
        -ms-flex: 0 1 calc(33% - 1em);
	   min-width: 250px;  /*  Actual width of logo */
   }

   header .contact p {
	   font-size: 1.5em;
   }
	
	header #contact-btns {
		width: 80%;
	}   
    
}


@media screen and (min-width: 64em) {   /* 1024px  */

     
}