*{	
	border-collapse: collapse;
	border-style: none;
	border-width: 0px;
	padding: 0px;
}
html,body{height:100%;}
body{
	margin: 0;
	color: #333;
	font-family: Arial;
	font-size: 13px;
	background: #f9f9f9;
	background: url(imgs/bg.jpg);
}
.caixa {
	background-color:#F0F0F0;
	border: solid 1px #999;
}
a:link,a:visited {
	text-decoration: none;
	color: #333;
}
a:active,a:hover {
	text-decoration: underline;
	color: #333;
}
img {
	border: 0px;
	vertical-align:middle;
}
.logobox{
	position: relative;
	width: 100%;
	text-align: center;
}
.logo{
	position: relative;
	display: block;
	width: 60%;
	margin-left: 20%;
}
.logo img{
	width: 100%;
	height: auto;
}
.tit{
	width: 100%;
	font:80px Arial;
	color: #fff;
	text-align: center;
}
.desc{
	width: 80%;
	font:20px Arial;
	color: #fff;
	text-align: center;
	margin-left: 10%;
	position: relative;
}
.desc:after{
	width: 80%;
	left: 10%;
	position: absolute;
	display: block;
	content: "";
	border-bottom: 1px solid #fff;
}
.bt, .bt:link{
	cursor: pointer;
	display: inline-block;
	padding: 15px;
	font:20px Arial bold;
	color: #fff;
	background: #000;
	text-decoration: none;
	border:1px solid #57e0fb;
}
.bt:hover{
	color: #fff;
	text-decoration: none;
	border-color: #f11960;
	color: #f11960;
}
.list{
    float: left;
    width: 80%;
    margin-left: 10%;
    margin-top: 50px;

}
.list li{
    width: calc(100% - 40px);
    list-style: none;
    border: 1px solid #ffff;
    padding: 20px;
    border-radius: 20px;

}
.list li p{
	font:15px Arial bold;
	color: #fff;
}













