body {
	/*background:
	radial-gradient(black 15%, transparent 16%) 0 0,
	radial-gradient(black 15%, transparent 16%) 8px 8px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px;
	width: 100%;
	margin:0px;
	padding:0px;*/
	background-image: url("img/pattern_enerquen.png");
	background-repeat: repeat;
	  
}	
	
/*-----------------------------------------HEADER-----------------------------*/

.contHeader {
	width:1024px;
	position:relative;
	display:block;
	margin:0px auto;
	-moz-box-shadow: 0px 1px 75px #000000;
	-webkit-box-shadow: 0px 1px 75px #000000;
	box-shadow: 0px 1px 75px #000000;
	overflow: hidden; 
	height: 919px;
	
}
#productos .contHeader {
height: 875px;
}
header {
	background-color: rgb(38,38,38);
	height: 130px;
    width:100%;
	margin:0px auto;
	
}
header h1 {
width: 351px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
color: #000;
float: left;
margin-top: 18px;
margin-left: 40px;
background-position: 157px 306px;
overflow: hidden;
}
header h1 a {
text-indent: -9999px;
background-image: url("img/top-2.png");
width: 280px;
height: 122px;
display: block;
float: left;
background-position: -3px -9px;
background-size: 549px 118px;
}
header h2 {
width: 317px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
color: #000;
float: right;
background-image: url("img/top-2.png");
background-repeat: no-repeat;
height: 83px;
background-position: -261px -38px;
margin-top: 37px;
margin-right: 28px;
background-size: 561px 131px;

}
nav {
	background-color: #323941;
	height: 36px;
    width:974px;
	float:left;
	margin-top:-10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#24B6CF;
	padding-left:50px;
	padding-top:10px;
	-webkit-transition:  color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition:  color 200ms linear;
	transition:  color 200ms linear;
}
nav a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#E2E2E2;
	text-decoration:none;
	
}
nav a:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#7C838A;
	text-decoration:none;
	-webkit-transition:  color 200ms linear;
	-moz-transition: color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition:  color 200ms linear;
	transition:  color 200ms linear;
}

nav li {
	height: 33px;
    width: auto;
	float:left;
	margin-right:33px;
	
}

/*-------------------------------------EFFECTS----------------------*/
.rotated {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
    -moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}​

.botDes {
	background-color:#D9D9D9;
	color:#ffffff;
	 -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    overflow: hidden;
}
.notselected {
	//transition: background-color 0.5s ease;
  	//background-color: #23B6C6;
}
.AccordionTitle, .AccordionContent, .AccordionContainer
{
  position:relative;
  width:300px;
}

.AccordionTitle
{
  overflow:hidden;
  cursor:pointer;
  font-family:Arial;
  font-size:8pt;
  font-weight:bold;
  vertical-align:middle;
  text-align:center;
  background-repeat:repeat-x;
  -moz-user-select:none;
  width: 200px;
  display: block;
  float: left;
  text-align: left;
}

.AccordionContent
{
  height:0px;
  overflow:auto;
  display:none; 
  width: 100%;
}

.AccordionContainer
{
  width: 100%;
}
 
/*-------------------------------------SECTION----------------------*/


section {
	height: 700px;
    width:100%;
	margin:0px auto;
	display:block;
	overflow:hidden;
	background-color: #262626;
}
article {
	height:700px;
    width:1024px;
	position: relative;
}
article .column4 {
    width:25%;
	background-color:#F99;
	float:left;
	height: 700px;
	overflow: hidden;
	position: relative;
}





/*-------------------------------------ENERQUEN----------------------*/
#filosofia {
	display: block;
	float: left;
	width:472px;
	height:49px;
	float:left;
	padding-top:37px;
	font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:bold;
	text-decoration:none;
	padding-left:40px;	
	overflow: hidden;
	cursor: pointer;
}
#quienesSomos {
	display:block;
	cursor: pointer;
	width:472px;
	height:49px;
	float:left;
	padding-top:37px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	padding-left:40px;
	text-decoration: none;
	overflow: hidden;
}
#filosofia.botDes:hover,
#quienesSomos.botDes:hover, 
#historia.botDes:hover{
	background-color: #23B6C6;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;

}

#quienesSomos.botDes {
	background-color:#ABABAB;
	color:#fff;	
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    overflow: hidden;
}
#filosofia.botDes  {
	background-color:#C0C0C0;
	color:#fff;	
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    overflow: hidden;
}
#historia.botDes  {
	background-color:#D1D1D1;
	color:#fff;	
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    overflow: hidden;
}
#quienesSomos.botAct,#filosofia.botAct, #historia.botAct {
	background-color:#23B6C6;
	color:#fff;	
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    overflow: hidden;
}
#historia {
	display:block;
	width:472px;
	height:49px;
	float:left;
	padding-top:37px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	padding-left:40px;
	text-decoration: none;
	overflow: hidden;
	background-color: #adadad;
	cursor: pointer;
}
.textActHistoria {
	width: auto;
	height: 0px;
	float: left;
	background-color: #F4F4F4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    padding-left:30px;
    padding-right:30px;
	color: #888888;
	text-align: left;
	opacity: 0;	
	overflow: hidden;

}
.textActFilosofia {
	width: auto;
	height: 0px;
	float: left;
	background-color: #F4F4F4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    padding:30px;
	color: #888888;
	text-align: left;
	opacity: 0;	
	overflow: hidden;
}
.contTextActFilosofia {
	height:0px;
	overflow: hidden;
}

