/* Created by Artisteer v4.0.0.58475 */

.responsive body
{
   min-width: 240px;
}
  
.responsive .art-content-layout img,
.responsive .art-content-layout video
{
   max-width: 100%;
   height: auto !important;
}

.responsive.responsive-phone .art-content-layout img 
{
   float: none !important;
}
    
.responsive .art-content-layout .art-sidebar0, 
.responsive .art-content-layout .art-sidebar1, 
.responsive .art-content-layout .art-sidebar2 
{
   width: auto !important;
}
    
.responsive .art-content-layout, 
.responsive .art-content-layout-row, 
.responsive .art-layout-cell 
{
   display: block;
}
  
.responsive .art-slidenavigator 
{
   display: none !important;
}
    
.responsive .art-collage 
{
   display: none !important;
}
    
.responsive .image-caption-wrapper 
{
   width: auto !important;
}
  
.responsive .art-textblock 
{
   display: none;
}

.responsive.responsive-tablet .art-vmenublock,
.responsive.responsive-tablet .art-block
{
   margin-left: 1%;
   margin-right: 1%;
   width: 48%;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.responsive .art-responsive-embed 
{
   position: relative;
   padding-bottom: 56.25%;
   /* 16:9 */
	height: 0;
}

.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.responsive .art-sheet
{
   width: auto !important;
   min-width: 240px !important;
   max-width: none;
   margin-right: 1% !important;
   margin-left: 1% !important;
}

#art-resp {
   display: none;
}
  
@media all and (max-width: 1480px){
.art-vmenu>li{
   margin-top: 30px !important; 
}

}

@media all and (max-width: 1370px){

.art-vmenu>li{
   margin-top: 30px !important; 
}
.art-header{
   height:120px; 
}
}
@media all and (max-width: 1280px){
  .content-centro{
    width: 30%;
    height: 75%;
    margin-top: 10px !important;
    margin-left: 20px !important;
  }

}

@media all and (max-width: 1024px){
  .datos{
      margin-left: 80% !important;
    }
    .art-menu>li{
      margin-top: 20px !important;
    }
ul.art-vmenu li li a{
      width: 100% !important;

    }
    ul.art-vmenu a{
      font-size: 15px !important;
    }
    .login-res{

      margin-left: -149.7px;
    }

    .login-res ul{
      padding-left: 15px !important;
    }
    div.sub-menu2{
      width: 700px !important;
      margin-left:5.5% !important;
    }
    div.sub-menu2 .triangulo{
      left: 10% !important;
    }
    .art-vmenu ul{
      width: 100% !important;
      margin-left: 0px !important;
    }
    .content-dinamic .triangulo{
      left: 27.5%
    }
    .mapa{
      height: 540px !important;
    }
    .content-btnl{
      top:15px !important;
      margin-top: 15px !important;
      float: right !important;
    }
   .content-contactos .content-matriz{
   width: 26% !important;
   background-size: 8% !important;
   margin-left: 15px !important
  }
  .pre img{
   width: 28%;
  }

  .letras{
    margin-top:-37px; 
    margin-left: 44.5%;
  }
  .content-centro{
    width: 20%;
    display: none;
  }

   #close-cliente{
    left: 92%;
    top: 4%;
   }

  #user{
    margin-left: 13%;
  }
  /********contactanos**************/
  .content-contactos{
position: relative !important;
width: 95%;
 padding-left: 0%;
 
}
.content-contactos .content-matriz{
    position: relative !important;
  float: left;
  margin-top: 20px;
}
.content-matriz em{
  font-size: 9.5px;
}
  #veracruz p,#tabasco p{
      text-align:inherit !important;
     }
     #tabasco>h2{
        margin-left:0px !important;
     }
      #veracruz>h2{
        margin-left:0px !important;
      }

  #veracruz{
    position: inherit;
    left:inherit;
    top:inherit;
  }
  #df{
    left:inherit;
    top:inherit;
     position: inherit;
  }
  #oaxaca{
    left:inherit;
    top:inherit;
     position: inherit;
  }
  #tabasco{
    
    left:inherit;
    top: inherit;
    position: inherit;
  }
  #puebla{

     left:inherit;
     top:inherit;
     position: inherit;
}
#merida{
  
  left:inherit;
  top:inherit;
  position: inherit;
  width: 15%;
}
#veracruz .m-e,#tabasco .m-e{
  margin-left:0px;
}
.content-dinamic .content-cobertura {
  width: 100%;
  height: 80%;
  margin-top: 10px;
  float: none;
  text-align: center;
}
.content-dinamic .content-cobertura img{
  margin:  0 auto;
  width: 70%;
  height: 100%;
}
.content-estados{
  float: none;
  width: 90%;
  height: auto;
  margin-left: 5%;
}
.content-estados ul{
  width: 100%;
  height:auto;
}
  .content-estados ul li{
    width: auto;
     display: inline-block !important;
  }
  .content-estados ul li:hover{
    width: auto;
    font-size: 15px;
  }
}
@media all and (max-width: 860px){
.social{
  
  width: 60%;
  float:right  !important;
}
#content-user{
  width: 50%;
}
.art-vmenu>li{
   margin-top: 30px !important; 
}
.art-vmenu>li>a{
     font-size:15px !important;
    }
    .art-vmenu ul{
      width: 100% !important;
      margin-left: 0px !important;
    }
    ul.art-vmenu li li{
      width: 100% !important;

    }


