/** 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: 'Open Sans', sans-serif;*/
	font-family: Roboto,Arial,Helvetica,sans-serif;
	font-size: 14px;
    background-color: #f3f3f3;
}
a {
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
	color: #2A2A2A;
}
a:hover,
a:focus {
	color: #000000;
	text-decoration: none;
}
hr {
	margin-bottom: 1em;
    /*margin-bottom: 0.5rem;*/
    border: 0;
    border-top: 1px dashed #CCC;
}
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 {
	/*border-radius:20px;
	padding: 5px 15px 5px 10px!important; /* left,right,top,buttom */
}
.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 {
    bottom: 0;
    line-height: 22px;
    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. */

body > .container-top {
  /*padding: 140px 15px 0;*/
	padding-top: 130px;
}
@media (min-width: 768px) {
	body > .container-top {
  /*padding: 140px 15px 0;*/
	padding-top: 116px;
}
}
@media (max-width: 575px){
	body > .container-top {
  /*padding: 140px 15px 0;*/
	padding-top: 90px;
}

}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-brand {
	padding: 0;
}
.logo-img {
	padding-right: 5px;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-menu {
	border: 1px solid rgb(237, 237, 195);
    border-radius: 0;	
	padding: 0;
}
.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: #fffff3;
}
#demos .owl-carousel .item-card  {



}
ul li .dropdown-item:focus, .dropdown-item:hover {
  color: #fffff3;
  text-decoration: none;
  background-color: #99ccff;
}

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: #93c6f9;
    padding: 8px 5px;
}
.right-nav {
	right: -35px;
    position: absolute;
    top: 7px;
}
.navbar-light .navbar-toggler {
	    border-color: rgb(148, 199, 250);
}
.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.2rem 1rem;
    margin-bottom: 0.8rem;
    background-color: rgba(255, 255, 255, 0.59);
    border-radius: 0;
    font-size: 14px;
}
.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: #f3f3f3;
}
.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-color: #ce3c3e;*/
	/*background-color: #9cf;*/
	/*background: rgba(191,223,255,1);
background: -moz-linear-gradient(-45deg, rgba(191,223,255,1) 0%, rgba(84,172,255,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(191,223,255,1)), color-stop(100%, rgba(84,172,255,1)));
background: -webkit-linear-gradient(-45deg, rgba(191,223,255,1) 0%, rgba(84,172,255,1) 100%);
background: -o-linear-gradient(-45deg, rgba(191,223,255,1) 0%, rgba(84,172,255,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(191,223,255,1) 0%, rgba(84,172,255,1) 100%);
background: linear-gradient(135deg, rgba(191,223,255,1) 0%, rgba(84,172,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfdfff', endColorstr='#54acff', 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: #3b3b3b;
}
.navbar-light .navbar-nav .nav-link {
	color: #3b3b3b;
}
.navbar-light .navbar-nav .nav-link:focus {
	color: #3b3b3b;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #3b3b3b;
}
.text-red {
    color: #ea4c3a;
}
.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;
	/*border-right: 1px #ededc3 solid;*/
}
.nav-item:first-child {
	/*border-left: 1px #ededc3 solid;*/
}
.nav-item:hover {

}
.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-sky4 {
    /*background-color: #727272;*/
	background-color: #7BA1C8;
    color: white;
}
.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);
}

.btn-blue:hover {
  color: rgb(28, 46, 89);
  background-color: #FFFFFF;
}

.btn-blue: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);
}
.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
{
	
background-color: #ddd;
}

#style-7::-webkit-scrollbar
{
	    width: 10px;
	height: 6px;
    background-color: #dddddd;
}

