@charset "utf-8";
/* CSS Document */

#order				{}
#order .container 	{ padding-left:2em !important; padding-right:1em !important; max-width:800px; }

#order 				{ background:#0183BA; }

@media all and (min-width: 1025px) {
	#order.fixed 		{ position:fixed; bottom:0; right:0; width:45%;
						  height:100%; overflow:hidden;
						  z-index:2; }
	#order.fixed-btm 	{ position:absolute; }
	#order 				{ background:#0183BA url(../images/back_blue_border.png) repeat-y top left; background-size:10px 75px; }
}

#order h2			{ font-size:2.2em; }
#order h2,
#order p.line1		{ color:#FFF; }
a.order-cat			{ display:block; text-decoration:none; color:#414151; 
					  background:#FFF; height:130px; border-radius:65px 0 0 65px; padding:0; margin:0 100px 2em 0;
					  font-size:16px; text-align:left; line-height:130%; }
.order-cat-content 	{ z-index:2; margin:0 -10px 0 150px; padding-top:1.2em; }
.order-cat h3,
.order-cat h4,
.order-cat p  		{ padding:0.3em 0 0.1em; margin:0; }
.order-cat h4 		{ color:#D80000; font-size:1.5em; font-weight:500; }
.order-cat p  		{}

#order .order-cat > .img { position:absolute; top:0; left:0; width:130px; height:100%; border-radius:65px 0 0 65px; overflow:hidden; }
#catRetailer 	  > .img { background:url(../images/cat_order_truck_02.png) no-repeat bottom right; background-size:auto 90%; }
#catWholesaler 	  > .img { background:url(../images/cat_order_pallet_02.png) no-repeat bottom right; background-size:auto 90%; }
#catEvents 		  > .img { background:url(../images/cat_order_supersize_ice_02.png) no-repeat bottom right; background-size:auto 90%; }
#catConsumer 	  > .img { background:url(../images/cat_order_consumer_02.png) no-repeat bottom right; background-size:auto 90%; }

.order-cat:before,
.order-cat:after,
.order-cat-point {
	content:" ";
	position:absolute;
	top:0;
	right:-90px;
	width:90px;
	height:100%;
	background:#FFF;
    clip-path: polygon(0% 0%,0% 100%,100% 50%);
}
.order-cat:after,
.order-cat-point {
	top:32%;
	right:-70px;
	height:36%;
	width:33px;
	background:#FF4040;
}
.order-cat-point {
	background:#FFF;
}

a.order-cat:hover h4	{ color:#1083B2; text-decoration:underline; }
a.order-cat:hover:after	{ background:#1083B2; }
a.order-cat:hover,
a.order-cat:hover:before{ background:#FFC; }


/* order ice page */
#orderIce {}
#orderIce main ul 				{ list-style:none; padding:0; margin:1em auto 1em 0; max-width:1200px; }
#orderIce main ul li			{ padding:0; margin: 2em 0; }
#orderIce main ul li > .img 	{ position:absolute; top:-5%; right:0; width:30%; height:110%; z-index:1; }

#orderIce a.order-cat			{ background:#0183BA; height:160px; border-radius:20px; margin:0 auto 2em 0; width:60%;
								  font-size:1em; color:#FFF; line-height:160%; z-index:2; }
#orderIce .order-cat-content 	{ z-index:2; margin:0; padding:1.5em 2em; }
#orderIce .order-cat h3 		{ color:#FFF !important; font-size:1.8em; font-weight:500; }
#orderIce .order-cat p  		{ padding:0.5em 0; }

#orderIce #catRetailer 	 > .img,
#orderIce #catWholesaler > .img,
#orderIce #catEvents 	 > .img,
#orderIce #catConsumer 	 > .img { background-position:center left; background-size:contain; }
@media all and (min-width: 901px) {
    #orderIce #catConsumer 	 > .img { top:0; height:100%; }
}

#orderIce .order-cat:before,
#orderIce .order-cat:after,
#orderIce .order-cat-point 	{ top:1px; height:calc(100% - 2px); }
#orderIce .order-cat:before	{ right:-88px; width:100px; background:#0183BA; }
#orderIce .order-cat-point 	{ right:-73px; width:35px; top:32%; height:36%; }
#orderIce .order-cat:after 	{ right:-66px; width:24px; top:38%; height:24%; }

#orderIce a.order-cat:hover h3		{ color:#FFF; text-decoration:underline; }
#orderIce a.order-cat:hover:after	{ background:#FF4040;; }
#orderIce a.order-cat:hover,
#orderIce a.order-cat:hover:before	{ background:#1083B2 !important; }

@media all and (min-width: 1401px) and (max-width: 1600px) {
	a.order-cat			{ height:120px; border-radius:60px 0 0 60px; margin:0 90px 2em 0;
						  font-size:15px; text-align:left; line-height:130%; }
	.order-cat-content 	{ margin-left:120px; padding-top:1em; }
	#order .order-cat > .img { width:100px; border-radius:60px 0 0 60px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-80px; width:80px; }
	.order-cat:after,
	.order-cat-point { right:-66px; width:29px; }
}
@media all and (min-width: 1281px) and (max-width: 1400px) {
	a.order-cat			{ height:110px; border-radius:55px 0 0 55px; margin:0 80px 2em 0;
						  font-size:14px; line-height:130%; }
	.order-cat-content 	{ margin-left:115px; padding-top:1em; }
	#order .order-cat > .img { width:100px; border-radius:55px 0 0 55px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-70px; width:70px; }
	.order-cat:after,
	.order-cat-point { right:-59px; width:26px; }
}
@media all and (min-width: 1025px) and (max-width: 1280px) {
	a.order-cat			{ height:100px; border-radius:50px 0 0 50px; margin:0 66px 1.5em 0;
						  font-size:13px; line-height:120%; }
	.order-cat-content 	{ margin-left:105px; padding-top:1em; }
	#order .order-cat > .img { width:90px; border-radius:50px 0 0 50px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-66px; width:66px; }
	.order-cat:after,
	.order-cat-point { right:-55px; width:24px; }
	
	#orderIce a.order-cat	{ height:150px; }
}
@media all and (min-width: 1025px) and (max-width: 1150px) {
	a.order-cat			{ margin:0 60px 1em 0;
						  font-size:12.5px; line-height:120%; }
	.order-cat-content 	{ margin-left:98px; padding-top:1em; }
	#order .order-cat > .img { width:85px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-60px; width:60px; }
	.order-cat:after,
	.order-cat-point { right:-51px; width:22px; }
	
	#orderIce a.order-cat	{ height:140px; /*line-height:160%;*/ }
}
@media all and (max-width: 1024px) {
	#orderIce a.order-cat	{ height:auto; min-height:140px; /*line-height:160%;*/ }
}
@media all and (min-width: 801px) and (max-width: 900px) {
	/* order ice page */
	#orderIce main ul li > .img 	{ top:0; width:28%; height:100%; }
}
@media all and (min-width: 641px) and (max-width: 800px) {
	a.order-cat			{ height:120px; border-radius:60px 0 0 60px; margin:0 90px 2em 0;
						  font-size:15px; text-align:left; line-height:130%; }
	.order-cat-content 	{ margin-left:120px; padding-top:1em; }
	#order .order-cat > .img { width:100px; border-radius:60px 0 0 60px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-80px; width:80px; }
	.order-cat:after,
	.order-cat-point { right:-66px; width:29px; }
	
	
	/* order ice page */
	#orderIce main ul li > .img 	{ top:5%; width:28%; height:90%; }
}
@media all and (min-width: 641px) and (max-width: 700px) {
	a.order-cat			{ height:110px; border-radius:55px 0 0 55px; margin:0 80px 2em 0;
						  font-size:14px; line-height:130%; }
	.order-cat-content 	{ margin-left:115px; padding-top:1em; }
	#order .order-cat > .img { width:100px; border-radius:55px 0 0 55px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-70px; width:70px; }
	.order-cat:after,
	.order-cat-point { right:-59px; width:26px; }
}
@media all and (max-width: 700px) {
	/* order ice page */
	#orderIce {}
	#orderIce main ul 				{ margin:1em auto 1em 0; }
	#orderIce main ul li			{ margin: 1.5em 0; }
	#orderIce main ul li > .img 	{ top:5%; right:3%; width:20%; height:90%; z-index:3; }
	
	#orderIce a.order-cat			{ height:auto; min-height:0; border-radius:20px; margin:0 80px 1.5em 0; width:auto;
									  font-size:1em; line-height:150%; }
	#orderIce .order-cat-content 	{ padding:1.2em 0 1.2em 1.7em; }
	#orderIce .order-cat h3 		{ font-size:1.6em; /*font-weight:500;*/ }
	#orderIce .order-cat p  		{ /*padding:0.5em 0;*/ }
	
	#orderIce #catRetailer 	 > .img,
	#orderIce #catWholesaler > .img,
	#orderIce #catEvents 	 > .img,
	#orderIce #catConsumer 	 > .img { display:none; }
	
	#orderIce .order-cat:before,
	#orderIce .order-cat:after,
	#orderIce .order-cat-point 	{ top:1px; height:calc(100% - 2px); }
	#orderIce .order-cat:before	{ right:-88px; width:100px; background:#0183BA; }
	#orderIce .order-cat-point 	{ right:-73px; width:35px; top:32%; height:36%; }
	#orderIce .order-cat:after 	{ right:-66px; width:24px; top:38%; height:24%; }
}
@media all and (min-width: 501px) and (max-width: 640px) {
	a.order-cat			{ height:100px; border-radius:50px 0 0 50px; margin:0 66px 1.5em 0;
						  font-size:13px; line-height:120%; }
	.order-cat-content 	{ margin-left:105px; padding-top:1em; }
	#order .order-cat > .img { width:90px; border-radius:50px 0 0 50px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-66px; width:66px; }
	.order-cat:after,
	.order-cat-point { right:-55px; width:24px; }
}
@media all and (min-width: 501px) and (max-width: 575px) {
	a.order-cat			{ margin:0 60px 1em 0;
						  font-size:12.5px; line-height:120%; }
	.order-cat-content 	{ margin-left:98px; padding-top:1em; }
	#order .order-cat > .img { width:85px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-60px; width:60px; }
	.order-cat:after,
	.order-cat-point { right:-51px; width:22px; }
}
@media all and (max-width: 500px) {
	a.order-cat			{ height:110px; border-radius:50px 0 0 50px; margin:0 60px 1em 0;
						  font-size:12px; line-height:120%; }
	.order-cat-content 	{ margin-left:98px; padding-top:1em; }
	#order .order-cat > .img { width:85px; border-radius:50px 0 0 50px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-60px; width:60px; }
	.order-cat:after,
	.order-cat-point { right:-51px; width:22px; }
	
	/* order ice page */
	#orderIce a.order-cat			{ margin-right:60px; line-height:140%; }
	#orderIce .order-cat-content 	{ padding:1.2em 0 1.2em 1.7em; }
	#orderIce .order-cat h3 		{ font-size:1.6em; }
	
	#orderIce .order-cat:before	{ right:-68px; width:80px; }
	#orderIce .order-cat-point 	{ right:-53px; width:30px; }
	#orderIce .order-cat:after 	{ right:-47px; width:21px; }
}
@media all and (max-width: 400px) {
	a.order-cat			{ height:120px; border-radius:40px 0 0 40px; margin:0 50px 1em 0;  }
	.order-cat-content 	{ margin-left:90px; }
	#order .order-cat > .img { width:80px; border-radius:40px 0 0 40px; }
	
	.order-cat:before,
	.order-cat:after,
	.order-cat-point { right:-55px; width:55px; }
	.order-cat:after,
	.order-cat-point { right:-48px; width:20px; }
}
@media all and (max-width: 350px) {
	#order a.order-cat			{ height:120px; border-radius:25px 0 0 25px; margin:0 50px 1em 0;  }
	#order .order-cat-content 	{ margin-left:25px; padding-top:1.5em; }
	#order .order-cat > .img { display:none; }
}