@charset "utf-8";

/*  Media Queries for Default - Wide  */


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


@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;
	}
	
	.overlay p {
		font-size:1em;
	}

}


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

	
}


@media screen and (min-width: 700px) {
	
   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: 1em;
	   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%;
		
	}
	
	.bg-image {
		background-image: url("../images/planet-bg800.jpg");
	}
	
	.overlay {
		top:20%;
	}
	.overlay p {
		font-size:1.2em;
	}
	
	
	.fw-image .overlay {
		opacity: .7;
		padding: 1em;
		top: 10%;
		left: 5%;
		width: 85%;
	}
	
	.right {
		float:right;
		clear:none;
	}
	
	.left {
		float: left;
		clear:none;
	}
	
	
	.content img {
		margin: 10px 15px;
		display: inline-block;
		width: auto;
		min-width: auto;
	}

		
/*  -----------  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;
	}
	
	
	#sidebar {
		order: 1;
		-webkit-order: 1;
		-ms-flex-order: 1;
		
		flex: 0 0 12em;   /* sidebar won't grow or shrink & will always stay at 12ems  */
		-webkit-flex: 0 0 12em;
		-ms-flex: 0 0 12em;
		
		padding: 5px 8px;
		margin-right: 2em;
		background-color: #eee;
		border-radius: 5px;
		margin-bottom: 1em;
	}
	
	#sidebar h4 {
		margin-top: .3em;
	}
	
	
	
	#sidebar {
		order: 1;
		-webkit-order: 1;
		-ms-flex-order: 1;
		flex: 0 0 12em;
		-webkit-flex: 0 0 12em;
		-ms-flex: 0 0 12em;
		padding: 5px 8px;
		margin-right: 2em;
		background-color: #eee;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 1em;
		margin-top: .7em;
	}
	
	
	#sidebar > div, #right-sidebar > div {
	margin: .75em 0 4.5em;
}

	#sidebar > div.last, #right-sidebar > div.last {
		margin: .75em 0 1em;
	}
	
	#right-sidebar {
		order: 3;
		-webkit-order: 3;
		-ms-flex-order: 3;
		
		flex: 0 0 12em;   /* sidebar won't grow or shrink & will always stay at 12ems  */
		-webkit-flex: 0 0 12em;
		-ms-flex: 0 0 12em;
		
	}
	
	

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

    .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 {                                /* Not sure what this is for */
        -webkit-flex: 0 0 calc(30% - 1em);
            -ms-flex: 0 0 calc(30% - 1em);
                flex: 0 0 calc(30% - 1em);
        margin-bottom: 1em;
		 margin-right: 2em;
    }
	
	 .flex-y {                                /* Not sure what this is for */
        -webkit-flex: 1 0 calc(70% - 1em);
            -ms-flex: 1 0 calc(70% - 1em);
                flex: 1 0 calc(70% - 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: 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%;
	} 
	
	.bg-image {
		background-image: url("../images/planet-bg960.jpg");
	}
	.overlay {
		top:35%;
	}
	.overlay p {
		font-size:1.4em;
	}
    
}


@media screen and (min-width: 1024px) {   
	
	.container {
		padding:2em;
	}
	
	.wide {
		width: 100%;
	}
	
	.narrow {
		width: 1220px;
	}
	
	.fw-image .overlay {
		padding:2em;
		top: 35%;
		left: 10%;
		width: 80%;
	}

     
}
   

@media screen and (min-width: 1240px) {  
	#content {
		max-width: 1220px;
	}


}