.flechaUp {
	/* Firefox */
	-moz-transform:  rotate(-180deg);	
	/* WebKit */
	-webkit-transform: rotate(-180deg) ;
	/* Opera */
	-o-transform:  rotate(-180deg) ;
	/* Standard */
	transform:  rotate(-180deg) ;
	/* Firefox */
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	overflow: hidden;
} 
.flechaDown {
	/* Firefox */
	-moz-transform:  rotate(180deg);	
	/* WebKit */
	-webkit-transform: rotate(180deg) ;
	/* Opera */
	-o-transform:  rotate(180deg) ;
	/* Standard */
	transform:  rotate(180deg) ;
	/* Firefox */
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	overflow: hidden;
} 

.contTextAct {
	width:100%;
	float:left;
	background-color:#F4F4F4;	
	overflow: hidden;
}

.contTextActFilosofia {
	width:100%;
	float:left;
	background-color:#F4F4F4;
	overflow: hidden;
}

.textAct {
	width: auto;
	height: 140px;
	float: left;
	background-color: #F4F4F4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #888888;
	padding: 30px;
	text-align: left;
	overflow-y:scroll;
	margin-bottom: 20px;

}


/*-------------------------------------TEXTOS----------------------*/

/*-------------------------------------FOOTER----------------------*/

footer {
	height: 43px;
	width: 100%;
	margin: 0px auto;
	background-color: #262626;
	left: 2px;
	clear:both;
	width: 1024px;
}	
footer h1 {
	 width: auto;
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:10px;
	 color:#E2E2E2;
	 float:left;
	 margin-top:11px;
	 margin-left:35px;
	 
	}	
footer h2 {
	 width: auto;
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:11px;
	 color:#239EAE;
	 float: right;
	 margin-top:10px;
	 margin-right:35px;
}	 
 h2 a {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:11px;
	 color:#239EAE;
	 text-decoration:none;
}	 
 h2 a:hover {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size:11px;
	 color:#7C838A;
	 text-decoration:none;	 
	 
}
/*-------------------------------------EFECTO HOVER EN THUMBNAILS----------------------*/
a {
text-decoration: none;
}
.box {  
	width:256px;
    height:175px;
    //box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    //border-bottom:2px solid #fff;
    //border-right:2px solid #fff;
    //margin:5% auto 0 auto; 
 	background-size:cover;
	//border-radius:5px;
	overflow:hidden;
}
#one {
 background:url(img/f1.jpg);
 background-repeat: no-repeat;
 background-size: 256px 175px;
}
#two {
 background:url(img/f2.jpg);
background-repeat: no-repeat;
background-size: 256px 175px;
}
#three {
 background:url(img/f3.jpg);
 background-repeat: no-repeat;
 background-size: 256px 175px;
}
#four {
 background:url(img/f4.jpg);
 background-repeat: no-repeat;
background-size: 256px 175px;
}
#five {
 background:url(img/f5.jpg);
 background-repeat: no-repeat;
background-size: 256px 175px;

}
#six {
 background:url(img/f6.jpg);
 background-repeat: no-repeat;
background-size: 256px 175px;
}
#seven {
 background:url(img/f7.jpg);
 background-repeat: no-repeat;
background-size: 256px 175px;
}
#eight {
 background:url(img/f8.jpg);
 background-repeat: no-repeat;
background-size: 256px 175px;
}
.overlay {  
	background:rgba(0,0,0,.55);
    text-align:center;
    padding:105px 0 70px 0;
    opacity:0;
    -webkit-transition: opacity .25s ease;
}

.box:hover .overlay {
    opacity:1;
}

#plus {  
	font-family:Helvetica;
    font-weight:500;
    color:rgba(255,255,255,.85);
    font-size:49px;
}
/*-------------------------------------QUIENES SOMOS----------------------*/



section .colIzq {
	width:100%;
	height:700px;
	float:left;
	display:block;
	overflow:hidden;

}
#enerquen section .colIzq {
	width:50%;
	position: relative;
	z-index: 1000;
	-webkit-box-shadow: -4px -9px 27px #000;
}	
#enerquen section .colIzq li {
	float:left;
	width:50%;
	height:175px;
	
}
section .colIzq li {
	float:left;
	width:79%;
	height:175px;
	
}
section .colIzq li img:hover{
	-moz-box-shadow:inset 0px 1px 75px #2137c4;
	-webkit-box-shadow:inset 0px 1px 75px #2137c4;
	box-shadow:inset 0px 1px 75px #2137c4;
	
}	
section .colDer {
	width: 100%;
	height: auto;
	float: left;
	overflow: hidden;
	position: absolute;
}
section .colDer1 {
	width:50%;
	height:auto;
	float:left;
	overflow: hidden;
	-moz-box-shadow:inset 6px 0px 11px #000000;
-webkit-box-shadow:inset 6px 0px 11px #000000;
box-shadow:inset 6px 0px 11px #000000;
}	

	

	
.verMas {
	width: 30px;
	height: 23px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#1D242E;
	margin-left:84%;
}
	
