@charset "UTF-8";

/*
Theme Name: vitronic 2019
Author: Mario Baronchelli
Author URI: https://vitronic.ch/
Description: Vitronic 2019 Theme
Version: 1.1
*/

@font-face {
    font-family: 'Gotham Light';
    src: url('font/Gotham-Light.woff2') format('woff2'),
        url('font/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('font/Gotham-Bold.woff2') format('woff2'),
        url('font/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}



body { 
	font-size:18px;
	line-height:26px;
    font-family: 'Gotham Light', sans-serif;
	*font-size:small; 
	*font:x-small; 
	line-height:normal;
	color:#fff;
}

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section,
time, mark, audio, video, a {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent none no-repeat 0 0;
}

strong, b {
	font-family: 'Gotham';
}

article, aside, figure, footer, header, hgroup, nav, section { display:block; }

body {
	background-color:#010611;
}

body, html {
	width:100%;
	height:100%;
}

a {
	color:#fff;
	text-decoration:none;
    -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;
}

a:hover {
	text-decoration:underline;
}

ul {
	list-style:none;
}

h1, h2, h3, h4 {
    font-family: 'Gotham', sans-serif;
}

/* header */

.burger {
	display: none;
}

.nav_mobile {
	display: none;
}

.contact, .socialmedia, .contact, .imprint, .contact a, .socialmedia a, .imprint a {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 2px;
	color: #75777e;
	z-index: 1000;
}

.container .logo {
	background-image: url("img/logo_vitronic_filmproduktion.svg");
	width: 190px;
	height: 54px;
	position: absolute;
	top:125px;
	left:-20px;
	transform: rotate(-90deg);
	z-index: 1000;
}

.container .logo:hover {
	cursor: pointer
}

.container .contact {
	position: absolute;
	right:120px;
	top:35px;
	color: #9B9B9B;
}

.container .contact a {
	color: #9B9B9B;
}

.container .socialmedia {
	position: absolute;
	right:-40px;
	top:195px;
	transform: rotate(90deg);
}

.container .imprint {
	position: absolute;
	left:-67px;
	top:600px;
	transform: rotate(-90deg);
}




nav {
	position:relative;
	max-width: 1200px;
	margin: 0px 120px 0px 120px;
	padding-top: 60px;
}

section {
	min-height: 90px;
	background-repeat: no-repeat;
	/*background-size: cover;*/
	background-position: center center;
    -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;
}

nav section.nav_team {
	background-image: url("img/BG_Vitronic.gif"), url("img/BG_Vitronic.jpg");
}

nav section.nav_equipment {
	background-image: url("img/BG_Green.gif"), url("img/BG_Green.jpg");
}

nav section.nav_showreel {
	background-image: url("img/BG_Red.gif"), url("img/BG_Red.jpg");
}

nav section.nav_kontakt {
	background-image: url("img/BG_Machen.gif"), url("img/BG_Machen.jpg");
}


nav section .navpas {
	font-family: 'Gotham';
}

nav section .navact, nav section:hover .navpas {
	color:#fff;
	font-family: 'Gotham';
}

section h2 {
	position: relative;
	font-size: 36px;
	color: rgba(255,255,255,0.6);
	padding-left: 10.833%;
	padding-top: 25px;
    -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;
}

section h2 br {
	display: none;
}

section h2:hover {
	cursor: pointer;
}

section .navtext {
	margin-left: 130px;
	margin-right: 500px;
	padding-bottom: 110px;
	padding-top: 20px;
	font-size: 20px;
	line-height: 32px;
	display: none;
}

section .navtext a {
	font-family: 'Gotham';
}

section.act {
	height: auto;
}

section.act h2 {
	font-size: 80px;
	line-height: 78px;
	color: rgba(255,255,255,1);
	padding-left: 10%;
	padding-top: 120px;
}

section.act h2 br {
	display:block;
}

section p , section a {
	
}

section a {
	background:url("img/arrow_home.png");
	background-repeat: no-repeat;
	background-position:bottom right;
	padding-right: 30px;
}




/* content */
.container {
	max-width: 1440px;
	margin:0 auto;
	position: relative;
}

/* home */
.button_showreel {
	background-image: url("img/play_btn_pas_home.svg");
	background-size: 45px auto;
	background-repeat: no-repeat;
	width: 62px;
	height: 30px;
	margin:30px 0 20px 11%;
}

.button_showreel:hover {
	background-image: url("img/play_btn_act_home.svg");
	cursor:pointer;
}


/* team */
.container article {
	position: relative;
}

.bg_dark_team {
	background-image:url(img/BG_Vitronic_Dark.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	max-width: 1200px;
	margin: 0px 120px 0px 120px;
	padding-top: 60px;
}

.bg_dark_team article {
	max-width: 80%;
	margin:0 auto;
}

.team_container {
	width: 31.25%;
	height: auto;
	float:left;
	margin:1.041666%;
	padding-bottom: 10px;
	text-transform: uppercase;
	letter-spacing:2px;
	line-height: 20px;
	
}

.team {
	position: relative;
	width: 100%;
	height: auto;
	margin:0px;
}

.team:hover {
	cursor: pointer;
}

.team img {
	width: 100%;
	height: auto;
}

.hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: contain;
}

.team_container p {
	font-family: 'Gotham';
	padding-bottom: 20px;
	font-size: 12px;
}

.team_container a {
	letter-spacing: normal;
	text-transform:none;
	font-size: 14px;
    font-family: 'Gotham Light';
}

.team_container h3 {
	font-size: 12px;
	margin-top: 30px;
	margin-bottom: 5px;
}

.team_text {
	min-height: 130px;
}

/* equipment */
.bg_dark_equipment {
	background-image:url(img/BG_Green_Dark.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	max-width: 1200px;
	margin: 0px 120px 0px 120px;
	padding-top: 60px;
}

.bg_dark_equipment article {
	max-width: 84%;
	margin:0 auto;
}


.container article.equip {
	max-width: 68.0555%;
	margin:0 auto;
}

.equipment_container {
	width: 43.333%;
	height: auto;
	float:left;
	margin:3.333%;
	padding-bottom: 10px;
	line-height: 20px;
}

.equipment {
	position: relative;
	width: 100%;
	height: auto;
	margin:0px;
}

.equipment img {
	width: 100%;
	height: auto;
}

.equipment img.img_animation {
	float: left;
	position: absolute;
	top:0;
	left:0;
	opacity: 1;
}
/*
.equipment img.img_animation:hover {
	opacity: 1;
}
*/

.equipment_container p {
	font-size: 18px;
	line-height: 26px;
	
	padding-bottom: 20px;
}

.equipment_container h3 {
	font-size: 26px;
	line-height: 26px;
	margin-top: 30px;
	margin-bottom: 5px;
}


/* showreel */
.showreel_container {
	margin-top: 10px;
}

.showreel_container h3:hover {
	cursor: pointer;
	text-decoration: underline;
}

.showreel_container h3 {
	display: inline-block;
	font-size: 26px;
	line-height: 26px;
	background-image: url("img/play_btn_pas.png");
	background-size: 31px 23px;
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-right: 40px;
}

.showreel_container h3:hover, .showreel_container h3.act {
	background-image: url("img/play_btn_act.png");
}


.showreel_container p {
	font-size: 18px;
	line-height: 26px;
	
	padding-bottom: 26px;
	width: 100%;
}




.video_box iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_box {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 20px;
	display: none;
}

.video_box.act {
	display: block;
}

.bg_dark_showreel {
	background-image:url(img/BG_Red_Dark.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	max-width: 1200px;
	margin: 0px 120px 0px 120px;
	padding-top: 60px;
}

.bg_dark_showreel article {
	max-width: 80%;
	margin:0 auto;
}



/* datenschutz */

.bg_dark_text {
	background-image:url(img/BG_Vitronic_Dark.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	max-width: 1200px;
	margin: 0px 120px 0px 120px;
	padding-top: 60px;
}

.bg_dark_text article {
	max-width: 80%;
	margin:0 auto;
}

article.datenschutz p {
	padding-bottom: 26px;
}


/* footer */
footer {
	width:auto;
	max-width:1024px;
	margin:0 auto;
}

.nav_footer {
	display: none;
}




@media only screen and (max-width:1200px) {

	section {
		min-height: 80px;
		background-position: center left;
	}
	section .navtext {
		margin-left: 10%;
		margin-right: 10%;
		padding-bottom: 40px;
		padding-top: 20px;
		line-height: 32px;
	}

	section h2 br {
		display: block;
	}

	section h2 {
		font-size: 28px;
		padding-left: 10%;
		margin-right: 10%;
	}

	section.act h2 {
		font-size: 48px;
		line-height: 50px;
		/*margin-left: 10%;*/
		margin-right: 10%;
		padding-top: 50px;
	}

	.team_container {
		width: 48%;
		height: auto;
		float:left;
		margin:1%;
		padding-bottom: 10px;
	}

	.button_showreel {
		margin:30px 0 20px 10%;
	}


}

@media only screen and (max-width:1000px) {

	.container .logo {
		top:125px;
		left:-50px;
	}

	.container .socialmedia {
		right:-60px;
	}

	.container .imprint {
		left:-100px;
	}

	nav {
		width: 78%;
		padding:0;
		margin: 0 auto;
		padding-top: 60px;
	}

	.container article {
		max-width: 79%;
		width: 100%;
		margin:0 auto;
		margin-top: 40px;
	}

	.showreel_container p {
		width: 100%;
	}

	.bg_dark_equipment {
		width: 78%;
		margin: 0px auto;
		padding-top: 60px;
	}

	.bg_dark_equipment article {
		width: 84%;
		margin:0 auto;
	}

	.bg_dark_team {
		width: 78%;
		margin: 0px auto;
		padding-top: 60px;
	}

	.bg_dark_team article {
		width: 84%;
		margin:0 auto;
	}

	.bg_dark_showreel {
		width: 78%;
		margin: 0px auto;
		padding-top: 30px;
	}

	.bg_dark_showreel article {
		width: 84%;
		margin:0 auto;
	}

	.container article, .container article.equip {
		max-width: 80%;
		margin:0 10% 0 10%;
		position: relative;
		padding-top: 20px;
		width:100%;
	}

	.equipment_container {
		width: 100%;
		height: auto;
		float:none;
		margin:0 0 10px 0;
		padding-bottom: 10px;
	}

	.logo_clients {
		max-width: 100%;
		padding: 30px 0 60px 0;
	}

	.logo_clients img {
		height: 50px;
		width: auto;
		margin-right: 35px;
		float: left;
		opacity: 0.6;
	}
	.logo_clients img:hover {
		opacity: 1;
	}
	.clients_text {
		padding: 60px 0 0 0;
	}
	

}


@media only screen and (max-width:800px) {

	.nav_mobile {
		display: block;
	}

	.burger {
		position: absolute;
		right:2%;
		display: block;
		width:48px;
		height:37px;
		background-image: url("img/burger.png");
		background-repeat: no-repeat;
		z-index: 1000;
	}
	
	.mobile {
		display: none;
	}


	.container .logo {
		width: 30%;
		height: 50px;
		position: absolute;
		top:20px;
		left:2%;
		transform: rotate(0deg);
	}
	
	header {
		position: relative;
		padding:2%;
		text-align: left;
		padding-top: 20px;
	}
	
	.nav_mobile {
		margin-top: 80px;
	}
	
	.nav_mobile a {
		font-size: 24px;
		line-height: 26px;
		font-family: 'Gotham';
	}
	
	.nav_mobile li {
		margin-bottom: 20px;
	}

	.container .contact {
		margin-top: 20px;
		margin-bottom: 10px;
		position: relative;
		right:auto;
		left:auto;
		top:0;
	}

	.container .socialmedia {
		margin-bottom: 10px;
		position: relative;
		text-align: left;
		left:0;
		top:auto;
		transform: rotate(0deg);
	}

	.container .imprint {
		position: relative;
		text-align: left;
		left:0;
		top:auto;
		transform: rotate(0deg);
		margin-bottom: 50px;
	}
	
	.team_container {
		width: 100%;
		height: auto;
		float:none;
		margin:0 0 10px 0;
		padding-bottom: 10px;
	}

	.container {
		position: relative;
		margin:0;
		padding:0;
	}
	
	.container article, .container article.equip {
		max-width: 96%;
		margin:0 2% 0 2%;
		position: relative;
		padding-top: 80px;
		width:100%;
	}

	.equipment_container {
		width: 100%;
		height: auto;
		float:none;
		margin:0 0 10px 0;
		padding-bottom: 10px;
	}

	.bg_dark_equipment {
		width: 100%;
		margin: 30px auto;
		padding-top: 30px;
	}

	.bg_dark_equipment article {
		padding-top:0;
		width: 96%;
	}

	.bg_dark_team {
		width: 100%;
		margin: 30px auto;
		padding-top: 30px;
	}

	.bg_dark_team article {
		padding-top:0;
		width: 96%;
	}

	.bg_dark_showreel {
		width: 100%;
		margin: 30px auto;
		padding-top: 30px;
	}

	.bg_dark_showreel article {
		padding-top:0;
		width: 96%;
	}

	.logo_clients {
		text-align: center;
	}
	.logo_clients img {
		margin-left: 17px;
		margin-right: 17px;
		float: none;
	}
	
		
	nav {
		width: 96%;
		padding:0;
		margin: 20px auto 0 auto;
		padding-top: 60px;
	}

	nav.home {
		display: block;
		width: 96%;
		margin: 0px 2% 0px 2%;
	}
	
	nav.home section {
		padding-bottom: 20px;
	}

	.nav_footer {
		padding: 2%;
		display: block;
	}

	.nav_footer .contact, .nav_footer .socialmedia, .nav_footer .contact, .nav_footer .imprint, .nav_footer .contact a, .nav_footer .socialmedia a, .nav_footer .imprint a {
		color: #9B9B9B;
	}
	
	section {
		height:auto;
	}

	section h2 {
		font-size: 26px;
		line-height:normal;
	}
	
	section.act h2 {
		font-size: 26px;
		line-height:normal;
	}
	section {
		min-height: auto;
		padding-bottom: 20px;
	}
	
	section .navtext {
		font-size: 18px;
		line-height:22px;
	}

}




.clear {
	clear:both;
}


/* iphone */
html {
	-webkit-text-size-adjust: none;
	/*-webkit-font-smoothing: antialiased;*/
}