/*
Theme Name: thangkar
Theme URI: 
Author: PurpleAsia
Author URI: 
Description: 
Version: 1.0
*/
:root {
  --sea-buckthorn: #fab432; /*Vang*/
  --tamarillo:#961412; /*Do*/
  --lucky-point:#18145a;/*Xanh*/
  --linen:#f8ece2; /*Kem*/
  --fontlv1: 11pt;
  --fontlv2: 16pt;
  --fontlv3: 20pt;
  --fontmax: 70pt;
  --fonth1: 60pt;
  --fonth3: 45pt;
  --fonth4: 30pt;
  --linefonth4: 38pt;
}

@font-face {
    font-family: "Baskerville"; font-weight: 400;
    src: url("fonts/BaskervilleMTStd-Regular.otf");
}
@font-face {
    font-family: "Baskerville"; font-weight: 600;
    src: url("fonts/BaskervilleMTStd-SemiBd.otf");
}
html {
  scroll-behavior: smooth;
}
body {
	font-family: "Baskerville"; font-size: var(--fontlv1); line-height: 1.5em; font-weight: 400; letter-spacing: 0.5px; overflow-x: hidden; text-align: left; 
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000000; 
}

body.disscroll {height: 100vh; overflow: hidden;}
button:focus {
  background-color: var(--sea-buckthorn);
}
a:hover,
a:active,
a:focus,
input:focus,
input:hover,
button:hover,
button:active,
button:focus,
textarea:focus,
div:focus {
    outline: 0;
}
a,
a:hover,
a:active,
a:focus {
    text-decoration: none
}
a, a:link, a:visited, button, button:link, button:visited {
	cursor: pointer;
}
a:link:active, a:visited:active, :active, button:link:active, button:visited:active {
  
}
p {margin:  0px 0px 15px;} p:last-child{margin:0px;}
input {border-color: #fff}

/* label focus color */
input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
 color: #fff !important; 
}
#formContact input[type=text]:not(.browser-default) {
	border-bottom:1px solid rgba(150, 20, 18,0.6) !important; font-family: "Baskerville";
	font-size: var(--fontlv2);
}
#formContact textarea {
    background-image: linear-gradient(rgba(0, 0, 0, 0) 43px, var(--tamarillo) 44px);
    background-size: 100% 44px;
    line-height: 44px;
    border: none;
    height: 280px;
    font-family: "Baskerville"; font-size: var(--fontlv2);
  }
.form-group {margin-bottom: 10px;}

/* label underline focus color */
input[type='text']:focus, .materialize-textarea:focus:not([readonly]), input[type='email']:focus,
input[type='text'], .materialize-textarea:not([readonly]), input[type='email'] {
 border-bottom: solid 1px #162d38 !important;
 box-shadow: 0 0 0 0 #fff !important; line-height: 33px;
 font-family: "Transat"; font-size: 15px; 
}
input[type=text]:not(.browser-default) {
	font-size: 15px; line-height: 33px; height: 33px; margin-bottom: 0px;
}
button, input, optgroup, select, textarea {
	font-family: "Baskerville"; font-size: var(--fontlv1);
}
ul {margin:0px; padding: 0px;}
.datepicker-date-display {
    background-color: #be0041;
}
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
    color: #be0041;
}
.datepicker-table td.is-today {
    color: #be0041;
}
.datepicker-table td.is-selected {
    background-color: #be0041;
}
.timepicker-digital-display {
    background-color: #be0041;
}
.timepicker-close {
    color: #be0041;
}
.timepicker-canvas line {
    stroke: #be0041;
}
.timepicker-canvas-bg {
    fill: #be0041;
}
.timepicker-canvas-bearing {
    fill: #be0041;
}

::-webkit-input-placeholder { /* Edge */
  color: #162d38;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #162d38;
}

