/* index.css */

  


@media only screen and (max-width: 5000px) {


* {box-sizing: border-box;}

body {
                    
                    background-color: #2e2f30;
                    color: white;
                    font-size: 1em; 
    }



.java {
	color:red;
}


.row::after {
  content: "";
  clear: both;
  display: block;
}





[class*="vert-"] {
  float: left;
  padding: 1em;

}

.vert-1 {width: 8.33%;}
.vert-2 {width: 16.66%;}
.vert-3 {width: 25%;}
.vert-4 {width: 33.33%;}
.vert-5 {width: 41.66%;}
.vert-6 {width: 50%;}
.vert-7 {width: 58.33%;}
.vert-8 {width: 66.66%;}
.vert-9 {width: 75%;}
.vert-10 {width: 83.33%;}
.vert-11 {width: 91.66%;}
.vert-12 {width: 99.99%;}

.high_bar {

    
    height: 85em;
    background-color: blue;
}










/* ------- end of basic.css -----------------*/

/* ------ index.html -------------------*/





div.card:hover {

    background-color: black;
    border-color:#398EE4;



}



/*----------title-----------------------*/

         div.title {
	 
	     color: yellow;
	     text-align: center;
	     
	 }

	 header.title h2 {

	     pading:.1em;
	     margin: .1em;
	     



	 }
	 
	 footer.title p {

	     font-size: .8em;
	     pading:.1em;
	     margin: .1em 0em .7em 0em;
	     
	 }
	 
	 footer.title p:nth-of-type(2) {

	     font-size: .2em;
	 }
	 
	 footer.title time {

	     font-size: .2em;
	 }






/*-----------title---------------------*/

/*----------card-------------------*/
	 div.master_card {

	     padding: 0 0 0 2em;



	 }

	 
	 div.card {
	     float: left;
	     text-align: center;
	     margin: .5em .5em .5em 1em;
	     border: .1em solid green; /* #398EE4;*/

	   
	   

	 }

	 div.card button {
	     
	     position: relative;
	     right: 39%;
	     
	     margin: 0em .5em 0em 0em;

	 }

	 

	 div.card_head {

	     

	 }

	 header.card_head  {
	     color: yellow;
	     height: 9em;
	     pading:.1em;
	     margin: .1em 0em 0em 0em;
	     
	 
	 }

	 header.card_head p  {
	     color: yellow;
	     font-size: 1.1em;
	     font-weight: bold;
	     height: 1em;
	     pading:.1em;
	     margin: .1em 0em 4.5em 0em;
	 
	 }


	 header.card_head p:nth-of-type(2)  {
	     color: yellow;

	     font-size: .6em;
	     height: 1em;
	     pading:.1em;
	     margin: .1em;
	 
	 }
	 

	 footer.index_foot {

	  
	     

	 }
	 
	 #foot_p1 {

	     font-size: .7em;
	     pading:.1em;
	     margin: .7em 0em .1em 0em;
	     
	 }
	 
	 #foot_p2 {
	     
	     
	     font-size: .6em;
	     
	     margin: 0em 0em 0em 0em;
	 }
	 
	 time {
	     
	     
	     font-size: 1em;
	 }

	 

	 





/*----------card-------------------*/









/* ------------index.html --------------------------*/

div.bottom_footer footer  a {

    color: #398EE4;
    font-size: .5em;
    
}

div.bottom_footer {
margin: 2em 0em 0em 0em;


}

div.button_nav {

    margin: 5em 0em 5em 0em;
}


button {
	background-color: #ffff00;	
	color: black;
}


/*----------footnotes_story.css------------*/

div.footnotes_story {

	     padding: .3em;
	     margin: 0em 0em 0em 0em;
	 }

	 div.footnotes_story a {

	     color: #398EE4;


	 }
	 
	 div.footnotes_story a:link {

	     color: #398EE4;


	 }

	 div.footnotes_story a:visited {

	     color: green;


	 }

	 div.footnotes_story a:hover {

	     color: pink;


	 }
	 div.footnotes_story a:active {

	     color: red;


	 }

	  a {

	     color: black;


	 }
	 
	 a:link {

	     color: black;


	 }

	 a:visited{

	     color: green;


	 }

	 a:hover {

	     color: green;


	 }
	 a:active {

	     color: red;


	 }
	


/*-----------footnotes_story.css ---------------*/



/*------------main_story.css --------------*/
div.main_story {
	     
	     color: white;
	     text-align: left;





	     padding: 1em;
	     margin: .1em;
	 }

	 p.story {

	     text-indent: 1em;


	 }



/*----------main_story.css---------*/

/*----------header_story.css----------*/

	 .header_story {
	 
	     color: yellow;
	     text-align: center;
	 }
	 footer.header_story {

	     font-size: .5em;
	 }


	 


/* ----------------header_story.css -----------*/


/*-------------image_story.css -----------*/









	 div.image_story {

	      
	     padding: 0.2em;
	     margin: 0em;
	     box-shadow: 0 0 0 .1em green, 0 0 0 .2em yellow;
	    

	}

	figcaption.image_story {
            
	    float: left;
	    width: 38%;
	    height: auto;
	    padding: 0.3em;
	    margin: 0.5em 0.2em 0.2em 0.2em;

	}
	 
	 img.image_story {
	     float: left;
	     width: 50%;
	     height: 50%;
	     margin: 0.5em;
	     
	 }
/*----------------image css ----*/

/*-- start aside css -- -----------------------*/

	 section.image_story_aside {

	     float: left;
	     width: auto;
	     height:auto;
	     padding: .1em;
	     margin: .1em;
	     
	 }


	 section.image_story_aside p {

	     padding: .1em;
	     margin: .1em;
	 }


	 
	 
	 
	 

	/*-- end aside css -- -----------------------*/



	 
	 



