/**********************************************/
/* Large devices (desktops, less than 1200px) */
/**********************************************/

@media (max-width: 1199px){
	
    #main_content #column {
        position: absolute;
        left: -255px;
        height: 100%;	
        z-index: 668;
        -webkit-box-shadow: 5px 2px 20px -14px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 5px 2px 20px -14px rgba(0, 0, 0, 0.5);
        box-shadow: 5px 2px 20px -14px rgba(0, 0, 0, 0.5);
        display: none;
    }	

    #header .left {
        display: block;
    }
	
} 

/*********************************************/
/* Medium devices (tablets, less than 992px) */
/*********************************************/

@media (max-width: 991px) {
	
    #header {
       display: flow-root;
       padding: 0;
       box-shadow: none;
    }	
    
    #header > *:not(.searchCoursesDiv) {
        padding: 0 25px;
    }
    
    #header .left {
        position: absolute;
        display: inline-block !important;
    }
    
    #header .logo {
        width: 100%;
        float: none;
        display: grid;
        display: -ms-flexbox;
    }
    
    #header .logo a {
        display: block;
        margin: 0 auto;
    }
	
    #header .info {
        text-align: center;
        width: 100%;
        margin: 0 0 10px 0;
    }
	
    #header .info .user.mdi,
    #header .info img{
        display: none;
    }
	
    #header .info div.icons {
        display: table;
        margin: 0 auto;
        float: none;
    }
    
    #header .info .icons.logged > div {
        width: 100%;
    }
    
    #header .info .icons.logged .options {
        margin: 0 auto;
    }
    
    #header .info div.icons.logged div.changerole {
        width: 100%;
    }
    
    #header .info div.icons.logged div.changerole form {
        margin: 0 auto;
    }

    #header .searchCoursesDiv{
        width: 100%;
        margin: 0;
        padding: 5px 0 5px 0;
        background-color: #364d65;
    }
    
    #header .searchCoursesDiv .input-group .searchInputDiv,
    #header .searchCoursesDiv .input-group .searchInputDiv.open{
        margin: 0 auto;
        width: 60%;
    }
    
    #header .searchCoursesDiv .input-group .searchInputDiv .input-group-text i{
        color: #fff;
        cursor: initial;
    }
    
    #header .searchCoursesDiv .input-group .searchInputDiv #courseSearchMain{
        width: 100%;
    }
    
    #header .searchCoursesDiv .input-group .searchInputDiv #courseSearchMain,
    #header .searchCoursesDiv .input-group .searchInputDiv.open #courseSearchMain{
        display: block;
    }
    	
    .image_crop_container {
        width: 70%;
        margin: 0 auto;
        position: relative;
        right: 0;
     }     
	 
    #container {
        position: relative;
    }

    #column {
        margin-top: 0 !important;
        top: 0 !important;
    }	
        
    body#page-main #main .simpleCard .card,
    body#page-main #main .coursescard .iframe .card {
        width: 100% !important;
        max-width: 100%;
    }
		
    #navbar .left {
        display: inline-block;
        margin-right: 10px;
    }
        
    #main .block .block_content p>div.chosen-container {
        width: 350px;
    }
        
    body #main.coursedetails #bloque0,
    body #main.coursedetails #bloque3 {
        padding: 30px 40px 0 40px;
        width: calc(100% - 80px);
    }
        
    body #main.coursedetails #bloque3 {
        padding: 30px 40px;
    }	

    body #main.coursedetails #bloque0 .header{
        width: 100%;
    }

    body#page-main #main .featureCategory h2 {
        font-size: 2rem;
    }

    body#page-main #main .featureCategory p {
        font-size: 0.8rem;
    }

    body#page-main #main .mycourses > .tabs > div.listtabs {
        width: 100%;
        text-align: center;
    }

    #main .block_content p label{
        width: 20%;
    }

    /* Maquetación nota subida de imágenes */
    #main .block_content .formulario.perfil_edicion .contenedor_foto > .row{
        display: block;
    }

    #main .block_content .formulario.perfil_edicion .contenedor_foto > .row > div[class^=col-]{
        flex: 0 0 100%;
        max-width: 100%;
    }

    #main .block_content .formulario.perfil_edicion .contenedor_foto > .row > div[class^=col-] > .files input[id^=picture],
    #main .block_content .formulario.perfil_edicion .contenedor_foto .nota{
        margin: 0 auto;
        display: block;
        float: none;
        clear: both;
    }
}


