*{margin:0;padding:0}
html,body{width:100%;height:100%;}
body{font-family:'Noto Sans', sans-serif; line-height:16px; overflow-y:scroll;}
ul{list-style:none;}
ul li{display:inline;}
ul li a{position:relative;padding:3px 8px;background:#bbb;color:#4d4d4d;text-decoration:none;font-weight:bold;font-size:12px;}
ul li a:hover{color:#000;}
input{outline:none;}
#general{display:block;position:relative;width:1200px;heigth:150px;margin:0 auto;}
#back{display:none;}
#msnm{
	padding:3px;
	text-align:center;
	background:#f4b87c;
	border:1px solid #900;
	color:#900;
}
#okm{
	padding:3px;
	text-align:center;
	background:#87FC8F;
	border:1px solid #090;
	color:#090;
}
#alert p{
	line-height:normal;
}
#empSearch{
	display:block;height:70px;background:#fff;
}
#empSearch .sauda{
	float:right;
	margin-top:7px;
	margin-right:8px;
	font-size:14px;
	color:#000;
}
#logOffCli{
	float:right;clear:right;margin-right:5px;margin-top:4px;
}

#frmSetEmpresa{
	float:right;margin-right:15px;margin-top:6px;color:#000;text-align:left;
}
#empSearch .cad{
	float:left;
	margin-left:50px;
	margin-top:7px;
	font-size:14px;
	color:#000;
}
#empSearch label{
	font-size:15px;
	margin-left:6px;
	margin-top:7px;
	margin-right:19px;
	color:#888;
	font-weight:bold;
}
#empSearch a{
	outline:none;font-size:13px;font-family: 'Noto Sans', sans-serif; 
}
#empSearch .jqTransformSelectWrapper div span{font-size:13px;color:#707070;}
#empSearch .jqTransformSelectWrapper ul li a{font-size:13px;color:#949494;text-wrap:none; font-weight:normal;}
#empSearch .jqTransformSelectWrapper ul li a:hover{background:#e2ebff;}
#empSearch .jqTransformSelectWrapper ul li a.selected{background:#e2ebff;}


.bold{font-weight:bold;}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}	

.separator{display:block;width:850px;height:16px;background:url(../images/separator.jpg) center no-repeat;margin-bottom:50px;clear:both;}

#consultoria{display:block;position:relative;width:850px;margin:0 auto;color:#4e4e4e;line-height:25px;}
#consultoria .container{diaplay:block;width:100%;overflow:hidden;margin-bottom:20px;}
#consultoria .container h2{display:block;margin-bottom:40px;font-weight:bold;font-size:19px;}
#consultoria .container p{display:block;font-size:16px;margin-bottom:40px;}
#consultoria .container .imagem {float:right;}
#consultoria .separator{display:block;width:850px;height:16px;background:url(../images/separator.jpg) center no-repeat;margin-bottom:50px;clear:both;}

#armazenamento1{display:block;position:relative;width:850px;margin:0 auto;color:#4e4e4e;line-height:25px;}
#armazenamento1 .container{diaplay:block;width:100%;overflow:hidden;margin-bottom:20px;}
#armazenamento1 .container h2{display:block;margin-bottom:40px;font-weight:bold;font-size:19px;}
#armazenamento1 .container h2 span{color:#c3c3c3;}
#armazenamento1 .container p{display:block;font-size:16px;margin-bottom:40px;}
#armazenamento1 .container .questns{float:left;width:500px;font-size:16px;margin-bottom:40px;}
#armazenamento1 .container img {float:right;}
#armazenamento2{display:block;position:relative;width:850px;margin:0 auto;color:#4e4e4e;line-height:25px;}
#armazenamento2 .container{diaplay:block;width:100%;overflow:hidden;margin-bottom:20px;}
#armazenamento2 h2{display:block;margin-top:60px;margin-bottom:40px;font-weight:bold;font-size:18px;}
#armazenamento2 .container h3{float:left;font-size:16px;padding-left:30px;background:url(../images/mais.jpg)left no-repeat;margin-right:5px;}
#armazenamento2 .container p{width:655px;}
#armazenamento2 .container img{float:right;}
#armazenamento2 .container .contato{float:right;text-align:right;width:537px;font-weight:bold;font-site:19px;margin-right:70px;margin-top:45px;}
#armazenamento2 .separator{display:block;width:850px;height:16px;background:url(../images/separator.jpg) center no-repeat;margin-top:70px;clear:both;}


