/** Generated by FG **/
@font-face {
	font-family: 'Conv_Trirong-Regular';
	src: url('../fonts/Trirong-Regular.eot');
	src: local('☺'), url('../fonts/Trirong-Regular.woff') format('woff'), url('../fonts/Trirong-Regular.ttf') format('truetype'), url('../fonts/Trirong-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	/*font-family: 'Roboto', sans-serif;
	font-family: 'Prompt', sans-serif;
	font-family: 'Conv_Trirong-Regular';*/
	font-family: Roboto,sans-serif;
	font-size: 0.85rem;
}
a {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: #2A2A2A;
}
a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
}
hr {
	margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 0;
    border-top: 1px dashed #d6d6d6;
}
hr.light {
  border-color: white;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  

  /*letter-spacing: 1px;*/
}
p {
	margin-top: 0;
    margin-bottom: 0.3rem;
}
p.stb { text-indent: 25px; }
.bg-primary {
  background: #fdcc52;
  background: -webkit-linear-gradient(#fdcc52, #fdc539);
  background: linear-gradient(#fdcc52, #fdc539);
}
.text-primary {
  color: #fdcc52;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-outline {
  color: white;
  border-color: white;
  border: 1px solid;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
  color: white;
  background-color: #fdcc52;
  border-color: #fdcc52;
}
.btn {

}
.btn-xl {
    padding: 10px 37px;
    font-size: 20px;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #ff5722;
}
::selection {
  color: white;
  text-shadow: none;
  background: #ff5722;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}


.grid {
	position: relative;
	clear: both;
	margin: 0 auto;

	list-style: none;
	/*text-align: center;*/
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;

	height: auto;
	background: #3085a3;
	/*text-align: center;*/
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;

	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	text-align: right;
    padding-right: 20px;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);
}

figure.effect-lily figcaption {
	text-align: left;
}

figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}

figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
	opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Roxy *****/
/*---------------*/

figure.effect-roxy {
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50px,0,0);
	transform: translate3d(-50px,0,0);
}

figure.effect-roxy figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-20px,0,0);
	transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
	padding: 3em;
	text-align: left;
}

figure.effect-roxy h2 {
	padding: 30% 0 10px 0;
}

figure.effect-roxy p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #9e5406;
}

figure.effect-bubba img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

figure.effect-romeo img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,0,300px);
	transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 1px;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-romeo h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
	padding: 0.25em 2em;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
	background: #18a367;
}

figure.effect-layla img {
	height: 390px;
}

figure.effect-layla figcaption {
	padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

figure.effect-layla figcaption::before {
	top: 50px;
	right: 30px;
	bottom: 50px;
	left: 30px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
	top: 30px;
	right: 50px;
	bottom: 30px;
	left: 50px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-layla p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
	background: #4a3753;
}

figure.effect-honey img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-honey:hover img {
	opacity: 0.5;
}

figure.effect-honey figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: #fff;
	content: '';
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-honey h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1em 1.5em;
	width: 100%;
	text-align: left;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-honey h2 i {
	font-style: normal;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
	background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
	padding: 3em;
	background-color: rgba(58,52,42,0.7);
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
}

figure.effect-oscar h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

figure.effect-oscar:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-oscar:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}

/*---------------*/
/***** Marley *****/
/*---------------*/

figure.effect-marley figcaption {
	text-align: right;
}

figure.effect-marley h2,
figure.effect-marley p {
	position: absolute;
	right: 30px;
	left: 30px;
	padding: 10px 0;
}


figure.effect-marley p {
	bottom: 30px;
	line-height: 1.5;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-marley h2 {
	top: 30px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-marley:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-marley h2::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: #fff;
	content: '';
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-marley h2::after,
figure.effect-marley p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
	background-color: #17819c;
}

figure.effect-ruby img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-ruby h2 {
	margin-top: 20%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
	background: #2e5d5a;
}

figure.effect-milo img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1em 1.2em;
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	width: 50%;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Dexter *****/
/*---------------*/

figure.effect-dexter {
	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
}

figure.effect-dexter img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-dexter:hover img {
	opacity: 0.4;
}

figure.effect-dexter figcaption::after {
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	height: -webkit-calc(50% - 30px);
	height: calc(50% - 30px);
	border: 7px solid #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-100%,0);
	transform: translate3d(0,-100%,0);
}

figure.effect-dexter:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-dexter figcaption {
	padding: 3em;
	text-align: left;
}

figure.effect-dexter p {
	position: absolute;
	right: 60px;
	bottom: 60px;
	left: 60px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

figure.effect-dexter:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
	/*background: #000000;*/
}

figure.effect-sarah img {
	max-width: none;
	width: -webkit-calc(100% + 20px)!important;
	width: calc(100% + 20px) !important;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-sarah:hover img {
	/*opacity: 0.4;*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
	text-align: left;
}

figure.effect-sarah h2 {
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
}

figure.effect-sarah h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #fff;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
	float: left;
}

figure.effect-zoe p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
	color: #252d31;
}

figure.effect-zoe p.description {
	position: absolute;
	bottom: 8em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 8px 10px;
	font-family: 'feathericons';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
	content: '\e000';
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

figure.effect-zoe h2 {
	display: inline-block;
}

figure.effect-zoe:hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-chico img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.12);
	transform: scale(1.12);
}

figure.effect-chico:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico figcaption {
	padding: 3em;
}

figure.effect-chico figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h2 {
	padding: 20% 0 20px 0;
}

figure.effect-chico p {
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height 
	margin-bottom: 124px;
	/*background-color: #eeeeee;*/
}
.footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    height: 110px;
    line-height: 22px;
    background-color: #eeeeee;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 10px 0;
}
.bg-top {
	background-color: #e7e7e8;
	border-bottom: solid 1px;
  	border-color: rgb(217, 216, 216);
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

@media (min-width: 992px) {
	body > .container-top {
		padding-top: 116px;
}
}
@media (max-width: 991px){
	body > .container-top {
		padding-top: 208px;
	}
	.py-md-26{
		padding: 26px 0;
	}
}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-brand {
	padding: 0;
}
.logo-img {
	padding-right: 5px;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #7c7c7c;
    margin-top: 7px;
    margin-right: 2px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
ul .dropdown-menu {
	background-color: #eeeeee;
}
#demos .owl-carousel .item-card  {



}
ul li .dropdown-item:focus, .dropdown-item:hover {
  color: #1d1e1f;
  text-decoration: none;
  background-color: #f7f7f9;
}

ul li .dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #0275d8;
}

ul li .dropdown-item.disabled, .dropdown-item:disabled {
  color: #636c72;
  cursor: not-allowed;
  background-color: transparent;
}
.navbar-light .navbar-brand, .navbar-light .navbar-toggler {
    font-size: 12px;
    color: #FFFFFF;
    padding: 8px 5px;
}
.right-nav {
	right: -35px;
    position: absolute;
    top: 7px;
}
.navbar-light .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.1);
}
.bar-topic {
	display: block;
    height: 35px;
}
.facebook {
	background-color: #3a589b;
	color: #FFFFFF;
	padding: 3px 11px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
}
.facebook:hover {
	background-color: #FFFFFF;
	color: #3a589b;
}
.twitter {
	padding: 3px 8px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
	background-color: #55acee;
	color: #FFFFFF;
}
.twitter:hover {
	background-color: #FFFFFF;
	color: #55acee;
}
.en {
	padding: 6px 8px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
    background-color: #00b6b5;
    color: #FFFFFF;
    position: relative;
    top: -2px;
}