.social .link img#l1{
   width: 30px !important;
   height: 30px !important;
}
.social .link img#l2{
   width: 40px !important;
   height:40px !important;
   
}
.social .link img#l3{
   width: 40px !important;
   height: 42px !important;
   
}
.social .link img#l4{
   width: 35px !important;
   height: 30px !important;
   
   
}
#user{

  margin-left: 16%;
}
.letras{
  font-size: 13px;
  margin-top:-34px; 
  
}
.top-a{
  top:38% !important;
}
.top-b{
  top: 43.5% !important;
}
.top-c{
top:49.3% !important;
}
.top-d{
   top:55.3% !important;
}
.top-e{
 top:62% !important; 
}
.top-f{
  top:68% !important;
}
.top-g{
  top:74% !important;
}
.top-cliente{
  top:49% !important;
}
.top-contacto{
  top:73% !important;
}
.content-contactos{
  width: 95%;
}
.content-info{
  font-size: 1.2em;
}
.content-centro{
  width: 63%;
  margin-left: 30px !important;
}
.content-clientes{
  margin-left: 5%;
}
/*********contactanos ******************/
 .content-matriz em{
  display: none;
 }

}


@media all and (max-width: 768px)
{
 
  .content-matriz em{
     display:block;
   }

    #art-resp, #art-resp-t { display: block; }
    #art-resp-m { display: none; }
    ul.art-vmenu ul a.active:hover, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active{
      transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    }
    .contacto{
      float: right !important;
      width: 60% !important;
    }
   #content-user{
     width: 90%;
     margin: 0 !important;
   }
   .error-login{
    position: absolute !important;
    margin-left: -50%;
    font-size: 10px;
    width: 100px;
    height: 32px;
   }
   .triangulo-usuario{
    display: none;
   }
    .art-header-bg{
      height: 64px !important;
    }
    .art-header{
      height: 110px !important;
    }
    .login-res{

      margin-left: -156px !important;
    }
    .camera_wrap .cameraSlide img{
      height: 100% !important;
    }
     .art-shapes{
      margin-top: -10px !important
     }
    .sub-menu>.triangulo{
      display: none !important;
    }
    .sub-menu2>.triangulo{
      display: none !important;
    }
    .content-dinamic{
      height: auto !important;
    }
    .content-dinamic .triangulo{
      display: none !important;
    }
    .mapa{
      height: 540px !important;
    }
   .static{
    height: 400px !important;
   }
    .content-dinamic{
      margin-left: 1% !important;
    }
    .content-dinamic .content-cobertura img{
      width: 100%;

      margin: 0;
      transition:none !important;
      -webkit-transition:none !important;
      -o-transition:none !important;
      -moz-transition:none !important;
    }
    .content-dinamic .content-cobertura img:hover{
      width: none !important;
    }

    .datos{
      margin-left:45px  !important;
     margin-top: 0px !important;
    }
    .datos .triangulo{
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 25px solid rgba(232,233,228,1);
      position: absolute;
      margin-top: -73px;
      left: 30%;
    }
    .nex{
      left: 90%;
      top: 50%;
    }
    .art-vmenublock{
     width: 100% !important;
    }
    .art-sidebar1{
      margin-left: -10px !important;
    }
    ul.art-vmenu{
      background-color: transparent !important;
    }
     .art-vmenu>li{
      margin-top: 5px !important;
      -webkit-border-radius:6px;
      -o-border-radius:6px;
      background:rgba(173, 168, 168, 0.53) !important;
      
    }
    ul.art-vmenu li li{
      background-color: transparent !important;
      
    
    }
    .art-vmenu>li>a{ text-align: center !important;}
    .msj{
      width: 100% !important;
    }
    .msj img{
     margin-left: 13%;
    }
    .art-vmenu>li>a{
     font-size:15px !important;
    }
    ul.art-vmenu>li>a:hover{
      transform:none !important;
   -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    }
    .art-vmenublockcontent{

      margin-top: 0px !important;
    }
    .art-header .art-shapes{
        display: block;
        top: 10px !important;
        
    }

    .art-shapes .content-logo{
      width: 40% !important;
    }
    .art-shapes img{
      width: 100% !important;
      display: block;
    }
    .responsive .art-header #art-flash-area, .responsive .art-header .art-shapes>*{
      display: block !important;
    }
  .social{
   width: 100% !important;
   float: left !important;
   margin: 0 auto !important;
  }

