@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
	.d-none-sm{
		display: none !important;
	}

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

	.flex-column-sm{
		flex-direction: column !important;
	}
	.col-sm-12 {
		width: calc(100% / 12 * 12) !important ;
		padding: 0 0.5rem !important;
		box-sizing: border-box !important;
	}
	.col-sm-11 {
		width: calc(100% / 12 * 11);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-10 {
		width: calc(100% / 12 * 10);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-9 {
		width: calc(100% / 12 * 9);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-8 {
		width: calc(100% / 12 * 8);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-7 {
		width: calc(100% / 12 * 7);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-6 {
		width: calc(100% / 12 * 6);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-5 {
		width: calc(100% / 12 * 5);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-4 {
		width: calc(100% / 12 * 4);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-3 {
		width: calc(100% / 12 * 3);
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
	.col-sm-2 {
		width: calc(100% / 12 * 2) !important;
		padding: 0 0.5rem !important;
		box-sizing: border-box !important;
	}
	.col-sm-1 {
		width: calc(100% / 12 * 1) !important;
		padding: 0 0.5rem !important;
		box-sizing: border-box !important;
	}
	html {
		font-size: 12px;
	}

	#modal-login .modal-container .fa-times,
	#modal-lesson .modal-container .fa-times,
	#modal-registro .modal-container .fa-times{
		color: white;	
	}

	#modal-login .modal-container,
	#modal-lesson .modal-container,
	#modal-registro .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: 5rem 0;
	}

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

	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;
	}
	
	nav > ul > li > ul > li > a.submenu {
		font-size: 2rem !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{
		margin-top: -30px;
	}

	#introduction-section,
	#lessons-preview-section {
		height: calc(100vh - 46px);
	}
	#introduction-section .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;
	}

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

	.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;
		height: 100%;
	}
	.slick-initialized {
		padding: 0 0 0 0;
		height: 100%;
	}
	.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: 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) and (orientation: portrait) {
	.d-none-md{
		display: none !important;
	}

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

	html {
		font-size: 14px;
	}

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

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

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


	
	#modal-login .modal-container .fa-times,
	#modal-registro .modal-container .fa-times{
		color: white;	
	}

	.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;
	}
	/* #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;
	}

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

	.flex-column-lg{
		flex-direction: column !important;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
	#modal-registro .modal-container form {
	  display: block;  
	  max-height: 65vh;
	}
	#modal-registro .modal-container .img-side{
		padding: 10px !important;
	}
	.modal-container .img-side img{
		height: 40px;
		width: auto;
		max-width: auto;
	}
}