.multiselect label {
          display:block;
      }
       
      .multiselect-on {
          color:#ffffff;
          background-color:#000099;
      }
      .seleccionado{
        border-color: #6ABC45 !important;
      }
      @font-face {
        font-family: 'sofia_prolight';
        src: url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.eot');
        src: url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.woff2') format('woff2'),
             url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.woff') format('woff'),
             url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.ttf') format('truetype'),
             url('http://tg.uca.edu.sv/public/fonts/SofiaProLight-webfont.svg#sofia_prolight') format('svg');
        font-weight: normal;
        font-style: normal;

      }
      #cssmenu{
        background: #6ABC45;
      }
      .tool-bar {
          max-width: 900px;
          width: 100%;
          margin: 0px auto;
          padding: 10px 0px;
          background: black;
          color: white;
          text-decoration: none;
      }
      .tool-bar > a{
        text-decoration:none;
        color: white;
      }
      input:required {
          box-shadow: 0px 0px 5px 1px #003366 !important;
      }

      .error{
        color: red;
      }
      .form-group2{
        display: flex;
        flex-direction: column !important;
      }
      .form-group2 select{
        -webkit-appearance: menulist !important;
        -moz-appearance: menulist !important;
        appearance: menulist !important;
        background-color: transparent !important;
        margin: initial !important;
        min-height: initial !important;
        max-height: initial !important;
        height: initial !important;
      }
      .form-group2 select[multiple='true']{
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        overflow: auto !important;
      }
      .form-group2 option{
        margin: initial !important;
        min-height: initial !important;
        max-height: initial !important;
        height: initial !important;
        width: initial !important;
        display: block  !important;
      }
      .delete{
        display: inline-block;
        margin: 10px;
      }

      .delete-btn{
        position: relative;
        top: -36px;
        margin-right: -60px;
        padding-left: 10px;
        margin-left: -4px;
        margin-top: 10px;
      }
      .btn {
      	-moz-box-shadow: 0px 10px 14px -7px #276873;
      	-webkit-box-shadow: 0px 10px 14px -7px #276873;
      	box-shadow: 0px 10px 14px -7px #276873;
      	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
      	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
      	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
      	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
      	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
      	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
      	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
      	background-color:#599bb3;
      	-moz-border-radius:8px;
      	-webkit-border-radius:8px;
      	border-radius:8px;
      	display:inline-block;
      	cursor:pointer;
      	color:#ffffff;

      	font-size:20px;
      	font-weight:bold;
      	padding:10px 24px;
      	text-decoration:none;
      	text-shadow:0px 1px 27px #3d768a;
      }
      .btn:hover {
      	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
      	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
      	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
      	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
      	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
      	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
      	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
      	background-color:#408c99;
      }
      .btn:active {
      	position:relative;
      	top:1px;
      }
      #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{
  background:#042641!important;
  -webkit-transition:background .3s ease;
  -ms-transition:background .3s ease;
  transition:background .3s ease;
}
@media screen and (max-width:700px){
 #cssmenu ul ul li{
    background:#6ABC45!important;
  }
}
#cssmenu ul ul li{
  height:0;
  -webkit-transition:all .25s ease;
  -ms-transition:all .25s ease;
  background:#042641;
  transition:all .25s ease;
  z-index: 10000 ;
}
@media screen and (max-width: 700px)
#cssmenu .submenu-button.submenu-opened {
    background: #042641 !important;
}
@media screen and (max-width: 700px)
#cssmenu .submenu-button {
    position: absolute;
    z-index: 9999999999;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid #042641 !important;
    height: 46px;
    width: 46px;
    cursor: pointer;
}
    .edit-btn {
      position: relative;
      top: -36px;
      left: 69px;
      z-index: 5;
    }

      .informacion {
          /*min-width: 900px;*/
          max-width: 900px;
          width: 100%;
          height: 450px;
          max-height: 450px;
          background-repeat: no-repeat;
          background-position-x: right;
          padding-right: 200px;
          overflow: hidden;
      }
      .sliderq{
        height: 350px;
        min-height: 350px;
        max-height: 350px;
        position: relative;
      }

      header, #head-mobile{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2989d8+50,207cca+51,7db9e8+100;%23003366 */
        background: #6ABC45;/* Old browsers */
        background: -moz-linear-gradient(top, #6ABC45 16%, #6ABC45> 19%, #6ABC45 85%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #6ABC45 16%,#6ABC45 19%,#6ABC45 85%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #6ABC45 16%, #6ABC45 19%,#6ABC45 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#. 6ABC45.', endColorstr='#. 6ABC45.',GradientType=0 ); /* IE6-9 */
      }

      .action-img-slider {
        border: 2px solid #00CBCB;
        margin-top: 10px;
        padding: 10px;
        background-color: rgba(0,0,0,0.2);
        border-radius: 10px;
        max-width: 200px;
        text-align: center;
        min-height: 200px;
        overflow: hidden;
        display: inline-block;
        min-width: 200px;
        max-height: 200px;
        margin-left: 3px;
      }
      .action-img-slider img{
        max-width: 150px;
        max-height: 100px;
        min-width: 150px;
        min-height: 100px;
      }
      .contenido {
        position: absolute;
        top: 90px;
        max-width: 432px;
        max-height: 360px;
        overflow-y: auto;
        /* padding: 10px; */
        /* text-align: justify; */
      }
        *{
          margin:0;
          padding:0;
          text-decoration:none;
          font-family: sofia_prolight,sans-serif;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        html,body {
          height:100%;
        }

        .form-group{
          padding: 10px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
        }
        .center-text{
          text-align: center;
        }
        .form-group label{
          flex: 1;
          font-size: 1em;
          line-height: 2em;
        }
        .form-group input, .form-group textarea{
          flex:5;
          width: auto;
          display: inline;

        }

        .form-group input[type='submit']{
          display: block;
          flex: 1;
          max-width: 94px;
          margin: 0 auto;
        }
        .form-group input:disabled,   .form-group select:disabled, .form-group textarea:disabled,
        .form-group input:disabled:hover,   .form-group select:disabled:hover, .form-group textarea:disabled:hover{
          color: gray;
          -webkit-box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
        }
        .form-group input,   .form-group select, .form-group textarea{
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          padding: 5px 10px 5px 10px;
          background-color: white;
          border: 1px solid transparent;
          -webkit-box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
          font-size: 1em;
          color: #5c5252;
        }

        .form-group select{
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          max-height: 100px;
          flex: 5;
          overflow-x: scroll;
          overflow-y: hidden;
          padding:10px;
          margin:-5px -20px -5px -5px;
              padding-top: 5px !important;
              background-color: whitesmoke;
        }
        .form-group select>option{
          display: inline-block;
          min-width: 75px;
          min-height: 75px;
          max-width: 100px;
          max-height: 100px;
          width: 50px;
          height: 50px;

          background-position: center;
          background-repeat: no-repeat;
          margin-left: 10px;
          text-align: center;

        }
        /* .squaredFour */
        .squaredFour {
          width: 20px;
          position: relative;
        }
        .squaredFour label {
          width: 20px;
          height: 20px;
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
        }
        .squaredFour label:after {
          content: '';
          width: 9px;
          height: 5px;
          position: absolute;
          top: 4px;
          left: 4px;
          border: 3px solid #333;
          border-top: none;
          border-right: none;
          background: transparent;
          opacity: 0;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
        }
        .squaredFour label:hover::after {
          opacity: 0.5;
        }
        .squaredFour input[type=checkbox] {
          visibility: hidden;
        }
        .squaredFour input[type=checkbox]:checked + label:after {
          opacity: 1;
        }

      /* end .squaredFour */


        .form-group input:hover, .form-group textarea:hover,.form-group select:hover{
          -webkit-box-shadow: inset 0px 1px 1px whitesmoke,0px 1px 3px rgba(0, 0, 0, 0.7);
          box-shadow: inset 0px 1px 1px whitesmoke,0px 1px 3px rgba(0, 0, 0, 0.7);
          color:black;
        }

        .center{
          margin:10px auto;
          width: 80%;

        }
        .edit_box_content{
          background-color: white;
          border-radius: 5px;
          padding: 20px;
          border: 1px solid smokegray;
          -webkit-box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0px 1px 1px white,0px 1px 3px rgba(0, 0, 0, 0.5);
          z-index: 20000;
          overflow: auto;
        }
        .more_social{
          position: absolute;
          left: 100%;
          top: -20px;
          height: 20px;
          width: 20px;
          border: none;
        }
        .content {
          min-height:100%;
          width: 100%;
          max-width: 900px;
          margin: 0px auto;
          position:relative;
          overflow-x: hidden;
          overflow-y: auto;
        }

        main{
          width: 100%;
          overflow-x: hidden;
          padding-bottom:150px;   /* Height of the footer */
        }

        footer {
          position:absolute;
          bottom:0;
          width:100%;
          height:150px;   /* Height of the footer */
          background:#042641;
          overflow: hidden;
        }

        .services{
          text-align: justify;
          margin-top: 10px;
          width: 100%;
        }

        .services::after {
          content: '.';
          display: inline-block;
          width: 100%;
          height: 0;
          visibility: hidden;
        }

        .option-services{
          display: inline-block;
          margin: 1px;
          padding: 1px;
          position: relative;
          text-align: center;
          min-width: 200px;
          max-width: 200px;
          max-height: 200px;
        }

        .option-services > img{
          border: 3px solid #042641;
          border-radius: 150px;
          -webkit-border-radius: 150px;
          -moz-border-radius: 150px;
          -ms-border-radius: 150px;
          -o-border-radius: 150px;
          width: 100%;
          padding: 5px;
          min-width: 50px;
          max-width: 100px;

        display: inline-block;
        }

        .option-services > img:hover {
          border-color:#6ABC45;
          border-radius: 100%;
          padding: 5px;
        }

        .option-services .name-services{
          font-size:12px;
          letter-spacing:1px;
          text-transform: uppercase;
          color:#003366;
          font-weight:700;
          text-align: center;
          padding: 5px 2px;
          min-height: 20px;
        }

        .footer-mail{
          width: 100%;
          height: 20%;
          padding-top: 20px;
          text-align: center;
        }

        .footer-mail  a{
          font-size: 1em;
          text-decoration: none;
          letter-spacing: 0.37em;
          color: white;
          font-weight: bolder;
        }
        .footer{
          width: 50%;
          height: 80%;

          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          color: white;
          float: left;
          padding: 20px 10px 3px 15px;
        }

        .address{
          background-image: url(http://tg.uca.edu.sv/public/img/icono_ubicacion.png) ;
        }

        .phone-number{
          background-image: url(http://tg.uca.edu.sv/public/img/icono_telefono.png) ;
          padding-right: 25px !important;
        }
        .address,.phone-number{
          background-repeat: no-repeat;
          background-position: center;

      min-height: 70px;
          display: inline-block;
          width: 19px;
          float: left;
          padding-right: 20px;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;

        }

        .footer-text{
          font-size: 13.5px;
          padding: 10px;
          text-align: left;
          vertical-align: middle;
        }

        .phone{
          line-height: 20px;
          margin-top: 2px;
        }

        #cargando{
          position: fixed;
          top: 50%;
          left: 50%;
          height: auto;
          width: 200px;
          margin-left: -100px;
          transition: visibility 0.2s, opacity 0.5s linear;
          background: transparent;
          z-index: 99999;
          /* padding: 100px; */
          box-sizing: border-box;
        }
        .edit_box{
          position: fixed;
          width: 100%;
              height: 100%;
          background-color: rgba(0,0,0,0.5);
          z-index: 1000;
          top: 0;
          left: 0;
          overflow: auto;
        }
        #caja{
          min-width: 100%;
          max-width: 100%;
          min-height: 450px;
          max-height: 500px;
          position: relative;;
          overflow: hidden;
        }
        #caja> div{
          width: 100%;
          height: 100%;
          min-height: 500px;
          overflow: hidden;
          padding-right: 300px;
          background-repeat: no-repeat
        }
        *::-webkit-scrollbar {
          width: 6px!important;
        }


        *::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,.2);
        }

        *::-webkit-scrollbar-track {
            background: rgba(255,255,255,.08);
        }

        @media screen and (max-width:842px){
          .option-services {
            display: inline-block;
            margin: 1px;
            padding: 1px;
            position: relative;
            text-align: center;
            min-width: 150px;
            max-width: 150px;
          }
          .option-services > img {
            display: block;
          }
          .option-services .name-services {
            font-size: 10.5px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #003366;
            font-weight: 700;
            text-align: center;
            padding: 5px 2px;
            overflow: hidden;
            max-width: 100px;
          min-height: 35px;
          }
          .contenido {
            position: static;;
            max-width: 100%;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            /* padding: 10px; */
            /* text-align: justify; */
          }
          .sliderq{
            min-height: 100%;
      height: 100%;
          }

          #caja >img{
            display: none;
          }

          #caja > div{
            padding-right: 100px;

          }

          .phone {
            line-height: 20px;
            padding-top: 12px;
          }
        }
        @media screen and (max-width: 600px){
          #caja > div{
           /* background-image: initial !important  ;*/
            padding: 10px;
            /*background-attachment: fixed;*/
    /* position: relative; */
    height: 400px;
    overflow: scroll;
        height: 460px !important;
    overflow: scroll;
    min-height: 460px !important;
          }

          .informacion{
            /*background: initial !important;*/
            height: auto;
          }

          .edit_box_content, .edit_box_content> span{
            margin-top: 50px;
          }
          .center{
            width: 90%;
            z-index: 12399999;
            position: relative;
          }

        }
        @media screen and (max-width:642px){
          .option-services {
            display: inline-block;
            margin: 1px;
            padding: 1px;
            position: relative;
            text-align: center;
            min-width: 100px;
            max-width: 100px;
          }



          .option-services .name-services {
            font-size: 10px;
          }
        }
          @media screen and (max-width:444px){
            .option-services {
              display: inline-block;
              margin: 1px;
              padding: 1px;
              position: relative;
              text-align: center;
              min-width: 75px;
              max-width: 75px;

            }

            .option-services .name-services {
              font-size: 7.0px;
              letter-spacing: 1px;
              text-transform: uppercase;
              color: #003366;
              font-weight: 700;
              text-align: center;
              padding: 0px 0px;
              overflow: hidden;
            }

            .footer{
              width: 100%;
              height: auto;
            }

            footer{
              height: 300px;
            }

            main{
              padding-bottom: 300px;
            }

            .footer-text {
              font-size: 12px;
            }

            .logo span{
                font-size: 11px !important;
            }

        }


        @media screen and (max-width:344px){
          .option-services {
            display: inline-block;
            margin: 1px;
            padding: 1px;
            position: relative;
            text-align: center;
            min-width: 50px;
            max-width: 50px;

          }

          .option-services .name-services {
            font-size: 7.0px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #003366;
            font-weight: 700;
            text-align: center;
            padding: 0px 0px;
            overflow: hidden;
          }




      }

      header {
        height: 100px;
        background-color:#6ABC45;
      /*  background-image: url(http://tg.uca.edu.sv/public/img/header_background.png);*/
        background-repeat: no-repeat;
        background-position: center center;
        color: white;
      }

      .part{
        float: left;
        width: 33.33%;
        height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
      }
      /*** Posicionamiento de logo_uca **/
        #logo_uca{
          display: block;
          margin-top: 15px;
          margin-left: 40px;
        }
      /** Fin logo_uca **/

      /*** Posicionamiento de logo de talleres uca */

        /* Centra el contenido */
        #logo_taller{
          text-align: center;
          color: white;
          margin-top:2px;
        }

        #logo_taller img{
          display: block;
          margin: 0 auto;
          position: relative;
          top: 4px;
          width:120px;
          height: auto;
        }
        /* Pone el texto mas cerca de la imagen
         * para que se apegue al diseño */
        #logo_taller span{
          position: relative;
          top: -2px;
          left: -2px;
          font-size: 0.6em;
          font-weight: bold;
          letter-spacing: 3px;
          line-height: 10px;
          padding-top: 5px;

        }
        /* Añade subrayado que se expande
         * un poco antes y un poco depues del texto */
        #logo_taller span::after{
          content: '.';
          width: 110%;
          position: absolute;
          left: -5%;
          bottom: -4px;
          border-width: 0 0 1px;
          border-style: solid;
        }
      /****** Fin de logo_taller *****/

      /** Logos sociales **/
        .social{
          float: right;
          position: relative;
        }

        .horizontal_flex{
          position: absolute;
          top: 55%;
          transform: translate(25%, -25%);
          max-width: 240px;
          text-align: center;
        }
        .logos_social{
          width: 100%;
          display: block;
          max-height: 28px;
          left: -10px;
          position: relative;
        }

        .logos_social img{
          max-width: 28px;
          max-height: 28px;
        }

        .correo{
          width: 100%;
          text-align: center;
          font-weight: bold;
          font-size: 10px;
          letter-spacing: 3px;
          margin-top: 5px;
        }

        .social a{
          color: white;
          text-decoration: none;
        }

        .logos_social a>img {

        }

        .logos_social a{
          display: inline-block;
          position: relative;
          max-width: 28px;
          max-height: 28px;
          margin-left: 20px;
          overflow: hidden;

        }

        .edit:hover::after{
          position: absolute;
          content: '';
          top: 0;
          left:0;
          height: 28px;
          width: 28px;
          z-index: 10;
          background-color: rgba(255,255,255,0.5);
          background-image: url(http://tg.uca.edu.sv/public/img/edit-icon.png);
          background-size: 50% 50%;
          background-repeat: no-repeat;

          background-position: center;
        }
        .edit-servicio:hover::after{
          top:28% ;
          left: 35% ;
          position: absolute;
          content: '';
          height: 28px;
          width: 28px;
          z-index: 10;
          background-color: rgba(255,255,255,0.5);
          background-image: url(http://tg.uca.edu.sv/public/img/edit-icon.png);
          background-size: 50% 50%;
          background-repeat: no-repeat;
          background-position: center;
        }
      /** Fin lgo sociales **/