.social .link img#l1{
   width: 40px !important;
   height: 40px !important;
}
.social .link img#l2{
   width: 50px !important;
   height: 50px !important;
   
}
.social .link img#l3{
   width: 50px !important;
   height: 52px !important;
   
}
.social .link img#l4{
   width: 45px !important;
   height: 35px !important; 
}
.pre{
  height: 100% !important;
}
.pre img{
  width: 31% !important;
  margin-top: 50% !important;
}
.letras{
  font-size: 14px;
  margin-left: 44%;
  margin-top: -33px;
}
ul.art-vmenu ul{
  position: relative;
  z-index: none;
  margin: 0 auto !important;
}
ul.art-vmenu li li{
  width: 50% !important;
  margin: 0 auto
}

#user{ margin-left: 16% !important; }
#pass{ background-size:8%;  }
#user,#pass{ width: 55%; text-align: left; }
div.sub-menu2,.datos{
  width: 80% !important;
}
div.sub-menu2 .triangulo{
       left: 30% !important; 
     }
/*.login{display: none !important; }*/
.content-btnl{
  float: left !important;
  margin-top: 0px !important;
}

 .responsive .art-content-layout .lala img{
      height: 400px !important;
    }
    .clien{
      height: 400px !important;
    }
    .lala{
      height: 400px !important;
    }
   