@media (max-width: 1250px) {
	.lp1:nth-child(1) .inpstyle, .lp1:nth-child(3) .inpstyle{width: calc(50% - 160px);}
	.lp2:nth-child(4) .inpstyle{width: calc(100% - 390px);}.lp2:nth-child(4){margin-top: 48px;}
	.lp2:nth-child(5) .inpstyle{width: 40px;}
}
@media (max-width: 1100px) {
	.relbox .tit h2, .relgrafic .tit h2, .relbox > p{font-size: 20px;}
	.relgrafic .tit{margin-top: -28px;}
	.divGer .listres > .tit:first-child{margin-top: -28px;}
	.relbox:nth-child(3), .fullwid{height: 105px;}
	.listpedidos{padding-top: 160px;}
	.infoficha .relbox{height: auto;}
	.entregabox span{font-size:13px;}
	.entregabox .red{font-size: 15px;}
	li + .tit.titcolor2{margin-top: 5px;}
	.infopedido{position: relative;top: 0;width: 330px;float: right;}
	.listprodutos{width:calc(100% - 70px);}
	.pedidoinfs{float: right;width: 330px;}
	.infopedido .relbox{float: right;width: 100%;margin-right: 0;}
	.infopedido .clientbox{width: 100%;}
	.relbox > p:nth-child(3n):after{top: 85px;}
	.relbox .tit h2:before, .relgrafic .tit h2:before{border-bottom-width: 2px;}
}
@media (max-width: 1000px) {
	.relbox, .relgrafic{width: calc(100% - 32px);}
	.tabGer td, .tabGer2 tbody td{padding: 3px 0px;}
}
@media (max-width: 800px) {
	.centro{width: calc(100% - 3px);margin:20px 0 30px 1px;}
	.listotalprod .box{width: calc(33% - 1px);height: 100px;}
	.listotalprod .box:nth-child(3n){border-right: 0;}
	.listotalprod .box .l2{font-size:36px;}
	.listotalprod .box .l2{font-size:17px;}	
	.tabtit.tabtitfix{left: 0;width: 100%;}
}
@media (max-width: 700px) {
	.inpGer .inpstyle[name="obsendereco"], .inpGer .inpstyle[name="obspedido"]{width: calc(100% - 120px);}
	.infopedido .relbox{width:calc(100% - 35px);margin-right: 0;}
	.pedidoinfs{width: auto;float: none;}
	.pedidoinfs .labrad:nth-child(1){float: right;margin-right: 0;}
	.trocobox{float: right;margin-right: 10px;}
	.trocodiv{float: left;width: calc(100% - 85px);margin-top: -50px;}
	.inpGer.inpCup .inpstyle{width: calc(100% - 130px);}
	.pedidoinfs .inpGer:nth-child(3){width: calc(100% - 320px);margin-right: 10px;}
	.inpGer .inpstyle.inpentregador{width:calc(100% - 111px);}
	.inphora{margin-right: 10px;}
	.inpGer.inpdata .inpstyle{width: 110px;}
}
@media (max-width: 560px) {
	.listprodutos{width: calc(100% - 20px);padding:0 10px;margin-bottom: 40px;}
	.btmore{right: 8px;bottom: -27px;height: 30px;line-height: 30px;}
	.lp1:nth-child(1) .inpstyle{width: calc(100% - 205px);}
	.lp1:nth-child(3) .inpstyle, .lp2:nth-child(4) .inpstyle{width: calc(50% - 125px);}
	.lp1:nth-child(3){margin-top: 48px;}
	.lp2:nth-child(5) .inpstyle{width: calc(50% - 135px);}
	.lp2:nth-child(5){margin-top: 96px;}
	.pedidoinfs .inpGer:nth-child(3){width: 100%;margin-right: 0;}
	.inphora{width:calc(100% - 190px);}
	.inpGer.inphora .inpstyle{width:calc(100% - 71px);}
	.alertbox .infos{width: 90%;}
	.topper .inpGer{display: none;}
}
@media (max-width: 460px) {
	.listres li{position: relative;}
	.listres .c1{padding-right: 5px;}
	.listres .c2{width:100%;}
	.listres .c3{position: absolute;right: 0;top: 10px;}
	.btli{opacity: 0;}
	.trocodiv{width: 100%;float: none;margin-top: 0;}
	.trocobox{width: calc(100% - 93px);}
	.inpGer .inpstyle.trocoPedido{width:calc(100% - 77px);}
	.listres .tempo{top: 19px;left: 50px;}
	.listres .hora{right: 0; top: 21px; left: auto;}
}
@media (max-width: 400px) {	
	.listprodutos{width: 100%;padding:0;}	
	.listpedidos{padding-top: 170px;}
	.relbox:nth-child(3), .fullwid{height: 110px;}
	.rel4 p{width: 48%;margin:10px 0;}
	.relbox > p:nth-child(3n):after{top:77px;}
	.rel4 p:nth-child(3){border:0;}
	.lp1:nth-child(3) .inpstyle{width: calc(100% - 110px);}
	.lp2:nth-child(4) .inpstyle{width: calc(100% - 140px);}
	.lp2:nth-child(4){margin-top: 96px;}
	.lp2:nth-child(5){margin-top: 144px;}
	.lp2:nth-child(5) .inpstyle{width:calc(100% - 203px);}
	.entregador.rel4 p{width: calc(33% - 3px);}
	.relbox:nth-child(3).entregador, .fullwid{height: 90px;}
	.divGer[data-user="entregador"] .listpedidos{padding-top: 150px;}
	.listprodutos label.inPedido{margin-left: 10px;}
	.inpstyle{padding:0 5px;}
	.inpGer label{margin-right: 5px;}
	.inpGer.inpCup .inpstyle{width: calc(100% - 110px);}
	.inpGer .inpstyle.inpentregador{width:calc(100% - 91px);}
	.inpGer.inpdata .inpstyle{width: 74px;}
	.inphora{width: calc(100% - 134px);}
	.inpGer.inphora .inpstyle{width: calc(100% - 51px);}
	.inpGer .inpstyle[name="obsendereco"], .inpGer .inpstyle[name="obspedido"]{width: calc(100% - 100px);}
	.inpGer .inpstyle[name="idcliente"]{width:calc(100% - 195px);}
	.inpGer .inpstyle[name="nome"], .inpGer .inpstyle[name="telefone"]{width: calc(100% - 85px);}
	.searchlist, .searchend{width: calc(100% - 95px);}
	.inpGer .searchlist ~ .inpstyle[name="nome"], .inpGer .searchend ~ .inpstyle{width: calc(100% - 110px);}
}