#servicos{display:block;position:relative;width:850px;margin:0 auto;color:#4e4e4e;}
#servicos .container{diaplay:block;width:100%;overflow:hidden;margin-bottom:20px;}
#servicos .separator{display:block;width:850px;height:16px;background:url(../images/separator.jpg) center no-repeat;margin-bottom:50px;clear:both;}

#servicos .container h2{display:block;margin-bottom:40px;font-weight:bold;font-size:19px;}
#servicos .container h2 span{color:#c3c3c3;}
#servicos .container .ttl{display:block;width:100%;margin-bottom:40px;font-weight:normal;text-align:left;}

#servicos .container .itemL{float:left;margin-bottom:40px;font-weight:bold;font-size:17px;}
#servicos .container .paragrafoL{float:left;font-size:16px;margin-bottom:40px;line-height:25px;width:660px;clear:left;text-align:left;}
#servicos .container .imagemR{float:right;}

#servicos .container .itemR{float:right;margin-bottom:40px;font-weight:bold;font-size:17px;text-align:right;}
#servicos .container .paragrafoR{float:right;font-size:16px;margin-bottom:40px;line-height:25px;width:660px;clear:right;text-align:right;}
#servicos .container .paragrafoR a{font-weight:bold;color:#3f8cff;text-decoration:none;}
#servicos .container .imagemL{float:left;}

#servicos h4{display:block;text-align:center;margin-bottom:30px;}
#servicos p{text-align:center;}
.twoPrg{margin-top:75px;}
.search{margin-top:45px;}

#frm{display:block;width:850px; margin:0 auto;background:#FFF;}	
#frm label{font-size:14px;font-weight:bold;color:#777;}	

.frmTtl{display:block;color:#4e4e4e;margin:0 auto;}
.frmTtl .txt{text-align:left;padding-top:15px;font-size:15px;}
.frmTtl .txt h3{margin-bottom:35px;font-size:17px;}

#menu{
	position:fixed;display:block;width:100%;height:60px;background:#fff;border-bottom:2px solid #CDCDCD;z-index:4;
}
#menu .link, .separ{float:right;font-size:13px;color:#4e4e4e;}
#menu .link{text-decoration:none;}
#menu .separ{margin-right:5px;margin-left:5px;color:#aaa;}

#top{display:block;position:relative;width:850px;heigth:100px;margin:0 auto;}