.verMas a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#1D242E;
	text-decoration:none;
	
}
	
.verMas a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#23B6C6;
	text-decoration:none;
	
}
	
.botVerMas {
	float:left;
	width:25px;
	height:23px;
}
/*	
.selection {
opacity: 1;
}*/
.selection {
background:rgba(35,182,198,0.7);
opacity: 0.5;

}
.botDesact01 {
	background-color:#23B6C6;
	width:472px;
	height:55px;
	float:left;
	padding-top:31px;
	font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
	color:#424242;
	font-weight:bold;
	text-decoration:none;
	padding-left:40px;
	
	
}
	

	
.botDesact03 {
		background-color: #CCCCCC;
	    -webkit-transition: background-color 600ms linear;
	    -moz-transition: background-color 600ms linear;
	    -o-transition: background-color 600ms linear;
	    -ms-transition: background-color 600ms linear;
	    transition: background-color 600ms linear;
	width:472px;
	height:49px;
	float:left;
	padding-top:37px;
	font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
	 color:#424242;
	 font-weight:bold;
	 text-decoration:none;
	 padding-left:40px;
	


}





.arrowturn {
	/* Firefox */
	-moz-transition: all 1s ease;
	/* WebKit */
	-webkit-transition: all 1s ease;
	/* Opera */
	-o-transition: all 1s ease;
	/* Standard */
	transition: all 1s ease;
	/* Firefox */
	-moz-transform: rotate(180deg);
	/* WebKit */
	-webkit-transform:rotate(180deg);
	/* Opera */
	-o-transform: rotate(180deg);
	/* Standard */
	transform:rotate(180deg);
}
.arrowturnDown {
	/* Firefox */
	-moz-transition: all 1s ease;
	/* WebKit */
	-webkit-transition: all 1s ease;
	/* Opera */
	-o-transition: all 1s ease;
	/* Standard */
	transition: all 1s ease;
	/* Firefox */
	-moz-transform: rotate(0deg);
	/* WebKit */
	-webkit-transform:rotate(0deg);
	/* Opera */
	-o-transform: rotate(0deg);
	/* Standard */
	transform:rotate(0deg);
}
.selected {
	transition: background-color 0.5s ease;
  	background-color: white;

  	}

.flecha1 {
	width: 18px;
	height: 18px;
	float: right;
	background-image: url("img/flechadown.png");
	background-position: 0px 2px;
    border-radius: 18px;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background-repeat: no-repeat;
    position: absolute;
    top: 36px;
    right: 30px;
}
.flecha2 {
	width: 18px;
	height: 18px;
	float: right;
	background-image: url("img/flechaup.png");
    background-position: 0px 2px;
	 
	border-radius:18px;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
    background-repeat: no-repeat;
    position: absolute;
top: 33px;
right: 30px;
}
.flecha3 {
	width: 18px;
	height: 18px;
	float: right;
	background-image: url("img/flechaup.png");
	 
	border-radius:18px;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
    background-repeat: no-repeat;
    background-position: 0px 2px;
    position: absolute;
top: 36px;
right: 30px;
}

.tutorialMenu  h2 a:hover .flecha2 {
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
	
}
.tutorialMenu  h2 a:hover .flecha3 {
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);	
}
.tutorialMenu  h2 a:hover .flecha1 {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);	
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
li#coffeecards.desactivado :hover .flecha1 {
	-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);	
}
.flecha1:active,
.flecha2:active,
.flecha3:active {

-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
li#coffeecards.firstTime.activado .flecha1 {
	-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
li#onlineform.firstTime.activado .flecha3 {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

li#blogcomments.firstTime.activado  .flecha2{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
li#blogcomments.firstTime.activado:hover .flecha2{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

li#coffeecards.desactivado .flecha1{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
li#blogcomments.desactivado:hover .flecha2 {
	-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.botCerrar {
width: 22px;
height: 22px;
float: right;
margin-right: 30px;
background-color: #242424;
background-image:url(../css/img/cruz.png);
border-radius: 22px;
background-position: -1px -1px;
}
.botVer {
width: 22px;
height: 22px;
/* float: left; */
margin-right: 9px;
background-color: #242424;
background-image: url(../css/img/cruz.png);
border-radius: 22px;
background-position: -1px -1px;
position: absolute;
top: 0;
left: 0;
-moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);

}
.botVer:hover {
 
	opacity: 0.4;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}
.botCerrar a {
	display: block;
	width: 22px;
	height:22px;
}
.botCerrar:hover {
 
	opacity: 0.4;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}
.fotoG {
	width:100%;
	height:350px;
	
}
	
.contTextActFotoG {
	width:100%;
	height: 266px;
	float:left;
	background-color:#F4F4F4;
}
#larraburu .contTextActFotoG,
#tipodos .contTextActFotoG,
#tipotres .contTextActFotoG,
#tipocuatro .contTextActFotoG,
#tipocinco .contTextActFotoG,
#tiposeis .contTextActFotoG,
#tiposiete .contTextActFotoG,
#tipoocho .contTextActFotoG {
	height: 264px;
}






/*-----------------------------------------PRODUCTOS-----------------------------*/