.content-clientes{
  margin-left: 10%;
}
.content-cliente{
  margin-top: 10px;
}
.content-centro{
  width: 50%;
  height: 100%;
}
    .slider{
    width: 100% !important;
    margin-left: 0% !important;
    }
    .responsive .art-content-layout .cubo div img{
      height: 100% !important;
    }
    #close-cliente{
     top: 35%;
     left: 90%;
    }
    .content-blok{
      padding-top: 10%;
    }
    .content-formulario{
      width: 80%;
      height: 50%;
    }
    .content-formulario input[type='text']{
      width: 45%;
    }

}
@media all and (max-width:600px){
   .mapa{
      height: auto !important;
    }
    .label-valida{
      margin-right: 35%;
      margin-top: 3%;
    }
  .content-btnl{
      top:15px !important;
    }
    .content-btnl a{
      width:50% !important;
      padding: 3px !important; 
    }
    .content-contactos .content-matriz{
     width: 40% !important;
     margin-left: 30px;
     background-size: 8% !important;
  }
  .content-matriz h2{
    margin-left: 10px !important;
  }
  .static{
    height: 550px !important;
  }
  .pre img{
  width: 34% !important;
  margin-top: 50% !important;
}
.letras{
  font-size: 12px !important;
  margin-left: 43%;
  margin-top: -20px;
}


.clien{
  height: auto !important;
}
.lala{
  height: auto !important; 
  
}

.content-centro{
  display: none !important;
}
.content-clientes{
  float: none;
  width: 95%;
  height: auto;
  margin-left: 0 !important;
}
.content-cliente{
  position: relative;
  display: inline-block;
  top: 0 !important;
  left: 0px !important;
}
#close-cliente{
  left: 87%;
  top: 36%;
}
.content-formulario{
  background-size:6%;   
  height: 60%;
}
.content-formulario input[type="text"]{
  width: 70%;
}
.content-formulario textarea{
  min-width: 70%;
  max-width: 70%;
}
.lema{
  width: 75%;
}
.content-estados ul li{
  font-size: 12px;
}
.content-estados ul li:hover{
  font-size: 12px;
}

.contacto{
  float: none !important;
  width: 100% !important;
}
.contacto img{
  width: 90%;
  height:60px;
  margin-left: 10%;
}
.contacto p
{
  margin-left: 1% !important;
}
}
@media all and (max-width: 480px)
{   
  .content-estados ul li{
  font-size: 10px;
}
.content-estados ul li:hover{
  font-size: 10px;
}

    #art-resp, #art-resp-m { display: block; }
    #art-resp-t { display: none; }
    .art-vmenu>li>a{
     font-size: 15px !important;
    }
    .art-responsive-embed{
  height: 30px !important;
}
    .art-shapes .content-logo {
      width: 41% !important;
    }
    .pre img{
  width: 15% !important;
  margin-top: 50% !important;
}
    div.sub-menu2{
      width: 90% !important;
      margin-left:5.5% !important;
    }

    div.sub-menu2 img{
      width: 80px !important;
      height: 35px !important;

    }
    .nex{
      left: 89%;
      top: 55%;
    }
    .videoframe{
      
      height: 270px !important;
    }
    
    #slider{
     height: 250px !important;
     background-size: 50% 50% !important;
    }
    ul.art-vmenu ul{
      width: 100% !important;

    }
    ul.art-vmenu li li{
      width: 90% !important;
    }
    
    .art-vmenublock{
      margin-left: 0px !important;

    }
    
    .art-shapes img{
      width: 100% !important;
      margin: 0px !important;
      display: block;
    }

    .art-header{
       min-height: 40px !important;
       height: 45px !important;
    }
     .art-shapes{
      height: 60px !important;
      margin-top: -7px;
     }
    .camera_wrap{
      height: 325px !important;
    }
    .camera_wrap .cameraSlide img{
      height: 325px !important;
    }
    .content-btnl{
      top:0px !important;

    }
    .content-btnl a{
      width:50% !important;
      padding: 3px !important; 
    }
    .content-dinamic{
      border-radius: 5px !important;
    }
    .content-info{
      font-size: 0.9em;
      width: 80% !important;
    }
    .content-servicio>h1{
      font-size: 1.2em;
    }
    .content-contactos .content-matriz{
      display:block;
      width: 100% !important;
      padding:2% !important;
      margin-left: 25px !important;
      margin-top: 20px !important;
      background-size: 6% !important;
      height:130px !important;
    }
    .static{
      height: 1050px !important;
    }
  .content-matriz>h2{
      font-size:1em !important;
      margin-left: 17px;
      width: 80%;
    }
    .clien{
      height: auto !important;
    }
    .responsive .art-content-layout .lala{
      height: 250px !important;
    }
    .responsive .art-content-layout .lala img{
      height:250px !important;
      border-radius: 5px;
    }
    
    
    .content-clientes{
      width: 100%;
    }
    .content-e{
      width: 98%;
    }
    .content-centro{
      display: none;
    }
    .contacto img{
  width: 25%;
  height:60px;
  margin-left: 35%;
}

