/* latin */
@font-face {
  font-family: 'News Cycle';
  font-style: normal;
  src: local('News Cycle'), local('NewsCycle'), url(../fonts/CSR64z1Qlv-GDxkbKVQ_fOAKTQ.woff2) format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-weight: 400;
  src: url(../fonts/Merriweather-Regular.ttf);
}
/*--------------------------------------------------------------
	FONT
--------------------------------------------------------------*/
.font-template {
	font-family: "News Cycle"!important, "Arial";
}

.font-news-title {
	font-family: "Merriweather"!important, "Arial";
}

.font-news-content, .font-news-content p {
	font-family: "Arial", "Helvetica", "freesans", "sans-serif"!important;
}

.font-shadow-black{
	text-shadow:2px 2px #000000;
}

.font-animation-show{
	#animation-name: example;
	#animation-duration: 10s;
	transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
/*--------------------------------------------------------------
	HEADER
--------------------------------------------------------------*/
body, a, div, td, label, button, input, span, li {
	font-family: "News Cycle"!important, "Arial";
	font-size:14px;
	color:black;
}

a:hover{
	text-decoration:none;
	color:rgb(255,10,10);
}

.tophead {
	background:#ff6600ff;
	padding-top:7px;
	padding-bottom:0px;
	margin:0px;
	min-height:55px;
	color:white!important;
}

.tophead .container .social{
	color:white!important;
}

.tophead .container .social a{
	padding:10px;
	font-size:17px;
	color:white!important;
	border-left:solid 0px #dadada;
}

.tophead .container  a, .tophead .container  label{
	color:white!important;
}

.tophead .container .social a:hover{
	color:#ff6600ff!important;
	background:white;
}

header{
	
}

.header {
  padding: 0px;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997; 
  color:black;
}

.header-scrolled {
  background: rgba(70, 219, 249, 0.9);
  transition: all 0.5s; 
}

header .container {
  padding-top: 0px; 
  background-image:url("../image/banner-top.jpg");
	background-repeat: no-repeat;
	background-position:left;
	background-size:cover;
}

header .container > .row {
    padding: 0 15px; 
}

header  .box-shadow{
	box-shadow: 9px 0px 9px 0 rgba(169,184,200,1);
    -webkit-box-shadow: 9px 0px 9px 0 rgba(169,184,200,1);
    -moz-box-shadow: 9px 0px 9px 0 rgba(169,184,200,1);
}

header .container .header-top {
	padding : 15px;
	background:rgba(255,255,255,0.7);
}

.header-search i{
	color:white;
}

.header-search input{
	padding: 2px 3px 5px 5px;
	border:solid 1px rgba(200,102,0,1);
	border-radius:5px;
	width:100%;
}

.header-login {
  transition: all 0.5s;
  z-index: 997; 
  background:rgba(0,0,0,0.5);
  min-height:35vh;
}

.header-login h1{
	color:white!important;
	letter-spacing: 10px;
	font-size:60px!important;
	text-transform: capitalize;
} 

.header-login h5{
  color:white!important;
}


.alert  {
	z-index: 9999999!important;
	max-width:90%;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */

.logo-icon{
	font-size:35px!important;
	color:gold;
	margin-left:5px;
	margin-right:5px;
}

.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none; 
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap; 
  min-width:auto;
  padding : 10px 0px 0px 0px;
  /*text-transform: uppercase;*/
  text-align:center;
}

.nav-menu li a{
  font-size:16px!important;
  /*text-transform: uppercase;*/
  text-align:center;
}

.nav-menu .menu-none {
	color:#777!important;
	padding-right:10px;
}

.nav-menu .menu-none:hover {
	background:transparent!important;
}

.nav-menu li:hover {
	border-radius-top-left:5px;
	border-radius-top-right:5px;
}

.nav-menu li:hover >a {
	color:#ff6600;
	font-weight:bold;
}

.nav-menu li ul li{
	padding : 0px 0px 0px 0px!important;
	background:white;
}

.nav-menu li ul li:hover{
	background:#333333;
}

.nav-menu li ul li:hover > a{
	color:white!important;
}

.nav-menu > li {
  float: left; 
}

.nav-menu li:hover > ul, .nav-menu li.sfHover > ul {
  display: block; 
}

.nav-menu ul ul {
  top: 0;
  left: 100%; 
}

.nav-menu ul li {
  min-width: 100px;
  text-align: left; 
}



/* Nav Meu Container */
#nav-menu-container {
  margin: 0; 
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 0 14px;
  margin: 0 -2px;
  text-decoration: none;
  display: inline-block;
  color: #777;
  font-weight: 500;
  font-size: 15px;
  /*text-transform: capitalize;*/
  outline: none; 
}

.nav-menu a:last-child a {
    margin-right: 0;
    padding-right: 0; 
}

.nav-menu ul {
  margin: 0px 0 0 0px;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff; 
}

