@import url('https://fonts.googleapis.com/css2?family=Mansalva&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
body{
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
}
a:focus{
outline:none;
}
i{
font-family: fontawesome, 'Montserrat', Tahoma, Geneva, Verdana, sans-serif!important;
}
h1{
font-family: 'Mansalva', cursive;
}
/* Navabar */
.toggler-icon{
color: #ffffff!important;
}
.offcanvas {
width: 420px;
background-color: #F6F6F6;
}
/* Treeview */
ul, #myUL {
list-style-type: none;
}
#myUL {
padding-left: 8px;
}
.caret {
cursor: pointer;
user-select: none;
}
.caret::before {
color: black;
display: inline-block;
margin-right: 6px;
}
.nested {
display: none;
}
.active {
display: block;
}
.toggleButton{
color: black;
}
.toggleButton:hover{
color:#8A75EE;
}
.toggleButton:focus{
color: #8A75EE;
}
.toggleButton:active {
color: #8A75EE;
}
.far{
font-size:18px!important;
padding-bottom:0.7rem;
}
ul{
padding-top: -3px;
margin-top:-2px;
margin-left:-8px;
margin-bottom: 5px;
}
li {
list-style-type: none;
margin: 0px;
padding: 5px 0px 1px 0px;
position: relative;
}
li::before,
li::after {
content: '';
left: -0.5px;
margin-top: -13px;
position: absolute;
right: auto;
z-index: -1;
}
li::before {
border-left: 1px solid #999;
bottom: 50px;
height: 182%;
top: 0;
width: 1px;
}
li::after {
border-top: 1px solid #999;
height: 20px;
top: 30px;
width: 18px;
}
li.parent::after{
cursor: pointer;
border-top: 0;
}
li:last-child::before {
display: none;
}
.parent{
padding-top:0;
padding-bottom: 0;
}
.parent:hover{
color: #8A75EE;
}
/* Didactic unit */
.form-select {
width: 60px;
height: 35px;
cursor: pointer;
box-shadow: none!important;
border-color: rgba(109, 107, 107, 0.541) !important;
}
/* Offcanvas */
.btn-round-left {
width: 37px;
height: 37px;
border-radius: 50px;
margin-left: 5px;
margin-right: 5px;
background-image: linear-gradient(#AC7AEB, #1429EC);
opacity:.7;
position: relative;
}
.fa-chevron-left{
position: absolute;
top:50%;
left:0;
right:0;
margin:auto;
transform: translateY(-50%);
}
.btn-round-left:hover {
box-shadow: 0 8px 10px #0000004b;
}
.btn-round-left:focus {
box-shadow: 0 8px 10px #0000004b;
}
.controls{
position: relative;
padding-top:20px;
}
.text-reset{
position: absolute;
top: 20px;
right: 20px;
}
.btn-close{
box-shadow: none!important;
}
.btn-round-bottom {
width: 37px;
height: 37px;
border-radius: 50px;
margin-left: 5px;
margin-right: 5px;
background-image: linear-gradient(#AC7AEB, #1429EC);
opacity: .7;
position: relative;
}
.icon-bottom {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
.btn-round-bottom:hover {
box-shadow: 0 8px 10px #0000004b;
}
.btn-round-bottom:focus {
box-shadow: 0 8px 10px #0000004b;
}
/* Header */
.bg-img {
min-height: 90vh;
background: url('./images/Group\ 256.png');
background-position: right;
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
@media only screen and (max-width:992px) {
.bg-img {
min-height: 600px;
}
}
@media only screen and (max-width:580px) {
.bg-img {
min-height: 390px;
}}
.toggler-icon{
cursor:pointer
}
.toggler-icon-01 {
cursor: pointer;
}
.offcanvas-header{
height: 60px;
}
.navbar-brand{
background-image: url('./images/Group\ 224.png');
width:60px;
margin: 5px;
background-repeat: no-repeat;
background-size: contain;
}
.description{
height:95%;
width: 880px;
padding-left: 90px;
position: absolute;
margin-top:60px;
}
.profile{
height:50%;
}
.profile-img{
width: 220px;
height: auto;
object-fit: contain;
margin-top: 20px;
margin-bottom: 8px;
}
@media only screen and (max-width:580px) {
.profile-img{
width:180px;
height: auto;
object-fit: contain;
}
}
@media only screen and (max-width:991px) {
.profile-img {
width: 180px;
height: auto;
object-fit: contain;
}
}
.description-text{
max-width: 720px;
background-color: #ffffff;
border-top-right-radius: 50px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
height: 50%;
}
@media only screen and (max-width:580px) {
.description-text{
height: 55%;
}
.profile{
height:40%;
}
}
.btn-lesson{
width: 142px;
height: 40px;
border-radius: 50px;
margin-top: 0px; 
background-image: linear-gradient(#AC7AEB, #1429EC)!important;
opacity: .7;
color: #ffffff;
}
.about{
text-align: left;
font-size: 16px;
}
.btn-lesson:hover {
box-shadow: 0 8px 10px #0000004b;
color: #ffffff;
}
.btn-lesson:focus {
box-shadow: 0 8px 10px #0000004b;
color: #ffffff;
}
@media only screen and (max-width:580px) {
.description{
height:560px;
}
.description-text {
font-size: 16px;
}
.about{
font-size:16px;
}
.courses{
margin-top: 200px;
}
}
@media only screen and (max-width:580px){
.navbar-brand{
background-image: url('./images/Group\ 255.png');
width: 28px;
margin: 5px;
background-repeat: no-repeat;
background-size: contain;
}}
/* Courses */
.learn-link{
color: #ffffff;
opacity:.7;
font-size: 16px;
}
.card-link:hover .learn-link{
opacity:1;
}
.card-link:hover .arrow {
opacity:1;
}
.arrow{
width: 22px;
margin-left: 5px;
color: #ffffff;
opacity:.7;
padding-bottom: 6px;
}
.card-title{
color:#ffffff;
font-weight: 600!important;
}
.subtitle {
color: #ffffff;
font-weight: 400!important;
}
.card-text {
color: #ffffff;
font-weight: 200!important;
}
.card-body{
position: relative;
}
.union{
position: absolute;
right:40px;
top:0;
visibility:hidden;
}
.card-body:hover .union{
visibility: visible;
}
.card-body{
cursor: pointer;
background-color: #8A75EE;
opacity:.9;
}
.card-text{
font-weight:100!important;
}
.subtitle{
font-weight:600!important;
}
.music-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 2.svg);
}
.music-folder-box:hover .music-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 3.svg);
}
.movies-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 4.svg);
}
.movies-folder-box:hover .movies-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 5.svg);
}
.business-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 6.svg);
}
.business-folder-box:hover .business-folder {
width: 200px;
height: 220px;
background-image: url(./images/Frame\ 7.svg);
}
@media only screen and (max-width:580px) {
.music-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 2.svg);
background-size: contain;
background-repeat: no-repeat;
}
.music-folder-box:hover .music-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 3.svg);
background-size: contain;
background-repeat: no-repeat;
}
.movies-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 4.svg);
background-size: contain;
background-repeat: no-repeat;
}
.movies-folder-box:hover .movies-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 5.svg);
background-size: contain;
background-repeat: no-repeat;
}
.business-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 6.svg);
background-size: contain;
background-repeat: no-repeat;
}
.business-folder-box:hover .business-folder {
width: 160px;
height: 180px;
background-image: url(./images/Frame\ 7.svg);
background-size: contain;
background-repeat: no-repeat;
}
}
/* Study abroad */
.study-abroad{
width: 100%;
max-width: 970px;
margin-left: auto;
margin-right: auto;
}
.btn-course {
width: 142px;
height: 40px;
border-radius: 50px;
margin-top: 10px;
background-image: linear-gradient(#AC7AEB, #1429EC) !important;
opacity: .7;
color: #ffffff;
margin: auto;
}
.btn-course:hover {
box-shadow: 0 8px 10px #0000004b;
color: #ffffff;
}
.btn-course:focus {
box-shadow: 0 8px 10px #0000004b;
color: #ffffff;
}
.btn-request {
width: 142px;
height: 40px;
border-radius: 50px;
border-color: #8A75EE;
border-width: 2px;
color: #8A75EE;
margin: auto;
background-color: #ffffff!important;
}
.btn-request:hover {
box-shadow: 0 8px 10px #0000004b;
border-color: #8A75EE;
border-width: 2px;
color: #8A75EE;
}
.btn-request:focus {
box-shadow: 0 8px 10px #0000004b;
border-color: #8A75EE;
border-width: 2px;
color: #8A75EE;
}
/* Contact */
.btn-round-icons {
width: 37px;
height: 37px;
border-radius: 50px;
margin-left: 5px;
margin-right: 5px;
background-image: linear-gradient(#AC7AEB, #1429EC);
opacity: .7;
position: relative;
}
.icons {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
color: #ffffff;
}
.btn-round-icons:hover {
box-shadow: 0 8px 10px #0000004b;
}
.btn-round-icons:focus {
box-shadow: 0 8px 10px #0000004b;
}
@media only screen and (min-width:1020px) {
.footer-icons{
margin-right: 60px!important;
margin-left: 60px !important;
}}
@media only screen and (max-width:580px){
.footer-icons{
margin-right:10px!important;
margin-left:10px!important;
}
}
/* Study page */
.bg-img-1 {
min-height: 90vh;
}
.toggler-icon-01{
color:#8A75EE;
margin-right: -15px;
}
.card-container{
width: 280px;
height: 520px;
position: relative;
}
.card-study{
width:100%;
height:100%;
transform-style: preserve-3d;
position: absolute;
transition: all 0.5s ease;
}
.card-study:hover{
transform: rotateY(180deg);
cursor: pointer;
}
.front{
position: absolute;
width: 100%;
height:100%;
backface-visibility: hidden;
background: #8A75EE;
color: #ffffff;
}
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #8A75EE;
color: #ffffff;
transform: rotateY(180deg);
}
.stamp-img{
width:100%;
height:auto;
object-fit: contain;
padding: 20px;
}
.study-text{
text-align: left;
margin-left:30px;
margin-right:30px;
font-size:15px!important;
}
.back-items{
font-weight: light;
font-size: 16px;
}
.study-link{
font-size: 14px;
color: #ffffff;
opacity: .7;
}
.arrow-1 {
width: 18px;
margin-left: 2px;
color: #ffffff;
opacity: .7;
padding-bottom: 5px;
}
.faq{
text-align: center;
font-weight: 600;
}
.number-img{
width: 40px;
height: auto;
margin-top: 8px;
}
.exclamation-img{
width:67px;
height: auto;
object-fit: contain;
}
video {
width: 100%;
max-height: 100%;
}
.subtitle-notes{
margin-top: 5px;
}
.notes{
background-color: #ffffff!important;
color: #000!important;
box-shadow: none!important;
}
.faq-lesson {
font-weight: 600;
}
.notes-body{
padding-top: 0px;
margin-left: 15px;
}
.exercises-box{
padding-left:45px;
padding-right: 45px;
}
/*  */
.accordion-button:not(.collapsed)::after {
content: "\f057";
font-family: "FontAwesome";
font-size: 19px;
color: rgb(75, 74, 74);
background-image: none;
}
.exception-title{
font-size: 24px;
font-weight: 500;
}
.eclipse-img{
width: 25px;
height:25px;
margin-top:5px;
margin-left:10px;
}
.background{
background-color: #F6F6F6;
width:100%;
height: auto;
border-radius: 15px;
margin-left:0px;
}
.answer-img{
padding-bottom:1.5px;
width:20px;
height: auto;
}
.exercise-title{
font-size: 24px;
font-weight: 500;
}