/*!
Theme Name: anhhaicamau
Theme URI: http://underscores.me/
Author: Sam Truong AI
Author URI: https://vietnamdigitalhumans.com
Description: This is a theme for Anh Hai Cà Mau - PVCFC Digital Humans Project
Version: 1.1.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: anhhaicamau
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

anhhaicamau is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
/* Css by Vietnam Digital Humans team */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Be+Vietnam+Pro:wght@200;300;600&family=Calistoga&family=MonteCarlo&family=Montserrat:wght@300;500;800&family=Roboto:wght@300;400;900&display=swap');

html {overflow-x:hidden;width:100vw;}
body {background-color:#007445;left:0;top:0; 
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

}
::-webkit-scrollbar {
  width: 10px;  	
}

* {outline:0;text-decoration:none !important;box-sizing: border-box;}
*, :after, :before {
    box-sizing: border-box;
}

.fullpage {width:100vw;min-height:100vh;top:0; left:0;}
.su-lightbox-content {z-index:9999999;}

/* No display default */
footer, aside {display:none!important}

.site-header, .entry-title {
display:none!important;
}

.post-thumbnail {display:none;} 

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent; 
  border-radius: 9px;
} 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ee2836 ; 
  border-radius: 9px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background:transparent; 
}

.avatar {
	border-radius:30px; 
	min-width:60px;
	max-width:60px;
	height:60px;	
	overflow:hidden;background: #fff;
	border: 5px solid #fff200;
}
.avatar:hover {opacity:0.8;}

.avatar-comment {
	border-radius:30px; 
	min-width:40px;
	max-width:40px;
	height:60px;	
	overflow:hidden;background: #fff;
	border: 3px solid #007445;
    margin-left:5px;}

.avatar-300 {
	border-radius:50%; 
    width: 200px;
	min-height:200px; height:200px; 
	overflow:hidden;
	background: #333;
	border: 10px solid #fff200; box-shadow:2px 5px 10px #fff200;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;	
	display: inline-block;   
    object-fit:cover; 
	margin-right:auto;
	margin-left:auto;
}
.avatar-300 img { 
 height: 200px!important;
  object-fit:cover;   
  transform: translate(-25%, 00%);	
	z-index:-99;
}
.ava-frame {z-index:9999;}