/* image_story.css ----------------*/



/* ---- video story csss ------- */

    	 
	 
/*-------------iframe css -----------*/
	div.video_story {

	     float: left; 
	     padding: 0.2em;
	     margin: 0em;
	     box-shadow: 0 0 0 .1em green, 0 0 0 .2em yellow;
	   

	}

	figcaption.video_story {

	    float: right;
	    width: 38%;
	    height: auto;
	    padding: 0.3em;
	    margin: 0em 0.2em 0.2em 0.2em;

	}
	 
	 iframe.video_story {

	     width: 50%;
	     height: 90%;
	     margin: 0.5em;
	    
	 }
/*----------------ifram css ----*/

/*-- start aside css -- -----------------------*/

	 div.video_story_aside {
	    
	     float: right;
	     height:auto;
	     padding: 0em .5em .5em .5em;
	     margin: 0em 0em 0em 0em;
	     
	 }


	 div.video_story_aside p {
	     margin: 0em 0em 0em 0em;
	     padding: 0em 0em 0em 0em;
	     
	 }


	 
	 
	 

	/*-- end aside css -- -----------------------*/

/* ------ video story css  ----------------*/




}





@media only screen and (max-width: 850px) {
.java {
	color:red;
}

button {
	background-color: #ffff00;	
	color: black;
}



    


    .high_bar {
	
	width: 100%;
	height: 20em;
	background-color: green;
    }
    
    .locus {
	width: 100%;

    }

    /*-------------image_story css -----------*/









	 div.image_story {

	      
	     padding: 0.2em;
	     margin: 0em;
	     box-shadow: 0 0 0 .1em green, 0 0 0 .2em yellow;
	    

	}

	figcaption.image_story {
            
	    float: left;
	    width: 38%;
	    height: auto;
	    padding: 0.3em;
	    margin: 0.5em 0.2em 0.2em 0.2em;

	}
	 
	 img.image_story {
	     float: left;
	     width: 50%;
	     height: 50%;
	     margin: 0.5em;
	     
	 }
/*----------------ifram css ----*/

/*-- start aside css -- -----------------------*/

	 section.image_story_aside {

	     float: left;
	     width: auto;
	     height:auto;
	     padding: .1em;
	     margin: .1em;
	     
	 }


	 section.image_story_aside p {

	     padding: .1em;
	     margin: .1em;
	 }


	 
	 
	 
	 

	/*-- end aside css -- -----------------------*/



	 
	 



/* image_story.css ----------------*/



    
    /* ---- video story csss ------- */

    	 
	 
/*-------------iframe css -----------*/
	div.video_story {

	     float: left; 
	     padding: 0.2em;
	     margin: 0em;
	     box-shadow: 0 0 0 .1em green, 0 0 0 .2em yellow;
	   

	}

	figcaption.video_story {

	    float: right;
	    width: 38%;
	    height: auto;
	    padding: 0.3em;
	    margin: 0em 0.2em 0.2em 0.2em;

	}
	 
	 iframe.video_story {

	     width: 50%;
	     height: 90%;
	     margin: 0.5em;
	    
	 }
/*----------------ifram css ----*/

/*-- start aside css -- -----------------------*/

	 div.aside {
	    
	     float: right;
	     height:auto;
	     padding: 0em .5em .5em .5em;
	     margin: 0em;
	     
	 }


	 div.aside p {

	 }


	 
	 
	 

	/*-- end aside css -- -----------------------*/

/* ------ video story css  ----------------*/



    
}




@media only screen and (max-width: 850px) {
.java {
	color:red;
}

div.master_card {

	     padding: 0 0 0 5em;



	 }




    div.card {
	     float: left;
	     width: 17%;
	     text-align: center;
	     margin: .5em .5em .5em 1em;
	     
	 }


	 header.card_head  {
	     color: yellow;
	     height: 11em;
	     pading:.1em;
	     margin: .1em 0em 0em 0em;
	     
	 
	 }

	 header.card_head p  {
	     color: yellow;
	     font-size: 1.1em;
	     font-weight: bold;
	     height: 1em;
	     pading:.1em;
	     margin: .1em 0em 5.5em 0em;
	 
	 }






}







/*---cell phone ----*/


@media only screen and (max-width: 760px) {
.java {
	color:red;
}


button {
	background-color: #ffff00;	
	color: black;
}






div.master_card {

	     padding: 0 0 0 3em;



	 }




    div.card {
	     float: left;
	     width: 25%;
	     text-align: center;
	     margin: .5em .5em .5em 1em;
	     
	 }




}





/*-----potriat------------*/
@media only screen and (max-width: 590px) {
.java {
	color:red;
}

button {
	background-color: #ffff00;	
	color: black;
}


    /*---index----*/

    div.master_card {

	     padding: 0 0 0 0em;



	 }

	 
	 div.card {
	     width: 95%;
	     text-align: center;
	     margin: .5em .5em .5em .3em;
	     
	 }










    div.video_story {

	width: 100%;

    }
    

    iframe.video_story {

	width: 95%;
	float: left;

    }

    figcaption.video_story {

	width: 100%;
	float: left;

    }
    div.video_story_aside {

	float: left;
	width: 100%;
	padding: .5em .5em .5em .5em;
	    

    }



    
  div.image_story {

	width: 100%;

    }
    

    iframe.image_story {

	width: 95%;
	float: left;

    }

    figcaption.image_story {

	width: 100%;
	float: left;

    }
    div.image_story_aside {

	float: left;
	width: 100%;


    }

    div.bottom_footer {

	width:100%;


    }
    



}