::placeholder {
  color: #162d38;
}
h1, h2, h3, h4, h5 {
	padding: 0px; margin: 0px; line-height: 1em;
}
h1 {line-height: 70px}
h1, .titlesection, .contentpopup h3, .aboutus h3, .pageschool h2 {
	font-size: var(--fonth3); text-transform: uppercase; color:var(--tamarillo); letter-spacing: 10px; font-weight: 600
}
.contentpopup a {color:#000000}
.contentpopup h3 {font-size: var(--fonth3); margin-bottom: 30px; text-align: center;}
.mct {
	opacity: 0;
}
.lsc {
	position: fixed; z-index: 1000; width: 100%; height: 100%; background: transparent;
}
.lscleft {
	position: absolute; width:50%; height: 100%;background: var(--linen); left:0px; top:0px;
}
.lscright {
	position: absolute; width:50%; height: 100%;background: var(--linen); left:50%; top:0px;
}
.logoloading {
	width:140px; height: 92px; background: url("images/logo-red.png"); background-size: 140px 92px ;
	position: absolute; top: calc(50% - 46px); left: calc(50% - 70px);
}
/*
 * Loading
 */
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--lucky-point);
    -webkit-animation: spinloader 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spinloader 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--tamarillo);
    -webkit-animation: spinloader 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spinloader 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--sea-buckthorn);
    -webkit-animation: spinloader 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spinloader 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spinloader {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spinloader {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
/*endloading*/
.header {
	position: absolute; width: 100%; top:0px; left:0px; z-index: 1000;
}
.language {
	position: absolute; top:14px; right: 90px;
}
.social {
	position: absolute; top:18px; right: calc(90px + 135px)
}
.support {
	position: absolute; top:0px; right: calc(9% + 135px); font-size: var(--fontlv1); line-height: 40px;
	background: var(--sea-buckthorn); color:var(--tamarillo); text-transform: uppercase; letter-spacing: 2px;
	padding: 0px 10px 0px 12px; font-weight: 600
}
.support:before {
	content:""; width: 100%; height:0px; background: var(--linen); bottom:0px; left:0px; position:absolute; 
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.support:hover:before {
	height: 100%;
} 
.support span {position: relative;}
.logo {
	position: absolute; top:40px; left:9%;
	background-image:url("images/logo-white.png"); width:140px; height:92px; background-size:140px 92px;
}
.logo.logored {background-image:url("images/logow.png");}
.logo.fixed, .menumobile.fixed{position:fixed;}
.lfogo{
	background-image:url("images/logo-white.png"); width:110px; height:72px; background-size:110px 72px;
}
.language ul, .social ul, .socialfooter ul {margin:0px; padding:0px;}
.language li {font-size: 18px; color:#FFFFFF; line-height: 40px; cursor: pointer;transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.language li, .social li, .socialfooter li {float: left; position: relative; padding: 0px 6px; }
.language li:after {content:"/"; position: relative; top:0px; right: -6px;}
.language li:last-child:after {display:none;}
.fa {
	background-image:url("images/fb.svg"); width:29px; height: 29px; 
}
.fa:hover {background-image:url("images/fb-yellow.svg"); }
.in {
	background-image:url("images/in.svg"); width:29px; height: 29px; background-size:29px 29px;
}
.in:hover {background-image:url("images/in-yellow.svg"); }
.bannerpage {
	position: relative; width: 100%; height: 100vh;
}
.bannerfull {width: 100%; height: 100%; background-size:cover; background-position: center;}
.menuw {position: absolute; top: 70px; right: 0px; padding-right: 90px; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;}
.menuw ul {margin:0px; padding:0px;}
.menuw li {float:left;}
#menu-mainmenu > li {line-height: 38px; padding:0px 10px;}
#menu-mainmenu > li a {font-size: var(--fontlv1); font-weight: 600; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.5px; 
transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
#menu-mainmenu > li:last-child {padding-right:0px;}
#menu-mainmenu > li:first-child{padding-left:0px;}
.caption-bn {
	position: absolute; top: calc(50% - 100px); left: 0%; width:100%; text-align: center
}
.caption-bn .lbaption {font-size:var(--fontmax); color:#FFFFFF; line-height: 110px; text-transform: uppercase; letter-spacing: 20px; margin-bottom:50px;}
.footer {background: var(--tamarillo); padding:80px 0px 60px;}
.btnwelcome {
	background:transparent; border: 1px solid var(--linen); padding: 0px 60px 0px 50px; color:var(--linen); text-transform: uppercase;
	font-size: var(--fontlv2); letter-spacing: 5px; line-height: 50px; border-radius: 50px; position: relative; cursor: pointer;
	overflow: hidden; position: relative; transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.btnwelcome:hover {color: var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; }
.btnwelcome:after {
	content: url(images/welcome.svg); position: absolute; top:6px; right: 25px;
}
.btnwelcome:before {
	content:""; width: 100%; height:0px; background: var(--sea-buckthorn); bottom:0px; left:0px; position:absolute; 
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.btnwelcome:hover:before {
	height: 100%;
} 
.btnwelcome span {position: relative;}
.aboutus, .news-events  {
	background: var(--linen); padding: 100px 0px;
}
.aboutus h1, .aboutus h3 {margin-bottom: 20px;}
.aboutus .container{
	max-width: 1186px; text-align: center; font-size:var(--fontlv2); line-height: 30px; color:#000000;
}
.pagedetail {
	font-size:var(--fontlv2); line-height: 30px;
}

.row01 .container {max-width:780px; text-align: center;}
.container p {margin-bottom: 15px;} .container p:last-child {margin-bottom: 0px;}
.moreabout {margin-top: 30px;}
.moreabout a div{
	background:transparent; border: 1px solid var(--sea-buckthorn); padding: 12px 0px;  color:var(--tamarillo); text-transform: uppercase;
	font-size: var(--fontlv2); letter-spacing: 2px;  border-radius: 50px; position: relative; cursor: pointer; font-weight: 600;
	position: relative; overflow: hidden; max-width: 310px;margin-left:auto; margin-right:auto;
}
.btnsendcon{
	background:var(--tamarillo); border: 0px; padding: 12px 0px;  color:var(--linen); text-transform: uppercase;
	font-size: var(--fontlv1); letter-spacing: 2px;  border-radius: 50px; position: relative; cursor: pointer; font-weight: 600;
	position: relative; overflow: hidden; width: 100%; margin-top: 20px;
}
.btnsendcon span {position: relative;}
.moreabout a div:before {
	content:""; width: 100%; height:0px; background: var(--sea-buckthorn); bottom:0px; left:0px; position:absolute; 
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.btnsendcon div:before {
	content:""; width: 100%; height:0px; background: var(--sea-buckthorn); bottom:0px; left:0px; position:absolute; 
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.btnsendcon:hover div:before {
	background:var(--sea-buckthorn);
}
.btnsendcon:hover {color:var(--tamarillo)}
.moreabout a div:hover:before, .btnsendcon:hover  div:before {
	height: 100%;
} 
.moreabout a span {position: relative;}
.introduces {
	background: var(--linen); position: relative;
}
.mytabs li {
	width:33.3333%; float:left;text-align: center; border-top:1px solid var(--sea-buckthorn); border-bottom:1px solid var(--sea-buckthorn); background:transparent;
	line-height: 50px; text-transform: uppercase; font-size: var(--fontlv2); letter-spacing: 5px; font-weight: 600; color:var(--sea-buckthorn); cursor: pointer;
	position: relative; transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
}
.mytabs li.active, .mytabs li:hover{background:var(--sea-buckthorn); color: var(--tamarillo)}
.mytabs li:after {
	content: ""; width:1px; height: 100%; background:var(--sea-buckthorn); position: absolute; top:0px; right:0px;
}
.mytabs li:last-child:after {display:none;}
.arrowdown-tabs {
	width: 17px; height: 17px; background-image:url("images/arrowdown-tabs.svg"); position: absolute; top: 42px; z-index: 1000; left: calc(16.6666% - 8px)
}
.contacttab {width:100%; height: calc(100vh - 52px); overflow: hidden; position: relative;}
.content_ts, .content_gh, .content_dc {width:100%; height: 100%; position: relative;}
.content_gh, .content_dc {display: none}
.destabs {
	width: 800px; position: absolute; top:50%; left: calc(50% - 375px); -o-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);
	color:#FFFFFF; text-align: center; font-size: var(--fontlv2); line-height: 30px;
}
.destabs p {margin-bottom: 15px;} .destabs p:last-child {margin-bottom: 0px;}
.destabs h3 {
	font-weight: 600; font-size: var(--fonth3); text-transform: uppercase; margin-bottom: 20px; letter-spacing: 5px;
}
.gallerytabs {height:100%;}
.gallitem {width:100%; height: calc(100vh - 52px); background-size:cover; background-repeat: no-repeat; background-position: center; }
.destabs .moreabout div {
    background: var(--sea-buckthorn);
}
.destabs .moreabout a div:before {background:var(--linen)}
.bgmask {position: absolute; width:100%; height: 100%; top:0px; left:0px; background:rgba(0,0,0,0.4)}
.page-transition__black {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--linen);
  transform: scale(0, 1);
}
.aligncenter {display: block; margin:auto;}
.page-transition__red {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--tamarillo);
  transform: scale(0, 1);
}
.news-events {
	background: var(--sea-buckthorn); color: #000000;
}
.news-events a {color: #000000}
.titlesection {
	line-height: var(--fonth1); text-align: center; margin-bottom: 80px
}
.itemne {
	padding: 0px 15px; font-size: var(--fontlv2); line-height: 30px;
}
.news-events .container {
	width: calc(70% + 30px); max-width: 1310px;
}
.itemne img {max-width: 100%; height: auto;}
.itemdate{
	font-size: var(--fontlv1); text-align: center; margin-top: 10px;
}
.itemtitle {
	font-size: var(--fontlv2); text-transform: uppercase; letter-spacing: 3px; line-height: var(--fontlv2); margin: 10px 0px;
	color: var(--tamarillo);font-weight: 700;
}
.col-logo {float:left; width:196px;}
.col-menu {float:left; width:470px;}
.colnewsletter {float:left; width:calc(100% - 666px);}
.col-menu li {line-height: var(--fontlv1); padding: 3px 0px;}
.col-menu a {
	font-size: var(--fontlv1); line-height: var(--fontlv1); text-transform: uppercase; font-weight: 600; color: var(--linen); letter-spacing: 4px;
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.titlefooter {
	font-size: var(--fontlv1); line-height: var(--fontlv1); text-transform: uppercase; font-weight: 600; color: var(--sea-buckthorn); letter-spacing: 4px;
	margin-bottom: 15px;
}
.colbutton {float:left; width: 200px;}
.colinput {float:left; width: calc(100% - 200px);}
#fnewsletter input[type=text]:not(.browser-default) {
	font-size: var(--fontlv1); line-height: 38px; height: 38px; margin-bottom: 0px; background: var(--linen); padding: 0px 15px; box-sizing: border-box;
	border:0px !important; color: var(--tamarillo);
}
.colbutton button {
	border: 0px; width: 100%; height: 38px; line-height:38px; text-align: center;  font-size: var(--fontlv1); text-transform: uppercase; font-weight: 600; letter-spacing: 4px;
	background: var(--sea-buckthorn); color: var(--tamarillo); font-weight: 600; cursor:pointer; position: relative;
}
.colbutton button:before {
	content:""; width: 100%; height:0px; background: var(--linen); bottom:0px; left:0px; position:absolute; 
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; border-left: 1px solid var(--tamarillo);
}
.colbutton button:hover:before {
	height: 100%;
} 
.colbutton button span {position: relative;}
#fnewsletter ::-webkit-input-placeholder { /* Edge */
  color: var(--tamarillo);
}

#fnewsletter  :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--tamarillo);
}

#fnewsletter  ::placeholder {
  color: var(--tamarillo);
}
.col-menu a:hover, #menu-mainmenu > li a:hover, .language li:hover {
	color: var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.contentpopup {
	display: none;max-width:1200px; text-align: justify; padding: 60px 120px; background: var(--sea-buckthorn); font-size: var(--fontlv2); line-height: 30px;
}
#register.contentpopup {width: 1000px;}
.fancybox-button svg {color: var(--tamarillo)}
.contentpopup img {max-width:100%; height: auto;} 
.contentpopup p {margin: 0px 0px 15px;}

.menumobile {position: absolute; right:40px; top: 60px; height: 44px; width: 44px; background:#FFFFFF; border-radius: 50%; padding-top: 8px; padding-left:9px; display: none; z-index: 1000}
.menumobile.bgyellow {background:var(--sea-buckthorn) }
.menucontainer {
  display: inline-block;
  cursor: pointer; 
}

.bar1, .bar2, .bar3 {
  width: 26px;
  height: 3px;
  background-color: var(--tamarillo);
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -6px);
  transform: rotate(45deg) translate(-6px, -6px);
}
.copyright {
	padding-left: 196px; color: var(--linen); margin-top: 20px; line-height: 29px;
}
.copyright .socialfooter {
    position: relative;
    top: 0px;
    right: 0px;
    float: left; margin-right: 20px;
}
.sub-menu {display: none; position: absolute; width: 100%; left:0px; }
.footer .sub-menu  {display:none !important}
.menu-item-has-children:hover .sub-menu {display:block}
.sub-menu li {background: var(--linen); width: 100%; text-align: center; margin-bottom:1px;}
#menu-mainmenu > li .sub-menu li a {color:var(--tamarillo)}
#menu-mainmenu > li .sub-menu li a:hover {color: var(--sea-buckthorn)}
.itemdes {text-align: justify; position: relative;}
.itemdesmore {position: relative;  font-size: 0.8em; color: var(--tamarillo); text-align: left; margin-top: 0px;}
.contentpopup video, .contentpopup .wp-video {max-width: 100%; height: auto;}

/* Begin Timeline Css */

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto; text-align: left; margin-top: 60px
}
.timeline h4 {color: var(--tamarillo); font-weight: 600; margin-bottom: 10px;}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.containertl {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}
.containertl:nth-child(even) {
	padding-right:0px;
}
.containertl:nth-child(odd) {
	padding-left:0px;
}
/* The circles on the timeline */
.containertl::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  background-color: var(--sea-buckthorn);
  border: 4px solid var(--tamarillo);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.lefttl {
  left: 0;
}

/* Place the container to the right */
.righttl {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.lefttl::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.righttl::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.righttl::after {
  left: -12px;
}

/* The actual content */
.contenttl {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}
.news-events .moreabout a div {
	border: 0px;
	border-color: var(--linen); text-align: center; margin-top: 40px;
	background-color: var(--linen);
}
.news-events .moreabout a div:hover {
	color: var(--linen); border-color: var(--tamarillo);
}

.news-events .moreabout a div:before {
	background: var(--tamarillo); 
}
.footercopy{margin-top: 20px; color: #FFF;}
.footerright{padding-top: 5px;}
.footerleftimg{float:left; margin-right: 30px;}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .containertl  {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 26px; padding-bottom: 26px;
  }
  .destabs{font-size: 16px}
  .itemtitle,.itemdes, .itemdesmore{text-align: center;}
  h1, .titlesection, .contentpopup h3, .aboutus h3{letter-spacing: 5px;}
  .aboutus .container, .destabs, .contentpopup{line-height: 24px !important;}
  h1, .titlesection, .contentpopup h3, .aboutus h3{font-size: var(--fonth4); }

  /* Make sure that all arrows are pointing leftwards */
  .containertl::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent; display:none;
  }

  /* Make sure all circles are at the same spot */
  .lefttl::after, .righttl::after {
  left: 18px;
  }
  
  /* Make all right containers behave like the left ones */
  .righttl {
  left: 0%;
  }
  .contenttl {
		padding: 20px 34px;
		
	}
}
/* end Timeline Css */
#slaboutus {
	
}
.disabled {opacity: 0.5 !important}
.bgsend {
	width: 40px; height: 40px; background-image:url(images/loading.svg); background-size:40px 40px; position: absolute; top: 0px; left:calc(50% - 15px); display:none;
}
.colbutton {
    position: relative;
}
.btnsubmit {position: relative;}
.bannersub {
	width:100%; height: 70vh; background-size:cover; background-position: center; background-repeat: no-repeat; position: relative;
}
.bannersub h1 {
	position: absolute; top:50%; left: 0%; -o-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);
	color:#FFFFFF; text-align: center; width:100%;
}
.row01 {background:var(--linen); position: relative; padding: 100px 0px;}
.par01-01 {
	width:116px; height:116px; background-image:url("images/par01-01.svg"); background-repeat: no-repeat; background-size:116px 116px;
	position: absolute; top:0px; left:0px;
}
.par01-02 {
	width:116px; height:116px; background-image:url("images/par01-02.svg"); background-repeat: no-repeat; background-size:116px 116px;
	position: absolute; top:0px; right:0px;
}
.par01-03 {
	width:116px; height:116px; background-image:url("images/par01-03.svg"); background-repeat: no-repeat; background-size:116px 116px;
	position: absolute; bottom:0px; left:0px;
}
.par01-04 {
	width:116px; height:116px; background-image:url("images/par01-04.svg"); background-repeat: no-repeat; background-size:116px 116px;
	position: absolute; bottom:0px; right:0px;
}
.row2 {
	background-size:cover; background-repeat: no-repeat; background-position: center; position: relative;
	color:var(--tamarillo); padding: 100px 0px;
}
.row2:before {
	content: ""; width:100%; height: 100%; background:rgba(250, 180, 50, .88); position: absolute; top:0px; left:0px;
}
.row2 .container {position: relative; text-align: center;}
.row2 .moreabout {text-align: center; margin-top: 60px;}
.row2 .moreabout a div {
    background: var(--linen);
}
.lst2 li {float:left; width:50%; position: relative;}
.lst2 li:nth-child(odd) {padding-right: 100px}
.lst2 li:nth-child(odd):before {content:""; width: 2px; height:100%; background:rgba(150,20,18,.5); position: absolute; top:0px; right:0px;}
.lst2 li:nth-child(even) {padding-left: 100px}
.row2 h3 {font-size: var(--fontlv3); text-transform: uppercase; line-height: 24pt; margin-bottom: 20px; text-align: center;}
.row3 {background:var(--linen); position: relative; }
.row3 .secbghead h3 {
	font-size: var(--fonth3); line-height: 300px; background:var(--linen); text-align: center; text-transform: uppercase; color: var(--tamarillo);
	letter-spacing: 8px; font-weight: 700;
}
.teachintr {height: calc(100vh - 300px)}
.tablemiddle {display: table; height: calc(100vh - 300px); width: 100%;}
.hoverinfo .tablemiddle {
	height: 100%;
}
.cellmiddle {display:table-cell; vertical-align: middle;}
.teachintr-col1 {float:left; width:290px; height: 100%; position: relative;}
.teachintr-col2 {float:left; width:calc(100% - 580px); height: 100%; background:var(--sea-buckthorn); color:#000000; position: relative; }
.teachintr-col3 {float:left; width:290px; height: 100%; background-size:cover; background-repeat: no-repeat; background-position: center; }
.tabver {height:100%; width:100%;}
.tabver li {
	width:100%; height: 50%; line-height: calc(50vh - 150px); text-transform: uppercase; color:var(--tamarillo); font-weight: 700; letter-spacing: 3px;
	text-align: center; font-size: var(--fontlv2); cursor: pointer; border-top:1px solid var(--tamarillo); background:var(--linen)
}
.tabver li.active{background:var(--tamarillo); color:var(--linen)}
.tabver li:hover {color: var(--sea-buckthorn)}
.teachintr-col2con {max-width:530px; margin: auto; text-align: center; }
.lectures_content {display:none;}
.row3 .moreabout a div {
    border: 1px solid var(--tamarillo);
}
.row3 .moreabout a div:before {
	background: var(--linen);; 
}
.icon-teaching-01 {
	width:116px; height:116px; background:url(images/par01-01.svg); background-size: 116px 116px;
	position: absolute; top:0px; left:0px;
}
.icon-teaching-02 {
	width:116px; height:116px; background:url(images/par01-02.svg); background-size: 116px 116px;
	position: absolute; top:0px; right:0px;
}
.icon-teaching-03 {
	width:116px; height:116px; background:url(images/par01-04.svg); background-size: 116px 116px;
	position: absolute; bottom:0px; right:0px;
}
.icon-teaching-04 {
	width:116px; height:116px; background:url(images/par01-03.svg); background-size: 116px 116px;
	position: absolute; bottom:0px; left:0px;
}
.icon-line1 {
	width: calc(100% - 230px); height: 6px; background:transparent;
	border-top: 1px solid var(--tamarillo); border-bottom: 1px solid var(--tamarillo);
	position: absolute; top:0px; left:115px;
}
.icon-line2 {
	height: calc(100% - 230px); width: 6px; background:transparent;
	border-left: 1px solid var(--tamarillo); border-right: 1px solid var(--tamarillo);
	position: absolute; right:0px; top:115px;
}
.icon-line3 {
	width: calc(100% - 230px); height: 6px; background:transparent;
	border-top: 1px solid var(--tamarillo); border-bottom: 1px solid var(--tamarillo);
	position: absolute; bottom:0px; left:115px;
}
.icon-line4 {
	height: calc(100% - 230px); width: 6px; background:transparent;
	border-left: 1px solid var(--tamarillo); border-right: 1px solid var(--tamarillo);
	position: absolute; left:0px; top:115px;
}
.icon-lineleft {
	height: calc(100% - 116px); width: 6px; background:transparent;
	border-left: 1px solid var(--tamarillo); border-right: 1px solid var(--tamarillo);
	position: absolute; left:0px; top:116px;
}
.icon-lineright {
	height: calc(100% - 116px); width: 6px; background:transparent;
	border-left: 1px solid var(--tamarillo); border-right: 1px solid var(--tamarillo);
	position: absolute; right:0px; top:116px;
}
.icon-teaching-ar {
	width:13px; height:26px; background:url(images/icon-teaching-ar.svg); background-size: 13px 26px;
	position: absolute; top:calc(25% - 13px); left: 0px;
}
.teachings {
	background: var(--linen); padding:90px 0px 0px;
}
.teachings .container {position: relative; padding: 130px 6px 0px;} 
.tabteachings {width: 100%; }
.tabteachings li {
	float:left; width:50%; text-align: center; text-transform: uppercase; height: 170px; font-size:var(--fonth3); font-weight: 700; line-height: 60px; letter-spacing: 5px;
	border-top:1px solid var(--tamarillo); position: relative;
}
.tabteachings li:first-child {
	border-right:1px solid var(--tamarillo);
}
.tabteachings li a {
	color: rgba(150, 20, 18,0.2); position: absolute; top:50%; left:0px; -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%)
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; width:100%;
}
.tabteachings li a:hover{
	color: rgba(150, 20, 18,1);
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.tabteachings li.active {
	background: var(--sea-buckthorn); 
}
.tabteachings li.active a {color: var(--tamarillo)}
.filter {
	background: var(--tamarillo); padding: 0px 0px 0px 380px; color: var(--sea-buckthorn);
	height: 50px; line-height: 50px; text-transform: uppercase;
}
.lstteaching {padding-top: 60px;}
.colcates {
	float:left; width:300px; padding: 0px 0px 0px 80px; height: calc(100vh - 280px); border-right:1px solid var(--tamarillo);  
}
.colarticles {
	float:right; width:calc(100% - 380px); height: calc(100vh - 280px); padding-right:80px; overflow-y: hidden;
}
.colcates li {
	padding: 15px 10px; border-top: 1px solid var(--tamarillo); border-left: 1px solid var(--tamarillo); position: relative;
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.colcates li:last-child {border-bottom: 1px solid var(--tamarillo); }
.colcates li a {color: var(--tamarillo); text-transform: uppercase;}
.colcates li.active, .colcates li:hover {background:var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.colcates li.active:before {
	content:""; width:1px; height:100%; background:var(--sea-buckthorn);
	position: absolute; top:0px; right:-1px;
}
.colcates li.active:after {
	content:""; width:15px; height:15px; background-image:url("images/icon-cat-arr.svg"); background-size:15px 15px;
	position: absolute; top:calc(50% - 7px); right:-7px;
}
.teach-title {color:var(--tamarillo); text-transform: uppercase; margin-bottom:9px;}
.teach-title a {color:var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.teach-title a:hover{color:var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.colarticles li {padding: 0px 10px 30px 0px; position: relative; margin-bottom: 30px}
.colarticles li:first-child {padding-top:0px;} .colarticles li:last-child {margin-bottom: 80px}
.colarticles li:before {
	content: "";width:30%; height:1px; background:var(--sea-buckthorn);
	position: absolute; bottom:0px; left:0px;
}
.colcates-scroll, .colarticles-scroll {
	max-height: 100%;
}
.labfilter {float:left;}
.selfilter {float:left; margin-left: 50px;}
.selfilter input[type=text]:not(.browser-default) {
	color: var(--sea-buckthorn); font-size: var(--fontlv2); font-family: "Baskerville"; text-transform: uppercase;
	line-height: 50px; border-bottom: 0px !important; height: 50px; text-align: center;
}
.selfilter .select-wrapper .caret {
    fill: var(--sea-buckthorn);
}
.dropdown-content li>a, .dropdown-content li>span {
    color: var(--tamarillo);
}
.postdetail {
	background: var(--linen); padding-top:210px; font-size: var(--fontlv2); line-height: 28px;
}
.header.colRed #menu-mainmenu > li a, .header.colRed .language li{
	color:var(--tamarillo);
}
.header.colRed .menuw {
	border-color:var(--tamarillo);
} 
.header.colRed .language li:hover {color: var(--sea-buckthorn)}
.postdetail .container {max-width: 800px; padding-bottom: 90px}
.barmenu {
	position: relative; height:50px; width:100%;
}
.barmenu ul li {float:left; padding:0px 8px; position: relative;}
.barmenu ul li:first-child{padding-left:0px}
.barmenu ul li:after {content:"/"; position: absolute; top:1px; right:-2px; color: var(--tamarillo)}
.barmenu ul li:last-child:after {display:none}
.barmenu ul li a,  .files_docus a {color:var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;  }
.barmenu ul li a:hover, .files_docus a:hover {color:var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; }
.backhistory {position: absolute; top:0px; right:0px; cursor:pointer; color:var(--sea-buckthorn)}
.backhistory:hover {color:var(--tamarillo)}
.iconback {position: relative; padding:0px 0px 0px 18px}
.iconback:before {
	content:""; width:9px; height:16px; background-size:9px 16px; background-image:url("images/icon-goback.svg");
	position: absolute; top:6px; left:0px;
}
.backhistory:hover .iconback:before {background-image:url("images/icon-goback-red.svg");}
.postdate {color: var(--sea-buckthorn); margin-bottom:2px;}
.postcontent {
	margin: 20px 0px;
}
.files_docus, .files_video, .files_audios {
	padding: 30px 0px 0px;
}
.icon-pdf {
	width:83px; height:115px; background-size:83px 115px; background-image:url("images/icon-pdf.svg"); margin: 5px auto;
}
.files_docus li {float:left; width: 25%; text-align: center; padding: 0px 10px; margin-bottom: 30px}
.files_video div {max-width:100%}
.files_video video {max-width:100%; height: auto;}
.files_video li, .files_audios li {margin-bottom: 30px;}
.files_video li:last-child, .files_audios li:last-child {margin-bottom:0px;}
.titleaudio {font-size:0.8em; color:var(--tamarillo); text-align: left;}
.colaudio {float:left; width:calc(100% - 150px)}
.coldownload {float:right; width:140px; text-align: center; font-size: var(--fontlv1);  line-height: 50px; border: 1px solid var(--tamarillo);
background:var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.coldownload:hover {
	background:var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.coldownload  a {color:var(--tamarillo)}
.coldownload:hover a {
	color:var(--sea-buckthorn)
}
.pageschool h2, .coltext h3, .facilities h3, .photogallery h3, .lastest h3, .contactus h3 {
	font-size: var(--fonth4); text-transform: uppercase; color:var(--tamarillo); letter-spacing: 10px; font-weight: 600;
	line-height: var(--linefonth4); text-align: center; margin-bottom: 30px;
}
.contactus h3 {font-size:26px; font-weight: 600;}
.contactus h3 {text-align: left; letter-spacing: 4px; margin: 20px 0px ;}
.pageschool .row01 .container {
    text-align: left;
}
.pageschool .row01 .container p {
	padding-left:70px; padding-right: 70px
}
.slguesthouse-con {
	width: calc(100% - 140px); margin-left:70px; margin-top: 50px;
}
.itemimg img {max-width: 100%; height: auto; display: block;}
.school-cirriculum {
	background:var(--tamarillo); color: var(--linen); position: relative; 
}
.classes-students {
	background:var(--sea-buckthorn); color: var(--tamarillo); position: relative; 
}
.coltext {width:50%; padding-left: calc(50% - 120px - 460px)}
.classes-students .coltext {
	padding-left:0px;  margin-left:calc(50% + 120px);
}
.coltext-con {width:460px; padding:110px 0px}
.coltext h3 {
	color: var(--sea-buckthorn); text-align: left; margin-bottom: 15px
}
.classes-students .coltext h3 {color: var(--tamarillo);}
.colimg {
	position: absolute; top:0px; right:0px; width:50%; height:100%; 
}
.classes-students  .colimg {left:0px;}
.itemfull {width:100%; height: 100%; background-size:cover; background-repeat: no-repeat; background-position: center;}
.slcirriculum, .slstudents {height: 100%}
.slcirriculum .slick-track, .slcirriculum  .slick-list, .slstudents .slick-track, .slstudents  .slick-list   {height: 100%;}
.facilities {background: var(--sea-buckthorn); color:var(--tamarillo);   padding: 90px 0px; } 
.facilities h3 {
	text-transform: uppercase; font-weight: 600;
}
.col50pl {float:left; width:calc(50% - 15px)}
.col50pr {float:right; width:calc(50% - 15px)}
.facilities .container{
	max-width: 790px
}
.facilities .container img {max-width: 100%; height: auto;}
.pageabout .facilities .container{
	max-width: 640px; color:#000000;
}

.slfacilities-con {
	width: 640px; margin-left:calc(50% - 320px); margin-top: 50px;
}
.barline {
	height:5px; width:54%; background:transparent;
	border-top: 1px solid var(--tamarillo); border-bottom: 1px solid var(--tamarillo);
	margin:10px 0px 30px;
}
.photogallery {background:var(--linen); padding: 110px 0px; position: relative;}
.photogallery .container {max-width:968px; color:#000000;}
.photogallery h3 {margin-bottom: 70px}
.ulbiography li {position: relative; padding-bottom: 70px; padding-top:18px}
.ulbiography li:last-child {padding-bottom: 110px}
.bioyear {position: absolute; right:calc(50% + 50px); color:var(--tamarillo); font-size:var(--fonth4); font-weight: 600;}
.ulbiography li:nth-child(even) .bioyear {
	right:calc(50% - 130px)
}
.biocontent {
	width: calc(50% - 50px);
}
.ulbiography li:nth-child(odd) .biocontent{
	margin-left: calc(50% + 50px)
}
.pageabout .facilities .container.biocontainer {
    max-width: 880px;
}
.pageabout .facilities {padding-bottom:0px}
.biography {margin-top: 90px;}
.bioline {
	position: absolute; width:1px; height: calc(100% - 57px); background:var(--tamarillo);
	position: absolute; top:57px; left:calc(50% - 1px)
}
.bioicon {
	width:40px; height: 57px; background-image:url("images/bioicon.svg"); background-size: 40px 57px;
	position: absolute; top: 0px; left: calc(50% - 20px)
}
.slupcoming-con {
	width: 770px; margin:50px auto;
}
.itemupcoming {position: relative}
.datenews {
	background:var(--tamarillo);color:var(--sea-buckthorn);padding:6px 30px;
	border: 1px solid var(--sea-buckthorn); position: absolute; top:0px; left:60px; font-size:0.7em; text-transform: uppercase;
}
.bgmasknews {
	position: absolute; top:30%; width:100%; height:70%; left:0px;
	background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.8));
}
.conupcoming {
	position: absolute; bottom:30px; left:60px; width:70%; color:var(--linen);
}
.conupcoming .moreabout a {
	text-align: center; 
}
.conupcoming .moreabout {margin-top:22px;}
.conupcoming .moreabout a div {margin-left:0px; background:var(--sea-buckthorn); font-size: 0.8em; padding:6px 0px; width:200px;}
.conupcoming .moreabout a div:before {background:var(--linen)}

.tleupc {
	color:var(--sea-buckthorn); text-transform: uppercase; margin-bottom: 10px;
}
.row01 .lastest .container {
	max-width: 1280px;
}
.lslastest li {
	float:left; margin:0px 30px 30px 0px; width:calc(33.3333% - 20px);
}
.lslastest li:nth-child(3n+ 3) {margin-right:0px}
.lslastest li:nth-child(3n + 1) {clear:both}
.lslastest li img {max-width: 100%; height: auto;}
.newsdate {color:var(--tamarillo)}
.newstitle a{font-weight: 600; color:#1d1d1b; transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.lastest {
	margin:130px 0px 0px;
}
.lastest.padT0 {margin-top:0px;}
.lslastest-con {margin:50px 0px 0px;}
.lastest .moreabout a div {
	text-align: center; background:var(--sea-buckthorn)
}
.lastest .moreabout a div:hover:before, .postcontent .moreabout a div:hover:before {background:var(--linen)}
.line {margin:10px 0px; width:100%; height:1px; background:var(--tamarillo)}
.readmore {color: var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.readmore:hover, .newstitle a:hover {color: var(--sea-buckthorn); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;}
.postcontent img, .postcontent video, .postcontent div {max-width:100%; height: auto;}
.likeshare li {float:left; color:var(--tamarillo); height: 32px; line-height: 32px; margin-right: 20px;}
.likeshare {margin-top:60px; float: left;}
.icon-like {width:29px; height:25px !important; background-image:url("images/icon-like.svg"); background-size:29px 25px; float:left; margin-left:5px;}
.icon-share {width:29px; height:29px !important; background-image:url("images/icon-share.svg"); background-size:29px 29px; float:left;  margin-left:5px;}
.lbllike{float:left}
.postcontent .moreabout {float: right}
.postcontent .moreabout a div {
	text-align: center; width: 300px; margin-top: 15px; background:var(--sea-buckthorn);
}
.lsgallery-con, .contactus {
	width: 70%; max-width:1280px; margin:auto;
}
.lsgallery li {
	float:left;
	width:calc(50% - 20px); margin:0px 0px 50px 0px;
}
.lsgallery li:nth-child(even) {
	float:right;
}
.lsgallery li:only-child {
	margin-left: 25%;
}
.lsgallery li img {
	max-width: 100%; height: auto; display:block;
}
.photo-title {
	font-weight: 600; color:var(--tamarillo); text-transform: uppercase; padding: 0px 0px 8px 0px; margin: 0px 0px 20px;
	border-bottom: 1px solid var(--tamarillo);
}
.thumbgallery {
	padding: 20px; background:#FFFFFF;
}
.col-info {
	float:left; width:calc(50% - 30px);
}
.col-map {
	float:right; width:calc(50% - 30px);
}
.col-map img {max-width:100%; height: auto;}
.col-info ul li {
	position: relative; padding-left: 34px; margin-bottom: 10px;
}
.col-info ul li:nth-child(3) img {top: 8px;}
.col-info ul li img {max-width: 20px; height: auto; position: absolute; top:6px; left:0px;}
.col-info ul li a {color: #000000} .col-info ul li a:hover {color: var(--tamarillo)}
.pagesupport .photo-title {
    padding: 0px ;
    margin: 0px 0px 10px;
    border-bottom: 0px;
}
.pagesupport .barline {margin-bottom:20px}
.lsshort {margin-bottom:15px;}
.hoverimg {position: relative;}
.hoverimg img {max-width:100%; height: auto; display:block;}
.hoverinfo {
	position: absolute; top:0px; left:0px; width:100%; height: 100%;
	background:rgba(250, 180, 50,0.8); opacity: 0; visibility: hidden;
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.hoverimg:hover .hoverinfo{
	opacity: 1; visibility: visible;
	transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
}
.seedetail, .seeregis {text-align: center;}
.moreabout.seeregis {
    margin-top: 25px;
}
.moreabout.seedetail {margin-top:0px}
.barbtn {
	width: 100%; height: 100%; 
}
.moreabout.seedetail a div {
    border: 1px solid var(--tamarillo);
    padding: 8px 0px;
    color: var(--sea-buckthorn);
    background: var(--tamarillo);
    font-size:0.8em; width:280px;
}
.moreabout.seedetail a div:before {
    background: var(--linen);
}
.moreabout.seedetail a div:hover {
	color:var(--tamarillo)
}

.moreabout.seeregis a div {
    border: 1px solid var(--linen);
    padding: 8px 0px;
    color: var(--tamarillo);
    background: var(--linen);
    font-size:0.8em; width:280px;
}
.moreabout.seeregis a div:before {
    background: var(--tamarillo);
}
.moreabout.seeregis a div:hover {
	color:var(--linen)
}
.postdetailS h1 {margin-top: 50px;}
.postdetailS .moreabout {
    float: none; margin-top: 60px;
}
.colleft {float:left; width:calc(50% - 20px)}
.colright {float:right; width:calc(50% - 20px)}
#register .btnsendcon {margin-top: 30px;}

#register ::-webkit-input-placeholder { /* Edge */
  color: var(--tamarillo);
}

#register :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--tamarillo);
}

#register ::placeholder {
  color: var(--tamarillo);
}
#register input[type=text]:not(.browser-default) {color:var(--tamarillo);}
#register #formContact textarea {
    height: 220px; margin-top:-10px;
    color:var(--tamarillo);
}
#register .btnsendcon:hover div:before {
    background: var(--linen);
}
#register .select-wrapper .caret {
    fill: var(--tamarillo);
}
.col-info .map img{
	max-width: 100%; height: auto; margin-top: 20px;
}
.teachifull {
	position:relative; width: 100%; height: 100%;
}
.teachifull ul {margin:0px;padding:0px}
.teachifull ul li {float:left; width:50%; height: 100%; text-align: center; background-size:cover; background-position: center; background-repeat: no-repeat; position: relative;}
.teachifull ul li:first-child:before {
	content:""; width:100%; height: 100%; position: absolute; top:0px; left:0px;
	background: rgba(150, 20, 18, .88);
}
.teachifull ul li:last-child:before {
	content:""; width:100%; height: 100%; position: absolute; top:0px; left:0px;
	background: rgba(250, 180, 50, .88);
}
.teachtitle {
	    font-size: var(--fonth3);
	    text-align: center;
	    text-transform: uppercase;
	    color: var(--tamarillo);
	    letter-spacing: 8px;
	    font-weight: 700; position: relative; margin-bottom: 50px;
}
.teachifull ul li:last-child .teachtitle {
	color: var(--tamarillo);
}
.teachifull ul li:first-child .teachtitle {
	color: var(--linen);
}
.teachifull ul li:first-child .moreabout a div {
    color: var(--linen); border-color:var(--linen)
}
.teachifull ul li:first-child:hover div:before {
	background:var(--sea-buckthorn);
}
.teachifull .moreabout {position: relative;}
.text-justify, .pageschool .row01 .container.text-justify {text-align: justify;}
#register.register #formContact textarea {
    height: 187px;
    margin-top: -10px;
    color: var(--tamarillo);
}
.postdetail h1 {
	font-size: var(--fontlv2); line-height: 22pt; margin-top: 10px; letter-spacing: 4px;
}
.iconloading {
	width: 80px; height: 80px; position: absolute; top: 100px; left: calc(40% - 40px);
	background: url(images/loading.svg); background-size: 80px 80px; display: none;
}
.colarticles  {position: relative;}
iframe {border: 0px;} 
.postcontent strong {
	font-weight:700;
}
.postcontent img {
	width:100%;
}
.postcontent tr {
	border-bottom:0px;
}
@media (min-width: 1024px){
	#menu-mainmenu > li {position: relative;}
	#menu-mainmenu > li a {position: relative;}
	#menu-mainmenu > li:hover:before, #menu-mainmenu > li.current-menu-item:before {
		content:""; width:100%; height: 100%; background: var(--sea-buckthorn); color:var(--tamarillo); position: absolute; top:0px; left:0px;
		transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s;
	}
	#menu-mainmenu > li:hover a, #menu-mainmenu > li a:hover, #menu-mainmenu > li.current-menu-item a {
		color:var(--tamarillo); transition: all 0.5s; -moz-transition: all 0.5s;-webkit-transition: all 0.5s; 
	}
	#menu-mainmenu > li:first-child:hover:before, #menu-mainmenu > li.current-menu-item:first-child:before {
		width: calc(100% + 10px); left:-10px; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; height: calc(100% + 2px); top: -1px;
	}
	
	#menu-mainmenu > li:last-child:hover:before, #menu-mainmenu > li.current-menu-item:last-child:before {
		width: calc(100% + 10px);
	}
}

