@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*
font-family: 'Noto Sans', sans-serif;
font-family: 'Noto Sans Mono', monospace;
*/

:root {	
	--wd-dark:#273238;
	--wd-dark-rgb:39,50,56;
	--wd-darkless:#465a65;
	--wd-light:#eceff1;
	--wd-light-rgb:236,239,241;
	--wd-gray:#cfd8dc;
	--wd-gray-rgba:207,216,220;
	--wd-blue:#0277bd;
	--wd-blue-light:#4fc2f8;
}

/*---------------------------------------------------------/
[01] COMMON STYLE
[02] FOOTER
[03] SOCIAL LIST
[04] MODAL FORM
[05] BUTTONS
[06] SCROLL UP
---------------------------------------------------------*/
/*---------------------------------------------------------/
[01] COMMON STYLE
---------------------------------------------------------*/

* {
	outline: none!important;
	transition: all 0.3s ease;
}
*, *::after, *::before {
	box-sizing: border-box;
}
html {
	position: relative;
	min-height: 100%;
}
body {
	font-family: 'Noto Sans', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wd-darkless);
	overflow-x: hidden;
	background: #fff;
	padding: 0;
	margin: 0;
}
.page-wrapper {
	overflow-x: hidden;
}
img {
	max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {	
	font-family: 'Noto Sans Mono', monospace;
	font-weight: 500;
	margin: 20px 0;
	line-height: 1.5;
}
.index-page h2 {
	text-align: center;	
}
h1 {
	margin: 30px 0;
}
ul, ol {
	padding: 0;
	margin: 0;
	list-style: none;
}
a, 
a:hover, 
a:active,
a:focus{
	color: var(--wd-darkless);
	text-decoration: none;
}
a {
	color: var(--wd-blue);
}
img {
	max-width: 100%;
}
section {
	padding: 50px 0;
}
@media (min-width: 1200px) {
	.container-narrow {
		max-width: 1024px;
		width: 100%;
		margin-right: auto;
		margin-left: auto;	  
	}
}
@media (max-width: 767px) {
	.sm-none {
		display: none;
	}
}
main {
	padding: 50px 0;
}
main.index {
	padding:0;
}
.container-narrow ol li,
article ol li {
	margin: 10px 10px 10px 30px;
	list-style-type: decimal;
}
.container-narrow ul li,
article ul li {
	margin: 10px 10px 10px 30px;
	list-style-type: circle;
}
.container-narrow h6,
article h6 {
	margin: 20px 0;
	text-align: center;
}
@media (max-width:991px) {
	aside {
		order: 1;
		padding-top: 50px;
	}
	article {
		order: 0;
	}
}
/*---------------------------------------------------------/
[02] PRE LOADER
----------------------------------------------------------*/
#ht-preloader {
	position: fixed;
	background: var(--wd-light);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;	
	width: 100%;
	height: 100%;	
	overflow: hidden !important;	
	text-align: center;	
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clear-loader {
	z-index: 999;
}
.loader {
	position: relative;
	width: 180px;
	height: 140px;
}
.loader:after,
.loader:before {
	position: absolute;
	content: "";
}
.loader:after {
	height: 40px;
	width: 40px;
	left: 70px;
	top: 50px;
	background-color: var(--wd-dark);
	animation: loader-rotate1 1.8s ease-in-out infinite;
	animation-direction: alternate;
	transform-origin: center center;
}
.loader:before {
	height: 80px;
	width: 80px;
	top: 30px;
	left: 50px;
	background-color: var(--wd-blue-light);
	animation: loader-rotate2 1.8s ease-in-out infinite;
	animation-direction: alternate;
	transform-origin: center center;
}

/*---------------------------------------------------------/
[03] SCROLL UP
----------------------------------------------------------*/

.scroll-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 600;
	opacity: 0;
	visibility: hidden;
}
.scroll-top a,
.scroll-top a:visited {
	display: block;
	height: 50px;
	width: 50px;
	line-height: 1.5em;
	text-align: center;
	font-size: 2em;
	color: var(--wd-light);
	background: var(--wd-blue-light);
}
.scroll-top a:hover,
.scroll-top a:focus {
	color: var(--wd-blue-light);
	background: var(--wd-gray);
}
.scroll-top.scroll-visible {
	opacity: 1;
	visibility: visible;
}

/*---------------------------------------------------------/
[04] BUTTONS
----------------------------------------------------------*/
.btn {
	border-radius: 0;
	z-index: 9;
	font-weight: 600;
	text-transform: capitalize;
	font-size: 1rem;
	padding: 0.8rem 1.5rem;
	position: relative;
}
.btn-sm {
	padding: .45rem .5rem;
	font-size: 14px;
}
.btn.focus,
.btn:focus,
.btn:not(:disabled):not(.disabled):active:focus {
	box-shadow: none;
}
.btn span {
	display: inline-block;
	position: relative;
}
.btn span i {
	margin-left: 15px;
}
.btn+.btn {
	margin-left: 15px;
}

.btn:before {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: 100%;
	top: 0;
	background: var(--wd-blue);
	z-index: -1;
	-webkit-transition: all 500ms ease-out;
			transition: all 500ms ease-out;
}
.btn:hover:before {
	width: 100%;
}
.btn-white {
	background-color: #fff;
	border-color: #fff;
	color: var(--wd-dark);
}
.btn-white:hover {
	background-color: var(--wd-blue);
	border-color: var(--wd-blue);
	color: #fff;
}
.btn-outline-light:hover {
	color: #fff;
	background-color: #fff;
	border-color: var(--wd-blue);
}
/*---------------------------------------------------------/
[05] FOOTER
----------------------------------------------------------*/

