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

.retailbanner_section{
	position: relative;
    padding: 80px 15px 40px;
    text-align: center;
/*    background: #ffe7e7d9;*/
	background: linear-gradient(#fbf7e5, #ffffff);
}
.retailsolu_container{
	max-width: 1160px;
	margin: 0 auto;
	position: relative;
}
.bannertop_header{
	max-width: 780px;
    margin: 0 auto 10px;
}
.bannertop_header h1{
	font-size: 30px;
    line-height: 1.5;
    font-weight: 500;
}
.bannertop_header h1 span{
	font-weight: 700;
}
.bannertop_header a{
    border: 1px solid #f0c107;
    background: #f0c107;
    color: #fff;
	box-shadow: 0px 1px 5px 2px #f1e09c;
}
.bannertop_header a:hover{
	color: #fff;
}
.bannerbotimag{
	position: relative;
	padding-bottom: 60px;
	padding-top: 40px;
}
.bannerimgretail{
	z-index: 5;
	position: relative;
}
.bannerimgretail img{
	max-width: 100%;
}
.retailmapimg{
	
}
.retailmapimg img{
	transform: scale(0);
    opacity: 0;
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 99;
    transition: .5s all;
	-webkit-box-shadow: -1px 0px 65px -11px rgba(222,222,222,1);
    -moz-box-shadow: -1px 0px 65px -11px rgba(222,222,222,1);
    box-shadow: -1px 0px 65px -11px rgba(222,222,222,1);
    border-radius: 50%;
}
.retailmapimg:hover img{
	transform: scale(1);
	opacity: 1;
	width: 300px;
}
.banretailbox{
	background: #ffffffd6;
    width: 170px;
    padding: 5px 15px;
    text-align: left;
    border-radius: 10px;
	z-index: 9;
	box-shadow: 0px 9px 35px -12px rgb(244, 230, 137, 0.7);
}
.iconbanicon{
	background: url(../images/solution-image/distribution-banner-icon.png) no-repeat;
	width: 40px;
    height: 40px;
	margin: 5px 0 12px;
}
.banretailbox h4{
	font-size: 14px;
    font-weight: 600;
    margin: 5px auto 0;
}
.banretailbox p{
	font-size: 12px;
    font-weight: 500;
    color: #a7a7a7;
}
.banretdots{
	position: absolute;
    width: 25px;
    height: 25px;
    background: #f0c107;
    border-radius: 30px;
}
.banclouddots {
	top: -25px;
    left: 20px; 
}
.bantabdots{
	bottom: 90px;
    right: 20%;
}
.deskbanbox {
	position: absolute;
    top: 10%;
    left: 16%;
}
.cloudbanbox {
	bottom: 15%;
    left: 9%;
    position: absolute;
}
.mobilebanbox{
	bottom: -3%;
    left: 47%;
    position: absolute;
}
.tabbanbox {
	top: 35%;
    right: 8%;
    position: absolute;
}
.banretaildotone{
	background: url("https://cdn-web.mrakaf.com/images/solution-image/distributor-dot.svg") no-repeat;
	width: 200px;
    height: 200px;
    position: absolute;
    top: 40%;
    left: 13%;
}
.banretaildottwo{
	background: url(https://cdn-web.mrakaf.com/images/solution-image/distributor-dot.svg) no-repeat;
	width: 200px;
    height: 200px;
    position: absolute;
    top: -3%;
    right: 20%;
}
.retdeskbanimg {
	background-position: -74px -2px;
}
.retcloudbanimg {
	background-position: -115px -2px;
}
.retmobilebanimg {
	background-position: 3px 3px;
    width: 30px;
}
.rettabbanimg {
	background-position: 3px 3px;
	width: 30px;
}
@media (max-width: 1100px){
	.cloudbanbox{
		left: 0%;
	}
	.deskbanbox{
		left: 12%;
	}
	.tabbanbox{
		right: 1%;
	}
}
@media (max-width: 991px){
	.banretailbox,.banretaildotone{
		display: none;
	}
	.bannerbotimag{
		padding-bottom: 20px;
	}
	.bannertop_header h1{
		font-size: 25px;
	}
}	
.cont-wrap{
		display: flex;
		justify-content: center;
		padding-top:40px;
	}
	.solution-pop{
		height: 424px;
		background-color: #fff;
		z-index: 10;
		position: absolute;
		transition: all 350ms;
		bottom: 0px;
		border-radius: 15px 15px 0 0;
		}
	.solution-pop-close{
		margin-top:376px;
		transition: all 350ms;
		opacity: 0;
		z-index: -2;
		height:0;
	}
	.solution-pop .close_icon{
		position: absolute;
    right: 20px;
    top: -5px;
    cursor: pointer;
    color: #fff;
    background: #333;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 20px;	
	}	
	.sol-sprite{
		background-image: url(../images/solution-image/ordereasy-godeliver-sprite.png);
	}
	.oe-cta{
		border: 1px solid #f0493f;
    background: #f0493f;
    color: #fff;
    border-radius: 5px;
    transition: .2s ease;
    outline: none;
    margin: 10px 0px 10px auto;
    padding: 3px 10px;
    text-align: center;
    max-width: 130px;
    font-size: 14px;
    font-weight: 500;
	}
.mob-cent .oe-cta{
	margin: 10px 0
}
	.app-text{
		
	}
.app-text h5{
	font-size: 16px;
    	font-weight: 600;
    	line-height: 1.4;
}
.app-text p{
	font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
.cta-sub-text h6{
	font-size: 14px;
    font-weight: 700;
    margin: 20px auto 0;
    color: #f0493f;
}
.cta-sub-text p{
	font-size: 13px;
    font-weight: 900;
}
	.OE-section{
		text-align: right;
	}
	.GD-section{
		text-align: left;
	}
.GD-section .oe-cta{
	margin: 10px auto 10px 0;
}
	.oe-logo{
		width: 145px;
		height: 32px;
		background-position: -461px -27px;
		margin: 10px 0 15px auto;
	}
	.OE-bg{
		background-position: 6px -402px;
    height: 128px;
    width: 230px;
    position: relative;
    left: -40px;
    top: -50px;
    z-index: -1;
	}
	.GD-bg{
		background-position: -290px -402px;
    height: 158px;
    width: 300px;
    position: relative;
    top: -40px;
    z-index: -1;
    right: 0;
	}
	.gd-logo{
		width: 175px;
		height: 32px;
		background-position: -462px -68px;
		margin: 10px 0 15px 0;
	}
	.oe-gd-screen{
	    width: 451px;
	    height: 384px;
    background-position: -880px 12px;
	}
	.free-bg{
		width: 100px;
    height: 140px;
    background-position: -1359px 640px;
    margin: 0 auto;
	}
	.OE-section-small{
		display:flex;
		justify-content: right;
		z-index: 5;
	}
	.GD-section-small{
		display:flex;
		justify-content: left;
		z-index: 5;
	}
	.OE-small-bg{
		width: 190px;
    height: 160px;
    background-position: -1100px -565px;	
	}
	.GD-small-bg{
		width: 230px;
    height: 160px;
    background-position: -900px -565px;
	}
	.gd-logo-small{
		width: 175px;
		height: 32px;
		background-position: -461px -69px;
		margin-bottom: 5px;
		margin-top:15px;
	}
	.oe-logo-small{
		width: 175px;
		height: 32px;
		background-position: -461px -27px;	
		margin-bottom: 5px;
		margin-top:15px;
	}
	.OE-Wrap{
		z-index: 999;
		position: absolute;
		background-color: #fff;
		transform: scale(0,0);
		transform-origin: top;
		
	}
	.OE-show{
		display: block;
		transition: all 350ms;
		transform:scale(1,1);
		position: relative;
		padding: 19px 0px;
	}
	.small-txt-wrap{
		max-width: 200px;
		font-size: 15px;
		line-height: 1.4;
		font-weight: 500;
	}
	.centerflex{
		display:flex;
		justify-content: center;
	}
.yellowcardban{
	position: absolute;
    top: -10px;
    left: 27%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #f0e19d;
}
.bantabdots.banretdots.mob,.bantabdots.banretdots.mob1{
	display: none;
}
	@media all and (max-width: 1024px) {
		.solution-pop{
			display: none;
		}
		.retailsolu_container{
			height: auto;
		}
		.OE-Wrap{
			transform: scale(1,1);
			position: relative;
			margin: 20px 0px;
		}
		.GD-small-bg {
			width: 200px;
		}
	}
	@media all and (max-width: 991px){
		.OE-section-small, .GD-section-small{
			display: flex;
			flex-direction: column-reverse;
			align-items: center;
		}	
		.centerflex {
			display: block;
			margin-top: 0;
		}
		.yellowcardban{
			left: 16%;
			width: 75px;
			height: 75px;
			top: 8px;
		}
	}
	@media all and (max-width: 768px){
		.retailmapimg img{
			display: none;
		}
	.bantabdots.banretdots.mob{
		display: block;
		top: auto;
		right: -2px;
		bottom: 52px;
		z-index: -1;
	}
	.bantabdots.banretdots.mob1{
		display: block;
    top: auto;
    right: 20px;
    bottom: 94px;
    z-index: -1;
    left: auto;
	}
	}
	@media all and (max-width: 525px){
		.mobile-responsive-cta{
			z-index: 19;
		}
		.centerflex {
			display: flex;
			margin-top: 0px;
		}
		.mob-cent{
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
	}