/* -- css Styles für www.pgtrade.ch -- */


/* -- FONT -- */

@font-face{
	font-family: 'TradeGothic_Bold_Cn_20';
	src: url('../webfonts/675334/257c802f-349c-4b4d-aefa-546d5de15ec6.eot');
	src: url('../webfonts/675334/257c802f-349c-4b4d-aefa-546d5de15ec6.eot?#iefix') format('embedded-opentype'),
		 url('../webfonts/675334/1ba28851-f34b-4cb8-bf58-6a4b160ba249.woff2') format('woff2'),
		 url('../webfonts/675334/5fdc935e-9e30-442a-bbe9-8d887b858471.woff') format('woff'),
		 url('../webfonts/675334/616c4c87-a077-43f4-a9f4-f01267c13818.ttf') format('truetype'),
		 url('../webfonts/675334/c901ad5f-a842-4549-a1f4-583a97f7e169.svg#c901ad5f-a842-4549-a1f4-583a97f7e169') format('svg');		
	font-weight: normal;
	font-style:  normal;
}

@font-face{
	font-family: 'TradeGothic_Roman';
	src: url('../webfonts/675364/413d9688-00d4-47c4-bb55-656a0cd396e9.eot');
	src: url('../webfonts/675364/413d9688-00d4-47c4-bb55-656a0cd396e9.eot?#iefix') format('embedded-opentype'),
		 url('../webfonts/675364/7b555e94-d57a-415e-a36e-1b0c5d3b90d2.woff2') format('woff2'),
		 url('../webfonts/675364/c4aef0d4-bfcf-4790-acf5-909881f411e8.woff') format('woff'),
		 url('../webfonts/675364/e741f29c-bc18-4343-bff3-db2465a0be3e.ttf') format('truetype'),
		 url('../webfonts/675364/853e2a9b-4057-42a5-ad7e-0762cda0b13c.svg#853e2a9b-4057-42a5-ad7e-0762cda0b13c') format('svg');
	font-weight: normal;
	font-style:  normal;
}



/* -- ALLGEMEIN -- */

*, *:after, *:before { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

/* WICHTIG nullen der Tags */
* { margin: 0; padding: 0; }

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

img { 
	border: 0; 
}

html, body { 
	padding: 0; 
	margin: 0;
}

body { 
	background-color: #ffffff; 
	font-family: 'TradeGothic_Roman', sans-serif, Helvetica, Arial; 
	color: #000000; 
	font-size: 24px; 
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { 
	content: " "; 
	display: table; 
}

.clearfix:after { 
	clear: both; 
}

.fl { 
	float: left; 
}

.fr { 
	float: right; 
}

.clearer { 
	clear: both; 
	font-size: 0px; 
	line-height: 0px; 
	height: 0px; 
}

a { 
	color:#000000; 
	text-decoration: none; 
}

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

h1,.h1 { 
	font-family: 'TradeGothic_Bold_Cn_20', Helvetica, Arial, sans-serif; 
	font-size: 80px; 
	line-height: 80px; 
	color: #ffffff; 
	text-transform: uppercase; 
	padding: 0; 
	margin: 0; 
}

h2,.h2 { 
	font-family: 'TradeGothic_Bold_Cn_20', Helvetica, Arial, sans-serif; 
	font-size: 60px; 
	line-height: 60px; 
	color: #000000; 
	text-transform: uppercase; 
	padding: 0; 
	margin: 0; 
}

h3,.h3 { 
	font-family: 'TradeGothic_Bold_Cn_20', Helvetica, Arial, sans-serif; 
	font-size: 40px; 
	line-height: 50px; 
	color: #000000;
	text-transform: uppercase; 
	padding: 0; 
	margin: 0; 
}

p { 
	font-family: 'TradeGothic_Roman', Helvetica, Arial, sans-serif; 
	font-size: 24px; 
	padding: 20px 0 0 0; 
	margin: 0; 
}

.typo_white { 
	color: #ffffff; 
}

.typo_white a { 
	color: #ffffff; 
}

.bg_000000 { 
	background-color: #000000; 
	color: #ffffff; 
}

.max_width_1000 { 
	max-width: 1000px; 
}

.max_width_1280 { 
	max-width: 1280px; 
}

.center { 
	text-align: center; 
}

/* --- UNDERLINE FROM LEFT --- */

.underline {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
  margin-top: -6px; 
}
.underline:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #ffffff;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline:hover:before, .underline:focus:before, .underline:active:before {
  right: 0;
}

.underline_black {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
  margin-top: -6px; 
}
.underline_black:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #000000;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.underline_black:hover:before, .underline_black:focus:before, .underline_black:active:before {
  right: 0;
}



