/*
Theme Name: Benji Theme
Author: Juang Salaz Prabowo
Author URI: 
Version: 1.0
*/

@import url('bootstrap/dist/css/bootstrap.css');
@import url('owl.carousel.css');

@font-face {
    font-family: mishka;
    src: url('gotham-black.TTF');
}

@font-face {
    font-family: gotham;
    src: url('Gotham-Book.otf');
}

/** Generated by FG **/
@font-face {
	font-family: 'Conv_IntriqueScript';
	src: url('IntriqueScript.eot');
	src: local('☺'), url('IntriqueScript.woff') format('woff'), url('IntriqueScript.ttf') format('truetype'), url('IntriqueScript.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}



.navbar {
	margin-bottom: 0;
}

.navbar-default {
	border-color: #DE4442;
}

#navbar-brand-style {
	font-family: gothamblack;
	font-size: 18px;
	color: white;
	display: block;
	width: 100%;
}

#navbar-brand-style img {
	float: left;
	width: 90px;
}

.thumbnail {
	border-radius: 0;
}

.overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 99999;
	display: none;
	background-color: #DE4442;
}

.nav-menu {
	position: fixed;
    top: 0;
    z-index: 999999;
    width: 100%;
    display: none;
}

#menu-header {
	width: 100%;
    max-height: 85px;
    height: 65px;
    top: 0;
    position: fixed;
    padding-top: 30px;
    padding-bottom: 10px;
}

.close-menu {
    text-decoration: none;
    color: white;
    font-size: 38px;
    float: right;
    position: absolute;
    right: 100px;
    top: 17px;
}

.close-menu:hover {
	color: white;
	text-decoration: none;
}

.list-menu {
	margin: 0;
}

.list-menu ul {
	padding: 0;
	margin: 0;
}

.list-menu ul li {
	list-style: none;
	text-align: center;
	height: 50px;
	line-height: 50px;
}

.list-menu ul li a {
	font-size: 18px;
	color: white;
	font-weight: 900;
	display: block;
	text-decoration: none;
}

.list-menu ul li a:hover {
	background-color: white;
	color: #DE4442;
}

.thumbnail-box a .icon-sosmed-green {
	display: none;
}

.thumbnail-box a:hover .icon-sosmed-green {
	display: flex; 
	flex-direction: 
	column; justify-content: center;
}

.thumbnail-box a:hover .icon-sosmed-white {
	display: none;
}

.thumbnail-box-text a .icon-sosmed-green {
	display: none;
}

.thumbnail-box-text a:hover .icon-sosmed-green {
	display: flex; 
	flex-direction: column; 
	justify-content: center;
}

.thumbnail-box-text a:hover .icon-sosmed-white {
	display: none;
}

.text-content {
	/*display: block; */
	/*height: 257px;*/
	/*padding: 30px 30px 90px 30px; 
	text-align: center; 
	background-color: #179999; 
	text-decoration: none; 
	color: white;*/
	color: white;
	text-decoration: none; 
}

#text_1:hover, #text_2:hover, #text_3:hover, #text_4:hover, #text_5:hover, #text_6:hover, #text_7:hover, #text_8:hover, #text_9:hover, #text_10:hover {
	background-color: white;
	color: #179999;
	text-decoration: none;
}

.square {
	width: 33.3%;
	position: relative;
	text-align: center;
	background-color: #179999;
	/*height: 257px;*/
}

.square:after {
	content: "";
  	display: block;
  	padding-bottom: 100%;
}

.square-long {
	width: 66.7%;
	position: relative;
	text-align: center;
	background-color: #179999;
}

.square-long:after {
	content: "";
  	display: block;
  	padding-top: 50%;
}

.wrapper {
	width: 60%;
}

.square-large {
	width: 40%;
	position: relative;
	text-align: center;
	background-color: #179999;
}

.square-large:after {
	content: "";
  	display: block;
  	padding-bottom: 100%;
}

.thumbnail-box {
	width: 20%;
	position: relative;
	text-align: center;
	background-color: #179999;
	/*height: 257px;*/
}

