/* divs flex with width of 800-height images */

div.castle { flex:1000; -webkit-flex: 1000 1000 250px; -ms-flex: 1000; min-width: 100px; max-width: 500px;} 
div.castle_gif { flex:2000; -webkit-flex: 200 200 200px; -ms-flex: 200; min-width: 200px; max-width: 300px; margin-top:50px;} 
div.card{ flex:600; -webkit-flex: 600 600 150px; -ms-flex: 600; min-width: 250px; max-width:400px;} 
div.story{ flex:1096; -webkit-flex: 1096 1096 274px; -ms-flex: 1096; min-width: 400px; max-width:800px;} 
div.comicpage{ flex:773; -webkit-flex: 773 773 386px; -ms-flex: 773; min-width: 400px; max-width:700px;}
div.dhow{ flex:542; -webkit-flex: 542 542 271px; -ms-flex: 542; min-width: 271px; max-width:542px;}
div.seasnake{ flex:716; -webkit-flex: 716 716 358px; -ms-flex: 716; min-width: 358px; max-width:716px;}
div.boardgame { flex:700; -webkit-flex: 700 700 350px; -ms-flex: 700; min-width: 175px; max-width: 700px;} 
div.gba { flex:850; -webkit-flex: 850 850 425px; -ms-flex: 850; min-width: 212px; max-width: 850px;} 


img.inset{float:right; max-width: 30%;}

/* using 400 height images and flex/4 by default

div.chimacard { min-width:200px; flex-basis:300; height:400; } */

@media screen and (min-width: 2500px) {
/* start of wide screen styles */
/* using 800 height images and flex/2 by default */

div.card{ min-width: 400px; max-width:600px;} 
div.story{ min-width: 400px; max-width:1096px;} 

}


@media screen and (max-width: 1000px) {
/* start of large tablet styles */
div.castle { flex:1000; -webkit-flex: 1000 1000 250px; -ms-flex: 1000; min-width: 100px; max-width: 200px;} 
div.castle_gif {margin-top:5px;} 
	
}


@media screen and (max-width: 750px) {
/* start of medium tablet styles */
/* using 400 height images and flex/8 by default */

div.card{ min-width: 150px; max-width:300px;} 
div.story{ min-width: 200px; max-width:400px;}
div.dhow{ min-width: 135px; max-width:542px;}
div.seasnake{ min-width: 179px; max-width:716px;}
	

}

*/

@media screen and (max-width: 500px) {
/* start of phone styles*/
/* using 500 wide images and min-width 80%*/

div.castle { min-width: 100px;} 
div.castle_gif { min-width: 100px;} 
div.card { min-width: 100px;} 
div.story { min-width: 100px;} 
div.comicpage { min-width: 100px;} 
div.dhow{ min-width: 100px;}
div.seasnake{ min-width: 100px;}
div.boardgame{ min-width: 100px;}
div.gba{ min-width: 100px;}
	
}