@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
	html {
		font-size: 12px;
	}

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

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

	#welcome .text-content {
		width: 100%;
	}
	#welcome .text-content img {
		width: 100%;
	}
	.lenguages-list {
		width: 90%;
	}
	#introduction-section,
	#lessons-preview-section {
		height: 100vh;
	}
	#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: 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%;
	}

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

@media only screen and (min-device-width: 668px) and (max-device-width: 1200px) 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%;
	}
}