/* --- STAGE -- */

.wrapper_stage {
	height: 100vh;
}

.stage { 
	position: relative; 
	width: 100%; 
	height: 100vh;
	margin: 0 auto; 
}

.logo_small, .logo_small:hover {
	z-index: 1000; 
	width: 120px; 
	height: 120px; 
	position: fixed;
	top: 30px;
	right: 50px;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	transition: all 1.5s ease;
}

.logo_small:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

#wrapper_logo_small {
	display:none;
}

.logo { 
	position: relative; 
	margin: 0 auto;
	width: 180px; 
	height: 180px; 
	z-index: 1000; 
	top: 50px;
	animation: logo 2.5s;
	-moz-animation: logo 2.5s; /* Firefox */
	-webkit-animation: logo 2.5s; /* Safari and Chrome */
	-o-animation: logo 2.5s; /* Opera */
	transition: width 0.5s, height 0.5s;
	-moz-transition: width 0.5s, height 0.5s, -moz-transform 0.5s; /* Firefox 4 */
	-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
	-o-transition: width 0.5s, height 0.5s, -o-transform 0.5s; /* Opera */
}

@keyframes logo
{
0%   { top:-180px;}
80%  { top:-180px;}
100% { top:50px;}
}

@-moz-keyframes logo /* Firefox */
{
0%   { top:-180px;}
80%  { top:-180px;}
100% { top:50px;}
}

@-webkit-keyframes logo /* Safari and Chrome */
{
0%   { top:-180px;}
80%  { top:-180px;}
100% { top:50px;}
}

@-o-keyframes logo /* Opera */
{
0%   { top:-180px;}
80%  { top:-180px;}
100% { top:50px;}
}

.wrapper_titel_leistungen { 
	position: absolute; 
	bottom: 0;
	height: 140px;
	width: 100%;
	margin: 0 auto; 
	background: #ffffff;
	animation: leistungen 3.5s;
	-moz-animation: leistungen 3.5s; /* Firefox */
	-webkit-animation: leistungen 3.5s; /* Safari and Chrome */
	-o-animation: leistungen 3.5s; /* Opera */
	transition: width 1.5s, height 1.5s;
	-moz-transition: width 1.5s, height 1.5s, -moz-transform 1.5s; /* Firefox 4 */
	-webkit-transition: width 1.5s, height 1.5s, -webkit-transform 1.5s; /* Safari and Chrome */
	-o-transition: width 1.5s, height 1.5s, -o-transform 1.5s; /* Opera */
}