/*****************************************************/
/* Small devices (landscape phones, less than 768px) */
/*****************************************************/

@media (max-width: 767px) {
        
    body#page-main #main .featureCategory {
        display: flex;
        height: auto;
    }
         
    body#page-main #main .featureCategory.opacityBanner:before {
        max-height: initial;
    }
        
    body#page-main #main .mycourses .col-auto,
    body#page-main #main .listcourses .col-auto,
    body#page-main #main .categories .categoriesenrol .col-auto {
        width: 100%;
    }

    body#page-main #main .coursescard .tab-content,
    body#page-main #main .mycourses .card,
    body#page-main #main .categories .categoriesenrol .card,
    body#page-main #main .listcourses .card,
    body#page-main #main .listcourses .row[id^="program"] {
        width: 100%;
    }
        
    body#page-main:not(.mobile) #main .coursescard .tab-content>.active { 
        display: flow-root; 
    }
        
    body#page-main:not(.mobile) #main .coursescard .card:hover .course .content .buttonsactionCourse a,
    body#page-main.mobile #main .coursescard .card .course.active .content .buttonsactionCourse a {
        padding: 3px 5px;
        width: 6rem;
    }

    body#page-main #main .categories .categoriesenrol .card {
        width: 100%;
        max-width: calc(100vw - 6rem);
        margin: 2rem auto;
    }
        
    body#page-main #main .listcourses * {
        z-index: 3;
        position: relative;
    }
        
    body#page-main #main .listcourses .row[id^='program'] [class^=col-] {
        padding-left: 15px;
        padding-right: 15px;
        border: 0;
        background-color: transparent;
    }
        
    body#page-main #main .listcourses .card .course {
        display: block;
    }
        
    body#page-main #main .listcourses .card .course div.courseimg > span.valoracioncurso {
        position: absolute;
        display: initial;
        right: initial;
        top: 10px;
        left: 20px;
    }
        
    body#page-main #main .listcourses .card .course .content {
        position: absolute;
        width: 100%;
        border: 1px solid #ccc;
        background-color: #fff;
    }
        
    body#page-main:not(.mobile) #main .listcourses .card:hover .course .content .nameCourse,
    body#page-main.mobile #main .listcourses .card .course.active .content .nameCourse {
        border: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
        
    body#page-main #main .listcourses .card .scrolldesc.scrolled:after {
        top: 55px;
    }

    body#page-main #main .listcourses .card .course input[type='button'] {
        margin-top: 10px;
        position: relative;
    }

    body#page-main:not(.mobile) #main .listcourses .card:hover .course .content .buttonsactionCourse a,
    body#page-main.mobile #main .listcourses .card .course.active .content .buttonsactionCourse a {
        border: 1px solid #fff;
        border-radius: 2px;
        padding: 3px 5px;
        width: 6rem;
    }
        
    body#page-main:not(.mobile) #main .listcourses .card:hover .course .content .iconsCourse,
    body#page-main.mobile #main .listcourses .card .course.active .content .iconsCourse {
        bottom: 5px;
    }
	
    body #main.coursedetails .categoryImg {
        padding: 13px 5px 25px 5px;
    }
    
    body #main.coursedetails .categoryImg .infocourse .navegationcourse,
    body #main.coursedetails .categoryImg .infocourse .titlecourse {
        margin-left: .9rem;
    }	
           
    body #main.coursedetails #bloque0 .header input[type=button] {
        margin-right: 5px;
        padding: 8px 20px;
    }
    
    body #main.coursedetails .block,body #main.coursedetails #bloque0, body #main.coursedetails #bloque3 {
        padding: 30px 20px 0 20px;
        width: calc(100vw - 40px);
    }
    
    body #main.coursedetails #bloque0 .header h2 {
        flex-wrap: wrap;
    }

    body #main.coursedetails #bloque0 .header h2 span {
        flex: 1 0 100%;
        max-width: 75%;
    }

    body #main.coursedetails #bloque0 .header h2 div.stars {
        flex: 2 0 100%;
        margin-left: 55px;
        margin-top: 10px;
    }

    body #main.coursedetails #bloque0 .header h2 div.stars:before {
        display: none;
    }

    #main .block_content .formulario.formflex {
        display: grid;
    }

    #main .block_content p label{
        width: 10%;
    }
        
    #main .block_content .formulario.incidencia .foto {
        position: relative;
        left: 0;
        display: grid;
        text-align: center;
        margin: 0 auto;
    }	
	
    #main .inicio .block .metabase_download ul li {
        display: block;
    }
	
    #main .formulario.perfil .user.mdi.mdi-account-circle {
        position: relative;
        top: 0;
    }	

    body.no {
        background-position: -1815px 25%;
        background-size: 3000px;
        position: absolute;
        width: 100%;
        height: 100%;
    }   
    
    .login_contenedor,
    .login_contenedor.top {
        width: 100%;
        background: rgba(255,255,255,.9);
        margin: 0 auto;
        position: relative;
        top: 0% !important;
        right: initial;
		display: table;
    }	
        
    .login_contenedor .logocontainer,
    .login_contenedor.top .logocontainer {
        display: flex;
    }
        
    .login_contenedor .logocontainer .logo,
    .login_contenedor.top .logocontainer .logo {
        margin: 0 auto 40px;
    }
	
    .login_contenedor .login,
    .login_contenedor.top .login,
    .login_contenedor .notyet,
	.login_contenedor.top .notyet {
        width: 100%;
        box-sizing: border-box;
    }
        
    .login_contenedor .login p {
        margin: 0px 5px 20px 5px;
        padding: 0 0 5px 0;
    }

    .login_contenedor .login p input#remember_name{
        width: 100%;
    }

    body #container #faqs > .modal .modal-faqs .faq > .faq_content iframe,
    body #container #faqs > .modal .modal-faqs .faq > .faq_content img{
        width: 100% !important;
        height: auto !important;
    }
}

