body,
html {
height: 100%;
margin: 0;
}
#app {
height: 100%;
margin: 0;
}
div#counterTarget {
position: absolute;
top: 120em;
}
.clear {
margin: 5% 0;
}
.mobile {
display: none;
}
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.header-section {
margin: 5% 10% 0;
}
.nav-item .wish-count {
background-color: #c3512f;
color: #fff;
width: 15px;
height: 15px;
display: inline-block;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
text-align: center;
vertical-align: super;
position: relative;
}
.nav-item .wish-count span {
vertical-align: super;
position: absolute;
top: 0;
left: 5px;
}
.collapse.in:not(.show) {
display: block;
}
.card-text,
.card-title,
.header-section h1,
.header-section h3,
.text-purple {
color: #404040;
}
.text-white {
color: #fff;
}
.text-blue {
color: #05b4cb;
}
.text-grey {
color: #999;
}
.header-section h1,
.header-section h3 {
font-weight: 700;
}
.auth-page h1 {
color: #404040;
font-size: 68px;
margin-left: 12%;
margin-bottom: 0.1rem;
font-weight: 600;
}
.auth-page h2 {
color: #707070;
font-size: 26px;
margin-left: 12%;
}
.body-section {
margin: 5% 0;
color: #404040;
}
.btn.btn-overall {
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
padding: 1.2% 5%;
width: auto;
position: relative;
z-index: 0;
overflow: hidden;
margin: 0 5px;
flex-grow: 1;
font-size: 16px;
}
a.btn.btn-overall {
padding: 0.5% 2.5%;
}
.btn.btn-overall::before {
content: "";
position: relative;
z-index: -1;
width: 0;
height: 0;
padding: 50%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0) scale(0);
transition: transform 0.15s ease-out;
}
.btn.btn-overall:hover::before {
transition-duration: 0.3s;
transform: translate3d(-50%, -50%, 0) scale(1.5);
}
.btn-overall.purple {
background: #f87522;
color: #fff;
}
.btn-overall.purple-borderd::before,
.btn-overall.purple-borderd:hover,
.btn-overall.purple::before,
.btn-overall.purple:hover {
background: #f87522;
border: 2px solid #f87522;
}
.btn-overall.white::before,
.btn-overall.white:hover {
background: #fff;
color: #05b4cb;
border: 2px solid #fff;
}
.btn-overall.purple-borderd:hover {
color: #fff;
}
.btn-overall.white {
background: 0 0;
border: 2px solid;
color: #fff;
}
.btn-overall.purple-borderd {
background: 0 0;
border: 2px solid #404040;
color: #404040;
}
.btn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.15s all ease;
padding: 0 4px;
}
.banner-section {
padding: 2% 8%;
color: #fff;
text-align: left;
}
.btn.btn-toggle {
color: #fff;
padding: 10px;
width: 16.5%;
position: absolute;
transform: scale(1);
transition: 0.15s all ease;
z-index: 1;
}
.btn.btn-toggle.btn-right {
right: 0;
border-radius: 2rem 0 0 2rem;
-webkit-border-radius: 2rem 0 0 2rem;
-moz-border-radius: 2rem 0 0 2rem;
color: #fff;
background: #404040;
}
.btn.btn-toggle.btn-left {
left: 0;
border-radius: 0 2rem 2rem 0;
-webkit-border-radius: 0 2rem 2rem 0;
-moz-border-radius: 0 2rem 2rem 0;
color: #404040;
background: #fff;
}
.about,
.main-page {
text-align: center;
overflow: hidden;
}
.about-individual {
background: url(/images/backgrounds/aboutus-bg-2.jpg);
background-repeat: no-repeat;
background-size: cover;
border-right: 50px solid #404040;
}
.about-corporate,
.auth-login {
background: url(/images/backgrounds/login_side_image.png);
background-repeat: no-repeat;
background-size: cover;
border-left: 50px solid #fff;
}
.auth-register {
background: url(/images/backgrounds/register_side_image.png);
background-repeat: no-repeat;
background-size: cover;
border-left: 50px solid #fff;
background-position: center;
}
.bg-overlay {
width: 100%;
height: 100%;
}
.modal-video-play,
.modal-video-play-sm {
align-content: center;
justify-content: center;
display: flex;
flex-direction: column;
}
.modal-video-play .modal-trigger,
.modal-video-play-sm .modal-trigger {
border: 3px solid #fff;
width: 105px;
height: 105px;
display: flex;
align-content: center;
justify-content: center;
flex-direction: row;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
margin: auto;
cursor: pointer;
}
.modal-video-play .modal-trigger .fa-wrap,
.modal-video-play-sm .modal-trigger .fa-wrap {
width: 105px;
height: 105px;
display: flex;
align-content: center;
justify-content: center;
flex-direction: row;
margin: auto;
cursor: pointer;
}
.modal-video-play .modal-trigger .fa-wrap i,
.modal-video-play-sm .modal-trigger .fa-wrap i {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
.modal-video-play-sm {
width: 60px;
height: 60px;
}
.modal-video-play-sm .modal-trigger {
width: 60px;
height: 60px;
border-width: 1px;
}
.modal-video-play-sm .modal-trigger .fa-wrap {
width: 60px;
height: 60px;
}
.modal .message-modal {
text-align: center;
background: #f18a21;
background: #fcf7f7;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-top: 4px solid #f87522;
}
.message-modal .modal-header {
display: block;
border-bottom: 1px solid #f87522;
}
.message-modal .modal-header .modal-title {
color: #404040;
font-weight: 700;
}
.modal .error-modal {
text-align: center;
background: #fae1e6;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-top: 4px solid #ee4089;
}
.error-modal .modal-header {
display: block;
border-bottom: 1px solid #ee4089;
}
.error-modal .modal-header .modal-title {
color: #404040;
font-weight: 700;
}
.company-modal {
text-align: center;
}
.company-modal .modal-header {
-webkit-box-pack: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
border-bottom: 4px solid #27a8e1;
}
.company-modal .modal-header {
border-bottom: 4px solid #27a8e1;
}
.company-modal .modal-footer a:hover {
text-decoration: none;
}
.modal-body {
color: #404040;
}
.message-modal .modal-accept,
.ticket-modal .modal-accept {
background: 0 0;
border: 2px solid #f87522;
width: 24%;
padding: 6px;
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
}
.error-modal .modal-accept {
background: 0 0;
border: 2px solid #ee4089;
width: 20%;
padding: 6px;
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
color: #ee4089;
}
.modal .ticket-modal {
text-align: center;
background: #fff;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-top: 4px solid #33bcae;
}
.modal .ticket-modal iframe {
min-height: 788px;
border: none;
}
.form-modal {
text-align: center;
padding: 5% 0;
background: #404040;
}
.pass-view {
position: absolute;
right: 0;
color: #888888;
z-index: 3;
padding: 0.7rem;
}
footer {
position: relative;
bottom: 0;
width: 100%;
background: #fcfcfc 0% 0% no-repeat padding-box;
box-shadow: 0px -3px 46px #00000008;
padding-top: 1%;
padding-bottom: 1%;
}
.footer-text {
display: inline-flex;
text-align: center;
}
.footer-text ul {
list-style: none;
display: flex;
text-align: center;
}
.footer-text li {
padding: 0 0.5rem;
}
.footer-text span,
small a {
color: #acade5;
}
.footer-text a {
color: #fff;
text-decoration: none;
font-size: small;
}
hr.line-footer {
border-top: 1px solid #acade5;
margin: 1% 20%;
}
footer .justify-content-center {
text-align: center;
}
.footer-right.footer-icons a {
padding: 0 1rem;
}
.footer-span {
padding: 2% 0;
}
.bordered-left {
padding-left: 1rem;
margin: 0;
background: url(/images/icons/Line.png) bottom left no-repeat;
background-position-x: left;
background-position-y: bottom;
background-size: auto;
background-size: 1px;
background-position: left 4px;
}
#back-top,
#support {
display: inline-block;
background-color: #f87522;
text-align: center;
position: fixed;
transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
z-index: 1000;
border: 2px solid #fff;
}
#back-top {
bottom: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
opacity: 0;
visibility: hidden;
}
#support {
bottom: 37px;
right: 60px;
opacity: 1;
visibility: visible;
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
color: #fff;
font-size: 14px;
padding: 0 1.5%;
}
#back-top span {
display: none;
}
#back-top::after {
content: "\f062";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 40px;
color: #fff;
}
#support::after {
content: "\f059";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 35px;
color: #fff;
padding-left: 5px;
}
#back-top:hover,
#support:hover {
cursor: pointer;
background-color: #f87522;
}
#back-top:active,
#support:active {
background-color: #f87522;
}
#back-top.show {
opacity: 1;
visibility: visible;
}
.contact-page .card,
.reset-page .card {
color: #fff;
background: 0 0;
border: none;
text-align: center;
}
.auth-login {
border-left: none;
padding: 6% 2%;
}
.login {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
.login > div {
width: 100%;
}
.btn.btn-toggle {
top: 5%;
}
.reset-page .container {
background: url(/images/backgrounds/BG_-_100_opacity.png);
background-repeat: no-repeat;
background-size: cover;
padding: 10% 0;
color: #404040;
}
.auth-reset {
background: url("/images/backgrounds/Password _Reset_Background.png");
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -2%;
}
.auth-reset .bg-overlay {
padding: 10% 0;
}
.about {
display: none;
}
.about-individual.active {
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.about-corporate.active {
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.clients,
.track-record {
padding: 2.5% 2%;
}
.clients {
background-color: #404040;
}
.clients .card {
height: 80%;
justify-content: center;
}
img.client-image {
object-fit: none;
width: 100%;
height: auto;
}
.tour-section {
background: url(/images/backgrounds/tour-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.device-banner {
background: url(/images/backgrounds/BG_-_100_opacity.png);
background-repeat: no-repeat;
background-size: cover;
padding: 10% 0;
color: #fff;
padding-top: 20%;
}
.about .card {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-box-shadow: 0 4px 8px #0000004d;
-moz-box-shadow: 0 4px 8px #0000004d;
box-shadow: 0 4px 8px #0000004d;
}
.about h5.card-title {
min-height: 2.75rem;
padding: 0 0.2rem;
}
section.main-page.testimonials {
padding: 3.5% 0;
}
span.quotes {
position: absolute;
color: #7777;
font-size: 8rem;
}
.leftq {
top: -5%;
left: 15%;
}
.rightq {
bottom: 30%;
right: 15%;
}
.testimony-owner {
color: #05b4cb;
}
#customers-testimonials .next,
#customers-testimonials .prev {
cursor: pointer;
position: absolute;
top: 30%;
width: auto;
padding: 8px;
margin-top: -22px;
color: #404040;
font-weight: 700;
transition: 0.6s ease;
border-radius: 2rem;
user-select: none;
}
#customers-testimonials .prev {
left: 0;
}
#customers-testimonials .next {
right: 0;
}
#customers-testimonials .next:hover,
#customers-testimonials .prev:hover {
background-color: #404040;
color: #fff;
}
.tour-section {
padding: 5% 0;
}
#laptop {
position: absolute;
z-index: auto;
top: -3rem;
right: -15rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
#tablet {
position: absolute;
z-index: 1;
top: 8rem;
right: 28rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
0.4s both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
}
#mobile-portrait {
position: absolute;
z-index: 2;
top: 16rem;
right: 38rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
0.6s both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s both;
}
#mobile-orientation {
position: absolute;
z-index: 3;
top: 24rem;
right: 40rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
0.8s both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.8s both;
}
.image-section img {
cursor: pointer;
transition: transform 0.5s ease;
}
.image-section img:hover {
transform: scale(1.02) translateX(-15px);
}
#close-modal-button {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
width: 50px;
height: 50px;
background-color: #fff;
float: right;
position: relative;
top: 2rem;
right: -25px;
z-index: 999;
cursor: pointer;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
#close-modal-button:before {
content: "\2716";
position: relative;
top: 7px;
left: 14px;
color: #404040;
cursor: pointer;
}
/* start of anto's additions */
.flex-group {
justify-content: center;
align-items: center;
}
.flex-group1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.flex-group2 {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: row;
}
/*End of anto's additions*/
.dismiss-modal {
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
padding: 0.4rem 3rem;
width: auto;
}
.fade-slide {
-webkit-animation-name: fade-slide;
-webkit-animation-duration: 1.5s;
animation-name: fade-slide;
animation-duration: 1.5s;
}
#ModalCoporateForm .modal-content,
#youtube .modal-content {
border-radius: 1rem !important;
overflow: hidden;
border: 0;
background: 0 0;
}
#ModalCoporateForm .modal-content .modal-header,
#youtube .modal-content .modal-header {
background: 0 0;
border: 0;
}
#youtube .modal-content .modal-header .close {
float: right;
color: #fff;
font-weight: 100;
opacity: 1;
}
#ModalCoporateForm .modal-content .modal-header .close {
float: right;
color: #404040;
font-weight: 100;
opacity: 1;
background: #fff;
border-radius: 50%;
position: relative;
top: 4em;
z-index: 1;
}
.swiper-container-horizontal > .slider-pagination-bullets {
bottom: 0 !important;
}
span.slider-pagination-bullet {
height: 10px !important;
width: 10px !important;
background: #fff none repeat scroll 0 0 !important;
opacity: 0.4 !important;
}
span.slider-pagination-bullet.slider-pagination-bullet-active {
height: 12px !important;
width: 12px !important;
opacity: 1 !important;
}
.counter-section {
text-align: center;
border-right: 1px dashed #404040;
padding-left: 10%;
}
.counter-section h1 {
font-size: 42px;
display: inline-flex;
text-align: center;
color: #05b4cb;
}
.counter-right {
padding-left: 5%;
text-align: left;
}
@-webkit-keyframes fade-slide {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade-slide {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.jarallax-img {
width: 100%;
height: 250px;
object-fit: cover;
}
.inline-video-jarallax .content,
.jarallax .content {
font-style: Poppins;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 150px;
margin-top: -8rem;
}
.inline-video-jarallax .content .wrap,
.jarallax .content .wrap {
width: 90%;
padding-bottom: 10px;
color: #000;
margin: 0 auto;
position: absolute;
}
.inline-video-jarallax .content .wrap h1,
.jarallax .content .wrap h1 {
color: #fff;
}
.inline-video-jarallax .content .wrap h3,
.jarallax .content .wrap h3 {
color: #fff;
}
.breadcrumb {
margin-left: 142px;
margin-top: 20px;
background-color: transparent;
}
.breadcrumb-item a {
color: #fff;
}
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #fff;
content: "|";
}
.active a {
color: #404040;
font-weight: 600;
}
section.cs-category-tree {
padding: 20% 0;
margin: 0 10%;
}
.courses-row {
margin: 4% 2%;
}
.courses-detail-row {
margin-top: 4%;
margin-bottom: 2%;
}
.courses-detail-row section.cs-category-tree {
margin: 2% 0;
padding: 0;
}
.cs-category-root {
color: #4d4d4d;
padding-bottom: 10px;
border-bottom: 3px solid #05b4cb;
font-weight: 700;
}
.cs-category-list {
color: #999;
padding-bottom: 10px;
border-bottom: 1px solid #999;
padding-top: 20px;
}
.category-heading {
background-color: #fff !important;
padding: 0.75rem 0.25rem;
border: none;
}
.accordion > .card:first-of-type {
border-bottom: 1px solid #999;
}
.category-card {
border: none;
}
.btn-link.focus,
.btn-link:hover .btn-link:focus {
color: #05b4cb;
text-decoration: none;
}
.btn-category {
color: #05b4cb;
text-align: left;
width: 100%;
text-decoration: none;
}
.btn-category:focus {
text-decoration: none;
}
.btn-category span.icon {
vertical-align: middle;
float: right;
font-weight: 700;
}
.btn-category span.icon:before {
content: "\f106";
font-family: "Font Awesome 5 Pro";
}
.btn-category.collapsed {
color: #999;
text-align: left;
text-decoration: none;
width: 100%;
}
.btn-category.collapsed span.icon:before {
content: "\f107";
font-family: "Font Awesome 5 Pro";
}
.categorey-body {
padding-top: 0;
}
.categorey-body a {
color: #999;
text-align: left;
font-size: 15px;
}
.categorey-body a:hover {
text-decoration: none;
color: #05b4cb;
}
.row.courses-filter {
margin-top: 2rem;
}
.courses-filter .btn-submit {
position: absolute;
top: 0;
right: 0;
background: #05b4cb;
border-radius: 2rem;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
color: #fff;
padding: 0.255rem 0.75rem;
}
.courses-filter .btn-submit:focus {
box-shadow: none;
border: 2px solid;
}
.courses-filter .btn-rufous {
background: #f18a23;
border-radius: 2rem;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
color: #fff;
padding: 0.375rem 1.5rem;
}
.courses-filter .form-control {
display: block;
width: 100%;
height: auto;
padding: 0.375rem 0.75rem;
font-size: 16px;
color: #707070;
background-color: #fff;
background-clip: padding-box;
border: 2px solid #f18a23;
border-radius: 2rem;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
-webkit-transition: border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.course-card {
padding: 0 0.5px 20px;
height: 100%;
}
.course-card article {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
}
.course-card article .thumbnail {
position: relative;
width: 100%;
display: block;
overflow: hidden;
height: auto;
}
.course-card article .thumbnail img {
min-width: 280px;
min-height: 200px;
width: -webkit-fill-available;
height: auto;
object-fit: fill;
max-height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.course-card article .course-card-content .course-card-header {
display: flex;
align-content: center;
flex-direction: column;
padding: 1% 0 0 1%;
background: #dff2f6;
width: 100%;
}
.course-card article .course-card-content .course-card-header p {
color: #666;
}
.course-card article .course-card-content .title-course {
height: 65px;
text-align: center;
padding: 1% 0;
}
.course-card article .thumbnail .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.course-card article .thumbnail .overlay .overlay-inside {
position: absolute;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
background: #c3512f;
height: 80px;
width: 80px;
line-height: 80px;
left: 50%;
top: 50%;
margin: -40px 0 0 -40px;
z-index: 500;
text-align: center;
color: #fff;
}
.course-card article .thumbnail .add {
top: 0;
}
.course-card article .thumbnail .icon {
position: absolute;
right: 0;
background: rgb(51, 188, 174, 0.8);
width: 40px;
height: 40px;
z-index: 1;
}
.course-card article .thumbnail .icon img {
width: 40px;
height: 40px;
min-height: 40px;
min-width: 40px;
}
.course-card article .thumbnail .share {
top: 0;
}
.course-card article .thumbnail .icon img {
width: 40px;
height: 40px;
min-height: 40px;
min-width: 40px;
}
.course-card article .course-card-content p.description {
min-height: 70px;
text-align: center;
}
.course-card article .course-card-content p.title {
min-height: 65px;
min-height: 40px;
text-align: left;
}
.course-card article .course-card-content p.title {
min-height: unset;
margin-bottom: 0;
}
p.description {
font-size: 15px;
}
.course-card article .course-card-content .price {
color: #999;
font-size: 15px;
}
.course-card article .course-card-content .readmore {
padding: 5px 10px;
margin: 0;
color: #999;
font-size: 15px;
padding-bottom: 5%;
}
.course-card article .course-card-content .readmore a {
text-decoration: none;
text-align: center;
padding: 10px 20px;
display: inline;
align-content: center;
padding-top: 20px;
flex-direction: column;
}
.course-card-content .row-description {
font-size: 16px;
}
.course-card-content .row-description p {
text-align: left;
}
.teacher-image img {
margin-right: 2%;
margin-bottom: 1%;
height: 240px;
}
.course-detail-header {
width: 80%;
padding-bottom: 10px;
color: #000;
margin: 0 auto;
position: absolute;
margin-left: 150px;
margin-top: -2rem;
}
.course-detail-header h1 {
color: #fff;
}
.course-detail-header span {
display: inline;
float: right;
margin-top: -5rem;
}
.course-detail-header img {
width: 300px;
}
.detailed-tree {
text-align: center;
margin: 1.5%;
}
.detailed-tree .start {
color: #404040;
text-align: center;
}
.detailed-tree .span-space {
color: #404040;
font-size: 16px;
}
.detailed-tree span.span-space {
display: block;
margin-bottom: 5%;
}
.detailed-tree .btn.btn-overall {
padding: 6px 26px;
}
.course-tabs {
background: #fcf7f7;
padding-left: 27.5%;
}
.course-tabs li.nav-item {
padding: 0 0.8rem;
}
.course-tabs a {
color: #4d4d4d;
padding: 11px 40px;
}
.nav-pills.course-tabs .nav-item.active .nav-link {
color: #fff;
background: #f87522 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
opacity: 1;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
transform: scale(1.2);
margin-top: 1px;
}
.detail-card {
border-top: 4px solid #f87522;
}
.detail-card .course-content .help {
text-decoration: none;
padding: 0;
display: flex;
flex-direction: column;
background: #dff2f6;
}
.detail-card .course-content p {
text-align: center;
padding: 5px 20px;
margin: 0;
color: #666;
}
.detail-card .course-content div.text-center {
padding: 5%;
}
.need-help {
color: #05b4cb;
float: right;
cursor: pointer;
}
article .response {
box-shadow: none;
}
article .teacher {
box-shadow: none;
}
.row-description {
padding: 20px;
color: #666;
}
.row-description .about {
display: block;
}
.row-description .about h2,
.row-description .faq h2,
.row-description .prerequisites h2 {
text-align: left;
color: #404040;
font-size: 28px;
}
.row-description .response h3 {
text-align: left;
color: #666;
font-weight: 700;
font-size: 18px;
}
.contact-overlay {
background: #404040 none repeat scroll 0 0;
}
.contact-card {
background: url(/images/backgrounds/BannerGeometrical@2x.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding: 6% 0;
}
.course-card-content {
padding: 5px;
}
video#bgvid {
width: 100%;
float: left;
}
.my-course {
padding: 1% 0;
border-bottom: 1px solid #ccc;
}
.preview-img {
width: 100%;
object-fit: cover;
padding: 0 10%;
}
.course-title {
text-align: left;
}
.title {
padding: 5px 0;
}
a {
font-size: 18px;
color: #05b4cb;
}
.sub-title {
color: #999;
}
.innerstats {
border: 1px solid #dff2f6;
text-align: center;
}
a.btn-arsenic {
background: #404040 !important;
color: #fff !important;
border: 2px solid red !important;
}
.wishlist-row {
margin: 0 2%;
}
.wishlist-row .courses-filter {
margin: 5% 0 0 5%;
}
.wishllist-row section.cs-category-tree {
padding: 10% 0;
margin: 0 10%;
}
.detail-card article .course-content p.description {
font-weight: lighter;
}
.purchase-table {
background: url(/images/backgrounds/BannerGeometrical@2x.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding: 5% 0;
}
.purchase-table th {
color: #4d4d4d;
}
th.nav-item.center {
text-align: left;
width: 10.5%;
}
th.nav-item.text-left {
width: 25%;
}
th.nav-item.break {
width: 15%;
}
.purchase-total {
background: #404040;
padding: 1% 35%;
}
.purchase-total tr:first-child {
border-bottom: 1px solid #ccc;
}
.purchase-payment {
background: #05b4cb;
padding: 1%;
}
.checkout-panel {
margin: 0;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.checkout-panel .panel-body {
padding: 2% 4%;
flex: 1;
}
.progress-line {
display: flex;
margin-bottom: 50px;
justify-content: space-between;
}
.checkout-panel .step {
box-sizing: border-box;
position: relative;
z-index: 1;
display: block;
width: 25px;
height: 25px;
margin-bottom: 30px;
border: 4px solid #fff;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #efefef;
}
.checkout-panel .step:after {
position: absolute;
z-index: -1;
top: 5px;
left: 22px;
width: 495px;
height: 6px;
content: "";
background-color: #efefef;
}
.checkout-panel .step:before {
color: #2e2e2e;
position: absolute;
top: 40px;
}
.checkout-panel .step:last-child:after {
content: none;
}
.checkout-panel .step.active {
background-color: #ee4089;
}
.checkout-panel .step.active:after {
background-color: #ee4089;
}
.checkout-panel .step.active:before {
color: #ee4089;
}
.checkout-panel .step.active + .step {
background-color: #ee4089;
}
.checkout-panel .step.active + .step:before {
color: #ee4089;
}
.checkout-panel .step:nth-child(1):before {
content: "Cart";
}
.checkout-panel .step:nth-child(2):before {
right: -40px;
content: "Payment";
}
.checkout-panel .step:nth-child(3):before {
right: -30px;
content: "Confirmation";
}
.checkout-panel .step:nth-child(4):before {
right: 0;
content: "Finish";
}
.method {
display: flex;
flex-direction: column;
width: auto;
height: 120px;
padding: 2%;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background-color: #f9f9f9;
justify-content: center;
align-items: center;
}
.method.active {
border-color: #ee4089;
outline: 0 !important;
box-shadow: 0 3px 22px 0 #7b7b7b;
}
.card-logos {
display: flex;
width: 150px;
justify-content: space-between;
align-items: center;
}
.radio-input {
margin-top: 20px;
}
.checkout-panel .info {
font-weight: 300;
display: block;
margin-top: 50px;
opacity: 0.5;
color: #2e2e2e;
}
#date {
background: url(img/icons_calendar_black.png) no-repeat 95%;
}
#cardholder {
background: url(img/icons_person_black.png) no-repeat 95%;
}
#cardnumber {
background: url(img/icons_card_black.png) no-repeat 95%;
}
#verification {
background: url(img/icons_lock_black.png) no-repeat 95%;
}
.small-inputs {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.small-inputs div {
width: 182px;
}
.panel-footer {
display: flex;
width: 100%;
height: 96px;
padding: 0 80px;
background-color: #efefef;
justify-content: space-between;
align-items: center;
}
.checkout-panel .tabcontent {
display: none;
padding: 6px 12px;
border: none;
}
.checkout-panel .tabcontent.block {
display: block;
}
.profile-row {
margin-top: 4%;
margin-bottom: 4%;
}
#navbarSupportedContent li.nav-item {
padding: 1.1rem 0.55rem !important;
}
.profile-dropdown {
background: #f18a21;
text-align: right;
width: min-content;
padding: 1.1rem 0.55rem !important;
}
.profile-dropdown #navbarDropdown {
color: #fff;
}
.profile-dropdown img {
width: 30px;
height: 30px;
border-radius: 100%;
margin: auto;
background-size: cover;
}
.profile-menu {
max-width: 200px;
margin-top: 10px;
padding: 0;
box-shadow: 4px 4px 8px #0000004d;
border-radius: 0 !important;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-bottom: 4px solid #404040;
}
.profile-menu img {
height: 100px;
object-fit: cover;
width: 100%;
object-position: top;
}
.profile-menu .dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1rem;
font-size: 15px;
clear: both;
font-weight: 400;
color: #404040;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.profile-row section.cs-category-tree {
padding: 10% 0;
margin: 0 10%;
}
.profile-row .course-tabs {
padding-left: 18%;
}
#navbarDropdown {
color: #fff;
}
.dropdown-menu-arrow {
top: -20px;
left: 80%;
width: 0;
height: 0;
position: absolute;
}
.dropdown-menu-arrow:after,
.dropdown-menu-arrow:before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 12px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown-menu-arrow:after {
bottom: -20px;
right: -20px;
border-bottom-color: #ffffff;
opacity: 0.92;
}
.dropdown-menu-arrow:before {
bottom: -20px;
right: -20px;
border-bottom-color: #404040;
}
.dropdown-menu-right {
right: 1%;
left: auto;
}
.dropdown-p {
background: #404040;
color: #fff;
width: 100%;
text-align: center;
}
.text-underline {
border-bottom: 0.2px solid #dff2f6;
}
.menu-breaker {
margin-top: -15px;
margin-bottom: 15px;
}
.menu-breaker span {
border-bottom: 0.5px solid #eca5c6;
padding: 0.25rem 1.5rem;
}
.passwordchange-section {
background: url(/images/backgrounds/BG_-_100_opacity.png);
background-repeat: no-repeat;
background-size: cover;
padding: 2% 0;
color: #404040;
text-align: center;
}
.faq-page .tab-content {
margin: 4% 8%;
}
.faq-page .card {
border: none !important;
}
.faq-page .card-header {
background: 0 0 !important;
margin-bottom: 0 !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
h5.faq-cat {
color: #404040;
margin-top: 2%;
}
.faq-topic {
color: #666;
text-decoration: none;
font-size: 18px;
text-align: left;
display: flex;
}
.faq-topic:focus,
.faq-topic:hover {
text-decoration: none;
box-shadow: none;
}
.faq-topic:hover,
.faq-topic[aria-expanded="true"] {
color: #05b4cb;
}
.faq-page .card-body {
color: #666;
padding: 1% 5%;
}
li.nav-item.user-guide {
position: initial;
margin-left: 10%;
}
li.nav-item.user-guide a {
border: 1px solid #404040;
border-radius: 2rem;
-moz-border-radius: 2rem;
-webkit-border-radius: 2rem;
padding: 5px 10px;
text-align: center;
color: #404040;
font-size: 16px;
margin: 5px 0;
}
.sdg-section {
background: url(/images/backgrounds/company_bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
z-index: 2;
position: relative;
top: 0;
}
.sdg-section .card {
border-radius: 0;
border: none;
box-shadow: 4px 4px 7px #00000059;
opacity: 1;
}
.sdg-section .card-header img {
opacity: 1;
transform: scale(1);
transition-property: all;
transition-duration: 0.9s;
}
.sdg-section .card-header:hover img {
opacity: 0.8;
transform: scale(0.8);
background-position: top top;
filter: grayscale(0);
transition-property: all;
transition-duration: 0.8s;
transition-delay: 0.2s;
}
.sdg-section .card-body {
min-height: 8em;
padding: 10px;
}
.sdg-section .card-body p {
font-size: 16px;
}
.card-header.sdg-en-04 {
padding: 0;
border-radius: 0;
background: #c7212f;
}
.card-header.sdg-en-09 {
padding: 0;
border-radius: 0;
background: #f26a2e;
}
.card-header.sdg-en-10 {
padding: 0;
border-radius: 0;
background: #df1a83;
}
.card-header.sdg-en-12 {
padding: 0;
border-radius: 0;
background: #bf8d2c;
}
.card-header.sdg-en-05 {
padding: 0;
border-radius: 0;
background: #ef402d;
}
section.background-banner {
margin: 5% 0;
}
.background-banner h1 {
font-weight: 700;
}
#second {
position: absolute;
z-index: auto;
top: 2rem;
right: 16rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
z-index: 2;
}
#first {
position: absolute;
z-index: 1;
top: 4rem;
right: 40rem;
-webkit-animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
0.4s both;
animation: slide-in-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
}
.partner {
border-radius: 0 !important;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.partner .card-header {
padding: 0 !important;
height: 137px;
}
.partner .card-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
.partner .card-title {
min-height: 1.8em;
}
.partner .card-text {
min-height: 6em;
}
.search-result img {
width: inherit;
}
.popular-list {
list-style: none;
}
.popular-list li {
padding: 10px;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
}
.search-content ul li a {
color: #fff;
}
.clients .vueperslides__bullet .default {
border: 1px solid #fff !important;
}
.courses-page .vueperslides__bullet .default {
border: 1px solid #404040 !important;
}
.vueperslides__bullet--active .default {
background: #fff !important;
}
.preview-image {
width: 100%;
}
.breadcrumb {
margin-left: 135px;
margin-top: 20px;
background-color: transparent;
}
.breadcrumb h1 {
font-size: 30px;
}
.emoji-picker-icon {
position: absolute;
right: 0px;
top: 0px;
font-size: 20px;
opacity: 0.7;
z-index: 100;
transition: none;
color: black;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
border: none;
border-radius: 3px;
padding: 3px 5px;
}
@media (min-width: 1444px) {
#app {
min-height: 49em;
}
.banner-section-text {
margin-right: 0;
}
.auth-page .card.login {
padding: 8% 0;
border: none;
}
}
@media (max-width: 1444px) {
#app {
min-height: 46em;
}
.banner-section {
height: 320px;
padding: 4% 6%;
}
.image-section img {
width: 80%;
}
.background-banner .image-section img {
width: auto;
}
#second {
right: 6rem;
top: 3rem;
}
#first {
right: 28rem;
top: 5rem;
}
#laptop {
top: 0;
right: -24rem;
}
#tablet {
top: 9rem;
right: 20rem;
}
#mobile-portrait {
top: 15rem;
right: 30rem;
}
#mobile-orientation {
top: 22rem;
right: 32rem;
}
.course-detail-header {
width: 80%;
padding-bottom: 10px;
color: #000;
margin: 0 auto;
position: absolute;
margin-left: 100px;
margin-top: -2rem;
}
.breadcrumb {
margin-left: 90px;
margin-top: 34px;
background-color: transparent;
}
.inline-video-jarallax .content,
.jarallax .content {
font-style: Poppins;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 100px;
margin-top: -10rem;
}
.breadcrumb {
margin-left: 90px;
margin-top: 34px;
background-color: transparent;
}
section.main-page.testimonials {
padding: 0 0 5% 0;
}
.session-panel .nav-tabs li {
width: 23%;
}
.course-card article .course-card-content .readmore {
padding: 5px 0px;
margin: 0;
color: #999;
font-size: 15px;
padding-bottom: 5%;
}
.profile-row {
margin-top: 6%;
margin-bottom: 4%;
}
.emoji-picker-icon{
top:5px;
right:10px;
}
}
@media (max-width: 1367px) {
#app {
min-height: 44em;
}
#tablet {
top: 8.5rem;
}
#mobile-portrait {
top: 14.5rem;
}
#mobile-orientation {
top: 20.5rem;
}
#first {
top: 6.5rem;
}
#second {
top: 4.5rem;
}
section.cs-category-tree {
padding: 10% 0;
margin: 0 10%;
}
.course-card article .course-card-content .title-course {
min-height: 40px;
}
.course-card article .course-card-content p.description {
min-height: 55px;
}
.faq-page .course-tabs {
padding-left: 7%;
}
.btn-category {
font-size: 15px;
padding: 0;
}
.categorey-body a {
font-size: 14px;
}
.categorey-body {
padding: 0 5px;
}
.profile-row .course-tabs {
padding-left: 10%;
}
.course-card article .thumbnail img {
min-height: 145px;
}
}
@media (max-width: 1281px) {
#app {
min-height: 50em;
}
.banner-section {
height: 320px;
padding: 4% 8%;
}
.banner-section-text {
margin-right: 0;
}
.btn.btn-overall {
padding: 1% 5%;
}
.banner-section-text {
margin-right: 0;
}
#laptop {
top: -2rem;
right: -28rem;
}
#tablet {
top: 6.5rem;
right: 15rem;
}
#mobile-portrait {
top: 12.6rem;
right: 25rem;
}
#mobile-orientation {
top: 18.6rem;
right: 27rem;
}
.course-card article .course-card-content p.description {
min-height: 95px;
}
.course-card article .course-card-content a h3 {
height: 65px;
}
section.cs-category-tree {
padding: 35% 0;
margin: 0;
}
.auth-login {
padding: 6% 2%;
}
.profile-row .course-tabs {
padding-left: 7%;
}
}
@media (max-width: 1160px) {
#laptop {
right: -28rem;
}
#tablet {
right: 15rem;
}
#mobile-portrait {
right: 26rem;
}
#mobile-orientation {
right: 26rem;
}
.course-tabs a {
padding: 10px 20px;
}
#mobile-orientation {
top: 20.5rem;
}
#first {
top: 6.5rem;
}
#second {
top: 4.5rem;
}
section.cs-category-tree {
padding: 10% 0;
margin: 0 10%;
}
.device-banner {
padding: 6% 0;
}
.course-card article .course-card-content .title-course {
min-height: 40px;
}
.course-card article .course-card-content p.description {
min-height: 55px;
}
.faq-page .course-tabs {
padding-left: 7%;
}
.btn-category {
font-size: 15px;
padding: 0;
}
.categorey-body a {
font-size: 14px;
}
.categorey-body {
padding: 0 5px;
}
}
@media (max-width: 1025px) {
a.btn.btn-overall {
padding: 1.5% 2.5%;
}
.device-banner {
padding: 6% 0;
}
.banner-section-text h1 {
width: 550px;
}
.banner-section-text h5 {
width: 800px;
}
.image-section img {
width: 70%;
}
#laptop {
right: -32rem;
top: 0;
}
#tablet {
right: 10rem;
top: 8rem;
}
#mobile-portrait {
right: 20rem;
top: 13.6rem;
}
#mobile-orientation {
right: 22rem;
top: 19.5rem;
}
#first {
right: 20rem;
top: 12rem;
}
#second {
right: 0;
top: 10rem;
}
.background-banner .image-section img {
width: 85%;
}
.about h5.card-title {
min-height: 4rem;
}
.btn.btn-toggle {
padding: 6px 10px;
width: 22%;
}
.detailed-tree .btn.btn-overall {
padding: 5px 15px;
}
.inline-video-jarallax .content,
.jarallax .content {
margin-left: 50px;
}
.inline-video-jarallax .content .wrap,
.jarallax .content .wrap {
width: 90%;
}
.breadcrumb {
margin-left: 40px;
}
img.icon-image {
width: 55%;
height: fit-content;
}
.testimonial-content .body-section:first-child {
height: 12rem;
}
.sdg-section .card-body {
min-height: 12em;
}
.partner .card-text {
min-height: 9em;
}
.course-tabs {
padding-left: 5%;
}
.course-tabs a {
padding: 10px 15px;
}
.footer-text li {
padding: 0 0.2rem;
}
.bordered-left {
padding-left: 0.5rem;
}
.contact-card {
padding: 23% 0;
}
}
@media (max-width: 990px) {
#laptop {
right: -32rem;
top: 0;
}
#tablet {
right: 10rem;
top: 7.5rem;
}
#mobile-portrait {
right: 20rem;
top: 13rem;
}
#mobile-orientation {
right: 20rem;
top: 20.5rem;
}
.header-section {
margin: 4% 0;
}
.btn.btn-toggle {
padding: 6px 8px;
width: 24%;
}
.leftq {
top: -5%;
left: 5%;
}
.rightq {
bottom: 30%;
right: 2%;
}
hr.line-footer {
margin: 1% 5%;
}
.detailed-tree .btn.btn-overall {
padding: 5px 10px;
}
.course-tabs a {
padding: 10px 30px;
}
.about-individual {
border-right: 25px solid #404040;
}
.about-corporate {
border-left: 25px solid #fff;
}
.banner-section-text h1 {
width: 400px;
}
.image-section img {
width: 60%;
}
}
@media (max-width: 800px) {
.btn.btn-toggle {
padding: 6px 0;
width: 18%;
}
.about-individual {
border-right: 25px solid #404040;
}
.about-corporate {
border-left: 25px solid #fff;
}
.banner-section-text h1 {
width: 400px;
}
.image-section img {
width: 60%;
}
.btn.btn-toggle {
padding: 6px 0;
width: 18%;
}
.about .card {
width: fit-content;
}
.category-heading {
padding: 0;
}
#laptop {
right: -38rem;
top: 3rem;
}
#tablet {
right: 5rem;
top: 9.5rem;
}
#mobile-portrait {
right: 14rem;
top: 14rem;
}
#mobile-orientation {
right: 13rem;
top: 19.5rem;
}
.btn.btn-toggle {
top: 4%;
width: 22%;
}
.testimonial-content .body-section:first-child {
height: 4rem;
}
blockquote {
padding: 0 12%;
}
.rightq {
bottom: 40%;
right: 10%;
}
.leftq {
top: 0;
left: 10%;
}
#first {
right: 13rem;
top: 10rem;
}
#second {
right: -3rem;
top: 7rem;
}
.background-banner .image-section img {
width: 70%;
}
section.background-banner {
margin-bottom: 0;
}
.sdg-section .card-body {
min-height: 15em;
}
.partner .card-title {
min-height: 4.5em;
}
.course-tabs {
padding-left: 5%;
}
.course-tabs a {
padding: 10px 20px;
}
.scroll-tabs {
overflow: auto;
box-shadow: 0 3px 6px #00000029;
}
.course-tabs {
overflow-x: auto;
flex-wrap: nowrap;
padding: 0 5%;
}
.faq-page .course-tabs {
min-width: 135%;
}
.profile-row .course-tabs {
min-width: 200%;
}
.courses-detail-row .course-tabs {
min-width: 115%;
}
.auth-reset {
margin-bottom: -4%;
}
.modal .ticket-modal iframe {
min-height: 600px;
}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.banner-section-text h5 {
width: 650px;
}
#first {
right: 14rem;
top: 9rem;
}
#second {
right: 0;
top: 7.5rem;
}
}
@media (max-width: 767px) {
a {
font-size: 15px;
}
.banner-section-text h1,
.banner-section-text h5 {
width: auto;
}
.navbar-nav .dropdown-menu.profile-menu.show {
position: fixed;
float: none;
top: 7%;
right: 0;
}
#mobile-orientation {
right: 17rem;
top: 19rem;
}
#mobile-portrait {
right: 16rem;
top: 13rem;
}
#tablet {
right: 5rem;
top: 7.5rem;
}
#laptop {
right: -38rem;
top: 0;
}
.device-banner .image-section {
margin: 40%;
}
#laptop {
right: -35rem;
top: -2rem;
}
#tablet {
right: 8rem;
top: 4rem;
}
#mobile-portrait {
right: 18rem;
top: 8.2rem;
}
#mobile-orientation {
right: 17rem;
top: 12.5rem;
}
.tour-section {
padding: 4% 0;
}
.banner-section-text {
padding: 0 5%;
}
.header-section,
.body-section {
margin: 4% 2%;
}
.image-section img {
width: 55%;
}
.desktop {
display: none;
}
.contact-card {
padding: 12% 6%;
}
.error-modal .modal-accept {
font-size: 12px;
}
.row.column-reverse {
flex-direction: column-reverse;
}
.profile-row .row.courses-filter {
margin-left: 4%;
margin-right: 4%;
}
}
@media (max-width: 600px) {
.mobile {
display: block;
}
.auth-login {
padding: 20% 5%;
}
blockquote {
padding: 0 15%;
}
.btn.btn-toggle {
top: 5%;
width: 30%;
}
.testimonial-content .body-section:first-child {
height: 4rem;
}
.rightq {
bottom: 25%;
right: 4%;
}
.course-tabs {
box-shadow: 4px 4px 8px #0000004d;
background: #fff;
padding-left: 0;
}
.course-tabs li.nav-item {
padding: 1rem 0.5rem;
}
.course-tabs a {
color: #404040;
border: none;
border-radius: 50rem !important;
-moz-border-radius: 50rem !important;
-webkit-border-radius: 50rem !important;
}
.nav-pills .nav-link.active {
box-shadow: none;
border: 1px solid #ee4089;
}
.inline-video-jarallax .content,
.jarallax .content {
margin-top: -18%;
margin-left: 18px;
}
.inline-video-jarallax .content .wrap,
.jarallax .content .wrap {
width: auto;
}
.breadcrumb {
margin-left: 8px;
}
.detailed-tree span.span-space {
display: initial;
}
.course-tabs a {
padding: 5px 20px;
}
#back-top {
background-color: #acade5;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
position: inherit;
bottom: 0;
right: 0;
width: 100%;
height: 60px;
border: none;
visibility: visible;
opacity: 1;
}
#back-top span {
display: inline-block;
padding-right: 1em;
}
#back-top::after {
line-height: 60px;
color: #fff;
background: #404040;
padding: 2%;
border-radius: 50%;
border: 2px solid #fff;
}
#support {
font-size: 12px;
right: 73%;
bottom: 15px;
}
#support::after {
line-height: 30px;
}
.device-banner {
margin-top: 19%;
}
#first {
right: 18rem;
top: 3rem;
}
#second {
right: 2rem;
top: 2rem;
}
.companies.row,
.sdg-section .body-section .row {
flex-wrap: nowrap;
flex-direction: row;
overflow: auto;
-webkit-box-pack: end !important;
justify-content: end !important;
}
.companies .col-md-4,
.sdg-section .body-section .row .col-md-3 {
margin: 5% 0;
}
.companies .partner,
.sdg-section .body-section .row .card {
width: 255px;
}
.sdg-section .card-body {
min-height: 9em;
}
.partner .card-header {
height: 93px;
}
.partner .card-header img {
object-fit: fill;
}
.partner .card-title {
min-height: 2.5em;
}
.faq-page .course-tabs {
min-width: 150%;
}
li.nav-item.user-guide {
margin-left: 0;
}
li.nav-item.user-guide a {
margin-top: 0;
}
.faq-page .tab-content {
margin: 4%;
}
.auth-reset .bg-overlay {
padding: 20% 4%;
}
.modal .ticket-modal iframe {
min-height: 400px;
}
.contact-card {
padding: 12% 6%;
}
.error-modal .modal-accept {
font-size: 12px;
width: auto;
}
.row.column-reverse {
flex-direction: column-reverse;
}
.counter-right {
text-align: center;
}
.counter-section {
border-right: none;
}
.courses-filter .btn-submit {
padding: 0.385rem 0.75rem;
right: 15px;
}
.purchase-total {
padding: 1% 10%;
}
.mobile {
display: block;
}
.auth-login {
padding: 20% 5%;
}
.btn.btn-toggle {
top: 5%;
width: 30%;
}
.rightq {
bottom: 25%;
right: 4%;
}
.course-tabs {
box-shadow: 4px 4px 8px #0000004d;
background: #fff;
padding-left: 0;
}
.course-tabs li.nav-item {
padding: 1rem 0.5rem;
}
.course-tabs a {
color: #404040;
border: none;
border-radius: 50rem !important;
-moz-border-radius: 50rem !important;
-webkit-border-radius: 50rem !important;
}
.clients .vueperslides__bullet {
display: none;
}
.nav-pills .nav-link.active {
box-shadow: none;
border: 1px solid #ee4089;
}
.inline-video-jarallax .content,
.jarallax .content {
margin-top: -18%;
margin-left: 18px;
}
.inline-video-jarallax .content .wrap,
.jarallax .content .wrap {
width: auto;
}
.breadcrumb {
margin-left: 8px;
}
.detailed-tree span.span-space {
display: initial;
}
.course-tabs a {
padding: 5px 20px;
}
#back-top {
background-color: #acade5;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
position: inherit;
bottom: 0;
right: 0;
width: 100%;
height: 60px;
border: none;
visibility: visible;
opacity: 1;
}
#back-top span {
display: inline-block;
padding-right: 1em;
}
#back-top::after {
line-height: 60px;
color: #fff;
background: #404040;
padding: 2%;
border-radius: 50%;
border: 2px solid #fff;
}
.device-banner {
margin-top: 18%;
}
#first {
right: 18rem;
top: 3rem;
}
#second {
right: 2rem;
top: 2rem;
}
.companies.row,
.sdg-section .body-section .row {
flex-wrap: nowrap;
flex-direction: row;
overflow: auto;
-webkit-box-pack: end !important;
justify-content: end !important;
}
.companies .col-md-4,
.sdg-section .body-section .row .col-md-3 {
margin: 5% 0;
}
.companies .partner,
.sdg-section .body-section .row .card {
width: 255px;
}
.sdg-section .card-body {
min-height: 9em;
}
.partner .card-header {
height: 93px;
}
.partner .card-header img {
object-fit: fill;
}
.partner .card-title {
min-height: 2.5em;
}
.faq-page .course-tabs {
min-width: 150%;
}
li.nav-item.user-guide {
margin-left: 0;
}
li.nav-item.user-guide a {
margin-top: 0;
}
.faq-page .tab-content {
margin: 4%;
}
.auth-reset .bg-overlay {
padding: 20% 4%;
}
.modal .ticket-modal iframe {
min-height: 400px;
}
span.slider-pagination-bullet {
margin: 0 10px !important;
}
span.slider-pagination-bullet {
height: 12px !important;
width: 12px !important;
}
span.slider-pagination-bullet.slider-pagination-bullet-active {
height: 14px !important;
width: 14px !important;
}
.faq-page {
margin-bottom: 10%;
}
.footer-text ul {
list-style: none;
display: block;
text-align: left;
}
.bordered-left {
background: 0 0;
}
}
@media (max-width: 480px) {
.device-banner {
padding: 15% 0;
min-height: 29rem !important;
height: 29rem !important;
}
.image-section img {
width: 45%;
}
#mobile-orientation {
right: 6.5rem;
top: 9rem;
}
#mobile-portrait {
right: 9rem;
top: 5.5rem;
}
#tablet {
right: 0;
top: 2rem;
}
#laptop {
right: -42rem;
top: -3rem;
}
.btn.btn-toggle {
font-size: 14px;
}
span.quotes {
font-size: 6rem;
padding: 0 6%;
}
.rightq {
bottom: 20%;
right: 0;
}
.leftq {
top: -10%;
left: 0;
}
.btn.btn-toggle {
top: 3%;
width: 42%;
}
.inline-video-jarallax .content,
.jarallax .content {
margin-top: -24%;
margin-left: 12px;
}
.breadcrumb {
margin-left: 5px;
font-size: 12px;
}
.course-tabs a,
li.nav-item.user-guide a {
padding: 5px 10px;
font-size: 13px;
}
.course-card article .course-card-content .course-card-header p {
color: #666;
display: inline-grid;
font-size: 15px;
padding: 2px 10px;
}
.background-banner .image-section img {
width: 55%;
}
#first {
right: 9rem;
top: 7rem;
}
#second {
right: -4rem;
top: 5rem;
}
.faq-page .course-tabs {
min-width: 200%;
margin-top: -7%;
}
.faq-topic {
font-size: 15px;
}
.faq-page .card-header {
padding: 0.25rem;
}
.contact-card {
padding: 6% 2%;
}
.contact-overlay .contact-card {
margin-top: 15%;
}
.auth-reset .bg-overlay {
padding: 25% 4%;
}
.auth-reset {
margin-bottom: -6%;
}
.footer-text ul {
margin-left: -12%;
text-align: center;
}
.row-description .about h2,
.row-description .faq h2,
.row-description .prerequisites h2 {
font-size: 24px;
}
.course-card-content .row-description li,
.course-card-content .row-description p,
.dropdown-p {
font-size: 15px;
}
.row-description .response h3 {
font-size: 16px;
}
.navbar-nav .dropdown-menu.profile-menu.show {
top: 10%;
}
#ModalCoporateForm .modal-content .modal-header .close {
position: absolute;
top: 4em;
right: 27px;
}
#ModalCoporateForm .modal-content .form-modal {
padding: 0;
}
.courses-filter .form-control {
font-size: 15px;
}
.footer-text ul {
margin-left: -12%;
text-align: center;
}
.footer-right.footer-icons {
margin-top: 2%;
margin-bottom: 4%;
}
.footer-right.footer-icons a {
padding: 0 0.5rem;
}
.footer-span {
padding-top: 5%;
}
.connectImgSection .card-footer {
background-color: #fff;
display: block;
justify-content: unset;
}
.connectCardBody {
padding: 10px 20px !important;
}
.top-msg {
padding-left: 2rem !important;
}
}
@media (max-width: 384px) {
.inline-video-jarallax .content,
.jarallax .content {
margin-top: -28%;
margin-left: 12px;
}
.profile-row .course-tabs {
min-width: 225%;
}
}
@media (min-width: 320px) and (max-width: 360px) {
.breadcrumb {
margin-left: 0;
}
.breadcrumb-item a {
font-size: 11px;
}
.courses-detail-row .course-tabs {
min-width: 135%;
}
}
@media (max-width: 320px) {
.image-section img {
width: 35%;
}
#laptop {
right: -44rem;
}
#tablet {
right: -2rem;
top: 1rem;
}
#mobile-portrait {
right: 7rem;
top: 4rem;
}
#mobile-orientation {
right: 3.5rem;
top: 7rem;
}
.tour-section {
padding: 0 0;
}
.btn.btn-toggle {
font-size: 12px;
}
span.quotes {
font-size: 4rem;
}
.leftq {
top: -2%;
left: -1%;
}
.jarallax-img {
height: 195px;
}
.courses-filter .form-control {
font-size: 14px;
}
.course-card article .thumbnail img {
min-width: 250px;
min-height: 150px;
}
.course-card article .course-card-content p.description {
min-height: auto;
font-size: 14px;
}
.course-card article .course-card-content .readmore,
.course-card-content .row-description li,
.course-card-content .row-description p,
.course-tabs a,
.dropdown-p,
li.nav-item.user-guide a {
font-size: 12px;
}
.row-description .about h2,
.row-description .faq h2,
.row-description .prerequisites h2 {
font-size: 22px;
}
#second {
right: -5rem;
top: 6.5rem;
}
#second img {
width: 50%;
}
#first {
right: 9rem;
top: 7rem;
}
#first img {
width: 80%;
}
.faq-page .course-tabs {
min-width: 235%;
margin-top: -7%;
}
.footer-right.footer-icons a {
padding: 0 0.3rem;
}
.footer-right.footer-icons a img {
width: 16%;
}
.footer-text a {
font-size: 11px;
}
}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@media (min-width: 1444px) {
.evaluate-section {
padding: 4% 6%;
}
}
@media (min-width: 1024px) and (max-width: 1444px) {
.evaluate-section {
padding: 4% 6%;
}
}
@media (max-width: 1281px) {
.evaluate-section {
padding: 4% 8%;
}
}
[class*=" fa-"] {
font-size: 1.1rem;
}
.star-rating .fa-star {
color: #404040;
}
#newCourseModal .modal-content {
width: 900px;
margin-top: 48%;
margin-left: -20%;
min-height: 408px;
}
#newCourseModal .modal-content .modal-body {
padding: 0;
}
#newCourseModal .modal-content .modal-body .modal-row {
min-height: 408px;
color: #fff;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue {
background: url(/images/newcourse/Solid.svg);
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .close {
float: left;
padding: 5%;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content {
padding: 15% 15%;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content h1 {
font-size: 36px;
font-weight: bolder;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content p {
font-size: 24px;
font-weight: bolder;
margin-bottom: 4rem;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content a {
font-size: 15px;
font-weight: bolder;
margin: auto;
border: 2px solid #fff;
border-radius: 25px;
background-color: #ed1e79;
padding: 5px 20px;
color: #fff;
margin-left: 25%;
margin-top: 5%;
}
.newcourse-logo {
float: right;
width: 120px;
margin-top: 10px;
}
.newcourse-arrow {
width: 20px;
}
.newcourse-building {
margin-left: -27px;
margin-top: 34px;
width: 361px;
}
@media (min-width: 1024px) and (max-width: 1444px) {
#newCourseModal .modal-content {
margin-top: 28%;
margin-left: -35%;
}
}
@media (max-width: 767px) {
#newCourseModal .modal-content {
width: 339px;
margin-top: 36%;
margin-left: 10px;
min-height: 340px;
}
#newCourseModal .modal-content .modal-body .modal-row {
min-height: 340px;
color: #fff;
margin: unset;
margin-right: 15px;
margin-left: -15px;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue {
background: url(/images/newcourse/Solid.svg);
background-repeat: initial;
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content {
padding: 16% 5%;
}
#newCourseModal
.modal-content
.modal-body
.modal-row
.solid-blue
.content
h1 {
font-size: 32px;
font-weight: bolder;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content p {
font-size: 22px;
font-weight: bolder;
margin-bottom: 3rem;
}
#newCourseModal .modal-content .modal-body .modal-row .solid-blue .content a {
font-size: 12px;
font-weight: bolder;
margin: auto;
border: 2px solid #fff;
border-radius: 25px;
background-color: #ed1e79;
padding: 5px 20px;
color: #fff;
margin-left: 25%;
margin-top: 5%;
}
}
#tour_video {
bottom: 10px;
left: 100px;
opacity: 1;
visibility: visible;
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
color: #fff;
font-size: 14px;
padding: 0.4% 1.5%;
}
#tour_video {
display: inline-block;
background-color: #404040;
text-align: center;
position: fixed;
transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
z-index: 1000;
border: 2px solid #fff;
}
video#bghid {
width: 100%;
float: left;
margin-top: 40px;
height: unset;
}
#tour_video:hover {
cursor: pointer;
background-color: #05b4cb;
}
video#bgvid {
width: 100%;
float: left;
margin-top: 40px;
height: 500px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
/* background-clip: padding-box; */
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.open > .dropdown-menu {
display: block;
}
.dropdown-menu-right {
left: auto;
right: 3%;
}
.dropdown-menu-right-connect {
left: auto;
right: 11%;
position: absolute !important;
top: 100% !important;
}
.dropdown-menu-right-resources {
left: auto;
right: 16%;
position: absolute !important;
top: 100% !important;
}
.connect-menu {
width: 100px !important;
}
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav .dropdown-menu {
position: fixed;
width: 100%;
top: 10%;
}
}
.sessions-card {
color: #404040;
}
.sessions-card .active a {
color: #404040;
}
.session-calendar {
color: #c0c0c0;
font-size: 11px;
}
.session-time {
float: right;
margin-right: 40px;
color: #c0c0c0;
font-size: 11px;
}
.session-card-content {
padding-left: 13px;
}
.session-card-content p {
font-size: 15px;
}
.session-card-calendar {
margin-bottom: 0;
}
.session-card-calendar {
margin-bottom: 0;
}
.btn-overall.btn_more_details {
background: #fff;
border: 2px solid #f87522;
color: #404040;
padding: 0.3rem 1rem !important;
font-size: 11px;
}
.btn-overall.btn_more_details:hover {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 1rem !important;
font-size: 11px;
}
.btn-overall.btn_watch_video {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 0.3rem !important;
font-size: 11px;
}
.btn-overall.btn_take_course {
background: #fff;
border: 2px solid #f87522;
color: #404040;
padding: 0.3rem 0.3rem !important;
font-size: 11px;
}
.full-list {
float: right;
}
.full-list:hover {
color: #999;
text-decoration: none;
}
.card.resources {
width: 100%;
height: 300px;
color: #d6d600;
}
.resources .card-img {
width: 100%;
height: 100%;
background-color: white;
background-position: top;
background-size: contain;
transition: all 0.3s ease-in-out;
opacity: 1;
background-repeat: no-repeat;
}
.card.resources:hover .card-img,
.card.resources:focus .card-img {
transform: scale(1.02);
opacity: 0.5;
}
.card.resources:hover .card-img-overlay {
color: #fff;
}
.resources .card-img-overlay > h4,
.resources .card-img-overlay > p,
.resources .card-img-overlay > a {
visibility: hidden;
}
.resources .card-img-overlay:hover h4,
.resources .card-img-overlay:hover p,
.resources .card-img-overlay:hover a {
visibility: visible;
}
.card.resources:hover .card-img-overlay p {
font-size: 1.5em;
letter-spacing: 0.02em;
}
.card.resources .card-title {
color: #404040;
font-weight: 600;
text-align: center;
margin: 0 auto;
}
.card.resources {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
border: none;
}
.header-with-line {
font-size: 18px;
font-weight: 600;
}
.hrHeading hr {
border-bottom: 3px solid #ef8a32;
width: 10%;
margin-top: 0;
margin-inline-start: unset;
}
.about-sidebar-title {
padding-top: 20px;
margin-bottom: 0;
}
.no-padding-right {
padding-right: 0 !important;
}
.no-padding-left {
padding-left: 0 !important;
}
.upcoming-card {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
border: none;
}
.upcoming-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.inside-blog-image {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.upcoming-card .session-time {
float: unset;
margin-right: 0;
color: #c0c0c0;
font-size: 11px;
}
.upcoming-card .card-title {
font-size: 18px;
}
.upcoming-card .card-text {
font-size: 14px;
}
.breadcrumb-item.active a {
color: #fff;
font-weight: 600;
}
.previous_h2 {
color: #404040;
font-weight: 600;
font-size: 38px;
}
.previous_p {
color: #404040;
font-size: 14px;
}
.session_details-panel .nav-tabs li {
width: 25%;
text-align: center;
}
.session_details-panel .nav-pills .nav-item a {
font-size: 16px;
color: #404040;
}
.session_details-panel .nav-pills .nav-item a:hover {
text-decoration: none;
}
.session_details-panel .nav-pills .nav-item.active a {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 2rem !important;
border-radius: 22px;
}
.btn_login_active {
background: 0 0;
border: 2px solid #707070;
color: #404040;
padding: 0.3rem 1rem !important;
}
.btn_register_active {
background: #707070;
border: 2px solid #707070;
color: #fff;
padding: 0.3rem 1rem !important;
}
.btn_register_active:hover {
color: #fff;
text-decoration: none;
}
.courses-page {
min-height: 79%;
}
.scroll-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background: #f87522 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
opacity: 1;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
transform: scale(1.2);
margin-top: 1px;
}
.verify-page p {
color: #707070;
font-size: 18px;
margin-left: 12%;
}
.card-text p {
font-size: 15px;
}
.card-text.paragragh {
color: #424242;
font-weight: bold;
margin-bottom: 7px;
}
.comment-box.add-comment {
background-color: transparent;
border: none;
position: relative;
margin-bottom: 50px;
}
.commenter-pic {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 100%;
border: 2px solid #fff;
overflow: hidden;
background-color: #fff;
}
.form-control.text-input {
border-top: 0px;
border-bottom: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
outline: 0px;
box-shadow: none;
border-radius: 0;
width: 100%;
padding: 0;
font-weight: normal;
}
.commentor-name {
width: 100%;
padding-left: 75px;
position: absolute;
top: 20px;
left: 0px;
}
.submitbuttons {
margin-top: 1rem;
text-align: right;
}
.btn.btn-outline-dark.btn-cancel {
border-radius: 22px;
background-color: none;
border: none;
color: #707070;
font-size: 14px;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px;
}
.button.button-submit {
background-color: #6fc6b8;
border-radius: 22px;
border: none;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 26px;
}
.replies {
margin-left: 2rem;
}
#saveLikeDislike {
color: #707070;
}
.like-count {
margin-left: 0.2rem;
color: #707070;
}
.activity-like-count {
color: #707070;
margin-left: -4px;
}
#saveLikeDislike {
color: #707070;
}
.dislike-count {
margin-left: 0.3rem;
color: #707070;
}
.replylink {
text-decoration: none;
color: #707070 !important;
}
#showRepliesLink {
text-decoration: none;
color: #6bc7b8 !important;
margin-left: 1.5rem;
}
.card-img.avatar-small.rounded-circle.disc-img {
width: 60px;
height: 60px;
margin-top: 1rem;
float: right;
}
#sectionReplies {
display: none;
margin-left: 1rem;
}
#SectionName {
display: none;
}
.nav-brand-v2 {
margin-left: 3rem;
}
.nav-brand-v2 img {
width: 265px;
}
.nav-brand-v1 img {
width: 224px;
}
.sessions-card article {
min-height: 460px;
max-height: 460px;
}
@media (min-width: 768px) {
.navbar-expand-md .navbar-collapse {
display: -webkit-box !important;
display: flex !important;
flex-basis: auto;
margin-right: 0;
}
}
.home-sessions {
background: #fcf6f0;
}
.resource_title {
color: #404040;
font-weight: 600;
font-size: 26px;
}
.nav-tabs .active a {
font-weight: 600;
color: #f87522;
text-decoration: underline;
}
.navbar-brand-v2 {
margin-left: 2rem;
}
.banner-section-text {
margin-top: 2%;
}
.general-section {
padding-bottom: 20px;
}
.btn-overall.btn_resource {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
position: absolute;
margin-top: 98%;
font-size: 14px;
}
.btn-overall.btn_resource i {
font-size: 14px;
}
#file-upload-form {
margin: auto;
width: 60%;
margin-top: 2rem;
}
#file-upload-form .file-background {
background: #f5f6fa;
padding: 1rem;
border-radius: 1rem;
}
#file-upload-form .form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #888888;
background-color: #cbc5c627;
/* background-clip: padding-box; */
border: 1px solid #ced4da;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#file-upload-form textarea.form-control {
height: auto;
}
#file-upload-form .button {
background: #f18a21;
border: none;
border-radius: 3px;
color: white;
display: inline-block;
font-size: 11px;
letter-spacing: 0.02em;
padding: 10px 20px;
text-align: center;
}
#file-upload-btn {
margin: auto;
}
#file-upload-btn:hover {
background: #f18a21;
}
.file-upload-form {
margin: auto;
width: 60%;
margin-top: 2rem;
}
.file-upload-form .file-background {
background: #f5f6fa;
padding: 1rem;
border-radius: 1rem;
}
.file-upload-form .form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #888888;
background-color: #cbc5c627;
/* background-clip: padding-box; */
border: 1px solid #ced4da;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.file-upload-form textarea.form-control {
height: auto;
}
.file-upload-form .button {
background: #f18a21;
border: none;
border-radius: 3px;
color: white;
display: inline-block;
font-size: 11px;
letter-spacing: 0.02em;
padding: 10px 20px;
text-align: center;
}
.file-upload-btn {
margin: auto;
}
.file-upload-btn:hover {
background: #f18a21;
}
.dropzone-wrapper {
border: 2px dashed #c2cdda;
color: #707070;
position: relative;
height: 300px;
}
.dropzone-wrapper-modal {
border: 2px dashed #c2cdda;
color: #707070;
position: relative;
height: 300px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 100%;
top: 1rem;
font-size: 16px;
cursor: pointer;
}
.dropzone-desc-modal {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 100%;
top: 1rem;
font-size: 16px;
cursor: pointer;
}
.dropzone,
.dropzone:focus {
position: absolute;
outline: none !important;
width: 100%;
height: 150px;
cursor: pointer;
opacity: 0;
}
.dropzone-modal,
.dropzone-modal:focus {
position: absolute;
outline: none !important;
width: 100%;
height: 150px;
cursor: pointer;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.dropzone-wrapper-modal:hover,
.dropzone-wrapper-modal.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone-modal {
text-align: center;
}
.hidden {
display: none;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
.preview-zone-modal .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
.btn-overall.btn_upload {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 1rem !important;
font-size: 14px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
border-bottom: 1px solid #f4f4f4;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
#file-upload-form ul {
text-align: left;
font-size: 12px;
}
.btn-overall.btn_event {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 1rem !important;
font-size: 12px;
}
.btn-overall.btn_event_filter {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.1rem 2rem !important;
}
.filter_select {
border: 1px solid #f87522;
border-radius: 10px;
}
.filter_select:focus {
border-color: #6bc7b8;
outline: 0;
box-shadow: 0 0 0 2px rgb(223 242 246 / 25%);
}
.event_date_section {
background: #6bc7b8;
height: 100%;
border-radius: 5px;
}
.event_date_section p {
margin-bottom: 0;
}
.event-date {
text-align: center;
color: #fff;
font-size: 68px;
}
.event_month {
text-align: center;
color: #fff;
font-size: 20px;
}
.event_period {
color: #f18a21;
font-size: 24px;
}
.event_title {
font-size: 32px;
color: #404040;
font-weight: bold;
}
.btn-overall.btn_calendar {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
padding: 0.3rem 1rem !important;
}
@media (max-width: 1600px) {
.session_details-panel .nav-tabs li {
width: 27%;
}
.session_details-panel .nav-tabs .active a {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 0.3rem !important;
border-radius: 22px;
}
.session-panel .nav-tabs li {
width: 21%;
}
.verify-page h1 {
font-size: 44px;
}
.btn-overall.btn_take_course {
background: #fff;
border: 2px solid #f87522;
color: #404040;
padding: 0.3rem 0.3rem !important;
font-size: 11px;
}
.dropzone-wrapper {
border: 2px dashed #c2cdda;
color: #707070;
position: relative;
height: 400px;
}
.device-banner {
background: url(/images/backgrounds/BG_-_100_opacity.png);
background-repeat: no-repeat;
background-size: cover;
padding: 10% 0;
color: #fff;
padding-top: 15%;
}
}
@media (max-width: 1444px) {
.session_details-panel .nav-tabs .active a {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 0.3rem !important;
border-radius: 22px;
}
.navbar-brand {
margin-left: 2rem;
}
.btn-overall.btn_resource {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
position: absolute;
margin-top: 90%;
font-size: 14px;
}
}
@media (max-width: 1367px) {
.sessions-card article .thumbnail img {
min-height: 145px;
max-height: 145px;
}
.session-card-calendar {
display: block;
}
p.description {
font-size: 12px;
}
.title a {
font-size: 16px;
}
.session-panel .nav-tabs li {
width: 27%;
}
.btn-overall.btn_resource {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
position: absolute;
margin-top: 70%;
/* padding: 0.3rem 1rem !important; */
}
}
.rating {
display: flex;
}
.rating-input {
display: absolute;
cursor: pointer;
width: unset;
height: 1px;
bottom: 0;
left: 0;
font-size: 1px;
border: none;
background: 0 0;
opacity: 0;
padding: 0;
margin: 0;
}
.rating .btn-success {
background: #6fc6b8;
border: 2px solid #6fc6b8;
}
.rating .btn-sm,
.btn-group-sm > .btn {
padding: 0.25rem 0.25rem;
font-size: 12px;
line-height: 1.5;
border-radius: 0.2rem;
-webkit-border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
}
.rating .caption {
display: none;
}
button:focus {
outline: none;
}
.about-section .hrHeading {
margin-left: 17px;
}
.session_details-panel {
margin-top: 0;
margin-bottom: 2%;
}
.alignment-class {
margin: 0 7%;
}
.alignment-class-about {
margin: 0 4%;
}
.alignment-class-sessions {
margin: 0 2%;
}
#reloadComments .fa {
font-size: 14px !important;
padding-right: 0;
}
video#bghid {
width: unset;
float: left;
margin-top: 0;
height: 500px;
}
.session-card-content p {
font-family: Arial !important;
}
.card.resources .card-title {
font-size: 20px;
}
.blog-content p {
font-size: 15px;
}
.blog-content .title {
color: #404040;
font-weight: 600;
font-size: 18px;
}
.blog-content .card-title {
color: #404040;
font-weight: 600;
font-size: 18px;
}
@media (max-width: 1350px) {
.btn.btn-overall {
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
padding: 1.2% 5%;
width: auto;
position: relative;
z-index: 0;
overflow: hidden;
margin: 0 1px;
flex-grow: 1;
font-size: 11px;
}
.btn-overall.btn_resource {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
position: absolute;
margin-top: 70%;
}
}
.highcharts-legend {
display: none;
}
.highcharts-credits {
display: none;
}
.resource-tabs-spacing {
padding-left: 1rem;
padding-right: 1rem;
}
.all_ressource_title {
font-size: 18px;
font-weight: bold;
padding-left: 2rem;
}
video#bgresource {
width: 100%;
float: left;
margin-top: 0;
height: unset;
}
.webinar-card article {
min-height: 415px;
max-height: 460px;
}
.webinar-card .session-card-content p {
font-size: 18px;
font-weight: bold;
padding-left: 1rem;
padding-bottom: 1rem;
}
.jarallax .content .wrap h1 {
margin-bottom: 0;
}
.jarallax .content .wrap p {
color: #fff;
font-size: 18px;
}
.card.resource-filter {
width: 100%;
height: 85px;
}
.card.resource-filter {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
border: none;
}
.card.resource-filter .form-control {
border-radius: 10px;
}
.activity-button {
border-radius: 3rem;
}
.connectImg {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.connectImgSection {
display: flex;
}
.connectImgLeft {
margin-right: 1rem;
}
.connectRight {
flex: 11;
}
.connectInput {
border: none;
background-color: #fafafa;
width: 100%;
font-size: 12px;
}
.connectInput:focus {
outline: none;
}
.connectImgSection .card-footer {
background-color: #fff;
display: flex;
justify-content: space-between;
}
.connect-button {
background-color: #6bc7b8;
color: #fff;
/* padding: 10px; */
border: none;
border-radius: 22px;
text-decoration: none;
font-size: 12px;
/* width: 8vw; */
}
.inputImg {
color: black;
width: 14px;
margin-left: 10px;
cursor: pointer;
}
.commentsContainer {
flex-direction: column;
}
/* .commentImg {
flex: 2;
} */
.upperRow {
flex: 10;
}
.connectCardBody {
padding: 20px 40px;
}
.lowerCommentRow {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}
/* .upperCommentRow { */
/* width: 40%; */
/* display: flex; */
/* justify-content: space-between; */
/* } */
/* .name {
text-align: left;
color: #424242;
font-weight: bold;
} */
/* .time {
color: #707070;
font-weight: normal;
text-align: right;
} */
.top-msg {
color: #404040;
text-align: left;
font-family: Arial;
font-size: 16px;
padding-left: 4rem;
padding-top: 1rem;
}
.commentMain {
color: #404040;
text-align: left;
letter-spacing: 0.8px;
font-size: 12px;
}
.replySection {
display: none;
padding: 50px;
}
.inputRight {
flex: 10;
}
#imageInput,
#fileInput,
#gifInput {
display: none;
}
.upcoming-card.upcoming-side .card-title {
font-size: 15px;
}
.resource-tabs a {
font-size: 16px;
}
.nav-tabs.resource-tabs .active a {
font-weight: 600;
color: #ef8a32;
}
.total_ressource_title {
font-weight: bold;
padding-left: 2rem;
color: #f18a21;
}
.btn-arrow {
color: #fff;
background: 0 0;
border: none;
}
.arrow {
text-align: center;
height: 60px;
width: 80px;
margin: 0 0 0 -40px;
line-height: 60px;
position: absolute;
left: 49.85%;
bottom: 15%;
color: #fff;
font-size: 2.4em;
z-index: 100;
text-decoration: none;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
.bounce {
animation: bounce 2s infinite;
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
transform-origin: center bottom;
}
select.minimal {
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
}
select.minimal:focus {
background-image: linear-gradient(45deg, green 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, green 50%),
linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
border-color: green;
outline: 0;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.see-full-list {
color: #cecece !important;
font-weight: normal !important;
}
.all_resource_title {
display: inline-block;
}
.all_resource_title:after {
content: "";
/* This is necessary for the pseudo element to work. */
display: block;
/* This will put the pseudo element on its own line. */
width: 50%;
/* Change this to whatever width you want. */
padding-top: 5px;
/* This creates some space between the element and the border. */
border-bottom: 3px solid #f18a21;
/* This creates the border. Replace black with whatever color you want. */
}
.col-spacing {
padding-right: 5px !important;
padding-left: 5px !important;
}
.resources-divider {
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #cecece;
margin-top: 1rem;
}
.resources-divider-2 {
margin-bottom: 1rem;
border: 0;
border-top: 1px solid #cecece;
margin-top: 2rem;
}
.upcoming-card .card-body {
padding: 1rem;
}
.alignment-class-connect {
margin: 2% 2%;
}
.community-card article {
box-shadow: 4px 4px 8px #0000004d;
background: url(/images/backgrounds/community-page.svg);
background-repeat: repeat;
background-size: cover;
}
.community-card article {
padding-top: 3%;
padding-left: 3%;
}
.community-card-content .first-h1 {
margin-bottom: 0;
color: #f18a21;
font-weight: 600;
line-height: 1.2;
}
.community-card-content .second-h1 {
color: #6bc7b8;
font-weight: 600;
line-height: 1.2;
}
.sidebar-card article {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
}
.sidebar-card ul li a {
color: #404040;
font-weight: 400;
}
.sidebar-card ul li .nav-link:hover {
color: #404040;
font-weight: 400;
}
.sidebar-pl-4 {
padding-left: 4rem;
}
.sidebar-card ul li a.active {
color: #6bc7b8;
font-weight: bold;
}
.sidebar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(241, 138, 33, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.community-status {
position: absolute;
width: 100%;
margin-top: 5%;
}
.community-partcipants {
color: #f18a21;
text-align: center;
}
.community-countries {
color: #6bc7b8;
text-align: center;
}
.community-issues {
color: #c64033;
text-align: center;
}
.connect-icon {
display: block;
width: 60px;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
}
.icon-participants {
background-image: url(/images/icons/partcipants-icon-connect.svg);
margin-left: auto;
margin-right: auto;
}
.icon-countries {
background-image: url(/images/icons/location-icon-connect.svg);
margin-left: auto;
margin-right: auto;
}
.icon-issues {
background-image: url(/images/icons/issues-icon-connect.svg);
margin-left: auto;
margin-right: auto;
}
.status-numbers {
display: block;
font-size: 34px;
font-weight: 600;
}
.connect-card article {
background: #fff 0 0 no-repeat padding-box;
box-shadow: 4px 4px 8px #0000004d;
}
.connect-card article {
padding: 1% 3%;
}
.country-numbers {
color: #6bc7b8;
}
.profile-top {
margin-bottom: 5px;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 100%;
margin: auto;
background-size: cover;
}
.profile-details h1 {
font-size: 42px;
font-weight: 600;
}
.profile-details .more-information {
color: #707070;
font-size: 15px;
}
.profile-details .more-information-spacing {
margin-left: 3%;
}
.profile-details .profile-superpower {
font-size: 15px;
color: #707070;
text-decoration: none;
}
.profile-details .profile-buttons {
float: right;
}
.profile-lower {
margin-top: 0;
}
.profile-icon {
display: inline-block;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
}
.icon-project {
background-image: url(/images/icons/project-icon.svg);
}
.icon-groups {
background-image: url(/images/icons/profile-group.svg);
}
.view-project {
color: #6bc7b8;
}
.view-project .view-project-span {
vertical-align: top;
}
.view-groups {
color: #f18a21;
}
.view-groups .view-groups-span {
vertical-align: top;
}
.modal-backdrop {
background: unset;
}
.modal-backdrop.fade {
opacity: 1;
}
.fade:not(.show) {
opacity: 1;
}
.superpower-dialog {
top: 30%;
}
.ck-editor__editable {
color: #888888;
font-size: 15px;
}
.notifications-menu {
left: auto;
right: -50%;
position: absolute !important;
top: 100% !important;
width: 300px !important;
}
.messages-menu {
left: auto;
right: -36%;
position: absolute !important;
top: 100% !important;
width: 300px !important;
}
.btn-overall.btn_join_community {
background: #6bc7b8;
border: 2px solid #6bc7b8;
color: #fff;
padding: 0.3rem 1rem !important;
margin: 0;
}
.btn-overall.btn_join_requested {
background: #cecece;
border: 2px solid #cecece;
color: #404040;
padding: 0.3rem 1rem !important;
}
#map {
min-width: 600px;
min-height: auto;
width: 600px;
height: 600px;
}
.divider {
position: relative;
margin-bottom: 2%;
height: 1px;
margin-top: 2%;
}
.div-transparent::before {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 1px;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(transparent),
color-stop(#f87522),
to(transparent)
);
background-image: linear-gradient(
to right,
transparent,
#f87522,
transparent
);
}
.div-dot::after {
content: "";
position: absolute;
z-index: 1;
top: -4px;
width: 9px;
height: 9px;
background-color: #f87522;
border: 1px solid #f87522;
border-radius: 50%;
left: 50%;
right: 50%;
}
.group-card-content p {
margin-bottom: 10px;
}
.btn_not_inline {
display: block !important;
}
.btn_inline_block {
display: inline-block !important;
}
#messageSelect {
/* width: 15vw; */
border-radius: 29px;
}
.messageSearchBtn {
background-color: #f18a21;
border-radius: 22px;
border: none;
color: white;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 26px;
margin-left: 15px;
}
.newMessageBtn {
background-color: #fff;
color: #6fc6b8;
border-radius: 22px;
border: none;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 26px;
}
.fa-envelope {
font-size: 14px;
}
.message-tab-content {
width: 70%;
border-left: 1px solid #00000029;
}
*/ .rounded-pill {
border: 1px solid #e5e5e5;
margin-left: 10px;
cursor: pointer;
}
.rounded-pill .img-fluid {
width: 20px;
height: 20px;
border-radius: 50%;
}
.rounded-pill .fa-times {
color: #6fc6b8;
font-size: 10px;
}
.messageInput {
width: 100%;
}
.nav-pills .nav-link.active,
.nav-pills .show > .newMessageBtn {
color: #fff;
background-color: #6fc6b8;
}
.messageInputBox {
border: none;
background-color: #fafafa;
width: 100%;
font-size: 12px;
/* height: 3rem; */
font-size: 18px;
}
.sendMessage-button {
background-color: #cecece;
border-radius: 22px;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 26px;
}
.message-body {
min-height: 10vh;
/* max-height: 70vh; */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
font-size: 15px;
}
.tab-pane .card-header {
background-color: #fff;
}
#search_input,
.multiselect,
.multiselect-container {
border-radius: 20px;
}
.multiselect-option {
border: 1px solid #ebe6e6;
}
/* input[type=radio], input[type=checkbox] {
box-sizing: border-box;
padding: 0
} */
.form-check-input[type="checkbox"] {
border-radius: 0.5em;
}
.form-check-input:checked {
background-color: #6bc7b8;
border-color: #6bc7b8;
}
/* Chat containers */
.chat-container {
/* border: 2px solid #dedede;
background-color: #f1f1f1; */
border-radius: 5px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
/* Darker chat container */
.darker {
border-color: #ccc;
background-color: #ddd;
}
/* Clear floats */
.chat-container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.chat-container img {
float: left;
max-width: 60px;
/* width: 100%; */
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.chat-container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #707070;
font-weight: normal;
text-align: right;
font-size: 12px;
}
/* .connectImg {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
} */
.connectImgSection {
display: flex;
}
.connectInput:focus {
outline: none;
}
.connect-button {
background-color: #6bc7b8;
color: #fff;
border: none;
border-radius: 22px;
text-decoration: none;
font-size: 12px;
/* width: 8vw; */
}
.connect-font {
font-size: 14px;
color: #404040;
font-family: Arial;
}
.commentsContainer {
flex-direction: column;
}
.commentImg {
/* flex: 1; */
margin-right: 1rem;
}
.messageImg {
/* flex: 2; */
margin-right: 1rem;
}
.upperRow {
flex: 11;
}
.connectCardBody {
width: 100%;
/* padding: 20px 40px; */
flex-direction: column;
}
.lowerCommentRow {
display: flex;
justify-content: flex-start;
/* margin-top: 15px; */
align-items: center;
}
.upperCommentRow {
/* width: 55%; */
display: flex;
justify-content: space-between;
=======width: 55%;
display: flex;
justify-content: space-between;
}
.upperMessageRow {
/* width: 60%; */
display: flex;
justify-content: space-between;
}
.name {
text-align: left;
color: #424242;
font-weight: bold;
font-family: Arial;
}
.time {
color: #707070;
font-weight: normal;
text-align: right;
font-size: 11px;
}
.commentMain {
color: #404040;
text-align: justify;
letter-spacing: 0.8px;
font-size: 12px;
}
.replySection {
display: flex;
padding: 5px;
}
.inputRight {
flex: 10;
}
#imageInput,
#fileInput,
#gifInput,
#replyimageInput,
#replygifInput {
display: none;
}
.upcoming-card.upcoming-side .card-title {
font-size: 15px;
}
.commentImgInner {
width: 95%;
/* max-width: 1200px; */
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
grid-gap: 5px;
grid-auto-flow: dense;
}
.main-Commentimg {
max-height: 250px;
min-height: 80px;
object-fit: cover;
/* width: max-content; */
}
.commentImgInner img:nth-child(2) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* .commentImgInner img:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
} */
/* .commentImgInner img:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
} */
/* .commentImgInner img:nth-child(4n+1) {
grid-column-end: span 2;
grid-row-end: span 2;
} */
.responseSection {
/* padding: 80px; */
/* width: 70%; */
flex-direction: column;
}
.responseCommentRow {
/* width: 100%; */
display: flex;
justify-content: space-between;
}
.reply-reply {
padding-left: 50px;
}
.suggested-name {
list-style-type: none;
cursor: pointer;
}
.group-image {
width: 200px;
height: 200px;
border-radius: 100%;
margin: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.group-card article {
height: 75px;
}
.group-card article ul {
padding-top: 15px;
}
.profile-tabs .nav-item a {
color: #6bc7b8;
}
.group-tabs li.active a {
color: #f18a21;
}
.btn-overall.btn_create_group {
background: #6bc7b8;
border: 2px solid #6bc7b8;
color: #fff;
margin: 0;
margin-top: 15px !important;
float: right;
padding: 0.5% 2.5% !important;
font-size: 14px;
}
.fa-thumbs-up,
.fa-thumbs-down {
font-size: 14px;
cursor: pointer;
}
.group-details p {
font-size: 15px;
}
.group-details .group-card article {
height: 55px;
}
.group-details .group-card article ul {
padding-top: 8px;
}
.header-icon {
display: inline-block;
width: 25px;
height: 25px;
background-size: contain;
background-repeat: no-repeat;
}
.icon-messages {
background-image: url(/images/icons/message-icon.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
}
.icon-notifications {
background-image: url(/images/icons/notification-header.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.icon-notifications {
background-image: url(/images/icons/notification-header.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.notification a .badge {
top: 20px;
position: absolute;
right: 10px;
}
.badge .badge-primary {
color: #fff;
background-color: #f18a21;
}
.badge .badge-danger {
color: #fff;
background-color: #6bc7b8;
}
.group-icon {
display: inline-block;
width: 25px;
height: 25px;
background-size: contain;
background-repeat: no-repeat;
}
.group-card .nav-pills .nav-item .group-icon.activity-icon {
background-image: url(/images/icons/activity_feed_grey.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.group-card .nav-pills .nav-item.active .group-icon.activity-icon {
background-image: url(/images/icons/activity_feed_orange.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.group-card .nav-pills .nav-item .group-icon.resource-icon {
background-image: url(/images/icons/resources_grey.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.group-card .nav-pills .nav-item.active .group-icon.resource-icon {
background-image: url(/images/icons/resources_orange.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.group-card .nav-pills .nav-item .group-icon.forum-icon {
background-image: url(/images/icons/forums_grey.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.group-card .nav-pills .nav-item.active .group-icon.forum-icon {
background-image: url(/images/icons/forums_orange.svg);
margin-left: auto;
margin-right: auto;
margin-top: 3px;
width: 20px;
height: 20px;
}
.panel-group .panel-heading .panel-title {
color: #454545;
font-size: 11px;
line-height: 24px;
font-weight: 700;
background: #fff;
text-transform: uppercase;
transition: all 150ms ease-in;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.panel-group .panel-title > a {
display: block;
padding: 10px 20px;
}
.panel-title > a.collapsed:before {
font-family: "Font Awesome 5 Free";
float: right !important;
content: "\f067";
}
.panel-title > a:before {
float: right !important;
font-family: "Font Awesome 5 Free";
content: "\f068";
padding-right: 5px;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.nav-pills.course-tabs.connect_mobile_menu .nav-item.active .nav-link {
background: none;
border: none;
box-shadow: none;
transform: none;
}
.modal-lg,
.modal-xl {
max-width: 500px;
}
.add-topic-card article {
height: auto;
}
.forum-content .topic {
color: #f18a21;
font-size: 14px;
margin-bottom: 0;
}
.btn-overall.orange_bg {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 1rem !important;
}
.btn-overall.green_bg {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
padding: 0.3rem 1rem !important;
}
.side-icon {
display: inline-block;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
}
.list-nav .nav-link .activity-feed-icon {
background-image: url(/images/icons/home-community.svg);
margin-left: auto;
margin-right: auto;
width: 23px;
}
.list-nav .nav-link.active .activity-feed-icon {
background-image: url(/images/icons/home-community-active.svg);
margin-left: auto;
margin-right: auto;
width: 23px;
}
.list-nav .nav-link .our-reach-icon {
background-image: url(/images/icons/our-reach-icon.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link.active .our-reach-icon {
background-image: url(/images/icons/our-reach-icon-active.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link .discussion-icon {
background-image: url(/images/icons/discussion-forum.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link.active .discussion-icon {
background-image: url(/images/icons/discussion-forum-active.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link .group-community-icon {
background-image: url(/images/icons/group-community.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link.active .group-community-icon {
background-image: url(/images/icons/group-community-active.svg);
margin-left: auto;
margin-right: auto;
}
.list-nav .nav-link .profile-icon {
background-image: url(/images/icons/profile-community.svg);
margin-left: auto;
margin-right: auto;
width: 23px;
}
.list-nav .nav-link.active .profile-icon {
background-image: url(/images/icons/profile-community-active.svg);
margin-left: auto;
margin-right: auto;
width: 23px;
}
.side-hr {
margin-top: 0;
margin-bottom: 0;
border: 0;
border-top: none;
}
.btn_forum_position {
position: absolute !important;
right: 10%;
top: 24%;
}
.nav-pills.connect_mobile_menu .nav-item .nav-link.active {
color: #fff;
background-color: #fff;
border: none;
}
.forum-sidebar.sidebar-card ul li a.active {
color: #6bc7b8;
font-weight: normal;
}
.btn-overall.btn_create_group.btn-add_topic {
background: #6bc7b8;
border: 2px solid #6bc7b8;
color: #fff;
margin: 0;
margin-top: 15px !important;
float: right;
padding: 0.5% 4% !important;
font-size: 14px;
padding-right: 7% !important;
}
.top_message {
padding-left: 0;
}
.forum-sidebar article {
max-height: 600px;
height: auto;
overflow: auto;
}
.btn-overall.btn_create_group.btn_forum_view {
width: 38%;
}
@media (max-width: 1444px) {
.arrow {
text-align: center;
height: 60px;
width: 80px;
margin: 0 0 0 -40px;
line-height: 60px;
position: absolute;
left: 49.85%;
bottom: 7%;
color: #fff;
font-size: 2.4em;
z-index: 100;
text-decoration: none;
text-shadow: 0 0 3px rgb(0 0 0 / 40%);
}
#map {
min-width: 500px;
min-height: auto;
width: 500px;
height: 500px;
}
.community-card-content {
min-height: unset;
height: auto;
}
.webinar-card .session-card-content p {
font-size: 16px;
font-weight: bold;
padding-left: 0;
padding-bottom: 1rem;
}
.session-time {
float: right;
margin-right: 5px;
color: #c0c0c0;
font-size: 11px;
}
.community-status {
position: absolute;
width: 100%;
margin-top: 0;
margin-bottom: 5%;
}
.group-card .btn.btn-overall {
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
padding: 1.2% 5%;
width: auto;
position: relative;
z-index: 0;
overflow: hidden;
margin: 0 1px;
flex-grow: 1;
font-size: 14px;
}
.group-tabs li a {
font-size: 14px;
}
}
@media (max-width: 768px) {
.card.resource-filter {
width: 100%;
height: 100%;
}
.breadcrumb {
margin-left: 0px;
margin-top: 20px;
background-color: transparent;
}
.session-panel .nav-tabs a {
font-size: 14px;
color: #404040;
}
.session-panel .nav-tabs li.active a {
font-size: 14px;
color: #f18a23;
}
#map {
min-width: 380px;
min-height: auto;
width: 380px;
height: 347px;
}
.community-card article {
padding-top: 3%;
padding-left: 0;
height: 800px;
}
.community-status {
position: initial;
width: 100%;
margin-top: 0;
margin-bottom: 5%;
}
.connect_mobile_menu.course-tabs {
margin-bottom: 20px;
margin-top: 10px;
}
.group-row {
padding-left: 0;
padding-right: 0;
}
.group-row .group-card {
padding-left: 0;
padding-right: 0;
}
.group-card article {
height: 113px;
}
.group-tabs {
box-shadow: unset !important;
}
.group-card .btn.btn-overall.btn_join_community {
position: absolute;
right: 0;
}
.profile-image {
width: 110px;
height: 110px;
border-radius: 100%;
margin: auto;
background-size: cover;
}
.group-image {
width: 130px;
height: 130px;
border-radius: 100%;
margin: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.btn_create_group {
margin-top: 0 !important;
float: right;
}
.btn.btn-overall.btn_forum_details {
transform: translate(-100%, -50%);
}
.profile-row .course-tabs {
min-width: unset;
}
.courses-page {
min-height: 41rem;
}
.background-page {
min-height: 41rem;
}
.btn-overall.orange_bg {
background: #f87522;
border: 2px solid #f87522;
color: #fff;
padding: 0.3rem 0.5rem !important;
}
.btn-overall.green_bg {
background: #6fc6b8;
border: 2px solid #6fc6b8;
color: #fff;
padding: 0.3rem 0.5rem !important;
}
.mobile li.nav-item.section-auth {
display: block;
position: fixed;
right: 2% !important;
top: 2%;
}
.mobile li.nav-item.section-auth-2 {
display: block;
position: fixed;
right: 17%;
top: 3%;
}
.group-tabs .nav-item.border-right-group {
background-image: linear-gradient(
to right,
#dee2e6 1px,
rgba(255, 255, 255, 0) 1px
),
linear-gradient(to left, #dee2e6 1px, rgba(255, 255, 255, 0) 1px);
background-position: center;
background-size: 100% 25px;
background-repeat: no-repeat;
}
.group-card article ul {
padding-top: 15%;
}
.group-card-details article ul {
padding-top: 7%;
}
.footer-span {
text-align: end;
}
}
.messageSearchMobile {
font-family: "FontAwesome", "Second Font name";
}
.msg-title {
font-size: 1rem;
}
.multiselect-selected-text {
font-size: 0.95rem;
}
.edit-modal {
top: 30%;
padding: 10px;
}
.session-modal {
/* top: 30%; */
padding: 10px;
}
.fa-edit {
cursor: pointer;
}
.modal-footer button {
padding: 0.3rem;
font-size: 1rem;
}
.edit-item {
color: #f18a21;
}
.delete-item {
color: #6fc6b8;
}
.fa-edit,
.fa-trash {
font-size: 0.9rem;
}
.modal-footer button {
background-color: #6fc6b8;
width: 7vw;
border-radius: 20px;
}
.edit-modal-header,
.modal-body textarea {
border: 0;
}
.icon-text {
font-size: 0.9rem;
font-family: Arial;
font-weight: normal;
}
.ul-block {
columns: 2;
background-color: #f1f2f2 !important;
padding: 20px;
color: #0e73b7;
list-style: none;
}
.ul-block li {
padding: 8px !important;
}
.ul-block li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: #000151; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.ul-blocks {
columns: 1;
padding: 20px;
color: #757575;
list-style: none;
}
.ul-blocks li {
padding: 8px !important;
}
.ul-blocks li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: #000151; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.ol-block {
column: 2;
padding: 20px;
color: #0e73b7;
}
.ol-blocks {
columns: 1;
padding: 20px;
color: #0e73b7;
list-style: none;
}
.ol-blocks li {
padding: 8px !important;
counter-increment: list;
list-style-type: none;
position: relative;
}
.ol-blocks li::before {
content: counter(list) ".";
color: #000151; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.single-principle-page a.grey {
font-weight: 900;
color: #808285;
}
.single-principle-page .top-nav {
padding: 2% 0;
border-bottom: 1px solid #808285;
}
.single-principle-page .top-nav.no-bd {
border-bottom: 0;
}
.single-principle-page .nav button {
margin-top: -5px !important;
}
.single-principle-page .nav a,
.single-principle-page .nav span {
font-weight: 900;
color: #0071bc;
}
@media (max-width: 991px) {
.single-principle-page .top-nav {
text-align: center;
}
.single-principle-page .nav button,
.single-principle-page .nav a,
.single-principle-page .nav span {
float: none;
margin: 0.5% 0.5% 1%;
text-align: center;
}
}
@media (min-width: 992px) {
.single-principle-page .nav button,
.single-principle-page .nav a,
.single-principle-page .nav span {
float: right;
margin: 0 0.5%;
}
}
@media (max-width: 767px) {
.tbl-th {
color: #0071bc;
font-weight: 900;
line-height: 1.5 !important;
font-size: 1em !important;
/* width: 100%; */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@media (max-width: 450px) {
.single-principle-page .nav button {
display: none;
}
.ul-block {
columns: 1;
background-color: #f1f2f2 !important;
padding: 20px;
color: #0e73b7;
}
.ul-block li {
padding: 8px !important;
}
.ol-block {
columns: 1 !important;
padding: 20px;
}
}
@media (max-width: 340px) {
.single-principle-page .nav a {
display: block;
}
.single-principle-page .nav span {
display: none;
}
.ul-block {
columns: 1;
background-color: #f1f2f2 !important;
padding: 20px;
color: #0e73b7;
}
.ul-block li {
padding: 8px !important;
}
.ol-block {
columns: 1 !important;
padding: 20px;
}
}
.bold {
font-weight: 900;
}
.principle_content .panel {
margin: 1% 0;
}
.single-principle-page .principle-brief {
padding-top: 35px;
padding-bottom: 25px;
font-size: 1.2em;
}
.single-principle-page .principle_content .panel-heading {
background-color: #f1f2f2 !important;
padding: 0;
border-radius: 25px;
}
.single-principle-page .principle_content .panel-heading .panel-title {
width: 100%;
background: none;
border: none;
}
.single-principle-page .principle_content h6 a,
.single-principle-page .principle_content h6 a:hover {
color: #575962;
border-bottom: 0;
}
.single-principle-page .principle_content .panel-body {
margin: auto 2%;
}
.single-principle-page .principle_content strong {
font-weight: 600;
}
.single-principle-page .principle_content li {
/* color:#0071BC; */
}
.single-principle-page .principle_content em {
font-size: 0.8em;
}
.single-principle-page .principle_content img {
max-width: 100%;
height: auto;
}
.single-principle-page .panel-default > .panel-heading + .panel-collapse {
border: 0;
}
.single-principle-page .panel-group .panel-heading .panel-title {
font-size: 1em;
text-transform: inherit;
padding: 0.5%;
}
.single-principle-page .principle_content a {
color: #404040;
font-weight: normal;
font-size: 14px;
}
.single-principle-page .principle_content a:hover {
color: #404040;
}
.single-principle-page .principle_content a strong {
color: #404040;
font-weight: 900;
}
/* Table styling */
.single-principle-page .principle_content table {
margin: 2% auto;
border-collapse: collapse;
max-width: 80%;
width: auto !important;
border: 0;
}
.single-principle-page .principle_content tr:first-of-type td,
.single-principle-page .principle_content tr:first-of-type td strong {
color: #ffffff;
background: #f18a21;
font-weight: 900;
line-height: 1.5;
font-size: 16px;
}
.single-principle-page .principle_content table tr:first-child td:first-child {
border-top-left-radius: 10px;
}
.single-principle-page .principle_content table tr:first-child td:last-child {
border-top-right-radius: 10px;
}
.single-principle-page .principle_content table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.single-principle-page .principle_content table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
.single-principle-page .principle_content tr {
border-bottom: 1px solid #e9ecef;
/* cursor: pointer; */
}
.single-principle-page .principle_content tr:first-of-type:hover td {
background: #f18a21;
}
.single-principle-page .principle_content tr:hover td {
background: #fff;
}
.single-principle-page .principle_content table tr:last-child {
border-bottom: 0;
}
.single-principle-page .principle_content table tr td:first-of-type {
padding-left: 40px;
}
.single-principle-page .principle_content td,
th {
border: 0;
line-height: 1.2;
padding: 3px;
background-color: #f9f9f9;
}
.single-principle-page .principle_content div.table {
background-color: #f9f9f9;
border-radius: 15px;
}
.single-principle-page .principle_content div.table div.tbl-tr {
border-bottom: 1px solid #e9ecef;
padding-bottom: 18px;
padding-top: 0;
padding-right: 15px;
margin: 0;
}
.single-principle-page .principle_content div.table div.tbl-tr:hover {
background: #fff;
}
.single-principle-page .principle_content div.table div.tbl-tr div.tbl-th,
.single-principle-page .principle_content div.table div.tbl-tr div.tbl-td {
padding-left: 30px;
}
.single-principle-page .principle_content div.table div.tbl-tr div.tbl-th {
padding: 20px 0px 5px 30px;
}
.single-principle-page .principle_content div.table div.tbl-tr div.tbl-th,
.single-principle-page
.principle_content
div.table
div.tbl-tr
div.tbl-th
strong {
font-size: 0.9em;
line-height: 1.2;
text-transform: uppercase;
}
.table-header {
font-size: 14px;
color: #404040;
}
.panel-heading a:focus {
color: #f18a21;
}
td > p {
font-family: inherit;
font-weight: normal;
}
.notification-dialog .modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 2.3rem;
outline: 0;
overflow: hidden;
}
.notification-dialog .noti-success-header {
background: #f87522;
border: 1px solid #f87522 !important;
color: #fff !important;
padding: 0.375rem 0.1rem;
}
.notification-dialog .noti-header {
padding-top: 9%;
padding-left: 10%;
padding-right: 10%;
}
.notification-dialog .noti-sbutton {
width: 25%;
background: #f87522;
border: 1px solid #f87522 !important;
color: #fff !important;
padding: 0.375rem 0.1rem;
font-weight: normal;
}
@media all and (min-width: 992px) {
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
.navbar .nav-item:hover .nav-link {
display: block;
}
.navbar .nav-item:hover .resources {
display: block;
}
.navbar .nav-item .dropdown-menu {
margin-top: 0;
}
}
.session-hide {
display: none;
}
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav .nav-item.notification .dropdown-menu {
position: fixed;
width: unset;
top: 10%;
right: 10%;
}
}
.accordion-item.accordion__item.faq-item {
border: none;
}
.accordion__item {
/* border-top: 1px solid #3081c8;
border-bottom: 1px solid #3081c8; */
margin-bottom: 15px;
}
.accordion-item-header {
padding-bottom: 0;
margin-bottom: 0;
}
.accordion__item button {
position: relative;
width: 100%;
margin: 0;
padding: 16px 0 16px 15px;
border: 0;
outline: 0;
background-color: #0d629e;
color: #fff;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
font-size: 18px;
font-weight: 500;
}
.accordion__item-button.white-bg {
background-color: #fff;
color: #404040;
box-shadow: 0 3px 10px rgba(0,0,0,.1607843137254902);
padding: 10px 0 10px 30px;
font-weight: 400;
}
.faq-item .accordion__item-body {
padding-left: 30px;
margin-top: 15px;
}
.faq-item .accordion__item-body img{
width: -webkit-fill-available;
}
.blog-inner-details img{
width: 70% !important;
height:auto !important;
}
span.multiselect-native-select {
position: relative;
flex: 0 0 50%;
max-width: 50%;
}
.sessions-card.blog-card article {
min-height: 380px;
max-height: 460px;
}
@media (max-width: 767px) {
.navbar .mobile {
display: block;
}
}