.nav-menu ul li {
  transition: 0.3s; 
}
  
.nav-menu ul li > a {
    padding: 5px;
    color: #333;
    transition: 0.3s;
    display: block;
    font-size: 12px;
    text-transform: none; 
	text-align:left;
}

.nav-menu ul li:hover a {
    color: #46dbf9; 
}

.nav-menu ul ul {
  margin: 0; 
}

/* Mobile Nav Toggle */

.navbar{
	width:100%!important;
}

.navbar .tophead{
	position:fixed;
	top:0px;
	width:100%!important;
	z-index:99999;
}
.navbar-toggler {
	position:absolute;
	z-index: 999;
	/*transition: all 0.4s;*/
	cursor: pointer; 
}
  
.navbar-toggler i{
	color:white!important;
	font-size:30px;
}

.navbar-language {
	position:absolute;
	z-index: 999;
	transition: all 0.4s;
	cursor: pointer; 
	right:5px;
	top:4px;
}

.navbar-language .box-language{
	background:white;
	min-width:90px;
	height:30px;
	border-radius:30px;
	padding:5px 3px 3px 3px;
	font-size:12px;
}

.navbar-language .box-language .flag-indonesia{
	position:absolute;
	top:3px;
	right:3px;
	background:url('../image/indonesia.png');
	background-size:100% 100%;
	background-position:center center;
	width:25px;
	height:25px;
	display:block;
}

.navbar-language .box-language .flag-english{
	position:absolute;
	top:3px;
	left:3px;
	background:url('../image/english.png');
	background-size:100% 100%;
	background-position:center center;
	width:25px;
	height:25px;
	display:block;
}

.navbar-body{
	position:fixed!important;
	top:55px;
	width:100%!important;
	height:100vh!important;
	z-index:99995;
}

.navbar .collapse{
	width:100%!important;
	height:100vh!important;
	background:rgba(0,0,0,0.5);
}

.navbar .collapse .navbar-content{
	background:#ff6600ff!important;
	max-width:300px!important;
	height:100vh!important;
	overflow-y:scroll;
}

.navbar-profil{
	min-height:150px;
}

.navbar-profil-image{
	background-size: cover;
    background-position: center center;
	width:100px;
	height:100px;
	border-radius:50%;
}

.nav-link{
	color:white;
	padding-left:5px!important;;
}

.nav-link:hover{
	color:black!important;
	background:white!important;
	cursor:pointer!important;
}

.carausel-top-image{
	min-height:30vh!important;
	vertical-align: bottom;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}

.carausel-top-image center{
	position:absolute;
	width:100%;
	bottom:35px;
}

.carausel-top-description{
	width:50%;
	border-radius:10px;
	background:rgba(255,100,0,0.9);
	color:white;
}

.carausel-top-description p {
	color:white!important;
}

.carausel-top-description p span{
	color:white!important;
	font-family:calibri;
}

#carausel-top .carousel-control-prev .carousel-control-prev-icon{
	background:black!important;
	border-radius:50%!important;
}
/*--------------------------------------------------------------
	SECTION
--------------------------------------------------------------*/

.section-full-screen{
	min-height:100vh;
}

.bg-grey{
	background:grey!important;
}

.bg-cyam-grey{
	background:#eaeaea!important;
}

.bg-cyam{
	background:#f0f0f0;
}

.bg-white{
	background:white;
}


.bg-black{
	background:black;
}

.bg-black-dongger{
	background:#101010;
}

.bg-black-transparent{
	background:rgba(0,0,0,0.7);
}

.align-right{
	float:right;
}

.font-pink{
	color:#ff6600;
}

.font-cyam{
	color:#f0f0f0;
}

.font-grey{
	color:grey;
}
/*--------------------------------------------------------------
	FOOTER
--------------------------------------------------------------*/
.footer-content{
	min-height:300px;
	color:white!important;
}

.footer-development{
	width:100%;
	position:absolute;
}

.footer-development span, .footer-development a{
	color:white!important;
}

.footer-content a, .footer-content p, .footer-content span, .footer-content li, .footer-content h5{
	color:white!important;
}

.footer-content ul {
	padding-left:1.5em;
}

.footer-content-sosmed a{
	color:white;
	font-size:17px!important;
	letter-spacing: 16px;
}

.footer-content a:hover, .footer-development a:hover, .footer-content-sosmed a:hover{
	color:rgb(255,10,10)!important;
}

/*--------------------------------------------------------------
	HOME
--------------------------------------------------------------*/

.section-social-media, .section-social-media h4, .section-social-media a{
	text-align:center;
}

.section-social-media i{
	font-size:35px;
}

.section-mobile-header{
	width:100%;
	height:55px;
}

.section-banner-top {
	position:relative;
	min-width:100%;
	min-height:150px;
	background-color:#efefef;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	overflow: hidden;
	text-align:center;
	color:white!important;
}