#style-7::-webkit-scrollbar-thumb
{
	background-color: #b5b5b5;
	/*
	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;
	
}*/
.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.2em 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-red2 {
	background-color: #fd3f2e;
}
.bg-red {
    background-color:#fec5c0 ;
}
.bg-yallow {
	background-color: #fff3b6;
}
.bg-yallow2 {
	background-color: #fed60d;
}
.text-yallow {
	color: #ba9101;
}
.bg-green {
	background-color: #b2ccc2;
}
.bg-green2 {
	background-color: #005734;
}
.text-green {
	color: #005734;
}
.number {
    padding: 0px 8px;
    border: 2px solid #ffffff;
}
.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;

}
.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: #231f20;
    background-color: #ffffff;
}
.table, .table td {
   border-top: 1px solid rgba(176, 176, 176, 0.2);
	vertical-align: top; 
    font-size: 13px;
}
th{
    
    text-align: center;
}
.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: 8;
    border: 0;
    border-top: 2px solid #023586;
}
.line-back {
	margin-top: 0;
    margin-bottom: 8;
    border: 0;
    border-top: 2px solid #75ade4;
}
.line-red {
	margin-top: 0;
    margin-bottom: 8;
    border: 0;
    border-top: 2px solid #727272;
}
.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: #023586;
    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: 3px;
	background: rgba(235,233,249,1);
	background: -moz-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,233,249,1)), color-stop(50%, rgba(216,208,239,1)), color-stop(51%, rgba(206,199,236,1)), color-stop(100%, rgba(193,191,234,1)));
	background: -webkit-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
	background: -o-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
	background: -ms-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
	background: linear-gradient(to bottom, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 50%, rgba(206,199,236,1) 51%, rgba(193,191,234,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=0 );
}

.ul-course {
    margin: 0;
    list-style-type: disc;
    background-color: #e1e1e1;
    margin-bottom: 3px;
	display: grid;
}
.list-course {
    padding: 0.5rem 1rem;
}


.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: rgb(88,90,90);
	/*background-color: #dc4a9b;*/
}
.line-h {
	border-left: 1px solid #dfdfdf;
}
.list-file {
	padding: 4px;
}
.list-group-item {
	padding: 0.5rem 1.25rem;
}
.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: 12px;
    line-height: 15px;
    text-align: left;
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-style: solid;
    border-radius: 9px;
    padding: 12px;
    min-height: 72px;
    min-width: 155px;
    margin: 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: 99999;
}

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

}

