@media only screen
 
and (min-device-width: 320px)
 
and (max-device-width: 667px)
 
and (-webkit-min-device-pixel-ratio: 2)
 
and (orientation: portrait) {
	
	
	html{
		font-size: 12px;
	}
	
	
	header nav ul {
		display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 10;
	    background: linear-gradient(to bottom, rgb(31,156,175),rgb(4,77,124));
	    padding: 5rem 0;
	}
	
	header nav ul li#notification-app {
	    display: none;
	}
	
	header nav > ul > li {
	    padding: 0 3rem;
	}
	
	header nav > ul > li a,header nav > ul > li i {
	    color: #fff;
	    font-size: 4rem !important;
	}
	.card{
		z-index: 0;
	}
	
	.menu-icon{
		display: block;
	}
	
	#welcome .text-content {
	    width: 100%;
	}
	#welcome .text-content img {
    	width: 100%;
	}
	.lenguages-list {
 	   width: 90%;
	}
	#introduction-section {
		height: 100%;
	}
	#introduction-section .slick-slide > div{
		margin: 0 1rem;
	}
	
	#introduction-section .slickHome-item .col-10 {
    	width: 100%;
	}
	
	#introduction-section .slickHome-item .col-10 .row {
	    flex-direction: column;
	}
	
	#introduction-section .slickHome-item .col-10 .row .col-6,
	#introduction-section .slickHome-item .col-10 .row .col-7,
	#introduction-section .slickHome-item .col-10 .row .col-4,
	#introduction-section .slickHome-item .col-10 .row .col-5{
	    width: 100%;
	    margin-bottom:2rem;
	}
	#introduction-section .slick-slide:last-of-type .slickHome-item .col-10 .row{
			    flex-direction: column-reverse;
	}
	
	#introduction-section .slickHome-item .col-10 .row .btn{
	    margin: 1rem auto;
	}
	
	.modal-container > .col-6 {
    	width: 100%;
	}
	
	.modal-container {
	    flex-direction: column;
	    width: 85%;
	}
	
	#lessons-preview-section .lesson-preview-info .row .col-10{
		padding: 2rem;
	}
	.card-ranking .row .col-8 > .row > .row:first-of-type {
	    align-self: self-start;
	    text-align: center;
	    margin: 1rem 0;
	    width: 35%;
	}
	.card-ranking .row .col-8 > .row > .row:first-of-type .col-8 > p{
		text-align: center;
	}
	.card-ranking .row .col-8 > .row > .row:last-of-type {
	    flex-direction: column-reverse;
	    align-self: flex-end;
	    text-align: center;
	    margin: 1rem 0;
	    width: 35%;
	    position: absolute;
	    top: 0%;
	}
	
	.lesson-preview-info .col-6, 
	.lesson-preview-info .col-8, 
	.lesson-preview-info .col-7, 
	.lesson-preview-info .col-5,
	.lesson-preview-info .col-10 {
	    width: 100%;
	}
	
	.card-ranking .row .col-6, 
	.card-ranking .row .col-5, 
	.card-ranking .row .col-7, 
	.card-ranking .row .col-8, 
	.card-ranking .row .col-4 {
	    width: 100%;
	}


	.progress-ranking > div {
	    display: flex;
	    flex-direction: column;
	}
	.card-ranking {
	    padding: 3rem 1.5rem 6rem 1.5rem;
	}
	.card-ranking .row {
	    flex-direction: column;
	    position: relative;
	}
	
	#badges-events-section .col-4 {
	    width: 100%;
	}
	
	#questions-section .wrap > .row .col-8, #questions-section .wrap > .row .col-4 {
	    width: 100%;
	    margin: 1rem;
	}
	#questions-section .wrap > .row {
	    flex-direction: column;
	}
 
 	#modal-sugerencia .col-3, #modal-sugerencia .col-2 {
	    width: 100%;
	}
	
	#other-units-section .col-3 {
	    width: 100%;
	}
	#answers {
	    flex-direction: column;
	}
	.slick-list.draggable {
	    padding: 0;
	}
	.slick-initialized {
	    padding: 0 0 2rem 0;
	}
	.answer-card {
	    padding: 1rem;
	    text-align: center;
	    margin: 1rem 0 0 0;
	}
	#questions-section .slick-slide > div {
    	margin: 0;
	}
	.question-item .col-6,
	.question-item .col-4 {
	    width: 100%;
	}
	#library-section .col-3 {
	    width: 100%;
	}	
	#lesson-section .col-4, #lesson-section .col-8 {
	    width: 100%;
	    margin-bottom: 1rem;
	}
	
	#lesson-section .wrap .row > .row{
		flex-direction:column;
	}
	
	.timer.show {
	    position: relative;
    	width: 90%;
    	margin: 1rem auto;
	}	
	.btn-fixed.show {
	    box-shadow: none;
	    position: relative;
	    margin: 0 auto;
	    width: 90%;
	}
	#slider-evaluation-section{
		padding: 0 0 2rem 0;
	}
	#questions .slick-arrow {
	    bottom: 0%;
	    top: unset;
	}
	#questions .slick-next {
	    right: 0%;
	}
	#questions .slick-prev {
	    left: 0%;
	}
	#results-section .wrap .row {
		flex-direction:column;
	}
	
	#results-section .wrap .row .col-6, 
	#results-section .wrap .row .col-4, 
	#results-section .wrap .row .col-8, 
	#results-section .wrap .row .col-10, 
	#results-section .wrap .row .col-5 {
	    width: 100%;
	    margin: 1rem 0;
	}
	#results-section .wrap .row .m-3{
		margin: 0 !important;
	}
	#results-section .wrap .row .mt-5{
		margin: 1rem 0 0 0 !important;
	}
	#course-breadcrumb .wrap .row{
	    flex-direction: column;		
	}
	#course-breadcrumb .col-6, #course-breadcrumb .col-8, #course-breadcrumb .col-4 {
	    width: 100%;
	    margin: 1rem 0ñ
	}
	.card-unit {
	    flex-direction: column;
	    margin: 0;
	}
	
	#slider-units-section .slick-next {
	    right: 0%;
	}
	#slider-units-section .slick-prev {
	    left: 0%;
	}
	#introduction-section .slick-next {
	    right: 0%;
	}
	#introduction-section .slick-prev {
	    left: 0%;
	}
	.card-unit .card-details #progress{
		flex-direction:column;
	}
	
	.card-unit .col-6, 
	.card-unit .col-4, 
	.card-unit .col-8, 
	.card-unit .col-10 {
	    width: 100%;
	}
	
	.col-3.ranking {
    	width: 100%;
	}
}

