@media only screen and (min-device-width: 210px) and (max-device-width: 667px){
	[v-cloak] {
		display: none;
	}
	html {
		font-size: 12px;
	}

	#modal-login .modal-container::after{
		content: '';
		position: absolute;
		background: url(../brand/images/login-background-movil.png) no-repeat;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	#modal-login .modal-container .fa-times{
		color: black;
	}

	#modal-login .modal-container {
		min-height: 30%;
	}


	.logout-sm{
		display: block;
	}
	
	.logout{
		display: none;
	}

	.alert-container{
		width: 70%;
	}

	.d-sm-none{
		display: none !important;
	}

	.d-sm-block{
		display: block !important;
	}

	.d-sm-flex{
		display: flex !important;
	}


	.modal-container .img-side .logo-login{
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 0px;
		display: flex;
		justify-content: center;
	}

	.modal-container .img-side {
		padding: 30px 20px;
	}
	
	.modal-container .img-side img{
		height: auto;
		width: 100%;
		max-width: 220px;
	}

	header nav > ul {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		justify-content: center;
		align-self: center;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: var(--site-header-bg);
		/*background: linear-gradient(to bottom, rgb(31, 156, 175), rgb(4, 77, 124));*/
		padding: 0rem 0;
		overflow-y: auto;
	}

	header nav ul li#notification-app {
		display: none !important;
	}

	nav > ul > li > ul {
		background: transparent;
		border-bottom: none;
		width: 100%;
		position: relative;
	}

	nav > ul > li > ul::after {
		display: none;
	}

	nav > ul > li > ul > li > a {
		font-size: 2rem !important;
	}

	header nav > ul > li {
		padding: 0 3rem;
	}

	header nav ul li a {
		margin-left: 0 !important;
		text-align: left !important;
	}

	header nav > ul > li a,
	header nav > ul > li i,
	header nav > ul > li a.submenu{
		color: var(--site-header-bg-contrast);
		font-size: 4rem !important;
	}
	.card {
		z-index: 0;
	}

	.menu-icon {
		display: block;
	}

	
	.logout-sm{
		display: block;
	}
	
	.logout{
		display: none;
	}
	#welcome .text-content {
		width: 100%;
	}
	#welcome .text-content img {
		width: 100%;
	}
	.lenguages-list {
		width: 90%;
	}

	#introduction-section{
		background-image: url(../brand/images/home-background-movil.png);
		height: calc(100vh - 77px);
		align-items: flex-start;
		justify-content: center;
	}
	

	#active-account-section{
		background-image: url(../brand/images/home-background-movil.png);
		height: calc(100vh - 77px);
		align-items: center;
		justify-content: center;
	}

	#active-account-section .col-6{
		width: 90% !important;
	}

	#active-account-section {
		height: calc(100vh - 46px);
	}

	#lessons-preview-section {
		height: auto;
	}

	
	.modal-container .img-side .logo-login{
		position: relative;
		z-index: 2;
		top: 0%;
		left: 0%;
		transform: translate(0%, 0%);
		width: 80%;
		margin: 0 auto;
	}

	#modal-login .modal-container {
		height: fit-content;
	}

	#modal-sugerencia .row .col-4, #modal-sugerencia .row .col-8{
		margin-top: 1rem;
		width: 100%;
	}

	#modal-indicaciones.show,
	#modal-login.show,
	#modal-sugerencia.show {
	  /* opacity: 1;
	  width: 100%;
	  height: 100%;
	  border-radius: 0%; */
	  display: flex !important;
	  overflow-x: hidden;
	  overflow-y: auto;
	}

	#introduction-section .slick-slide > div,
	#questions .slick-slide > div,
	#lessons-preview-section .slick-slide > div {
		margin: 0 1rem;
	}

	#introduction-section .slickHome-item .col-10,
	#lessons-preview-section .slickHome-item .col-10 {
		width: 100%;
	}

	/* #introduction-section .slickHome-item .col-10 .row, */
	#lessons-preview-section .slickHome-item .col-10 .row {
		flex-direction: column;
		align-items: center !important;
	}

	#lessons-preview-section .slickHome-item .col-10 .row p{
		text-align: center;
	}

	#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,

	#lessons-preview-section .slickHome-item .col-10 .row .col-6,
	#lessons-preview-section .slickHome-item .col-10 .row .col-7,
	#lessons-preview-section .slickHome-item .col-10 .row .col-4,
	#lessons-preview-section .slickHome-item .col-10 .row .col-5 {
		width: 100%;
		margin-bottom: 2rem;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	/* #introduction-section .slick-slide:last-of-type .slickHome-item .col-10 .row  {
		flex-direction: column-reverse;
	} */

	#introduction-section .slickHome-item .col-10 .row .btn ,
	#lessons-preview-section .slickHome-item .col-10 .row .btn {
		margin: 1rem auto;
	}

	#ranking-section .row,
	#sugerencia-section .row{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#ranking-section .col-1,
	#ranking-section .col-7,
	#ranking-section .col-4,
	#sugerencia-section .col-1,
	#sugerencia-section .col-7,
	#sugerencia-section .col-4 {
		margin-top: 10px;
		text-align: center;
		width: 100% !important;
	}

	.modal-container > .col-6 {
		width: 100%;
	}

	.modal-container {
		flex-direction: column;
		width: 70%;
		min-height: fit-content;
	}

	#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;
	}

	#introduction-section .slick-initialized{
		margin-top: 77px; /*Height of header*/
	}

	.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;
		z-index: 0;
	}
	.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: 5%;
		display: flex;
		align-items: flex-end;
		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%;
	}

	.slick-track {
		margin-left: auto !important;
	}
}

@media only screen and (min-device-width: 668px) and (max-device-width: 1200px) {
	[v-cloak] {
	  display: none;
	}
	html {
		font-size: 14px;
	}

	#modal-login .modal-container::after{
		content: '';
		position: absolute;
		background: url(../brand/images/login-background-movil.png) no-repeat;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.d-md-none{
		display: none !important;
	}

	.d-md-block{
		display: block !important;
	}

	.d-md-flex{
		display: flex !important;
	}


	
	#modal-login .modal-container .fa-times{
		color: black;
	}

	#modal-login .modal-container {
		min-height: 30%;
	}
	.modal-container .img-side .logo-login{
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 0px;
		display: flex;
		justify-content: center;
	}
	
	.modal-container .img-side img{
		height: auto;
		width: 100%;
		max-width: 220px;
	}


	#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;
		display: flex;
		justify-content: start;
		flex-direction: column;
	}
	/* #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 {
		padding: 20px;
	}

	.modal-container {
		flex-direction: column;
		width: 50%;
	}

	.modal-container form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: var(--site-primary);
	}

	#lessons-preview-section .lesson-preview-info .row .col-10 {
		padding: 10rem;
	}

	#lessons-preview-section .col-6 .align-items-start{
		align-items: center !important;
	}


	.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 .slick-slide > div {
		margin: 0 1rem;
	}


	#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 {
		z-index: 0;
	}

	.timer.show {
		position: relative;
		width: 90%;
		margin: 1rem auto;
		z-index: 0;
	}
	.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: 5%;
		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%;
	}

}