footer {
	position: relative;
	padding: 50px 0;
	background: var(--wd-darkless);
	overflow: hidden;
	z-index: 9;
	color: var(--wd-light);
}
.footer-logo img {
	height: 100px;
}
.footer-list li {
	margin: 0 20px 20px 0;
	text-transform: capitalize;
	display: inline-block;
}
.footer-list li a {
	font-weight: 600;
	color: var(--wd-light);
	position: relative;
	padding-bottom: 10px;
	overflow: hidden;
}
.footer-list li a:hover {
	color: var(--wd-blue-light);
}
.footer-list li a::before,
.footer-list li a::after {
	content: "";
	width: 100%;
	height: 1px;
	bottom: 0;
	position: absolute;
	left: 0;
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
	background: var(--wd-light);
}
.footer-list li a::after {
	width: 10%;
	background: var(--wd-blue-light);
}
.footer-list li a:hover::after {
	width: 100%;
}
.social-list li {
	display: inline-block;
	margin: 20px 20px 20px 0;
}
.social-list li:last-child {
	margin-right: 0;
}
.social-list li a {
	color: #fff;
	font-size: 1.2em;
	display: inline-block;
}
.social-list li a:hover {
	transform: scale(1.1);
	color: var(--wd-blue-light);
}
.secondary-footer {
	padding-top: 30px;
	margin-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.2);
	text-align: center;
}
.secondary-footer a {
	color: var(--wd-light);
}
.secondary-footer a:hover {
	color: var(--wd-blue-light);
}

/*---------------------------------------------------------/
[06] HEADER
----------------------------------------------------------*/
header {
	position: absolute;
	width: 100%;
	z-index: 1200;
}
.navbar-brand {
	margin-right: 0;
	background: var(--wd-gray);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	padding: 20px;
}
.navbar-brand img {
	height: 80px;
}
#header-wrap {
	position: relative;
}
#header-wrap.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999 !important;
	background: var(--wd-dark);
	animation: smoothScroll 1s forwards;
	box-shadow: 0 0 40px #fff;
}
@media (max-width:991px) {
	#header-wrap.fixed-header {
		position: static;
	}	
}
#header-wrap.fixed-header .navbar-brand {
	padding: 10px;
}
#header-wrap.fixed-header .navbar-brand img {
	height: 60px;
}
.navbar {
	padding: 0;
}
.navbar-nav .nav-item {
	margin: 0 15px;
}
.navbar-nav .nav-link {
	color: #ffffff;
	font-weight: 500;
	padding: 0 !important;
	border-radius: 0;
	position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item .nav-link.active {
	color: var(--wd-blue-light);
}                                                                                                        
.navbar-nav .nav-item.dropdown .dropdown-menu {
	padding: 20px;
	top: 120%;
	border: none;
	margin-top: 0;
}
.nav-item.dropdown .dropdown-menu li {
	margin-bottom: 5px;
}
.nav-item.dropdown .dropdown-menu li:last-child {
	margin-bottom: 0;
}
.nav-item.dropdown .dropdown-menu a {
	background: none;
	padding: 5px 12px;
	width: 100%;
	display: inline-block;
	white-space: nowrap;
	position: relative;
	color: #fff;
}
.nav-item.dropdown .dropdown-menu a:hover {
	color: var(--wd-blue-light);
}
.nav-item.dropdown .dropdown-menu a::before {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: 100%;
	top: 0;
	background: rgba(255,255,255,0.03);
	z-index: 1;
	transition: all 0.5s ease-out;
}
.nav-item.dropdown .dropdown-menu a:hover::before {
	width: 100%;
}
@media (min-width:992px) {
	.navbar-nav .dropdown-menu {
		min-width: 12em !important;
		max-width: 20em !important;
	}
	.navbar-nav .dropdown>.dropdown-menu {
		opacity: 0;
		position: absolute;
		display: block;
		pointer-events: none;
		background: #12141d;
	}
	.navbar-nav .dropdown:hover>.dropdown-menu {
		display: block;
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		top: 100%;
		transition: all 0.5s ease-in-out 0s;
	}
	.nav-link.dropdown-toggle::after {
		font-size: 0.7rem;
		margin-left: .355em;
		border: none;
		content: '\f078';
		vertical-align: inherit;
		width: 10px;
		font-family: 'Line Awesome Free';
		font-weight: 900;
	}
	.nav-link.dropdown-toggle:hover::after {
		transform: rotate(-180deg);
	}
}
@media (max-width:991px){
	.navbar-brand {
		margin-left: -15px;
	}
	.navbar-toggler {
		background: none;
		height: 40px;
		width: 40px;
		padding: 0;
		border-radius: 0;
		margin: 0;
	}
	.navbar-toggler:focus {
		text-decoration: none;
		outline: 0;
		box-shadow: 0 0 20px rgba(255,255,255,0.5);
	}
	.navbar-nav .nav-item {
		margin: 0;
	}
	.navbar-nav .nav-link {
		padding: 10px !important;
		color: var(--wd-light);
	}
	.navbar-nav .nav-link:hover,
	.navbar-nav .nav-item .nav-link.active,
	.navbar-nav .nav-item.show .nav-link {
		background: rgba(255,255,255,0.03) !important;
	}
	.navbar-collapse {
		background: var(--wd-darkless);
		max-height: 400px;
		left: 0;
		padding: 10px;
		position: absolute;
		z-index: 99;
		top: 80px;
		width: 100%;
		overflow: auto;
		border: medium none;
		box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15);
	}
	.navbar-toggler span {
		width: 80%;
		height: 2px;
		margin: 5px auto;
		display: block;
		background: #ffffff;
	}
	.navbar-nav .dropdown-toggle::after {
		background: none !important;
		position: absolute;
		border: none;
		top: 50%;
		right: 0;
		margin: -0.5em 0 0 0;
		padding: 0;
		width: 2em;
		height: 1.4em;
		font-size: 1.25rem;
		line-height: 1.2em;
		text-align: center;
	}
	.navbar-nav .dropdown-toggle::after {
		content: '+';
	}
	.navbar-nav .dropdown.show>.dropdown-toggle::after {
		content: '-';
	}
	.navbar-nav .dropdown-submenu .dropdown-toggle::after {
		right: 0;
		width: auto;
		height: auto;
		margin-right: 0;
	}
	.navbar-nav .dropdown>.dropdown-menu {
		background: var(--wd-dark);
	}	
}
@media (max-width:576px) {
	.navbar-brand {
		padding: 10px;
		position: relative;
		z-index: 9;
	}
	.navbar-toggler {
		position: relative;
		z-index: 9;
	}
}