.contacto 
{
  width: 100% !important;
}

.contacto p
{
  width: 100% !important;
}
    .content-cliente{
      width: 90px;
      position: relative;
      left: 0 !important;
      top: 0 !important;
      display: inline-block;
    }
      .content-matriz em{
 font-size: 11px;
 }
 #contenedor{
  width: 100%;
 }
 .lema{width: 100%;background-size: 100%;}
    /**************Animacion cubo**************/
 
#contenedor{
    width: 220px;
    height: 220px;
    margin: 0 auto !important;
    -webkit-perspective:1000px;
}
.cubo div {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 2px solid #ccc;
    background: #fff;
}

.responsive .art-content-layout .cubo div  img{
  width: 210px !important;
  height: 210px !important;
  margin: 0 auto !important;
  float: none !important;
}

.cubo .cara1 {
 -webkit-transform: translateZ(110px);                                
 -moz-transform: translateZ(110px); 
 -o-transform: translateZ(110px); 
 -ms-transform: translateZ(110px); 
 transform: translateZ(110px); 
}
.cubo .cara2 {
 -webkit-transform: rotateY(90deg)  translateZ(110px);               
 -moz-transform: rotateY(90deg)  translateZ(110px);               
 -o-transform: rotateY(90deg)  translateZ(110px);               
 -ms-transform: rotateY(90deg)  translateZ(110px);
  transform: rotateY(90deg)  translateZ(110px);                              
}
.cubo .cara3 { 
  -webkit-transform: rotateY(90deg)  rotateX(90deg) translateZ(110px);   
  -moz-transform: rotateY(90deg)  rotateX(90deg) translateZ(110px);  
  -o-transform: rotateY(90deg)  rotateX(90deg) translateZ(110px);  
  -ms-transform: rotateY(90deg)  rotateX(90deg) translateZ(110px);  
  transform: rotateY(90deg)  rotateX(90deg) translateZ(110px);  
}
.cubo .cara4 {
 -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px);  
 -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); 
 -o-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); 
 -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); 
 transform: rotateY(180deg) rotateZ(90deg) translateZ(110px); 
}
.cubo .cara5 {
 -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px);  
 -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); 
 -o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); 
 -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); 
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(110px); 
}
.cubo .cara6 { 
  -webkit-transform: rotateX(-90deg) translateZ(110px);                
  -moz-transform: rotateX(-90deg) translateZ(110px);  
  -o-transform: rotateX(-90deg) translateZ(110px);  
  -ms-transform: rotateX(-90deg) translateZ(110px);  
  transform: rotateX(-90deg) translateZ(110px);  
}
/*@-webkit-keyframes rotacubo {
    0% {   
    -webkit-transform: rotateX(0deg);          
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    }    
    100% {       
    -webkit-transform: rotateX(360deg);      
    -o-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    transform: rotateX(360deg);
    }
  }
 */

