/*tablets vertical*/

    @media only screen and (max-width: 768px) {
    body{
        background-position: center top !important;
        background-attachment: scroll !important;
    }
    body.page-id-112 #main {
        margin: 0 auto;
        width: 90% !important;
    }
    #main {
        margin: 0 auto;
        width: auto !important;
    }
    #wrapper {
        margin-top: 0 !important;
    }
    #primary, #primary #content {
        width: 100%;
    }
    #primary #content .slogan{
        width: 250px !important;
        height: 250px !important;
        font-size: 0.7em;
        overflow: hidden;
    } 
    #primary #content .slogan img{
        width: 250px !important;
    }
    ul.custom-menu img{
        display: none !important;
    }
    #branding {
        position: relative !important;
    }
    #branding .top{
        height: auto !important;
        display: block;
        clear: both;
        overflow: hidden;
        text-align: left !important;
        padding-bottom: 10px;
    }
    nav#access {
        float: none !important;
        display: inline-block;
    }
    .top nav {
        float:right !important;
        display: inline-block;
    }
    a.video,.navidad{
    left: 38% !important;
    }
	.navidad{
    top:31px !important;
    }
    #menu-secundario li ul {
        display: none;
        position: absolute;
        top: 50px !important
    }
    #branding{
        position: relative !important;
        height: auto !important;
    }
    #access{
        margin:5px 0 0 !important;
        float: none !important;
        width: 100% !important;
        overflow: hidden !important;
        text-align: center !important;
    }
    #access ul, #access div{
        float: none !important;
    }
    #access li {
        float: none !important;
        margin-bottom: 5% !important;
        text-align: left !important;
    }
    .contenido-home {
        margin-top: 20px !important;
        padding: 50px 0 !important;
    }
    #primary .entry-content{
        width: 90% !important;
        margin: 0 auto;
    }
    .entry-description .mas-info{
        background-position:  right -175px  !important;
        height: auto !important;
    }
    .entry-description .mas-info .img_web{
        display: none !important;
    }
    .mas-info .texto-info{
        margin: 0 !important;
        width: 100% !important;
    }
    #primary .entry-description .mas-info h2, #primary .entry-description .mas-info p{
        margin-left: 0 !important;
    }
    .mas-info a{
        position: static !important;
        margin: 0 auto !important;
        float: none !important;
    }    
    .contenido-home article {
        width: 90% !important;
    }
    div.entry-description.tabs{
        width: 90% !important;
    }

       #jwts_tab ul.jwts_tabbernav li, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive {
        margin: 0 1% 40px 0 !important;
        width: 45% !important;
        height: auto !important;
        display: inline-block;
        vertical-align: top;
        margin: 0 5px 5px 0 !important;
        padding: 0 !important;
        background-color: #0D9010 !important;
        -moz-border-radius: 5px !important; 
        -ms-border-radius: 5px !important; 
        -webkit-border-radius: 5px !important; 
        border-radius: 5px !important; 
        transition: none !important; 
        -webkit-transition: none !important; 
        -o-transition: none !important; 
        -moz-transition: none !important; 
        vertical-align: top;
    }
    #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a{
        background-image: none !important;
        background-color: #000000 !important
    }
    #jwts_tab ul.jwts_tabbernav li a, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a {
        color: #FFFFFF;
        display: block;
        width: auto !important;
        height: auto !important;
        padding: 5px !important;
        text-align: left;
        vertical-align: middle;
    }
    #jwts_tab ul.jwts_tabbernav li:hover a#jwts_tabnav1, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav1,
    #jwts_tab ul.jwts_tabbernav li:hover a#jwts_tabnav2, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav2,
    #jwts_tab ul.jwts_tabbernav li:hover a#jwts_tabnav3, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav3  {
       background: none !important;
       background-color: #000000 !important;
       border:1px solid #000000 !important;
    }
   
    #colophon #supplementary {
        width: 95% !important;
        overflow: hidden !important;
    }

    footer #supplementary.three .widget-area{
        min-height: 100px !important;
        height: auto !important;
    }

     #supplementary.three #first, #supplementary.three #second, #supplementary.three #third, #supplementary.three #fourth{
        display: block !important;
        clear: both!important;
        overflow: hidden !important;
        width: 100% !important;
        border-bottom: 1px dotted #666666 !important;
        border-right: 0 !important;
        padding: 10px !important;
    }
     #supplementary.three #third form{
        margin-left: 0 !important;
    }
     
    #primary ul.menu_content, #primary .entry-content, .tabs .jwts_tabberliv{
        width: 90% !important;
        margin: 0 auto;
    }

    /****************************************************************
    POSICIONAMIENTO DE LOS CIRCULOS en el menú home
    *****************************************************************/
    .menu-home{
        position: relative;
        left: 0 !important;
        top: 0;
        width: 100% !important;
        margin-left: 0 !important;
    }
    h2#header_principal {
        font-size: 2em !important;
    }
    .custom-menu {
        margin: 15px auto !important;  
        height: 350px !important; 
        width: 350px !important;

    } 
    #primary ul.custom-menu li {
        /*display: inline-block !important;*/
    }
    .custom-menu li a{ 
        width: 150px !important;
        height: 150px !important;
    }
    /*circulos hover*/
    #primary .custom-menu li a:hover{
        background: white !important;
        border: 10px solid rgba(201,227,230,0.7);
        
        -moz-box-shadow: 0 0 10px #888;
        -webkit-box-shadow: 0 0 10px #888;
        box-shadow: 0 0 10px #888;

        transform: none !important;
        -webkit-transform: none !important;
        -o-transform:  none !important;
        -moz-transform:  none !important;
        -ms-transform: none !important;

        transition:  none !important;
        -webkit-transition:  none !important;
        -o-transition:  none !important;
        -moz-transition: none !important;
    }
    .custom-menu li a span{
        top: 23% !important;
        left: 13% !important;
        width: 110px !important;
        display: block !important;
        text-align: center !important;
        background-position: center top !important;
        overflow: hidden !important;

        background-repeat: no-repeat !important;
    }
    .custom-menu li.post-73 a span {
        top: 38% !important;
    }
    #primary .custom-menu li a h2{
        text-align: center !important;
    }
    .custom-menu li a span.flecha{
        display: none !important;
    }
    #primary .custom-menu li a h2, #primary .custom-menu li a p, #primary .custom-menu li a span.flecha{ }

    /*textos en hover*/
    #primary .custom-menu li a:hover h2, #primary .custom-menu li a:hover p, #primary .custom-menu li a:hover span.flecha{
        transition:  none !important;
        -webkit-transition:  none !important;
        -o-transition:  none !important;
        -moz-transition: none !important; 
        opacity: 1;
        z-index:3000;
        transform: none !important; 
        -webkit-transform:none !important; 
        -o-transform: none !important; 
        -moz-transform: none !important; 
        -ms-transform: none !important; 
    }
    #primary .custom-menu li a:hover h2, #primary .custom-menu li a:hover p, #primary .custom-menu li a:hover span.flecha{
        display: none !important;
    }
    /*icono hove*/
    .custom-menu li.post-74 a:hover span,.custom-menu li.post-96 a:hover span,.custom-menu li.post-73 a:hover span,.custom-menu li.post-75 a:hover span{
    opacity: 1 !important;

    }

    .custom-menu li.post-74 a span,.custom-menu li.post-96 a span,.custom-menu li.post-73 a span,.custom-menu li.post-75 a span{
    width: 71px;
    height: 81px;
    position :absolute;
    top: 30%;
    left: 37%;
    text-indent: -9000px;

    }
   footer .gform_footer input.button{
    float: left;
    }
}

