body 
{
background:#000; 
margin:0;
padding:0;

}

/*inicio del header */
#cabecera
 {
   width:100%;
   height:150px;

  background: -webkit-radial-gradient(#4F4F4F, #242424); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(#4F4F4F, #242424); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#4F4F4F,#242424); /* For Firefox 3.6 to 15 */
background: radial-gradient(#4F4F4F,#242424); /* Standard syntax */   
   box-shadow:0px 0px 10px #000;
    }
/*final del header */
/**inicio del formato del logotipo */
#logotipo 
 {
   width:25%;
   float:left;
   margin-left:8%;
   text-align:center;
   margin-top:10px;

  }
        
#logotipo >img
 {
  box-shadow:0px 0px 10px #000;
  }   
/*final del formato del logotipo */     

/*inicia la barra que contiene los logos de combustible */

.banner
 {
  width:70%;
  min-width:70%;
  max-width:70%;  
  height:40px;
  text-align: center;
  float:left;
border-right: 10px;
 }  
 .slogan {
color: #fff;
font-family:Goudy Stout;
font-size: 23px; 
letter-spacing:3px;
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

 .encabezado
 {
  min-width:92%;
  max-width:92%;  
  height:80px;
  margin-top:0%;
  margin-left:4%; 
   
  font: bold 25px/1 arial;
  text-transform: uppercase;
  word-wrap: break-word;
  text-align:center;
  color:#000; 
  float:left;
   box-shadow:2px;
   background: #242424; 
   box-shadow: 0px 0px 3px  #f00;   
  border-radius: 15px;
 
 
 }
/*termina la barra que contiene los logos de combustible */  
#contenedor
 {
  width:100%; 
min-height: 900px;
  height: auto !important;
  height: 900px;
  margin: 0 auto 0.2%;
}
/*contiene  el formato de los titulos en toda la pagina */         
.titulos,.premium
 {
  font: bold 14px/1 arial;
  text-transform: uppercase;
  text-align: center;
  float: left;
  color: #fff;
  margin-top:1.5%;
  margin-left:5%;
  width: 14%;
  height:60%; 
 background:#19821D;  
  border-radius:5px;
box-shadow: 0px 0px 2px  #f00; 
 }
 .premium
 {
  background:#f00;
 }
 .titulos2
 {
   font:bold  14px italic;
  text-transform: uppercase;
  float: left;
  color: #176E1A;
  margin-top:4%;
  margin-left:4%;
  border-radius:5px;
 
 }
 .stroke,.stroke2 {
 
text-align:left; 
color: #f00;
font:  22px arial; 
text-shadow: 1px 1px 3px #323232;
margin-top:2px; 
line-height: 100%;
letter-spacing: 4px;
border-radius:5px;
 
}
.stroke2{
 font:10px arial;
 font-size: 20px;
  
}
/*finaliza  el formato de los titulos en toda la pagina */  
/*inicia el formato del menu */  
ul.circulos { 
 width: 60%; 
 margin-left:35%; 
 text-align: center;
 list-style-type: none; 
font: bold 14px/1 arial;
 text-transform: uppercase; 
} 
ul.circulos li { 
display: inline; 
margin: 0;
padding: 0;
} 
ul.circulos li a
{ 
display: inline-block;
text-decoration: none; 
color: #fff; 

 background: #D96200;    
margin:auto;
padding: 5px;
width:20%; 
height:50px; 
border-radius: 10px 10px 10px 10px;
box-shadow:0px 0px 2px #f00;
} 
ul.circulos a span { 
position: relative;
top:40%;
padding: 5px;
text-align: center;
} 
ul.circulos a:hover { 
background: #B0B0B0;
}

.texto,.texto2 
 {
  font:  12px/1 arial;
  font-style: oblique;
  position:relative;
  color: #fff;
  margin-top:10px;
  margin-left:5px;
  border-radius:12px;
 }
 .texto2
 {
   font: bold 13px/1 arial;
  font-style: oblique;
  position:relative;
  color: #616161;
  margin-top:10px;
  margin-left:5px;
  
 }
  /*-- en esta parte  es el estilo de los cuadros horizontales de la pagina ---*/      
.precio1,.precio2,.precio3,.pago,.pago2,.pago3 {
background: #990000;
opacity:0.6; 
border: 2px solid grey;
float:left;
width: 10%;
height: 80%;
margin-left:10%; 
margin-top:1%; 
border-radius:8px;
overflow: hidden;
color: transparent; font-size: 10px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.precio2
{background: #2A9215;
}
.precio3{
  background: #000000;
}
.precio1:hover {
color: #fff;

opacity:1.0;
}
.precio1 img{ float: left;
margin: 0 15px;
}
.precio2:hover {
line-height: 133px;
color: #fff;

opacity:1.0;
}
.precio2 img{ float: left;
margin: 0 15px;
}
.precio3:hover {
line-height: 133px;
color: #fff;

opacity:1.0;
}
.precio3 img{ float: left;
margin: 0 15px;
}.variable {
width: 20%;
max-width:25%;
max-width:25%;
height: 100px;
max-height:100px;
min-height:100px;
background:#FF0000;
float:left;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
margin-top:5px;
margin-left:43px;
border-radius:15px;
color: transparent; font-size: 20px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.variable:hover {
line-height: 133px;
color: #fff;
background:#229C19;
opacity:0.8;
}
.variable img{ float: left;
margin: 0 15px;
}

 .pago  {
  float: left;
  width: 150px;
  height: 150px;
  margin-left:20%;
margin-top:-22%;
margin: 0 15px; 
}
 /*-- en esta parte  termina el estilo de los cuadros horizontales de la pagina ---*/
 /*finaliza el formato del menu */  
 .cajitas,.cajitas2,.cajitas3
  { 
   background:#D6D6D6; 
  opacity:1.6;  
   width:100%;
   height:400px; 
   margin:0;
   padding:0; 

     box-shadow: 0px 3px 0px #00D400;
    
      }
      .cajitas2
      {

background:#000; 
   
        height:300px; 
        
      }
      
  .cuadro
  {
 width: 30%;
 max-width:30%;
 min-width:30%;
 height:10%;
 max-height:10%;
 min-height:10%;
 position:absolute;
 word-wrap: break-word;
  margin-top:-29%;
 margin-left:60%;
 float:left;
}      
 .vinieta1{
  text-align:justify; 
  font: bold 12px/1 arial;
  color: #965428;
  margin-top:6px;
  margin-left:1%;
  border-radius:12px;
list-style-image: url('images/visa.png');
 }
 .vinieta2{
list-style-image: url('images/master.png');
text-align:justify; 
  font: bold 12px/1 arial;
  color: #965428;
  margin-top:6px;
  margin-left:1%;
  border-radius:12px;
  }
 .vinieta3{
list-style-image: url('images/american.png');
text-align:justify; 
  font: bold 12px/1 arial;
  color: #965428;
  margin-top:6px;
  margin-left:1%;
  border-radius:12px;
 }
 .vinieta4{
list-style-image: url('images/efecticard.png');
text-align:justify; 
  font: bold 12px/1 arial;
  color: #965428;
  margin-top:6px;
  margin-left:1%;
  border-radius:12px;
 }
/*inicia el  pie de la pagina */    
#pie
{
   width:100%;
   height:100px;
   background:#AB041C; 
   box-shadow:0px 0px 10px #000;
   
    }
 /*termina el contenido del pie de pagina*/
 /*esta `parte es la que contiene la informacion del pie de pagina */  
.contpago
{
     
 width: 12%;
 max-width:12%;
 min-width:12%;
 height:33%;
 max-height:33%;
 min-height:33%; 
 float:left;

text-align:center;
 padding:3px; 

 margin-top:20px;
 margin-left:9%;
 border-radius:15px;
 color: transparent; font-size: 20px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 300;
 text-transform: uppercase;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
.contpago:hover 
{
 color: #fff; 
 opacity:0.6;
}

.nosotros
{
     
 width: 35%;
 max-width:35%;
 min-width:35%;
 height:40%;
 max-height:40%;
 min-height:40%; 
 float:left;
text-align:center;
 padding:8px; 
/*box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);*/
 margin-top:17px;
 margin-left:9%;
 border-radius:15px;
 color: transparent; font-size: 20px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 300;
 text-transform: uppercase;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
.nosotros:hover 
{
 color: #fff; 
 opacity:0.6;
}
.contfooter img{ float: left;
 margin: 0 15px;
}
.contfooter2
{
 width: 23%;
 max-width:23%;
 min-width:23%;
 height:50%;
 max-height:50%;
 min-height:50%;
 word-wrap: break-word;
 text-align:center; 
 float:left;
 margin-top:2%;
 margin-left:80px;
 border-radius:15px;
/* -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);*/
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.contfooter2 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}
 /*termina el contiene la informacion del pie de pagina */