/*
color : #3970cd
*/

html { width:100%; height:100%; color:#000; background:#c4d0e3}
body { width:100%; height:100%;direction: rtl;background:#c4d0e3;font-family:"Arabic Typesetting"; font-size:2.9vh; overflow-x:hidden}
/*h1 , h2 , h3 , p { text-decoration:inherit}*/
a { color:#fff; text-decoration:none; transition:0.7s; cursor:pointer}
a:hover h1, a:hover h2, a:hover h3, a:hover p { text-decoration:underline}
input[type="text"],input[type="tel"],input[type="email"],input[type="url"],textarea,input[type="password"],input[type="submit"], select,input[type="number"] { padding:3px 5px;}
textarea { min-height:200px}
input[type="radio"] { border:#3970cd 1px solid; margin-left:10px}

header { height:60px; width:100%;z-index:10; position:fixed; left:0;right:0; margin:auto;transition: 1s; background:#000; top:0}
.logo { height:40px; position: absolute;left: 0;bottom: 10px;}
.logoAnim { border-radius:50%; background:rgba(255,255,255,0); transform:scale(0.9); transition:2s;box-shadow:0px 0px 15px rgb(255,255,255)}

header #burgerMenu { position:absolute; right:0; }
#headerMenu {position:absolute; right:50px;}
#headerMenu h1 { float:right; margin-left:10px; position:relative; top:3px}
#headerMenu > div { width:2px; height:30px; background:#fff; float:right; margin-left:10px}
header .line { position:absolute; bottom:0; display:none}

/* عشان احسب مساحة الهيدر لانها مطلقة*/
#headerRelative {height:60px; width:100%;}

/*container فيها كل المحتويات اللي بدي اقلبهم بس افتح المنيو*/
#container { width: 100%; position: relative; height: auto;margin: auto;}

/*containerContent كل المحتويات الا الـ abselute welcome*/
#containerContent { position: relative; width: 100%;}

#menu { width:0%; height:100vh; background:rgba(0,0,0,0.8); position:fixed; z-index:8; top:0; opacity:0; overflow:hidden;color:#fff}
#menu .contents { position:relative; top:calc(5% + 60px)}
#menu .contents > div { width:25%; height:35vh; float:right; margin-left:8.3%; margin-top:2vh}
#menu .contents > div:nth-of-type(3n) {margin-left:0}
#menu .contents > div > img {
  float: right;
  margin-left: 10px;
  height: 30px;
}

#menu ul {
    margin-top: 20px;
}

#menu li {width: 280px;height: auto;position: relative;display: inline-block;margin-right: 20px;}

#menu li img { float: right;margin-left: 10px;height: 15px;display: block;vertical-align: bottom;position: relative;top: 5px;}

#menu li h2 { float: right}

/* index */
#welcome { background-repeat: no-repeat; position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background-size: cover; background-position: 90% 100%}

#welcomeRelative { height: 100vh; width: 100%; margin-top: -60px}

.transpHeader { background: none !important}

.transpHeader .line { display: block !important}

/*.rightSlide { width:20%; margin-left:5%; float:right}*/
.rightSlide { width: 65%; margin-left: 5%; float: right}

.rightSlide .news { width: 30%; margin-left: 5%}

.centerSlide {width: 40%;margin-left: 5%;float: right}

.centerSlide .news { height: 440px}

.centerNews { width: 100%; margin-top: 10px; float: right; color: #000;height: 220px; }

.centerNews h2 {color: #3970cd; margin-bottom: 5px }

.centerNews p {margin-bottom: 5px; width: 100%; overflow: hidden; position: relative }

.centerNews p:nth-of-type(2) {height: 19.8vh;}

.leftSlide {width: 30%;float: left}

.LastPostsSlide { height: auto; margin-top: 10px;}

.slideTitle { background: #3970cd; padding-right: 10px; color: #fff; text-align: center;padding-top: 5px}

.lastPost { position: relative; width: 90%; margin: auto; margin-top: 5px;height: 100px;}

.lastPost .news {background: none; position: relative; width: 30%; margin-left: 10%;float: right;height: 80%;margin-top: 0;}

.lastPost .news img { max-height: 80%; max-width: 80%; margin: auto; position: absolute; left: 0; right: 0 }

.lastPost h2 { width: 60%;float: right;color: #3970cd;}

.lastPost p { width: 60%;float: right;color: #000;}

.news {background: none; position: relative; width: 100%; float: right;height: 180px;margin-top: 10px; cursor: pointer}

/*.news:nth-child(4n) {  margin-left:0%}*/
.news img { max-height: 80%; max-width: 80%; margin: auto; position: absolute; left: 0; right: 0 }

.news > div:not(.BGimg) { position: absolute; bottom: 0; z-index: 1; background: linear-gradient(0deg, rgb(57, 112, 205), rgba(255, 255, 255, 0));width: 100%;text-align: center; color: #fff; transition: 0.5s;height: 100%;}

.news h2 {
    position: absolute; top: 50%;
    width: 90%;
    padding: 0 5%; transition: 0.6s
}

.news:hover > div:not(.BGimg) { height: 50%}

.news:hover h2 { opacity: 0;}

.importantLinks { margin-top: 20px;width: 25%; float: right; margin-left: 12.5%}

.importantLinks:nth-child(4n) { margin-left: 0}

.importantLinks li {margin-bottom: 10px;}

.importantLinks li img { margin-left: 10px;height: 15px;position: relative;top: 50%;}

.importantLinks li h2 { display: inline-block}

.listTitle {margin-right: -20px;}

.extendedDiv { margin-right: 30px; margin-top: 0; transition: 0.7s; height: 0; overflow: hidden}

.extendedDiv:not(.canExtend)::before { content: '\21B2'; margin-left: 10px;font-size: 3vh;}

.canExtend { cursor: pointer; transition: 0.7s;}

.canExtend img { transition: 0.7s}

.memberMainBox { float: right; width: 30%; margin-left: 5%;margin-top: -90px; margin-bottom: 30px;}

#indexMembers a:nth-of-type(4) .memberMainBox { margin-left: 0}

.nth-type-3:nth-of-type(3n) .memberMainBox { margin-left: 0}

.memberImg { border-radius: 50%; height: 175px; width: 175px; border: 4px #3970cd solid; position: relative; margin: auto; transform: translateY(50%);}

.memberImg img {height: 168px; width: 168px; border-radius: 50%; position: absolute; left: 0; right: 0; margin: auto}

.memberImg .BGimg {height: 168px; width: 168px; border-radius: 50%; position: absolute; left: 0; right: 0; margin: auto;background-position: top}

.memberDesc { width: 100%; height: 200px; border: 4px #3970cd solid; padding-top: 90px;color: #3970cd; border-radius: 20px; overflow: hidden}

.memberDesc h2 { text-align: center}

.memberDesc p { padding: 10px}

.Grad { border-color: #9E3D3F}

#indexAbout { width: 35%; float: right;margin-top: 20px;}

#indexAbout img { float: right;margin-left: 10px;height: 60px;}

#indexAbout p {}

#chatBot { float: left; width: 20%;margin-top: 20px}

#chatBot img { max-width: 100%;border-radius: 25px; cursor: pointer}

#chatBot img:hover { box-shadow: 0 0 10px #fff }

.footerSection { width: 30%; float: right; margin-right: 15%;margin-top: 20px;}

.footerSection li { margin-bottom: 10px}

.letsContact { clear: both}

.contactMethods { position: relative;margin: auto; width: 100%;text-align: center; clear: both}

.socialMedia { border-radius: 50%; width: 75px; height: 75px; position: relative; border: 1px solid rgba(255, 255, 255, 0.6);margin-left: 10px;display: inline-block; transition: 0.4s}

.socialMedia:hover { transform: scale(1.1)}

.socialMedia img { position: absolute; left: 0; right: 0; margin: auto; max-width: 75%; max-height: 75%;}

.socialMedia { background: #3970cd}

.mainSocialMedia {border-radius: 0%; border: none; background: none}

.mainSocialMedia img {border-radius: 0}

#snapChat img {
    max-width: 100%;
    max-height: 100%;
}

#instgram:hover { background: #944DC7;}

#fb:hover { background: #4267B2}

#youtube:hover { background: #FF0000}

#gmail:hover { background: #3FA9F5}

footer { background: #3970cd}

footer .clear { height: 10px}

footer p { float: right;white-space: pre-wrap}

#copyright { margin-top: 10px}

#secondLayer { position: fixed; z-index: 11; width: 100vw; height: 100vh; display: none; top: 0}

#closeSecondLayer { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5)}

/*select course*/
#selectCourse { width: 100%; padding-top: 20px;}

#selectCourse img { width: 30%; float: right; margin-left: 5%; transition: 0.5s; cursor: pointer}

#selectCourse img:hover { box-shadow: 0px 0px 10px 5px #2A61BC}

#selectCourse img:last-child { margin-left: 0}

.additionalCourses {margin-right: 30px; width: calc(45% - 30px); margin-left: 5%}

.additionalCourses:nth-of-type(3) { margin-left: 0}

.additionalCourses h2 { color: #3970cd; }

#snaferCourses { text-align: center; color: #3970cd}

#snaferCourses .importantLinks { width: 20%; margin-left: 6%}

#snaferCourses .importantLinks:last-child { margin-left: 0}

#snaferCourses a { float: none}

#snaferCourses h2 {color: #3970cd}

#snaferCourses h1 { margin: auto; margin-bottom: 10px}

/* library */
section {float: right;border: 2px solid #3970cd;overflow: hidden; border-radius: 20px;}

section input[type="text"] { margin: 5px;border-radius: 20px; border: none; height: 30px;}

.rightSec {width: 25%; margin-left: 5%; float: right}

.rightSec ul {}

.rightSec > ul > li { margin-right: 5px;border-bottom: 2px solid;padding-bottom: 3px;margin-top: 5px;}

.rightSec ul li:last-child {border-bottom: none}

.rightSec ul li img { height: 15px; margin-left: 5px}

.rightSec ul li a { color: black}

.medSec { width: 69%; float: right}

.medSec .directory { background: #769ad7; width: 90%; color: #000;padding: 5px 5%; position: relative}

.medSec .directory > .dir { width: 85%; overflow: hidden; position: relative; float: right}

.medSec .directory a { color: #000; cursor: pointer;line-height: 150%}

.directory h1 { width: 10%; left: 0;position: absolute; top: 0.2vh; cursor: pointer}

/*achievements*/
#timeline { width: 100%; margin: 20px 0 0 0;}

#timeline ul { margin: auto; text-align: center}

#timeline ul h2 { color: #000}

#timeline ul li { display: inline-block; position: relative; margin-left: 5px; cursor: pointer;margin-bottom: 30px;}

#timeline ul .active:before {content: ""; position: absolute; background: #3970cd; top: -10px; right: 0;
    height: 5px; width: 100%;}

#achievements { margin-top: 80px;}

#achievements .extendedDiv p { color: #000; display: inline}

#achievements .extendedHeight {height: auto; }

#achievements > div {width: calc(48% - 25px);}

#achievements h2 { color: #000;transition: 0.5s}

#achievements .ach > div {position: absolute;right: -25px;}

#achievements .ach > div .line { background: #3970cd; height: 5px}

#achievements .ach div img {
    width: 20px;
    position: relative;
    margin: auto;
    right: calc(50% - 7px);
    top: 1px
}

#achievements .ach {float: right; position: relative;margin-right: 2%; }

#achievements .ach::before { content: ""; position: absolute; background: #3970cd;
    top: 0; right: -25px; height: 100%; width: 5px;}

#achievements li { margin-bottom: 10px; position: relative}

#achievements .ach li:hover h2 { transform: translateX(-3%) }

#achievements .ach li::before {content: ""; position: absolute; background: #3970cd; top: 0; right: -32px;
    height: 20px; width: 20px; border-radius: 50%; transition: 0.5s; cursor: pointer}

#achievements li:hover:before { transform: scale(1.2)}

#achievements > .clear { padding-bottom: 40px}

/*activetes*/
.eventsBG { background: #3970cd;border-radius: 20px; height: 370px; padding: 5px 20px; position: relative}

.eventsMask { width: calc(100% - 40px); margin: auto; overflow-x: hidden; position: absolute; padding: 16.5px 0; z-index: 1 }

.eventsBG .note { position: absolute; bottom: 2px}

.eventsMask img { width: 330px; height: 330px; margin-left: 30px; float: right; cursor: pointer; transition: 0.5s; z-index: 1}

.eventsMask img:hover { transform: scale(1.1); }

.eventsBG .scroller { width: 50px; height: 330px; position: absolute; z-index: 1}

#eventSelector { padding: 20px 0}

#eventSelector li { display: inline-block}

#eventSelector h1 { margin-bottom: 10px}

#eventSelector label { margin-left: 20px}

/*contact us */
#socialContact { margin-top: 20px}

#contactForm .rightSec { border-left: 5px solid}

#contactForm ul { width: 60%}

#contactForm .medSec {}

#contactForm button { clear: both}

/*about-us*/
#about-us .news { width: 40%; margin: 15px 5%; height: 300px}

#member { color: #000}

#member p { white-space: pre-line}

#member .memberImg { transform: none; width: 200px; height: 200px}

#member .memberImg .BGimg { width: 95%; height: 95%; }

/*classes*/

/* start classes*/
.startFromBot { top: 100%; transition: 0.7s;}

.startHiddin { opacity: 0}

.contents { width: 90%; margin: auto;height: 100%; position: relative;}

.line { width: 100%; height: 2px; background-color: white}

.skyBlue { background-color: #c4d0e3;width: 100%; height: auto; position: relative;color: #3970cd }

.skyBlue .sectionTitle { color: #3970cd}

.skyBG { background: url(../common/skyBG.jpg) repeat;background-attachment: fixed;background-size: cover}

.darkBlue { color:#fff; background-color: #3970cd;width: 100%; height: auto; background: url(../common/darkBlue.jpg) no-repeat;background-size: cover; background-attachment: fixed; position: relative}

.darkBlue .sectionTitle { color: #fff}

.AnimBG { background: url(../common/skyBG.jpg) repeat;animation: 50s linear animateBackground infinite; background-attachment: scroll; background-position: 0 0; background-size: 1365px 677px;}

@keyframes animateBackground {
    0% {background-position: 0 0;  }
    50% {background-position: -200px 338px;}
    100% {background-position: 0 677px;}
}

.SoDarkBg { background: #33526E; color: #fff;}
.scroller { opacity: 0}

.scroller:hover {opacity: 0.7;}

.scrollLeft { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}

.scrollRight { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));}

.form-raduis {}

.form-raduis .rightSec li {border: none}

.form-raduis li { border: none; margin-bottom: 20px; clear: both}

.form-raduis h1 { color: #000}

.form-raduis h2 { color: #000; margin-bottom: 5px}

.form-raduis input[type="text"], .form-raduis input[type="tel"], .form-raduis input[type="password"], .form-raduis input[type="email"], .form-raduis input[type="url"], .form-raduis input[type="number"], select { border-radius: 10px; width: 100%; height: 30px; border: 2px solid #3970cd}

.form-raduis textarea {border-radius: 10px;width: 100%;border: 2px solid #3970cd}

.Ver {top: 50%; transform: translateY(-50%)}

.clear { clear: both; height: 30px; width: 100%}

.bevel {box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);}

.sectionTitle { margin: auto; text-align: center; padding: 20px 0}

.linkAnim { transition: 0.5s;}

.linkAnim:hover { transform: translateX(-3%)}

.linkAnim:hover a h1 { text-decoration: underline}

.isVis { opacity: 1; display: block}

.fitPage { max-width: 90vw; max-height: 90vh; left: 0; right: 0; margin: auto; position: absolute; height: auto; width: auto;}

.manager-form .preview { max-width: 58%; max-height: 400px; float: left; clear: both; margin-left: 10px; margin-bottom: 10px}

.view-box { float: right; width: 100%; }

.view-box ul { clear: both; margin-right: 40px; margin-bottom: 20px; width: calc(100% - 40px)}

.view-box ul li { color: inherit; margin-bottom: 10px; width: calc(100% - 40px)}

.view-box a { color: #3970cd; }

#multiNews ul li > ul { width: 50%; margin-left: 0}

#multiNews img { margin-bottom: 10px}

.view-box-title {float: right;width: 60%;margin-bottom: 10px; }

.view-box-title h2 {
    color: #000; font-weight: bold
}

.view-box p {
    clear: both;
    margin: 0 40px 30px 0;
    width: calc(100% - 30px);
    white-space: pre-wrap;
    color: #000;
}

.view-box .videoThumb { width: 30%; margin-left: 5%; float: right; border-bottom: 1px solid; margin-bottom: 20px}

.view-box .videoThumb:nth-child(3n) { margin-left: 0}

.view-box .videoThumb img { width: 100%;}

.view-box .videoThumb p { height: auto; text-align: center; width: 100%; margin: 0;}

.disk { position: relative;}

.disk::before { content: ""; background: #3970cd; width: 10px; height: 10px; position: absolute; right: -20px; border-radius: 50%; transform: translateY(50%);}

.hasIcon { float: right; clear: left}

.hicon { float: right; height: 30px; margin-left: 10px;}

.nbtheh { position: relative; float: right; margin-top: 20px}

.nbtheh img { margin-left: 10px; height: 15px;}

.nbtheh .extendedHeight { height: auto}

.lineWithDisc { height: 2px; width: 100%; position: relative;background: #3970cd;clear: both;}

.lineWithDisc::after {content: ""; position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%;background: #3970cd;transform: translateY(-50%);}

.library { padding: 5%;}

.library li { float: right; width: 30%; margin: 7px 0 7px 5%; position: relative; cursor: pointer}

.library li:nth-child(3n) { margin-left: 0}

.library img { width: 100%; height: 300px}

.library h2 { position: absolute; top: 15%; background: rgba(0, 0, 0, 0.7); color: #fff;width: 100%; text-align: center}

.pageNum { width: 100%; text-align: center; margin-bottom: 20px;}

.pageNum a { display: inline-block; margin-left: 5px; border-radius: 10px; border: 2px solid #3970cd; color: #3970cd; padding: 3px;min-width: 15px;}

.pageNum a:hover { background: #3970cd; color: #fff}

.pageNum .active { background: #3970cd; color: #fff}

.icon { vertical-align: top; max-height: 2em; float: left; cursor: pointer}

.comingSoon { text-align: center; position: absolute; left: 0;right: 0; margin: auto; }

.justMobile { display: none}

.submitButton { width: 200px; height: 70px; color: #fff; background: #3970cd; border: none; display: block; margin: auto; cursor: pointer; border-radius: 20px}

.hasPopUp { cursor: pointer}

.popUpNews { overflow: auto}

.popUpNews > img {float: left;max-height: 90vh;max-width: 30%;}

.popUpNews h1 {width: calc(70% - 20px)}

.popUpNews p, .popUpNews a { float: right; margin: 5px 10px;width: calc(70% - 20px)}

.BGimg { background-size: cover; position: absolute; width: 100%; height: 100%; background-position: 50% 50%;}

.viewTable { clear: both; width: 100%; margin-bottom: 30px}

.viewTable a { color: #fff}

.viewTable th { background: #122c5a; color: #fff; border: 1px solid #fff; border-top: none; min-height: 20px; text-align: center}

.viewTable td { background: #3970cd; color: #fff; border: 1px solid #fff; border-top: none; min-height: 20px; text-align: center; max-width: 200px; text-overflow: ellipsis; overflow: hidden;white-space: nowrap; padding: 5px}

.viewTable tr th:first-of-type { border-right: none}

.viewTable tr th:last-of-type { border-left: none}

.viewTable tr td:first-of-type { border-right: none}

.viewTable tr td:last-of-type { border-left: none}

.viewTable img { max-height: 150px; max-width: 150px}

.viewTable .optsImg { display: inline-block; margin-left: 10%; width: 25%; cursor: pointer; max-width: 50px; vertical-align: middle}

.tableContainer { width: 100%; overflow-x: auto}

.subImg { cursor: pointer}

.article {color: #000}

.article p { width: 100%; margin: 0;margin-top: 20px; }

.article img:not(.hicon) {margin: auto; display: block; max-width: 50%; max-height: 400px; }

.gallery {}

.gallery .imgHolder { height: 200px; width: 250px;
    border: 3px solid #182d41;
    margin: 10px;
     display: inline-block
}

.imgHolder { position: relative; }

.imgHolder img {
    width: 100%;
    height: 100%;}

.galleryImg { width: 100%; height: 100%; cursor: pointer;}
.imgHolder  .closeBlock { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; cursor: pointer;}

.examBlock {}
.examBlock h2 { white-space: pre-line}
.examBlock img {max-width:800px; max-height:300px; margin-top: 10px}
@media only screen and (max-width: 750px) {
    .examBlock img {max-width:100%; max-height:100%;}
}
.radioOptsBlock {}
.radioOptsBlock div { padding-top: 20px}


.noSelect {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
/*  animated drop menu 3970cd*/
#burgerMenu {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
    border-radius: 5px;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    width: 200px;
    background-color: #33526E; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 20px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 12; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    transform: translateX(-50%);
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* resposive */
/*defualt*/
h1 { font-size: 4.6vh; font-weight: bold}

h2, label {font-size: 4vh}

p, .view-box a, section a, input, #snackbar {font-size: 3.3vh}

.lastPost p {font-size: 2.5vh}

.extendedHeight { height: 4vh;margin-top: 10px}

input[type="text"], input[type="tel"], input[type="email"], textarea, button, .date, input[type="password"], input[type="url"], input[type="submit"], input[type="number"], th, tr, select {font-size: 2.9vh}

.note {font-size: 2.5vh; color: #000}

iframe { height: 600px; width: 100%;}

/*fonts*/
@media only screen and (orientation: landscape) and (max-width: 750px) {
    iframe { height: 500px; width: 100%;}

    h1 { font-size: 4.6vw; font-weight: bold}

    h2, label {font-size: 4vw}

    p, .view-box a, section a, input, #snackbar {font-size: 3.3vw}

    .lastPost p, input[type="text"], input[type="tel"], input[type="email"], textarea, button, .date, input[type="password"], input[type="submit"], input[type="number"], input[type="url"], th, tr, select {font-size: 2.9vw}

    .extendedHeight { height: 4.4vw;}

    .note {font-size: 2.7vw}
}

@media only screen and (orientation: portrait ) {
    h1 { font-size: 4.6vh; font-weight: bold}

    h2, label {font-size: 4vh}

    p, .view-box a, section a, input, #snackbar {font-size: 3.3vh}

    .lastPost p, input[type="text"], input[type="tel"], input[type="email"], textarea, button, .date, input[type="password"], input[type="number"], input[type="submit"], input[type="url"], th, tr, select {font-size: 2.9vh}

    .note {font-size: 2.7vh}
}

@media only screen and (max-width: 1000px) {
    .leftSlide { display: none}

    .rightSlide { width: 30%}

    .centerSlide {width: 60%}

    #achievements .ach { right: 30px}

    .viewTable .optsImg { margin-left: 13%; width: 35%}
}

@media only screen and (max-width: 750px) {
    iframe { height: 300px; width: 100%;}

    #headerMenu { display: none}

    .leftSlide { display: none}

    .rightSlide { width: 100%; margin: 0}

    .centerSlide {width: 100%; margin: 0}

    .importantLinks { width: 100%; margin: 0; margin-bottom: 20px}

    .memberMainBox { width: 100%; margin-bottom: 20px}

    #indexAbout { width: 100%; margin-bottom: 30px}

    .footerSection { width: 50%; margin: 0}

    .socialMedia { margin-bottom: 10px; width: 40px; height: 40px}

    #chatBot { width: 50%;}

    #menu .contents > div { width: 100%; margin-left: 0;}

    #menu { overflow: scroll}

    #news .news { width: 45%; height: 130px;}

    #news .news:nth-of-type(2n) { margin-left: 0}

    #selectCourse img { width: 100%; margin-bottom: 20px}

    .view-box .videoThumb { width: 100%}

    .rightSec, .medSec { width: 100%}

    .scroller { display: none}

    .eventsMask { overflow-x: scroll;}

    .eventsMask img { width: 220px; height: 220px;}

    .justMobile { display: block}

    #achievements .ach { right: 30px}

    .viewTable .optsImg {margin-left: 4%; width: 45%}

    .additionalCourses { width: 100%}

    /*about-us*/
    #about-us .news { width: 100%; margin: 15px 0}

    .library li { width: 90%}

    #snaferCourses h1 { font-size: 3.5vh}

    #snaferCourses h2 { font-size: 3vh}

    #multiNews ul li > ul { width: calc(100% - 40px)}
}

@media only screen and (min-width: 750px) {
    .rightSlide .news:nth-of-type(3n) { margin-left: 0}
}

.autoHeight { height: auto}