#slvm_m {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -100;
	width: 100vw;
	height: 120vw;
	overflow: hidden;
	display: inline;
}
#slvm_m video {
	width: 100vw;
	height: 120vw;	
}

#slvm_d {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -100;
	width: 100vw;
	height: 45vw;
	overflow: hidden;
	display: none;
}
#slvm_d video {
	width: 100vw;
	height: 45vw;
}

@media(min-width: 768px) {
	#slvm_d { display: inline; }
	#slvm_m { display: none; }
}

header { min-height: 120vw;	}
@media (min-width: 768px) {
	header { min-height: 45vw;	}
}

header .hnavbar { padding: 0px;	}
header nav.navbar {	padding: 0px; }
header .hnavbar .row { margin: 0px; }

header .hnavbar .row .col-menu { padding: 0px; }

header img.logo {    
    php_host_params->logo_m_css
    height: auto;
    margin: 0;
	padding: 4vw 0px 0px 4vw;
}

@media (min-width: 768px) {
	header img.logo {
		php_host_params->logo_d_css
    	height: auto;
    	margin: 0;
		padding: 4vw 0px 0px 4vw;
	}
}

header nav.navbar .navbar-toggler { padding: 4vw 4vw 0px 0px; }

.main-nav .nav-item .nav-link {
	padding: 0px;
	padding-top: 4vw;
}

@media (min-width: 768px) {
	header .navbar .main-nav { padding-right: 4vw; }
}

header .navbar .main-nav .nav-item .nav-link img {
	cursor: pointer;
	padding-left: 4vw;
	max-height: 6vw;
}

@media (min-width: 768px) {
	header .navbar .main-nav .nav-item .nav-link img {
		padding-left: 1vw;
		max-height: 2vw;
		vertical-align: middle;
	}
}

.section.contacts .content { margin-bottom: 4vw; }
.section.contacts .content>div {
	font-family: 'My8277', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
	font-size: 1.2rem;
	padding-left: 4vw;
}
@media (min-width: 768px) {
	.section.contacts .content>div {
		font-size: 2rem;
	}
}	

.section.contacts div .far,
.section.contacts div .fas,
.section.contacts div .fab {
	width: 32px;
	height: 32px;
	margin-right: 4vw;
}
.section.contacts .content div div { display: inline-block; }
.section.contacts .content div div i { color: transparent; }


.section.contacts a,
.section.contacts a:link,
.section.contacts a:focus,
.section.contacts a:visited,
.section.contacts a:hover { color: white !important; }


.section.works {
	background-color: black; 
	padding: 0px;
	margin: 0px;
}

.section.works .row,
.section.contacts .row { margin: 0px; }

.section.works .title,
.section.contacts .title,
.section.contacts .content { padding: 0px; }

.section-title.videos h2,
.section-title.contacts h2 { margin-bottom: 2px; }

.section-title.videos h2 div.img,
.section-title.contacts h2 div.img {
	height: 25vw;
	width: 100%;
	background-position-y: 100%;
	background-position-x: 4vw;
	background-image: url(php_host_params->p_works);
	background-size: auto 7vw;
	background-repeat: no-repeat;
}

.section-title.contacts h2 div.img { background-image: url(php_host_params->p_contacts); }

@media (min-width: 768px) {
	.section-title.videos h2 div.img,
	.section-title.contacts h2 div.img {
		height: 6vw;
		width: 100%;
		background-position-y: 100%;		
		background-size: auto 3vw;
		background-repeat: no-repeat;
	}
}

.section.works .row.videos div.video {
	filter: opacity(100%);
	transition: all 0.9s;
	padding: 0px;
}

.section.works .video-item .card {
  border-radius: 0px;
  border: none;
}


.section.works .video-item .card .card-body .card-text {
  font-size: 1rem;
  color: #777;
}

.section.works .video-item .thumb-content {
  position: relative;
  overflow: hidden;
}

.section.works .row.videos .video-item .card {
	background-color: black;
	text-align: center;
}

.section.works .row.videos .video-item .card img {
	width: 100%;
	height: auto;
}

