/*
Theme Name: Toyota Magazin
Theme URI: http://magazin.toyota.at
Description: Toyota Magazin
Version: 1.0
Author: vincenz + Websites created with passion.
Author URI: http://www.vincenz.at
Text Domain: toyotamag
*/

/* ::START:: font */
@font-face {
    font-family: "ToyotaDispBold";
    src: url("fonts/toyotadisplay_bd.eot?#iefix") format("embedded-opentype"), url("fonts/toyotadisplay_bd.woff") format("woff"), url("fonts/toyotadisplay_bd.ttf") format("truetype"), url("fonts/toyotadisplay_bd.svg") format("svg");
}
@font-face {
    font-family: "ToyotaDisp";
    src: url("fonts/toyotadisplay_rg.eot?#iefix") format("embedded-opentype"), url("fonts/toyotadisplay_rg.woff") format("woff"), url("fonts/toyotadisplay_rg.ttf") format("truetype"), url("fonts/toyotadisplay_rg.svg") format("svg");
}
@font-face {
    font-family: "ToyotaTextBold";
    src: url("fonts/toyotatext_bd.eot?#iefix") format("embedded-opentype"), url("fonts/toyotatext_bd.woff") format("woff"), url("fonts/toyotatext_bd.ttf") format("truetype"), url("fonts/toyotatext_bd.svg") format("svg");
}
@font-face {
    font-family: "ToyotaText";
    src: url("fonts/toyotatext_rg.eot?#iefix") format("embedded-opentype"), url("fonts/toyotatext_rg.woff") format("woff"), url("fonts/toyotatext_rg.ttf") format("truetype"), url("fonts/toyotatext_rg.svg") format("svg");
}

/* ::END:: font */
/* 
	FARBEN
	black => #000000
	white => #ffffff
*/	

