@charset "utf-8";

/*  Media Queries for Default - Wide  */


@media screen and (min-width: 400px) {  
	.overlay {
		top:20%;
}
	.overlay p {
		font-size:.8em;
	}
	
	.hdr H1 {	
	font-size: 1.5em;
	}
}


@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) {
	
   .hdr {
  
	   padding: 3em 0;
	  /* border-bottom:  1px solid #eeeeee;*/
   }
   
	#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%;
		
	}
	
		img.mobile {
		display:inline;
	}


		
/*  -----------  CONTENT FOR SIDEBAR PAGE  ------------  */
	
	  .wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
	
	
	
/*  ------------- SIDEBAR & MAIN CONTENT SECTIONS ------------------------------  */
	
	#main-content {
		order: 2;
		-webkit-order: 2;
		-ms-flex-order: 2;  
		margin-right:1em;
	}
	

	
	

	
/*  ----------- 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;
		margin: 0 auto;
		max-width: 1200px;
    }

    .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;
    }
	
	 .flex-x {                                /* Change to whatever percentage */
        -webkit-flex: 0 0 calc(70% - 1em);
            -ms-flex: 0 0 calc(70% - 1em);
                flex: 0 0 calc(70% - 1em);
        margin-bottom: 1em;
		 margin-right: 2em;
    }
	
	 .flex-y {                                /* Change to whatever percentage */
        -webkit-flex: 1 0 calc(25% - 1em);
            -ms-flex: 1 0 calc(25% - 1em);
                flex: 1 0 calc(25% - 1em);
        margin-bottom: 1em;
    }
	
	.list2 {
		-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
		
	}
	
	.listbox {
		padding-top: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 */
   }

	.hdr h1 {
		font-size: 3.2em;
		line-height: 2em;
	}
	
	section {
		margin: 3em 0;
	}
	
	#logo {
		margin-bottom: .5em;
	}
	
	.callbox {
		margin-top: 0;
		margin-right: 1em;
	}
	

	
	.col3 {
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}
	
	#logo, #intro {
		padding-left: 0;
		padding-right: 0;
	}
	
	#intro p.lead {
		font-size:1.25em;
	}
	
		
	.callbox {
		margin-right: 1em;
	}
	
	
	.callbox p {
		font-size: 2em;
	}

    
}


@media screen and (min-width: 64em) {   /* 1024px  */
	
	.container {
		padding:2em;
	}
	
	.wide {
		width: 100%;
	}
	
	.narrow {
		width: 1220px;
	}
	
	#services {
		width: 90%;
		margin: 0 auto 0 8em;
	}
	
	#widgets {
		width: 90%;
		margin: 5em auto 0 8em;
	}	


     
}

@media screen and (min-width: 1240px) {   
	
	.callbox {
		margin-right: 0;
	}

     
}