/******************************************
Hasta smartphones de 480px
*******************************************/
  @media only screen and (max-width: 480px) {    
    body{
        background-position: center top !important;
        background-attachment: scroll !important;
        background-image: none !important;
        background-color: #BAD3F1 !important;
    }
    #main {
        margin: 0 auto;
        width: auto !important;
        max-width: 480px !important;
        overflow: hidden;
    }
    #wrapper {
        margin-top: 0 !important;
    }
    #primary, #primary #content {
        width: 100%;
        max-width: 480px;
        overflow: hidden;
    }
    #primary #content .slogan{
        width:250px !important;
        height: 250px !important;
        font-size: 0.7em;
    } 
    #primary #content .slogan img{
        max-width: 150px !important;
    }
    ul.custom-menu img{
        display: none !important;
    }
    #branding {
        position: relative !important;
    }
    #branding .top{
        height: auto !important;
        display: block;
        clear: both;
        overflow: hidden;
        text-align: center !important;
        padding-bottom: 10px;
    }
    #site-title, nav {
        display: inline-block;
    }
    nav {
       /*width: 100% !important;
       text-align: center;
       margin-top: 5px !important;*/
        clear: both;
        display: block;
        float: none !important;
        margin-top: 5px !important;
        text-align: center;
        width: 100% !important;
    }
    a.video,.navidad{
    left: 25% !important;
    position: absolute !important;
    top: 60px;
    font-size: 12px !important;
    width: 120px !important:;
    }
	.navidad{
    top: 56px !important;
    }
    .tlf-contacto {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    }
    ul#menu-secundario {
        float: none !important;
    }
    #menu-secundario li ul {
        display: none;
        position: absolute;
        top: 50px !important
    }
    #branding{
        position: relative !important;
        height: auto !important;
        width: 100%  !important;
    }
    #access ul {
        margin:0 1% !important;
    }
    #access a {
        padding-top: 0 !important;
        width:auto !important;
        font-size: 10px !important;
        background-size: 20px 20px;
        height: auto !important;
    }
    #access li {
        width: 45% !important;
        height: 25px;
        float: none !important;
        margin: 0 5px 5px 0!important;
    }
    #access li a{
        width: auto !important;
         height: 25px !important;
        padding: 5px 0 0 30px !important;
        margin:0 !important;
        text-align: left !important;
    }
    /* sistemas */
    #access li#menu-item-78 a,#access li#menu-item-78 a:hover, #access li#menu-item-78.current-menu-item a{
        background: url("images/ico1@2x.png") no-repeat left top !important;
        background-size: 25px 25px !important;
    }
    /* intraestructuras*/
    #access li#menu-item-98 a,#access li#menu-item-98 a:hover,#access li#menu-item-98.current-menu-item a{
       background: url("images/ico2@2x.png") no-repeat left top !important;
        background-size: 25px !important;
    }
    /* web*/
    #access li#menu-item-76 a, #access li#menu-item-76 a:hover,#access li#menu-item-76.current-menu-item a{
        background: url("images/ico3@2x.png") no-repeat left top !important;
        background-size: 25px !important;
    }
    /* internet */
    #access li#menu-item-77 a,#access li#menu-item-77 a:hover, #access li#menu-item-77.current-menu-item a{
        background: url("images/ico4@2x.png") no-repeat left top !important;
        background-size: 25px !important;
    }
    .entry-description .mas-info{
        background-position:  right -175px  !important;
        height: auto !important;
    }
    .entry-description .mas-info .img_web{
        display: none !important;
    }
    .mas-info .texto-info{
        margin: 0 !important;
        width: 100% !important;
    }
    #primary .entry-description .mas-info h2, #primary .entry-description .mas-info p{
        margin-left: 0 !important
    }
    .mas-info a{
        position: static !important;
        margin: 0 auto !important;
        float: none !important;
    }
    .mas-info img{
        clear: both;
        display: block;
        float: left;
        height: 25% !important;
        width: 25% !important;
        max-height: 25% !important;
        max-width: 25% !important;
    }

    /****************************************************************
    POSICIONAMIENTO DE LOS CIRCULOS en el menú home
    *****************************************************************/
    .menu-home{
        position: relative;
        left: 0 !important;
        top: 0;
        width:  98% !important;
        margin:0 auto !important;
    }
    .custom-menu {
        margin: 0 auto !important;
        height: 350px; 
        width: 100% !important;
        max-width: 290px !important;
        overflow: hidden!important;
        text-align: center !important;
    } 
    #primary ul.custom-menu li {
        display: block !important
    }
    .custom-menu li a{ 
        width: 135px !important;
        height: 135px !important;
        overflow: hidden !important;
        background:rgba(255,255,255,0.5);
        transition: all 0.1s ease-out;
    }
    /*circulos hover*/
    #primary .custom-menu li a:hover{
        background: white !important;
        border: 1px solid rgba(201,227,230,0.7);  
        -moz-box-shadow: 0 0 10px #888;
        -webkit-box-shadow: 0 0 10px #888;
        box-shadow: 0 0 10px #888;
        transform: none !important;
        -webkit-transform: none !important;
        -o-transform:  none !important;
        -moz-transform:  none !important;
        -ms-transform: none !important;
        transition:  none !important;
        -webkit-transition:  none !important;
        -o-transition:  none !important;
        -moz-transition: none !important;
        z-index:9000;
    }

    /* sistemas*/
    .custom-menu li.post-74 a{
        top:0 !important;
        left:0!important;
    }
    .custom-menu li.post-74 a:hover{
        top:0 !important;
        left:-10px;
    }
    /* infraestructura*/
    .custom-menu li.post-96 a{
        top:0px;
        left:140px !important;
    }
    .custom-menu li.post-96 a:hover{
        top:0px  !important;
        left:140px !important;
    }
    /* web*/
    .custom-menu li.post-73 a{
        top:162px !important;
        left:0px !important;
    }
    .custom-menu li.post-73 a:hover{
        top:162px !important;
        left:0px;
    }
    /* internet*/
    .custom-menu li.post-75 a{
        top:168px !important;
        left:140px !important;
    }
    .custom-menu li.post-75 a:hover{
        top:168px !important;
        left:140px !important;
    }
    .custom-menu li a span{
        top:26% !important;
        left:12% !important;
        width: 110px !important;
        display: block !important;
        text-align: center !important;
        background-position: center top !important;
    }
    .custom-menu li.post-74 a span{
       left: 13px !important;
        top: 25px !important;
        }
    .custom-menu li.post-96 a span{
       left:14px !important;
        top:24px !important;
    }
    .custom-menu li.post-73 a span{
       left:16px !important;
       top:46px !important;
    }
    .custom-menu li.post-75 a span{
       left: 16px !important;
       top:18px !important;
    }