.colLeftTxt{float:left;width:50%;color:#4e4e4e;clear:both;}
.colLeftTxt .txt{float:right;text-align:left;width:415px;padding-top:30px;font-size:15px;}
.colLeftTxt .txt2{float:right;text-align:right;width:385px;padding-top:30px;padding-right:30px;font-size:16px;color:#fff;}
.colLeftTxt .txt h3{margin-bottom:35px;font-size:17px;}
.colLeftTxt .txt2 h3{margin-bottom:35px;font-size:18px;color:#fff;}
.colLeftTxt .txt p{line-height:25px;}
.colLeftTxt .txt2 p{line-height:25px;}

.colRightImg{float:right;width:50%;padding-top:70px;}
.colRightImg .bgImg{display:block;width:100%;height:128px;background:#bdccdb;text-align:left;}
.colRightImg .bgImg2{display:block;width:100%;text-align:left;margin-top:-60px;}

.colRightTxt{float:right;width:50%;color:#4e4e4e;}
.colRightTxt .txt{float:left;text-align:right;width:365px;padding-top:65px;padding-left:50px;font-size:15px;}
.colRightTxt .txt2{float:left;text-align:left;width:300px;padding-top:40px;padding-left:30px;font-size:16px;color:#fff;}
.colRightTxt .txt2 h3{margin-bottom:35px;font-size:18px;color:#fff;}
.colRightTxt .txt p{line-height:25px;}
.colRightTxt .txt2 p{line-height:25px;}

.colLeftImg{float:left;width:50%;padding-top:70px;}
.colLeftImg .bgImg{display:block;width:100%;height:128px;background:#bdccdb;text-align:right;}
.colLeftImg .bgImg2{display:block;width:100%;text-align:right;margin-top:-70px;}

.correction{padding-right:20px;}

#modal{
	position:fixed;width:100%;height:100%;background:#FFF;opacity:0.7;float:none;top:0;left:0;z-index:3;
	display:none;
}
#cxLgn{position:absolute;width:500px;left:50%;margin-left:-250px;z-index:5
		display:none;
}
/*#cxLgn{position:relative;width:500px;margin:50px auto 0;}*/
#cxLgn label{width:130px;font-weight:bold;text-align:right;color:#666;}
#cxLgn .ttlLgn{display:block;height:35px;background:#2391d0;color:#fff;font-weight:bold;font-size:20px;line-height:22px;padding-top:10px;text-align:center;}
#cxLgn #cliente{display:block;width:500px;background:#f5f5f5;display:none;}
#cxLgn #cliente table{clear:left;}
#cxLgn #administrador{display:block;width:500px;background:#f5f5f5;display:none;}
#cxLgn #administrador table{clear:left;}
.warn{
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    margin-top: 3px;
    padding: 10px;
    text-align: center;
}
.warn ul{
    display: block;
    width: 190px;
    margin: 0 auto;
    list-style-position: inside;
    list-style-type: disc;
}
.warn ul li{
	display: list-item;
	text-align:left;
}
.ok{color: #3c660d;background-color: #eeffd8;}
.no{color:#bf0000;background-color:#FFDBDB;}
.msn{position:absolute;font-weight:bold;color:#1D4904;top:128px;left:10px;font-size:14px;}

#btnAction{
	position:absolute;top:10px;right:7px;cursor:pointer;font-size:12px;background:#2491d0;padding:3px 5px;color:#fff;border-radius:2px;z-index:5;
}
/*#btnAction{float:right;width:21px;height:21px;margin-top:20px;margin-right:5px;cursor:pointer;background:url(../images/admin.gif) top no-repeat;}*/

#close{
	position:absolute;
	width:14px;
	height:10px;
	top:17px;
	right:108px;
	cursor:pointer;
	background:url(../images/close.gif) no-repeat;
	z-index:5;
	display:none;
}

::selection {
	background:#eaeaea;
	color:#777;
}
::-moz-selection {background:#eaeaea; color:#777; }

#ttlCad{
	display:block;
	position:relative;
	clear:left;
	height:22px;
	font-weight:bold;
	text-align:center;
	padding-top:6px;
	background-color:#CEE6F4;
	border-bottom-color:#2491D0;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-top-color:#2491D0;
	border-top-style:solid;
	border-top-width:2px;
	color:#777777;
	font-size:13px;
}
#cxCad{display:block;background:#fff;overflow:hidden;}
#cxCad label{width:125px;font-size:14px;font-weight:bold;text-align:right;margin-right:3px;margin-top:6px;color:#888;}
#cxCad2{display:block;background:#fff;overflow:hidden;}
#cxCad2 label{width:150px;font-size:14px;font-weight:bold;text-align:right;margin-right:3px;margin-top:6px;color:#888;}
#cxLista{
	display:block;
	position:relative;
	clear:left;
	background:#008dce;
	color:#777;
	font-size: 13px;
    font-weight: bold;
    height: 22px;
    padding-top: 6px;
	text-align:center;
	background-color:#CEE6F4;
	border-bottom-color:#2491D0;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-top-color:#2491D0;
	border-top-style:solid;
	border-top-width:2px;
}

#tblCadCli tr th{
	border-right-color:#FAFAFA;
	border-right-style:solid;
	border-right-width:1px;
}

#ttlSess{
	display:block;
	position:relative;
	clear:left;
	height:35px;
	color:#2491d0;
	line-height:22px;
	text-align:left;
	padding-left:15px;
	padding-top:10px;
	border-bottom:2px solid #2491d0;
	/*background:#2491d0;*/
}
#ttlSess a{
	float:left;
	padding:0 20px;
	height:35px;
	color:#2491d0;
	font-weight:bold;
	font-size:16px;
	text-decoration:none;
	margin-top:-10px;
	padding-top:10px;
	margin-right:3px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-left:2px solid #2491d0;
	border-right:2px solid #2491d0;
	border-top:2px solid #2491d0;
	z-index:3;
}
#ttlSess .fields{float:left;padding:2px 0 0;margin-right:3px;}
#ttlSess .fields label{float:left;color:#fff;font-size:15px;margin-top:3px;font-weight:bold;}
#ttlSess .info:hover{background:#FFFFFF;color:#144691;}

#frmPeriodo{
	float:right;
	width:533px;
	height: 40px;
    margin-top: -10px;
    padding: 6px 0 0 10px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	background:#2491d0;
}
#opcoes{
	display:none;position:absolute;top:35px;left:22px;background:#fff;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #2491d0;
}
#mnOptNotas{display:block;position:relative;height:50px;clear:left;}
#mnOptAnlse{display:block;position:relative;clear:left;height:53px;border-bottom: 2px solid #2491d0;}
#mnOptCad{display:block;background:#fff;}
	#mnOptCad #cxCad .ttlSction,
	#mnOptCad #cxCad2 .ttlSction{
		display:block;
		clear:both;
		height:22px;
		background-color:#cee6f4;
		color:#777;
		font-weight:bold;
		font-size:13px;
		text-align:center;
		padding-top:8px;
		border-top:2px solid #2491d0;
		border-bottom: 1px solid #2491d0;
	}
	#mnOptCad .cadMenu{display:block;height:53px;font-size:11px;}
	#mnOptCad .cadMenu a{
		float:left;
		border: 1px solid #999;
		border-radius: 3px;
		height: 30px;
		margin-top:10px;
		margin-right:5px;
		text-decoration:none;
	}
	#mnOptCad .cadMenu a:hover{background:#f5f5f5;}
	#mnOptCad .cadMenu a img,
	#mnOptCad .cadMenu a img{float:left;margin:0 5px;}
	#mnOptCad .cadMenu a span,
	#mnOptCad .cadMenu a span{float:left;margin-top:7px;color:#999;padding-right:10px;font-weight:bold;}

