* {
margin: 0 auto;
}
body {
background-color: #ffffff;
font-size: 16px;
line-height: 140%;
overflow-x: hidden !important;
font-family: var(--f1), sans-serif;
}
h1 {
font-size: 26px;
line-height: 130%;
font-weight: normal;
margin-bottom: 15px;
}
p {
margin-bottom: 10px;
}
img {
max-width: 100%;
height: auto;
}
.clr {
content: "";
display: block;
float: none;
clear: both;
}
.wrapper {
width: 670px;
max-width: calc(100% - 80px);
}
#header-wrapper .wrapper {
max-width: 96%;
}
header#header {
background-size: cover !important;
background-position: center !important;
}
#header-wrapper {
padding: 10px 0 30px;
text-align: center;
box-shadow: 0 -130px 50px -70px rgba(0,0,0,0.4) inset;
color: #fff;
letter-spacing: 2px;
}
#logo-text {
font-size: 28px;
line-height: 140%;
margin-bottom: 10px;
text-shadow: 0px 2px 5px #000;
font-family: var(--f2), sans-serif;
color: var(--c2);
}
#location {
font-size: 20px;
margin-bottom: 20px;
text-shadow: 0px 2px 5px #000;
}
#logo-img {
width: 100px;
padding: 10px;
background: #fff;
box-sizing: border-box;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
display: block;
margin-bottom: 20px;
}
#establishment_year {
font-size: 16px;
text-shadow: 0px 2px 5px #000;
margin-bottom: 10px;
}
#regi_no, 
#estd {
display: inline-block;
font-size: 16px;
text-shadow: 0px 2px 5px #000;
}
#nothome {
}
#nothome #logo-img {
height: 80px;
width: auto;
padding: 7px;
margin-bottom: 15px;
}
#nothome #logo-text {
font-size: 24px;
line-height: 140%;
margin-bottom: -10px;
}
#container {
position: relative
}
#container > .left-d {
position: absolute;
content: "";
background: var(--c);
width: 25px;
left: 0;
top: 300px;
height: calc(100% - 300px);
opacity: 0.2;
}
#container > .left-d::after {
content: "";
display: block;
border-top: 100px solid var(--c);
border-bottom: 25px solid #0000;
border-right: 25px solid #0000;
bottom: -125px;
position: absolute;
right: 0;
}
#container > .left-d::before {
content: "";
display: block;
border-top: 25px solid #0000;
border-bottom: 100px solid var(--c);
border-right: 25px solid #0000;
top: -125px;
position: absolute;
right: 0;
}
#container > .right-d {
position: absolute;
content: "";
background: var(--c);
width: 25px;
right: 0;
top: 300px;
height: calc(100% - 300px);
opacity: 0.2;
}
#container > .right-d::after {
content: "";
display: block;
border-top: 100px solid var(--c);
border-bottom: 25px solid #0000;
border-left: 25px solid #0000;
bottom: -125px;
position: absolute;
left: 0;
}
#container > .right-d::before {
content: "";
display: block;
border-top: 25px solid #0000;
border-bottom: 100px solid var(--c);
border-left: 25px solid #0000;
top: -125px;
position: absolute;
left: 0
}
footer#footer > .wrapper {
text-align: center;
padding: 20px 0;
margin-top: 40px;
position: relative;
overflow: hidden;
}
footer#footer > .wrapper::after {
content: "";
box-shadow: 0px -10px 30px 10px rgba(0,0,0,0.3);
position: absolute;
top: 0;
height: 0;
right: 35px;
left: 35px;
}
#social a {
display: inline-block;
text-decoration: none;
margin: 5px;
background: #ffffff;
border-radius: 5px;
padding: 7px;
}
#social svg {
width: auto;
height: 36px;
display: block;
color: var(--c);
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;  
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
}
#social a:hover {
background: var(--c);
}
#social a:hover svg {
color: #ffffff;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.btn {
background: var(--c);
border-color: var(--c);
color: #fff;
display: inline-block;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.btn:hover {
opacity: 0.9;
box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.btn-next {
position: relative;
padding-left: 40px;
padding-right: 40px;
}
.btn-lg {
display: block;
font-size: 24px;
width: 100%;
box-sizing: border-box;
font-family: var(--f2);
letter-spacing: 1px;
}
.btn-next .nav-next span::before {
border-color: #fff;
}
.page-title, .section-title {
font-weight: 200;
text-transform: uppercase;
text-align: center;
position: relative;
font-family: var(--f2);
color: var(--c);
}
.page-title {
margin: 20px 0 40px;
font-size: 26px;
}
.section-title {
margin: 50px 0 40px;
font-size: 26px;
}
.page-title::after, 
.page-title::before, 
.section-title::after, 
.section-title::before {
content: "";
position: absolute;
display: block;
} .student-title {
font-family: var(--f2);
color: var(--c);
font-size: 36px;
letter-spacing: 1px;
margin-top: 25px;
}
#student-infos {
margin-bottom: 30px;
}
#student-infos .item {
padding-top: 10px;
}
#student-infos label {
background: #3a3a3a;
padding: 7px 8px;
display: inline-block;
color: #fff;
width: 120px;
line-height: 20px;
font-size: 16px;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
float: left;
}
#student-infos strong {
display: inline-block;
font-size: 18px;
font-weight: normal;
line-height: 20px;
padding: 7px 10px 7px 20px;
box-sizing: border-box;
background: #fff0d7;
border-radius: 5px;
position: relative;
width: calc(100% - 130px);
text-align: center;
float: right;
}
#student-infos strong::after {
content: "";
position: absolute;
height: 100%;
width: 10px;
background: #8affbb;
left: 0;
top: 0;
border-radius: 5px 0 0 5px;
}
#home-big-btn-set {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
column-gap: 15px;
row-gap: 15px;
padding-top: 15px;
}
#testimonial_grid {
position: relative;
}
.testimonial_single {
display: block;
text-align: center;
color: #000;
text-decoration: none;
}
.testimonial_single .photo-con {
position: relative;
aspect-ratio: 1 / 1;
width: 250px;
overflow: hidden;
}
.testimonial_single img.photo {
width: 100%;
height: auto;
padding: 15px;
box-sizing: border-box;
}
.testimonial_single img.photo-frame {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.testimonial_single strong {
display: block;
margin-top: 20px;
font-size: 20px;
}
.testimonial_single em {
display: block;
margin-top: 10px;
font-style: normal;
color: var(--c);
font-size: 20px;
margin-bottom: 10px;
}
.testimonial_single .excerpt {
margin: 15px 0;
}
#testimonial_grid .slick-arrow {
position: absolute;
top: 95px;
height: 45px;
width: 50px;
padding: 0;
border: 0 none;
background-size: 100% 100% !important;
color: #fff;
text-indent: 200px;
overflow: hidden;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 99;
}
#testimonial_grid .slick-arrow.slick-next {
right: -40px;
background: url(//hakacademy.smartncreative.com/wp-content/themes/a1eduprofilemaker/themes/gorgeous/img/next.png);
}
#testimonial_grid .slick-arrow.slick-prev {
left: -40px;
background: url(//hakacademy.smartncreative.com/wp-content/themes/a1eduprofilemaker/themes/gorgeous/img/prev.png);
}
#testimonial_grid .slick-arrow:hover {
opacity: 0.9;
}
#qrcode-con .btn, 
#canvas {
width: 280px;
}
.toggle {
position: fixed;
bottom: 10px;
right: 10px;
background: var(--c);
width: 50px !important;
height: 50px;
border-radius: 5px;
border: 2px solid #fff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}
#photo_gallery_section, 
#video_gallery_section {
text-align: center;
}
#photo_gallery_section .btn, 
#video_gallery_section .btn {
margin-top: 15px;
}
#photo_gallery_grid, 
#video_gallery_grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
column-gap: 15px;
row-gap: 15px;
padding: 15px 0;
}
#photo_gallery_grid a, #video_gallery_grid a {
display: block;
width: 100%;
position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border-radius: 5px;
overflow: hidden;
border: 2px solid #fff;
box-sizing: border-box;
}
#photo_gallery_grid .thumb,
#video_gallery_grid .thumb {
display: block;
width: 100%;
}
#photo_gallery_grid .icon, 
#video_gallery_grid .icon {
position: absolute;
top: 0;
width: 40%;
height: 100%;
left: 30%;
color: var(--c);
opacity: 0.6;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#photo_gallery_grid a:hover .icon, 
#video_gallery_grid a:hover .icon {
opacity: 1;
}
.icon .icon-solid {
color: #ffffff;    
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.icon .icon-semitransparent {
color: #000000;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#photo_gallery_grid a:hover .icon .icon-solid, 
#video_gallery_grid a:hover .icon .icon-solid {
color: var(--c);
}
#photo_gallery_grid a:hover .icon .icon-semitransparent, 
#video_gallery_grid a:hover .icon .icon-semitransparent {
color: #ffffff;
}
#common-list {
padding: 10px 0 0;
margin: 0;
}
#common-list li {
display: block;
padding: 12px 0 12px 22px;
border-bottom: 1px solid #ddd;
position: relative;
}
#common-list li:last-child {
border: 0 none;
}
#common-list a {
display: block;
text-decoration: none;
color: #333;
}
#common-list strong {
display: block;
padding-bottom: 3px;
}
#common-list em {
font-size: 14px;
color: #999;
}
#common-list a:hover strong {
text-decoration: underline;
color: var(--c);
}
#common-list li::after {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
background: var(--c);
left: 0;
top: 17px;
border-radius: 2px;
rotate: 45deg;
}
.tax-bc {
margin: 20px 0 30px;
padding: 0;
list-style: none;
display: block;
text-align: center;
transform: rotate(180deg);
}
.tax-bc li {
padding-left: 20px;
font-size: 18px;
line-height: 24px;
position: relative;
display: inline-block;
transform: rotate(-180deg);
}
.tax-bc li::after {
content: "/";
position: absolute;
display: block;
top: 0;
left: 5px;
color: #ccc;
font-size: 14px;
line-height: 24px;
}
.tax-bc li:last-child {
padding-left: 0;
}
.tax-bc li:last-child::after {
display: none;
}
ul#grid-list {
margin: 0;
padding: 0;
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
column-gap: 15px;
row-gap: 15px;
}
ul#grid-list li {
display: block;
width: 100%;
}
ul#grid-list a,
ul#grid-list .box {
display: block;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border-radius: 5px;
overflow: hidden;
border: 2px solid #fff;
text-decoration: none;
color: #000;
}
ul#grid-list .box {
text-align: center;
}
ul#grid-list img {
display: block;
width: 100%;
background: var(--c);
}
ul#grid-list li strong {
padding: 8px 8px 3px;
display: block;
}
ul#grid-list li .metadata {
padding: 3px 8px 5px;
}
.cctvframe {
width: 100%;
height: 100%;
border: 0 none;
aspect-ratio: 16/9;
}
.no-record-found {
text-align: center;
font-size: 20px;
border: 1px solid #ccc;
max-width: 90%;
width: 500px;
padding: 20px;
box-sizing: border-box;
border-radius: 5px;
background: #eee;
color: #666;
}
#headlines {
position: relative;
background: var(--c);
}
#headlines ul {
padding: 0;
margin: 0;
}
#headlines li {
position: relative;
padding-left: 40px;
}
#headlines li::before {
position: absolute;
content: "";
display: block;
height: 8px;
width: 8px;
background: rgba(255,255,255,0.2);
border: 2px solid #ffffff;
rotate: 45deg;
border-radius: 3px;
left: 14px;
top: 11px;
}
#headlines a {
text-decoration: none;
color: #ffffff;
font-size: 16px;
line-height: 35px;
display: block;
}
#headlines a:hover {
text-decoration: underline;
}
#svg-con {
width: 200px;
position: relative;
}
svg {
width:100%;
}
#frontbox {
position: relative;
}
#backbox {
position: absolute;
left: -25px;
top: -26px;
width: calc(100% + 50px);
height: auto;
color: var(--c);
}
#cctv_1, 
#cctv_2 {
display: block;
cursor: pointer;
}
#cctv_2 {
width: 200px;
}
html.hc-nav-yscroll{
overflow-y:scroll
}
body.hc-nav-open{
overflow:visible;
position:fixed;
width:100%;
min-height:100%
}
.hc-offcanvas-nav{
visibility:hidden;
display:none;
position:fixed;
top:0;
height:100%;
z-index:9999;
text-align:left
}
.hc-offcanvas-nav.is-ios *{
cursor:pointer !important
}
.hc-offcanvas-nav .nav-container{
position:fixed;
z-index:9998;
top:0;
height:100%;
max-width:100%;
max-height:100%;
box-sizing:border-box;
transition:transform .4s ease
}
.hc-offcanvas-nav .nav-wrapper{
width:100%;
height:100%;
box-sizing:border-box;
-ms-scroll-chaining:none;
overscroll-behavior:none
}
.hc-offcanvas-nav .nav-content{
height:100%
}
.hc-offcanvas-nav .nav-wrapper-0>.nav-content{
overflow:scroll;
overflow-x:visible;
overflow-y:auto;
box-sizing:border-box
}
.hc-offcanvas-nav ul{
list-style:none;
margin:0;
padding:0
}
.hc-offcanvas-nav li{
position:relative;
display:block
}
.hc-offcanvas-nav li.level-open>.nav-wrapper{
visibility:visible
}
.hc-offcanvas-nav li:not(.custom-content) a{
position:relative;
display:block;
box-sizing:border-box;
cursor:pointer
}
.hc-offcanvas-nav li:not(.custom-content) a[disabled]{
cursor:not-allowed
}
.hc-offcanvas-nav li:not(.custom-content) a,.hc-offcanvas-nav li:not(.custom-content) a:hover{
text-decoration:none
}
.hc-offcanvas-nav input[type="checkbox"]{
display:none
}
.hc-offcanvas-nav label{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:10;
cursor:pointer
}
.hc-offcanvas-nav .nav-item-wrapper{
position:relative
}
.hc-offcanvas-nav .nav-item-link{
position:relative;
display:block;
box-sizing:border-box
}
.hc-offcanvas-nav:not(.user-is-tabbing) .nav-close-button:focus,.hc-offcanvas-nav:not(.user-is-tabbing) .nav-item-wrapper a:focus{
outline:none
}
.hc-offcanvas-nav .nav-close:focus, .nav-next:focus,.hc-offcanvas-nav .nav-back:focus{
z-index:10
}
.hc-offcanvas-nav.disable-body::after,.hc-offcanvas-nav .nav-wrapper::after{
content:'';
z-index:9990;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
-ms-scroll-chaining:none;
overscroll-behavior:none;
visibility:hidden;
opacity:0;
transition:visibility 0s ease .4s,opacity .4s ease
}
.hc-offcanvas-nav.disable-body::after{
position:fixed
}
.hc-offcanvas-nav .nav-wrapper::after{
position:absolute
}
.hc-offcanvas-nav.disable-body.nav-open::after,.hc-offcanvas-nav .sub-level-open::after{
visibility:visible;
opacity:1;
transition-delay:.05s
}
.hc-offcanvas-nav:not(.nav-open)::after{
pointer-events:none
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper::after{
display:none
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper.nav-wrapper-0{
max-height:100vh
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper.nav-wrapper-0>.nav-content{
overflow:scroll;
overflow-x:visible;
overflow-y:auto;
box-sizing:border-box;
max-height:100vh
}
.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper{
min-width:0;
max-height:0;
visibility:hidden;
overflow:hidden;
transition:height 0s ease .4s
}
.hc-offcanvas-nav.nav-levels-expand .level-open>.nav-wrapper{
max-height:none;
overflow:visible;
visibility:visible
}
.hc-offcanvas-nav.nav-levels-overlap .nav-content{
overflow:scroll;
overflow-x:visible;
overflow-y:auto;
box-sizing:border-box;
max-height:100vh
}
.hc-offcanvas-nav.nav-levels-overlap .nav-wrapper{
max-height:100vh
}
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper{
position:absolute;
z-index:9999;
top:0;
height:100%;
visibility:hidden;
transition:visibility 0s ease .4s,transform .4s ease
}
.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent{
position:static
}
.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper{
visibility:visible;
transform:translate3d(0, 0, 0);
transition:transform .4s ease
}
.hc-offcanvas-nav.nav-position-left{
left:0
}
.hc-offcanvas-nav.nav-position-left .nav-container{
left:0
}
.hc-offcanvas-nav.nav-position-left.nav-levels-overlap li .nav-wrapper{
left:0;
transform:translate3d(-100%, 0, 0)
}
.hc-offcanvas-nav.nav-position-right{
right:0
}
.hc-offcanvas-nav.nav-position-right .nav-container{
right:0
}
.hc-offcanvas-nav.nav-position-right.nav-levels-overlap li .nav-wrapper{
right:0;
transform:translate3d(100%, 0, 0)
}
.hc-offcanvas-nav.nav-position-top{
top:0
}
.hc-offcanvas-nav.nav-position-top .nav-container{
top:0;
width:100%
}
.hc-offcanvas-nav.nav-position-top.nav-levels-overlap li .nav-wrapper{
left:0;
transform:translate3d(0, -100%, 0)
}
.hc-offcanvas-nav.nav-position-bottom{
top:auto;
bottom:0
}
.hc-offcanvas-nav.nav-position-bottom .nav-container{
top:auto;
bottom:0;
width:100%
}
.hc-offcanvas-nav.nav-position-bottom.nav-levels-overlap li .nav-wrapper{
left:0;
transform:translate3d(0, 100%, 0)
}
.hc-offcanvas-nav.nav-open[class*='hc-nav-'] div.nav-container{
transform:translate3d(0, 0, 0)
}
.hc-offcanvas-nav.rtl{
text-align:right;
direction:rtl
}
.hc-nav-trigger{
position:fixed;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
display:none;
bottom:10px;
right: 10px;
z-index:9980;
width:30px;
min-height:24px
}
.hc-nav-trigger span{
width:30px;
top:50%;
transform:translateY(-50%);
transform-origin:50% 50%
}
.hc-nav-trigger span,.hc-nav-trigger span::before,.hc-nav-trigger span::after{
display:block;
position:absolute;
height:4px;
background:#fff;
transition:all .2s ease
}
.hc-nav-trigger span {
left:10px;
}
.hc-nav-trigger span::before,.hc-nav-trigger span::after{
left:0;
}
.hc-nav-trigger span::before,.hc-nav-trigger span::after{
content:'';
width:100%
}
.hc-nav-trigger span::before{
top:-10px
}
.hc-nav-trigger span::after{
bottom:-10px
}
.hc-nav-trigger.toggle-open span{
background:rgba(0,0,0,0);
transform:rotate(45deg)
}
.hc-nav-trigger.toggle-open span::before{
transform:translate3d(0, 10px, 0)
}
.hc-nav-trigger.toggle-open span::after{
transform:rotate(-90deg) translate3d(10px, 0, 0)
}
.hc-offcanvas-nav{
font-family:sans-serif
}
.hc-offcanvas-nav::after,.hc-offcanvas-nav .nav-wrapper::after{
background:rgba(0,0,0,0.3)
}
.hc-offcanvas-nav .nav-container,.hc-offcanvas-nav .nav-wrapper,.hc-offcanvas-nav ul{
background:#fff
}
.hc-offcanvas-nav .nav-content>h2,.hc-offcanvas-nav .nav-content>h3,.hc-offcanvas-nav .nav-content>h4,.hc-offcanvas-nav .nav-content>h5,.hc-offcanvas-nav .nav-content>h6{
font-size:19px;
font-weight:normal;
padding:20px 17px;
color:#1b3958
}
.hc-offcanvas-nav .nav-content>h2:not(.nav-title):not(.level-title),.hc-offcanvas-nav .nav-content>h3:not(.nav-title):not(.level-title),.hc-offcanvas-nav .nav-content>h4:not(.nav-title):not(.level-title),.hc-offcanvas-nav .nav-content>h5:not(.nav-title):not(.level-title),.hc-offcanvas-nav .nav-content>h6:not(.nav-title):not(.level-title){
font-size:16px;
padding:15px 17px;
background:#e7e7e7
}
.hc-offcanvas-nav .nav-item-link,.hc-offcanvas-nav li.nav-close a,.hc-offcanvas-nav .nav-back a{
padding:14px 17px;
font-size:14px;
color:#000;
z-index:1;
background:rgba(0,0,0,0);
border-bottom:1px solid #e7e7e7;
transition:background .1s ease
}
.hc-offcanvas-nav .nav-item-link:focus,.hc-offcanvas-nav .nav-item-link:focus-within,.hc-offcanvas-nav li.nav-close a:focus,.hc-offcanvas-nav li.nav-close a:focus-within,.hc-offcanvas-nav .nav-back a:focus,.hc-offcanvas-nav .nav-back a:focus-within{
z-index:10
}
.hc-offcanvas-nav .nav-item-link[disabled],.hc-offcanvas-nav li.nav-close a[disabled],.hc-offcanvas-nav .nav-back a[disabled]{
color:rgba(255,255,255,0.5)
}
.hc-offcanvas-nav div.nav-back+ul>li:first-child>.nav-item-wrapper>.nav-item-link{
border-top:none !important
}
.hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover{
background:#e7e7e7;
border-right: 3px solid var(--c);
}
.hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover .nav-next span::before, 
.hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover .hc-offcanvas-nav .nav-back span::before {
border-color: var(--c);
}
.hc-offcanvas-nav .nav-custom-content{
padding:14px 17px;
font-size:14px;
border-bottom:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-highlight{
background:#e7e7e7
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link{
border-top:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link+a{
border-top:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:not(:last-child){
border-bottom:2px solid #e7e7e7
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>ul+h2,.hc-offcanvas-nav .nav-wrapper>.nav-content>ul+h3,.hc-offcanvas-nav .nav-wrapper>.nav-content>ul+h4,.hc-offcanvas-nav .nav-wrapper>.nav-content>ul+h5,.hc-offcanvas-nav .nav-wrapper>.nav-content>ul+h6{
margin-top:-2px
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>h2+ul>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link,.hc-offcanvas-nav .nav-wrapper>.nav-content>h3+ul>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link,.hc-offcanvas-nav .nav-wrapper>.nav-content>h4+ul>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link,.hc-offcanvas-nav .nav-wrapper>.nav-content>h5+ul>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link,.hc-offcanvas-nav .nav-wrapper>.nav-content>h6+ul>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link{
border-top:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-title+h2,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-title+h3,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-title+h4,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-title+h5,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-title+h6,.hc-offcanvas-nav .nav-wrapper>.nav-content>.level-title+h2,.hc-offcanvas-nav .nav-wrapper>.nav-content>.level-title+h3,.hc-offcanvas-nav .nav-wrapper>.nav-content>.level-title+h4,.hc-offcanvas-nav .nav-wrapper>.nav-content>.level-title+h5,.hc-offcanvas-nav .nav-wrapper>.nav-content>.level-title+h6,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-close+h2,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-close+h3,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-close+h4,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-close+h5,.hc-offcanvas-nav .nav-wrapper>.nav-content>.nav-close+h6{
border-top:1px solid #e7e7e7
}
.hc-offcanvas-nav li{
color:#fff
}
.hc-offcanvas-nav li.nav-parent .nav-item-link:last-child{
padding-right:58px
}
.hc-offcanvas-nav li.nav-parent .nav-item-link:not(:last-child){
margin-right:45px
}
.hc-offcanvas-nav .nav-close-button span, .nav-next,.hc-offcanvas-nav .nav-back span{
width:45px;
position:absolute;
top:0;
right:0;
bottom:0;
text-align:center;
cursor:pointer;
transition:background .1s ease
}
.hc-offcanvas-nav .nav-close-button{
position:relative;
display:block
}
.hc-offcanvas-nav .nav-close-button span::before,.hc-offcanvas-nav .nav-close-button span::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:6px;
height:6px;
margin-top:-3px;
border-top:2px solid #fff;
border-left:2px solid #fff
}
.hc-offcanvas-nav .nav-close-button span::before{
margin-left:-9px;
transform:rotate(135deg)
}
.hc-offcanvas-nav .nav-close-button span::after{
transform:rotate(-45deg)
}
.hc-offcanvas-nav .nav-content>.nav-close{
position:relative;
z-index:2
}
.hc-offcanvas-nav .nav-content>.nav-close a{
font-size:14px;
color:#fff;
background:rgba(0,0,0,0);
z-index:1;
text-decoration:none;
box-sizing:border-box
}
.hc-offcanvas-nav .nav-content>.nav-close a:not(.has-label){
height:50px
}
.hc-offcanvas-nav .nav-content>.nav-close a.has-label{
padding:14px 17px;
border-top:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-content>.nav-close a:hover{
border:none;
background:radial-gradient(farthest-corner at top right, rgba(0,0,0,0.1), rgba(0,0,0,0))
}
.hc-offcanvas-nav .nav-content>.nav-close.has-label+ul{
margin-top:-1px
}
.hc-offcanvas-nav:not(.nav-close-button-empty) .nav-content>.nav-close{
margin-bottom:-1px
}
.hc-offcanvas-nav .nav-title+.nav-close a:not(.has-label){
position:absolute;
width:45px;
height:66px;
line-height:66px;
top:-66px;
right:0
}
.hc-offcanvas-nav.nav-close-button-empty .nav-title{
padding-right:55px
}
.hc-offcanvas-nav li.nav-close a:not(.has-label){
height:49px
}
.hc-offcanvas-nav .nav-back a{
background:#e7e7e7;
border-top:1px solid #e7e7e7;
border-bottom:1px solid #e7e7e7;    
}
.hc-offcanvas-nav .nav-back a:hover{
background:#e7e7e7
}
.hc-offcanvas-nav .nav-content>.nav-close:first-child a,
.hc-offcanvas-nav .nav-title+.nav-close a.has-label,
.hc-offcanvas-nav li.nav-close a{
background:#d54c4c;
border-top:1px solid #e7e7e7;
border-bottom:1px solid #e7e7e7
}
.hc-offcanvas-nav .nav-content>.nav-close:first-child a:hover,
.hc-offcanvas-nav .nav-title+.nav-close a.has-label:hover,
.hc-offcanvas-nav li.nav-close a:hover{
background:#c14444
}
.hc-offcanvas-nav li.nav-close:not(:first-child) a,.hc-offcanvas-nav li.nav-back:not(:first-child) a{
margin-top:-1px
}
a.nav-next{
border-left:1px solid #e7e7e7;
border-bottom:1px solid #e7e7e7
}
.nav-next span::before,.hc-offcanvas-nav .nav-back span::before{
content:'';
position:absolute;
top:50%;
left:50%;
width:8px;
height:8px;
margin-left:-2px;
box-sizing:border-box;
border-top:2px solid #999;
border-left:2px solid #999;
transform-origin:center
}
.nav-next span{
position:absolute;
top:0;
right:0;
left:0;
bottom:0
}
.nav-next span::before{
transform:translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav .nav-back span::before{
margin-left:2px;
transform:translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.nav-position-left.nav-open.nav-levels-overlap .nav-wrapper{
box-shadow:1px 0 2px rgba(0,0,0,0.2)
}
.hc-offcanvas-nav.nav-position-right.nav-open.nav-levels-overlap .nav-wrapper{
box-shadow:-1px 0 2px rgba(0,0,0,0.2)
}
.hc-offcanvas-nav.nav-position-right .nav-next span::before{
margin-left:2px;
transform:translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.nav-position-right .nav-back span::before{
margin-left:-2px;
transform:translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav.nav-position-top.nav-open .nav-wrapper{
box-shadow:0 1px 2px rgba(0,0,0,0.2)
}
.hc-offcanvas-nav.nav-position-top .nav-next span::before{
margin-left:0;
margin-right:-2px;
transform:translate(-50%, -50%) rotate(-135deg)
}
.hc-offcanvas-nav.nav-position-top .nav-back span::before{
margin-left:0;
margin-right:-2px;
transform:translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-position-bottom.nav-open .nav-wrapper{
box-shadow:0 -1px 2px rgba(0,0,0,0.2)
}
.hc-offcanvas-nav.nav-position-bottom .nav-next span::before{
margin-left:0;
margin-right:-2px;
transform:translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-position-bottom .nav-back span::before{
margin-left:0;
margin-right:-2px;
transform:translate(-50%, -50%) rotate(-135deg)
}
.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper,.hc-offcanvas-nav.nav-levels-none ul .nav-wrapper{
box-shadow:none;
background:transparent
}
.hc-offcanvas-nav.nav-levels-expand li.level-open,.hc-offcanvas-nav.nav-levels-none li.level-open{
background:#2e6296
}
.hc-offcanvas-nav.nav-levels-expand li.level-open>.nav-item-wrapper>a,.hc-offcanvas-nav.nav-levels-none li.level-open>.nav-item-wrapper>a{
border-bottom:1px solid #295887
}
.hc-offcanvas-nav.nav-levels-expand li.level-open>.nav-item-wrapper>a:hover,.hc-offcanvas-nav.nav-levels-none li.level-open>.nav-item-wrapper>a:hover{
background:#2f649a;
}
.hc-offcanvas-nav.nav-levels-expand li.level-open>.nav-item-wrapper>.nav-next span::before,.hc-offcanvas-nav.nav-levels-expand li.level-open>.nav-item-wrapper>a>.nav-next span::before,.hc-offcanvas-nav.nav-levels-none li.level-open>.nav-item-wrapper>.nav-next span::before,.hc-offcanvas-nav.nav-levels-none li.level-open>.nav-item-wrapper>a>.nav-next span::before{
margin-top:-2px;
transform:translate(-50%, -50%) rotate(-135deg)
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper-1 .nav-item-link,.hc-offcanvas-nav.nav-levels-none .nav-wrapper-1 .nav-item-link{
padding-left:calc(17px + 20px * 1)
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper-2 .nav-item-link,.hc-offcanvas-nav.nav-levels-none .nav-wrapper-2 .nav-item-link{
padding-left:calc(17px + 20px * 2)
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper-3 .nav-item-link,.hc-offcanvas-nav.nav-levels-none .nav-wrapper-3 .nav-item-link{
padding-left:calc(17px + 20px * 3)
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper-4 .nav-item-link,.hc-offcanvas-nav.nav-levels-none .nav-wrapper-4 .nav-item-link{
padding-left:calc(17px + 20px * 4)
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper-5 .nav-item-link,.hc-offcanvas-nav.nav-levels-none .nav-wrapper-5 .nav-item-link{
padding-left:calc(17px + 20px * 5)
}
.hc-offcanvas-nav.rtl a.nav-next{
border-left:none;
border-right:1px solid #e7e7e7
}
.hc-offcanvas-nav.rtl .nav-title+.nav-close a:not(.has-label),.hc-offcanvas-nav.rtl .nav-close-button span,.hc-offcanvas-nav.rtl .nav-next,.hc-offcanvas-nav.rtl .nav-back span{
left:0;
right:auto
}
.hc-offcanvas-nav.rtl li.nav-parent .nav-item-link:last-child{
padding-left:58px;
padding-right:17px
}
.hc-offcanvas-nav.rtl li.nav-parent .nav-item-link:not(:last-child){
margin-left:45px;
margin-right:0
}
.hc-offcanvas-nav.rtl .nav-wrapper-1 li.nav-item .nav-item-link{
padding-right:calc(17px + 20px * 1)
}
.hc-offcanvas-nav.rtl .nav-wrapper-2 li.nav-item .nav-item-link{
padding-right:calc(17px + 20px * 2)
}
.hc-offcanvas-nav.rtl .nav-wrapper-3 li.nav-item .nav-item-link{
padding-right:calc(17px + 20px * 3)
}
.hc-offcanvas-nav.rtl .nav-wrapper-4 li.nav-item .nav-item-link{
padding-right:calc(17px + 20px * 4)
}
.hc-offcanvas-nav.rtl .nav-wrapper-5 li.nav-item .nav-item-link{
padding-right:calc(17px + 20px * 5)
}
.star-bar {
fill: url(#linear-gradient);
margin-top: -12px;
width: 400px;
display: block;
max-width: 90%;
margin-bottom: 20px;
}
.gdc1 {
stop-color: var(--c);
stop-opacity: 0.5;
}
.gdc2 {
stop-color: var(--c);
stop-opacity: 1;
}
#left-s {
content: "";
position: absolute;
left: 0;
border-top: 106px solid rgba(0,0,0,0);
border-bottom: 30px solid var(--c);
border-left: 49vw solid var(--c);
border-right: 49vw solid var(--c);
right: 0;
top: 7px;
}
#right-s {
content: "";
position: absolute;
left: 0;
border-top: 92px solid var(--c);
border-bottom: 50px solid rgba(0,0,0,0);
border-left: 49vw solid rgba(0,0,0,0);
border-right: 49vw solid rgba(0,0,0,0);
right: 0;
top: 142px;
}
body.home #header-wrapper, 
body.student-single #header-wrapper, 
body.staff-single #header-wrapper, 
body.teacher-single #header-wrapper {
padding-bottom: 120px;
}
body.home #svg-con, 
body.student-single #svg-con, 
body.staff-single #svg-con, 
body.teacher-single #svg-con {
margin-top: -80px;
}
#backbox-polygon {
stroke-width: 5px;
stroke: var(--c);
color: #fff;
}
#frontbox-polygon {
stroke-width:2;
stroke-linecap: round;
stroke-dasharray: 100;
-webkit-animation: animate1 9s infinite linear;
animation: animate1 9s infinite linear;
}
@keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
@-webkit-keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
@media only screen and (min-width: 420px) {
#left-s {
border-top: 72px solid rgba(0,0,0,0);
border-bottom: 60px solid var(--c);
top: 7px;
}
#right-s {
border-top: 97px solid var(--c);
border-bottom: 50px solid rgba(0,0,0,0);
top: 137px;
}
}
@media only screen and (min-width: 540px) {
#left-s {
border-top: 80px solid rgba(0,0,0,0);
border-bottom: 60px solid var(--c);
top: -8px;
}
#right-s {
border-top: 100px solid var(--c);
border-bottom: 50px solid rgba(0,0,0,0);
top: 132px;
}
}
@media only screen and (min-width: 800px) {
#left-s {
border-top: 80px solid rgba(0,0,0,0);
border-bottom: 70px solid var(--c);
top: -14px;
}
#right-s {
border-top: 97px solid var(--c);
border-bottom: 50px solid rgba(0,0,0,0);
top: 136px;
}
}
@media only screen and (min-width: 1000px) {
#left-s {
border-top: 72px solid rgba(0,0,0,0);
border-bottom: 60px solid var(--c);
top: 6px;
}
#right-s {
border-top: 105px solid var(--c);
border-bottom: 50px solid rgba(0,0,0,0);
top: 138px;
}
#photo_gallery_grid, #video_gallery_grid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
ul#grid-list {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
#student-infos label {
width: 200px;
}
#student-infos strong {
width: calc(100% - 210px);
}
}