/*
    .custom-menu li.post-74 a span{
        background: url("../images/ico_sistemas@2x.png");
        background-position:0 0;
        background-size: 51px 55px !important;
    }
    .custom-menu li.post-96 a span{
        background: url("../images/ico_infraestructuras@2x.png");
        background-position:0 0;
        background-size: 115px 87px;
    }
    .custom-menu li.post-73 a span{
        background: url("../images/ico_web@2x.png");
        background-position:0 0;
        background-size: 69px 56px;
    }
    .custom-menu li.post-75 a span{
        background: url("../images/ico_internet@2x.png");
        background-position:0 0;
        background-size: 108px 86px;
    }
    */

    #primary .custom-menu li a h2{
        text-align: center !important;
    }
    .custom-menu li a span.flecha{
        display: none !important;
    }
    #primary .custom-menu li a h2, #primary .custom-menu li a p, #primary .custom-menu li a span.flecha{

    }
    /*textos en hover*/
    #primary .custom-menu li a:hover h2, #primary .custom-menu li a:hover p, #primary .custom-menu li a:hover span.flecha{
        transition:  none !important;
        -webkit-transition:  none !important;
        -o-transition:  none !important;
        -moz-transition: none !important; 
        opacity: 1;
        z-index:3000;
        transform: none !important; 
        -webkit-transform:none !important; 
        -o-transform: none !important; 
        -moz-transform: none !important; 
        -ms-transform: none !important; 
    }
    #primary .custom-menu li a:hover h2, #primary .custom-menu li a:hover p, #primary .custom-menu li a:hover span.flecha{
        display: none !important;
    }
    /*icono hover*/
    .custom-menu li.post-74 a:hover span,.custom-menu li.post-96 a:hover span,.custom-menu li.post-73 a:hover span,.custom-menu li.post-75 a:hover span{
        transition: all 1s ease-out;  
        opacity: 1 !important;
        transition: 0 !important; 
    }


    /* slogan sin fondoblanco*/
    #primary #content .slogan {
        font-size: 1em;
        height: auto!important;
        width: 90% !important;
        padding:0 0 0 0 !important;
        background-color: transparent !important;
        color: #000000;
        border:0 !important;
        box-shadow: 0 !important;
        -moz-box-shadow: 0 0 0 !important;
        -webkit-box-shadow: 0 0 0 !important;
        box-shadow: 0 0 0 !important;
        margin-top: 10px;
         -moz-border-radius: 0 !important; 
        -ms-border-radius:  0 !important;
        -webkit-border-radius:  0 !important;
        border-radius:  0 !important;
    }
    .texto_slogan {
    font-size: 1.4em;
    padding: 10px 15px 19px !important;
    display: inline-block !important;
    background-image: url("images/arrow_down_smal@2x.png")!important;
    background-position:center bottom !important;
    background-size: 22px 12px !important;
    }

    #primary #content .slogan img{
        display: none !important;
    }
  
    div.entry-description.tabs {
        margin: 0 auto;
        width: 830px;
    }
    .tabs .jwts_tabberlive {
        margin-top: 0 !important;
    }
    ul.jwts_tabbernav li, ul.jwts_tabbernav li a, ul.jwts_tabbernav li a:link, ul.jwts_tabbernav li a:hover {
        background: transparent !important;
    }

    #jwts_tab ul.jwts_tabbernav li a, #jwts_tab ul.jwts_tabbernav li.jwts_tabberactive a {
        height: auto !important;
        background: transparent !important;
    }
     ul.jwts_tabbernav li a:hover,  ul.jwts_tabbernav li.jwts_tabberactive a:hover,
     ul.jwts_tabbernav li:hover a#jwts_tabnav1, ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav1,
    ul.jwts_tabbernav li:hover a#jwts_tabnav2, ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav2,
    ul.jwts_tabbernav li:hover a#jwts_tabnav3, ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav3,
     ul.jwts_tabbernav li:hover a#jwts_tabnav4, ul.jwts_tabbernav li.jwts_tabberactive a#jwts_tabnav4 {
        background: transparent !important;
        width: 100% !important;
        background-color:#000000 !important;
        background-image: none !important;
        color: #FFFFFF !important;
    }
    
    ul.menu_content li{
    width: auto !important;
    height: auto !important;
    display: inline-block;
    vertical-align: top;
    margin: 0 0.5% 0 0.5%;
    padding: 0;
    background-color: #0D9010;
    -moz-border-radius: 5px !important; 
    -ms-border-radius: 5px !important; 
    -webkit-border-radius: 5px !important; 
    border-radius: 5px !important; 
    transition: none !important; 
    -webkit-transition: none !important; 
    -o-transition: none !important; 
    -moz-transition: none !important; 
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    }
     ul.menu_content li a{
    width: auto !important;
    height: auto !important;
    display: block;
    color: #FFFFFF;
    text-align: center; 
    vertical-align: middle;
    padding:5px !important;
     }

    #colophon #supplementary {
        width: 95%;
    }
    #content form input, #wrapper .gform_wrapper .top_label input{
    width: 95% !important;
    }
    #content form input[type="submit"], #content form button[type="submit"], #wrapper .gform_wrapper .top_label input.button, #wrapper button.button {
        margin-right: 0 !important;
    }
    #content form input[type="checkbox"], #wrapper .gform_wrapper .top_label input[type="checkbox"]{
    width: 5% !important;
    }
    #wrapper .gform_wrapper .ginput_complex .ginput_left input, #wrapper .gform_wrapper .ginput_complex .ginput_right input {
    display: block !important;
    overflow: hidden;
    width: 90% !important;
    }

}