.en:hover {
	background-color: #FFFFFF;
	color: #00b6b5;
}
.th {
    padding: 6px 8px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
    background-color: #8bc43f;
    color: #FFFFFF;
    position: relative;
    top: -2px;
}
.th:hover {
	background-color: #FFFFFF;
	color: #8bc43f;
}
.search {
	padding: 3px 8px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
	background-color: #fb842b;
	color: #FFFFFF;
}
.search:hover {
	background-color: #FFFFFF;
	color: #fb842b;
}
.home {
	padding: 3px 8px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
	background-color: #b0b0b0;
	color: #FFFFFF;
}
.home:hover {
	background-color: #FFFFFF;
	color: #b0b0b0;
}
.blue {
	background-color: #00aeef;
}
.card-news {
	border-width: 2px;
	border-color: rgb(225, 225, 225);
	border-style: solid;
	border-radius: 8px;
	background-color: rgb(255, 255, 255);	
	padding: 10px;
}

.orange-gradient {
	background-image: -moz-linear-gradient( 66deg, rgb(255,109,0) 0%, rgb(255,129,35) 47%, rgb(255,149,69) 100%);
	background-image: -webkit-linear-gradient( 66deg, rgb(255,109,0) 0%, rgb(255,129,35) 47%, rgb(255,149,69) 100%);
	background-image: -ms-linear-gradient( 66deg, rgb(255,109,0) 0%, rgb(255,129,35) 47%, rgb(255,149,69) 100%);
}
.blue-gradient {
	background-image: -moz-linear-gradient( 66deg, rgb(153,215,244) 0%, rgb(206,239,255) 100%);
	background-image: -webkit-linear-gradient( 66deg, rgb(153,215,244) 0%, rgb(206,239,255) 100%);
	background-image: -ms-linear-gradient( 66deg, rgb(153,215,244) 0%, rgb(206,239,255) 100%);
}
.mint-gradient {
	background-image: -moz-linear-gradient( 66deg, rgb(0,182,181) 0%, rgb(0,229,228) 100%);
	background-image: -webkit-linear-gradient( 66deg, rgb(0,182,181) 0%, rgb(0,229,228) 100%);
	background-image: -ms-linear-gradient( 66deg, rgb(0,182,181) 0%, rgb(0,229,228) 100%);
}
.dark-blue-gradient {
	background-image: -moz-linear-gradient( 66deg, rgb(15,81,141) 0%, rgb(26,109,183) 100%);
	background-image: -webkit-linear-gradient( 66deg, rgb(15,81,141) 0%, rgb(26,109,183) 100%);
	background-image: -ms-linear-gradient( 66deg, rgb(15,81,141) 0%, rgb(26,109,183) 100%);
}
.topic-user {
	border-width: 1px;
	border-color: rgb(58, 168, 255);
	border-style: solid;
	border-radius: 8px;
	background-color: rgb(92, 183, 255);
	padding-top: 60px;
	padding-right: 30px;
	height: 144px;
	background-image: url(../img/bg_user.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 215px;
}
.topic-article {
  border-width: 1px;
  border-color: rgb(226, 226, 226);
  border-style: solid;
  border-radius: 8px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(255,255,255) 100%);
}
a .topic-article {
	color: #165b99;
}
.list-group-item:last-child {
	margin-bottom: 5px;
}
.topic-business {
	border-width: 1px;
	border-color: rgb(223, 223, 223);
	border-style: solid;
	border-radius: 8px;
	background-color: rgb(253, 253, 253);
	padding-top: 60px;
	padding-left: 30px;
	height: 144px;
	background-image: url(../img/bg_business.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 215px;
}
.topic-news-alert {
	border-width: 1px;
	border-color: rgb(223, 223, 223);
	border-style: solid;
	border-radius: 8px;
	background-color: #ff9545;
	padding-top: 60px;
	padding-right: 30px;
	height: 144px;
	
}
.topic-news-follow {
	border-width: 1px;
	border-color: rgb(223, 223, 223);
	border-style: solid;
	border-radius: 8px;
	background-color: #165b99;
	padding-top: 46px;
	padding-right: 30px;
	height: 144px;
	
}
.topic-pic {
	top: 10px;
    position: absolute;
    left: 30px;
}
.topic-pic-right {
	top: 10px;
    position: absolute;
    right: 30px;
}
small {
	color: #989797;
}
.header-news {
	padding: 0.75rem 0;
    margin-bottom: 0;
	color: black;
}

.text-gray {
	color: #989797;
}
.text-sky {
	color: #1d9fda;
}
.block-all {
	min-height: 220px;
}
.text-blue {
	color: #165b99;
}
.text-white {
	color: white;
}
.bg-sky {
	background-color:  #abe1fa;
}
.btn-gray {

  border-width: 1px;
  border-color: #ccc;
  border-style: solid;
  border-radius: 5px;
  background-color: #ccc;
  color: #585353;
}
.btn-gray:hover {

  border-width: 1px;
  border-color: #ccc;
  border-style: solid;
  border-radius: 8px;
 background-color: transparent;
  color: #585353;
}
.btn-mint {

  border-width: 1px;
  border-color: #00b6b5;
  border-style: solid;
  border-radius: 8px;
  background-color: #00b6b5;
  color: #FFFFFF;
}
.btn-mint:hover {

  border-width: 1px;
  border-color: #00b6b5;
  border-style: solid;
  border-radius: 8px;
  background-color: #FFFFFF;
  color: #00b6b5;
}
.news-bar {
	padding-left: 15px;
	line-height: 15px;
}
.breadcrumb {
    padding: 0.3rem 1rem;
    margin-bottom: 0.8rem;
    background-color: #f2f2f2;
    border-radius: 0;
    font-size: 14px;
    margin-top: 40px;
    margin-left: -5px;
    margin-bottom: 30px;
}
.topic-sub {
	padding: 15px 20px 0px 20px;
    border-bottom: 1px dashed #d6d6d6;
    border-top: 1px dashed #d6d6d6;
    margin-bottom: 6px;
}
.single_blog_post_title {
    padding-bottom: 12px;
    line-height: 60px;
    font-size: 50px;
    color: #333;
}
.single_blog_post_date {
    margin: -2px 0 -4px;
    line-height: 13px;
    font-size: 15px;
    color: #999;
}

/*-----------------------------------------------------------------------------------*/
/*	FEATURED WORKS
/*-----------------------------------------------------------------------------------*/
#projects {padding-top:47px;}

.work_item {
	position:relative;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.owl-item:hover .work_item {
	transform:scale(0.95);
	-o-transform:scale(0.95);
	-ms-transform:scale(0.95);
	-webkit-transform:scale(0.95);
}

.work_item .work_description {
	position:absolute;
	z-index:20;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-align:center;
	opacity:0;
	background-color:rgba(0,0,0,0.8);
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.work_item:hover .work_description {opacity:1;}
.work_item .work_description .work_descr_cont {
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	opacity:0;
	transform:translateY(-100%);
	-o-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	-webkit-transform:translateY(-100%);
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.work_item:hover .work_description .work_descr_cont {
	opacity:1;
	transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
.work_item .work_description a {
	display:block;
	margin:0 0 6px;
	font-weight:300;
	line-height:24px;
	font-size:24px;
	color:#fff;
}
.work_item .work_description span {
	color:#666;
}

.work_item a.zoom {
	position:absolute;
	z-index:30;
	left:50%;
	bottom:0;
	width:60px;
	height:36px;
	margin-left:-30px;
	opacity:0;
	background-image:url(../img/zoom.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	-webkit-background-size:100% auto;
	transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; 
	-webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.work_item:hover a.zoom {
	bottom:56px;
	opacity:1;
}
.work_item a.zoom:hover {background-image:url(../img/zoom_h.png);}
/* __________ WORKS DETAILS __________ */
#project_prev,
#project_close,
#project_next {
	position:relative;
	z-index:1;
	display: inline-block;
	width:50px;
	height:50px;
	margin:0 -2px 0 -3px;
	border:2px solid #ccc;
	font-family: FontAwesome;
	transition: all 0.2s ease-in-out; 
	-webkit-transition: all 0.2s ease-in-out;
}
#project_prev:hover, #project_close:hover, #project_next:hover {z-index:2; border-color:#333;}
#project_prev i,
#project_close i,
#project_next i {
	line-height:46px;
	font-size:26px;
	color:#ccc;
	transition: all 0.2s ease-in-out; 
	-webkit-transition: all 0.2s ease-in-out;
}
#project_close i {margin:0 -2px;}
#project_prev:hover i, #project_close:hover i, #project_next:hover i {color:#333;}

#project_prev.first, #project_next.last {cursor:default;}
#project_prev.first:hover, #project_next.last:hover {border-color:#ccc;}
#project_prev.first:hover i, #project_next.last:hover i {color:#ccc;}


ul.project_info li {
	margin-bottom:3px;
	font-style:italic;
	color:#505050;
}
ul.project_info li span {color:#979797;}
ul.project_info li span {color:#979797;}

.project_shared {padding:15px 0;}
.project_shared a {
	display:inline-block;
	width:36px;
	height:36px;
	margin-right:5px;
	border:1px solid #ccc;
	text-align:center;
	line-height:34px;
	font-size:20px;
	color:#ccc;
}
.project_shared a:hover {border-color:#333; color:#333;}
.list-group-item-custum:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: 0;
}
.list-group-item-custum:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0;
}
.list-group-item-custum {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.5rem 0.2rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
	border: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 0;
    border-left: 0;
    border-style: dashed;
}
.text-gray2 {
    color: #4f4f4f;
}
.bg-gray {
    background-color: #efeeeb;
}
.pad4 {
    padding: 4px;
}
.font-weight-bold {
    font-weight: bold;
}
.rounded {
    border-radius: 0.25rem;
}
.pad4 {
    padding: 4px;
}
.bg-gray-v2 {
    background-color: #d7d7d7;
}
.text-glay4 {
    color: #383838;
}

.text-white {
    color: #FFFFFF;
}
.bg-white {
	background-color: #FFFFFF;
}
.bg-logo {
	/*background-image:url(../img/bg_top_02.png);*/
	background-repeat: no-repeat;
    background-size: cover;
	background: rgba(240,240,240,1);
background: rgba(227,227,227,1);
background: -moz-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(227,227,227,1)), color-stop(100%, rgba(99,99,102,1)));
background: -webkit-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
background: -o-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
background: -ms-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
background: linear-gradient(to right, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#636366', GradientType=1 );
}
.bg-logo2 {
	background-image:url(../img/bg_top_03.png);
	background-repeat: repeat;
}
.gra-blue {
background-color: #023586;
}
.navbar {
	padding: 0;
}
.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.active {
	color: #FFFFFF;
}
.navbar-light .navbar-nav .nav-link {
	color: #FFFFFF;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #fff3b6;
}
.text-red {
		font-weight:bold;
		color: #ea4c3a;
		font-size:12pt;
}
.topic-sub2 {
    padding: 13px 13px 2px 13px;
    border-bottom: 1px solid #eceeef;
    border-top: 1px solid #eceeef;
    margin-bottom: 5px;
	background-color: #f8f8f8;
}
 .carousel img {
    width: 100%;
    height: 100%;
}
/*------------------------*/

ul {list-style-type: none;}


.month {
    padding: 7px 22px;
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*background: #a51c30;*/
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
	font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
}

.month .next {
    float: right;

}

.weekdays {
    margin: 0;
    padding: 10px 0;
	/*background: rgba(255, 255, 255, 0.18);*/
}

.weekdays li {
    display: inline-block;
    width: 11.5%;
    color: #FFFFFF;
    text-align: center;
	
}


.days {
    padding:0;
    /*background: rgba(255, 255, 255, 0.18);*/
    margin: 0;
	/*border: 1px #e6e6e6 solid;*/
	    font-size: 0.9rem;
}

.days li {
    list-style-type: none;
    /*display: inline-block;*/
	display: table-cell;
    width: 11.5%;
    text-align: center;
    color: rgba(255,255,255,1.00);
	border: 1px #8799ab solid;
	vertical-align: top;
}

.days li.active {
    background: #1c2d56;
    color: rgba(255,255,255,1.00);
	
}
.days li .active:hover {
	padding: 6px;
    background: #ffffff;
    color: #821525 !important;
    border-radius: 50%;
	border: 2px #dfd4b8 solid;
	font-weight:bold;
}
.days li .event {
	padding: 6px;
    background: #821525;
    color: #ffffff !important;
    border-radius: 50%;
	border: 2px #821525 solid;
}
.days li .event:hover {
	padding: 8px;
    background: #ffffff;
    color: #821525 !important;
    border-radius: 50%;
	border: 2px #821525 solid;
	font-weight:bold;
}
.cal-h {
	/*height: 6em;*/
	width: 150px;
}
.list-event {
	border-bottom: 1px #8799ab solid;
    height: 90px;
	padding: 5px 5px;
}
.list-event:first-child {
	border-bottom: 1px #8799ab solid;
    padding: 5px 5px;
}
.list-event:last-child {
	border-bottom: 1px #8799ab solid;
	padding: 5px 5px;
}
.e-vent-all-day {
	position: relative;
    background-color: rgba(255, 255, 255, 0.15);
    padding-left: 5px;
    height: 1620px;
    margin: -5px;
}
.e-vent {
	position: relative;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 5px;
	top: -1436px;
    height: 180px;
    margin: -5px;
}
@media (max-width: 767px) {
.weekdays li {
    width: 48%;
	
}
	.days li {
    width: 48%;
}
}


.modal-popup{
	z-index:99999;
	display:none;
	padding-top:80px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4)
	}
.bg-event {
	background-image: url(../img/bg-event.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg-event2 {
	background-image: url(../img/bg-event.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg-traval {
	background-image: url(../img/bg-traval.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.shadow {
	text-shadow: 0px 4px 4.65px rgba(0, 0, 0, 0.41);
}
.nav-traval.active {
  background-image: -moz-linear-gradient( 90deg, rgb(28,45,86) 0%, rgb(36,69,150) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(28,45,86) 0%, rgb(36,69,150) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(28,45,86) 0%, rgb(36,69,150) 100%);
  box-shadow: 0px 5px 8.9px 1.1px rgba(0, 0, 0, 0.46);
}
.nav-traval {
	border-radius: 8px;
	height: 65px;
	font-size: 1.1em;
	border-width: 3px;
	border-color: rgb(28, 46, 87);
	border-style: solid;
	border-radius: 8px;
	background-image: -moz-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
	
}
.icons-traval1 {
    width: 85px;
    position: relative;
    top: -25px;
    float: left;
	padding-right: 5px;
}
.icons-traval2 {
    width: 55px;
    position: relative;
    top: -43px;
    float: left;
}
.icons-traval3 {
    width: 102px;
    position: relative;
    top: -37px;
    float: left;
}
.icons-traval4 {
width: 55px;
    position: relative;
    top: -36px;
    float: left;
}
.nav-item {
    padding: 3px;
}
.bg-route {
	background-image: url(../img/bg_route.png);
	background-position: center;
	background-repeat: repeat-x;
	background-position: bottom;
}
.bg-route-sm {
	background-image: url(../img/bg_sub_route.png);
	background-repeat: repeat-x;
	background-position: bottom;

}
.bg-cream {
	background-color: #fff7de;
}
.bg-violet {
  border-radius: 4px;
  background-color: rgb(99, 4, 96);
}
.text-violet {
  color: rgb(99, 4, 96);
}
.bg-sky {
	background-color: #6ac9df;
}
.btn-violet {
  color: #fff;
  background-color: rgb(99, 4, 96);
  border-color: rgb(99, 4, 96);
}

.btn-violet:hover {
  color: rgb(99, 4, 96);
  background-color: #FFFFFF;
}

.btn-violet:focus, .btn-violet.focus {
  -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
          box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}
.btn-blue {
  color: #fff;
  background-color: rgb(28, 46, 89);
  border-color: rgb(28, 46, 89);
}

.text-green {
	color: #9ee65f;
}
@media (max-width: 991px) { 
.nav-traval {
    border-radius: 8px;
    height: 100px;
    font-size: 1.1em;
    border-width: 3px;
    border-color: rgb(28, 46, 87);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
}
	.icons-traval1 {
	width: 82px;
    position: relative; 
    top: 0; 
    float: none; 
    padding-right: 0;
	}
	.icons-traval2 {
	width: 40px;
    position: relative; 
    top: 0; 
    float: none; 
    padding-right: 0;
	}
	.icons-traval3 {
	width: 73px;
    position: relative; 
    top: 0; 
    float: none; 
    padding-right: 0;
	}
	.icons-traval4 {
	width: 39px;
    position: relative; 
    top: 0; 
    float: none; 
    padding-right: 0;
	}
	
}
@media (max-width: 575px) { 
.nav-traval {
    border-radius: 8px;
    height: auto;
    min-height: 83px;
    font-size: 0.9em;
    border-width: 3px;
    border-color: rgb(28, 46, 87);
    border-style: solid;
    border-radius: 8px;
    background-image: -moz-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(242,242,242) 0%, rgb(238,238,238) 100%);
}
	.icons-traval1 {
	    width: 55px;
		position: relative;
		top: 15px;
		float: none;
		padding-right: 0;
	}
	.icons-traval2 {
	    width: 34px;
		position: relative;
		top: 11px;
		float: none;
		padding-right: 0;
	}
	.icons-traval3 {
		width: 65px;
		position: relative;
		top: 12px;
		float: none;
		padding-right: 0;
	}
	.icons-traval4 {
		width: 39px;
		position: relative;
		top: 4px;
		float: none;
		padding-right: 0;
	}
	
}
.carousel-indicators li {
	max-width: 15px;
    height: 15px;
    border-radius: 50%;
}
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.64);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index: 9999999;
}
#return-to-top i {
    color: rgb(28, 45, 86);
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #FFFFFF;
    top: 5px;
}
.bg-th-blue {
	background-color: #93acbc !important;
}
.bg-th-violet {
	background-color: #b37ab5 !important;
}
.bg-th-green {
	background-color: #6a7840 !important;
}
.bg-th-yellow {
	background-color: #f2be1a !important;
}
.bg-th-red {
	background-color: #a5515b !important;
}
.text-th-red {
	color: #a5515b!important;
}
.bg-th-violet2 {
	background-color: #e19a84!important;
}
.text-th-violet2 {
	color: #e19a84!important;
}
.bg-th-white2 {
	background-color: #efebe1;
}
.bg-th-orange {
	background-color: #d77d2a;
}
.bg-th-green2 {
	background-color: #50ab77;
}
.bg-th-green3 {
	background-color: #63c29d;
}
.bg-th-brown {
	background-color: #a19078;
}
.bg-th-blue2 {
	background-color: #597896;
}
.text-gray-provine {
	color: #292b2c;
}
.icons-temp {
    background-color: rgb(99, 4, 96);
    color: #FFFFFF;
    padding: 6px 7px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 0.9rem;
    margin-right: 5px;
}
/*
.icons-temp:hover {
	background-color: #FFFFFF;
    color: rgb(99, 4, 96);
}*/
.kid {
	position: absolute;
    top: -28px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover,
.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:hover {
	color: #ffbf67;
}
.bg-opacity {
	background-color: rgb(9, 60, 106);
    border-bottom: 1px #8799ab solid;
    padding-left: 5px;
    height: 26px;
}
.scroll_bar  {
    margin-left: 20px;
    margin-right: 20px;
    float: left;
    height: 350px;
    /*width: 65px;
    background: #F5F5F5;*/
    overflow-y: scroll;
    margin-bottom: 25px;
	border-bottom: 1px #8799ab solid;
    border-top: 1px #8799ab solid;
}
.force-overflow
{
	min-height: 450px;
}
/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: rgba(245, 245, 245, 0);
	border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
	width: 10px;
	background-color: rgba(245, 245, 245, 0);
}

#style-7::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #1a3853;
	/*
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
	*/
}
/*
 *  STYLE 7
 */

.fc-scroller::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: rgba(245, 245, 245, 0);
	border-radius: 10px;
}

.fc-scroller::-webkit-scrollbar
{
	width: 10px;
	background-color: rgba(245, 245, 245, 0);
}

.fc-scroller::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #1a3853;
	/*
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
	*/
}
.bullet-event {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.prev-cal {
  border-radius: 5px 0px 0px 5px;
  background-image: -moz-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
	padding: 11px;
    color: white;
}
.next-cal {
  border-radius: 0px 5px 5px 0px;
  background-image: -moz-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(16,30,65) 0%, rgb(28,45,86) 100%);
	padding: 11px;
    color: white;
	    position: relative;
    left: -5px;
}
.center-tab {
	top: 7px;
	position: relative;
}
/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
	background: #34495e;
}

figure.effect-terry figcaption {
	padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
	position: absolute;
	width: 200%;
	height: 200%;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.88);
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
	right: 0;
	bottom: 0;
	border-width: 0 70px 60px 0;
	-webkit-transform: translate3d(70px,60px,0);
	transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
	top: 0;
	left: 0;
	border-width: 15px 0 0 15px;
	-webkit-transform: translate3d(-15px,-15px,0);
	transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
	opacity: 0.85;
}
/*
figure.effect-terry h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0.4em 10px;
	width: 50%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	text-shadow: 1px 2px 16px #000000;
	-webkit-text-shadow: 1px 2px 16px #000000;
	-moz-text-shadow: 1px 2px 16px #000000;
	    font-size: 21px;
}*/
figure.effect-terry h2 {
	position: absolute;
    bottom: 0;
    left: -19px;
    margin-left: 15px;
    width: 50%;
    padding-bottom: 3px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	text-shadow: 1px 2px 16px #000000;
	-webkit-text-shadow: 1px 2px 16px #000000;
	-moz-text-shadow: 1px 2px 16px #000000;
	    font-size: 21px;
	text-align: left;
}
@media screen and (max-width: 920px) {
	figure.effect-terry h2 {
		padding: 0.75em 10px;
		font-size: 120%;
	}
}

figure.effect-terry p {
	float: right;
	clear: both;
	text-align: left;
	text-transform: none;
	font-size: 111%;
}

figure.effect-terry p a {
	display: block;
	margin-bottom: 1em;
	color: #fff;
	opacity: 0;
	-webkit-transform: translate3d(90px,0,0);
	transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
	color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

}

figure.effect-terry:hover img {
	opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	left: 3px;
}

figure.effect-terry:hover p a {
	opacity: 1;
}

figure.effect-terry:hover p a:first-child {
	-webkit-transition-delay: 0.025s;
	transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
	-webkit-transition-delay: 0.075s;
	transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
.height-table {

}
.fc-event {
	word-wrap: break-word;
}
.nav-link {

    padding: 0.4em 0.4em;
}
.fa-du {
    width: 1.28571429em;
    text-align: center;
    left: 14px;
    position: relative;
}
.top {
	top: 2px;
	position: relative;
}
.name-swu {
	line-height: 9px;
    padding-left: 8px;
	top: 6px;
	position: relative;
}
 a .name-swu {
	color: #404040;
}
a:hover .name-swu {
	color: #404040;
}
.logo-size {
	

}
.bg-red3 {
	background-color: #da2128;
}
.bg-red2 {
	background-color: #fd3f2e;
}
.bg-red {
    background-color:#fec5c0 ;
}
.bg-yallow {
	background-color: #fff3b6;
}
.bg-yallow2 {
	background-color: #fed60d;
}
.text-yallow {
	color: #000000;
}
.bg-green {
	background-color: #6addd3;
}
.bg-green2 {
	background-color: #28b6aa;
}
.text-green {
	color: #005734;
}
.number {
    padding: 0px 8px;
    /*border: 2px solid rgba(255, 255, 255, 0.75);*/
	background-color: rgba(255, 255, 255, 0.75);
}
.bg-news {
	background-image: url(../img/7W9A2067.jpg);
	background-position: center;
	background-size: cover;
}
.bg-sky2 {
	background-color: #00bbd3;
}

.btn-sky {
    color: #fff;
    background-color: #6ac9df;
    border-color: #6ac9df;
    border-radius: 30px;
    padding: 9px 41px;
}
.btn-sky:hover {
    color: #5c5c5c;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
}

.btn-yallow {
	color: #000;
    background-color: #fed60d;
    border-color: #fed60d;
    border-radius: 30px;
    padding: 9px 41px;
}
.btn-yallow:hover {
    color: #5c5c5c;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
}.btn-red {
	color: #fff;
    background-color: #fd3f2e;
    border-color: #fd3f2e;
    border-radius: 30px;
    padding: 9px 41px;
}
.btn-red:hover {
    color: #5c5c5c;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
}
.btn-green {
    color: #fff;
    background-color: #005734;
    border-color: #005734;
    border-radius: 30px;
    padding: 9px 41px;
}
.btn-green:hover {
    color: #5c5c5c;
    background-color: #e8e8e8;
    border-color: #e8e8e8;
}.text-geen {
	color: #e8e8e8;
}
.white {
	background-color: rgba(255, 255, 255, 0.51);
}

.thead-default th {
    color: #414141;
    background-color: #ffffff;
}
.table th, .table td {
    border-top: 1px solid rgba(130, 130, 130, 0.2);
}
.text-red2 {
	color: #c12930;
}
.blue2 {
	background-color: #eef6f8;
}
.th-swu {
    float: left;
    background-color: white;
    padding: 1px;
    border-radius: 0.25rem;
    margin-right: 10px;
    font-size: 13px;
}
.en-swu {
    float: right;
    background-color: white;
    padding: 1px;
    border-radius: 0.25rem;
    font-size: 13px;
}

.bg-red4-1 {
	background-color: #eb5736;
}
.bg-red4-2 {
	background-color: #cf3918;
}
.line-blue {
	margin-top: 0;
    margin-bottom: 8px;
    border: 0;
    border-top: 2px solid #636366;
}
.line-white {
	margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 2px solid #ffffff;
}
.text-red4 {
    color: #890101;
}
.topic-content {
    border-radius: 3px 3px 0px 0px;
    background-color: #636366;
    color: #fff;
    padding: 5px 12px;
    font-size: 1rem;
    display: -webkit-inline-box;
}
.list-content {
	list-style-type: disc;
    color: #023586;
}
.text-black {
	color: #000;
}
.lable-login {
	clear: both;
    top: 8px;
    position: relative;
    padding: 3px 12px 3px 13px;
    font-size: 13px;
    border-radius: 5px;
    background-color: rgb(62, 62, 64);
    color: #fff;
	
}
.card-header:hover {
	background-color: #dc4a9b;
	color: #fff;
}
.ul-course {
    margin: 0;
    list-style-type: none;
    background-color: #e1e1e1;
    margin-bottom: 3px;
    display: grid;
    padding: 0;
}
.list-course {
    padding: 0.5rem 1rem;
	border-bottom: 1px #d4d4d4 solid;
}
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #d0d5db;
    border: 0;
	border-radius:0;
}
.card-header:first-child {
	border-radius:0;
}
.bg-gray {
	background-color: #e1e1e1;
}
.btn-gray3 {
    color: #fff;
    background-color: #232323;
    border-color: #232323;
}

.btn-gray3 a:hover {
    color: #232323;
    background-color: #fff;
    border-color: #fff;
}
.fa-caret-right {
  transition: all .4s ease;
}

.active .fa-caret-right {
  transform: rotate(90deg);
}
.panel-heading {
	padding: 8px 13px;
    margin-bottom: 3px;
    background-color: #d0d5db;
	font-size: 1.25rem;

}
.panel-heading a:hover {
	color: #FFFFFF;

}
.panel-heading:hover {

	background-color:rgba(143,143,143,1.00);
}
.line-h {
	border-left: 1px solid #dfdfdf;
}
.list-file {
	padding: 4px;
}
.list-group-item {
	padding: 0.5rem 0rem;
}
.topic_cat {
    background-color: rgb(130, 21, 37);
    padding: 7px;
}
.question {
	background-color: aliceblue;
    padding: 8px;
}
.answer {
	background-color: #f8fbfe;
    padding: 8px;
    border: 1px #e4eff8 solid;
}
.tel {
    float: left;
    font-size: 11px;
    line-height: 15px;
    text-align: left;
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-style: solid;
    border-radius: 9px;
    padding: 13px;
    margin-right: 10px;
    min-height: 90px;
    min-width: 253px;
    margin-bottom: 10px;
}
.bg-footer {
	background-color: #eeeeee;
}

.mobile-apply {
	text-align: right;
	padding-right: 5em;
}
@media (max-width: 575px) { 
	.mobile-apply {
		text-align: center;
		padding-right: 0;
	}
	.mobile-profile {
		text-align: center;
	}
	.tel {
		 width: 100%;
	}
}
@media (min-width: 992px) {
.navbar-toggleable-md .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
}
@media (max-width: 767px) { 
	.tel {
		 width: 100%;
	}
	.media {
		display: grid;
	}
}
@media (min-width: 576px) {
	.col20 {
float: left;
		  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 100%;
	}
}
@media (max-width: 767px) { 

}
.col20 {
	float: left;
		  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 20%;
}
.out:hover {
		  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
    -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.bg-blue {
	background-color: #2d86e0;
}
#myImg {

    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 62px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0); /* Fallback color */
    /*background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	z-index: 9999;
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;

}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
		z-index: 9999;
    }
}
.item-list {
    padding: 10px;
    margin: 15px;
    border: 1px #ccc solid;
    border-radius: 5px;
    width: 100%;
}
.max-img {
	max-width: 50px;
}
.form-group {
	margin-bottom: 0;
}
/*
.form-control {
	padding: 0.3rem 0.5rem;
	border: 2px solid rgb(207, 228, 255);
	border-radius: 0;
	margin-bottom: 7px;
	font-size: 1rem;
    line-height: 1;
}
.form-group {
	margin-bottom: 0;
}
select.form-control:not([size]):not([multiple]) {
    height: calc(1.8rem + 3px);
    font-size: 13px;
}
.breadcrumb a{
	color: #979797;
}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: listbox;
	height: calc(1.8rem + 3px);
    font-size: 13px;
}
.top8 {
	top: -8px;
    position: relative;
}
*/
.card-note {
	border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
	    width: 350px;
}
.btn-red4 {
	color: #fff;
    background-color: #ce3c3e;
    border-color: #ce3c3e;
}
.btn-gray4 {
	color: #fff;
    background-color: #646467;
    border-color: #646467;
}
.btn-yallow4 {
	color: #373333;
    background-color: #fed60d;
    border-color: #f6d013;
}
.btn-blue4 {
	color: #fff;
    background-color: #1783e0;
    border-color: #0874d0;

}
.hots {
	    padding: 3px;
    background-color: #636366;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    color: #fff;
    text-align: center;
}
.list-group-item:first-child {
	border: 0;
}
.list-group-item:last-child {
	border-bottom: 0;
}
.bg-green4 {
	background-color: #8BC34A;
	border-color: #8BC34A;
}
.bg-blue4 {
	background-color: #76d6ec;
	border-color: #76d6ec;
}
.bg-orang {
	background-color: #25c6eb;
	border-color: #25c6eb;
}
.nav-tabs .nav-item {
    margin-bottom: -4px;
}
.form-control {
	/*padding: 0.25rem 0.75rem;*/
	    margin-bottom: 7px;
}
.select.form-control:not([size]):not([multiple]) {
	    height: calc(2rem + 0px)!important;
}
.btn-gray5 {
	background-color: rgb(62, 62, 64);
	border-color: rgb(62, 62, 64);
}
.pointer {
cursor: pointer;
}
.card-from {
background-color: #FFFFFF;
    border: 1px #EEEEEE solid;
    padding: 10px;
    border-radius: 3px;
}
.line-from {
    border-bottom: 1px #e6e6e6 solid;
    margin-bottom: 7px;
}
.box-user {
	background-color: rgb(159, 207, 255);
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 3px 0px 5px 9px;
    font-size: 12px;
    font-family: tahoma;
    color: #585a5a;
    font-weight: bold;
}
.lable-login2 {
    clear: both;
    padding: 3px 12px 3px 13px;
    border-radius: 5px;
    background-color: rgb(62, 62, 64);
    color: #fff;
    margin-bottom: 10px;
}
.dropdown-menu {
	border-radius: 0;
}
.link-file {
	text-decoration: underline;
	font-style: italic;
}
.link-file a {
	color: #165b99;
}
li.article {
	border-bottom: 1px solid #f2f2f2;
    padding: 6px 5px 3px 2px;
    padding-left: 10px;
}
li.article:hover {
background-color: rgba(209,209,209,1.00);
}
li.article.active{
	background-color: #f2f2f2;
    padding-left: 10px;
}
.marquee_style{
    padding-top: 10px;
    background-color: #CCC;
}


.form_head{
    border-bottom: solid 2px #cc3300;
}
.form_head div{
    background-color: #da2128;
    padding:10px 20px 5px 20px;
    color:#FFF;
    border-radius: 10px 10px 0 0;
    display: inline-block;
}
.form_head_green{
    border-bottom: solid 2px #229954;
}
.form_head_green div{
    background-color: #27AE60;
    padding:10px 20px 5px 20px;
    color:#FFF;
    border-radius: 10px 10px 0 0;
    display: inline-block;
}
.form_bg{
    background-image: url(../img/IMG_7065.png);
    background-size: cover;
    background-attachment: fixed;
}

.custom-control-indicator{
    background-color:#BBB!important;
}
.custom-control-input:checked ~ .custom-control-indicator{
    background-color:#0275d8!important;
}
.fs12{
    font-size:12px;
    padding-top:3px;
}
.fpt3{
    padding-top:3px;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.paddingl2{
    padding-left: 2px;
    padding-right: 0px;
}
.nopadding-r{
    padding-right: 0!important;
}
.form-warning{
    max-width: 425px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 5px;
    border: 1px #ccc solid;
    margin-bottom: 13px;
    margin-top: 100px;
}
.warn-head{
    border-bottom: 3px #da2128 solid;
    padding: 10px;
    border-radius: 5px 5px 0px 0px;
    background: rgba(240,240,240,1);
    background: rgba(227,227,227,1);
    background: -moz-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(227,227,227,1)), color-stop(100%, rgba(99,99,102,1)));
    background: -webkit-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
    background: -o-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
    background: -ms-linear-gradient(left, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
    background: linear-gradient(to right, rgba(227,227,227,1) 0%, rgba(99,99,102,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#636366', GradientType=1 );
}

/*-------------*/
/*-- MARQUEE--*/
/*-------------*/
.bgmarquee{
    padding: 10px;
    background: #CCCCCC;
    color: #000000;
}

/*--------------*/
/*-- tab form --*/
/*--------------*/
.stab{
    background: #EEEEEE;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 0px;
}


/*--------------*/
/*-- others --*/
/*--------------*/
.left{
    text-align: left;
}
.center {
    text-align: center;
}
.right{
    text-align: right;
}
th{
    text-align: center!important;
}

.bgsuccess{
    background: #53E8BA;
}
.bgdenger{
	background-color:#FF2D25;
}
.bgwarning{
	background-color:#FF7125;
}
.bgprimary{
	background-color:#356EE8;
}
.bggray{
	background-color:#9E9E9E;
}
.bggray-thin{
	background-color:#D7D7D7;
	font-weight: bold;
}
.bgpink-1{
    background: #e9bfc1;
}
.bgpink-2{
    background: #f3d6d8;
}
.bgblue-1{
    background: #9DDEEF;
}
.bgblue-2{
    background: #C1F2FF;
}
.bgbline{
    border-bottom: 1px solid #CCCCCC;
}
.bgwhite{
	background:#FFFFFF;
	padding:5px;
}

.calendar-img{
	margin-top:-5px;
	margin-bottom:-5px;
}

.headtable-admis{
	background-color: #EEEEEE;
}

.text-nopaid {
		font-weight:bold;
		color: #ea4c3a;
		font-size:12pt;
}
.text-paid {
		font-weight:bold;
		color: #0b9c0f;
		font-size:12pt;
}

.box_loading{
	height: 180px;
	width: 100%;
	margin: 0;
    background-color: ;
   /* border: 1px solid gray;*/
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.swal-title{
	font-size: 14pt;
	font-weight: bold;
}
.swal-text{
	font-size: 12pt;
	
}
.swal-filetext{
	font-size: 11pt;
	font-weight: bold;
	
}
.max-file{
	font-size: 9pt;
	color: red;
	font-weight: bold;
}

.comment-attc{
	font-size: 10pt;
	color: gray;
}
.bg-text-graduate{
	padding: 5px;
	padding-right: 10px;
	padding-left: 10px;
	background: rgba(237,237,237,0.83);
	background: -moz-linear-gradient(left, rgba(237,237,237,0.83) 0%, rgba(237,237,237,0.82) 0%, rgba(237,237,237,0.82) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,237,237,0.83)), color-stop(0%, rgba(237,237,237,0.82)), color-stop(100%, rgba(237,237,237,0.82)));
	background: -webkit-linear-gradient(left, rgba(237,237,237,0.83) 0%, rgba(237,237,237,0.82) 0%, rgba(237,237,237,0.82) 100%);
	background: -o-linear-gradient(left, rgba(237,237,237,0.83) 0%, rgba(237,237,237,0.82) 0%, rgba(237,237,237,0.82) 100%);
	background: -ms-linear-gradient(left, rgba(237,237,237,0.83) 0%, rgba(237,237,237,0.82) 0%, rgba(237,237,237,0.82) 100%);
	background: linear-gradient(to right, rgba(237,237,237,0.83) 0%, rgba(237,237,237,0.82) 0%, rgba(237,237,237,0.82) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ededed', GradientType=1 );
}

input::placeholder {
  color: #BDBDBD !important;
  font-size: 10.5pt;
}