.thumbnail-box:hover {
	background-color: white;
}

.thumbnail-box:after {
	content: "";
  	display: block;
  	padding-bottom: 100%;
}

.thumbnail-box .feature-slider {
	display: table;
   	width: 100%;
   	height: 100%;
}

.thumbnail-box-text {
	width: 20%;
	position: relative;
	text-align: center;
	background-color: #179999;
	/*height: 257px;*/
}

.thumbnail-box-text:hover {
	background-color: white;
}

.thumbnail-box-text:after {
	content: "";
  	display: block;
  	padding-bottom: 100%;
}

.thumbnail-box-text .feature-slider {
	display: table;
   	width: 100%;
   	height: 100%;
}

.thumb-content {
	position: absolute;
  	width: 100%;
  	height: 100%;
  	padding: 20px;
}

.thumb-content-img {
	position: absolute;
  	width: 100%;
  	height: 100%;
}

.thumb-img {
	/*height: 257px;*/
}

.zoom-img {
	position:relative;
}

.zoom-img a img {
	position: absolute;
}

#history {
	width: 33.4%;
	height: 514px; 
	background-color: #3F3F3F; 
	text-align: center; 
	color: white; 
	font-size: 12px; 
	padding: 20px;
}

#filmography {
	width: 100%; height: 257px; text-align: center; padding: 60px 50px 0 50px;	
}

.square-history {
	width: 50%;
	height: 257px;
}

.center-wrap {
	width: 66.6%;
}

.right-banner {
	width: 40%;
	height: 514px; 
	display: block;
}

.square-history a img {
	width: 100%; position: absolute;
}

.footer-sosmed ul li {
	float: right;
	list-style: none;
	margin: 0 10px 0 0;
}

.hero-feature p {
	font-family: mishka; 
	font-size: 1.9vw; 
	color: white;
}

.modal-content {
	background-color: #DE4442;
	border-radius: 0;
}

.modal-body {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 100px;
}

.modal-body input {
	height: 50px;
	margin: 30px 0 0 0;
	font-family: gotham;
}

.padding-thumb-content {
	 padding-top: 35px;
}

#cover-img-1, 
#cover-img-2, 
#cover-img-3,
#cover-img-4,
#cover-img-5 {
	position: absolute; 
	width: 100%; 
	height: 100%; 
	background-color: #179999; 
	opacity: 0.5;
}

.thumbnail-box a:hover #cover-img-1, 
.thumbnail-box a:hover #cover-img-2,
.thumbnail-box a:hover #cover-img-3,
.thumbnail-box a:hover #cover-img-4,
.thumbnail-box a:hover #cover-img-5 {
	opacity: 0;
}

#fb-text-1, 
#fb-text-2, 
#fb-text-3,
#fb-text-4,
#fb-text-5 {
	font-family: gotham;
	font-size: 15px;
	margin-top: 0;
}

.modal-header {
	border-bottom: none;
}

.modal-dialog {
	border-radius: 0;
}

