@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700);
@import 'fonts.css';
*{margin:0; padding:0;}
html{height:100%;
font-smooth:always;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}


.xblk{background:url(../img/close.cross.png) #000 no-repeat 50% 50%; background-size:200%}
.xwht{background:url(../img/close.cross.blk.png) #000 no-repeat 50% 50%;}
body {font-family: 'Antipasto', serif; color:#444; font-size:16px ;background-color:#333;padding:0; font-weight:300; letter-spacing:0em}
img{border:0; }
a{text-decoration:none;}
strong{font-weight:500}
p{ font-size:14px; font-weight:500; line-height:16px;}
 li{font-size:16px; font-weight:500;}

/*teatro*/

#tea{position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background-color:rgba(0,0,0,0.85); display:none}
#tea #teacnt{margin:50px auto; width:500px; }
#teaclose{width:30px; height:30px; border-radius:30px; border:2px solid #fff; position:absolute; cursor:pointer}
#teaclose:hover{background-color:#b00;}
#tea #teacnt img{max-width:1000px; max-height:500px; border:1px solid #ddd}


/* animaciones por opacidad;*/
.noview{display:none !important}
.nofloat{clear:both}

.a05{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.a02{-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}

/*contenidos*/
#allcontents{position:absolute; top:0; left:0; right:0; z-index:1000;;}





#page{background:rgba(255,255,255,1); width:992px; margin: 0 auto;}

/*Header*/
#header{text-align:center; width:100%;  background:transparent; background:rgba(255,255,255,1);}
#header .cnt{ width:80%; margin:0 auto; min-width:1000px; padding:10px 20px; height:20px; text-align:center;}
#header a{color:#fff;opacity:1;-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
#header a span{color:#fff;opacity:1;-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
#header a:hover{opacity:1}
#header a:hover span{opacity:1}

#language{padding-top:3px; text-align:right;}
#language a{font-size:12px; margin:0 5px; color:#666; letter-spacing:2px; vertical-align:1px; margin:0 10px}

#mainmenu{background:rgba(0,0,0,1); height:66px}
#logo{width:460px;float:left; margin:20px 0px 0px 20px}
#logo h1{font-size:22px; line-height:19px; font-weight:300; text-transform:uppercase; width:100%;letter-spacing:2px;text-align:left; color:#FFF !important}
#logo h1 span{font-size:16px; font-weight:300;width:100%;letter-spacing:2px;text-align:left; color:#BBB; display:block}


#page.en .menutop{width:340px;margin-top:35px;float:right;}
.menutop{width:492px;margin-top:35px;float:right;}
.menutop ul{padding:0; width:100%; margin: 0 auto;}
.menutop a {color:#fff; text-decoration:none; font-size:13px; font-weight:400 !important; text-transform:uppercase; letter-spacing:2px}
.menutop ul li{list-style:none; float:left; margin-left:32px; text-align:center;}
.menutop > ul >li a:hover{color: #000;border-bottom: 1px solid #fff;}
.menutop > ul >li:hover ul{display:block}
.menutop ul ul{position:absolute;z-index:999;display:none; background:rgba(255,255,255,0.95); margin:0;padding:0; padding-top:10px;}
.menutop ul ul li{list-style:none;clear:both; margin:0; padding:0;}
.menutop ul ul a{display:block; text-align:left !important; max-width:300px; line-height:2em;}


.mactiv{opacity:0.35 !important}

#banner{opacity:1; height:456px; padding:0; overflow:hidden;}

#banner img{width:100% !important}

#content{

	width:100%;
	background:#fff;
	min-height:500px
	
}


#footer{ width:100%; background: #000; text-align:center; padding:10px 0}
#footer .crea3{width:24px; height:24px; background:url(../img/logo.crea.png) no-repeat;cursor:pointer; margin:10px auto;}
#footer .crea3 a{display:block; width:100%; height:100%;}

#footer a.crdomain{color:#ddd !important; letter-spacing:2px; background:#222; width:100%; text-align:center; display:block; padding:5px 0; margin-top:8px}

#footer a.crdomain:hover{background:#444}
.menubottom{font-weight:600;margin:0 auto;border-bottom: 1px solid #fff; width:200px; padding:20px 0 5px 0}

.menubottom ul{padding:0; clear:both}
.menubottom a {color:#ddd !important; text-decoration:none; font-size:14px; font-weight:400 !important;text-transform:uppercase; }
.menubottom ul li{list-style:none; float:left; text-align:center; width:100%;letter-spacing:2px}
.menubottom a:hover{color:#FDD !important;}

#social-icons{display:block; margin:15px 0}
#social-icons:last-child{}
#social-icons a{margin-right:10px;display:inline-block; width:20px; height:20px; border-radius:2px; background-image:url(../img/social-icons-20.png);-webkit-filter: brightness(10) drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); opacity:0.9}
#social-icons a:hover{opacity:1}
#social-icons a:last-child{margin-right:0px !important;}
#social-icons a.icon-bl{background-position:0px 0px;}
#social-icons a.icon-fb{background-position:-20px 0px;}
#social-icons a.icon-gp{background-position:-40px 0px;}
#social-icons a.icon-ln{background-position:-660px 0px;}
#social-icons a.icon-yt{background-position:-80px 0px;}
#social-icons a.icon-tw{background-position:-100px 0px;}
#social-icons a.icon-in{background-position:0px -40px;}
#social-icons a.icon-pt{background-position:-20px -40px;}


.inc{opacity:1;width:90%; margin:20px auto}
.inc h2{font-size:30px; letter-spacing:2px; color:#222; border-bottom:1px solid #BBB; width:200px; margin:0 auto; text-align:center; font-weight:200; text-transform:uppercase}
.inc h3{font-size:14px; letter-spacing:4px; color:#BBB; width:200px; margin:0 auto; text-align:center;font-weight:200; margin-bottom:40px;text-transform:uppercase}
.inc h4{font-size:12px; letter-spacing:2px; color:#222;}


.inc .twocols{display:table-row; text-align:justify;}
.inc .twocols > div{display:table-cell; width:46%; padding:2%; vertical-align:top}
.inc .twocols img{width:100%;}


/*especial para vinos*/

#vinolist > div{ float:left; width:31%; margin:1%;; min-height:320px; box-sizing:border-box; text-align:center}
#vinolist > div img{width:200px;}
#vinolist  h4{font-size:16px; line-height:16px; font-weight:200; color:#444; letter-spacing:2px; text-transform:uppercase; border-bottom:1px solid #bbb; width:80%; margin:10px auto 0 auto; padding-bottom:5px}
#vinolist a{font-size:12px; line-height:12px;font-weight:200; margin-bottom:20px; color:#BBB; letter-spacing:6px;}


#vinolist > div:last-child p{color:#222; width:50%; padding:4% 12%; background:#ccc; border:1px solid #ccc; margin:108px auto 0 auto; text-align:justify; letter-spacing:1px; font-size:12px}
#vinolist > div:last-child p:hover{background:#eee;border:1px solid #ccc;}
#vinolist > div:last-child a{display:block; width:100%; text-align:center; margin:10px 0 0 0}
#vinolist > div:last-child img{width:27px}





/*por apartados*/

/*Inicio*/

#home{position:absolute; left:0;; width:100vw; height:100vh; z-index:999; top:0; left:0;background:#000 url(../img/contents/tiger.jpg) 50% 50%; background-size:cover; padding: 5vh 5vw; display:none}
 .leobach{width:80vw; height:80vh; background:url(../img/contents/snake.jpg) 50% 50%; background-size:cover; padding: 5vh 5vw; display:none}
 .zebbach{width:70vw; height:70vh; background:url(../img/contents/zebra.jpg) 50% 50%; background-size:cover; padding: 5vh 5vw; display:none}
 .snabach{width:60vw; height:60vh; background:url(../img/contents/leopard.jpg) 50% 50%; background-size:cover;  padding: 5vh 5vw; display:none}
 .blabach{width:50vw; height:50vh; background:#000;  padding: 5vh 5vw; display:none; background:#000 url(../img/contents/homevallarcal.jpg) 50% 50% no-repeat ;background-size:80% auto}
 .vm{ width:50vw; height:50vh; display:table-cell; vertical-align:middle; background:rgba(0,0,0,0.4); opacity:0;: display:none}
 .blabach a{display:block; width:125px;  color:#BBB; border-radius:3px; padding:5px 0; text-align:center; margin:0 auto; letter-spacing:2px}
 .blabach a:hover{color:#DDD}
.home{overflow:hidden;}

 .home h2{color:#fff; font-weight:100; width:340px; margin:0 auto; text-align:center; letter-spacing:2px}
  .home h3{color:#fff; font-weight:100; font-size: 70px; margin:0 auto; text-align:center; letter-spacing:4px}
    .home h4{color:#fff; font-weight:100; font-size: 18px; margin:0 auto; text-align:center; letter-spacing:3px}
	 .home h5{color:#AAA; font-weight:100; font-size: 14px; margin:0 auto; text-align:center; letter-spacing:3px}
	  .home .vm{color:#AAA; font-weight:100; font-size: 12px; margin:0 auto; text-align:center; letter-spacing:3px}
.home #header{display:none}
.home #content{background:#233}
.home #footer{display:none}


/*bodega*/
.bodega .inc {width:75%;}
.bodega .inc p{margin-bottom:18px; color:#888; font-weight:100}


/*contacto*/
.contacto .inc {width:75%;}
.contacto .inc .twocols div{vertical-align: bottom}
.contacto .inc h4{font-size:18px; text-align:left !important; margin:0; width:100%; letter-spacing:1px; font-weight:600}


/*ficha de vino*/

.winesheet .inc{width:80%; margin:0; background-size:cover; padding:10%; margin:0 auto }
.winesheet .twocols{background:#fff;}
.winesheet .twocols>div{padding:5%; vertical-align:middle}
.winesheet h2{font-size:16px; text-align:left !important; margin:0; width:80%; letter-spacing:1px; font-weight:600; border:none; margin-bottom:20px}
.winesheet h3{font-size:30px; text-align:center !important; margin:0; width:100%; letter-spacing:4px; font-weight:200; border:none; color:#222; margin:0;}
.winesheet h3 strong{font-size:20px; text-align:center !important; width:100%; letter-spacing:12px; font-weight:200; border:none; color:#BBB;}
.winesheet p{margin-bottom:25px; letter-spacing:1px; font-size:16px !important}
.winesheet p em{color:#BBB; font-style:normal}

.leopard .twocols>div :last-child img{height:300px; width:auto; float:left; margin-right:20px;}
.tiger .twocols>div:last-child img{height:300px; width:auto; float:left; margin:80px 20px 20px 0;}
.zebra .twocols>div:last-child img{height:300px; width:auto; float:right; margin-left:20px}
.snake .twocols>div:last-child img{width:320px; height:auto; margin:0px !important; padding:0px}
.roble .twocols>div:last-child img{width:300px; height:auto; margin:0px 0 20px 0 !important; padding:0px}




.uso .inc h3{text-align:left; color:#222; padding:25px 0 0px 0 ; font-size:25px; width:100%; margin:0px}
.uso .inc h4{text-align:left; color:#333;  font-size:18px; width:100%; margin:10px 0; border-bottom:1px dotted #d1d1d1}

.uso .inc p , .uso .inc li{text-align:justify; color:#333;  font-size:15px;letter-spacing:1px }
.uso .inc li{margin:0 50px}
.uso .inc  p {margin:25px 0}

.pagos .inc h2{width:250px !important; margin-bottom:80px}
.pagos .inc p , .pagos .inc li{text-align:justify; color:#333;  font-size:16px;letter-spacing:1px }
.pagos .inc  p {margin:25px 0}
.pagos .inc li{margin:0 50px}
.pagos .mipedido{display:none}

.pagos #banner{display:none}

/*Tienda Online*/

.ecomm .inc {}
.ecomm.lists .backtobuy{display:none}

/*Teatro tienda online*/


#teaecomm{position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; background-color:rgba(255,255,255,0.85); display:none}
#teaecomm #teaecommcnt{margin:50px auto; width:90%; min-height:300px; background:#fff; box-shadow:0px 0px 20px rgba(0,0,0,0.5)}
#teaecommclose{width:30px; height:30px; float:right; margin:-20px -20px; border-radius:30px; cursor:pointer}
#teaecommclose:hover{background-color:#b00;}
#teaecomm #ecmcnt{ padding:20px}

#ecmcnt .image{float:left;  width:50%; text-align:center;}
#ecmcnt .image img{width: 100%; max-width:500px}
#ecmcnt .texto{float:right; width:45%; letter-spacing:1px}
#ecmcnt .texto h2{margin-bottom:25px; text-align:right;font-weight:300;}
#ecmcnt .texto p{margin:10px 0; text-align:justify;font-weight:300;}
#ecmcnt .texto em{color:#AAA; font-style:normal !important}
#ecmcnt .texto p ul{margin:20px 0;}
#ecmcnt .texto li{margin-left:25px}
#ecmcnt .texto .data{margin:0px 5px 5px 0px; border:1px solid #e1e1e1; padding:20px; background-color:#f4f4f4 }
#ecmcnt .texto .data strong{font-weight:300; font-size:30px; vertical-align:-5px; margin-left:10px; font-family: "arial", sans-serif}
#ecmcnt .texto .data a{width:100%; display:block; background:#000; color:#fff !important; padding:5px; text-align:center; letter-spacing:1px}
#ecmcnt .texto .data a:hover{background:#800}


.fichaecomm{}
.fichaecomm .image{float:left;  width:50%; text-align:center;}
.fichaecomm .image img{width: 100%; max-width:500px}
.fichaecomm .texto{float:right; width:45%; letter-spacing:1px}
.fichaecomm .texto h2{margin-bottom:15px; text-align:left;font-weight:300; width:100%;}
.fichaecomm .texto h3{text-align:left;font-weight:300; width:100%; color:#222; font-size:20px}
.fichaecomm .texto p{margin:10px 0; text-align:justify;font-weight:300;}
.fichaecomm .texto em{color:#AAA; font-style:normal !important}
.fichaecomm .texto p ul{margin:20px 0;}
.fichaecomm .texto li{margin-left:25px}
.fichaecomm .texto .data{margin:0px 5px 5px 0px; border:1px solid #e1e1e1; padding:20px; background-color:#f4f4f4 }
.fichaecomm .texto .data strong{font-weight:100 !important; font-size:30px; vertical-align:-5px; margin-left:10px;font-family: "arial", sans-serif}
.fichaecomm .texto .data a{width:100%; display:block; background:#000; color:#fff !important; padding:5px; text-align:center; letter-spacing:1px}
.fichaecomm .texto .data a:hover{background:#800}
.fichaecomm .added{position:absolute; border:1px solid #e00; color:#fff; background:#d00; padding:5px 10px; opacity:0; letter-spacing:3px; width:342px; font-weight:800; margin-top:-30px; text-align:center;color:#F00}



.blackbox{ background:#ddd; margin:0 0 30px 0; display:table-row; width:992px !important; position:absolute; margin-left:-49px; margin-top:70px}
.blackbox>div{color:#222; font-size:14px; text-align:left; width:250px; display:table-cell;}
.blackbox>div>div{padding:10px 0px 10px 60px;}
.blackbox>div>div strong{font-size:14px; color:#222}

p.ecommalert{text-align:center !important; margin:50px 0; width:100%; font-size:20px !important; color:#AAA !important}




.menuecomm{;margin-top:0px; position:absolute; width:900px;}
.menuecomm a {color:#000; text-decoration:none; font-size:16px; font-weight:400 !important; float:right; margin-left:10px; background:#ddd; display:block; height:30px; width:130px; text-align:center; line-height:30px; letter-spacing:1px}
.menuecomm a span{opacity:0}
.menuecomm a.active span{opacity:1}
.menuecomm a:hover{color:#fff; background:#222}


#prcol{width:100%;}
#prcol .centersells{margin: 0 auto; width:1000px}
#alcol{width:100%; padding:10px;display:none;}

.noselect{font-size:18px; text-align:center; margin-top:30px; color:#000; font-weight:400}
.noselect>div{font-size:16px; text-align:center; margin-top:30px; color:#800; font-weight:400}

.noportes{font-size:14px; text-align:center; margin:20px 0; color:#d00; font-weight:400; background:#eee; padding:10px 0; width:100% !important;}
.noportes span{font-size:16px}


.pro{ margin:60px 0 0 10px;; clear:both}
.pro h3{margin:10px 0; font-weight:300; font-size:18px; font-family:"Cinzel", serif}


.articles{width:100%; margin:30px auto !important}
.articles li{list-style:none;margin:0; width:47%; float: left;}
.articles li .units{font-size:40px; color:#ddd; font-weight:100; text-align:center; margin-top:30px;}
.articles .ecommprod{ background:#fff;  padding:5px; text-align:center; height:460px}
.articles .ecommprod img{width:90%;}
.articles .ecommprod .ecommimg{text-align:center; width:100%;}
.articles .ecommprod .ecommdata{width:100%;border:1px solid rgba(0,0,0,0);}


.articles .ecommprod .ecommdata .titleprod{font-size:20px; color:#000;  text-transform:uppercase; font-weight:400; margin:-35px auto 0 auto; letter-spacing:1px}
.articles .ecommprod .ecommdata .packprod{font-size:15px; color:#000; margin:8px auto;  border-top:1px solid #BBB; width:200px; padding-top:10px}
.articles .ecommprod .ecommdata .textoprod p{line-height:18px; font-size:14px; letter-spacing:1px}
.articles .ecommprod .ecommdata .actionlist{text-align:center; display:table-row block; width:80%; margin:0 auto;}
.articles .ecommprod .ecommdata .priceprod{ font-weight:800; font-family:"Arial",  sans-serif !important; color:#000; text-align:right;padding-right:10px; font-size:16px; border-right:2px solid #000; display:table-cell; width:40%}
.articles .ecommprod .addecomm{border-right:2px solid #000;cursor:pointer; display:table-cell; }
.articles .ecommprod .addecomm span{display:none}
.articles .ecommprod .addecomm img{width:22px; height:22px; vertical-align:-2px}
.articles .ecommprod .moreinfo{cursor:pointer; font-size:15px;;opacity:0.8; display:table-cell; width:40%; padding-left:10px;}

.ecommprod .added{position:absolute; border:1px solid #e00; color:#fff; background:#d00; padding:5px 10px; opacity:0; letter-spacing:3px; width:320px; font-weight:800; margin-top:-30px}



.articles  .addecomm:hover{opacity:1}
.articles  .moreinfo:hover{opacity:1}



.listapedido{width:100%; padding-bottom:30px}

.articles .nostock{cursor: default}
.articles .nostock .nono{position:absolute;background:rgba(255,255,255,0.55); color:#000; width:426px; height:310px; margin-top:-5px;margin-left:-5px;text-align:center; line-height:300px; font-weight:400; font-size:30px; text-shadow:1px 1px 1px rgba(255,255,255,0.9)}
.ecommprod.nostock .ecommimg img{width:100%; }



.allist{
	margin-top:150px !important;
	width:100%;
	background: no-repeat 50% 60px ;
	-webkit-transition: background 1s; /* Safari */
    transition: background 1s;
	}
.allist >div{
	opacity:0.8;
	-webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
	}

.listapedido .alname{width:70%;float:left; color:#000; font-weight:400; text-transform:uppercase;font-size:15px;}
.listapedido .alname span{color:#AAA; font-size:12px; margin-right:35px; vertical-align:2px; width:120px; display:inline-block !important}
.listapedido .alprice{ width:20%; float:left;  text-align:right;  font-weight:800; font-family:"Arial",  sans-serif !important;  font-size:14px; }


.alitem {margin:5px 0; padding:5px 10px;border-bottom:1px dashed #eee}
.alitem .prerase{width:30px; height:30px; background: url(../img/ecomm.erase.btn.png) no-repeat 50% 50% #000; float:right; border-radius:15px; margin-top:-5px; cursor:pointer}
.alitem .prerase:hover{background-color:#b00;}

.altotal { margin:5px 0; padding:5px 10px; border-top:1px solid #ccc; color:#888 !important}
.altotal .alname{text-align:right;}
.altotal .alprice{}

.algastos {margin:5px 0; padding:5px 10px; border-top:1px solid #ccc; color:#333 !important}
.algastos .alname{text-align:right; padding-right:10px}
.algastos .alprice{font-weight:600 !important;}
.algastos .alname strong{font-weight:800 !important; letter-spacing:1px; color:#800}

.altotales {margin:5px 0; padding:5px 10px; border-top:1px solid #ccc}
.altotales .alname{text-align:right; padding-top:10px}
.altotales .alprice{font-weight:400; font-size:30px; color:#800; width:30%; text-align:center;}

p.continue{background:#000; text-align:center; color:#fff !important; font-size:18px; padding:20px 40px; line-height:20px; margin:20px auto; letter-spacing:2px}


.btncap{width:100%; text-align:center; padding:10px 0; margin:10px auto; max-width:300px}
.ecommacc{
		text-align:center;
		padding:3px;
		background:#fff !important; 
		color:#666;
		font-weight:400;
		margin:0;
		font-size:25px;
		-webkit-transition:all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		border:2px dotted #ddd !important;
		width:100% !important;
		display:block;
	}
.ecommacc:hover{background:#000 !important; color:#fff}


.ecommacc2{
		text-align:center;
		padding:3px 20px;
		background:#fff !important; 
		color:#666;
		font-weight:400;
		margin:0;
		font-size:16px;
		-webkit-transition:background 0.2s ease-in-out;
		transition: background 0.2s ease-in-out;
		border:2px dotted #ddd !important;
		border-radius:15px;
		display:block;
	}
.ecommacc2:hover{background:#666 !important; color:#fff}

.allist.loading{background:url(../img/ajax-loader-noticia.gif) no-repeat 50% 60px}
.allist.loading  div{opacity:0.5}

.formecomm {display:block; width:100%; height:750px;  background:#f1f1f1}

.formecomm .block {width:31.3%; float:left; padding:0.5%; margin:20px 1% ;min-height:520px; box-sizing:border-box; border:1px solid #fff}
.formecomm .line{margin-bottom:10px; padding:2px 5px; }
.formecomm label{font-size:14px; display:block; width:100%; font-weight:400; line-height:12px;}
.formecomm input{font-size:14px;width:99%; font-weight:400; margin-top:-5px}
.formecomm select{font-size:14px;width:99%; font-weight:400; margin-top:-5px}

.formecomm input.sort{width:40%;}
.formecomm .errormessage{position:absolute; margin:-35px 0 0 120px; background:#666; box-shadow:1px 1px 2px rgba(0,0,0,0.8); color:#fff; font-weight:800; font-size:14px; padding:2px 5px; display:none}

.formecomm input .error{border:1px solid #f00}
.formecomm textarea{font-size:14px;width:99%; height:80px}
.formecomm .paytype{text-align:center; font-weight:300; font-size:16px; border:2px solid #eee; margin-bottom:5px; padding:5px; cursor:pointer; background:#fff}
.formecomm .paytype img{ margin-top:10px;opacity:0.8}
.formecomm .paytype:hover{border:2px dotted #333;}
.formecomm .active{border:2px dotted #333; }
.formecomm .active img{opacity:1}


.formecomm .alheader{width:90%; padding:2% 5%;background:#222; font-size:16px; color:#FFF; font-weight:300; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); text-align:right; margin-bottom:20px}
.formecomm .alheadermin{width:90%; padding:2% 5%;; background:#222; font-size:16px; letter-spacing:1px; color:#FFF; font-weight:300; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); text-align:right; margin-bottom:20px}


.legal{/*la aceptcion*/
	text-align:center;
	margin-bottom:20px;
	}
.legal label{/*la aceptcion*/
	font-size:12px;
	font-weight:600;
	display:inline
	}
.legal label a{color:#800}
.legal a:hover{color:#B00}
.legal input{width:20px; vertical-align:-3px}






::-webkit-scrollbar {
    width: 16px;

}
::-webkit-scrollbar-track-piece{max-height:20px; border-left:1px #f00}
::-webkit-scrollbar-track {
    background-color: #000;
    border-left: 1px  dotted #fff;
	
}
::-webkit-scrollbar-thumb {
    background-color: #444;
	width:24px
}
::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}


/*Animacione a la entrada*/

/*Fade*/
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}

.fadein{animation: fadein 2s ease;}


@keyframes mgt {
    from {margin-top:-20px;}
    to {margin-top:-200px;}
}
@-moz-keyframes fadein {
  from {margin-top:0px;}
    to {margin-top:-80px;}
}
@-webkit-keyframes fadein {
  from {margin-top:0px;}
    to {margin-top:-80px;}
}
@-o-keyframes fadein {
  from {margin-top:0px;}
    to {margin-top:-80px;}
}


.mgt{animation: mgt 2s ease;}

.adding{animation: fading 1s ease,  mgt 1s ease;;}

@keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes fading {
     0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-o-keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}