.col01 {
	width:25%;
	height:auto;
	float:left;
	-webkit-box-shadow: -4px -9px 27px #000;
	z-index: 1000;
	position: relative;
	
	
}
#lubricantes{
	width:100%;
	height: auto;
	float:left;
	background-color:#0A7E97;
	
  
	
	
}
.ttLubricantes{
	width: 70%;
	height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	padding-bottom: 31px;
	padding-top: 31px;		
}
.ttCombustibles{
	width: 70%;
	height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	padding-bottom: 31px;
	padding-top: 31px;		
}
#lubricantes ul#lubri li{
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	width: 79%;
	height: 31px;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #22A4B1;
	padding-top:10px;
	background: #23B6C6;
	position: relative;

}
#lubricantes ul#lubri li.act {
	background-color: #0D94B4;
	//background-image: url(../img/flecha_productos_act.png);
	background-repeat: no-repeat;
	background-position: right center;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	width: 79%;	

	-webkit-transition: background-color 600ms linear;
    -moz-transition: background-color 600ms linear;
    -o-transition: background-color 600ms linear;
    -ms-transition: background-color 600ms linear;
    transition: background-color 600ms linear;

}
#lubricantes ul#lubri li.inactivo{
	background:#23B6C6;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	width: 79%;
			
		
	}
#lubricantes ul#lubri li.inactivo:hover{
	background:#0D94B4;

-webkit-transition: background-color 600ms linear;
    -moz-transition: background-color 600ms linear;
    -o-transition: background-color 600ms linear;
    -ms-transition: background-color 600ms linear;
    transition: background-color 600ms linear;
	
}


#combustible{
	width:100%;
	height: auto;
	float:left;
	background-color:#282828;
	height: 321px;
	position: relative;
}	
#combustible ul#combus li{
	width: 100%;
	height: 31px;
	float: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	padding-top:10px;
	background-repeat: no-repeat;
	background-position: right center;
	position: relative;	
}
#combustible ul#combus li:hover{
	background-color: #303030;
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	-o-transition: background-color 600ms linear;
	-ms-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}

#combustible ul#combus li:visited{
	background-color: #333333;
}
#combustible ul#combus li{
	background-color: #383838;
		font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	width: 79%;
	
	
	
}
#combustible ul#combus li.inactivo{
	background:#404040;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	padding-left: 53px;
	width: 79%;
			
		
}
#combustible ul#combus li.inactivo:hover{
	background:#383838;
	
}
.col02 {
	width:25%;
	height:700px;
	float:left;
	background-color:#2E2E2E;
	padding-bottom: 137px;	
	position:relative;
	z-index: 12;
	-webkit-box-shadow: -4px -9px 27px #000;
	
}

section .colDer1 {
	position:relative;
	z-index: 0;
}

#rimulaBlock {
	position: relative;
display: block;
height: 700px;
}
#advanceBlock {
	position: relative;
display: block;
height: 700px;
}
#rimulaBlock {
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}






section .colDer1 {
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}


@-moz-keyframes dropHeader {
    0% {
       transform:translateX(-600px);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateX(-600px); 
    }
}
@keyframes dropHeader {
    0% {
        transform: translateX(-600px); 
    }
}
.col02 {
	-moz-animation-name: what;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: what;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: what;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;

}
@-moz-keyframes what {
    0% {
       transform:translateX(-300px); 
    }
}
@-webkit-keyframes what {
    0% {
        -webkit-transform: translateX(-300px); 
    }
}
@keyframes what {
    0% {
        transform: translateX(-300px); 
    }
}
.marcasActLubri{
	width:196px;
	height: 66px;
	float:left;
	background-color:#0D94B4;
	padding-left:60px;
	padding-top:18px;
	display: block;
	-webkit-transition: background-color 400ms linear;
	-moz-transition: background-color 400ms linear;
	-o-transition: background-color 400ms linear;
	-ms-transition: background-color 400ms linear;
	transition: background-color 400ms linear;
	color: white;
}

}
.seleccion {
	background-color: rgb(0,150,181);
	/* Firefox */
	-moz-transition: all 1s ease;
	/* WebKit */
	-webkit-transition: all 1s ease;
	/* Opera */
	-o-transition: all 1s ease;
	/* Standard */
	transition: all 1s ease;
}
#comb1,
#comb2,
#comb3,
#comb4 {
	width:206px;
	height: 63px;
	float:left;
	padding-left:50px;
	padding-top:18px;
	cursor: pointer;

}
.marcasActCombus{

	background-color:#383838;
		-webkit-transition: background-color 200ms linear;
	-moz-transition:background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition:background-color 200ms linear;
	transition: background-color 200ms linear;
	
}
.marcasDesactLubri{
	width:196px;
	height: 66px;
	float:left;
	background-color:#2E2E2E;
	padding-top:18px;
	padding-left:60px;
	-webkit-transition: background-color 200ms linear;
	-moz-transition:background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition:background-color 200ms linear;
	transition: background-color 200ms linear;
	
}
.marcasDesactLubri:hover {
	background-color: #242424;
	-webkit-transition: background-color 400ms linear;
	-moz-transition:background-color 400ms linear;
	-o-transition: background-color 400ms linear;
	-ms-transition:background-color 400ms linear;
	transition: background-color 400ms linear;
}

