html {
		scroll-behavior: smooth;
	}

	body{
		background-color: #faebd73d;
		font-size: 1em;
		font-family: 'Roboto', sans-serif;
		margin: 0;
	}
	
	.steps {
		display: none;
		//position: absolute;
		min-height: 360px;
		left: 0px;
		right: 0px;
		top: 0px;
	}

	.steps.step1 {
		display: block;
	}

	.steps .titlee {
		text-align: center;
		padding: 10px;
		font-weight: bold;
		color: darkred;
	}
	
	.steps.step2 .choices{
		min-height: 300px;
	}
	
	.steps .choices {
		text-align: center;
	}
	
	.steps .choices .choice {
		padding: 10px 0px;
		display: inline-block;
		color: dimgrey;
		margin: 10px 0px;
		border: 1px solid gray;
		cursor: pointer;
		text-align: center;
		width: 100%;
	}
	
	.choice.selected{
		background: linear-gradient(#f76f12, #f76f12)!important;
	}
	
	.steps .actionss {
		position: relative;
		height: 45px;
		margin-bottom: 70px;
		text-align: center;
	}
	
	.stepbtn {
		padding: 10px 10px 23px 10px;
		width: 130px;
		//background-image: url(https://svgsilh.com/svg/310634.svg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: 0px 2px;
		border: none;
		background-color: transparent;
	}
	
	.stepbtn.nex {
		//background-image: url(https://svgsilh.com/svg/310633.svg);
		text-align: left;
		//right: 10%;
		//position: absolute;
		//transform: rotate(180deg);
	}
	
	.stepbtn.prev {
		text-align: right;
		//left: 10%;
		//position: absolute;
	}
	
	.delivery_areas {
		margin: 0px auto;
		display: none;
	}
	
	.deladd {
		background-color: white;
		padding: 10px 30px 10px 15px;
		margin-bottom: 10px;
		border-radius: 50px;
		border: 1px solid lightgray;
		color: darkslategray;
		background-image: url(images/radio-button-unchecked.png);
		background-position: right 10px top 20px;
		background-repeat: no-repeat;
		background-size: 13px;
		text-align: left;
	}
	
	.deladd.selected {
		background-image: url(images/radio-button-checked.png);
	}
	
	.toprow {
		background: linear-gradient(#f76f12, #f76f12);
		padding: 10px;
		min-height: 40px;
	}
	
	.contact {
		background-image: url(images/phone-icon-white.png);
		background-repeat: no-repeat;
		background-size: 32px;
		background-position: 10px;
		width: 150px;
		color: white;
		padding: 10px 0px 10px 48px;
		display: inline-block;
		float: left;
	}
	
	.track {
		color: white;
		padding: 10px 0px;
		left: 30%;
	}
	
	.track > *{
		display: inline-block;
		font-family: fantasy;
		font-weight: 500;
		font-size: 30px;
		margin: 0px 24px;
	}
	
	input#tracking_number {
		padding: 10px 20px;
		margin-top: -4px;
		border-radius: 50px;
		border: none;
		text-align: center;
		width: 33%;
		font-size: 24px;
	}
	
	.track button {
		padding: 20px;
		border-radius: 20px;
		cursor: pointer;
	}

	
	.langs {
		width: 100px;
		float: right;
		display: inline-block;
		padding: 10px 0px;
		color: white;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.langs button {
		background: none;
		color: white;
		font-weight: bold;
		border: none;
		padding: 2px 5px;
		cursor: pointer;
	}
	
	.page{
		position: relative;
		display: flex;
	}
	
	.page1 .content{

	}
	
	.page1 .bg-layer-before{
		background-image: url(images/background_slider.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	.page1 .bg-layer-after{
		background-image: url(images/slide1.png);
		background-repeat: no-repeat;
		background-size: auto;
		background-position: right 0px bottom 10px;
	}
	
	
	.page.page022, .page.page4{
		padding: 0px 20px 50px 20px;
	}
	
	.page022 ul li {
		line-height: 40px;
		color: lightslategray;
	}
	
	.page.page022, .page.page-company, .page.page4 {
		//background: white;
	}
	
	.page-company .bg-layer-before{
		background: white;
	}
	
	.page-company .bg-layer-after{
		background: white;
	}
	
	.page-company ul {
		padding: 0px;
		text-align: center;
	}
	
	.page022 h1, .page-company h1 {
		line-height: 40px;
		text-align: center;
		color: rgba(0,0,0,0.7);
		font-size: 45px;
	}
	
	.page022 h3, .page-company h3 {
		padding: 0px 0px 0px 0px;
		text-align: center;
		color: rgba(0,0,0,0.5);
		margin-top: -15px;
		font-weight: 100;
	}

	.page-company ul li {
		position: relative;
		display: inline-block;
		margin: 20px;
		width: 380px;
		min-height: 400px;
		text-align: center;
		/* box-shadow: 0px 0px 2px 0px orangered; */
		overflow: hidden;
		padding: 0px;
		background: white;
	}
	
	.page-company ul li .li-top-left-bar{
		position: absolute;
		top: 0;
		left: 0;
		height: 200px;
		width: 10px;
		/* background: linear-gradient(#f76f12, #f76f12); */
	}
	
	.page-company ul li .li-bottom-right-bar{
		position: absolute;
		bottom: 0;
		right: 0;
		height: 200px;
		width: 10px;
		/* background: linear-gradient(#f76f12, #f76f12); */
	}
	
	.page-company ul li img {
		max-height: 300px;
	}
	
	.page-company ul li h2 {
		padding: 10px 0px 15px 0px;
		display: inline-block;
		font-size: 1.75em;
		line-height: 30px;
		width: 100%;
		font-family: fantasy;
		font-weight: 500;
		color: #000000cf;
	}
	
	.page-company ul li span {
		padding: 0px 0px 0px 0px;
		display: inline-block;
		font-size: 1.2em;
		height: 30px;
		color: black;
	}
	
	.page-company .form {
		width: 100%;
		max-width: 500px;
		margin: auto;
		padding-bottom: 50px;
	}
	
	.page-company .roow {
		padding: 0px 10px;
		margin-bottom: 15px;
	}
	
	.page-company .iinput{
		padding-top: 5px;
		display: flex;
	}
	
	.page-company .iinput input, .page-company .iinput textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid lightgray;
	}
	
	.page-company a.iwannajoin {
		text-decoration: none;
		background: linear-gradient(#f76f12, #f76f12);
		width: 200px;
		display: inline-block;
		padding: 10px 0px;
		text-align: center;
		color: white;
		box-shadow: 0px 0px 3px 1px;
		margin-top: 48px;
		border-radius: 24px;
	}
	
	.page-pricetable a.iwannajoin {
		text-decoration: none;
		background: linear-gradient(#f76f12, #f76f12);
		display: inline-block;
		padding: 20px 60px;
		text-align: center;
		color: white;
		box-shadow: 0px 0px 3px 1px;
		border-radius: 50px;
		font-size: 26px;
		font-family: fantasy;
		font-weight: 100;
	}
	
	.page-pricetable table{
		text-align: center;
		width: 100%;
	}
	
	.page-pricetable table td{
		padding: 30px 0px;
	}
	
	.page-pricetable table td.pricelogo-area{
		padding: 0px;
	}

	.page-pricetable table span {
		font-size: 31px;
		font-weight: 700;
		color: #000000bf;
	}
	
	.pricelogo {
		background-image: url(images/logo.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		width: 100%;
		height: 300px;
		display: inline-block;
	}
	
	
	
	.page-knowhow .bg-layer-before{
		background: #000000b8;
	}
	
	.page-knowhow .bg-layer-after{
		background-image: url(images/services_image.jpg);
		background-repeat: no-repeat;
		background-size: 50% 100%;
		background-position: left center;
	}
	
	.page-knowhow h1 {
		font-size: 50px;
		font-weight: 600;
	}
	
	.page-knowhow ul {
		margin: 0;
		padding: 0;
		list-style: none;
		margin-top: 40px;
	}
	
	.page-knowhow li{
		background-image: url(images/check.png);
		background-repeat: no-repeat;
		background-size: auto;
		background-position: left 0px top 22px;
		line-height: 35px;
		padding: 20px 50px;
		font-size: 27px;
		color: white;
		font-weight: 500;
	}
	
	.page-knowhow li.sub {
		background: none;
		padding: 0px 52px;
		margin-top: -28px;
		font-size: 20px;
		font-weight: 100;
	}
	
	
	
	
	.page-about-us .bg-layer-before{
		background: #ffffff;
	}
	
	.page-about-us .bg-layer-after{
		background-image: url(images/about_image.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left center;
	}
	
	.page-about-us h1 {
		font-size: 50px;
		font-weight: 600;
	}
	
	.page-about-us ul {
		margin: 0;
		padding: 0;
		list-style: none;
		margin-top: 40px;
	}
	
	.page-about-us li{
		background-repeat: no-repeat;
		background-size: auto;
		background-position: left 0px top 22px;
		line-height: 35px;
		padding: 20px 0px;
		font-size: 18px;
		color: #6d6d6d;
		font-weight: 500;
	}
	
	
	
	.page-contact .bg-layer-before{
		background-image: url(images/background_slider_footer.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		min-height: 850px;
	}
	
	.page-contact .bg-layer-after{
		background: rgba(255,255,255,0);
	}
	
	.contact-form-area{
		position: relative;
		text-align: center;
	}
	
	.contact-form-area h1 {
		color: white;
		padding: 10px 0px 10px 0px;
	}
	
	.contact-form-area .roow {
		position: relative;
		margin-bottom: 15px;
	}

	.contact-form-area .tiitle {
		position: absolute;
		left: 0px;
		top: 2px;
		color: #dadada;
		font-size: 14px;
		right: 0px;
	}
	
	.contact-form-area input {
		height: 50px;
		font-size: 15px;
		line-height: 15px;
		padding-left: 2%;
		padding-right: 2%;
		flex: 1;
		background: none;
		border: 1px solid #d3d3d354;
		border-radius: 50px;
		width: 97%;
		color: white;
	}
	
	.contact-form-area textarea {
		width: 100%;
		padding-top: 25px;
		height: 150px;
		border-radius: 30px;
		background: none;
		color: white;
	}

	.contact-form-area .form {
		
	}
	
	.contact-form-area .formbtn {
		padding: 15px 0px;
		color: white;
		width: 230px;
		text-align: center;
		background: linear-gradient(#f76f12, #f76f12);
		margin: auto;
		border-radius: 10px;
		cursor: pointer;
		font-size: 20px;
	}
	
	
	
	.page-advertise .bg-layer-before{
		background-image: url(images/background_slider_footer.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		min-height: 700px;
	}
	
	.page-advertise .bg-layer-after{
		background: rgba(0,0,0,0.5);
	}
	
	.page-advertise h1 {
		text-align: center;
		color: white;
		font-weight: 400;
		font-style: normal;
		font-size: 50px;
	}
	
	.page-advertise ul {
		padding: 0px;
		margin: 0px;
		list-style: none;
		text-align: center;
	}
	
	.page-advertise ul li{
		padding: 0px;
		width: 44%;
		margin: 10px 1%;
		display: inline-block;
		background: white;
		height: 250px;
	}
	
	.page-advertise ul li td{
		width: 50%;
		vertical-align: middle;
		height: 122px;
		padding: 0px 20px;
	}
	
	.page-advertise ul li img{
		max-width: 100%;
		box-shadow: 0px 0px 50px 5px lightgrey;
		border-radius: 10px;
	}
	
	.page-advertise button {
		background: linear-gradient(#f76f12, #f76f12);
		color: white;
		padding: 10px 100px;
		border: 1px solid gray;
		border-radius: 52px;
		font-size: 24px;
	}
	
	#track-results ul {
		max-width: 450px;
		background: none;
		padding: 50px 20px 20px 70px;
	}
	
	#track-results li {
		height: 30px;
		font-size: 15px;
		font-family: 'Roboto';
		padding: 0px 0px;
		width: 100%;
		margin: 5px auto;
		position: relative;
		background: none;
	}

	#track-results li span.efe {
		display: block;
		width: 80px;
		height: 80px;
		position: absolute;
		background-image: url(//streetcourier.gr/assets/images/logo.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		top: -20px;
		left: -80px;
		filter: invert(0.5);
	}

	
	
	.page-copyright{
		display: none;
	}
	
	.page-copyright div{
		height: 70px;
		min-height: 70px;
		text-align: center;
		padding: 0px;
	}
	
	.page-copyright em{
		font-family: Raleway;
		font-size: 18px;
		line-height: 70px;
		text-align: center;
	}
	
	.page-footer > div{
		min-height: 150px;
		padding: 0px;
	}
	
	.page-footer .bg-layer-before{
		background: #353434;
	}
	
	.page-footer .bg-layer-after{
		background: none;
	}
	
	.page-footer .logo{
		margin-top: 100px;
	}
	
	.page-footer .contact-details{
		font-size: 20px;
		line-height: 40px;
		text-align: center;
		display: inline-block;
		font-weight: 600;
		float: right;
		margin-top: 60px;
		color: darkslategray;
	}
	
	.page-footer .extra-links {
		margin-top: 20px;
		width: 100%;
		text-align: center;
	}
	
	.page-footer .extra-links a {
		display: inline-block;
		line-height: 40px;
		text-decoration: none;
		color: #c3c3c3;
	}
	
	.page-footer .social {
		width: 100%;
		text-align: center;
		padding: 20px 20px;
		cursor: pointer;
	}
	
	.page-footer .social a{
		padding: 0px 15px;
	}
	
	.page-footer .social img {
		width: 36px;
	}
	

	
	.page-pricetable > div{
		height: 800px;
		min-height: 800px;
		text-align: center;
	}
	
	.page-pricetable .bg-layer-before{
		background-image: url(images/background_pricelist.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: auto;
		background-attachment: fixed;
	}
	
	.page-pricetable .bg-layer-after{
		background: none;
	}
	
	.page-pricetable ul.areas {
		padding: 0px;
		text-align: center;
		margin-top: 50px;
	}
	
	.page-pricetable h1, .page-company h1 {
		line-height: 40px;
		text-align: center;
		color: rgba(0,0,0,0.7);
		font-size: 45px;
	}

	.page-pricetable ul.areas > li {
		position: relative;
		display: inline-block;
		margin: 20px;
		width: 45%;
		padding: 10px;
		float: left;
	}
	
	
	ul.pricetable{
		padding: 50px;
		border-radius: 50px;
		box-shadow: 10px 10px 20px 5px lightgray;
	}
	
	ul.pricetable li {
		list-style: none;
		border-bottom: 1px solid lightgray;
		padding: 20px 5px;
		font-size: 20px;
		font-weight: 700;
		text-align: left;
	}
	
	ul.pricetable li span:last-child {
		float: right;
	}
	
	ul.pricetable li:last-child {
		font-size: 16px;
		border: none;
		font-weight: 400;
	}

	
	.page-knowhow a.iwannajoin {
		text-decoration: none;
		background: linear-gradient(#f76f12, #f76f12);
		width: 200px;
		display: inline-block;
		padding: 10px 0px;
		text-align: center;
		color: white;
		box-shadow: 0px 0px 3px 1px;
		margin-top: 50px;
		border-radius: 10px;
		display: none;
	}
	
	.page-about-us a.iwannajoin {
		text-decoration: none;
		background: linear-gradient(#f76f12, #f76f12);
		width: 200px;
		display: inline-block;
		padding: 10px 0px;
		text-align: center;
		color: white;
		box-shadow: 0px 0px 3px 1px;
		margin-top: 50px;
		border-radius: 10px;
		display: none;
	}
	
	
	.page-contact ul.areas > li {
		position: relative;
		display: inline-block;
		margin: 20px;
		width: 45%;
		padding: 10px;
		float: left;
	}
	
	
	.page-contact ul.areas ul {
		margin-top: 50px;
		padding-top: 30px;
	}

	.page-contact ul.areas ul li {
		color: white;
		list-style: none;
		padding: 25px 0px 25px 60px;
		font-size: 21px;
	}
	
	.contact-list li:nth-child(1){
		background-image: url(images/icon1.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 44px;
	}
	
	.contact-list li:nth-child(2){
		background-image: url(images/icon2.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 44px;
	}
	
	.contact-list li:nth-child(3){
		background-image: url(images/icon3.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 44px;
	}
	
	.contact-list li:nth-child(4){
		background-image: url(images/icon4.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 44px;
	}
	
	
	
	
	.header{
		position: fixed;
		/* background: url(images/header-repeat.jpg); */
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: -1;
		background-size: 30%;
		background-position: bottom;
		background-color: #3e3e3e;
		/* filter: opacity(0.2); */
	}
	
	.container{
		margin: auto;
		left: 0;
		right: 0;
		position: absolute;
		max-width: 1920px;
	}

	.left_column {
		width: 17%;
		z-index: 10;
		padding: 0px 2%;
		display: inline-block;
		float: left;
	}
	
	.right_column {
		width: 77%;
		display: inline-block;
		float: left;
		padding: 0px 1%;
	}
	
	.right_column.fullw {
		width: 98%;
	}
	
	.delivery_area {
		width: 100%;
		padding: 15px 0px;
		min-height: 10px;
		background-color: #fff8dc42;
		border-radius: 5px;
		box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
		margin-top: 10px;
		background-image: url(images/suza.png);
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: 10px 0px;
		position: relative;
	}
	
	.delivery_address{
		margin-left: 70px;
	}
	
	.searcharea {
		width: 96%;
		padding: 10px 2%;
		background-color: rgba(255,255,255,1);
		box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
		border-radius: 5px;
	}
	
	.sortby_area{
		display:none;
		position: fixed;
		background: white;
		padding: 10px;
		width: 230px;
		height: 300px;
		z-index: 4;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow: 0px 0px 10px -5px;
		border-radius: 10px;
		top: 20%;
		right: 10%;
	}
	
	input:focus{
		outline: none;
	}
	
	
	.search_field {
		width: 66%;
		display: inline-block;
		padding: 10px 0px;
		font-size: 1.0em;
	}
	
	.search_field input.search_input {
		width: 100%;
		padding: 5px 0px;
		border: none;
		text-align: center;
	}
	
	.search_btn {
		width: 15%;
		display: inline-block;
		background: darkorange;
		padding: 10px 1%;
		margin-left: 1%;
		text-align: center;
		border-radius: 5px;
		color: white;
		font-weight: 700;
		cursor: pointer;
		display: none;
	}
		
	

	
	ul.cousineList {
		list-style-type: none;
		width: 100%;
		padding: 0px;
		//max-width: 1000px;
		margin-top: 0px;
	}
	
	.cousineList li {
		padding: 8px 10px;
		background: rgba(255,255,255,0.9);
		border: 1px solid lightgray;
		margin-bottom: 8px;
		border-radius: 5px;
		cursor: pointer;
		position: relative;
		transition: 0.5s all ease;
	}
	
	.cousineList li.active {
		background-color: linear-gradient(#f76f12, #f76f12);
		background-image: url(images/selected-li.png);
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: 10px 50%;
		padding-left: 30px;
		transition: 0.5s all ease;
	}
	
	
	ul.areaList {
		list-style-type: none;
		width: 100%;
		padding: 0px;
		//max-width: 1000px;
		margin-top: 0px;
	}
	
	.areaList li {
		padding: 8px 10px;
		background: rgba(255,255,255,0.9);
		border: 1px solid lightgray;
		margin-bottom: 8px;
		border-radius: 5px;
		cursor: pointer;
		position: relative;
		transition: 0.5s all ease;
	}
	
	.areaList li.active {
		background-color: linear-gradient(#f76f12, #f76f12);
		background-image: url(images/selected-li.png);
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: 10px 50%;
		padding-left: 30px;
		transition: 0.5s all ease;
	}
	
	
	ul.opentypeList {
		list-style-type: none;
		width: 100%;
		padding: 0px;
		//max-width: 1000px;
		margin-top: 0px;
	}
	
	.opentypeList li {
		padding: 8px 10px;
		background: rgba(255,255,255,0.9);
		border: 1px solid lightgray;
		margin-bottom: 8px;
		border-radius: 5px;
		cursor: pointer;
		position: relative;
		transition: 0.5s all ease;
	}
	
	.opentypeList li.active {
		background-color: linear-gradient(#f76f12, #f76f12);
		background-image: url(images/selected-li.png);
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: 10px 50%;
		padding-left: 30px;
		transition: 0.5s all ease;
	}
	
	
	ul.sortbyList {
		list-style-type: none;
		width: 100%;
		padding: 0px;
		//max-width: 1000px;
		margin-top: 0px;
	}
	
	.sortbyList li {
		padding: 8px 10px;
		background: rgba(255,255,255,0.9);
		box-shadow: -2px 2px 0px -1px rgba(0,0,0,0.1);
		margin-bottom: 8px;
		border-radius: 5px;
		cursor: pointer;
		position: relative;
		transition: 0.5s all ease;
		background-image: url(images/radio-button-unchecked.png);
		background-position: right;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.sortbyList li.active {
		background-image: url(images/radio-button-checked.png);
		transition: 0.5s all ease;
	}
	
	.sortbytitle {
		padding: 10px;
		font-weight: 600;
		margin-bottom: 20px;
		box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.2);
	}


	ul.businessList {
		list-style-type: none;
		width: 100%;
		padding: 0px 0px 20px 0px;
		//max-width: 1000px;
	}
	

	ul.businessList li {
		background-color: #fff;
		display: block;
		padding: 16px;
		position: relative;
		margin-bottom: 16px;
		border: 1px solid lightgray;
		border-radius: 5px;
	}
	
	ul.businessList .parng{
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100px;
	}
	
	.bannerarea {
		width: 25%;
		display: inline-block;
		position: absolute;
		top: 5px;
		bottom: 5px;
		cursor: pointer;
	}
	
	.bannerarea.lite{
		height: 60px;
		opacity: 0.1;
	}
	
	.bannerarea img {
		//height: inherit;
		width: inherit;
	}
	
	.businessarea {
		color: #2a3846;
		display: inline-block;
		width: 35%;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 30%;
	}
	
	.logoarea {
		width: 20%;
		height: 55px;
		position: absolute;
		box-shadow: 0px 0px 1px 1px #f1f2f4;
		border-radius: 2px;
		top: 20px;
		left: -50px;
		cursor: pointer;
	}
	
	.logoarea img {
		width: 100%;
	}
	
	.titlearea {
		position: absolute;
		border-radius: 2px;
		top: 0px;
		bottom: 0px;
		left: 30px;
		right: 10px;
		padding: 10px;
	}
	
	.infoarea {
		width: 30%;
		padding-top: 2px;
		display: inline-block;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 65%;
		font-size: 0.96em;
		color: rgba(0,0,0,0.7);
		z-index: 2;
	} 
	
	.ratingarea {
		position: absolute;
		top: -85px;
		left: 70px;
		color: black;
		background-color: #ffc107;
		font-size: 12px;
		padding: 5px 5px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
	}

	.ratingarea .checked {
		color: orange;
	}
	
	.daddr .checked{
		color: orange;
	}
	
	.businesstitle {
		font-weight: 700;
		cursor: pointer;
	}
	
	.businessaddress {
		padding: 3px 0px;
		max-height: 18px;
		max-width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: absolute;
		right: 8px;
		bottom: 0px;
	}
	
	.businessaddress span {
		display: inline-block;
		margin-left: 3px;
	}
	
	.businesscontact {
		position: absolute;
		bottom: 3%;
		right: 10px;
	}
	
	
	.openingarea, .deliveryfeearea, .deliverytimearea, .minorderarea {
		width: 100%;
		display: inline-block;
		position: relative;
	}
	
	span.ititle {
		padding: 2px 0px 2px 20px;
		float: left;
	}
	
	span.itext {
		padding: 2px 10px 2px 0px;
		float: right;
	}
	
	.deliverytimearea i.fa {
		position: absolute;
		left: 0px;
		top: 3px;
	}
	
	.popular {
		position: absolute;
		right: 10px;
		top: 30%;
		font-size: 0.9em;
		color: rgb(208 104 0);
	}
	
	.cuisine {
		width: 90%;
	}
	
	.businessline.hide, .norecords.hide{
		display: none;
	}
	
	.norecords {
		width: 96%;
		padding: 30px 2%;
		text-align: center;
		margin-top: 50px;
		position: relative;
		display: inline-block;
		background-color: white;
		border: 1px solid lightgray;
		border-radius: 5px;
	}
	
	.areaList li.hide{
		display: none;
	}
	
	.cousineList li.hide{
		display: none;
	}
	
	.filterbtnarea{
		display: block;
		width: 100%;
		margin: -30px 5px -15px 0px;
		height: 40px;
		position: relative;
	}
	
	.fa.fa-filter {
		left: 10px;
		position: absolute;
		cursor: pointer;
		color: rgba(0,0,0,0.5);
	}
	
	.fa.fa-sort-amount-asc, .fa.fa-sort-amount-desc {
		right: 10px;
		position: absolute;
		cursor: pointer;
		color: rgba(0,0,0,0.5);
		border-left: 1px solid lightgray;
		right: 0px;
		border-radius: 10px;
		padding: 18px 10px;
	}
	
	.filterbtnarea .fa-filter{
		display: none;
	}
	
	.filterclose {
		display: block;
		width: 50%;
		right: 0;
		text-align: center;
		background: rgba(190,80,0,0.8);
		color: white;
		position: fixed;
		bottom: 0px;
		right: 0px;
		padding: 10px 0px;
		z-index: 10;
	}
	
	.filterreset{
		display: block;
		width: 50%;
		left: 10%;
		text-align: center;
		background: rgba(0,0,0,0.3);
		color: white;
		position: fixed;
		bottom: 0px;
		left: 0px;
		padding: 10px 0px;
		z-index: 10;
	}
	
	.filterinputarea{
		width: 100%;
		text-align: center;
		background: rgba(255,255,255,0.9);
		box-shadow: 0px 5px 10px -10px black;
		margin-top: 10px;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
	}
	
	.filterinputarea input{
		width: 90%;
		border: none;
		padding: 13px 5%;
		text-align: center;
	}
	
	.filterinputarea i.fa.fa-search {
		position: absolute;
		top: 7px;
		left: 10px;
		color: rgba(0,0,0,0.2);
		font-size: 24px;
	}
	
	.itemsarea {
		padding-top: 10px;
		border-top: 1px dashed rgba(0,0,0,0.2);
		display: inline-block;
		width: 100%;
	}
	
	.itemsarea .sitem {
		width: 30%;
		margin: 0.5%;
		padding: 01%;
		display: inline-block;
		box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
		min-height: 36px;
		float: left;
	}
	
	.ittitle {
		width: 70%;
		display: inline-block;
		vertical-align: -webkit-baseline-middle;
		word-break: break-word;
	}
	
	.itprice {
		width: 30%;
		display: inline-block;
		text-align: right;
		font-weight: 700;
		vertical-align: -webkit-baseline-middle;
	}
	
	
	.cuifiltertitle{
		width: 96%;
		padding: 5px 2%;
		margin-bottom: 5px;
	}
	
	.areafiltertitle{
		width: 96%;
		padding: 5px 2%;
		margin-bottom: 5px;
	}
	
	.opentypefiltertitle{
		width: 96%;
		padding: 5px 2%;
		margin-bottom: 5px;
	}
	
	.banner {
		width: 100%;
		padding: 20px 0px;
		position: absolute;
		background-position: top;
		z-index: 10;
		box-shadow: 0px 9px 10px -14px black;
		background: rgba(250,250,250,0.9);
	}
	
	.banner.fixed {
		position: fixed;
		top: 0;
		max-width: 1920px;
	}

	.logo {
		background-image: url(images/street_courier_s_logo.png);
		width: 270px;
		margin-left: 20px;
		height: 75px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		position: relative;
	}
	
	.logo a{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	.sitetitle {
		float: right;
	}
	
	.sitetitle ul{
		margin-right: 35px;
	}
	
	.sitetitle ul li{
		display: inline-block;
		padding: 10px;
		cursor: pointer;
		border-radius: 5px;
		font-weight: bold;
		color: #252525ad;
		margin: 5px 0px 0px 5px;
		font-size: 20px;
	}
	
	.sitetitle .menubtn{
		display: none;
	}
	
	.findme{
		position: absolute;
		top: 15px;
		right: 10px;
		border: none;
		background: none;
		text-decoration: underline;
		display: none;
	}
	
	.add_alter_address {
		display: block;
		margin: 10px auto;
		padding: 10px 20px;
		border-radius: 20px;
	}
	
	#mapholder .openlocation {
		position: absolute;
		left: 39%;
		top: 10%;
		background: deepskyblue;
		padding: 10px;
		box-shadow: 0px 0px 5px 0px;
		cursor: pointer;
	}
	
	.addresses_area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 5%;
		display: none;
		overflow-y: auto;
		padding-bottom: 50px;
		max-width: 350px;
		box-shadow: 0px 0px 10px 0px;
		z-index: 999;
	}
	
	.history_area{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 5%;
		display: none;
		overflow-y: auto;
		padding-bottom: 50px;
		max-width: 350px;
		box-shadow: 0px 0px 10px 0px;
		z-index: 999;
	}
	
	.account_settings_area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 5%;
		display: none;
		overflow-y: auto;
		padding-bottom: 50px;
		max-width: 450px;
		box-shadow: 0px 0px 10px 0px;
		z-index: 999;
	}
	
	.user_settings {
		margin-bottom: 10px;
	}
	
	.settings_title {
		font-weight: 700;
		border-bottom: 1px solid lightgray;
		box-shadow: 0px 4px 5px -6px;
		padding: 10px 0px;
	}
	
	.form_fields {
		padding-top: 10px;
	}
	
	.form_title {
		width: 40%;
		display: inline-block;
		padding: 10px 0px;
		color: lightslategray;
	}
	
	.delivery_area .form_title {
		width: auto;
		padding: 0px;
		margin-left: 0px;
	}
	
	.form_input {
		width: 58%;
		display: inline-block;
	}
	
	.user_stats .form_title {
		width: 70%;
	}
	
	.user_stats .form_input {
		width: 18%;
		text-align: right;
	}
	
	.form_input input {
		padding: 5px;
		border: 1px solid lightgray;
		border-radius: 5px;
		width: 95%;
	}
	
	.close_account_settings, .close_addresses_settings {
		float: right;
		box-shadow: 0px 0px 5px -4px;
		padding: 5px;
		right: 0px;
		clear: both;
		position: relative;
		width: 20px;
		text-align: center;
		font-size: 20px;
		border-radius: 5px;
		border: 1px solid lightgrey;
		cursor: pointer;
	}
	
	.form_action {
		background: rgba(0,200,255,0.1);
		padding: 5px 10px;
		float: right;
		right: 10px;
		display: inline-block;
		position: relative;
		border-radius: 5px;
		border: 1px solid lightgray;
		cursor: pointer;
	}
	
	.account_settings_area hr {
		clear: both;
		border: none;
		margin-bottom: -5px;
	}
	
	.address_line {
		box-shadow: 0px 0px 10px -7px;
		border-radius: 10px;
		padding: 0px 10px;
	}
	
	.address_line.new{
		display:none;
		background: rgba(250,250,0,0.1);
	}
	
	.address_line .form_fields {
		padding-top: 0px;
		border-bottom: 1px dashed lightgrey;
	}
	
	.address_line .form_action{
		float: none;
		right: auto;
		margin: 10px 8px;
	}
	
	.history_line {
		box-shadow: 0px 0px 10px -7px;
		border-radius: 10px;
		padding: 0px 10px;
	}
	
	.history_line .form_fields {
		padding-top: 0px;
		border-bottom: 1px dashed lightgrey;
	}
	
	.history_line .form_action{
		float: none;
		right: auto;
		margin: 10px;
	}
	
	.addresses_area hr, .history_area hr {
		clear: both;
		border: none;
	}
	
	.add_new_address {
		display: inline-block;
		box-shadow: 0px 0px 5px -4px;
		padding: 5px;
		left: 0px;
		clear: both;
		position: relative;
		width: 20px;
		text-align: center;
		font-size: 20px;
		border-radius: 5px;
		border: 1px solid lightgrey;
		cursor: pointer;
	}

	.error{
		box-shadow: 0px 0px 1px 1px darkred;
	}
	
	div#noty_area {
		z-index: 1000;
		position: fixed;
		top: 5%;
		left: 10%;
		right: 10%;
		color: white;
		text-align: center;
		max-width: 300px;
		display: none;
	}
	
	div#noty_area .nmes{
		padding: 20px;
	}
	
	div#noty_area .notyclose {
		width: 100%;
		padding: 10px 0px;
		background: rgba(0,0,0,0.2);
		border: 0px;
		color: antiquewhite;
		margin-top: 15px;
	}
	
	div#noty_area.ok {
		background: rgba(0,120,0,0.9);
	}
	
	div#noty_area.success {
		background: rgba(0,120,0,0.9);
	}
	
	div#noty_area.error {
		background: rgb(72,72,72,0.9);
	}
	
	div#noty_area.nc {
		background: rgba(120,120,120,0.9);
	}
	
	div#noty_area.required {
		background: rgba(120,0,0,0.9);
	}
	
	.actionbar {
		position: fixed;
		height: 50px;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255,255,255,0.9);
		box-shadow: 0px 0px 10px -3px grey;
		border-top: 1px solid lightgray;
		z-index: 100;
	}
	
	.accountarea {
		width: 50px;
		height: 40px;
		margin: 5px;
		float: left;
		filter: opacity(0.5);
		cursor: pointer;
		background-image: url(../../includes/css/images/e-user.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70%;
	}
	
	.addressesarea{
		width: 50px;
		height: 40px;
		margin: 5px;
		float: left;
		filter: opacity(0.5);
		cursor: pointer;
		background-image: url(https://cdn.iconscout.com/icon/free/png-256/address-1448067-1223812.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70%;
	}
	
	.ordershisarea{
		width: 50px;
		height: 40px;
		margin: 5px;
		float: left;
		filter: opacity(0.5);
		cursor: pointer;
		background-image: url(images/order-history.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70%;
	}
	
	.logoutarea {
		width: 50px;
		height: 40px;
		margin: 5px;
		float: right;
		filter: opacity(0.5);
		cursor: pointer;
		background-image: url(../../includes/css/images/e-logout.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70%;
	}
	
	li.arns.blocked {
		background: rgba(100,100,100,0.1);
		opacity: 0.5;
	}
	
	li.csns.blocked {
		background: rgba(100,100,100,0.1);
		opacity: 0.5;
	}
	
	/*--------------------------------*/
	
	.businesscuisines {
		padding: 2px 15px 5px 0px;
		float: left;
		height: 18px;
	}
	
	.filterbtnarea{
		display: block;
		width: 100px;
		margin: -10px -2px 4px 0px;
		height: 65px;
		position: relative;
		float: right;
	}
	
	ul.businessList li {
		background-color: #fff;
		display: inline-block;
		padding: 0px;
		position: relative;
		border: 1px solid lightgray;
		margin: 8px 1.2%;
		max-width: 47%;
		min-width: 330px;
	}
	
	.bannerarea img {
		position: relative;
		//height: inherit;
		width: inherit;
	}
	
	.areafiltertitle, .cuifiltertitle, .opentypefiltertitle, .pickchoise {
		width: 96%;
		padding: 15px 0px 15px 4%;
		background-color: rgba(0,0,0,0.1);
		margin: 0px;
		font-weight: 600;
	}
	
	.infoarea {
		width: 96%;
		padding: 2px 2% 0% 2%;
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
	}
	
	.businessarea {
		position: relative;
		color: #2a3846;
		min-height: auto;
		width: 100%;
		left: auto;
		top: auto;
		bottom: auto;
	}
	
	.logoarea {
		width: 60px;
		height: 60px;
		position: absolute;
		border: 1px solid lightslategray;
		border-radius: 2px;
		display: inline-block;
		float: left;
		left: -5px;
		top: -56px;
		z-index: 2;
		overflow: hidden;
	}
	
	.bannerarea {
		position: relative;
		width: 100%;
		top: 0px;
		border-radius: 10px 10px 0px 0px;
		overflow: hidden;
		height: 148px;
	}
	
	.titlearea {
		width: 96%;
		position: relative;
		box-shadow: 0px 0px 1px 1px #f1f2f4;
		border-radius: 2px;
		display: inline-block;
		padding: 10px 2% 0px 2%;
		left: auto;
		right: auto;
	}
	
	.filterclose {
		display: none;
		width: 50%;
		right: 0;
		text-align: center;
		background: rgba(190,80,0,0.8);
		color: white;
		position: fixed;
		bottom: 0px;
		right: 0px;
		padding: 10px 0px;
		z-index: 10;
	}
	
	.filterreset{
		display: none;
		width: 50%;
		left: 10%;
		text-align: center;
		background: rgba(0,0,0,0.3);
		color: white;
		position: fixed;
		bottom: 0px;
		left: 0px;
		padding: 10px 0px;
		z-index: 10;
	}

	.openingarea, .deliveryfeearea, .deliverytimearea, .minorderarea {
		width: auto;
		padding: 5px;
		display: inline-block;
		position: relative;
		float: left;
		font-size: 1em;
	}
	
	.openingarea .fa, .deliveryfeearea .fa, .minorderarea .fa{
		display: none;
	}
	
	.deliverytimearea .ititle {
		display: none;
	}
	
	.deliverytimearea {
		width: 75px;
		padding: 5px 5px 5px 10px;
		position: absolute;
		top: -75px;
		font-size: 1.1em;
		right: 10px;
		background: white;
		box-shadow: 0px 0px 2px 0px;
		border-radius: 15px;
	}
	
	.minorderarea {
		padding: 0px;
		position: absolute;
		top: -214px;
		font-size: 1em;
		right: 12px;
		background-image: url(images/red-tag.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-size: auto;
		color: cornsilk;
		filter: drop-shadow(1px 1px 2px black);
		width: 80px;
		height: 45px;
		height: 38px;
	}
	
	.minorderarea.lite {
		top: -125px;
		right: 12px;
		background-image: url(images/red-tag.svg);
		background-size: auto;
		height: 38px;
	}
	
	.minorderarea span.ititle {
		font-size: 0.8em;
		float: none;
		text-align: center;
		padding-top: 4px;
	}
	
	.minorderarea span.itext {
		float: none;
		text-align: center;
		width: 100%;
	}
	
	.openingarea, .deliveryfeearea{
		border-right: 1px solid lightgray;
	}
	
	.deliverytimearea i.fa {
		position: absolute;
		left: 8px;
		top: 7px;
	}

	.businessaddress i.fa {
		position: relative;
		float: left;
		margin: 1px 0px 0px 0px;
	}
	
	span.ititle {
		padding: 0px 0px 0px 0px;
		float: left;
		text-align: left;
		display: block;
	}
	
	span.itext {
		padding: 0px 0px 0px 4px;
		float: left;
		display: inline-block;
		font-weight: bold;
	}
	
	.deliverytimearea span.itext{
		float: right;
	}
	
	.delivery_area {
		//display: none;
	}
	
	.businesscontact {
		display: none;
	}
	

	
	#prevpage{
		padding: 5px;
		display: inline-block;
		float: left;
		margin-left: 15px;
		margin-bottom: 80px;
		background: darkorange;
		color: white;
		display: none;
	}
	
	#nextpage{
		padding: 5px;
		display: inline-block;
		float: right;
		margin-right: 15px;
		margin-bottom: 80px;
		background: darkorange;
		color: white;
	}
	
	#prevpage img, #nextpage img {
		width: 50px;
		cursor: pointer;
	}

	
/************* advertise ***************/	
	
	
	.advertise {
		position: relative;
		height: 250px;
		width: 100%;
		padding: 0 4%;
		margin-left: -4%;
		overflow: hidden;
		display: list-item;
		margin-bottom: 30px;
		background: #2727276e;
		border-radius: 10px;
		box-shadow: 0px 15px 15px -15px;
	}
	
	.advertise fieldset {
		border: none;
		color: darkred;
		display: contents;
	}
	
	.advertise legend {
		padding: 15px 6px;
		font-weight: 700;
		font-size: 1.1em;
	}
	
	ul.advertisebuss {
		width: 100%;
		padding: 0px;
		margin: 0px;
		list-style-type: none;
		white-space: nowrap;
		overflow-x: scroll;
		scrollbar-height: 3px;
	}
	
	.advertisebuss li {
		display: inline-block;
		width: 24%;
		position: relative;
		padding: 0px 20px 10px 0px;
		height: 200px;
	}
	
	.advertisebuss .bannerarea {
		position: relative;
		width: 100%;
		top: 0px;
		border-radius: 10px;
		overflow: hidden;
		height: 148px;
	}
	
	.advertisebuss .businesstitle {
		font-weight: 700;
		cursor: pointer;
		position: relative;
		background: #2727276e;
		width: 96%;
		top: -60px;
		padding: 10px 2%;
		border-top: 1px solid;
		border-bottom: 1px solid;
	}
	
	.advertisebuss .businesscuisines {
		padding: 0px 5px 0px 5px;
		position: relative;
		color: darkslategray;
		font-weight: 700;
		top: -35px;
	}
	
	.tooltip {
		display: none;
	}
	
	.bg-layer-before{
		z-index: 1;
		position: absolute;
		padding: 50px 0px;
		min-height: 700px;
		width: 100%;
	}
	
	.bg-layer-after{
		z-index: 2;
		padding: 50px 0px;
		position: absolute;
		min-height: 700px;
		width: 100%;
	}
	
	.content{
		z-index: 3;
		padding: 50px 0px;
		margin-left: auto;
		margin-right: auto;
		width: 1360px;
		min-height: 700px;
	}

	#page-advertise .content {
		min-height: 0px;
		padding: 30px 0px;
		text-align: center;
	}
	
	
	



	ul.businessList li.pagehide{
		display: none!important;
	}
	

/********* Login Form *******8*/

.form_area{
	padding: 10px 0px 80px 0px;
    background: rgba(255,255,255,0);
    text-align: center;
    position: absolute;
    width: 340px;
    top: 190px;
    left: 50%;
    margin-left: -170px;
	display: none;
}

.closelogin{
	position: absolute;
    right: -8px;
    top: 0px;
    padding: 3px 8px;
    background: white;
    color: black;
	cursor: pointer;
}

.form_area fieldset {
	border: none;
    background: #000000b3;
    border-radius: 10px 10px;
    transition: 1s;
	display: none;
}

.sitetitle ul li.openlogin {
    padding: 10px 40px;
    background: linear-gradient(#f76f12, #f76f12);
    cursor: pointer;
    font-size: 20px;
    border: none;
    color: white;
    border-radius: 20px;
}

.form_area .title {
    padding: 20px;
    color: dimgray;
	color: white;
    font-size: 20px;
}

.submit {
    padding-top: 15px;
}

.username, .password{
	width: 100%;
	text-align: center;
	padding: 4px 0px;
}

.username input, .password input{
	width: 220px;
    text-align: left;
    padding: 15px 40px;
    border: 1px dashed rgba(0,0,0,0.2);
    border-radius: 20px;
	background-color: rgba(200,200,200,0.1);
	background-color: rgba(255,255,255,0.9);
}

.username input{
	background-image: url(https://cdn3.iconfinder.com/data/icons/iconoid-ui-essentials/32/ui_user_account_person_username-64.png);
    background-position: 10px;
    background-repeat: no-repeat;
    background-size: 20px;
}

.password input{
	background-image: url(https://cdn4.iconfinder.com/data/icons/glyphs/24/icons_password-64.png);
    background-position: 13px;
    background-repeat: no-repeat;
    background-size: 15px;
}

.form_area .forgotpass, .form_area .login{
	padding: 20px 0px;
	font-size: 1em;
    color: papayawhip;
	cursor: pointer;
}

.form_area .accountless{
	margin-top: 20px;
	width: 100%;
	text-align: center;
	font-size: 1em;
    color: papayawhip;
	cursor: pointer;
}



.g-recaptcha {
	margin: 20px auto;
	display: inline-block;
	width: 100%;
	max-width: 265px;
}

div#sisubmit, div#susignup, div#resetpass {
	width: 270px;
    background: linear-gradient(#f76f12, #f76f12);
    padding: 13px;
    margin: auto;
    cursor: pointer;
    box-shadow: 0px 0px 4px -2px black;
    border-radius: 20px;
}

div#signup {
	width: 100px;
	background: lightcyan;
	padding: 10px;
	margin: auto;
	cursor: pointer;
	box-shadow: 0px 0px 4px -2px black;
	border-radius: 5px;
}

.forgotpassarea, .signuparea {
	display: none;
}




/**************   Loader   **************/

#loader{
	position: fixed;
    background: floralwhite;
    top: 40%;
    left: 38%;
    text-align: center;
    width: 100px;
    padding: 25px 0px;
    border-radius: 50px;
    box-shadow: 0px 0px 150px 150px white;
    z-index: 1000;
    border: 1px solid lightgrey;
	display: none;
}

svg.tea {
  --secondary: #33406f;
}
svg.tea #teabag {
  transform-origin: top center;
  transform: rotate(3deg);
  animation: swing 2s infinite;
}
svg.tea #steamL {
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  animation: steamLarge 2s infinite;
}
svg.tea #steamR {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  animation: steamSmall 2s infinite;
}
@-moz-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-webkit-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-o-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-moz-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-webkit-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-o-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-moz-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@-webkit-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@-o-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}


/**********************************************/


.slider-container {
  height: 500px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.slider-container p {
  font-size: 3.5rem;
  padding: 0.5rem;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  font-family: fantasy;
}

.slider-container p span.static-text {
	color: #f76f12;
	position: absolute;
	left: 10%;
}

.slider-container p span.typed-text {
  font-weight: normal;
  color: #ffffff;
  left: 10%;
}
.slider-container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.slider-container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}


/**********************************************/


.double-text-container {
    position: relative;
    text-align: center;
    font-size: 54px;
    font-weight: bold;
    line-height: 40px;
    font-family: fantasy;
    color: #000000b5;
}

.double-text-background {
   position: absolute;
   top: -7px;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   font-size: 100px;
   color: #d3d3d340;
   font-family: fantasy;
}

#page-pricetable .double-text-container {
    text-align: left!important;
}


#page-company hr.orange-bar{
	border: none;
    border-top: 4px solid #f76f12;
    width: 256px;
    margin-top: 16px;
}

#page-knowhow hr.orange-bar{
	border: none;
    border-top: 4px solid #f76f12;
    width: 256px;
    float: left;
    margin-top: 16px;
}

#page-about-us hr.orange-bar{
	border: none;
    border-top: 4px solid #f76f12;
    width: 256px;
    float: left;
    margin-top: 16px;
}

#page-pricetable hr.orange-bar{
	border: none;
    border-top: 4px solid #f76f12;
    width: 256px;
    float: left;
    margin-top: 32px;
}

#page-contact hr.orange-bar{
	border: none;
    border-top: 4px solid #f76f12;
    width: 256px;
    float: left;
    margin-top: 32px;
	margin-left: 26px;
}