@media (max-width: 1600px){
	:root {
	  --fontlv1: 9pt;
	  --fontlv2: 14pt;
	  --fontmax: 40pt;
	  --fonth1: 30pt;
	  --fonth3: 30pt;
	}
}

@media (max-width: 1366px){
	.logo {left:60px; top:30px;} .menuw {padding-right: 60px} .language {right:60px} .support {right: calc(90px + 135px);} .social{right: calc(40px + 135px);}
	:root {
	  --fontlv1: 9pt;
	  --fontlv2: 14pt;
	  --fontmax: 40pt;
	  --fonth1: 30pt;
	  --fonth3: 30pt;
	}
	h1{line-height: 50px;}
	.caption-bn .lbaption {line-height: 70px;}
  .moreabout{margin-top: 30px;}
  .moreabout a span{font-size: 16px; line-height: 30px;}
  .itemne{line-height: 23px;}
	#menu-mainmenu > li, .support, .language li {line-height: 32px;}
	.social{top: 18px;} 
	.btnwelcome {line-height: 40px;border-radius: 50px;}
	.moreabout a div {padding: 0px 0px; line-height: 44px;border-radius: 50px;}
	.aboutus, .news-events {padding: 65px 0px;}
	.titlesection {margin-bottom: 30px;}
	.container {
	    width: calc(100% - 180px);
	}
	.news-events .container {
	    width: calc(100% - 240px);
	}
	.footer {
	    padding: 60px 0px 40px;
	}
	.slnewsevents .slick-prev {
	    left: -50px; -o-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8)
	}
	.slnewsevents .slick-next {
	    right: -50px; -o-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8)
	}
	.itemne {padding:0px 10px;}
	.aboutus .container, .destabs, .contentpopup {line-height: 28px}
	.aboutus {
		padding: 65px 0px 100px;
	}
	.row01 {
	    padding: 65px 0px;
	}
	.coltext {
	    padding-left: 0px;
	}
	.coltext-con {margin:auto;}
	.classes-students .coltext {
	    padding-left: 0px;
	    margin-left: 50%;
	}
	.row3 .secbghead h3 {
	    line-height: 180px;
	}
	.teachintr {
	    height: calc(100vh - 180px);
	}
	.tabver li {
	    line-height: calc(50vh - 90px);
	}
	.tablemiddle {
	    height: calc(100vh - 180px);
	}
	.tabteachings li {
	    height: 126px; line-height: 45px;
	}
	.filter, .selfilter input[type=text]:not(.browser-default) {
	    height: 40px;
	    line-height: 40px;
	}
	.colcates, .colarticles {
	    height: calc(100vh - 126px - 40px - 60px);
	}
	.facilities .container {
	    max-width: 826px;
	}
	.biography {
	    margin-top: 65px;
	}
	.ulbiography li {
	    padding-bottom: 40px;
	}
	.facilities {
	    padding: 65px 0px;
	}
	.photogallery {
	    padding: 80px 0px 110px;
	}
	.photogallery h3 {
	    margin-bottom: 50px;
	}
	.row2 {
	    padding: 80px 0px;
	}
}