html { font-family:ToyotaText,Arial,sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased; }
body{ padding:0; margin:0; color:#000000; background:#fff; font-size:1em;}
/* ::START:: normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; vertical-align: baseline; }
time {display: inline; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden],template {display: none;}
a {background-color: transparent;}
a:active,a:hover {outline: 0;}
abbr[title] {border-bottom: 1px dotted;}
mark {background: #ff0;color: #000;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img{border:0; vertical-align:bottom; }
svg:not(:root) {overflow: hidden;}
figure {margin: 1em 40px;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code,kbd,pre,samp {font-family: monospace, monospace;font-size: 1em;}
button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0; }
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer; }
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
ut {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0;padding: 0;}
b, strong, em { font-family:ToyotaTextBold, Arial, sans-serif; font-weight:normal; }
textarea {overflow: auto;}
tgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td,th {padding: 0;}
:focus { outline:none; }
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  -webkit-focus-ring-color:  rgba(0, 0, 0, 0); }
/* ::END:: normalize */

/* ::START:: tag */
html, body { height:100%; }
body { overflow-y: scroll; background:#ffffff; }
img{ max-width:100%; height:auto; }
time{ display:block;}
h1,h2,h3,h4,h5,h6{ font-size:1.em; font-family:ToyotaTextBold, Arial, sans-serif; font-weight:normal; }
main ul{ /*padding-left:0; /*list-style:none;*/ }
main li{ /*text-indent:-16px; padding-left:15px;*/ }
/*main li:before{ content:"— "}*/
a{ text-decoration:underline; color:#000;}
a:hover{ text-decoration:none; }
figure a {  text-decoration:none;  }
figure a:hover {  text-decoration:underline;  }
body.screenDark a{ color:#fff;}
figure{ margin:0 0 10px 0;}
figure a { display:block; }
address { font-style:normal; }
/* ::END:: tag */

/* ::START:: CLASS */
.uppercase{ text-transform:uppercase;  }
.underline{ text-decoration:underline; }

#wrapper { position:relative; height:100%; width:100%; margin:0 auto;  }
#content { height:100%; }
header { width:90%; margin:0 auto; padding:1px 0; }
#logo { height:auto; width:40%; min-width:280px; max-width:400px; margin:7px 0;}
#hero { border:solid #4D4F53; border-width:1px 0; height:70%; background-position:center center; background-size:cover; position:relative; text-align:center; }
#hero .sliderCell { background-position:center center; background-size:cover; position:relative; text-align:center; }
#hero_empty { border-top:1px solid #4D4F53;height:0; overflow:hidden; }
@media screen and (orientation:portrait) {
	#hero { height:45%; }	
}

#hero .herotext { font-family:ToyotaDisp, Arial, sans-serif; position:absolute; margin:1.5em 5%; font-size:2.5em; line-height:1;  }
#hero .herotext strong, #hero .herotext em, #hero .herotext b { font-family:ToyotaDispBold, Arial, sans-serif; font-weight:normal; }
#hero .herotext p { margin:0; }
#hero .herotext.center { text-align:center; left:0; right:0; top:50%; margin-top:-2em; }
#hero .herotext.topleft { text-align:left; left:0; top:0; }
#hero .herotext.topright { text-align:right; right:0; top:0; }
#hero .herotext.bottomleft { text-align:left; left:0; bottom:0; }
#hero .herotext.bottomright { text-align:right; right:0; bottom:0; }
#hero .herotext.bottomcenter { text-align:center; left:0; right:0; bottom:0; }

.white { color:#ffffff; }
.gray { color:#4D4F53; }
.blue { color:#009FE3; }
.black { color:#000000; }

.big { font-size:1.5em; }
.bigger { font-size:2em; }

img.aligncenter {
	margin:0 auto;
	display:block;
}

#tomain { display:inline-block; background:rgba(0,0,0,0.6); position:absolute; bottom:0; left:50%; margin-left:-40px; transition:all 0.5s; /*border-radius:5px 5px 0 0;*/ }
#tomain img { transform:rotate(90deg); margin:0 40px; width:25px; height:auto; -webkit-transform:rotate(90deg); }

#totop { display:block; background:#4D4F53; margin:5.5em 0 3.5em 0; transition:all 0.5s; /*border-radius:5px 5px 0 0;*/ text-align:center; padding:0.2em; color:#fff; text-decoration:none; line-height:2.0em; font-weight:bold; text-transform:uppercase; font-size:0.8em; }
#totop img { transform:rotate(180deg); margin:0 10px; width:20px; height:auto; -webkit-transform:rotate(180deg); }

/*#tomain:hover { background:rgba(100,100,100,0.6); }*/

#main { max-width:1600px; width:90%; margin:0 auto; padding:1.5em 0 1.5em 0; font-size:20px; line-height:1.35; color:#4d4f53;  }
#main p, #main ul, #main ol, #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { margin:1em 20%;  hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto;}
blockquote { float:left; width:40%; font-size:1.3em; /*color:#009FE3;*/ position:relative; margin:1em 1em 0.75em 0em;  hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; text-transform:uppercase; }
blockquote.quoteright { float:right;  margin:1em 0em 0.75em 1em; }
#main blockquote p { margin:0; }

#main p.highlight { font-size:1.6em; /*color:#009FE3;*/ text-transform:uppercase; } /* 1.3 */

footer { padding-top:50px; }
.wp-caption { max-width:100%; min-width:100%; }
.wp-caption img, .pic1row img { width:100%; }
#main p.wp-caption-text { color:#009FE3; margin:0.25em 0; }

#main p.pic3row, #main p.pic1row  { margin:1em 0; }
p.pic3row > * { width:32%; height:auto; display:inline-block; position:relative; }
p.pic3row > * img { width:100%; height:auto; }
p.pic3row > *:nth-child(2) { margin:0 2%; }
p.pic3row > a::after { 
	content:'';
	display:inline-block;
	background:rgba(0,0,0,0.5) url(img/search_white.svg) center center no-repeat;
	background-size:60% 60%;
	width:50px;
	height:50px;
	position:absolute;
	right:0;
	bottom:0;
	border-radius:5px 0 0 0;
}
p.pic3row > a:hover::after { 
	background-image:url(img/search_white.svg);
	background-size:75% 75%;
}
.postpreview {
	float:left;
	width:32%;	
	position:relative;
	/*padding-bottom:1.5em;*/
}

/*
.postpreview:nth-child( 3n + 2 ) {
	margin:0 2%;
}
.postpreview:nth-child( 3n + 1 ) {
	clear:left;
}
*/
.gridrow { 
	clear:left; 
}
.rowgrid1 .postpreview:nth-child( 3n + 2 ),
.rowgrid2 .postpreview:nth-child( 3n + 2 ),
.rowgrid3 .postpreview:nth-child( 3n + 2 ) {
	margin:0 0 0 2%;
}
.recommended .postpreview:nth-child( 3n + 2 ), 
.rowgrid4 .postpreview:nth-child( 3n + 2 ) {
	margin:0 2%;
}
.rowgrid10 .postpreview:nth-child( 2 ),
.rowgrid9 .postpreview:nth-child( 3 ),
.rowgrid7 .postpreview:nth-child( n + 2 ),
.rowgrid5 .postpreview:nth-child( n + 2 ) {
	margin:0 0 0 2%;
}
.rowgrid8 .postpreview:nth-child( 2 ) {
	margin:0 2%;
}
.rowgrid8 .postpreview:nth-child( n + 4 ) {
	margin:0 0 0 2%;
}
.rowgrid6, .rowgrid9, .rowgrid10 { 
	position:relative; 
}
.rowgrid6 .card5, .rowgrid9 .card4, .rowgrid10 .card4  { 
	position:absolute; 
	top:0;
	right:0;
}
.rowgrid6 .postpreview:nth-child(2) {
	clear:left;
}
.rowgrid9 .postpreview:nth-child(2) {
	clear:left;
}
.recommended .postpreview {
	height:0px;
	width:32%;	
	padding-top:24%;	
}
 .postpreview.card1 {
	height:0px;
	width:32%;	
	padding-top:30%;
}
.postpreview.card2 {
	height:0px;
	width:49%;	
	padding-top:30%;
}
.postpreview.card3 {
	height:0px;
	width:66%;	
	padding-top:30%;
}
.postpreview.card4 {
	height:0px;
	width:32%;	
	padding-top:60%;
}
.postpreview.card5 {
	height:0px;
	width:49%;	
	padding-top:60%;
}
.mover { 
	display:table;
	width:100%;
	height:100%;
	border:none;
	border-collapse:collapse;
}
.mover > div {
	display:table-row;
}
.mover > div > div {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	transition:background 0.6s;
}
.postpreview a {
	display:block;	
	text-decoration:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:1.5em;
	background-size:cover;
	background-position:center center;
}
/*
.postpreview img {
	max-width:100%; 
	height:auto;
	margin-bottom:0.5em;	
}
*/
.postpreview .category {
	transition:background 0.6s;	
}
#main .postpreview .headline {
	color:#fff;
	padding:40px 20px 0 20px;
	opacity:0;
	transition:opacity 0.6s;
}

/* postpreview over */

.herotext.sport .category {
	background:#DA001B; color:#fff;
}
.herotext.hybrid .category {
	background:#009FE3; color:#fff;
}
.postpreview:hover .mover > div > div {
	background:rgba(0,0,0,0.5);
}

.herotext .arrow { top:0px; opacity:0; transition:opacity 0.6s; }
.owl-item:hover .herotext .arrow { opacity:1; }
.arrow { position:relative; top:-30px; }
.arrow b { width:50px; height:5px; background:#fff; display:inline-block; }
.arrow i { width:0; height:0; border-width:9px 0 9px 10px; border-style:solid; border-color:transparent; border-left-color:#fff; display:inline-block; position:relative; top:7px; }
.sport + div .arrow b, .sport .arrow b { background:#DA001B; }
.sport + div .arrow i, .sport .arrow i { border-left-color:#DA001B; }
.hybrid + div .arrow b, .hybrid .arrow b { background:#009FE3; }
.hybrid + div .arrow i, .hybrid .arrow i { border-left-color:#009FE3; }

/* over end */
#main .postpreview p, #main .postpreview h3 {
	margin:0;	
}
#main p a {
	color:#4D4F53;
	text-decoration:none;
	font-weight:bold;
	font-size:1.2em;		
}

#main p a.external::before {
	display:inline-block;
	background:url(img/arrow_gray.svg) center center no-repeat;
	width:1em; 
	height:1em;
	background-size:auto 1em;
	position:relative;
	top:0.1em;
	content:'';
}

.postpreview .category,
.herotext .category  {
	color:#000;
	position:absolute; left:0; top:3%; 
	background:#fff;
	font-size:0.8em;
	padding:0.3em 0.3em 0.2em; 
	line-height:1;
	min-width:40%;
	text-transform:uppercase;
	font-family:ToyotaTextBold, Arial, sans-serif;	
}
.herotext .category {
	font-size:0.5em;
	margin-bottom:1em;
	position:relative;
	display:inline-block;
	min-width:inherit;
	padding:0.3em 0.8em 0.2em;
	opacity:1;
	transition:opacity 0.6s;
}

/* Slider special */
.owl-controls { }
.owl-dots { position:absolute; z-index:100; left:0; right:0; bottom:0; text-align:center; }
.owl-dot { width:5px; height:5px; background:#fff; border-radius:50%; display:inline-block; margin:0 3px; border:3px solid #fff; transition:background 0.5s; }
.owl-dot.active { background:transparent; }
.owl-prev, .owl-next {background:rgba(0,0,0,0.6); position:absolute; z-index:100; top:50%; margin-top:-40px; height:80px; width:32px; transition:all 0.5s; }
.owl-prev { left:0; }
.owl-next { right:0; }
.owl-prev img, .owl-next img { margin:22px 0px; width:24px; height:auto; }
.owl-prev img { transform:rotate(180deg);  -webkit-transform:rotate(180deg); }
.owl-next img { transform:rotate(0deg); -webkit-transform:rotate(0deg); }


footer { 
	clear:both;
	padding-top:2em;
}

footer section {
	background:#caccc8;	
	padding:1px 0;
}

footer section > div { max-width:1600px; width:90%; margin:0 auto; padding:1.5em 0 1.5em 0; line-height:1.35;  }
footer section > div::after { 
	content:''; display:block; clear:both;
}
footer .toyotafrey {
	font-family:ToyotaDispBold, Arial, sans-serif;
	font-size:1.3em; 
	float:left;
}
footer .right { 
	float:right;
}
footer a {
	text-decoration:none;
}
footer .sep {
	margin:0 0.5em;	
}




/* Screens ab 1024px > Desktop only*/
@media screen and (min-width:1024px) { 
	#main .postpreview:hover .headline {
		opacity:1;
	}	
	/*.owl-item:hover .herotext .category {
		opacity:1;
	}*/	

	#main .postpreview:hover .sport {
		background:#DA001B; color:#fff;
	}
	#main .postpreview:hover .hybrid {
		background:#009FE3; color:#fff;
	}	
}




@media screen and (max-width:1280px) {
	#main .postpreview .headline { font-size:0.75em; }
}




/* Screens bis 1024px > Smartphone, Tablet, kleine Notebooks und Desktop*/
@media screen and (max-width:1024px) { 
	#main { font-size:16px; }
	#tomain { margin-left:-20px; }
	#tomain img { margin:0 20px; width:15px;}
	#hero .herotext { font-size:1.75em; }	/* 1.35 */
	.owl-prev, .owl-next { margin-top:-20px; height:40px; width:22px; }
	.owl-prev img, .owl-next img { width:16px; margin:9px 0px; }
	#totop { line-height:2.5em; }
	footer { font-size:0.8em; }
	
	.arrow { display:none; }
	#main .postpreview .headline { opacity:1; background:rgba(0,0,0,0.5); font-size:0.5em; padding:5px 10px; }
	.mover > div > div { background:transparent !important; vertical-align:bottom; }
	.owl-item .herotext .category {
		opacity:1;
	}
	
	.headline br { display:none; }


	#main .postpreview p .big {
		font-size:2em;	
	}
	#main .postpreview p, #main .postpreview h3 {
		display:inline;
	}
	
}




/* Screen bis 900px > Tablet Portrait, Phablets */
@media screen and (max-width:900px) {
	.postpreview, .recommended .postpreview {
		width:48.5%;	
	}
	.recommended .postpreview:nth-child(2) {
		margin: 0 0 0 2%;
	}
	/*.postpreview:nth-child( 3n + 2 ) {
		margin:0;
	}
	
	.postpreview:nth-child( 3n + 1 ) {
		clear:none;
	}	




	.postpreview:nth-child( 2n + 1 ) {
		margin:0 3% 0 0;
		clear:left;
	} */
	
	.recommended article:nth-child(3) { display:none; }
}




/* kleiner Tablet hoch */
@media screen and (max-width:767px) {
	#main p, #main ul, #main ol, #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 { margin:1em 0px; }
	blockquote { float:none !important; width:auto; margin:1em 0px !important; }
	p.pic3row > * { width:100%; }
	p.pic3row > *:nth-child(2) { margin:1em 0; }
	p.pic3row > a::after { display:none; }
	p.pic3row > a { pointer-events:none; }
	#hero .herotext { font-size:0.85em; } /* 0.75 */	
	#tomain { display:none; } /* do not show down arrow on small screen */
	.owl-prev, .owl-next { display:none; } /* do not show down arrow on small screen */
	.owl-dot { width:6px; height:6px; }
	
	footer .right, footer .toyotafrey {
		float:none;		
	}
	footer .right{
		margin-top:1em;		
	}




	footer .sep {
		display:block;
		height:0;
		overflow:hidden;
		color:transparent;
	}
	
	.postpreview.card1 {
		padding-top:36%;
	}




	.postpreview.card2 {
		padding-top:36%;
	}




	.postpreview.card3 {
		padding-top:36%;
	}




	.postpreview.card4 {
		padding-top:72%;
	}




	.postpreview.card5 {
		padding-top:72%;
	}


	#main p.highlight {
		font-size:1.2em;	
	}
	
}




/* screen bis 479px, smartphone portrait */
@media screen and (max-width:479px) {
	
	.herotext .category {
		font-size:1em;
	}
	
	.postpreview {
		width:100% !important;	
		margin:0 !important;
		padding-top:60% !important;
		float:none;
		padding-bottom:2.5em;
	}
	.recommended article.postpreview {
		width:48.5%;	
		margin:0;
		float:left;
		font-size:0.7em;		
	} 
	.recommended .postpreview:nth-child( 2n + 1 ) {
		margin:0 3% 0 0;
		clear:left;
	}
}




/*#main h2 { margin-bottom:0; }
#main h2 + * { margin-top:0; }*/




#main h2 { font-size:1.6em; }
#main ol li { 
	margin: 1em 0;
	padding-left:5px;
}
#main ol {
	padding-left:30px;
}




/* animation */
/*
#main {
	overflow:hidden;
}
.animated { 
	transform:scale(0.5,0.5); -webkit-transform:scale(0.5,0.5); 
	opacity:0; 
	transition:opacity 1s, transform 1s; 
	-webkit-transition:opacity 1s, transform 1s;
}
.animated.done { 
	transform:scale(1,1); 
	-webkit-transform:scale(1,1); 
	opacity:1; 
}
 blockquote { 
	transform:scale(0.85,0.85) translate(-100px,0); -webkit-transform:scale(0.85,0.85) translate(-100px,0); 
	opacity:0; 
	transition:opacity 1s, transform 2s; 
	-webkit-transition:opacity 1s, transform 2s;
}
blockquote.done { 
	transform:scale(1,1)  translate(-0px,0); 
	-webkit-transform:scale(1,1)  translate(0px,0); 
	opacity:1; 
}




blockquote.quoteright, #main p.wp-caption-text {
	transform:scale(1,1) translate(100px,0); -webkit-transform:scale(1,1) translate(100px,0); 
	opacity:0; 
	transition:opacity 1s, transform 2s; 
	-webkit-transition:opacity 1s, transform 2s;	
}
 #main p.highlight, #main h2 {
	transform:scale(1,1) translate(100px,0); -webkit-transform:scale(1,1) translate(100px,0);
	opacity:0; 
	transition:opacity 1s, transform 2s; 
	-webkit-transition:opacity 1s, transform 2s;	
}
blockquote.quoteright.done, #main p.wp-caption-text.done, #main p.highlight.done, #main h2.done { 
	transform:scale(1,1)  translate(0px,0); 
	-webkit-transform:scale(1,1)  translate(0px,0); 
	opacity:1; 
}




.single-post #main > p img {
	transform:scale(0.85,0.85); -webkit-transform:scale(0.85,0.85); 
	opacity:0; 
	transition:opacity 1s, transform 1s; 
	-webkit-transition:opacity 1s, transform 1s;
}
.single-post #main > p img.done { 
	transform:scale(1,1); 
	-webkit-transform:scale(1,1); 
	opacity:1; 
}
*/