/*460*/
@media screen and (max-width: 460px) {
    /*CABECERA*/
    logo img { max-width: 120px!important; padding: 15px 0 0 15px;}
    headerright { font-size: 13px; }

    /*POPUP*/
    popup{width:95%;}


}

/*680*/
@media screen and (max-width:680px) {

    /*CABECERA*/
    contentbody header {max-width: 100%; min-width: 100%; padding: 0;}
    contentbody header nav {display: block;}
    contentbody logo{display: none;}
    contentbody hgroup > h3 {font-size: 1.3em;}
    contentbody hgroup > h4 {font-size: 0.8em;}
    contentbody header controllerdiv {display: flex; flex-direction: column-reverse; }
    contentbody header controllerdiv headcenter {width: 100%!important;     margin-top: 8px;}
    contentbody header controllerdiv headcenter name {display: block; font-size: 20px; color: #30689c;}
    contentbody header controllerdiv column {width: 100%;}
    contentbody header controllerdiv column row {display: none}
    contentbody header controllerdiv headcenter tittlehead{display: none!important;}
    contentbody header controllerdiv headcenter section {font-size: 12px; line-height: 10px;}
    contentbody header controllerdiv column row button{ height: 25px; padding: 4px 5px; font-size: 14px;}

    contentbody header controllerdiv column patient { text-align: left; padding-right: 10px; line-height: 15px; font-size: 13px; margin-top: -15px; padding-left: 10px;}

        /*Zona Privada*/
    contentbody.privado header controllerdiv column patient {max-width: 80%; text-align: right; margin-top: 0; transform: translate(20%);}

        /*MENUS*/
    nav{position: fixed; background: transparent!important; width: 100%; z-index: 10;top: 0; right: 0; border-radius: 0 10px 0 0; display: block}
    nav input[type=checkbox]:checked ~ ul#menu {list-style: none; max-height: 345px; overflow: hidden; margin: 0; padding-top: 40px;}
    nav label{display: block;}
    label.show-menu:active {background-color: #20568b78;}
    nav ul {position: static; display: block; background-color: #1f578c!important; box-shadow:1px 2px 9px #353535; margin-bottom: 0; max-height: 0; overflow: hidden;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-property: -webkit-all;
        -moz-transition-property: -moz-all;
        -o-transition-property: -o-all;
        transition-property: all;}
    nav .show-menu { display:block!important; background: #1f578c; text-align: right; padding: 10px 15px; position: fixed; left: 0; font-size: 14px; color: #e1e1e1}
    main nav ul li:last-of-type {display: block;}
    main nav ul li + a:first-of-type {border-top: none;}
    main nav ul li icon{ display: none!important}
    main nav ul li a{color: #b7cad4; font-size: .9em!important; border-bottom: 1px solid rgba(62, 108, 152, 0.58); box-shadow: none}
    main nav ul li a:hover{background-image: linear-gradient(#707070, #575757);text-shadow: none}
    article{width: 100%}


    /*LOGIN*/
    login h2 {font-size: 30px;}
    login h3 {font-size: 26px;}
    login, login input{width: 90%;}
    login input[type=checkbox]{width: auto!important;}
    .login column{max-width: 85%; min-width:0; padding: 45px 5% 30px 5%;}
    inputlabeled, label{ display: block; clear:both;}

    /*PAGINA DE ERROR*/
    .pagerror{padding-top: 20px}
    .pagerror row{display: block}
    .pagerror row icon{width: 200px; margin: 0 auto; display: block;text-align: center;}
    .pagerror row icon i{font-size: 200px!important}
    .pagerror row icon:after{left: 30px; top: 201px; width: 140px; border-radius: 50px / 1px;}
    .pagerror row icon:before{left: 10px; top: 200px; width: 177px; border-radius: 70px / 2px;}
    .pagerror column{padding: 0;}
    .pagerror strong{ font-size: 35px; margin-top: 20px; text-align: center  }
    .pagerror p{text-align: center; margin: 0;}

    /*FORMULARIOS*/
    form h3 i.fa.fa-chevron-left {left: 10px}
    input[type=checkbox] {transform: scale(2.5)!important;}
    inputlabeled input, inputlabeled textarea{width: 98%}
    layererror error {margin-top:8px;}
    error {    display: block; width: calc(100% + 4px);}

    .diaopcion day{font-size: 1em}
    .seleccionaDia > row{    flex: 0 0 100%;}

    /*POPUP*/
    popup{width:80%}

    /*SOLICITAR CITA*/
    contentbody article form step {width: 80%}
    contentbody article .grupo-horas labeltittle b{font-size: 16px!important}
    contentbody article .seleccionaDia line {flex-direction: column}
    .identificacion step a  { margin-bottom: 10px;}
}

/*860*/
@media screen and (max-width: 860px) {

    /*MENU*/
    main nav a  {font-size: 1em!important}
    main nav ul li icon{padding-right: 0}

    /*CABECERA*/
    header {max-width: 98%; min-width: 98%; padding: 0 1%;}
    headerright tittlehead {font-size: 2em; margin-top: 0;}
    header controllerdiv headcenter {width: 55%;}
    toptittle l, l {font-size: 14px;}

    /*FORMULARIOS*/
    .confirmacionCita column{flex: auto; font-size: 13px; margin-right: 0!important;  }
    .confirmacionCita column:first-of-type{border-right: 1px solid white!important}
    .confirmacionCita label {min-width: 33%!important; width: 33%; font-size: 13px;}

}

/*1024*/
@media screen and (max-width: 1024px) {

    /*POPUP*/
    popup{width:60%}

}