#marcasDesactLubri:hover{
	background-color:#0D94B4;
	
}
.marcasDesactCombus{
	width:206px;
	height: 63px;
	float:left;
	background-color:#242424;
	padding-top:18px;
	padding-left:50px;
	
}
.marcasDesactCombus:hover{
	background-color:#383838;
	-webkit-transition: background-color 200ms linear;
	-moz-transition:background-color 200ms linear;
	-o-transition: background-color 200ms linear;
	-ms-transition:background-color 200ms linear;
	transition: background-color 200ms linear;
}
.contenImgMarcas01 {
	width:100%;
	height:auto;
	
	
}
.contenImgMarcas02 {
	width:100%;
	height:auto;
	
}
.ContGaleriaMarcasLubri {
	width:100%;
	height:auto;
	
}
.ContGaleriaMarcasCombus {
	width:100%;
	height:auto;
	
}
#contNavMarca {
	width:481px;
	height:54px;
	background-color:#F4F4F4;
	padding-top:30px;
	padding-left:30px;
	
}

#contNavMarca ul#navInt li{
	width: 100%;
	height: 33px;
	float: left;
	
}

#contNavMarca ul#navInt li.navAct {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#3FBECB;
	width:auto;
	margin-right:30px;
	font-weight:bold;
	
}
#contNavMarca ul#navInt li.navAct a {
color:#3FBECB;
-webkit-transition: color 200ms linear;
	-moz-transition:color 200ms linear;
	-o-transition: color 200ms linear;
	-ms-transition:color 200ms linear;
	transition: color 200ms linear;
}

#contNavMarca ul#navInt li.navDesac{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	width:auto;
	margin-right:30px;
	font-weight:bold;
	
}

#contNavMarca ul#navInt li.navDesac a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	text-decoration:none;
	
}

#contNavMarca ul#navInt li.navDesac a:hover{
	font-family:Arial, Helvetica, sans-serif;
	color:#7C838A;
	text-decoration:none;
	-webkit-transition:  color 200ms linear;
	-moz-transition:  color 200ms linear;
	-o-transition:  color 200ms linear;
	-ms-transition:  color 200ms linear;
	transition: b color 200ms linear;


	
}
.contTtMarca {
	width:482px;
	height:54px;
	background-color:#0D94B4;
	padding-left:30px;
	padding-top:30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#fff;
	font-weight:bold;
		position: relative;
display: block;
float: left;
}
	
#combustibles1 .textAct,
#combustibles2 .textAct,
#combustibles3 .textAct,
#combustibles4 .textAct {
height: 190px;
}
	
.contGaleria {
	width:100%;
	height: 268px;
	float:left;
	background-color:#201A0C;
	position: relative;
display: block;
float: left;
}
#combustibles1 .contTextActFotoG,
#combustibles2 .contTextActFotoG,
#combustibles3 .contTextActFotoG,
#combustibles4 .contTextActFotoG
{
	height: 350px;
} 
	
.botGaleriaIzq {
	background-image: url(../img/bot_galeria_izq.png);
	background-repeat: no-repeat;
	background-position: center;
	z-index:2;
	position:absolute;
	margin-left:27px;
	width:31px;
	height:31px;
	margin-top:112px;
	
}
	
.botGaleriaDer {
	background-image: url(../img/bot_galeria_der.png);
	background-repeat: no-repeat;
	background-position: center;
	z-index:2;
	position:absolute;
	margin-left:454px;
	width:31px;
	height:31px;
	margin-top:112px;
	
}
	
.contFotoComb {
	width:100%;
	height: 256px;
	float:left;
	background-color:#F30;
	
}
.contTtMarcaComb {
	background-color:#383838;
	width:481px;
	height:51px;
	padding-top:30px;
	padding-left:30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#fff;
	float:left;
		
}
	
.verMas02 {
width: 127px;
height: 23px;
 
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #1D242E;
margin-left: 30px;

	
}
	
.verMas02 a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #1D242E;
text-decoration: none;
display: block;
 
background-image: url(../css/img/cruz.png);
border-radius: 22px;
background-position: -1px -1px;
text-align: left;
background-repeat: no-repeat;
display: block;
float: left;
position: relative;
padding-left: 28px;
width: 100px;
}
	
.verMas02 a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	color:#23B6C6;
	text-decoration:none;
	 -webkit-transition:  color 400ms linear;
	    -moz-transition:  color 400ms linear;
	    -o-transition:  color 400ms linear;
	    -ms-transition:  color 400ms linear;
	    transition: color 400ms linear;

	
}
.verMas02 a:hover .botVer {
	 
 
	opacity: 0.6;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}

.botVerMas02 {
	float:left;
	width:25px;
	height:23px;
	margin-left:28px;
	margin-right:8px;
	
}
	
.descPdf {
	width: 90px;
	height: 23px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#1D242E;
	margin-left:260px;
	font-weight:bold;	
}
	
.descPdf a{
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#1D242E;
	text-decoration:none;
	
}
	
.descPdf a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#23B6C6;
	text-decoration:none;
	
}
	