/**********************************************************/
/* Extra small devices (portrait phones, less than 576px) */
/**********************************************************/

@media (max-width: 575px) {
	
    #main .inicio .block .calendario {
        float: left;
    }
	
    #main .inicio .block ul {
        width: 100%;
    }
	
    #main #bloque0 .header {
        width: 100vw;
    }
    
    body#page-main #main .listcourses .card .course .content .infoCourse {
        display: none;
    }
	
    body#page-main #main .categories .categoriesenrol .card .content h3 {
        font-size: 1.2rem;
    }
    
    .ui-multiselect div.selected,
    .ui-multiselect div.available {
        width: 210px !important;
    }
    
    .ui-separate {
        margin-left: 210px;
    }
    
    body #main.coursedetails div[id^=bloque] .block_content [class*='col-'] label {
        max-width: 100%;
    }
    
    body #main.coursedetails div[id^=bloque] .block_content fieldset textarea {
        width: 100%;
    }	
	
    #main .block_content p input.tam1,
    #main .block_content p input.tam2,
    #main .block_content p input.tam3,
    #main .block_content p > div.chosen-container {
        max-width: 50% !important;
    }
        
    #main .block_content .formulario .chosen-container,
    #main .block_content .formulario p>select,
    #main .block_content .formulario p>textarea,
    #main .block_content .formulario p>span>select {
        max-width: 50% !important;
    }
        
    #main .block_content .formulario .contenedor_foto .user.mdi {
        max-width: 50% !important;
    }

    body#page-main #main .mycourses > .tabs {
        width: 100%;
    }
        
    body#page-main #main .mycourses > .tabs > h2,
    body#page-main #main .listcourses > .tabs > h2 {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        float: none;
    }
        
    body#page-main #main .mycourses > .tabs > h2:after,
    body#page-main #main .listcourses > .tabs > h2:after {
        display: none;
    }

    body#page-main #main .listcourses > .tabs > div.listtabs {
        width: 100%;
        text-align: center;
    }

    body#page-main #main .mycourses > .tabs > div.listtabs > ul,
    body#page-main #main .listcourses > .tabs > div.listtabs > ul {
        display: inline-block;
    }	
		
}