@media (max-width: 1152px){
	.logo {left:30px;} .menuw {padding-right: 60px} .language {right:60px} .support {right: calc(60px + 135px);} .social{right: calc(60px + 135px);}
	.itemtitle{line-height: 28px;}
	.col-logo{width: 170px;}.col-menu{width: 250px;}.colnewsletter{width: calc(100% - 420px);}
	.copyright {
		padding-left: 170px; 
	}
	.colbutton {width: 150px;}.colinput{width:calc(100% - 150px)}
	:root {
	    --fontlv1: 8pt;
	}
	

}
@media (max-width: 1024px){
	.coltext-con {
	    width: calc(100% - 80px);
	}
	:root {
	  --fontlv1: 7pt;
	  --fontlv2: 14pt;
	  --fontmax: 50pt;
	  --fonth1: 40pt;
	  --fonth3: 40pt;
	}
	.logo {left: 30px;}
	#menu-mainmenu > li {padding: 0px 8px;}
	.slick-prev, .slick-next {
	    -webkit-transform: translate(0, -50%) scale(0.8);
	    -ms-transform: translate(0, -50%) scale(0.8);
	    transform: translate(0, -50%) scale(0.8);
	}
	.itemne {
	    padding: 0px 10px;
	}
	.container {
	    width: calc(100% - 100px);
	}
	.lst2 li:nth-child(odd) {
	    padding-right: 50px;
	}
	.lst2 li:nth-child(even) {
	    padding-left: 50px;
	}
	.teachintr-col2 {
	    padding-left: 40px;
	    padding-right: 40px;
	}
	.teachintr, .tablemiddle {
	    height: 100vh;
	}
	.tabver li {
	    line-height: 50vh;
	}
	.teachtitle {
	    line-height: 60px;
	}
}
@media (max-width: 1023px){
	.logo {z-index: 1000}
	.menuw {
		display: none; position: fixed; width:100%; height: 100vh; border-top:0px; border-bottom:0px; background:var(--sea-buckthorn); 
		top:0px; left:0px; right:0px; z-index: 999; padding-top:240px; padding-right:0px;
	}
	.colnewsletter {
	    width: 100%; float: none; clear:both;
	}
	.col-logo {
	    width: 50%; margin-bottom: 30px;
	}
	.copyright {
		padding-left: 0px; 
	}
	.col-menu {
	    width: 50%; margin-bottom: 30px;
	}
	.destabs {width: calc(100% - 180px); left:90px}
	html, body {max-width:100vw; overflow-x: hidden;}
	.mytabs li {font-size: 14px; letter-spacing: 3px;}
	.support, .social {display: none;}
	.copyright .social {display: block}
	.support {position: fixed; z-index: 1001; width:100%; text-align: center; background:var(--tamarillo); left:0px; right:0px; top: 142px; color:#FFFFFF; height: 50px; line-height: 50px; font-size: 20px;}
	.social {z-index: 1001; position: fixed; top:calc(100% - 60px); text-align: center; right:auto; width:100%;} 
	.social li {float: inherit; display: inline-block}
	.language {right:40px; top:20px;}
	.menumobile {display: block;}
	.language li {font-size:14px}
	#menu-mainmenu > li {
	    float: none; padding: 10px 0px; text-align: center;
	}
	#menu-mainmenu > li a {font-size: 20px; color:var(--tamarillo)}
	.fa {
	    background-image: url(images/fb-red.svg);
	}
	.in {
	    background-image: url(images/in-red.svg);
	}
	.socialfooter .fa {
	    background-image: url(images/fb.svg);
	}
	.socialfooter .in {
	    background-image: url(images/in.svg);
	}
	.contentpopup {max-width: 100%;}
	.sub-menu {
	    display: block;
	    position: relative;
	}
	#menu-mainmenu > li, #menu-mainmenu > li:last-child {
	    text-align: right;
	    padding-right: 80px;
	}
	.sub-menu li {
	    text-align: right;
	    padding-right: 30px;
	    background: transparent;
	    position: relative;
	}
	.sub-menu li:after {
	    content: "-";
	    position: absolute;
	    top: -2px;
	    right: 10px;
	    font-size: 20px;
	    color: var(--tamarillo)
	}
	.menuw li {
	    float: none;
	}
	.menuw {
	    padding-top: 180px;
	}
	.photogallery .container {
	    width: calc(100% - 200px);
	}
	.coltext {
	    padding-left: 60px;
	    float: none;
	    width: 100%;
	}
	.colimg {
	    position: relative;
	    width: 100%;
	    height: 50vh;
	}
	.classes-students .coltext {margin-left: 60px;}
	.teachifull ul li {
	    float: none;
	    width: 100%;
	    height: 50vh;
	}
	.teachifull ul li .tablemiddle {
	    height: 50vh;
	}
	.tabteachings li {
	    height: 126px;
	    font-size: 30px;
	    line-height: 36px;
	}
	.filter {
	    padding: 0px 0px 0px 111px;
	}
	.colcates {
	    float: left;
	    width: 40%; padding: 0px 0px 0px 30px;
	}
	.colarticles {
	    width: calc(60% - 40px);
	    padding-right: 30px;
	}
	.lslastest li:nth-child(3n + 1) {
	    clear: none;
	}
	.lslastest li:nth-child(odd) {
	    margin: 0px 0px 30px 0px;
	    width: calc(50% - 15px);
	}
	.lslastest li:nth-child(even) {
	    margin: 0px 0px 30px 0px; float:right;
	    width: calc(50% - 15px);
	}
	.lslastest li:nth-child(2n + 2) {
		margin-right:0px
	}
	.lslastest li:nth-child(2n + 1) {
		clear: both;
	}
	.lsgallery li {
	    float: none;
	    width: 100%;
	}
	.col-info, .col-map {
	    float: none;
	    width:100%;
	} .col-map {margin-top: 40px;}
}
@media (max-width: 450px){
	:root {
	  --fontlv1: 8pt;
	  --fontlv2: 14pt;
	  --fontmax: 30pt;
	  --fonth1: 30pt;
	  --fonth3: 30pt;
	}
	.caption-bn .lbaption {line-height: 56px; letter-spacing: 3px;}
	h1 {
	    line-height: 46px;
	}
	.container {
	    width: calc(100% - 80px);
	}
	.mytabs li {width:100%; float:none}
	.arrowdown-tabs {display:none}
	.gallitem, .contacttab {height: calc(100vh - 200px);  }
	.destabs {font-size: 16px;}
	.destabs h3 {font-size: 20px; line-height: 30px} 
	.destabs {
	    width: calc(100% - 100px);
	    left: 50px;
	}
	.slick-next {
	    right: 10px;
	}
	.slick-prev {
	    left: 10px;
	}
	.destabs .moreabout a div {font-size: 13px; line-height: 30px; height: 30px; width: 200px}
	.slick-prev, .slick-next {
	    -webkit-transform: translate(0, -50%) scale(0.6);
	    -ms-transform: translate(0, -50%) scale(0.6);
	    transform: translate(0, -50%) scale(0.6);
	}
	.contentpopup {
	    padding: 60px 30px;
	}
	.contentpopup h3 {font-size:20px; line-height: 32px;}
	.news-events .container {
	    width: calc(100% - 100px);
	}
	#menu-mainmenu > li {
	    padding: 6px 0px;
	}
	.slnewsevents .slick-prev {
	    left: -45px;
	}
	.slnewsevents .slick-next {
	    right: -45px;
	}
	.col-logo {
	    width: 150px;
	}
	.col-menu {width: cacl(100% - 150px)}
	.aboutus, .news-events {
	    padding: 70px 0px;
	}
	.titlesection {
	    margin-bottom: 40px;
	}
	#menu-mainmenu > li, #menu-mainmenu > li:last-child {
	    text-align: right;
	    padding-right: 60px; line-height: 22px;
	}
	#menu-mainmenu > li a {
	    font-size: 14px;
	}
	.menuw {
	    padding-top: 140px;
	}
	.pageschool .row01 .container p {
	    padding-left: 0px;
	    padding-right: 0px;
	}
	.bioline {
	    left: 20px;
	}
	.bioicon {
	    left: 0px;
	}
	.bioyear {
	    right: 0px;
	    left: 54px;
	}
	.biocontent {
	    width: calc(100% - 60px); margin-top: 45px; margin-left: 60px;
	}
	.ulbiography li:nth-child(odd) .biocontent {
	    margin-left: 60px;
	}
	.photogallery .container {
	    width: calc(100% - 100px);
	}
	.slphotogallery .slick-prev{
	    left: -48px;
	}
	.slphotogallery .slick-next {
	    right: -48px;
	}
	.school-cirriculum .coltext {
	    padding-left: 30px; margin-left: 0px;
	}
	.classes-students .coltext {
	    margin-left: 0px; padding-left:30px;
	}
	.school-cirriculum .coltext-con, .classes-students .coltext-con{
	    width:100%;
	}
	.lst2 li {
	    float: none;
	    width: 100%;
	}
	.lst2 li:nth-child(odd) {
	    padding-right: 0px;
	    padding-bottom: 30px;
	}
	.lst2 li:nth-child(even) {
	    padding-left: 0px; margin-top: 30px;
	}
	.lst2 li:nth-child(odd):before {
	    content: "";
	    width: 100%;
	    height: 2px;
	    background: rgba(150,20,18,.5);
	    position: absolute;
	    top: auto;
	    right: auto;
	    bottom:0px; left:0px;
	}
	.tabteachings li {
	    float: none;
	    width: 100%;
	}
	.filter {
	    padding: 0px 0px 0px 30px;
	}
	.selfilter {
	    float: left;
	    margin-left: 0px;
	    width: calc(100% - 120px);
	}
	.colcates li {
	    font-size: 13px;
	    line-height: 20px;
	    font-weight: 700;
	}
	.colarticles {
	    font-size: 13px;
	    line-height: 20px;
	    font-weight: 700;
	}
	.colarticles {
	    width: calc(60% - 20px);
	    padding-right: 0px;
	}
	.colcates {
	    padding: 0px 0px 0px 0px;
	}
	.colcates li {border-left:0px;}
	.files_docus li {
	    width: 50%;
	}
	.barmenu {
	    padding-right: 90px; margin-bottom: 30px; height: auto;
	}
	.slguesthouse-con {
	    width: 100%;
	    margin-left: 0px;
	    margin-top: 50px; margin-bottom: 80px;
	}
	.slguesthouse .slick-next,  .slguesthouse .slick-prve{
	    display: none;
	}
	.lslastest li:nth-child(odd), .lslastest li:nth-child(even) {
	    margin: 0px 0px 30px 0px;
	    width: 100%;
	}
	.lsgallery-con .moreabout a div {
	    line-height: 26px; width: 230px;
	}
	.contactus .barline {display:none;}
	.contactus h3 {
	    line-height: 30px;
	}
	.bannersub h1 {padding-left:15px; padding-right: 15px;}
}
@media (max-width: 400px){ 
	h1 {font-size: 30px;}
	.moreabout a div {
	    line-height: 36px; font-size:16px; width: calc(100% - 60px)
	}
	.col-logo {
	    width: 100%; float:none; padding-left: calc(50% - 55px)
	}
	.col-menu {width: 100%; float:none; text-align: center;}
	.colbutton {
	    width: 120px;
	}
	.colinput {
	    width: calc(100% - 120px);
	}
	:root {
		--fonth4: 30px;
		--fonth3: 30px;
		/*
	  --fontlv1: 11pt;
	  --fontlv2: 16pt;
	  --fontlv3: 20pt;
	  --fontmax: 70pt;
	  --fonth1: 60pt;
	  --fonth3: 45pt;
	  --fonth4: 30pt;
	  --linefonth4: 38pt;*/
	}
	.pageschool h2, .coltext h3, .aboutus h1, .aboutus h3, .facilities h3, .photogallery h3,
	.teachtitle, .pageschool h2, .coltext h3, .facilities h3, .photogallery h3, .lastest h3, .contactus h3 {
		line-height: 38px;
	}
	.pageschool h2, .coltext h3, .facilities h3, .photogallery h3, .lastest h3, .contactus h3 {
		letter-spacing: 6px;
	}
}
@media (max-width: 320px){
	.caption-bn .lbaption {
	    line-height: 48px;
	    font-size: 30px; margin-bottom: 20px;
	}
	.language, .menumobile {
	    right: 30px;
	}
	.titlefooter {text-align: center; line-height: 20px;}
	.moreabout a div {width: 100%;}
	.container {
	    width: calc(100% - 60px);
	}
	.destabs {line-height: 18px}
	#menu-mainmenu > li a, #menu-mainmenu > li {
	    font-size: 16px;
	    line-height: 20px;
	}
	.support {
	    font-size: 16px;
	    line-height: 30px; height: 30px
	}
	
	.moreabout a div {width: 250px;}
	.postdetail h1 {
	    line-height: 40px;
	}
}