.contTextCombus {
	width:100%;
	height: 367px;
	float:left;
	background-color:#F4F4F4;
	
/*-----------------------------------------SERVICIOS-----------------------------*/
		
}
.contImgServ {
	width:100%;
	height:688px;
	
}
	
.contTextServicios {
	width:100%;
	height: 516px;
	float:left;
	background-color:#F4F4F4;
	
}
#contacto{
	width: 100%;
	height: 352px;
	float: left;
	background-color: #333333;
	background-repeat: no-repeat;
	background-position: center bottom;	
	
}
#contacto ul#bot li {
	width: 462px;
	height: 59px;
	float: left;
	padding-top: 30px;
	padding-left:50px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;
	font-weight:normal;
}
#contacto ul#bot li.contactoAct{
	background-color: #242424;
	background-repeat: no-repeat;
	background-position: right center;	
	
}
#contacto ul#bot li.contactoDesact{
	float: left;
	background-color: #333333;
	
}
#contacto ul#bot li:hover{
		float: left;
		background-color: #242424;
		-webkit-transition: background-color 400ms linear;
	    -moz-transition: background-color 400ms linear;
	    -o-transition: background-color 400ms linear;
	    -ms-transition: background-color 400ms linear;
	    transition: background-color 400ms linear;

	
}
#contactoDetalle{
	width: 100%;
	height: 688px;
	float: left;
	background-color: #242424;
	background-repeat: no-repeat;
	background-position: center bottom;

}
#contactoDetalleText{
	width: 330px;
	height: 250px;
	float: left;
	margin-left: 100px;
	margin-top: 70px;
	

	
}
.contacTextDirec{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: bold;
	color: #23B5C6;	
	
}
.contacText{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #E2E2E2;	
	
}
.contacText a{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #24B2C0;
	text-decoration:none;
	
}
.contacText a:hover{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #E2E2E2;
	text-decoration:none;


	
}
#primera {
	position: absolute;
	left: 0;
	top: 0 ; 
}
#segunda,#tercera, #cuarta {
position: absolute;
left: -512px;
top:0px; 
}

/*-------------------------------------------ANIMATIONS------------------------------*/	

img.thumb:hover {
 -webkit-transform: scale3d(1.5,1.5,1);
-moz-transform: scale3d(1.5,1.5,1);
-ms-transform: scale3d(1.5,1.5,1);
-o-transform: scale3d(1.5,1.5,1);
transform: scale3d(1.5,1.5,1);
-o-transform: scale(1.5);
-webkit-transition: -webkit-transform 3s ease-out;
-moz-transition: -moz-transform 3s ease-out;
-o-transition: -o-transform 3s ease-out;
transition: transform 3s ease-out;
}

.is-hidden {
    display: none;
    opacity: 0;
}
.is-active {
    position: absolute;
    opacity: 1;
    transition: opacity 1s; 
}

/*.overlay {
opacity: 0;
top: 0;
width: 256px;
background: white;
height: 700px;
position: absolute;
}
.overlay:hover {
	opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}
*//*.imagewrap {
overflow: hidden;
}

#opacity {
-webkit-animation: opacity 1s infinite alternate;
opacity: 1;
-webkit-transition: -webkit-transform 3s ease-out;
-moz-transition: -moz-transform 3s ease-out;
-o-transition: -o-transform 3s ease-out;
transition: transform 3s ease-out;
}*/
/*-------------------------------------------@media only------------------------------*/	
/*-------------------------------------ACCORDION----------------------*/
.tutorialMenu li {
     
}
.tutorialMenu {
    margin: 0;
    list-style-type: none;
    width: 512px;
    overflow: hidden;
    background: #F4F4F4;
}
.tutorialMenu h2 {
   /* margin: 5px 0;*/
    padding: 0;
}


.tutorialMenu h2 a {
    font-size: 14px;
    display: block;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    margin: 0;
    padding-top: 32px;
    padding-left: 40px;
    background-color: #23B6C6;
	height: 54px;
    position: relative;
 	border-bottom: 1px solid #c0c0c0;	
}

.tutorialMenu :not(:target) h2 a {
   
    position: relative;
    border-style: solid;
    background-color: #cccccc;
	    -webkit-transition: background-color 400ms linear;
	    -moz-transition: background-color 400ms linear;
	    -o-transition: background-color 400ms linear;
	    -ms-transition: background-color 400ms linear;
	    transition: background-color 400ms linear;

}
.tutorialMenu  h2 a:hover,
.tutorialMenu  h2 a:active,
.tutorialMenu   h2 a:focus {
  		background-color: #23B6C6;
	    -webkit-transition: background-color 400ms linear;
	    -moz-transition: background-color 400ms linear;
	    -o-transition: background-color 400ms linear;
	    -ms-transition: background-color 400ms linear;
	    transition: background-color 400ms linear;
	   color: white; 
	  
}


