@charset "utf-8";

/*  Media Queries for Default17  */


@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;
   }
   
	#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;
	}
   
   
   .image-wrapper p {
	   font-size: 2.5em;
}
		
/*  -----------  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;
	}
	
	#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;
    }

    .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 {
        -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 {
        -webkit-flex: 1 0 calc(70% - 1em);
            -ms-flex: 1 0 calc(70% - 1em);
                flex: 1 0 calc(70% - 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%;
	} 
	
	.bg-image {
		background-image: url("../images/planet-bg960.jpg");
	}
	.overlay {
		top:35%;
	}
	.overlay p {
		font-size:1.4em;
	}
    
}


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

     
}