#painel{display:block;width:100%;min-height:520px;text-align:left;}
#painel span{
	display:block;
	height:24px;
	font-size:16px;
	color:#777;
	margin-left:20px;
	margin-top:10px;
	margin-right:20px;
	padding-top:9px;
	border-bottom:2px solid #d9e8ff;
}
#painel span div{float:right;}
#loading{position:absolute;z-index:1;left:50%;margin-left:-59px;top:300px;opacity:0;}
#loading2{margin-left: 465px;margin-top: 120px;position: absolute; width: 734px; z-index: 2;opacity:0;}

#bxLeft{float:left;width:465px;padding-bottom:10px;color:#4d4d4d;background:#fdfdfd;}
#bxRight{
	float:left;width:733px;min-height:500px;color:#fff;border-left:2px solid #2491d0;}
#bxRight table th{height:25px;font-size:14px;color:#777777;background:#cee6f4;vertical-align:middle;}
#bxRight table td{color:#777777;font-size:12px;}
#bxRight .tipo{cursor:pointer;}
#bxRight .tipo:hover{background:#bbd4f3;}

.btnMenu{
	float:left;
	position:relative;
	width:auto;
	height:20px;
	padding-top:5px;
	padding-left:15px;
	margin-right:3px;
	margin-top:7px;
	font-size:14px;
	font-weight:bold;
	color:#999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #999;
	text-decoration:none;
}
.btnMenu:hover{background-color:#f5f5f5;}
.btnMenu img{float:left;margin-top:-8px;margin-right:15px;}

.anlse{
	float:left;
	width:465px;
	font-size:15px;
	text-transform:uppercase;
	text-align:left;
	margin-top: 5px;
}
.anlse span{
	float:left;margin-left:10px;margin-top:15px;font-weight:bold;color:#888;
}
.anlse img{
	float:left;margin-left:15px;margin-top: 5px;
}
.estq{float:left;width:719px;text-align:left;border-right:none;color:#777;}
.estq img{float:left;margin-top:8px;}
.compras {float:left;height:50px;margin-top:8px;margin-bottom:8px;border-top: 2px solid #2491d0;border-bottom: 2px solid #2491d0;}

.borderRow{border-bottom:1px solid #CCC;}
.btn{display:block;width:80px;padding:2px 5px;background:#999999;color:#fff;text-decoration:none;font-weight:bold;border-radius:2px;}
.btn:hover{background:#666;color:#fff;}
.btn:visited{background:#cecece;}

#cad{float:left;width:121px;height:25px;font-size:15px;padding-top:8px;background:url(../images/bgBtn.png) no-repeat;color:#666666;text-decoration:none;}
#cad:hover{text-decoration:underline;}
#mnt{float:left;width:121px;height:25px;font-size:15px;padding-top:8px;margin-left:10px;background:url(../images/bgBtn.png) no-repeat;color:#666666;text-decoration:none;}
#mnt:hover{text-decoration:underline;}
.imgSbMn{padding-right:30px;background-image:url(../cliente/imgs/sbmn.png);background-repeat:no-repeat;background-position:right;}
.subMenu{
	position:absolute;
	text-align:left;
	top:34px;
	z-index:3;
}
.subMenu a{
	float:left;
	color:#999;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	padding:0 8px 0 0;
}
.subMenu a:hover{
	text-decoration:underline;
}
.nfce{left:164px;}
.cte{left:258px;}
#opcoes label{
    display: block;
    float: none;
	font-size:14px;
	margin-top:6px;
}
#listagem{margin-top:3px;margin-bottom:30px;border-top:2px solid #2491d0;}
#listagem tr th,
#tblCadCli tr th{
	border-right:1px solid #fafafa;border-top:1px solid #e0e0e0;
}
#listagem tr th span,
#tblCadCli tr th span{
	margin-left:5px;margin-right:5px;font-weight: normal;
}
#listagem tr td,
#tblCadCli tr td{
	border-right:1px solid #e5e5e5;
}
#listagem tr td span,
#tblCadCli tr td span{
	margin-left:5px;margin-right:5px;
}
#listagem tr th ul li a,
#tblCadCli tr th ul li a{
	background:none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #09F;
	font-size:12px;
	color:#888;
	font-family: 'Noto Sans', sans-serif;
	font-weight:bold;
}
#listagem tr th ul li a:hover,
#listagem tr th ul li a.ativo,
#tblCadCli tr th ul li a:hover,
#tblCadCli tr th ul li a.ativo{background:#09F;color:#fff;}
#listagem .dnwld{
	font-weight:bold;
	font-size:13px;
	color:#fff;
	text-decoration:none;
	padding:5px 5px 5px 28px;
	background:#2491d0 url(../cliente/imgs/download-alt-4.png) 0 5px no-repeat;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #09F;
}
#listagem .dnwld:hover{
	background:#fff url(../cliente/imgs/download-alt-4.png) 0 -11px no-repeat;
	color:#2491d0;
}
#visualizar{
	position:absolute;
	min-width:500px;
	background:#FFF;
	margin-bottom:30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #06C;
	padding:3px;
	z-index:10;
	top:99px;
}
#visualizar .headerTable,
#listagem .headerTable,
#tblCadCli .headerTable{
	height:35px;background:#eaeaea;color:#888888;font-size:14px;
}
#visualizar .itensTable,
#listagem .itensTable,
#tblCadCli .itensTable{
	color:#666; height:35px; font-size:13px; font-weight:normal;
}
#listagem .noItem,
#tblCadCli .noItem{
	height:100px;color:#d17e12;font-size:16px;
}
#listagem .bottomTable,
#tblCadCli .bottomTable{
	color:#777777;height:35px;font-size:14px;border-top:1px solid #e5e5e5;
}
#listagem .bottomTable span b,
#tblCadCli .bottomTable span b{font-size:17px;}