@-webkit-keyframes rotacubo {
   0% {   
   -webkit-transform: translateZ(0) rotateX(0) rotateY(0);          
   
   }
   50% {   
   -webkit-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -webkit-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
}
@-moz-keyframes rotacubo {
   0% {   
   -moz-transform: translateZ(0) rotateX(0) rotateY(0);          
   
   }
   50% {   
   -moz-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -moz-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
}
@-o-keyframes rotacubo {
   0% {   
   -o-transform: translateZ(0) rotateX(0) rotateY(0);          
   
   }
   50% {   
   -o-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -o-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
}
@-ms-keyframes rotacubo {
   0% {   
   -ms-transform: translateZ(0) rotateX(0) rotateY(0);          
   
   }
   50% {   
   -ms-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -ms-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
}

@keyframes rotacubo {
   0% {   
   transform: translateZ(0) rotateX(0) rotateY(0);          
   
   }
   50% {   
   transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
}


 
 .animacubo {
   -webkit-animation-name: rotacubo;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 40s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 110px 110px 0;
   -moz-animation-name: rotacubo;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;
   -moz-animation-duration: 40s;
   -moz-transform-style: preserve-3d;
   -moz-transform-origin: 110px 110px 0;
   -o-animation-name: rotacubo;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;
   -o-animation-duration: 40s;
   -o-transform-style: preserve-3d;
   -o-transform-origin: 110px 110px 0;
   -ms-animation-name: rotacubo;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;
   -ms-animation-duration: 40s;
   -ms-transform-style: preserve-3d;
   transform-origin: 110px 110px 0;
   animation-name: rotacubo;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: 40s;
   transform-style: preserve-3d;
   transform-origin: 110px 110px 0;
 }
 .pre img{
  width: 54% !important; 
 
}
.letras{

  font-size: 8.3px !important;
  margin-top: -24px; 
  margin-left:39%;
}
 #close-cliente{
  width: 25px; 
  height: 25px;
    left: 87%;
    top: 45%;
   }
#close-cliente:hover{
  width: 20px;
}
.cotent-blok{
  padding-top: 20%  !important;
}

.content-formulario{
  height: 75%;
  font-size: 12px;
  background-size: 7%;
}
.content-formulario input[type="text"]{
  width: 85% !important;
}
.content-formulario textarea{
  max-height: 37%;
  width: 85%;
  min-width: 85%
}

}
@media all and(max-width: 320px){
  .label-valida{
    margin-right: 0%;
    margin-top: 4%;
    font-size: 10px;
  }
.content-formulario{
  height: 80%;
}
  .nex{
      left: 80% !important;
      top: 55% !important;
      width: 15px !important;
      height: 15px !important;
    }
  
}

.responsive .art-header 
{
   width: auto;
   height: auto;
   min-height: 100px;
   background-position: center center !important;
   background-size: cover !important;
   background-repeat: repeat !important;
}

.responsive .art-header .art-headline, 
.responsive .art-header .art-slogan 
{
   display: block !important;
   top: 0 !important;
   left: 0 !important;
   margin: 2% !important;
}
    
.responsive .art-header .art-headline a, 
.responsive .art-header .art-slogan 
{
   white-space: normal !important;
}
    
.responsive .art-header .art-shapes .art-textblock 
{
   padding: 2% !important;
   margin: 2% !important;
   line-height: normal;
   background-image: none;
   background-color: rgba(127, 127, 127, 0.7);
   color: #eee !important;
   display: none;
   top: auto;
   left: auto;
   width: auto;
   height: auto;
}

.responsive .art-header .art-shapes .art-textblock *,
.responsive .art-header .art-shapes .art-textblock a:hover,
.responsive .art-header .art-shapes .art-textblock a:visited,
.responsive .art-header .art-shapes .art-textblock a:link 
{
   color: #eee !important;
}
    
.responsive .art-header .art-shapes .art-textblock>div 
{
   display: none;
   top: auto;
   left: auto;
   width: auto;
   height: auto;
   padding: 0 !important;
}

.responsive .art-header .art-shapes,
.responsive .art-header .art-shapes *
{
   position: relative;
   text-align: center;
   -webkit-transform: none !important;
   -moz-transform: none !important;
   -o-transform: none !important;
   -ms-transform: none !important;
   transform: none !important;
}

.responsive .art-header #art-flash-area,
.responsive .art-header .art-shapes>*
{
   display: none;
}

.responsive #art-header-bg 
{
   background-position: center center !important;
   background-size: cover !important;
   background-repeat: repeat !important;
}

/* Search */
.responsive .art-shapes~.art-textblock
{
   position: relative !important;
   display: block !important;
   margin: 1% auto !important;
   width: 75% !important;
   top: auto !important;
   right: auto !important;
   bottom: auto !important;
   left: auto !important;
}

/* dynamic width nav */
.responsive nav.art-nav,
.responsive .art-nav-inner
{
   width: auto !important;
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   bottom: auto !important;
   margin-top: 0;
   margin-bottom: 0;
}

.responsive .responsive-nav 
{
   padding-left: 0;
   padding-right: 0;
   padding-top: 1px;
   padding-bottom: 1px;
   margin-top: 20px;
}
 
/* full width hmenu, instead of inline-block */
.responsive .responsive-nav ul.art-hmenu 
{
   display: block;
   float: none;
   text-align: center;
}

/* elements on different lines */
.responsive .responsive-nav ul.art-hmenu li
{
   float: none;
}
  
/* horizontal margins */
.responsive .responsive-nav ul.art-hmenu>li:first-child, 
.responsive .responsive-nav ul.art-hmenu>li:last-child, 
.responsive .responsive-nav ul.art-hmenu>li
{
   margin-left: 0;
   margin-right: 0;
}
 
/* separator */ 
.responsive .responsive-nav ul.art-hmenu>li:before
{
   display: none;
}

/* vertical distance between items */
.responsive .responsive-nav ul.art-hmenu a
{
   margin-top: 1px !important;
   margin-bottom: 1px !important;
   text-align: center;
   height: auto;
   white-space: normal;
}

.responsive .responsive-nav ul.art-hmenu>li:first-child>a
{
   margin-top: 0 !important;
}

.responsive .responsive-nav ul.art-hmenu>li:last-child>a
{
   margin-bottom: 0 !important;
}

/* fixes for extended menu */
.responsive .responsive-nav .ext, 
.responsive .responsive-nav ul.art-hmenu>li>ul, 
.responsive .responsive-nav ul.art-hmenu>li>ul>li
{
   width: auto !important;
}

/* submenu position on hover */
.responsive .responsive-nav ul.art-hmenu ul
{
   left: auto !important;
   right: auto !important;
   top: auto !important;
   bottom: auto !important;
   display: none !important;
   position: relative !important;
   visibility: visible !important;
}

.responsive .responsive-nav ul.art-hmenu>li>a
{
   border-bottom: 1px solid transparent;
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
}

.responsive .responsive-nav .art-hmenu>li>a
{
   border-radius: 3px;
}

.responsive .responsive-nav ul.art-hmenu>li>a.active
{
   border-bottom: 1px solid #A3B4C8;
}

.responsive .responsive-nav ul.art-hmenu>li>a:hover
{
   border-bottom: 1px solid transparent;
}

.responsive .responsive-nav ul.art-hmenu>li>ul>li:first-child:after 
{
   display: none;
}
.responsive .responsive-nav ul.art-hmenu ul a
{
   padding-left: 4% !important;
}
.responsive .responsive-nav ul.art-hmenu ul ul a
{
   padding-left: 6% !important;
}
.responsive .responsive-nav ul.art-hmenu ul ul ul a
{
   padding-left: 8% !important;
}
.responsive .responsive-nav ul.art-hmenu ul ul ul ul a
{
   padding-left: 10% !important;
}
.responsive .responsive-nav ul.art-hmenu ul ul ul ul ul a
{
   padding-left: 12% !important;
}
  
.responsive .responsive-nav ul.art-hmenu>li>ul
{
   padding: 5px;
}
  
.responsive .responsive-nav ul.art-hmenu>li>ul:before
{
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

.responsive .art-content-layout, 
.responsive .art-content-layout-row, 
.responsive .art-layout-cell 
{
   display: block;
}

.responsive .art-layout-cell 
{
   width: auto !important;
   height: auto !important;
   border-right-width: 0 !important;
   border-left-width: 0 !important;
   border-radius: 0 !important;
}

.responsive .art-content-layout:after, 
.responsive .art-content-layout-row:after, 
.responsive .art-layout-cell:after 
{
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.responsive .art-post
{
   border-radius: 0;
}

.responsive .art-footer
{
   margin-top: 1%;
}

.responsive .responsive-tablet-layout-cell 
{
   width: 50% !important;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}