body,html{padding:0;margin:0}
body{
font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;
color:#4f616d;
vertical-align:baseline;
font-size: 14px;
line-height: 1.42857143;
background: #F8F8F8;
position:relative;
}
div,p,h1,h2,h3,h4,h5,ul,a{margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{color:#26343f;text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 8px rgba(0,0,0,.1);line-height:1.2em}
a,a:focus{color:#696969;outline:0;text-decoration:underline;cursor:pointer}
input,input:focus,select,select:focus{outline:0!important}
a{text-decoration:none;}
a:focus,a:hover{color:#000;text-decoration:none}
p{margin:0px;}
ul{padding-left:0;margin:0;list-style:none}
sup{font-size:8px;font-style:normal;position:relative;top:-.04em;margin-right:3px;vertical-align:super}
#container{
width:900px;
margin-left:auto;
margin-right:auto;
}
.center{
text-align:center;
}
ul.menu{
margin-top:10px;
}
ul.menu li{
display:inline-block;
vertical-align: top;
width:290px;
height:200px;
margin-bottom:10px;
margin-right:10px;
font-size:15px;
}
ul.list{
padding:5px;
text-align:center;
font-weight:bold;
}
ul.list li{
padding:0px 10px 0px 10px;
color:#000;
display:inline-block;
vertical-align:top;
font-size: 20px;
}
ul.li li.last{
padding:0px 0px 0px 0px;
}
ul.menu li:nth-child(3n+0) {
margin-right:0px;
}
ul.menu li a{
display:block;
height:100%;
color:#FFFFFF;
padding: 10px;
}
ul.menu li a i{
color:#000;
}
.menu-icon-box{
background: #FFFFFF;
width: 30px;
height: 30px;
padding: 20px;
border-radius: 50%;
text-align: center;
font-size: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.color1{
background:#3BC1BA;
}
.color2{
background:#DA6A90;
}
.color3{
background:#7C4B82;
}
.color4{
background:#E9CB5D;
}
.color5{
background:#5ECD9A;
}
.color6{
background:#FB8F73;
}
ul.menu li div.text{
text-align:center;
font-weight:bold;
text-transform:uppercase;
margin-top:20px;
}
.content-header{
text-transform:uppercase;
margin-top:20px;
color:red;
}
.bullet{
color:red;
margin-right:10px;
}
.indent{
margin-right:22px;
}
.footer{
margin-top:50px;
margin-bottom:10px;
}
ul.footer-ul{
color:#000;
font-weight:bold;
}
ul.footer-ul li{
display:inline-block;
margin-right:20px;
}
.social-icons{
position:fixed;
right:0px;
top:150px;
font-size: 30px;
color: #FFFFFF;
z-index:1;
}
.social-icons .box{
width:30px;
text-align:center;
padding:5px;
}
.social-icons .box a{
display:block;
color:#FFFFFF;
}
.social-icons .box.login{
background:#44D9F9;
}
.social-icons .box.fb{
background:#4267b2;
}
.social-icons .box.tiktok{
background:#000;
}
.social-icons .box.instagram{
background:#feda75;
}
.social-icons .box.twitter{
background:#1DA1F2;
}
.social-icons .box.youtube{
background:#c4302b;
}
.social-icons .box.whatsapp{
background:#075E54;
}
.clear{
clear:both;
}
.bullet{
color:var(--primary);
margin-right:10px;
display:inline-block;
font-weight:bold;
width:15px;
vertical-align:top;
}
.bullet i{
margin-top:5px;
}
.bullet-text{
width:calc(100% - 30px);
display:inline-block;
vertical-align:top;
}
.dropdown{
position:relative;
display: none;
}
div.dropdown-content
{
background: #fff;
border: 1px solid #ccc;
border-top-color: rgb(204, 204, 204);
border-right-color: rgb(204, 204, 204);
border-bottom-color: rgb(204, 204, 204);
border-left-color: rgb(204, 204, 204);
border-color: rgba(0,0,0,.2);
color: #000;
position: absolute;
top: -10px;
right:0px;
z-index: 100;
width: 250px;
font-weight:normal;
border-radius: 0px 0px 6px 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown .tip
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
}
.dropdown .tip:before {
position: absolute;
top: -9px;
right: 5px;
border-left: solid 1px #dedede;
width: 1.5em; height: 1.5em;
transform: rotate(45deg);
background: white;
content: '';
transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
ul.more-menu{
font-size:17px;
margin-top:5px;
margin-bottom:5px;
}
ul.more-menu li{
padding:5px 10px 5px 20px;
}
ul.more-menu li:hover{
background:#FAFAFB;
}
ul.more-menu li a{
color:#000;
display:block;
}
ul.more-menu li a i{
margin-right:20px;
color:#44D9F9;
font-weight:bold;
}
.content-container{
background:#000;
}
.top-header{
background:#FFFFFF;
}
.top-header a{
color:#000;
}
.top-header li{
display:inline-block;
vertical-align:top;
padding:10px;
text-transform: uppercase;
font-weight:bold;
}
.top-header li.logo{
padding:10px;
}
.top-header ul{
text-align:center;
padding: 10px 0px 0px 0px;
}
.color-bar{
background:#44d9f9;
}
.tutors-box{
background:#67CCD8;
margin-top:20px;
color:#FFFFFF;
padding: 20px 0px 0px 0px;
}
ul.tutors{
padding:0px 0px 50px 0px;
}
ul.tutors li{
display:inline-block;
vertical-align: top;
width:290px;
margin-bottom:10px;
margin-right:10px;
font-size:15px;
text-align:center;
}
ul.tutors li .name-box{
margin-top:10px;
text-transform:uppercase;
font-weight:bold;
}
ul.tutors li img{
width:150px;
height:150px;
border-radius:50%;
}
ul.tutors li:nth-child(3n+0) {
margin-right:0px;
}
.content{
margin-top:10px;
margin-bottom:50px;
}
.mini-box{
width:500px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:50px;
}
/* Mobile CSS */
.disable{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.uppercase{
text-transform:uppercase;
}
.bold{
font-weight:bold;
}
input[type='search']:hover, input[type='submit']:hover, input[type='button']:hover, button:hover,.button:hover {
opacity: 0.75;
}
input[type='search'], input[type='submit'], input[type='button'], button,.button {
display: inline-block;
padding: 0px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: bold;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
background: #26343f;
color: #FFF;
border: 1px solid transparent;
border-radius: 30px;
opacity: 1;
-moz-user-select: none;
}
TextArea{
border: 1px solid #26343f;
padding: 5px;
width:100%;
background:transparent;
}
select{
background:transparent;
border: 1px solid #26343f;
padding: 4px 4px;
font-size: 14px;
}
button, html input[type='button'], input[type='reset'], input[type='submit'],.button {
-webkit-appearance: button;
cursor: pointer;
}
input, select {
margin: 1px;
margin-bottom: 1px;
padding: 3px 5px;
}
button, input, select[multiple], textarea,.button {
background-image: none;
}
input, button, select, textarea,.button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, input,.button {
line-height: normal;
}
button, input, select, textarea,.button {
font-family: inherit;
font-size: 100%;
margin: 0;
}
a.button:hover{
color:#DD423B;
}
.white-btn{
background:#FFFFFF ! important;
color:#000 ! important;
padding: 10px 20px 10px 20px !important;
}
input[type='text'], input[type='password'],input[type='number'] {
border: 1px solid #26343f;
display: block;
width: 98.5%;
padding: 4px 4px;
font-size: 14px;
line-height: 1.42857;
color: #555;
vertical-align: middle;
background-color: transparent;
background-image: none;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
input[type='text'], input[type='password'],input[type='number'],select{
width:100%;
}
.spinner {
height: 15px;
width: 15px;
animation: rotate 0.8s infinite linear;
border: 8px solid #000;
border-right-color: transparent;
border-radius: 50%;
margin-left:auto;
margin-right:auto;
}
@keyframes rotate {
0%{ transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#animation,#animation_2,#animation_3,#animation_4,#animation_5,#dialog_animation,#contact-animation{
display:none;
}
table.cells{
border-collapse: collapse;
border: 1px solid #26343f;
}
table.cells td{
border: 1px solid #26343f;
padding: 10px 10px;
font-size:11px;
}
table.cells td.no-border {
border: 0px solid #26343f;
padding: 10px 10px;
font-size: 11px;
}
table{
border-collapse:collapse;
border-spacing:0
}
.information, .success, .warning,.validation,.error {
border: 1px solid;
margin: 10px 0px;
padding: 5px 10px 5px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.information, .success, .warning,.validation,.error p{
padding-top: 3px;
padding-bottom: 3px;
text-align:left;
}
.information {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
#feedback{
display:none;
position: fixed;
top: -13px;
right: 0px;
padding:3px;
}
.feedback-box{
background:#FFFFFF;
padding:10px;
margin-bottom:10px;
}
.remain-inline{
display:inline-block;
vertical-align:top;
}
.form-box{
background: #44d9f9;
width: 500px;
margin-left: auto;
margin-right: auto;
color: #000;
font-weight:bold;
}
.form-box-inner{
padding: 20px;
}
.remain-inline.left{
width:40%;
}
.remain-inline.right{
width:58%;
}
.form-box input[type='text'], .form-box input[type='password'],TextArea{
border-radius:10px;
background:#FFFFFF;
}
TextArea{
resize:none;
}
.centered-container{
width:500px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
.inline-block{
display:inline-block;
vertical-align:top;
}
.pull-right{
float:right;
}
.desktop-margin-bottom{
margin-bottom:10px;
}
#JobApplicationForm input[type="text"],#JobApplicationForm select{
margin-top:10px;
border: 1px solid #818a91;
background: #FFFFFF;
color: #373a3c;
vertical-align: middle;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: .75em;
border-radius: 2px;
}
.ajax-form-spinner {
height: 10px;
width: 10px;
animation: rotate 0.8s infinite linear;
border: 8px solid #818a91;
border-right-color: transparent;
border-radius: 50%;
margin-left:auto;
margin-right:auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dialog{
position: fixed;
z-index: 5;
content:'';
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display:none;
}
.form-content{
background:#ffffff;
}
.form-heading{
padding:10px;
color:#fa8c5c;
font-weight:bold;
border-bottom:1px solid #818a91;
}
.form-content-elements{
padding: 10px 24px 20px 10px;
}
.form-content-elements p{
margin-top:10px;
}
.dialog-content{
margin: 1em auto;
display:none;
width: 95%;
max-width: 900px;
margin:120px auto 40px auto;
position:relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0;
text-align:left;
}
.dialog-content .dialog-body{
max-height: 291px;
overflow: auto;
padding: 0.4em 0.8em;
min-height: 5em;
}
.dialog-content .dialog-body select{
font-size: 14px;
line-height: 1.42857;
padding: 6px 12px;
width:100%;
}
.dialog-content .dialog-footer {
border-top: 1px solid #e5e5e5;
padding: 0.4em 0.8em;
}
.dialog-content .dialog-header {
border-bottom: 1px solid #e5e5e5;
border-bottom-color: rgb(229, 229, 229);
padding: 0.4em 0.8em;
font-weight:bold;
}
@media only screen and (max-width: 640px) {
#container{
width:100% ! important;
}
ul.menu li{
display:block ! important;
width:100% ! important;
padding: 10px 0px 0px 0px;
}
.wrapper{
padding:10px;
}
.mini-box{
width:100% ! important;
}
.menu-box{
padding:10px;
}
.tutors-box{
padding:20px 10px 20px 10px ! important;
}
ul.tutors li{
display:block ! important;
width:100% ! important;
}
.social-icons{
top:80px ! important;
font-size:20px ! important;
}
.indent{
margin-right:0px ! important;
}
ul.list li {
padding: 0px 3px 0px 0px ! important;
font-size: 11px ! important;
}
h1{
font-size:15px ! important;
}
h2{
font-size:14px ! important;
}
h3{
font-size:13px ! important;
}
h4{
font-size:12px ! important;
}
.form-box{
width:100% ! important;
}
.centered-container{
width:100% ! important;
}
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--black: #000;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #67CCD8;
--secondary: #fcdf05;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--footer-bg:#151515;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}