/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	div.indextagline{float:left; width:100%; text-align:center; font-size:24px;font-family: 'Roboto', sans-serif; font-weight:300; line-height:1.2em; margin:15px 0px 0px 0px;}
	div.indextagline strong{font-size:30px; font-weight:700; display:block; width:100%; padding:0px 0px 20px 0px;}

	/*How to order*/
	div.indexhowtoordertitle{float:left;width:100%; font-size:24px; text-align:center; line-height:1.4em;}
	div.indexhowtoordertitle strong{font-size:45px; color:#009fD4;}
	div.indexhowtororderstepbox{float:left;width:30%; text-align:center; margin:40px 0px 30px 0px; }
	div.indexhowtororderstepbox strong{float:left; font-size:20px; color:#009fD4; width:100%; display:block; margin:0px 0px 20px 0px;}                                      
	div.indexhowtororderstepboxicon{float:left; width:100%; margin:0px 0px 20px 0px;}
	div.indexhowtororderstepboxicon img{margin:0 auto; width:200px; height:auto; }
	div.indexhowtororderstepboxarrow{float:left;width:5%;text-align:center; padding:80px 0px 0px 0px;}
	div.indexhowtororderstepboxarrow img {width:40px; height:auto; margin:0 auto;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgdesktoponly{display:block;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgmobileonly{display:none;}

	/*Footor Shopping cart*/
	div.mainshoppingcartnomobileonly{display:none;}

	/*Contact*/
	div.contactgooglemap{float:left; width:100%; height:450px; margin:0px 0px 40px 0px;}
	div.contactleftcol{float:left; width:58%;}
	div.contactrightcol{float:right; width:35%}

	/*Blog*/
	div.blogleftcol{float:left; width:80%;}
	div.blogrightcol{float:right; width:15%;}
	div.blogcontentbox{float:left; width:100%;}
	div.blogimg{float:left; width:30%; height:200px; background-size:cover; background-repeat:no-repeat; background-position:center center;}
	div.blogimg:hover{cursor:pointer;}
	div.blogcontent{float:right; width:68%;}
	div.blogtitle{float:left; width:100%;}
	div.blogtitle h1{float:left; width:100%; padding:0px; margin:0px;}
	div.blogdate{float:left; width:100%; font-size:12px; color:#666;}
	div.blogtext{float:left; width:100%; margin:15px 0px 15px 0px}
	div.blogfindoutmorelink{float:left; width:100%;}

}

/* ========================================================================== */
/* ========================================================================== */
	/*Tablet - Mobile. 360,375,414,768(666)*/
@media (min-width: 667px) and (max-width: 999px){
	/*Tablet*/
	div.contactleftcol{float:left; width:58%;}
	div.contactrightcol{float:right; width:35%}

	/*Tablet How to order*/
	div.indexhowtororderstepbox{float:left;width:30%; text-align:center; margin:40px 0px 30px 0px; }
	div.indexhowtororderstepboxarrow{float:left;width:5%;text-align:center; padding:80px 0px 0px 0px;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgdesktoponly{display:block;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgmobileonly{display:none;}
	
}

@media (min-width: 414px) and (max-width: 666px){
	/*Mobile iphone XS  + Samsung Note 9. Width is 414. Products Info Box*/

	/*Mobile How to order*/
	div.indexhowtororderstepbox{float:left;width:100%; text-align:center; margin:0px 0px 0px 0px; }
	div.indexhowtororderstepboxarrow{float:left;width:100%;text-align:center; padding:20px 0px 20px 0px;}
}

@media (min-width: 375px) and (max-width: 413px){
	/*Mobile iphone 6/7/8/X/XS. Width is 375. Products Info Box*/

	/*Mobile How to order*/
	div.indexhowtororderstepbox{float:left;width:100%; text-align:center; margin:0px 0px 0px 0px; }
	div.indexhowtororderstepboxarrow{float:left;width:100%;text-align:center; padding:20px 0px 20px 0px;}
}

@media (min-width: 0px) and (max-width: 374px){
	/*Mobile Samsung S9/S9+. Width is 360 Products Info Box*/

	/*Mobile How to order*/
	div.indexhowtororderstepbox{float:left;width:100%; text-align:center; margin:0px 0px 0px 0px; }
	div.indexhowtororderstepboxarrow{float:left;width:100%;text-align:center; padding:20px 0px 20px 0px;}
}

@media (min-width: 0px) and (max-width: 666px){
	/*Mobile */
	div.contactleftcol{float:left; width:100%;}
	div.contactrightcol{float:right; width:100%; margin:0px 0px 40px 0px;}

	/*Mobile to Tablet How to order*/
	div.indexhowtororderstepbox{float:left;width:100%; text-align:center; margin:0px 0px 0px 0px; }
	div.indexhowtororderstepboxarrow{float:left;width:100%;text-align:center; padding:20px 0px 20px 0px;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgdesktoponly{display:none;}
	div.indexhowtororderstepboxarrow img.indexthowtoarrowimgmobileonly{display:block;}

}

/* ========================================================================== */
/* ========================================================================== */


/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.indextagline{float:left; width:100%; text-align:center; font-size:24px;font-family: 'Roboto', sans-serif; font-weight:300; line-height:1.2em;}
	div.indextagline strong{font-size:30px; font-weight:700; display:block; width:100%; padding:0px 0px 20px 0px;}

	/*Mobile How to order*/
	div.indexhowtoordertitle{float:left;width:100%; font-size:24px; text-align:center; line-height:1.4em; margin:0px 0px 20px 0px;}
	div.indexhowtoordertitle strong{font-size:35px; color:#009fD4;}
	div.indexhowtororderstepbox strong{float:left; font-size:20px; color:#009fD4; width:100%; display:block; margin:0px 0px 10px 0px;}                                      
	div.indexhowtororderstepboxicon{float:left; width:100%; margin:0px 0px 20px 0px;}
	div.indexhowtororderstepboxicon img{margin:0 auto; width:180px; height:auto; }
	div.indexhowtororderstepboxarrow img {width:40px; height:auto; margin:0 auto;}


	/*Mobile Footor Shopping cart*/
	div.mainshoppingcartnomobileonly{position:fixed; bottom:14px; left:22px;height:45px;  padding:11px 15px 0px 15px; border-radius: 20px; background:#ed4054; color:#FFF;}
	div.mainshoppingcartnomobileonly a{ color:#FFF; font-size:16px; font-weight:bold; text-decoration:none; margin:0 auto; padding:0px 0px 0px 25px; background-image:url(/images_svg/main_icon_shoppingcart_white.svg); background-repeat:no-repeat; background-position:left center; background-size: 20px 20px;}
	
	/*Mobile Contact*/
	div.contactgooglemap{float:left; width:100%; height:450px; margin:0px 0px 40px 0px;}

	/*Mobile Blog*/
	div.blogleftcol{float:left; width:100%;}
	div.blogrightcol{float:right; width:100%; margin:20px 0px 0px 0px; background-color:#f2f2f2; padding:20px;}
	div.blogcontentbox{float:left; width:100%;}
	div.blogimg{float:left; width:100%; height:300px; margin:0px 0px 15px 0px; background-size:cover; background-repeat:no-repeat; background-position:center center;}
	div.blogimg:hover{cursor:pointer;}
	div.blogcontent{float:right; width:100%; }
	div.blogtitle{float:left; width:100%;}
	div.blogtitle h1{float:left; width:100%; padding:0px; margin:0px;}
	div.blogdate{float:left; width:100%; font-size:12px; color:#666;}
	div.blogtext{float:left; width:100%; margin:15px 0px 15px 0px}
	div.blogfindoutmorelink{float:left; width:100%;}


}

/* ==========================================================================
   Share CSS
   ========================================================================== */