/* 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: #000000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
	opacity: 1;
	color: #000000;
    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-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: 330px;
}
.bg-red3 {
	background-color: #fffff3;
}
.bg-swu {
	background-image: url(../img/bg_swu.png);
	background-position: right;
	background-repeat: no-repeat;
}
.card-swu {
	background-color: #e5f3fc;
	background-image: url(../img/fac_dept.jpg);
	background-position: bottom;
    background-repeat: repeat-x;
    padding: 15px;
    margin-top: 10px;
    display: block;
    /*min-height: 240px;*/
	    min-height: 279px;
}
.card-swu2 {
    background-color: #fff;
    padding: 15px;
    margin-top: 10px;
    display: block;
    min-height: 160px;
}
.card-inbox {
    background-color: rgba(255, 255, 255, 0.45);
    padding: 15px;
    margin-top: 10px;
    display: block;
    width: 100%;
    min-height: 242px;
	
}
.min-height {
    height: 171px;
    overflow: auto;
}
.dropdown-toggle::after {
	top: -2px;
    position: relative;
}
.progress-bar {
	height: 0.25rem;
}
.gpa {
    width: 60px;
    background-color: white;
    height: 40px;
    padding: 6px 11px;
    font-size: 17px;
    font-weight: bold;
    border: 2px #63b702 solid;
    float: left;
}
.gpa-result {
    width: 60px;
    background-color: #63b702;
    height: 40px;
    padding: 6px 11px;
    font-size: 17px;
    font-weight: bold;
    border: 2px #63b702 solid;
    color: #000000;
    float: left;
}
.cgpa {
    width: 67px;
    background-color: white;
    height: 40px;
    padding: 6px 11px;
    font-size: 17px;
    font-weight: bold;
    border: 2px #fff069 solid;
    float: left;
}
.cgpa-result {
width: 60px;
    background-color: #fff069;
    height: 40px;
    padding: 6px 11px;
    font-size: 17px;
    font-weight: bold;
    border: 2px #fff069 solid;
    color: #231f20;
    float: left;
}
.list-inbox {
    border-bottom: 1px #ddd solid;
    padding: 6px;
}
.data-info {
	
}
.list-info {
	background-color: rgba(250, 250, 250, 0.54);
    padding: 15px 5px 5px 15px;
    border-bottom: 1px #f0f0f0 solid;

}
.bg-sky {
	background-color: #9cf;
}
.class1 {
	background-color: #cbebf9;
    color: #0b60b3;
    text-align: center;
}
.bg-mon {
	
}
.bg-tue {
	
}
.bg-wed {
	
}
.bg-thu {
	
}
.bg-fri {
	
}
.unread {
	background-color: #e7e7e7;
    color: #0b60b3;
}
.border {
	border: 1px #ddd solid;
}
.topic-new {
    /*background-color: rgb(117, 173, 228);
    border-radius: 8px 8px 0px 0px;
    display: inline;
    padding: 7px 8px 4px 9px;*/
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.menu-wrapper {
	position: relative;
	max-width: 1114px;
	height: 100px;
	margin: 1em auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

.menu	{

	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.item {
display: inline-block;
height: 100%;
box-sizing: border-box;
}


.paddles {
}
.paddle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2em;
}
.left-paddle {
	left: 0;
	background-color: #e1e1e1;
}
.right-paddle {
	right: 0;
	z-index: 9999;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(225,225,225,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(225,225,225,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(225,225,225,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(225,225,225,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(225,225,225,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(225,225,225,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1', GradientType=1 );
}
.hidden {
	display: none;
}

.print {
	margin: auto;
	max-width: 500px;

}
.nav-tabs .nav-link {
	border: 0;
	color: #fff;
	border-radius: 0;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: #4c89c6;
    background-color: #fff;
    border-color: #ddd #ddd #fff;
}
.nav-tabs {
    border-bottom: 0px solid #9cf;
	z-index: 9999;
}
.nav-tabs .nav-item {
    margin-bottom: -7px;
}
.bg-sky3 {
	background-color: #000080;
}
.form-group {
    margin-bottom: 0.35rem;
}

.short{
	width:40%;

}
.block-gpa {
	background-color: #cbebf9;
    padding: 11px;
}

.tab-class {
	background-color: #75ade4;
    color: #fff;
	border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
	padding: 6px;
}

.tab-class.active{
	/*color: #e6f1fd;*/
}

.tab-class:hover,
.tab-class:focus
{
	/*color: #e6f1fd;*/
}
.tab-exam {
    background-color: #727272;
    color: #fff;
	border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
	padding: 6px;
}
.tab-exam:hover,
.tab-exam:focus{
	/*color: #e9e9e9;*/
}
.tab-all {
    background-color: #000080;
    color: #fff;
	border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
	padding: 6px;
}
.tab-all:hover,
.tab-all:focus
{
	/*color: #ebebff;*/
}
.col-1 {
	background-color: #727272;
    color: #fff;
}
.name-top {
	width: 90%;
    line-height: 18px;
    padding-left: 6px;
    color: #4a4a4a;
    font-weight: bold;
    top: 3px;
    position: relative;
}
.logo-top {
	max-width: 10%;
}
.modal-header {
	padding: 8px;
	/*background-color: #eceeef;*/
}
.modal-footer {
	padding: 8px;
	/*background-color: #eceeef;*/
}
.modal-body {
	/*background-color: #eceeef;*/
}
.col5 {
max-width: 124px;

}
.pr6 {
		    padding-right: 6px !important;
}
.inbox-1 {
    background-color: #000080;
    display: block;
    padding: 5px;
   
    color: #fff;
    margin-bottom: 4px;	
}
.inbox-2 {
    background-color: #63b702;
    display: block;
    padding: 10px 0px;
    color: #fff;
    width: 131px;
	line-height: 16px;
	
}
.bg-yellow-2 {
    background-color: #ffd55c;
}
.bg-tqf003 {
    background-color: #000080;
}
.bg-tqf004 {
    background-color: #ff0096;
}
.icon-inbox {
    width: 35px;
    padding: 6px;	
}
.text-inbox {
	
}
select.form-control:not([size]):not([multiple]) {
   /* height: calc(25px + 2px);*/
}
.card-from {
	background-color: #f9f9f9;
    border: 1px #EEE solid;
    padding: 10px 10px 5px 10px;
    border-radius: 5px;

}
.line-from {
	border-bottom: 1px #e6e6e6 solid;
	margin-bottom: 7px;
}
.col-form-label {
	padding-top: calc(0px - 1px * 2);
    padding-bottom: calc(0px - 1px * 2);
	margin-bottom: 0;
	padding-right:15px;
}

.pointer {
 cursor: pointer;
}

.no-drop {
	cursor: no-drop;
}

.btn-more {
    background-color: #0b60b3;
   width:30px;
   height:30px;
   border-radius:50%;
	
}
@media (max-width: 575px) { 
	.name-top {
		line-height: 12px;
		font-size: 11px;
	}
	.gpa {
		width: 50px;
		height: 34px;
		font-size: 14px;
	}
	.gpa-result,.cgpa,.cgpa-result {
		width: 52px;
		height: 34px;
		font-size: 14px;
	}
	.text-right-device {
		text-align: left !important;
	}
}
.text-right-device {
		text-align: right;
	}
.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;
}
.box-shadow {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.wrapper-tab {
    position:relative;
    margin:0 auto;
    overflow:hidden;
	padding:5px;
  	height:35px;
}

.list {
    position:absolute;
    left:0px;
    top:0px;
  	min-width:3000px;
  	margin-left:12px;
    margin-top:0px;
}

.list li{
	display:table-cell;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    vertical-align:middle;
}

.scroller {
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 11px 7px 11px 2px;
    white-space: no-wrap;
    vertical-align: middle;
    background-color: #000080;
    font-size: 9px;
    color: #ffffff;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}
.min-150 {
	min-height: 150px;
  margin-right:2px;
}
.fixed-top {
	z-index: 99999 !important;
}
.box-module {
	
}
.box-banner {
	
}
.pad3 {
	padding: 3px;
}
@media (min-width: 992px) and (max-width: 1199px)  { 
	.inbox-2 {
		width: 112px !important;
	}
}
.m2 {
    margin: 2px auto !important;
}
.collapsed .icon-play_top {
	transform: rotate(90deg);
}

.btn-icon {
 display: inline-block;
  width: 96%;
    height: 130px;
  padding: 10px;
  color: #FFF;
  /*background-color: transparent;*/
  background-color:#17A49A;
  border: 1px solid #fff;
  border-radius:5px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: color 0.3s ease-out,
              background-color 0.3s ease-out,
              border-color 0.3s ease-out;
	margin-bottom:20px;
}

.btn-icon:hover,
.btn-icon:active {
  background-color: #155CA4;
  border-color: #155CA4;
  color: #FFF;
  transition: color 0.3s ease-in,
              background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}

.badge-icon{
	background-color:#d80027;
    padding: 5px 10px 5px 10px;
	border-radius:20px;
	color:#FFFF;

}

.btn-gen{
	display: inline-block;
  width: auto;
  padding: 5px 15px 5px 10px;   /* left,right,top,buttom */
  color: #FFF;
  /*background-color: transparent;
  background-color:#155CA4;*/
  border: 1px solid #FFF;
  border-radius:50px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: color 0.3s ease-out,
              background-color 0.3s ease-out,
              border-color 0.3s ease-out;
	margin-bottom:5px;
}

.btn-gen:hover,
.btn-gen:active {
  background-color: #17A49A;
  border-color: #17A49A;
  color: #FFF;
  transition: color 0.3s ease-in,
              background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}
.wrapper-tab-popup{
	position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px;
    height: 35px;
    background: #155CA4;
}

.btn-no{

  width: 70px;
  height:70px;
  padding: 5px;
  color: #FFF;
  /*background-color: transparent;*/
  background-color:#155CA4;
  border: 3px solid #FFF;
  border-radius:50px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: color 0.3s ease-out,
              background-color 0.3s ease-out,
              border-color 0.3s ease-out;
	margin:30px ;
}
.btn-no:hover,
.btn-no:active {
  background-color: #17A49A;
  border-color: #17A49A;
  color: #FFF;
  transition: color 0.3s ease-in,
              background-color 0.3s ease-in,
              border-color 0.3s ease-in;
}
.line-center{
	background:url(../img/line-icon.png);
	width:468px;
	height:153px;
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.area{
	height:100px;
	width:250px;
	border:1px solid #CCCCCC;
	padding:3px;
	border-radius:3px;
}

.bgsuccess{
    background: #53E8BA;
}
.bgdenger{
	background-color:#FF2D25;
}
.bgwarning{
	background-color:#FF7125;
}
.bgprimary{
	background-color:#356EE8;
}
.bggray{
	background-color:#9E9E9E;
}
.bggray-thin{
	background-color:#D7D7D7;
}
.bggrayDDD{
	background-color:#F8F8F8;
    padding: 10px;
}
.bgpink-1{
    background: #e9bfc1;
}
.bgpink-2{
    background: #f3d6d8;
}
.bgblue-1{
    background: #c5efe6;
}
.bgblue-2{
    background: #d1f7ef;
}
.bgbline{
    border-bottom: 1px solid #CCCCCC;
}
.bgwhite{
	background:#FFFFFF;
	padding:5px;
}
.delRed{
	color:#e80722;
	padding:6px;
	font-size:20px;
}
.fund-nav {
	border-radius:0px;
	width:100%;
	border-bottom:1px solid #FFF;
}
.fund-nav-tabs{
	margin-left:10px;
	margin-right:10px;
	background-color:#CCCCCC;

}
.Tbig{
	font-size:2em;
}

/**  search  */ 
#custom-search-input{
    padding: 3px;
    border: solid 1px #E4E4E4;
    border-radius: 6px;
    background-color: #fff;
}

#custom-search-input input{
    border: 0;
    box-shadow: none;
}

#custom-search-input button{
    
    background: none;
    box-shadow: none;
    border: 0;
    color: #666666;
    padding: 3px;
   
}

#custom-search-input button:hover{
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search{
   /* font-size: 16px;*/
}

.space{
    padding: 10px;
}
.row{
	margin:1px;
}

/********************/
/*   tabs           */
/********************/
/*Fun begins*/
.tab_container {
	width: 100%;
	margin: 0 auto;
	padding-top: 0px;
	position: relative;

}

input, section {
  clear: both;
  padding-top: 10px;
  display: none;
}

label {
  
  display: block;
  float: left;
  width: auto;
  padding: .5em;
  cursor: pointer;
  text-decoration: none;
  text-align: center; 
  /*background: #f0f0f0;*/
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6,
#tab7:checked ~ #content7,
#tab8:checked ~ #content8,
#tab9:checked ~ #content9,
#tab10:checked ~ #content10,
#tab11:checked ~ #content11,  
#tab12:checked ~ #content12{  
  display: block;
  padding: 20px;
  background: #fff;
  /*color: #999;*/
  border-bottom: 2px solid #f0f0f0;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3  {
  text-align: center;
}

.tab_container [id^="tab"]:checked + label {
  background: #FFFFFF;
  box-shadow: inset 0 3px rgb(117, 173, 228);
}

.tab_container [id^="tab"]:checked + label .fa {
  color: rgb(11, 128, 245);
}

label .fa {
  font-size: 1.5em;
  margin: 0 0.4em 0 0;
    color: #9fcfff;
}

/*Media query*/
@media only screen and (max-width: 930px) {
  label span {
    font-size: 14px;
  }
  label .fa {
    font-size: 14px;
  }
}

@media only screen and (max-width: 768px) {
  label span {
    display: none;
  }

  label .fa {
    font-size: 16px;
  }

  .tab_container {
    width: 98%;
  }
}

/*Content Animation*/
@keyframes fadeInScale {
  0% {
  	transform: scale(0.9);
  	opacity: 0;
  }
  
  100% {
  	transform: scale(1);
  	opacity: 1;
  }
}

.font_sweet_alert{
	font-size:12pt;
}

#button_previous, #exam_button_previous {
	border: 1px solid #D8D8D8;
	color: #007bff;
	padding:6px;
}

#button_previous:disabled , #exam_button_previous:disabled{
	color: #080808;
}

#button_next, #exam_button_next{
	border: 1px solid #D8D8D8;
	color:#007bff;
	padding:6px;
	outline:none;
}

#button_next:disabled, #exam_button_next:disabled {
	color:#080808;
}

/*Update By SS 06/03/2018*/
@media (min-width: 1200px) {
	.container {
		min-width: 1140px;
		max-width: 100%;
		width: auto;
	}
}

.panel-heading{
	background-color: #0275d8 !important;
}
.panel-heading a{
	color: #ffffff;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999991;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #0275d8;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#bg-loader {
    position: fixed;
    left: 0;
    top: 0;
    background-color:#444;
    width: 100%;
    height: 100%;
    z-index:999992;
    background-image: url(../../images/loader.png);
    background-repeat: no-repeat;
    background-position: center top 61%;
	opacity: 0.8;
}