.tutorialMenu :target p,
.tutorialMenu :not(:target) p {
    padding-left: 30px;
         
    height: 0;
    overflow: hidden;
    -moz-transition: height .5s ease;
    -webkit-transition: height .5s ease;
    -o-transition: height .5s ease;
    transition: height .5s ease;
}
.tutorialMenu :target p { 
height: 397px;
padding-left: 30px;
text-align: left;
}
li#coffeecards.firstTime p {
height: 390px;
padding-left: 30px;
text-align: left;
overflow-y: scroll;
margin-bottom: 47px;
}
li#onlineform.firstTime p {
height: 390px;
padding-left: 30px;
text-align: left;
overflow-y: scroll;
margin-bottom: 47px;
}
li#blogcomments.firstTime p {
height: 390px;
padding-left: 30px;
text-align: left;
overflow-y: scroll;
margin-bottom: 47px;
}
::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;

}
 ::-webkit-scrollbar-thumb {
background-color: #23B6C6;
/*background-image: -webkit-gradient(linear, 0 0, 0 64%, color-stop(.5, rgba(255, 255, 255, 0.5)), color-stop(.5, transparent), to(transparent));
*/
height: 300px; 
}
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
background-color: #F5F5F5;

}
::-webkit-scrollbar-track-piece  {


}
.tutorialMenu .firstTime h2 a  {
	background-color: #23B6C6;
 	color: white; 
   -webkit-transition: color 1s ease-in;
   -moz-transition: color 1s ease-in;
   -o-transition: color 1s ease-in;
   -ms-transition: color 1s ease-in;
   transition: color 1s ease-in;

}  


.tutorialMenu p { 
	height: 460px;
	width: 452px;
	height: 370px;
	background-color: #F4F4F4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #888888;
	text-align: left;
	padding-right: 30px;
}

h1,
.tutorialMenu h2 a,
.tutorialMenu :not(:target) p {
  
}
p.texto1 {
width: 452px;
height: 370px;
float: left;
background-color: #F4F4F4;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #888888;
text-align: left;
overflow: hidden;


}
/*--------------------*/




#larraburu {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
	
}
section#larraburu.colDer.bloqueInactivo {

	/*	transform:translateX(-400px);*/
}
section#tipodos.colDer.bloqueInactivo {

/*	transform:translateX(-600px);*/
}
#tipodos {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}

#tipodos {
	
}
#tipotres {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#tipocuatro {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#tipocinco {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#tiposeis {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#tiposiete {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#tipoocho {
	left:-512px;
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;
}
#presentacion {
position: absolute;
margin-left: 512px;
z-index: 100;
display: block;
}	
#larraburu, #tipodos,#tipotres,
#tipocuatro,#tipocinco,#tiposeis,#tiposiete,#tipoocho {
z-index: 200;
width: 512px;
-webkit-transition: all 0.4s ease-out;
}
section#larraburu.colDer.bloqueActivo ,
section#tipodos.colDer.bloqueActivo,
section#tipotres.colDer.bloqueActivo,
section#tipocuatro.colDer.bloqueActivo,
section#tipocinco.colDer.bloqueActivo,
section#tiposeis.colDer.bloqueActivo,
section#tiposiete.colDer.bloqueActivo,
section#tipoocho.colDer.bloqueActivo {
z-index: 900;
}

#presentacion {
	-moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.4s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.4s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.4s;

}
/*--------------------*/
.bloqueActivo {
	position: relative;
	overflow: hidden;
	z-index: 900;
	
}
.bloqueInactivo {
	
	z-index: 0;
}
/*-------- HOME ------------*/
.mover {
display: block;
float: left;
}
.front {

}
.backone, .backtwo, .backthree,.backfour {
position: absolute;
top: 0;
left: -256px;
height: 700px;
width: 256px;
-moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}
.front:hover .back{
	-moz-transform:translateX(256px);
    -webkit-transform:translateX(256px);
    -o-transform:translateX(256px);
    -ms-transform:translateX(256px);
    transform:translateX(256px);
  	-moz-transition:all 1s ease;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    -ms-transition:all 1s ease;
    transition:all 1s ease;
}
/*-------- CONTACTO ------------*/

#contacto section .colIzq {
width: 50%;
position: relative;
background: #404040;
}
#contacto section .colDer {
width: 50%;
position: relative;
}	
#contactoDetalle {
	height: 356px;
	position: relative;
	overflow: hidden;
}
#galeryContact {
	display: block;
	float: left;
	height: 350px;
	width: 512px;
}
#contacto a {
	position: relative;
	display: block;
	float:left;
}
.flechaContact.noseve {
		opacity: 0;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}
.flechaProdL.noseve, .flechaProdC.noseve {
		opacity: 0;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}
.flechaProdC.seve {
		opacity: 1;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
}
.flechaContact {
background-image: url(../css/img/flechass.png);
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 32px;
background-position: 60px 46px;
	opacity: 1;
}
#contactouno {
	width: 512px;
	height: 353px;
	background-color: #242424;	
	position: absolute;
}

#contactodos,
#contactotres,
#contactocuatro {
	width: 512px;
	height: 353px;
	position: absolute;
	top: 0;
	left: -512px;
	background-color: #242424;
	position: absolute;
} 
#primera,#segunda,#tercera,#cuarta {
display: block;
float: left;
}
#segunda,#tercera,#cuarta {
left:-512px;
}
#map {
	display: block;
float: left;
width: 512px;
height: 350px;
position: relative;
}
.bloqueIn {

}
#contactouno.bloqueOut,
#contactodos.bloqueOut,
#contactotres.bloqueOut,
#contactocuatro.bloqueOut {