/*---------------------------------------------------------/
[07] TEACHER ICON
----------------------------------------------------------*/
header .teachers-icon {
	margin-right: 30px;
}
@media (max-width:992px) {	
	header .teachers-icon {
		position: absolute;
		right: 40px;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media (max-width:575px) {
	header .teachers-icon {
		right: 20px;
	}
}
.teacher-block {
	position: relative;
	z-index: 200;
}
.teacher-data-open .teacher-list {
	display: block;
}	
.teacher-list {
	background: var(--wd-light);
	display: none;
	position: absolute;
	right: 0;
	top: 50px;
	transition-duration: 750ms;
	width: 320px;
	z-index: 120;
}
.teacher-list li {
	display: flex;
	align-items: center;
	border-bottom: 1px dashed var(--wd-darkless);
	padding: 7px;
}
.teacher-list li:last-child {
	border-bottom: none;
}	
.teacher-list li:hover {
	background: rgba(0,0,0,0.05);
}	
.teacher-list li .teacher-img {
	flex-shrink: 0;
	margin-right: 10px;
}
.teacher-list li .teacher-img img{
	width: 60px;
	border-radius: 100%;
}
.teacher-list li .teacher-info h6{
	font-size: 0.9em;
	margin: 0;
}	
.teacher-list li .teacher-info p{
	font-size: 1em;
	font-weight: 600;
	margin: 0;
}
@media (max-width:575px) {
	.teacher-list {
		top: 80px;
	}	
}
@media (max-width:400px) {
	.teacher-list {
		right: -50px;
	}	
}

/*---------------------------------------------------------/
[08] ASIDE MENU
----------------------------------------------------------*/
.aside-menu {
	position: absolute;
	z-index: 2000;
	top: 35px;
	right: 15px;
	border: none;
	width: 3em;
	height: 3em;
	outline: none;
	transition: opacity 0.2s ease-out;
	cursor: pointer;
}
@media (max-width:992px) {
	.aside-menu {
		display: none;
	}	
}
.menu-open .aside-menu {
	position: fixed;
}
.menu-toggle,
.menu-toggle::after,
.menu-toggle::before {
	transition: top .2s .2s, left .1s, transform .2s, background-color .4s .2s;
}
.menu-toggle,
.menu-toggle::after,
.menu-toggle::before {
	pointer-events: none;
	display: block;
	content: "";
	width: 100%;
	background-color: #fff;
	height: 2px;
	position: absolute;
	-webkit-transform: rotate(0);
			transform: rotate(0);
}
.menu-toggle::after,
.menu-toggle::before {
	width: 2em;
}
.menu-toggle::before {
	right: 2px;
	top: 10px;
}
.menu-toggle::after {
	right: 2px;
	top: -10px;
}
.menu-toggle:active {
	transform: translateY(2px);
}
.menu-toggle:hover {
	opacity: 1;
}
.menu-toggle {
	top: 50%;
	margin-top: -.125em;
}
.menu-open .menu-toggle {
	background-color: initial;
}
.menu-open .menu-toggle::after,
.menu-open .menu-toggle::before {
	left: .5em;
	top: 0;
}
.menu-open .menu-toggle::before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.menu-open .menu-toggle::after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.aside-block {
	z-index: 1500;
	position: fixed;
	top: -100%;
	right: 0;
	width: 400px;
	height: 100%;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	overflow: hidden;
}
.aside-block:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: var(--wd-gray);
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 100%;
	transform: scale(0.04), translateY(9999px);
	overflow: hidden;
}
.menu-open .aside-block {
	top: 0;
}
.menu-open .aside-block:before {
	animation: menu-animation 0.9s ease-out forwards;
}
.aside-info {
	padding-right: 30px;
	opacity: 0;
	display: block;
	position: absolute;
	left: 0;
	backface-visibility: hidden;
	perspective: 1000;
	color: var(--wd-dark);
}
.menu-open .aside-info {
	opacity: 1;
	left: 30px;
	transition: left 0.8s ease-out, opacity 0.8s ease-out;
	transition-delay: 1s;
	color: var(--wd-dark);
}
.aside-info	h4 {
	margin-top: 40px;
}	
.aside-list	{
	margin: 20px 0;
}
.aside-list	li{
	display: flex;
	align-items: center;
	font-family: 'Noto Sans Mono', monospace;
	font-size: 1.2em;
	margin: 10px 0;
}
.aside-list	li i{
	font-size: 1.2em;
	flex-shrink: 0;
	margin-right: 10px;
}	
.aside-social li {
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: inline-table;
	border: 1px solid var(--wd-darkless);
	position: relative;
	text-align: center;
}
.aside-social li a {
	position: relative;
	z-index: 2;
	color:  var(--wd-darkless);
	font-size: 1.5em;
}
.aside-social li:hover a {
	color: var(--wd-light);
}	
.aside-social li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: 100%;
	top: 0;
	background:var(--wd-darkless);
	z-index: 1;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.aside-social li:hover::before {
	width: 100%;
}

/*---------------------------------------------------------/
[09] HERO
----------------------------------------------------------*/

.fullscreen-banner {
	position: relative;
	min-height: 100vh;
	background: #273238 url(../images/pattern/03.png) center center no-repeat;
	background-size: cover;
	color: #fff;
	padding: 0;	
}	
.hero-block {
	position: absolute;
	top: 50%;
	width: 100%;
	z-index: 9;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	padding-top: 0;
}	
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.hero-block {
		padding-left: 80px;
	}
}
.bnr-title {
	font-weight: 900;
	color: transparent;
	font-size: 6rem;
	text-align: center;
	line-height: 7rem;
	background: url(../images/pattern/hero.jpg);
	background-size: 800px auto;
	-webkit-background-clip: text;
	position: relative;
	animation: background-intro 20s infinite linear;
}
@keyframes background-intro {
  from { background-position: 0 0; }
  to { background-position: -800px 0; }
}
.bnr-title.large {
	font-size: 15rem;
	line-height: 15rem;
}
@media (max-width:575px){
	.fullscreen-banner {
		min-height: 70vh;
	}		
	.bnr-title {
		font-size: 5rem;
		line-height: 5rem;
	}
	.bnr-title.large {
		font-size: 12rem;
		line-height: 10rem;
	}
}	
@media (max-width:450px){
	.fullscreen-banner {
		min-height: 70vh;
	}		
	.bnr-title {
		font-size: 3rem;
		line-height: 3rem;
	}
	.bnr-title.large {
		font-size: 7rem;
		line-height: 7rem;
	}
}
.hero-left {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--wd-gray);
	width: 80px;
	z-index: 9;
	overflow: hidden;	
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100% !important;
}	
@media (max-width:767px) {
	.hero-left {
		display: none !important;
	}	
}
.hero-social li {
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: inline-table;
	border: 1px solid var(--wd-darkless);
	border-top: none;
	position: relative;
	text-align: center;
}
.hero-social li:first-child {
	border-top: 1px solid var(--wd-darkless);
}	
.hero-social li a {
	position: relative;
	z-index: 2;
	color: var(--wd-darkless);
	font-size: 1.5em;
}
.hero-social li:hover a{
	color: var(--wd-light);
}
.hero-social li::before {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: 100%;
	top: 0;
	background:var(--wd-darkless);
	z-index: 1;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.hero-social li:hover::before {
	width: 100%;
}	
.hero-left .scroll-down-arrow {
	width: 40px;
	height: 40px;
	left: 50%;
	bottom: 80px;
	display: block;
	position: absolute;
	background: url(../images/scroll-down-arrow.svg) no-repeat;
	background-size: cover;	
	margin-left: -20px;
	z-index: 2;	
	-webkit-animation: bounce 2s infinite;
			animation: bounce 2s infinite;	
}
.hero-left .scroll-down-arrow:after {
	content: "";
	width: 1px;
	height: 200px;
	top: 40px;
	left: 19px;	
	background: var(--wd-darkless);
	display: block;
	position: absolute;
}

/*---------------------------------------------------------/
[10] PROCESS
----------------------------------------------------------*/
.process-list {
	text-align: center;
}
.process-list li{
	display: inline-block;
	width: 200px;
	margin: 10px 20px;
}	
.process-block .single-item {
  position: relative;
  padding-top: 20px;
}
.process-block .single-item .icon-box {
  position: relative;
  display: inline-block;
  font-size: 4em;
  width: 200px;
  height: 200px;
  line-height: 170px;
  text-align: center;
  background: #fff;
  border-radius: 100%;
  margin-bottom: 30px;
  z-index: 1;
  box-shadow: 0px 0 40px rgba(0,0,0,0.1);
  transition: all 500ms ease;
}
.process-block .single-item:hover .icon-box {
  color: #fff;
	box-shadow: none;
}
.process-block .single-item .icon-box:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
  border-radius: 50%;
  z-index: -1;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.process-block .single-item:hover .icon-box:before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.process-block .single-item .icon-box .count-box {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 0.5em;
  font-weight: 500;
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: all 500ms ease;
  background-color: var(--wd-gray);
}	
.process-block .single-item:hover .icon-box .count-box {
	background: #fff;
	color: var(--wd-gray);
    box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.process-block .single-item h5 {
  margin: 0px;
}
.process-block .single-item .icon-box {
  color: var(--wd-blue);
}
.process-block .single-item .icon-box:before {
  background-color: var(--wd-light);
}

.process-style .single-item:hover .icon-box .count-box {
  color: var(--wd-blue);
}

/*---------------------------------------------------------/
[11] LABS BLOCK
----------------------------------------------------------*/

.feature-list {
	text-align: center;
	margin: 30px 0;
}
.feature-list li{
	display: inline-block;
	width: 300px;
	margin: 10px;
}
.featured-item {
	padding: 30px;
	position: relative;
	z-index: 9;
	background: var(--wd-light);
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	border: 1px solid #fff;
	padding: 50px 50px 40px;
	overflow: hidden;
	margin-bottom: 20px;
}
.featured-item .featured-icon {
	display: inline-block;
	margin-bottom: 20px;
	position: relative;
	font-size: 60px;
	line-height: 60px;
	color: var(--wd-blue);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.featured-item .featured-icon i {
	display: inline-block;
	background: linear-gradient(135deg, #0083ff 32.5%, #8046f4 45%, #fb3e7d 60%, #00f2aa 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.featured-item:hover,
.featured-item.active {
	background: var(--wd-blue-light);
	color: #fff;
}
.featured-item:before {
	content: '';
	width: 273px;
	height: 273px;
	background: var(--wd-dark);
	border-radius: 50%;
	position: absolute;
	bottom: -148px;
	right: -83px;
	opacity: 0.1;
	transform: translate(50%, 50%);
	z-index: -1
}
.featured-item:hover:before,
.featured-item.active:before {
	transform: translate(0%, 0%);
	transition: all 0.5s linear;
}
.featured-item:after {
	content: '';
	width: 493px;
	height: 493px;
	background: var(--wd-dark);
	border-radius: 50%;
	position: absolute;
	bottom: -250px;
	right: -180px;
	z-index: -1;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.featured-item:hover:after,
.featured-item.active:after {
	opacity: 0.1;
	transform: translate(0%, 0%);
	transition: all 0.9s linear;
}
.featured-item .featured-icon {
	margin-bottom: 40px;
	position: relative;
	display: inline-block;
	font-size: 50px;
	background: #fff;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	border-radius: 50%;
	transition: all 500ms ease;
}
.featured-item:hover .featured-icon,
.featured-item.active .featured-icon {
	color: #fff;
	-webkit-text-fill-color: currentColor;
}
.featured-item .border-anim {
	z-index: -1;
	position: absolute;
	width: 120px;
	height: 120px;
	left: -10px;
	top: -10px;
	border: 2px solid var(--wd-blue);
	border-radius: 50%;
	clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%, 0 0);
	transition: all 500ms ease;
	-webkit-animation: round-circle 2s infinite linear;
			animation: round-circle 2s infinite linear;
	-webkit-animation-play-state: paused;
			animation-play-state: paused;
}
.featured-item .border-anim:before {
	position: absolute;
	content: '';
	background: #fff;
	width: 8px;
	height: 8px;
	left: 15px;
	bottom: 9px;
	border-radius: 50%;
}
.featured-item:hover .border-anim,
.featured-item.active .border-anim {
	border-color: var(--wd-light);
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0);
	-webkit-animation-play-state: running;
			animation-play-state: running;
}
.featured-item h5 {
	font-size: 1.2em;
	height: 60px;
	overflow: hidden;		
}
.featured-item:hover h5,
.featured-item.active h5 {
	color: #fff;
}
#particles-js {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5
}

/*---------------------------------------------------------/
[12] LECTURE BLOCK
----------------------------------------------------------*/
.lecture {
	position: relative;
	background: var(--wd-darkless);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 0 30px rgba(0,0,0,0.2);
	border: 1px solid #fff;
}
.lecture a {
	color: var(--wd-blue-light);
}
.lecture a:hover {
	color: var(--wd-light);
	text-decoration: underline;
}
.owl-carousel .lecture {
	margin: 50px;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	width: 50px;
	height: 50px;
	line-height: 50px;
	background: var(--wd-gray);
	border: none;
	color: #fff;
}
.owl-carousel .owl-stage-outer {
  padding-bottom: 0;
}
.lecture .lecture-content {
	padding: 50px;
	width: 50%;
}
.lecture .lecture-img {
	width: 50%;
}
.lecture-content h5 {
	margin-bottom: 30px;
	color: #fff;
}
.lecture-content ol li{
	color: #fff;
	list-style: decimal;
	margin: 10px 0;
	list-style-position: inside;
}
@media (max-width:991px){
	.lecture .lecture-content {
		width: 100%;
		min-height: 450px;
		padding: 30px;
	}
	.lecture .lecture-img {
		display: none;
	}	
}

/*---------------------------------------------------------/
[13] PRESENTATION
----------------------------------------------------------*/
.prmove {
	animation: prMove 1s linear infinite;
}
@keyframes prMove {
	0% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
	25% {
		-webkit-transform: translate(10px, 10px);
				transform: translate(10px, 10px);
	}
	50% {
		-webkit-transform: translate(5px, 5px);
				transform: translate(5px, 5px);
	}
	75% {
		-webkit-transform: translate(10px, -5px);
				transform: translate(10px, -5px);
	}
	to {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
}
.presentation-block .presentation-media {
	position: relative;
	overflow: unset;
	margin-right: 40px;
}
@media only screen and (max-width: 991px) {
	.presentation-block .presentation-media {
		display: none;
	}
}
.presentation-block .presentation-media img {
	width: auto;
}
.presentation-block .presentation-media .img1 {
	padding: 0;
	display: inline-block;
	width: 75%;
}
.presentation-block .presentation-media .img1 img {
	animation: prMove 6s linear infinite;
}
.presentation-block .presentation-media .img2 {
	padding: 0;
	float: right;
	position: absolute;
	right: 0;
	top: 15%;
	display: inline-block;
	width: 75%;
}
.presentation-block .presentation-media .img2 img {
	animation: prMove 8s linear infinite;
}
.presentation-block .presentation-media .img3 {
	padding: 0;
	z-index: 1;
	position: relative;
	margin-top: -15%;
	margin-left: -20%;
	display: inline-block;
	width: 90%;
}
.presentation-block .presentation-media .img3 img {
	animation: prMove 10s linear infinite;
}
.presentation-block .year-exp {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.presentation-block .year-exp .year {
	font-size: 200px;
	border-right: 1px solid var(--wd-gray);
	padding-right: 40px;
	margin-right: 40px;
	margin-bottom: 0;
	line-height: 0.75;
}
@media only screen and (max-width: 1280px) {
	.presentation-block .year-exp .year {
		font-size: 150px;
	}
}
@media only screen and (max-width: 575px) {
	.presentation-block .year-exp .year {
		font-size: 100px;
		padding-right: 15px;
		margin-right: 15px;
	}
}
.presentation-block .year-exp .text {
	font-size: 45px;
	margin: 0;
	line-height: 1.2;
}
@media only screen and (max-width: 1280px) {
	.presentation-block .year-exp .text {
		font-size: 2em;
		line-height: 1.4;
	}
}
@media only screen and (max-width: 575px) {
	.presentation-block .year-exp .text {
		font-size: 1.5em;
		line-height: 1.25;
	}
}
.presentation-block .icon-bx-wraper {
	border-bottom: 1px solid var(--wd-gray);
	padding-bottom: 30px;
}
.presentation-block .icon-bx-wraper:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/*---------------------------------------------------------/
[14] BALLS
----------------------------------------------------------*/
.balls-section{
	position:relative;
	padding:30px 0px;
}
.balls-section .balls-tabs .balls-box{
	transform:rotateY(90deg);
}
.balls-section .balls-tabs .tabs-content .tab.active-tab .balls-box{
	transform:rotateY(0deg);
}
.balls-tabs{
	position:relative;
	z-index:2;
}
.balls-tabs .tabs-content .tab{
	position:relative;
	display:none;
}
.balls-tabs .tabs-content .tab.active-tab{
	display:block;	
}
.balls-tabs .buttons-outer{
	text-align:center;
	margin-bottom: 20px;
}
.balls-tabs .tab-buttons{
	position:relative;
	overflow:hidden;
	text-align:center;
	border-radius:5px;
	margin-top:30px;
	display:inline-block;
	background-color:#ffffff;
	box-shadow:0px 0px 15px rgba(0,0,0,0.10);
}
.balls-tabs .tab-buttons .tab-btn{
	position:relative;
	color:var(--wd-dark);
	font-size:1.1em;
	font-weight:400;
	float:left;
	cursor:pointer;
	padding:16px 30px;
	border-radius:5px;
	background-color:#fff;
	transition:all 300ms ease;
}
.balls-tabs .tab-buttons .tab-btn:hover,
.balls-tabs .tab-buttons .tab-btn.active-btn{
	color:#fff;
	background: var(--wd-blue-light);
}
@media(max-width:575px){
	.balls-tabs .tab-buttons .tab-btn{
		width: 100%;
		float:none;
		margin-bottom: 5px;
	}	
}
.balls-box{
	position:relative;
	margin-bottom:30px;
	transition:all 900ms ease;
}
.balls-box .inner {
    border: 1px solid #fff;
	box-shadow: 0 0 40px rgba(0,0,0,0.2);
	border-radius: 4px;
	background: #fff;
    padding: 20px;
    margin-bottom: 30px;
}
.balls-box .inner-list li{
	list-style:none;
	margin:7px;
}
.balls-box .inner-list li{
	list-style:none;
	margin:7px;
}
.balls-box .inner-list hr {
	width:60%;
	border-top: 1px solid rgba(0, 0, 0, 0.1);	
}
.balls-box .inner-box {
	padding:10px;
}
.balls-box .inner-box span{
	display:inline-block;
	text-align:center;
	font-style:normal;
	font-size:1.6em;
	line-height:1.8em;
	background:var(--wd-light);
	width:50px;
	height:50px;
	margin-right:10px;
	border-radius:100%;
}
.balls-box .inner-box span.test{
	background:var(--wd-blue-light);
}
.balls-box .inner-box h4{
	margin:15px;
}
.balls-box .inner-bullet {
	text-align:center;
}
.balls-box .inner-bullet li {
	list-style:none;
	display:inline-block;
	vertical-align:middle;
	margin:10px;
}
.balls-box .inner-bullet strong{
	display:inline-block;
	background:var(--wd-gray);
	width:30px;
	height:30px;
	margin-right:5px;
	border-radius:100%;
}
.balls-box .inner-bullet strong.test{
	background:var(--wd-blue-light);
}
.balls-box .inner-box span.pres{
	background:var(--wd-darkless);
	color: #fff;
}
.balls-box .inner-bullet strong.pres{
	background:var(--wd-darkless);
}
/*---------------------------------------------------------/
[15] FAQs
----------------------------------------------------------*/
.faq-block {
	position: relative;
	background: var(--wd-gray);
}
.faq-image {
	position: relative;
	font-size: 7em;
	line-height: 1.2;
	font-weight: bold;
	color: transparent;	
	text-align: left;
	margin-bottom: 20px;
	background: url("../images/pattern/faq.jpg") repeat;
	background-size: 900px 600px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;	
	animation: background-faq 10s infinite linear;	
}
@keyframes background-faq {
	from { 
		background-position: 0 0; 
	}
	to { 
		background-position: 900px 0; 
	}
}
@media (max-width:991px){
	.faq-image {
		display: none;
	}
}
.accordion {
	margin-top: 40px;
	margin-bottom: -10px;
}
@media screen and (max-width: 991px) {
	.accordion {
		margin-top: 0px;
	}
}
.accordion-button {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 19px 40px;
	font-size: 18px;
	line-height: 1.5;
	text-align: left;
	border: 0;
	border-radius: 0;
	overflow-anchor: none;
	color: var(--wd-dark);
	background-color: var(--wd-light);
	transition: color 0.15s ease-in-out, 
				background-color 0.15s ease-in-out, 
				border-color 0.15s ease-in-out, 
				box-shadow 0.15s ease-in-out, 
				border-radius 0.15s ease, 
				-webkit-box-shadow 0.15s ease-in-out;
}
@media screen and (max-width: 767px) {
	.accordion-button {
		padding: 19px;
	}
}
@media screen and (max-width: 767px) {
	.accordion-button {
		font-size: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.accordion-button {
		transition: none;
	}
}
.accordion-button.collapsed {
	border: 0;
}
.accordion-button:not(.collapsed) {
	color: var(--wd-dark);
	background-color: var(--wd-light);
	box-shadow: none;
}
.accordion-button:not(.collapsed) span {
	color: var(--wd-blue);
}
.accordion-button:not(.collapsed)::after {
	font-family: 'Line Awesome Free';
	font-weight: 900;	
	content: "\f106";
	background-image: none;
	transform: rotate(0deg);
	color: var(--wd-blue);
}
.accordion-button::after {
	background-image: none;
	font-family: 'Line Awesome Free';
	font-weight: 900; 	
	content: "\f107";
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-text-fill-color: currentColor;
	background-color: #fff;
	width: 30px;
	height: 30px;
	z-index: 1;
	border-radius: 100%;
	transition: all 0.3s ease;
}
.accordion-button:hover {
	z-index: 2;
}
.accordion-button:focus {
	z-index: 3;
	border-color:var(--wd-blue);
	outline: 0;
	box-shadow: none;
}
.accordion-header {
	margin-bottom: 0;
}
.accordion-item {
	background: var(--wd-light);
	margin-bottom: 10px;
	border-radius: 0;
	border: none;
}
.accordion-body {
	padding: 20px 40px;
	padding-top: 0px;
}
.accordion-body dl {
	margin: 10px 0;
}
.accordion-body dt {
	margin-bottom: 10px;
	margin-top: 20px;
	font-family: 'Noto Sans Mono', monospace;
}
.accordion-body dd {
	margin-left: 30px;
}
.summaru-list {
	margin:0;
}
.summaru-list li {
	list-style:none;
	display: flex;
	align-items: center;
	margin:0;
	border-bottom: 1px dashed rgba(0,0,0,0.25);
	padding: 8px;
	font-size: 0.9em;
}
.summaru-list li a{
	color: #474747;
}	
.summaru-list li a:hover{
	color: var(--wd-blue);
	padding-left: 5px;
}	
.summaru-list li span{
	display: inline-flex;
	align-items: center;
    justify-content: center;	
	background: #fff;
	width:30px;
	height:30px;
	margin-right:10px;
	border-radius:4px;
	font-size: 1.3em;
	color: var(--wd-darkless);
}
.summaru-list li.title {
	font-size: 1.1em;
	font-weight: 600;
}	
.summaru-list li.title span{
	background:transparent;
	width:100px;
	height:100px;
	border-radius: 0;
	margin-right:10px;
}
.summaru-list li.title:hover  span{
	transform: none;
}
.summaru-list li.title span img{
	width:100px;
	height:100px;
	border-radius: 0;
}
/*---------------------------------------------------------/
[16] MEMBERS
----------------------------------------------------------*/
.member-list {
	text-align: center;
}	
.member-item {
	background-color: #fff;
	padding: 20px;
	text-align: center;
	margin: 10px;
	width: 300px;
	box-shadow: 0 0 40px rgba(0,0,0,0.1);
	display: inline-block;
}
.member-item h5,
.member-item h6 {
	margin: 5px 0;
}	
.member-item .member-photo {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.member-item .member-photo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: var(--wd-gray);
	opacity: 0;
	visibility: hidden;
}
.member-item .member-photo .social-icons {
	position: absolute;
	left: 0;
	top: 20px;
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}
.member-item .member-photo .social-icons li:not(:last-child) {
	margin-bottom: 10px;
}
.member-item .member-photo .social-icons li a {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
	color: var(--wd-dark);
	background-color: var(--wd-gray);
}
.member-item:hover .member-photo::before {
	opacity: 0.3;
	visibility: visible;
}
.member-item:hover .member-photo .social-icons {
	left: 10px;
	opacity: 1;
	visibility: visible;
}
/* -----------------------------------
[17] PAGES
------------------------------------*/
.page-title {
	display: block;
	position: relative;
	padding: 100px 0;
	background: var(--wd-dark);
	text-align: center;
}
.page-title h1 {
	font-size: 50px;
	color: #fff;
	line-height: 60px;
}
.page-title p {
	margin-bottom: 0;
	color: #ffffff;
}
.left-list {
    position: relative;
    display: block;
}
.left-list li {
    position: relative;
    display: block;
	margin-bottom: 10px
}
.left-list li a {
    position: relative;
    font-size: 1em;
    color: var(--wd-darkless);
    display: block;
    background-color: var(--wd-light);
    padding: 10px 20px;
}
.left-list.gray li a {
    background-color: var(--wd-gray);
}
.left-list.blue-light li a {
    background-color: var(--wd-blue-light);
	color: #fff;
}
.left-list.blue li a {
    background-color: var(--wd-blue);
	color: #fff;
}
.left-list li:hover a {
    background-color: var(--wd-darkless);
    color: #fff;
}

/* Journals*/

.result-title .nav-link span:after{
	display: inline-block;
	margin-left: 10px;	
	font-family: 'Line Awesome Free';
	font-weight: 900;
	content: "\f107";
}	
@media (min-width:1200px){
	.result-block{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}	
	.result-title {
		width: 20%;
		display: block;
	}
	.result-title .nav-link{
		width: 100%;
		text-align: right;
	}
	.result-title .nav-link span:after{
		display: inline-block;
		content: "\f105";
		margin-left: 10px;
		font-family: 'Line Awesome Free';
		font-weight: 900;
	}	
	.result-table {
		width: 75%;
		min-height: 100vh;
		border: 1px solid #ccc;
		overflow: auto;
		scrollbar-width: thin;
	}
}			
.result-table::-webkit-scrollbar{
	width: 7px;
	background: #eee;
}
.result-table::-webkit-scrollbar-thumb{
	width: 7px;
	background: #ccc;
}
		
.result-table iframe{
	width: 100%!important;
	min-height: 100vh;
}
.result-table h6 {
	font-size: 0.85em;
	text-align: right;
	margin:10px 20px;
	font-weight: 400;
}
@media (min-width: 1000px) {
	.subtitle {
		width: 900px;
		font-weight: 600;
		color: var(--wd-darkless);
		margin: 20px auto;
		color: #fff;
	}		
}
.image-list {
	padding: 0px;
	margin: 20px auto;
	list-style: none;
	text-align: center;
}
.image-list li {
	width:250px;
	display: inline-block;
	margin: 10px;
	padding: 0px;
	vertical-align:top;
	list-style-type: none;
}
.image-list figure{
	position: relative;
    overflow: hidden;
    margin: 0;
	padding:10px;
	transition: all 1s ease;
}
.image-list figure:hover{
	box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 
				0 3px 20px 0px rgba(0, 0, 0, 0.12), 
				0 8px 10px -5px rgba(0, 0, 0, 0.2);	
}
.image-list figure img{
	max-width:230px;
	max-height:230px;
}
.image-list figcaption {
	padding: 10px;
	font-size: 1.2em;
} 
.box-code {
	background:rgba(228,234,242,0.7);
	padding:10px 20px;
	margin:20px 0;
	line-height: 1;
}
ul.column3,
ul.column2,
ul.column1 {
	margin:10px 0 20px;
}
ul.column3{
 -webkit-columns: 3; 
	-moz-columns: 3; 
		 columns: 3;
		 
-webkit-column-gap: 2em;
   -moz-column-gap: 2em;
		column-gap: 2em;	 
}
ul.column2{
 -webkit-columns: 2; 
	-moz-columns: 2; 
		 columns: 2;
		 
-webkit-column-gap: 2em;
   -moz-column-gap: 2em;
		column-gap: 2em;	 
}
ul.column3,
ul.column2 {
	margin:10px 0 20px;
}
@media (max-width:991px) {
	ul.column3,
	ul.column2 {
	 -webkit-columns: 1; 
		-moz-columns: 1; 
			 columns: 1;
	}
}

.masonry {
	-webkit-column-count: 2;
	-moz-column-count:2;
	column-count: 2;
	-webkit-column-gap: 1.5em;
	-moz-column-gap: 1.5em;
	column-gap: 1.5em;
	margin: 0;
	padding: 0;
	font-size: .85em;
}
.masonry .item {
	display: inline-block;
	background: #fff;
	padding: 10px 10px 0;
	margin: 0 0 1.5em;
	width: 100%;
	transition:1s ease all;
	box-sizing: border-box;
	border: 1px dotted rgba(0,0,0,0.4);
	border-radius: 10px;
}
.masonry .item p{
	font-size: 1.1em;
	line-height: 1.5;
}

.masonry .item .box-code {
	font-size: 0.75;
	line-height: 1.2;
}
@media only screen and (max-width: 767px) {
	.masonry {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
}

@media only screen and (min-width: 992px) {
	.ratio-box  {
		width: 60%;
		margin: auto;
	}
}