.avatar-150 {
	border-radius:50%; 
	width:150px;
	height:150px;
	overflow:hidden;background: #fff;
	border: 5px solid #05f3ff;	box-shadow:2px 5px 10px #2ce6d3;
	
}
.avatar-150:hover {
	box-shadow:2px 5px 10px #05f3ff;
	border: 5px solid #fff;	
}
.avatar-150-frame {
	border-radius:100%; 
	min-width: 170px;
	height:170px;padding:10px;
	vertical-align:center;
	top: 65%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	margin-left:auto;margin-right:auto;
	overflow:hidden;background: linear-gradient(256deg, #ab08ac, #0496b7, #0804b7, #ff0000, #8d00ff);
    background-size: 1000% 1000%;
    -webkit-animation: bg 10s ease infinite;
    -moz-animation: bg 10s ease infinite;
    -o-animation: bg 10s ease infinite;
    animation: bg 10s ease infinite;
}
.avatar-box {
	border-radius:60px; 
	position:relative;
	width:120px;
	height:120px;
	overflow:hidden;
 background: linear-gradient(45deg, red, orange, purple);
text-align:center;vertical-align:middle;
padding-left:10px;	
padding-top:10px;
}

/* GRIDS */
.grid5 {
	width:33vw;
	float:left;	
	background-color:transparent;
	border-radius: 9px;
	padding:0px;
	position:relative;
	min-height:280px;
	max-height:280px;
	overflow: hidden;
}

.cont5 img {
	float:left;
	height:100%;	
	min-height:280px;
	max-height:280px;
	overflow:hidden;	
	object-fit:cover;
    }

@media only screen and (max-width: 767px) {
  .cont5 img {
    width: 33vw;
  }
}

.quick-icon {z-index:999; margin-top:-20px; position:absolute;}

/* ----------*/
.grid3 {
	width:33%;
	float:left;
	height:360px;
	background-color:#fff;
	border-radius: 9px;
	padding:10px;
	position:relative;
	min-height:320px;
	max-height:320px;
	text-decoration:none!important;
}

.cont3 {
	width:100%;
	float:left;
	height:220px;	
	min-height:220px;
	overflow-y:hidden;
	border-radius: 12px;
	margin-bottom:10px;
}

.cont3:hover, .cont5:hover {
	opacity:0.85;
}

/* END GRID */

h1 {font-family: 'Montserrat', sans-serif; font-size:30px; line-height:40px; text-transform:Uppercase; font-weight:550;
background: -webkit-linear-gradient(#95ff00, #95ff00, #95ff00);
-webkit-background-clip: text; text-align:center;
-webkit-text-fill-color: transparent; 
}


h2 {font-family: 'Montserrat', sans-serif; font-size:20px; line-height:25px; text-transform:Uppercase; font-weight:500;
background: -webkit-linear-gradient(#fff, #eee);
-webkit-background-clip: text; text-align:center;
-webkit-text-fill-color: transparent; 
}

h3 {font-family: 'Be Vietnam Pro', sans-serif; font-size:25px; line-height:35px;}

.title30, .title {
font-family: 'Calistoga', cursive; font-size:30px; line-height:32px;
text-decoration: none !important; outline: none; color:#fff200;
text-transform:Uppercase; text-shadow: 1px 1px 2px black, 0 0 25px #c9a659, 0 0 5px #c9a659;}
}
.y-kien {
font-family: 'MonteCarlo', cursive;text-decoration:none!important;}
.text-wrap {
font-family: 'Montserrat', sans-serif;text-decoration:none!important;
}

body {font-family: 'Be Vietnam Pro', sans-serif;text-decoration:none!important; font-size:17px; line-height:25px;!important;padding:10px;  }

.text {font-family: 'Be Vietnam Pro', sans-serif;text-decoration:none!important; font-size:17px; line-height:25px;!important;padding:10px; }

.head-top {background: rgb(2,165,227);
background: linear-gradient(52deg, rgba(2,165,227,1) 10%, rgba(9,200,179,1) 30%, rgba(100,231,185,1) 51%, rgba(109,228,173,1) 69%, rgba(17,221,230,1) 84%); height:40px; color:#fff; left:0; padding:10px;min-width:100%;top:0; margin-top:0px;}

.bottom {background: rgb(2,165,227);
background: linear-gradient(52deg, rgba(2,165,227,1) 10%, rgba(9,200,179,1) 30%, rgba(100,231,185,1) 51%, rgba(109,228,173,1) 69%, rgba(17,221,230,1) 84%);height:50px; color:#fff; bottom:0!important; left:0; padding:10px; min-width:100%; margin-bottom:-90px!important; z-index:999;position:relative;}

.container {
        display: flex;
        flex-direction: column;
    }

@media only screen and (max-width: 767px) {
  .container {
    width:100vw;
  }
}

.2col {
	width:50%;float:left;	
	background-color:#fff;
	position: left;
	padding:10px;	
}

@media only screen and (max-width: 767px) {
  .panel-right {
    width:100%;padding:10px;
  }
}

a, a:link, a:focus {
outline: none;
text-decoration: none!important;
color:#003010!important;}

a:visited {
text-decoration: none;color:#93f26b!important;
}

a:hover {
text-decoration: none; color:#93f26b;
}

spacer {min-height:20px;width:100vw;}
.button  {
	color:#fff!important; 
	padding:15px;
	margin: 10px;
  border-radius: 35px;
	height: 70px;
	background: linear-gradient(256deg, #95ff00, #95ff00, #fff200, #95ff00, #95ff00);
    background-size: 1000% 1000%;
    -webkit-animation: bg 10s ease infinite;
    -moz-animation: bg 10s ease infinite;
    -o-animation: bg 10s ease infinite;
    animation: bg 10s ease infinite;
}

.top-cover {z-index:-333;min-width:100%; height:auto;color:#fff;min-height: 33vh;background: linear-gradient(256deg,#11ad7f, #0496b7, #009c8f, #02d1a1, #0293d1);
    background-size: 1000% 1000%; margin-top:-20px;

    -webkit-animation: bg 20s ease infinite;
    -moz-animation: bg 20s ease infinite;
    -o-animation: bg 20s ease infinite;
    animation: bg 20s ease infinite;
}

.bg {min-width:100%; height: 30%;color:#fff; background: linear-gradient(256deg, #007445, #fff200, #ee283b);
    background-size: 1000% 1000%;
    -webkit-animation: bg 10s ease infinite;
    -moz-animation: bg 10s ease infinite;
    -o-animation: bg 10s ease infinite;
    animation: bg 10s ease infinite;
}

@-webkit-keyframes bg {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@-moz-keyframes bg {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@-o-keyframes bg {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@keyframes bg {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}

.full-width {width:100%; padding:20px;}

.page80 {
	position: relative;
	width: 80%; margin-left:auto!important;
	margin-right:auto!important;
	background: #fff;
	border-radius: 6px;
	padding: 20px;		
	}

@media only screen and (max-width: 767px) {
  .page80, .grid3 {
    width: 100vw;
  }
}

@media only screen and (min-width: 767px) {
  hom {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  som {
    display: show;
  }
}

.grid-tok {
	max-width:600px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#eee;
	border-radius:12px;
	border: 1px solid #333;	
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;	
	margin-bottom:10px;
	overflow:hidden;
	position:relative;
	float:left;
}

.grid-tok:hover {	
	opacity:0.9;
}

.grid-tok img{
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
object-fit: cover;	
z-index:-999;
}

.panel-tok {
	position:absolute;
	margin-top:-130px;
	height:130px;
	color:#fff;
	z-index:999;
	display:inline-block;
	left:0;bottom:0;
	padding:10px;	
}

.panel-tok-right {
	max-width: 70px;
	position:absolute;
	margin-top:-360px;
	height:360px;
	color:#fff;
	z-index:999;
	display:inline-block;
	right:0;bottom:0;
	padding:10px;
	vertical-align:center!important;
}

.ava-tok {width:50px; max-height:50px; border-radius:30px; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; border:1px solid #fff;margin-right:10px;	}

@media only screen and (max-width: 768px) {
  .grid-tok, .cont-tok {
    width: 100vw;	
  }
}

/* GRID 1 POST */
.grid1 {
width:33.3%;
height:auto;
background-color:#ddd;
border: 1px solid #fff200;	
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;	
margin-bottom:10px;
position:relative;
margin-left:auto!important;
margin-right:auto!important;
border-radius:6px;	
}

.grid1:hover {		
	box-shadow:2px 5px 10px #05f3ff;		
}

.cont1 {	
	overflow:hidden;
	height:100%;
	}

.cont1 img{
	overflow:hidden;
	margin-top:0px;
	width:100%;
	object-fit:cover;
}

@media only screen and (max-width: 767px) {
  .grid1 {
    min-width: 100vw!important;
	  left:0!important;
	  border-radius:0px;
  }
}
.panel-white {background-color:#fff; padding:20px; color:#333;border-radius: 22px;}

/* buttons */

.white-button {color:#fff; width:300px; height:60px; border-radius:12px; padding:10px; display:inline-block;box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; border: 5px solid #fff200!important; background: linear-gradient(256deg, #ee283b,#ff99b1, #ee283b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#05f2db",endColorstr="#05b7f2",GradientType=1); }

.white-button:hover {
	background: linear-gradient(256deg, #007445,#04de7c, #007445);
}

.white-text: {color:#fff!important;}
.but {border: 3px solid #fff200; min-width: 200px; padding:12px; margin-top:20px!important; border-radius:90px; background:transparent!important; text-align:center;display:inline; font-weight:500px;color: #3fa300!important;}
.but:hover {box-shadow:1px 5px 10px #95ff00;}


/* ---*/
.panel {width:33%;background-color:transparent; margin-right:auto;margin-left:auto;}	

.title30:hover {text-shadow: 1px 1px 2px black, 0 0 25px #c9a659, 0 0 5px #c9a659; }

.content {background:transparent;max-width:1200px;margin-left:auto; margin-right:auto;}

@media only screen and (max-width: 768px) {
 .content, .panel {
    width:100vw;left:0!important; margin-left:-10px;
  }
}

.modal-content {z-index:9999999999;}
.modal-body > img, .modal-content > img {
    width:100%;
  }

#yk > a {color:#fff!important}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* chat page background */
.chatpage-container {
	position:relative;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	margin-left:0px;
	margin-top:-50px;
	z-index:-9999;
	display:inline;
	overflow:hidden;
}

.chat-page-logo {
	position:absolute;
	max-width:150px;
	min-width:150px;
	z-index:999;
}	

.chat-page-video {
	position:absolute;
	min-width:100vw;
	height:100vh; position: fixed;
	z-index:-999;
}

.chat-page-coversation {
	position:absolute;
	min-width:100vw;
	height:100vh; position: fixed;
}

.chat-page-photo {
	position:absolute;
	min-width:100%;
	height:100%;
	top:0;
	left:0;
	margin-left:50%;
}

.talk-box {
	top:50%;
	left: 70%;
	
	
}
.talk-button {
	
}

.end-talk {}
.talk-result {}

@media only screen and (max-width: 767px) {
  .talk-box,  {
  left: 85%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  }
}

.corner-avatar {
	bottom:0;
	right:0;
	padding:20px;
	z-index: 99999;
	position:absolute;
	width: 300px;
	height:300px;
	border-radius:50%;
}

/* Quick post */
.quick-post {display:inline-block; position:relative;display:inline-block;}

.grid-quick-post {
	min-width: 220px;
	max-width: 220px;
	min-height: 300px;
	max-height: 300px;
	position:absolute;
	float:left!important; 	
	overflow:hidden;
	border-radius:9px;
	margin:15px;
	background:transparent;
	padding:10px;
}

/* frame effect */
.scale {
	animation: dong 1s ease-in-out infinite alternate;
    -webkit-animation: dong 1s ease-in-out infinite alternate;
}

.rotate {
	
}

@keyframe dong {
        0% {
            transform: scale(0.9);
            -webkit-transform: scale(1.0);
        }
	25% {
            transform: scale(1.3);
            -webkit-transform: scale(1.3);
        }
	50% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
	75% {
            transform: scale(1.4);
            -webkit-transform: scale(1.4);
        }
	
        100% {
            transform: scale(0.9);
            -webkit-transform: scale(1.0);
        }
    }

/* panel scroll */
.panel scroll {overflow-y:scroll;}
.panel-scroll {
	width:60%;
	height:70vh;
	margin-left:auto;
	margin-right:auto;
	padding:15px;
	background: transparent;display:relative;	
}

.panel-scroll a, a:visited { background: -webkit-linear-gradient(#fff200, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.panel-scroll a:hover {color:#ededed;}
	
code {padding:5px;border-radius: 6px; width:auto; height:20px; color:#fff!important; margin-right:10px; min-width:120px;font-weight:500;
background: rgb(0,182,212);
background: -moz-linear-gradient(90deg, rgba(0,182,212,1) 0%, rgba(24,227,204,0.8939950980392157) 35%, rgba(0,212,255,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,182,212,1) 0%, rgba(24,227,204,0.8939950980392157) 35%, rgba(0,212,255,1) 100%);
background: linear-gradient(90deg, rgba(0,182,212,1) 0%, rgba(24,227,204,0.8939950980392157) 35%, rgba(0,212,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff200",endColorstr="#ee283b",GradientType=1);}

@media only screen and (max-width: 767px) {
  .panel-scroll  {
 width:100vw;
  }
}

.line {border-bottom: solid 1px red;}

.panel-login {
	top:0!important;
	right:0;
	width: 100vw;	
	z-index: 99999;
	position: absolute;
	display:inline;
	padding:10px; 
	box-sizing: border-box;
	text-align: right;
	margin-bottom:10px;
}

/* Animated BG home Conversation and home BG*/
.bg-cover {position:fixed;
z-index:-999;
background-color: transparent;
left:0;
top:0; width:100vw;
height:100%!important;
background-size: 100%;
}

.bg-cover img {
height:100%!important;
object-fit: cover;
}

.bg-cover video {
height:100vh!important;
object-fit: cover;
position:absolute;	
}

@media only screen and (max-width: 767px) {
  .bg-cover img  {
  object-fit: cover;
  }
}

@media only screen and (max-width: 767px) {
  .bg-cover video  {
  object-fit: cover;
  height:100%;
  z-index:-1; 
  }
}

.chat-panel {
	top:78vh!important; 
	left:33.3%;
	position:absolute;
	width:33.3%;
}

@media only screen and (max-width: 767px) {
  .chat-panel  {
  left:0!important;
  width:100%!important;
  }
}

img:hover {-webkit-filter: saturate(1.3);
   filter: saturate(1.3);
   transition: linear 2s ease-in-out;
}

.cont1 img {
	display:inline-block; 
	width: 100%;	
	object-fit: cover;
	display:absolute;
	transition: transform 0.5s;
}

.grid1-wrap {
   width:60vw!important;
   margin-left:auto!important;
   margin-right:auto!important;
}

@media only screen and (max-width: 767px) {
.grid1-wrap { 
 width:100vw!important;
 left:0;
  }
}

/* Modal */
.modal-content {background: rgb(156,255,242);
background: linear-gradient(57deg, rgba(156,255,242,1) 0%, rgba(230,255,182,0.8827906162464986) 29%, rgba(205,255,208,0.9248074229691877) 55%, rgba(223,255,244,1) 84%);color:#333;}
.modal-title {display:none;}
.modal-body img {width:100%; object-fit:cover;}

.modal-body video {
  left: 50%;  
  height: 90%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
.modal-body video {
  margin-top:30%;
  left: 50%;
  min-width: 96vw;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  }
}

#inner {
  display: table;
  margin: 0 auto; 
  width:1130px;
}

#outer { 
  width:100%; margin-top:20px;
}

video {
	object-fit:fill;
	width:100%!important;
}


/* Form */
div .frm-key-instructions, .frm-instruction-key {display:none;}

.chosen-drop {background:transparent;}

.frm_logout_link {text-align:center;}

/* Panel mews */
.news {
	max-width:1140px;
	position: relative;	
	margin-left:auto!important;
	margin-right:auto!important;
}
.news-wrap {	
	position: relative;	
	min-width:1140px;	
	padding:5px; display:block;
	border-radius:10px; 
	background-color: transparent;
	margin-left:auto!important;
	margin-right:auto!important;
}
.slides {
	margin-left:auto!important;
	margin-right:auto!important;
	height: 230px;
  }

.slide {
	display:inline-block; 
	width: 182px;
	height:220px;
	object-fit: cover;
	display:absolute; 
	float:left; 
	border-radius:9px;
	transition: .2s ease;
    backface-visibility: hidden;
	margin-left:7.5px;
	margin-bottom:10px;
	
}

.slide-container{
	display:inline-block; 
	width: 182px;
	height:220px;
	object-fit: cover;
	display:absolute; 
	float:left; 
	border-radius:9px;
	transition: .2s ease;
    backface-visibility: hidden;
	margin-left:7.5px;
	margin-bottom:10px;
	
}
.slide img {
	display:inline-block; 
	width: 182px;
	height:220px;
	object-fit: cover;
	display:absolute; 
	float:left; 	
	border-radius:19px;
	transition: .2s ease;  
	box-shadow: 1px 1px 6px #333; 
	background: linear-gradient(230deg, #049b2b, #8bd741, #f3e61e);
    background-size: 300% 300%;
    -webkit-animation: loading-color 2s ease infinite;
    -moz-animation: loading-color 2s ease infinite;
    -o-animation: loading-color 2s ease infinite;
    animation: loading-color 2s ease infinite;bottom:10px;
}

.slide img:hover {
	transform: scale(0.90);
	border: 5px solid #fff200;z-index:-99999999!important;	
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.slide-panel {
	z-index:998; 
	position:absolute;
	color:#fff;
	max-width:180px;
	height:40px;
	background-color:greenyellow;
	margin-top:-60px;
	display: inline;
	float:left;	
}

@media only screen and (max-width: 768px) {
 .news-wrap, .slides {
 width:100vw;
 display:inline-block!important
 position:relative;
 text-align:center;
 height: 450px;
  }
}

@media only screen and (max-width: 768px) {
 .slide, .slide img { 
  width:46.5vw!important;height:220px; 
  display:inline-block; 
  }
}


@media only screen and (max-width: 767px) {
 .title-box { 
  width:45vw;height:40px; 
  display:inline-block; 
  margin-left:auto;
 margin-right:auto;	 
  }
}

.right-icon {
	margin-left: 80%;
	margin-top:-80%;
	position:absolute;
	z-index:333;
}

 .title-box { 
  width:182px;height:40px; 
  display:inline-block; 
  }

.bg-loading {
    background: linear-gradient(230deg, #049b2b, #8bd741, #f3e61e);
    background-size: 300% 300%;
    -webkit-animation: loading-color 2s ease infinite;
    -moz-animation: loading-color 2s ease infinite;
    -o-animation: loading-color 2s ease infinite;
    animation: loading-color 2s ease infinite;
}

@-webkit-keyframes loading-color {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}
@-moz-keyframes loading-color {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}
@-o-keyframes loading-color {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}
@keyframes loading-color {
    0%{background-position:0% 94%}
    50%{background-position:100% 7%}
    100%{background-position:0% 94%}
}

/* home cover*/
.home-cover {position:fixed;
z-index:-999;
background-color: transparent;
left:0;
top:0; width:100vw;
height:300px!important;
background-size: 100%;
}

.home-cover img {
height:300px!important;
object-fit: cover;
	
}

.home-cover video {
height:300px!important;
object-fit: cover;
position:absolute;
	
}

@media only screen and (max-width: 767px) {
  .home-cover img  {
  object-fit: cover;
  }
}

@media only screen and (max-width: 767px) {
  .home-cover video  {
  object-fit: cover;
  height:100%;
  z-index:-1; 
  }
}

/* Grid 6 */
.grid6-container {	
	height:300px;
	background-color:#fff;
	border-radius: 9px;		
	width: 1200px;	
	position: relative;	
	margin-left:auto!important;
	margin-right:auto!important;
	padding:10;
	background:#fff;
	border-radius:9px;
	overflow:hidden;*/
	overflow:hidden;
}

.grid6 {
	width:190px;
	float:left!important;
	height:300px;
	background-color:transparent;
	border-radius: 9px;	
	position:relative; margin:5px;	
	text-decoration:none!important;
	display: inline-block!important;
	
}

.cont6 {
	width:100%
	height:300px;
	background-color:transparent;
	border-radius: 9px;	
	position:absolute;	
	text-decoration:none!important;
	display: inline-block!important;
}

.cont6 img:hover {
	animation-name: dong;
    animation-duration: 0.5s;
}

.cont6 img {
	display:inline-block; 
	width: 180px;
	height:280px;
	object-fit: cover;
	display:absolute; 
	float:left; 
	border-radius:9px;	
	transition: .2s ease;  
}

.cont6 img:hover {
	transform: scale(0.95);
	border: 5px solid #fff200;		
}

@media only screen and (max-width: 767px) {
 .cont6, .cont6 img  {
  width:33vw;
  height:240px;
	  display:inline-block!important;
  	  
  }
}

@media only screen and (max-width: 767px) {
 .grid6-container {
  width:100vw;
  height:420px; position:relative;
  	  
  }
}

.full-slide {
	width:900px!important; 
	display:inline; 
	position: relative;
	object-fit:cover;	
	margin-top:40px;
	top:40;
	margin-left:auto;
	margin-right:auto;
	border-radius:19px; 
	z-index:-1;
	overflow:hidden;
	height:360px;
	background: linear-gradient(230deg, #049b2b, #8bd741, #f3e61e);
    background-size: 300% 300%;
    -webkit-animation: loading-color 2s ease infinite;
    -moz-animation: loading-color 2s ease infinite;
    -o-animation: loading-color 2s ease infinite;
    animation: loading-color 2s ease infinite;
}

.full-slide img {
	border-radius:19px; 
}

@media only screen and (max-width: 767px) {
 .full-slide {
  width:100vw;  	  
  }
}

/* Share Buttons */

.share-btn-container {
  background: transparent;
  padding: 16px;
  position: relative;
  display: inline;	
}

.share-btn-container a i {
  font-size: 32px;
}

.share-btn-container a {
  margin: 12px 0;
  transition: 500ms;
}

.share-btn-container a:hover {
  transform: scale(1.2);
}

.share-btn-container .fa-facebook {
  color: #3b5998;
}

.share-btn-container .fa-twitter {
  color: #1da1f2;
}

.share-btn-container .fa-linkedin {
  color: #0077b5;
}

.share-btn-container .fa-pinterest {
  color: #bd081c;
}

.share-btn-container .fa-whatsapp {
  color: #25d366;
}

/* Media Queries */

 .share-btn-container {
   }

  .share-btn-container a {
    margin: 0 32px;
  }
}

.round {
border-radius: 50%; width:60px; height:60px; background:red;}

/* menu slide */
.menu-slide-container {width:100vw; overflow-y:hidden; max-height:250px!important;white-space: nowrap;
overflow-x: scroll; 
flex-wrap: inherit !important;
scrollbar-width: none; }
.menu-slide-container::-webkit-scrollbar { 
display: none; }
.menu-slide {
	display:inline-block; 
	width: 140px;
	object-fit: cover;	
	float:initial;
	transition: .2s ease;
  backface-visibility: hidden;
	margin-bottom:10px;	
	border-radius:15px;
}
.menu-slide img {
	display:inline; 
	width: 140px;
	height:160px;
	object-fit: cover;border-radius:10px;
	/*float:left; */	
	transition: .2s ease;  
	box-shadow: 1px 1px 6px #333; 
	background: linear-gradient(230deg, #049b2b, #8bd741, #f3e61e);
    background-size: 300% 300%;
    -webkit-animation: loading-color 2s ease infinite;
    -moz-animation: loading-color 2s ease infinite;
    -o-animation: loading-color 2s ease infinite;
    animation: loading-color 2s ease infinite;
}

.menu-slide img:hover {
	transform: scale(0.90);
	border: 1px solid #fff!important;	
}

.stream {height:100vh;}

note {color:#fff!important; background:Red;padding:5px;height:26px;}