/*****************************************
Hasta smartphones de 320px
*******************************************/
  @media only screen and(max-width: 320px) {

     .custom-menu {
        width: 95% !important;
        height: 270px !important;
     }
     .custom-menu ul li{
        border: 1px solid black;
        float: left;
        width: 140px !important;
        height: 140px !important;
        overflow: hidden !important;
     }
  
    .custom-menu li.post-74 a,.custom-menu li.post-96 a,.custom-menu li.post-73 a,.custom-menu li.post-75 a{
    width: 130px !important;
    height: 130px !important;
    position:none !important;
    top: 0 !important;
    left: 0 !important;
    float: left !important;
    text-indent: -9000px;
    border: 1px solid #FFFFFF !important;

    }
    /*VERSION ACTUAL PUBLICADA*/
    /* infraestructura*/
    .custom-menu li.post-96 a{
        top: 0px !important;
        left: 140px !important;

    }
     .custom-menu li.post-73 a{
        top: 135px !important;
        left: 0 !important;
    }
     .custom-menu li.post-75 a{
        top: 135px !important;
        left: 140px !important;
    }
    
/*******************************************
NUEVA OPCIÓN
*******************************************/
    /* sistemas
    .custom-menu li.post-74 a{
        top:0 !important;
        left:10px !important;
    }
    .custom-menu li.post-74 a:hover{
        top:0 !important;
        left:-20px;
    }
    /* infraestructura
    .custom-menu li.post-96 a{
        top:0px;
        left:170px !important;
    }
    .custom-menu li.post-96 a:hover{
        top:0px  !important;
        left:170px !important;
    }
    /* web
    .custom-menu li.post-73 a{
        top:168px !important;
        left:10px !important;
    }
    .custom-menu li.post-73 a:hover{
        top:168px !important;
        left:10px;
    }
    /* internet
    .custom-menu li.post-75 a{
        top:168px !important;
        left:170px !important;
    }
    .custom-menu li.post-75 a:hover{
        top:168px !important;
        left:170px !important;
    }

/**************************************************/
 
    /* iconos*/

    .custom-menu li.post-74 a span{
        top: 15% !important;
        left: 8% !important;
  
    }
    .custom-menu li.post-96 a span{
         top: 15% !important;
        left: 8% !important;
    }
    .custom-menu li.post-73 a span{
         top: 35% !important;
        left: 8% !important;
    }
    .custom-menu li.post-75 a span{
         top: 15% !important;
        left: 8% !important;
    }
  
    .menu-home{
        width: 100% !important;
    }
    .contenido-home {
        margin-top: 0 !important;
    }
    .tlf-contacto {
        position: absolute;
        right: 0;
        top: 0;
    }
    #site-title{
        position: absolute;
        left: 0;
        top: 0;
    }
   .top nav {
        float: none;
        display: block;
        clear: both;
        overflow: hidden;
        height: 30px;
        margin-top: 30px;
        padding-left: 10px
    }


}