/**********************************************/


.right-placed{
	margin-left: 50%;
	padding-left: 60px;
}

.right-placed .double-text-container {
    position: relative;
    text-align: left;
    font-size: 54px;
    font-weight: 500;
    line-height: 50px;
    font-family: fantasy;
    color: #f76f12;
}

.right-placed .double-text-container span.oiot {
    color: #ffffff;
}

.right-placed .double-text-background {
   position: absolute;
   top: -7px;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   font-size: 100px;
   color: #d3d3d340;
   font-family: fantasy;
}


.page-contact .double-text-container {
    color: white;
}

/**********************************************/





















@media screen and (max-width: 1100px) {	
	
	.container{
		width: 100%;
	}
		
	.left_column {
		width: 26%;
	}
	
	.right_column {
		width: 65%;
	}
	
	.sitetitle ul{
		position: fixed;
		top: -17px;
		bottom: -17px;
		right: -310px;
		background: rgb(255 255 255 / 95%);
		z-index: 10;
		box-shadow: -1px 0px 35px -10px darkorange;
		width: 200px;
		transition: 1s right;
	}
	
	.sitetitle ul.open{
		right: -30px;
		transition: 1s right;
	}
	
	.sitetitle ul li{
		display: block;
		padding: 10px;
		cursor: pointer;
		border-radius: 5px;
		font-weight: bold;
		box-shadow: 0px 6px 9px -9px;
		margin: 19px 20px 0px -10px;
	}
	
	.sitetitle .menubtn{
		width: 50px;
		height: 50px;
		background-color: red;
		position: absolute;
		top: 25px;
		right: 15px;
		display: block;
		cursor: pointer;
		background: url(images/menu.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: orange;
		border-radius: 25px;
	}
	
	ul.businessList li {
		background-color: #fff;
		display: block;
		padding: 0px;
		position: relative;
		margin-bottom: 16px;
		border: 1px solid lightgray;
		max-width: 100%;
	}
	
	.bannerarea img {
		position: relative;
		width: inherit;
		//height: inherit;
	}

}






@media screen and (max-width: 1100px) {
	
	.container{
		width: 100%;
	}
	
	.logo {
		width: 250px;
	}
	
	.page1 .bg-layer-before {
		background-size: initial;
	}
	
	.form_area fieldset{
		display: none;
		border: none;
		top: 119px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background: #000000b3;
		border-radius: 0px;
		padding: 0px;
		padding-bottom: 20px;
	}

	.slider-container{
		display: none;
	}

	.header{
		background-size: 30%;
	}
	
	.content{
		width: 100%;
	}
	
	.page-company ul li {
		width: 80%;
	}
	
	.double-text-container {
		font-size: 44px;
	}
	
	#page-pricetable .double-text-container{
		text-align: center!important;
	}
	
	.right-placed .double-text-container {
		text-align: center!important;
		font-size: 44px;
	}
	
	.double-text-background {
		font-size: 80px;
		overflow: hidden;
	}
	
	.right-placed .double-text-background {
		text-align: center!important;
		font-size: 80px;
		overflow: hidden;
	}
	
	hr.orange-bar {
		float: none!important;
	}
	
	.page-knowhow li {
		background-position: left 10px top 22px;
		font-size: 23px;
	}
	
	.page-about-us li {
		background-position: left 10px top 22px;
		text-align: center;
	}
	
	.track{
		position: relative;
		width: 100%;
		text-align: center;
		left: 0;
		clear: both;
	}
	
	.track input#tracking_number{
		margin-top: 15px;
		margin-bottom: 20px;
		width: 80%;
	}
	
	#track-results li {
		height: 40px;
	}
	
	ul.pricetable {
		padding: 20px;
	}
	
	.page-pricetable ul.areas > li {
		position: relative;
		display: inline-block;
		margin: 0px;
		width: 100%;
		padding: 0px;
	}
	
	ul.pricetable li {
		font-size: 17px;
	}
	
	ul.pricetable li:last-child {
		font-size: 10px;
	}
	
	.right-placed {
		margin-left: 0%;
		padding-left: 0px;
	}
	
	ul.businessList.scroll{
		padding-top: 65px;
	}
	
	.advertisebuss li {
		width: 80%;
	}
	
	.advertise legend {
		text-align: center;
	}
	
	ul.businessList li {
		background-color: #fff;
		display: block;
		padding: 0px;
		position: relative;
		margin-bottom: 16px;
		border: 1px solid lightgray;
		max-width: 100%;
	}
	
	.bannerarea img {
		position: relative;
		width: inherit;
		//height: inherit;
	}
	
	.left_column li{
		border-radius: 0px;
		padding: 10px 10px;
		margin: 0px;
	}
	
	.left_column ul { /* comment this to make li full width */
		text-align: center;
	}
	
	.left_column li { /* comment this to make li full width */
		border-radius: 20px;
		padding: 10px 35px 10px 10px;
		display: inline-block;
		white-space: nowrap;
		margin: 3px;
	}
	
	.areafiltertitle, .cuifiltertitle, .opentypefiltertitle, .pickchoise {
		width: 96%;
		padding: 15px 2%;
		background-color: rgba(0,0,0,0.1);
		margin: 0px;
	}
	
	.infoarea {
		width: 96%;
		padding: 2px 2% 0% 2%;
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
	}
	
	.businessarea {
		position: relative;
		color: #2a3846;
		min-height: auto;
		width: 100%;
		left: auto;
		top: auto;
		bottom: auto;
	}
	
	.logoarea {
		width: 60px;
		height: 60px;
		position: absolute;
		border: 1px solid lightslategray;
		border-radius: 2px;
		display: inline-block;
		float: left;
		left: -5px;
		top: -56px;
		z-index: 2;
		overflow: hidden;
	}
	
	.bannerarea {
		position: relative;
		width: 100%;
		top: 0px;
		border-radius: 10px 10px 0px 0px;
		overflow: hidden;
		height: 148px;
	}
	
	.titlearea {
		width: 96%;
		position: relative;
		box-shadow: 0px 0px 1px 1px #f1f2f4;
		border-radius: 2px;
		display: inline-block;
		padding: 10px 2% 0px 2%;
		left: auto;
		right: auto;
	}

	.left_column {
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		z-index: 200;
		background: #fffef9;
		padding: 60px 0px;
		overflow: scroll;
		display: none;
	}
	
	.filterbtnarea{
		display: block;
		width: 100px;
		margin: -10px -2px 4px 0px;
		height: 65px;
		position: relative;
		float: right;
	}
	
	.filterclose {
		display: block;
		width: 50%;
		right: 0;
		text-align: center;
		background: rgba(190,80,0,0.8);
		color: white;
		position: fixed;
		bottom: 0px;
		right: 0px;
		padding: 10px 0px;
		z-index: 10;
	}
	
	.filterreset{
		display: block;
		width: 50%;
		left: 10%;
		text-align: center;
		background: rgba(0,0,0,0.8);
		color: white;
		position: fixed;
		bottom: 0px;
		left: 0px;
		padding: 10px 0px;
		z-index: 10;
	}
	
	.filterinputarea{
		width: 100%;
		text-align: center;
		background: rgba(255,255,255,0.9);
		position: fixed;
		margin: 0px;
		border-radius: 0px;
		top: 0px;
		left: 0px;
		right: 0px;
		box-shadow: 0px 2px 10px -6px black;
		z-index: 2;
	}
	
	.filterinputarea input{
		width: 90%;
		border: none;
		padding: 5%;
		text-align: center;
	}
	
	.filterinputarea i.fa.fa-search {
		font-size: 32px;
	}
	
	.fa.fa-filter {
		left: 15px;
		position: absolute;
		cursor: pointer;
		color: rgba(0,0,0,0.5);
	}
	
	.fa.fa-sort-amount-asc, .fa.fa-sort-amount-desc {
		right: 10px;
		position: absolute;
		cursor: pointer;
		color: rgba(0,0,0,0.5);
	}
	
	.right_column {
		width: 98%;
	}
	
	.page1 .bg-layer-after {
		background-size: 100%;
	}
	
	.openingarea, .deliveryfeearea, .deliverytimearea, .minorderarea {
		width: auto;
		padding: 5px;
		display: inline-block;
		position: relative;
		float: left;
		font-size: 1em;
	}
	
	.openingarea .fa, .deliveryfeearea .fa, .minorderarea .fa{
		display: none;
	}
	
	.deliverytimearea .ititle {
		display: none;
	}
	
	.deliverytimearea {
		width: 75px;
		padding: 5px 5px 5px 10px;
		position: absolute;
		top: -75px;
		font-size: 1.1em;
		right: 10px;
		background: white;
		box-shadow: 0px 0px 2px 0px;
		border-radius: 15px;
	}
	
	.minorderarea {
		padding: 0px;
		position: absolute;
		top: -214px;
		font-size: 1em;
		right: 12px;
		background-image: url(images/red-tag.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-size: auto;
		color: cornsilk;
		filter: drop-shadow(1px 1px 2px black);
		width: 80px;
		height: 45px;
		height: 38px;
	}
	
	.minorderarea span.ititle {
		font-size: 0.8em;
		float: none;
		text-align: center;
		padding-top: 4px;
	}
	
	.minorderarea span.itext {
		float: none;
		text-align: center;
		width: 100%;
	}
	
	.openingarea, .deliveryfeearea{
		border-right: 1px solid lightgray;
	}
	
	.deliverytimearea i.fa {
		position: absolute;
		left: 8px;
		top: 7px;
	}

	.businessaddress i.fa {
		position: relative;
		float: left;
		margin: 1px 0px 0px 0px;
	}
	
	span.ititle {
		padding: 0px 0px 0px 0px;
		float: left;
		text-align: left;
		display: block;
	}
	
	span.itext {
		padding: 0px 0px 0px 4px;
		float: left;
		display: inline-block;
		font-weight: bold;
	}
	
	.deliverytimearea span.itext{
		float: right;
	}
	
	.delivery_area {
		//display: none;
	}
	
	.businesscontact {
		display: none;
	}
	
	.search_btn {
		display: none;
	}
	
	.searcharea.fixed{
		z-index: 99;
		position: fixed;
		top: 0px;
		left: 0px;
		box-shadow: 0px 1px 1px 0px;
		border-radius: 0px;
		max-height: 45px;
	}
	
	.search_field{
		background-image: url(images/search-icon.png);
		background-repeat: no-repeat;
		background-size: 10%;
		background-position: left 8px top 10px;
	}
	
	.search_input{
		background-color: transparent;
		margin-left: 20px;
	}
	
	.filterbtnarea .fa-filter{
		display: block;
		padding: 18px 10px;
		border-left: 1px solid lightgray;
		left: 0px;
		border-radius: 10px;
	}
	
	.filterbtnarea .fa-sort-amount-asc{
		display: block;
		padding: 18px 10px;
		border-left: 1px solid lightgray;
		right: 0px;
		border-radius: 10px;
	}
	
	#nextpage {
		background: rgba(50,50,50,0.5);
		border: 1px solid lightgrey;
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 100;
	}
	
	#prevpage {
		background: rgba(50,50,50,0.5);
		border: 1px solid lightgrey;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 100;
	}
	
	#prevpage img, #nextpage img {
		filter: invert(1);
	}
	
	.steps .choices .choice{
		padding: 10px 20px;
		background: rgba(255,255,255,0.9);
		display: inline-block;
		margin: 10px;
		border-radius: 25px;
		border: 1px solid gray;
		cursor: pointer;
		text-align: center;
		width: auto;
	}
	
	.itemsarea .sitem {
		width: 47%;
	}
	
	.tooltip {
		display: block;
		position: absolute;
		background: rgba(0,0,0,0.8);
		padding: 10px 0px;
		color: antiquewhite;
		z-index: 1;
		top: -45px;
		left: -25px;
		width: 100px;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0px 0px 30px -10px black;
	}
	
	.tooltip::after{
		content: '';
		position: absolute;
		left: 42%;
		top: 100%;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid rgba(0,0,0,0.8);
		clear: both;
	}
	
	
	.page-company > div {
		min-height: 1923px;
	}
	
	.page-knowhow > div {
		min-height: 980px;
		background-color: #3e3e3e;
	}
	
	.page-knowhow h2 {
		text-align: center;
	}
	
	.page-about-us > div {
		min-height: 980px;
		background-color: #ffffff;
	}
	
	.page-about-us h2 {
		text-align: center;
	}
	
	
	.page-advertise > div {
		min-height: 1280px;
		background-size: cover;
	}
	
	.page-advertise ul li {
		padding: 0px;
		width: 98%;
		margin: 10px 1%;
		display: inline-block;
		background: white;
		height: 250px;
	}
	
	.page-pricetable > div {
		min-height: 1264px;
	}
	
	.page-contact > div {
		min-height: 600px;
		background-size: cover;
	}
	
	.contact-form-area {
		width: 100%;
		margin: 0px auto;
		top: 0px;
		position: relative;
		text-align: center;
	}
	
	ul.areas {
		padding: 16px;
		margin: 0px;
	}
	
	.page-contact .bg-layer-before {
		min-height: 1520px;
	}
	
	.page-footer .logo {
		margin-top: 50px;
	}
	
	.page-footer > div {
		min-height: 200px;
		padding: 0px;
		text-align: center;
	}
	
	.page-contact ul.areas > li {
		position: relative;
		display: inline-block;
		margin: 0px;
		width: 100%;
		padding: 0px;
		float: left;
	}
	
	.page-footer .contact-details {
		float: none;
		margin-top: 20px;
	}
	
	.page-footer .extra-links {
		float: none;
		margin-top: 20px;
		width: auto;
		text-align: center;
	}
	
	.page-footer .social {
		position: relative;
		bottom: 0;
		padding: 20px 0px 0px 0px;
		cursor: pointer;
	}
	
	.page-knowhow h1 {
		text-align: center;
	}
	
	.page-knowhow a.iwannajoin {
		display: block;
		margin: auto;
		margin-top: 50px;
		border-radius: 10px;
	}
	
	.page-about-us h1 {
		text-align: center;
	}
	
	.page-about-us a.iwannajoin {
		display: block;
		margin: auto;
		margin-top: 50px;
		border-radius: 10px;
	}
	
}