.section-banner-top .banner-top-content{
	min-width:100%;
	min-height:150px;
}

.section-banner {
	position:relative;
	min-width:100%;
	min-height:350px;
	background-color:#efefef;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	overflow: hidden;
}

.section-banner .banner-on-bottom{
	position:absolute;
	bottom:0px;
	height:300px;
}

.toolbar{
	position:fixed;
	right:0px;
	top:40%;
	background:rgba(255,102,0,0.9);
	padding:15px;
	border-radius:10px 0px 0px 10px;
}

.toolbar a {
	font-size:25px!important;
	color:white;
}

.toolbar a:hover {
	color:black;
}

.toolbar-mobile{
	width:100%;
	position:fixed;
	bottom:1%;
	text-align:center;
}

.toolbar-mobile a {
	background:rgba(255,102,0,1);
	padding:10px;
	border-radius:10px;
	font-size:12px!important;
	color:white;
}

.toolbar-mobile a:hover {
	color:black;
}

.trending{
	border-top:solid 1px #777;
	border-bottom:solid 1px #777;
	margin-left:0px;
}

.trending .trending-label{
	color:#000!important;
	letter-spacing: 2px;
}

.trending .trending-label a{
	color:#000!important;
}

.trending .trending-label a:hover{
	color:rgb(255,10,10)!important;
}

/*
*	PRODUCT
*/

.box-product{
	background:#fff;
	border:solid 1px #eaeaea;
}

.box-product:hover{
	border:solid 1px #ff6600;
	top:-2;
	position:relative;
}

.box-product .box-image{
	background-size: cover;
    background-position: center center;
	width:100%;
	min-height:180px;
	max-height:180px;
}

.box-product .box-detail .amount {
	display: inline-block;
	background: #ff6600;
	border-radius:30px;
	padding:7px 18px;
	color:white;
	font-weight: 500;
    font-size: 13px;
    margin-top: 13px;
}

.box-product .box-footer{
	padding: 12px 25px;
    border-top: 1px solid #E8E8E8;
}

.box-product .box-footer ul{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
}

.box-product .box-footer ul li{
	list-style: none;
    display: list-item;
    text-align: -webkit-match-parent;
}

.box-product-large{
	background:#fff;
	border:solid 1px #E8E8E8;
}

.box-product-large:hover{
	border:solid 1px #ff6600;
	top:-2;
	position:relative;
}

.box-product-large .box-image{
	background-size: cover;
    background-position: center center;
	width:100%;
	min-height:180px;
	max-height:180px;
}

.box-product-large .box-detail .amount {
	display: inline-block;
	background: #ff6600;
	border-radius:30px;
	padding:7px 18px;
	color:white;
	font-weight: 500;
    font-size: 13px;
    margin-top: 13px;
}

.box-product-large .box-footer{
	padding: 12px 25px;
    border-top: 1px solid #E8E8E8;
}

.box-product-large .box-footer ul{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
}

.box-product-large .box-footer ul li{
	list-style: none;
    display: list-item;
    text-align: -webkit-match-parent;
}

/*
*	SHOPPING CART
*/

.cart-image{
	background-size: cover!important;
    background-position: center center!important;
	width:100%!important;
	height:80px!important;
}

/*
*	PAGINATION
*/
.pagination li span{
	display:block;
	background:#ff6600!important;
	padding:5px!important;
	min-width:30px!important;
	margin-right:2px!important;
	border-radius:5px!important;
	text-align:center!important;
	color:white;
}

.pagination li a{
	display:block;
	background:white!important;
	padding:5px!important;
	min-width:30px!important;
	margin-right:2px!important;
	border-radius:5px!important;
	text-align:center!important;
}

.pagination li a:hover{
	background:#ff6600!important;
	cursor:pointer!important;
	color:white!important;
}

/*
*	RESPONSIVE
*/
@media (max-width: 3024px) {
	.carausel-top-image{
		min-height:71vh!important;
	}
}

@media (max-width: 960px) {
	#nav-menu-container, .toolbar, .header-search {
		display: none; 
	} 
	
	.header-menu .show{
		display: block!important; 
	}
	
	.header-menu .show > ul li{
		width:100%;
		text-align:left;
	}
	
	.header-menu .show > ul li a i{
		display : none;
	}
	
	.carausel-top-image{
		min-height:71vh!important;
	}
}

@media (max-width: 769px) {
    .carousel-item .news-image-box-large{
		min-height:350px;
		max-height:350px;
	}
	
	.carousel-item  .font-news-title{
		font-size:16px!important;
	}
	
	.news-image-box-small{
		min-height:150px;
	}
	
	.carousel{
		
	}
	
	.carausel-top-image{
		min-height:50vh!important;
	}
}

@media (max-width: 414px) {
	.carousel{
		
	}
	
	.carausel-top-image{
		min-height:30vh!important;
	}
}