#mnOptItens{
	position:absolute;overflow:hidden;background:#e2ebff;padding:15px 30px 20px;;z-index:1;left:50%;margin-left:-150px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-left:1px solid #09F;
	border-right:1px solid #09F;
	border-bottom:1px solid #09F;
}
#mnOptItens a{
	color:#fff;padding:5px;font-size:13px;font-weight:bold;text-decoration:none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #09F;
}
#mnOptItens .xml{
	background:#2491d0 url(../cliente/imgs/download-alt-4.png) 0 5px no-repeat;
	margin-right:10px;
	padding-left:28px;
}
#mnOptItens .xml:hover{
	background:#fff url(../cliente/imgs/download-alt-4.png) 0 -11px no-repeat;
	color:#2491d0;
}
#mnOptItens .danfe{
	background:#2491d0 url(../cliente/imgs/view.png) 0 5px no-repeat;
	padding-left:26px;
}
#mnOptItens .danfe:hover{
	background:#fff url(../cliente/imgs/view.png) 0 -11px no-repeat;
	color:#2491d0;
}
#mnOptItens .alterar{
	background:#2491d0 url(../admin/imgs/alterar.png) 0 5px no-repeat;
	margin-right:10px;
	padding-left:28px;
}
#mnOptItens .alterar:hover{
	background:#fff url(../admin/imgs/alterar.png) 0 -11px no-repeat;
	color:#2491d0;
}
#mnOptItens .excluir{
	background:#2491d0 url(../admin/imgs/excluir.png) 0 5px no-repeat;
	padding-left:26px;
}
#mnOptItens .excluir:hover{
	background:#fff url(../admin/imgs/excluir.png) 0 -11px no-repeat;
	color:#2491d0;
}
#mnOptItens .visualizar{
	background:#2491d0 url(../cliente/imgs/view.png) 0 5px no-repeat;
	margin-right:10px;
	padding-left:28px;
}
#mnOptItens .visualizar:hover{
	background:#fff url(../cliente/imgs/view.png) 0 -11px no-repeat;
	color:#2491d0;
}
/* Easy Slider */

		
	/* numeric controls */	

	ol#controls{
		display:block;
		width:850px;
		margin:1em auto;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		display:inline;
		margin:0 10px 0 0; 
		padding:0;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:25px;
		border:1px solid #ccc;
		color:#4e4e4e;
		padding:0 10px;
		margin-left:10px;
		text-decoration:none;
		font-size:15px;
		}
	ol#controls li.current a{
		background:#2491D0;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */

.loader {
  width: 100px;
  height: 20px;
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.loader > div {
  content: " ";
  width: 15px;
  height: 15px;
  background: #2196F3;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: shift 2s linear infinite;
          animation: shift 2s linear infinite;
}
.loader > div:nth-of-type(1) {
  -webkit-animation-delay: -.4s;
          animation-delay: -.4s;
}
.loader > div:nth-of-type(2) {
  -webkit-animation-delay: -.8s;
          animation-delay: -.8s;
}
.loader > div:nth-of-type(3) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.loader > div:nth-of-type(4) {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}

@-webkit-keyframes shift {
  0% {
    left: -60px;
    opacity: 0;
    background-color: #ccc;
  }
  10% {
    left: 0;
    opacity: 1;
  }
  90% {
    left: 100px;
    opacity: 1;
  }
  100% {
    left: 160px;
    background-color: #666;
    opacity: 0;
  }
}

@keyframes shift {
  0% {
    left: -60px;
    opacity: 0;
    background-color: #ccc;
  }
  10% {
    left: 0;
    opacity: 1;
  }
  90% {
    left: 100px;
    opacity: 1;
  }
  100% {
    left: 160px;
    background-color: #666;
    opacity: 0;
  }
}