@media screen and (max-width: 568px) {
	.square {
		width: auto;
		height: auto;
	}

	.padding-thumb-content {
		 padding-top: 10px;
	}

	.square-long {
		width: auto;
		height: auto;
		padding-top: 10px; 
	}

	.wrapper {
		width: auto;
	}

	.thumbnail-box {
		width: auto;
		height: auto;
	}


	.thumbnail-box a {
		width: auto;
	}


	.thumbnail-box-text {
		width: auto;
		height: auto;
	}

	.thumbnail-box-text a {
		width: auto;
	}

	.thumbnail-box-text:after {
		content: "";
	  	display: block;
	  	padding-bottom: 60%;
	}

	.thumb-img {
		height: auto;
	}

	.zoom-img a img {
		position: relative;
	}

	#history {
		width: auto;
		height: auto;
	}

	.square-history {
		width: auto;
		height: auto;
	}

	.center-wrap {
		width: auto;
	}

	.square-history a img {
		position: relative;
	}

	.right-banner {
		width: auto;
		height: auto;
	}

	.square-large {
		width: auto;
		height: auto;
	}

	#navbar-brand-style {
		width: 100%;

	}

	#show-menu {
		float: left;
	}

	.footer-logo {
		width: 100px;
		margin: 0 auto;
	}

	.footer-sosmed {
		float:right;
	    position:relative;
	    left:-50%;
	    text-align:left;
	    width: auto;
	}

	.footer-sosmed ul {
		list-style:none;
    	position:relative;
    	left:50%;
	}

	.footer-sosmed ul li {
		float:left;position:relative;
	}

	.hero-feature p {
		font-family: mishka; 
		font-size: 16px; 
		color: white;
	}

	#navbar-brand-style img {
		width: 90px;
		margin: 0 auto;
		float: none;
	}

	#fb-text-1, 
	#fb-text-2, 
	#fb-text-3,
	#fb-text-4,
	#fb-text-5 {
		font-family: gotham;
		font-size: 15px;
		margin-top: 20px;
	}

	#cover-img-1, 
	#cover-img-2, 
	#cover-img-3,
	#cover-img-4,
	#cover-img-5 {
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background-color: #179999; 
		opacity: 0;
	}
}

@media (max-width: 1023px) and (min-width: 640px) {
	.square {
		width: 33.3%;
		position: relative;
		text-align: center;
		background-color: #179999;
		float: left;
		/*height: 257px;*/
	}

	.square:after {
		content: "";
	  	display: block;
	  	padding-bottom: 100%;
	}

	.square-long {
		width: 66.6%;
		position: relative;
		text-align: center;
		background-color: #179999;
		float: left;
	}

	.square-long:after {
		content: "";
	  	display: block;
	  	padding-top: 50%;
	}

	.wrapper {
		width: 100%;
	}

	.hero-feature p {
		font-family: mishka; 
		font-size: 3vw; 
		color: white;
	}

	.padding-thumb-content {
		padding-top: 70px;
	}

	.square-large {
		display: none;
	}

	.thumbnail-box {
		width: 33.3%;
		position: relative;
		text-align: center;
		background-color: #179999;
		float: left;
	}

	.thumbnail-box:hover {
		background-color: white;
	}

	.thumbnail-box:after {
		content: "";
	  	display: block;
	  	padding-bottom: 100%;
	}

	.thumbnail-box-text {
		width: 33.3%;
		position: relative;
		text-align: center;
		background-color: #179999;
		float: left;
	}

	.thumbnail-box-text:hover {
		background-color: white;
	}

	.thumbnail-box-text:after {
		content: "";
	  	display: block;
	  	padding-bottom: 100%;
	}

	.remove-square {
		display: none;
	}

	#navbar-brand-style {
		width: 100%;
	}

	#navbar-brand-style img {
		width: 90px;
		margin: 0 auto;
		float: none;
	}

	.footer-logo {
		width: 100px;
		margin: 0 auto;
	}

	.footer-sosmed {
		float:right;
	    position:relative;
	    left:-50%;
	    text-align:left;
	    width: auto;
	}

	.footer-sosmed ul {
		list-style:none;
    	position:relative;
    	left:50%;
	}

	.footer-sosmed ul li {
		float:left;position:relative;
	}

	#cover-img-1, 
	#cover-img-2, 
	#cover-img-3,
#cover-img-4,
#cover-img-5 {
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background-color: #179999; 
		opacity: 0;
	}

	#fb-text-1, #fb-text-2, #fb-text-3, #fb-text-4, #fb-text-5 {
		margin-top: 30px;
	}
}

@media (max-width: 1024px) and (min-width: 1023px) {
	#fb-text-1, #fb-text-2, #fb-text-3, #fb-text-4, #fb-text-5 {
		margin-top: 0;
	}
}

@media (min-width: 1025px) {
	#fb-text-1, #fb-text-2, #fb-text-3, #fb-text-4, #fb-text-5 {
		margin-top: 20px;
	}
}

.icon-sosmed-white,.icon-sosmed-green {
bottom: 10%;
}

.thumb-content-img .img-responsive {
bottom: 15%;
top: inherit !important;
}