.section.works .row.videos div.card-title {
	position: absolute;
	bottom: 1vw;
	left: 4vw;
	background-color: transparent;
	color: white;
	margin: 0px;
	font-family: 'My8277', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
	font-size: 1.2rem;
	text-align: left;
	display: block;
	visibility: visible;
	opacity: 1;
	transition: visibility 0.5s, opacity 0.5s linear;
}

@media (min-width: 768px) { .section.works .row.videos div.card-title { font-size: 1.7rem; } }

@media (min-width: 768px) {
	.section.works .row.videos div.card-title.inactive {
		visibility: hidden;
		opacity: 0;
		transition: visibility 0.5s, opacity 0.5s linear;
	}
}

/*@media (min-width: 768px) {*/
	.section.works .row.videos div.video.active {
		transition: filter 0.9s;
		filter: opacity(100%);		
	}

/*}*/

.section.works .row.videos div.video.active {
		transition: filter 0.9s;
		filter: opacity(100%);		
}

.section.works .row.videos div.video img {
	transition: all 1.2s;
	transform: scale(1);
}

/*@media (min-width: 768px) {*/
	.section.works .row.videos div.video.active {		
		transition: all 0.9s;
		filter: opacity(70%);
	}
	.section.works .row.videos div.video.active img {
		transition: all 1.2s;
		transform: scale(1.2);
	}

/*}*/


.section.video .row {
	padding: 0px;
	margin: 0px;
}

.section.video .project_m {
	font-family: 'MyBebas', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	padding:10vw 0px 0vw 4vw;
	font-size: 7vw;	
	text-transform: uppercase;
}
.section.video .project_d {
	font-family: 'MyBebas', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;	
	font-size: 2vw;	
	text-transform: uppercase;
	display: none;
	margin-top: -0.5vw;
}

@media (min-width: 768px) {
	section.video .project_m { display: none; }
	section.video .project_d { display: inline-block!important; }
}

.section.video .mworks div {
	height: 5vw;
	min-width: 100px;
	background-position-y: 100%;
	background-image: url(php_host_params->p_works);
	background-size: auto 5vw;
	background-repeat: no-repeat;
	margin: 4vw 0px 0px 4vw;
}

@media (min-width: 768px) {
	.section.video .mworks div {
		height: 2vw;
		min-width: 300px;
		background-size: auto 2vw;
		margin: 4vw 0vw 4vw 4vw;
	}
}

.section.video img.logo {
	php_host_params->logo_m_css
	height: auto;
	margin: 0px;
	margin-bottom: 4vw;
	padding: 4vw 0px 0px 4vw;
}

@media (min-width: 768px) {
	.section.video img.logo {
		php_host_params->logo_d_css
		height: auto;
		margin: 0px;
		margin-bottom: 4vw;
		padding: 4vw 0px 0px 4vw;
	}
}

/*.section.video .mreel div {
    width: 20vw;
    height: auto;
	background-position-y: 100%;
	background-image: url(/img/m_logo.png);
	background-size: auto 20vw;
	background-repeat: no-repeat;
	margin: 4vw 0px 0px 4vw;
}

@media (min-width: 768px) {
	.section.video .mreel div {
	    width: 10vw;
    	height: auto;
		background-size: auto 10vw;
		margin: 4vw 0vw 4vw 4vw;
	}
}
*/
.section.video .embed {
	text-align: left;
	width: 96vw;
	height: 54vw;
	margin-bottom: 10vw;
}

@media (min-width: 768px) {
	.section.video .embed {
		text-align: left;
		width: 65vw;
		height: 37vw;		
	}
	.section.video .embed.reel {
		text-align: left;
		width: 98vw;
		height: 55vw;		
	}
}

@media (min-width: 768px) {
	.section.video .embed { margin-bottom: 0vw;	}
}

.section.video .info {
	display: block;
	font-size: 6vw;
	font-family: 'My8277', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	text-align: left;
	width: 100%;
	color: gray;	
}

@media (min-width: 768px) {
	.section.video .info { font-size: 1.25vw; }
}

.section.video .info span {
	font-family: 'My8277', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;	
	color: white;	
}