@keyframes leistungen
{
0%   { bottom:-140px; opacity:0;}
95%  { bottom:-140px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-moz-keyframes leistungen /* Firefox */
{
0%   { bottom:-140px; opacity:0;}
95%  { bottom:-140px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-webkit-keyframes leistungen /* Safari and Chrome */
{
0%   { bottom:-140px; opacity:0;}
95%  { bottom:-140px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-o-keyframes leistungen /* Opera */
{
0%   { bottom:-140px; opacity:0;}
95%  { bottom:-140px; opacity:0;}
100% { bottom:0; opacity:1;}
}

.titel_leistungen { 
	position: relative; 
	margin: 0 auto;
	width: 960px;
	padding: 50px 0 0 0;
}

.titel_center { 
	margin: 0 auto;
	width: 960px;
}

.titel { 
	margin: 0 auto;
	position: absolute; 
	bottom: 30%; 
	color: #ffffff;
	animation: titel 1.5s;
	-moz-animation: titel 1.5s; /* Firefox */
	-webkit-animation: titel 1.5s; /* Safari and Chrome */
	-o-animation: titel 1.5s; /* Opera */
	width: 100%;
}

@keyframes titel
{
0% { opacity:0;}
50% { opacity:0;}
100% { opacity:1;}
}

@-moz-keyframes titel /* Firefox */
{
0% { opacity:0;}
50% { opacity:0;}
100% { opacity:1;}
}

@-webkit-keyframes titel /* Safari and Chrome */
{
0% { opacity:0;}
50% { opacity:0;}
100% { opacity:1;}
}

@-o-keyframes titel /* Opera */
{
0% { opacity:0;}
50% { opacity:0;}
100% { opacity:1;}
}

.js-bg-calc {
	width: 100%;
    height: 100vh;
    background-position: center;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
}

.stage_img { 
	background: url(../img/stage/stage_01.jpg) bottom no-repeat; 
	background-size: cover;
}

/* -- ZOOM BG IMG 

.outer {
    position: relative;
    overflow: hidden; 
}

.inner {
    transition-duration: 30s; 
}

.outer:hover .inner {
    transform: scale(1.1);
}
-- */


/* -- LEISTUNGEN -- */

.wrapper_leistungen { 
	background-color: #ffffff; 
	margin: 0 auto; 
	padding: 0 0 100px 0;
}

.content_box_first, .content_box { 
	width: 960px;
	margin: 0 auto; 
	padding: 70px 0 0 0;
}

.content_box_first { 
	padding: 40px 0 0 0;
}



/* -- ANGEBOTE -- */

.wrapper_angebote { 
	background-color: #000000; 
	margin: 0 auto; 
	padding: 100px 0;
}

.angebote { 
	width: 960px;
	margin: 0 auto; 
}

.parallel_import, .garantie { 
	width: 308px;
	padding: 70px 0 0 0;
	margin: 0 10px 0 0;
}

.garantie { 
	width: 632px;
	margin: 0 0 0 10px;
}

.btn_angebote {
	width: 440px; 
	border: #ffffff solid 6px; 
	padding: 10px 0; 
	margin: 0 auto; 
	margin-top: 70px; 
	text-align: center;
	
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.btn_angebote a {
	font-family: 'TradeGothic_Bold_Cn_20', Helvetica, Arial, sans-serif; 
	font-size: 40px; 
	line-height: 40px;
	color: #ffffff;
	text-transform: uppercase; 
}

.btn_angebote:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.btn_angebote:hover a, .btn_angebote:focus a, .btn_angebote:active a {
	color: #000000;
}

.btn_angebote:hover:before, .btn_angebote:focus:before, .btn_angebote:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}



/* -- ÜEBER UNS -- */

.ueber_uns_wrapper {
	width: 960px;
	margin: 0 auto; 
}

.ueber_uns { 
	position: relative;
	padding: 540px 0 0 0;
}

.ueber_uns_img { 
	position: relative;
	margin: 0 auto; 
	background: url(../img/ueber_uns/ueber_uns.jpg) center no-repeat; 
	background-size: cover;
	height: 800px; 
}



/* -- FAHRZEUGKONFIGURATOR -- */

.wrapper_fahrzeugkonfigurator { 
	background-color: #ffffff; 
	margin: 0 auto; 
	padding: 100px 0;
}

.fahrzeugkonfigurator { 
	width: 960px;
	margin: 0 auto; 
}

.info_konfigurator { 
	width: 960px;
	margin: 0 auto; 
	padding: 70px 0 0 0;
}

.marken_l, .marken_m, .marken_r { 
	width: 310px;
	margin: 0 15px 0 0;
	padding: 70px 0 0 0;
}

.marken_r { 
	margin: 0;
}

.marken_l p, .marken_m p, .marken_r p { 
	font-family: 'TradeGothic_Bold_Cn_20', Helvetica, Arial, sans-serif; 
	font-size: 40px; 
	line-height: 50px; 
	color: #000000;
	text-transform: uppercase; 
	padding: 10px 0; 
	margin: 0; 
	letter-spacing: normal;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease; 
	cursor: pointer
}

#a:hover {
  letter-spacing: 7px; 
}



/* -- FOOTER -- */

.wrapper_footer { 
	background-color: #000000; 
	padding: 70px 0;
}

.facebook { 
	margin: 0 auto; 
	width: 60px; 
	height: 60px; 
}

.footer { 
	width: 960px;
	margin: 0 auto; 
	padding: 50px 0 0 0;
}

.footer_mobile { 
	display: none;
}



/* -- MEDIA --- */

@media (max-width: 640px){
/* Style sheet iPhone */
html, body { 
	font-size: 18px; 
	line-height: 25px; 
}

h1,.h1 { 
	font-size: 34px; 
	line-height: 40px; 
}

h2,.h2 { 
	font-size: 34px; 
	line-height: 40px; 
}

h3,.h3 { 
	font-size: 25px; 
	line-height: 30px; 
}

p { 
	font-size: 18px; 
	padding: 10px 0 0 0; 
}

.stage { 
	width: 100%; 
}

.logo_small {
	display:none;
}

.logo { 
	width: 120px; 
	height: 120px; 
	top: 50px;
}

.logo img { 
	width: 120px; 
	height: 120px; 
}

.wrapper_titel_leistungen { 
	height: 70px;
	width: 100%;
	padding: 0 10px;
}

@keyframes leistungen
{
0%   { bottom:-70px; opacity:0;}
95%  { bottom:-70px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-moz-keyframes leistungen /* Firefox */
{
0%   { bottom:-70px; opacity:0;}
95%  { bottom:-70px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-webkit-keyframes leistungen /* Safari and Chrome */
{
0%   { bottom:-70px; opacity:0;}
95%  { bottom:-70px; opacity:0;}
100% { bottom:0; opacity:1;}
}

@-o-keyframes leistungen /* Opera */
{
0%   { bottom:-70px; opacity:0;}
95%  { bottom:-70px; opacity:0;}
100% { bottom:0; opacity:1;}
}

.titel_leistungen { 
	position: relative; 
	margin: 0 auto;
	width: 100%;
	padding: 25px 0 0 0;
}

.titel_center { 
	width: 100%;
}

.titel { 
	padding: 0 10px;
	bottom: 30%; 
	width: 100%;
}

.wrapper_leistungen { 
	padding: 0 10px 35px 10px;
}

.content_box_first, .content_box { 
	width: 100%;
	padding: 35px 0 0 0;
}

.content_box_first { 
	padding: 20px 0 0 0;
}

.wrapper_angebote { 
	padding: 50px 10px;
}

.angebote { 
	width: 100%;
}

.parallel_import, .garantie { 
	width: 100%;
	padding: 35px 0 0 0;
	margin: 0;
}

.garantie { 
	margin: 0;
}

.btn_angebote {
	width: 100%; 
	border: #ffffff solid 3px; 
	margin-top: 35px; 
}

.btn_angebote a {
	font-size: 25px; 
	line-height: 25px;
}

.ueber_uns_wrapper {
	width: 100%;
}

.ueber_uns { 
	padding: 400px 0 0 0;
}

.ueber_uns_img { 
	position: relative;
	margin: 0 auto; 
	background: url(../img/ueber_uns/ueber_uns.jpg) left no-repeat; 
	background-size: cover;
	height: 540px; 
}

.wrapper_fahrzeugkonfigurator { 
	padding: 35px 10px;
}

.fahrzeugkonfigurator { 
	width: 100%;
}

.info_konfigurator { 
	width: 100%;
	padding: 35px 0 0 0;
}

.marken_l, .marken_m, .marken_r { 
	width: 100%;
	margin: 0 15px 0 0;
	padding: 35px 0 0 0;
}

.marken_m, .marken_r { 
	padding: 0;
}

.marken_l p, .marken_m p, .marken_r p { 
	font-size: 34px; 
	line-height: 30px; 
}

.wrapper_footer { 
	padding: 35px 10px;
}

.facebook { 
	margin: 0 auto; 
	width: 40px; 
	height: 40px; 
}

.facebook img { 
	width: 40px; 
	height: 40px; 
}

.footer_mobile { 
	display: block;
	width: 100%;
	padding: 25px 0 0 0;
}

.footer { 
	display: none;
}

}
@media (min-width: 640px) and (max-width: 1023px){
/* Style sheet iPad */
.stage { 
	width: 100%; 
}

.wrapper_titel_leistungen { 
	width: 100%;
	padding: 0 10px;
}

.titel_leistungen { 
	width: 100%;
	padding: 50px 0 0 0;
}

.titel { 
	padding: 0 10px;
	bottom: 30%; 
	width: 100%;
}

.wrapper_leistungen { 
	padding: 0 10px 35px 10px;
}

.content_box_first, .content_box { 
	width: 100%;
	padding: 35px 0 0 0;
}

.content_box_first { 
	padding: 20px 0 0 0;
}

.wrapper_angebote { 
	padding: 50px 10px;
}

.angebote { 
	width: 100%;
}

.parallel_import, .garantie { 
	width: 100%;
	padding: 35px 0 0 0;
	margin: 0;
}

.garantie { 
	margin: 0;
}

.btn_angebote {
	width: 100%; 
	border: #ffffff solid 3px; 
	margin-top: 35px; 
}

.btn_angebote a {
	font-size: 25px; 
	line-height: 25px;
}

.ueber_uns_wrapper {
	width: 100%;
}

.wrapper_fahrzeugkonfigurator { 
	padding: 35px 10px;
}

.fahrzeugkonfigurator { 
	width: 100%;
}

.info_konfigurator { 
	width: 100%;
	padding: 35px 0 0 0;
}

.marken_l, .marken_m, .marken_r { 
	width: 100%;
	margin: 0 15px 0 0;
	padding: 35px 0 0 0;
}

.marken_m, .marken_r { 
	padding: 0;
}

.marken_l p, .marken_m p, .marken_r p { 
	font-size: 34px; 
	line-height: 30px; 
}

.wrapper_footer { 
	padding: 35px 10px;
}

.facebook { 
	margin: 0 auto; 
	width: 50px; 
	height: 50px; 
}

.facebook img { 
	width: 50px; 
	height: 50px; 
}

.footer { 
	width: 100%;
	padding: 25px 0 0 0;
}

}