/*	

index.css 

*/

/*mid---------------------*/

.indexMidShop{
	width: 100%;
  height: 70%; 
  display: flex; 
}
.indexMidLink{
  width: 100%;
  height: 9%;
	font-size: 1.3em;
	text-align: center;
 
}
.bottom {font-size: 1.2em;}
.indexMidShop a {width: 60%; height: 100%; margin: auto auto; display: flex;} 
.indexMidShop a img {margin: auto auto; width: 80%; max-width: 80%;}
.indexMidLink img {max-width: 9%; position: relative; left: 3px; bottom: 4px;}
 
 /*footer------------------------------- */

.mikebenke{
  font-weight: bolder;
  font-size: 1.3em; 
	display: flex;
	width: 100%;
}
.mikebenke span {
  width: 35%; 
	margin: auto auto; 
}
.mikebenke span img{

	width: 100%;  

}
.hello{
  font-family: 'Pacifico', cursive;
	color: #FFA307 !important; 
  font-size: 3em; 
  margin: auto auto;
}
.user{
 font-family: 'Poppins', sans-serif; 
 color: white; 
 font-size: 0.35em;
}



/* RESONPONSIVE CSS ***********************************************************************************/ 


/* Generic Small Phone */
 .indexMidShop a img {width: 170px;}

/* Medium Screen  */
@media (min-width: 350px) and (orientation : portrait)
{  
	.indexMidShop a img {width: 540px;}

	 
}

/* Medium Screen  */
@media (min-width: 600px) and (orientation : portrait)
{  
	.indexMidShop a img {width: 260px;}
	.indexMidLink img {width: 65px; padding-bottom: 20px; }
	.indexMidLink, .mikebenke {font-size: 2em;}
	.hello {font-size: 6em; }
	 
}
 
/* Large Screen */
@media (min-width: 768px) and (orientation : portrait) 
{ 
	.indexMidShop a img {width: 300px;}
	.indexMidLink img {width: 80px; padding-bottom: 30px; }
	.indexMidLink, .mikebenke {font-size: 2.3em;}
}

/* xLarge Screen */
@media (min-width: 1024px) and (orientation : portrait) 
{ 
/*	.indexMidShop a {width: 80%; height: 80%; margin: auto auto;}*/
	.indexMidShop a img {width: 500px; }
	.mid, .bottom {font-size: 1.3em;}
}

/* Generic Small Screen Landscape */
@media (orientation : landscape)
{
  .indexMidShop a img {width: 90px;}
	.indexMidLink {font-size: .8em;}
	.indexMidLink img {width: 20px;}
	.mikebenke {font-size: .8em;}
	.mikebenke span {max-width: 80px;}
	.hello {font-size: 1.7em; }
}

/* Medium Screen Landscape */
@media (min-width: 855px) and (orientation : landscape)
{
  .indexMidShop a img {width: 200px;}
	.indexMidLink {font-size: 1.3em;}
	.indexMidLink img {width: 50px;}
	.mikebenke {font-size: 1.3em;}
	.mikebenke span {max-width: 180px;}
	.hello {font-size: 3.5em; }
}

/* large Screen Landscape */
@media (min-width: 1290px) and (orientation : landscape)
{
.indexMidShop a img {max-width: 350px;}
	
}

/* PHONE SPECIFIC ********************************************************************************/ 

/* iPhone 5 */
@media screen 
and (device-width: 320px) 
and (device-height: 568px) 
{
 .indexMidShop img {width: 150px;}
}

/* iPhone 4 */
@media screen 
and (device-width: 320px) 
and (device-height: 480px) 
{ 
 .indexMidShop img {width: 130px;}
 .indexMidLink {font-size: .95em;}
 .indexMidLink img {width: 40px;}
 .mikebenke {font-size: .95em;}
}