position: absolute;
}
/*--------- GALERIA CONTACTO -----------*/
div#captioned-gallery { width: 100%; overflow: hidden; }
figure { margin: 0; }
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 40s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block;
position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff; width: 100%;
font-size: 2rem; padding: .6rem;
}
.flechaUno {
position: absolute;
}
.flechaDos {
position: absolute;	
}

/*--------- PRODUCTOS-----------*/
#contenCombustibles {
display: block;
position: absolute;
top: 0;
left: -256px;
width: 256px;
height: 700px;
background: #242424;
}

#contenLubricantes {
	display: block;
	position: absolute;
	top: 0;
	left: 0px;
	width: 256px;
	height: 696px;
	background: #2E2E2E;
}
.flechaProdC {
background-image: url(../css/img/flechass.png);
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 32px;
background-position: 60px 46px;
opacity: 0;	
}
.flechaProdCin {
background-image: url(../css/img/flechass.png);
width: 20px;
height: 20px;
position: absolute;
right: 18px;
top: 13px;
background-position: 60px 46px;
opacity: 0;
}

.flechaOn {
opacity: 1;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;

}
.flechaProdL {
background-image: url(../css/img/flechass.png);
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 32px;
background-position: 60px 46px;
opacity: 1;
}


#combustible ul#combus a#first.on li {
	background-color: #303030;
}


/*--------- PRODUCTOS TERCER COLUMNA-----------*/
#advanceBlock, #helixBlock, #tellusBlock, #gadusBlock, #spiraxBlock, #lubBlock {
	cursor: pointer;
	position: absolute;
		top: 0;
	left: -512px;
	z-index: 500;
}
#advance, #helix, #tellus, #gadus, #spirax, #rimula, #lube {
cursor: pointer;
}
#RseisLMBlock {
	position: absolute;
	top:84px;
	width: 512px;
}
#RcuatroBlock, #RtresBlock, #RdosBlock, #RdosExtraBlock  {
	position: absolute;
	top:84px;
	left: -512px;
	width: 512px;
}
#advance1, #advance2, #advance3, #advance4  {
	position: absolute;
	top:84px;
	left: -512px;
	width: 512px;
}
 #helix1 {
	 position: relative;

 }  
#helix2, #helix3, #helix4, #helix5, #helix6, #helix7, #helix8   {
	 position: absolute;
	top:84px;
	left: -512px;
	width: 512px;
}
 #combustibles1 {
	 position: relative;

 }  
#combustibles1,
#combustibles2,
#combustibles3,
#combustibles4 {
	
position: absolute;
top: 0px;
left: -512px;
width: 512px;
height: 700px;
z-index: 1000;	
}
#RseisLMBlock {
	position: absolute;
	top:84px;
	width: 512px;
}
/*--------- PRODUCTOS TERCER COLUMNA-----------*/
#moverone, #movertwo, #moverthree, #moverfour {
	position: relative;
	-webkit-box-shadow: -4px -9px 27px #000;
}
.backone,.backtwo,.backfour,.backthree {
	background-color: white;
	position: absolute;
}
#moverone {
z-index: 900; 	
}
 
#movertwo {
z-index: 800; 	
}
#moverthree {
z-index: 700; 	
}
#moverfour {
z-index: 600; 	
}




.backone h2,
.backtwo h2,
.backthree h2,
.backfour h2 {

margin-top: 180px;
font-family: arial;
line-height: 1.2;
margin-bottom: 16px;
width: 100px;
display: block;
margin-right: 0;
color:rgb(3,4,13);
padding-left: 30px;
}
.backone ,
.backtwo ,
.backthree ,
.backfour  {
	
}
.textHome {
font-family: Arial, Helvetica, sans-serif;
width: 200px;
font-size: 11px;
color: rgb(155,155,155);
padding-left: 30px;
line-height: 20px;
}
.slide {
	left:0; 
	-moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
#movertwo:hover .backtwo{
	
	-moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
span.flechaHome {
width: 35px;
height: 35px;
background-color: black;
background-image: url(../css/img/flechita_index.png);
background-repeat: no-repeat;
display: block;
margin-left: 30px;
margin-top: 60px;

border-radius: 45px;
}
span.flechaHome:hover {
 opacity: 0.4;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;

}
.frontone {
	 
	z-index: 700;
}
.backtone {
	 
	z-index: 800;
}


#servicios li#coffeecards.firstTime p {
	height: 479px;
}
#servicios li#blogcomments.firstTime p {
 	height: 479px;
}
/*---------- COMBUSTIBLES ----------*/

/*---------- PERSOANL STYLES FOR PAGES ----------*/
 #enerquen .contHeader {
 	height: 919px;
 }

/* END: Accommodating for IE */
/*--------------------*/
@media only screen and (max-width: 480px) {
	
header {
	width:50%;	
}
nav {
	width:462px;
}	
section .colIzq {
	float:none;
	z-index: 1000;
}
section .colDer {
	float:none;
	-moz-box-shadow:inset 6px 0px 11px #000000;
	-webkit-box-shadow:inset 6px 0px 11px #000000;
	box-shadow:inset 6px 0px 11px #000000;
	position: absolute;
}
footer {
	width: 1024px;
	}