@media only screen
 
and (min-device-width: 668px)
 
and (max-device-width: 1200px)
 
and (-webkit-min-device-pixel-ratio: 2)
 
and (orientation: portrait) {
	
	
	html{
		font-size: 14px;
	}
	
	#welcome .text-content {
	    width: 100%;
	}
	#welcome .text-content img {
    	width: 100%;
	}

	#introduction-section .slick-slide > div{
		margin: 0 1rem;
	}
	
	#introduction-section .slickHome-item .col-10 {
    	width: 100%;
	}
	
	#introduction-section .slickHome-item .col-10 .row {
	    flex-direction: column;
	}
	
	#introduction-section .slickHome-item .col-10 .row .col-6,
	#introduction-section .slickHome-item .col-10 .row .col-7,
	#introduction-section .slickHome-item .col-10 .row .col-4,
	#introduction-section .slickHome-item .col-10 .row .col-5{
	    width: 100%;
	    margin-bottom:2rem;
	}
	#introduction-section .slick-slide:last-of-type .slickHome-item .col-10 .row{
			    flex-direction: column-reverse;
	}
	#introduction-section .slickHome-item *:not(.circle) img{
	    width: 50%;
	    margin: 0 auto;
	}
	.circle {
	    width: calc(20rem);
	    padding-top: calc(20rem);
	    background: rgb(4,77,124);
	}
	
	#introduction-section .slickHome-item .col-10 .row .btn{
	    margin: 1rem auto;
	}
	
	.modal-container > .col-6 {
    	width: 100%;
    	height: 65%;
	}
	.modal-container .img-side {
	    height: 35%;
	}
	
	.modal-container {
	    flex-direction: column;
	    width: 85%;
	}
	
	.modal-container form {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	
	#lessons-preview-section .lesson-preview-info .row .col-10{
		padding: 10rem;
	}
	.card-ranking > .row{
		flex-direction: column;
	}
	.card-ranking > .row > .col-8, .card-ranking > .row > .col-4 {
	    width: 100%;
	    margin-bottom: 1rem;
	}
	.card-ranking .row .col-8 > .row > .row:first-of-type {
	    flex-direction: column;
	    align-self: flex-end;
	    text-align: center;
	}
	.card-ranking .row .col-8 > .row > .row:first-of-type .col-8 > p{
		text-align: center;
	}
	.card-ranking .row .col-8 > .row > .row:last-of-type {
	    flex-direction: column-reverse;
	    align-self: flex-end;
	    text-align: center;
	}
	
	.lesson-preview-info .col-6, 
	.lesson-preview-info .col-8, 
	.lesson-preview-info .col-7, 
	.lesson-preview-info .col-5,
	.lesson-preview-info .col-10 {
	    width: 100%;
	}
	
	.card-ranking .row .col-6, 
	.card-ranking .row .col-5, 
	.card-ranking .row .col-7, 
	.card-ranking .row .col-8, 
	.card-ranking .row .col-4 {
	    width: 100%;
	}


	.progress-ranking > div {
	    display: flex;
	    flex-direction: column;
	}
	.card-ranking {
	    padding: 3rem 1.5rem 6rem 1.5rem;
	}
	
	#badges-section .col-3 {
    width: 50%;
}
	
	#badges-events-section .col-4 {
	    width: 100%;
	}
	
	#questions-section .wrap > .row .col-8, #questions-section .wrap > .row .col-4 {
	    width: 100%;
	    margin: 1rem;
	}
	#questions-section .wrap > .row {
	    flex-direction: column;
	}
 
 	#modal-sugerencia .col-3, #modal-sugerencia .col-2 {
	    width: 100%;
	}
	
	#other-units-section .col-3 {
	    width: 50%;
	}
	#answers {
	    flex-direction: column;
	}
	.slick-list.draggable {
	    padding: 0;
	}
	.slick-initialized {
	    padding: 0 0 2rem 0;
	}
	.answer-card {
	    padding: 1rem;
	    text-align: center;
	    margin: 1rem 0 0 0;
	}
	#questions-section .slick-slide > div {
    	margin: 0;
	}
	.question-item .col-6,
	.question-item .col-4 {
	    width: 100%;
	}
	#library-section .col-3 {
	    width: 100%;
	}	
	#lesson-section .col-4, #lesson-section .col-8 {
	    width: 100%;
	    margin-bottom: 1rem;
	}
	
	#lesson-section .wrap .row > .row{
		flex-direction:column;
	}
	
	.timer.show {
	    position: relative;
    	width: 90%;
    	margin: 1rem auto;
	}	
	.btn-fixed.show {
	    box-shadow: none;
	    position: relative;
	    margin: 0 auto;
	    width: 90%;
	}
	#slider-evaluation-section{
		padding: 0 0 2rem 0;
	}
	#questions .slick-arrow {
	    bottom: 0%;
	    top: unset;
	}
	#questions .slick-next {
	    right: 0%;
	}
	#questions .slick-prev {
	    left: 0%;
	}
	#results-section .wrap .row {
		flex-direction:column;
	}
	
	#results-section .wrap .row .col-6, 
	#results-section .wrap .row .col-4, 
	#results-section .wrap .row .col-8, 
	#results-section .wrap .row .col-10, 
	#results-section .wrap .row .col-5 {
	    width: 100%;
	    margin: 1rem 0;
	}
	#results-section .wrap > .row:last-of-type > .col-6:last-of-type img {
    width: 25%;
    margin: 0 auto;
}
	#results-section .wrap .row .m-3{
		margin: 0 !important;
	}
	#results-section .wrap .row .mt-5{
		margin: 1rem 0 0 0 !important;
	}
	#course-breadcrumb .wrap > .row{
	    flex-direction: column;		
	}
	
	#course-breadcrumb .row .col-8 > .row > .row:first-of-type {
	    flex-direction: column;
	    align-self: flex-end;
	    text-align: center;
	}
	#course-breadcrumb .row .col-8 > .row > .row:first-of-type .col-8 > p{
		text-align: center;
	}
	#course-breadcrumb .row .col-8 > .row > .row:last-of-type {
	    flex-direction: column-reverse;
	    align-self: flex-end;
	    text-align: center;
	}
	
	#course-breadcrumb .col-6, 
	#course-breadcrumb .col-8, 
	#course-breadcrumb .col-4,
	#course-breadcrumb .col-5,
	#course-breadcrumb .col-7 {
	    width: 100%;
	    margin: 1rem 0;
	}
	.card-unit {
	    flex-direction: column;
	    margin: 0;
	}
	
	#slider-units-section .slick-next {
	    right: 0%;
	}
	#slider-units-section .slick-prev {
	    left: 0%;
	}
	#introduction-section .slick-next {
	    right: 0%;
	}
	#introduction-section .slick-prev {
	    left: 0%;
	}
	.card-unit .card-details #progress{
		flex-direction:column;
	}
	
	.card-unit .col-6, 
	.card-unit .col-4, 
	.card-unit .col-8, 
	.card-unit .col-10 {
	    width: 100%;
	}
}