/*
Theme Name: ECU Master Theme
Theme URI: http://www.plankton.tv/
Description: Brand new theme for ECU Master.
Author: Studio Animacji Plankton TV
Author URI: http://www.plankton.tv/
Version: 0.1.0
Tags: portfolio, clean, minimal
Text Domain: ecumaster
*/ 

@import "style_tables.css";
@import "style_fonts.css";
@import "style_distributors.css";

/* draw red debug line */
/* * {
	outline: 1px solid green;
  } */

/* 0.0. Reset   
----------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background:transparent; border:0; margin:0; padding:0; vertical-align:baseline }


/* 1.0 Global
---------------------------------------------------------------------- */
html, body { -webkit-tap-highlight-color:rgba(0,0,0,0) }
body { 
	color:#2e2e2e;
	font-family:'Open Sans',
	sans-serif; 
	background:#fff; 
	overflow-x:hidden 
}

.container { display:table }
.container > * { display:table-cell; vertical-align:middle }
.clearfix:after, .wrap:after, .gallery:after, .products:after, .dist-list:after { content:" "; visibility:hidden; display:block; height:0; clear:both }
a:link, a:visited, a:active, a:hover, a:focus { color:#2e2e2e; /*text-decoration:underline*/ }
a:hover, a:focus { text-decoration:none }

h1, h2 { line-height:1.5em; margin:0 5px 1em } 
h3, h4, h5 { line-height:1.5em; margin:0 5px 1em } 



h1 { text-align:center }

h1 { font-size:2.5rem }
h2, .label span { font-size:2rem;} 
h2 {font-size:2rem; background:#fcb900;} 
h3 { font-size:1.5rem }
h4 { font-size:1.2rem }
h5 { font-size:1.15rem }
#mission-statement {padding-top: 20px; padding-bottom: 15px; text-align: center; } 
#mission-statement h1{ font-size: 1.5rem; }



/* 2.0 Buttons and Icons
---------------------------------------------------------------------- */
 a.btn { display:block; text-align:left; margin:0px 0 0; padding:8px 0px; color:#2e2e2e; text-decoration:none;  /* background:#f9d20b; */
	-webkit-transition:color .2s, background .2s; transition:color .2s, background .2s }
a.btn:hover, a.btn:active, a.btn:focus { background:#333; color:#fff }

a[href$=".pdf"], a[href$=".exe"], a[href$=".doc"], a[href$=".docx"], a[href$=".zip"], a[href$=".rar"] {
	position:relative; padding:.3em 0 0 40px; min-height:36px; display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box
}
a[href$=".pdf"]:before, a[href$=".exe"]:before, a[href$=".doc"]:before, a[href$=".docx"]:before, a[href$=".zip"]:before, a[href$=".rar"]:before { 
	position:absolute; content:""; width:28px; height:36px; top:0; left:0; background:transparent url('img/icons.png') 0 0 no-repeat
}	
a[href$=".pdf"]:before { background-position:0px 0px }
a[href$=".exe"]:before { background-position:-29px 0px }
a[href$=".doc"]:before, a[href$=".docx"]:before { background-position:-58px 0px }
a[href$=".zip"]:before { background-position:-87px 0px }
a[href$=".rar"]:before { background-position:-116px 0px }


/* 3.0 Layout
---------------------------------------------------------------------- */
.wrap { position:relative; width:auto; margin:0 auto; padding:0 0px }
.inside { max-width:1050px; margin-left:auto; margin-right:auto }
.inside.text { max-width:650px }
.icon { background:transparent url(img/icons.svg) no-repeat 0 0; background-size:cover }
.triangle { display:none }

blockquote { padding:16px; background:#f0f0f0; margin-bottom:16px; border-bottom:1px solid #ccc }
p, ul, ol { margin:0 5px 16px; line-height:1.7em }
p:last-child, ul:last-child, ol:last-child { margin: 0 5px 0px}
img { width:100%; height:auto }

.primary-desktop { display:none }
.primary-mobile { width:90%; height:auto; display:block; margin:16px auto }

.products { position:relative; overflow:hidden }
.item, a.item { position:relative; color:#2e2e2e; display:block; text-decoration:none!important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }

/*.item img { width:80%; height:auto; display:block; margin:0 auto }*/

.thumbnail { position:relative }
.thumbnail:before { content:""; display:block; height:0; padding-top:80% }
.thumbnail img { position:absolute; top:50%; left:50%; max-height:80%; max-width:80%; margin:0; padding:0; width:auto; height:auto;
	-webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%) }

.label { position:absolute; left:0; top:0; right:0; bottom:0; cursor:pointer }
/* .label:before { position:absolute; content:""; left:0; top:0; right:0; bottom:0; background:rgba(249,210,11,.8); opacity:0 } */
/* .label:before, .label.popping span { -webkit-transition:opacity .2s, transform .2s; transition:opacity .2s, transform .2s } */ 
/* .label span { position:absolute; display:block; left:0; bottom:0; padding:16px; text-align:center; line-height:1em; font-weight:300; -webkit-backface-visibility:hidden; backface-visibility:hidden } */
/* .label:hover:before, .label:active:before { opacity:1 } remove the yellow overaly when hover over product on the main page */ 

.label span { 
	position:absolute; 
	display:block;
	left: 0; 
	right:0; /* Add this to span full width */ 
	bottom: 0; 
	padding: 8px 16px; 
	text-align: center; 
	line-height: 1em; 
	font-weight: 400; 
	color: #333; 
	opacity: 1 !important; /* Force visibility */ 
	font-size: 1em;
}

.more-products .label span { 
	position:absolute; 
	display:block;
	bottom: 0; 
	padding: 8px 16px; 
	text-align: center; 
	line-height: 1em; 
	font-weight: 400; 
	color: #333; 
	opacity: 1 !important; /* Force visibility */ 
	font-size:2rem;
}


.list-full { text-align:justify; -ms-text-justify:distribute-all-lines; text-justify:distribute-all-lines;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.list-full:after { content:""; width:100%; display:inline-block; font-size:0; line-height:0 }
.list-full li { display:inline-block; position:relative; vertical-align:top }
.list:after { content:" "; visibility:hidden; display:block; height:0; clear:both }
.list li { position:relative; width:100%; float:left; margin-bottom:24px; list-style:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
.list li:last-child { margin:0 }

#header { position:fixed; left:0; right:0; top:0; padding:12px 0; background:#333; border-bottom:4px solid #f9d20b; z-index:9999 }
#header .inner { position:absolute; left:0; top:0; bottom:0; right:0 }
#header .wrap, #header .container { height:100% }
#header a { color:#fff; text-decoration:none }
body.admin-bar #header { margin-top:32px!important }

#logo { display:block; height:36px; float:left }
.logo img { width:auto; height:100% }
.logo:hover { opacity:.6 }
.logo > * { display:inline-block; vertical-align:middle; color:#fff!important }

#menu { list-style:none }
#menu a:hover, #menu a:active { color:#fff; text-decoration:underline }

#main { margin-top:64px }
#main, #footer { padding:0px 0 }

#primary { margin-bottom:16px }
#primary .content h2 { margin:0 0 .3em }
#primary .content p { font-size:.85em }

/* #additional { background:#efefef } */
#additional .item:nth-child(2) { display:none }
#company { background:#f9d20b }
#company .list-double { margin-top:8% }
#company, #distributors { overflow:hidden; padding:32px 0 }


/* 5.0 Product - Archive
---------------------------------------------------------------------- */
.archive .content { padding:0 16px }
.archive .content h3 { font-weight:400 }
.archive .thumbnail:before { padding-top:90% }
.archive #main .wrap { padding:0 }
.archive .item { margin-bottom:16px }
.archive .item {height:auto }  /*Wojtek*/


/* 6.0 Product - Single
---------------------------------------------------------------------- */
table { width:100%!important; border-collapse:collapse; table-layout:auto }
table tr, table td { width:auto!important; height:auto!important }

.single .side { max-width:650px; margin:0 auto }
.single .content { position:relative }
.single .content img { margin:16px auto; width:auto; max-width:100%; display:block }
.single .content img { z-index:1 }
.single .content a:link, .single .content a:visited, .single .content a:active,
.single .content a:hover, .single .content a:focus { color:#00acf0 }

.single .text ul { list-style:none }
.single .text ul li:before { content:"\2022"; padding-right:16px }

.single h1, .single h2, .single h3, .single h4 { /*padding-top:1.5em; bruździ po zmianach do nowej tabeli w archive.php */ text-align:center }
.single .content h1:first-child, .single .content h2:first-child, .single .content h3:first-child, .single .content h4:first-child  /*{ margin-top:-1.5em  bruździ po zmianach do nowej tabeli w archive.php } */ 
.single table h2, .single table h3 { text-align:left; margin-top:0!important; padding-bottom:0px; border-bottom:1px solid #ccc }
.single table { margin-top:-1.5em }
.single table td { padding:6px 0 6px 10% }
.single table td:first-child { padding-left:0 }
.page-header { text-align:center; padding:0!important; }

.gallery { margin:0 0 16px }
.gallery .item { border-bottom:1px solid #ccc; margin-bottom:16px; -webkit-transition:opacity .2s; transition:opacity .2s }
.gallery .item:hover { opacity:.5 }
.gallery .caption { text-align:center; padding:0 8px 12px; font-size:.9em; font-style:italic; color:#888 }
.gallery img { margin:0!important; padding:0!important }

.heading-list { padding:0 0 8% 8%; float:right }
.heading-list, .heading-list ul { list-style-type:none!important }
.heading-list a { display:block; padding:.35em 0; white-space:nowrap }
.sub-heading { position:relative; padding-left:20px }
.sub-heading:before { position:absolute; content:""; top:.35em; bottom:.35em; left:0; width:1px; background:#ccc }

/*.single table h2:before, .single table h3:before { content:" "; display:block; height:32px }
.single table tr:first-child h2:before, .single table tr:first-child h3:before { display:none }
.heading-anchor { padding-top:32px; margin-top:-32px }*/

.download-list h3 { font-weight:400; margin-top:0; padding-bottom:16px; border-bottom:1px solid #ccc }
.download-list ul { list-style-type:none }
.download-list li { margin:0 0 12px }
.download-list { margin:10% 0 15% }



/* 7.0 Footer
---------------------------------------------------------------------- */
#footer { background:#333; color:#fff; font-size:.8em; text-align:center }
#footer .logo, #footer-text { display:inline-block; vertical-align:middle }
#footer .logo { height:36px }
#footer-text { margin:8px 0 24px }

#plankton.logo { padding:6px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }


/* 8.0 Plugins
---------------------------------------------------------------------- */
#swipebox-overlay, #swipebox-bottom-bar, #swipebox-top-bar { background:#fff!important; color:#2e2e2e!important; text-shadow:none!important }
#swipebox-close, #swipebox-next, #swipebox-prev { background-color:transparent!important;
	background-image:url(img/icons-gallery.svg)!important; background-size:cover!important;  background-position:0 0 }
#swipebox-bottom-bar { opacity:1; background:rgba(255,255,255,.8) }
#swipebox-prev { background-position:-50px 0px!important }
#swipebox-next { background-position:-100px 0px!important }
#swipebox-slider .slide .swipebox-inline-container, #swipebox-slider .slide .swipebox-video-container, #swipebox-slider .slide img { max-height:75%; max-width:75% }


/* ////////////////////////////////////////////////// szerokość OD 500 pixeli ////////////////////////////////////////////////// */
@media (min-width:500px) {
	.dist-item { width:33.33% }
	.list li { width:50% }
	#company, #distributors { padding-top:50px } /* przed zmianą na fixed menu było 0% /WojtekB  */
}

/* ////////////////////////////////////////////////// szerokość MAX 1049 pixeli ////////////////////////////////////////////////// */
@media (max-width:1049px) {
	#menu { position:fixed; left:0; right:0; top:0; height:0px; line-height:48px; margin-top:-64px; padding:64px 16px 0; background:#333; overflow:hidden;
		z-index:-1; font-size:1.2em; text-align:center; -webkit-transition:margin .2s, height .3s; transition:margin .2s, height .3s; -webkit-overflow-scrolling:touch;
		-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box }
	#menu a { color:transparent; -webkit-transition:color .2s; transition:color .2s }
	body.menu-on #menu { height:100%; margin:0 }
	body.menu-on #menu a { color:#fff!important }
	body.menu-on #header { top:0px!important; -webkit-transition:top .3s; transition:top .3s }
	body.menu-on { overflow:hidden }

	#menu-toggle { width:36px; height:36px; float:right }
	#menu-toggle span { position:relative; top:50%; margin:0 auto; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);
		-webkit-transition-duration:0s; transition-duration:0s; -webkit-transition-delay:.2s; transition-delay:.2s }
	#menu-toggle span, #menu-toggle span:before, #menu-toggle span:after { width:30px; height:2px; background:#fff; display:block }
	#menu-toggle span:before, #menu-toggle span:after { position:absolute; content:"" }
	#menu-toggle span:before { margin-top:-10px; -webkit-transition-property:margin, -webkit-transform; transition-property:margin, transform;
		-webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transition-delay:.2s, 0s; transition-delay:.2s, 0s }
	#menu-toggle span:after { margin-top:10px; -webkit-transition-property:margin, -webkit-transform; transition-property:margin, transform;
		-webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transition-delay:.2s, 0s; transition-delay:.2s, 0s }
	body.menu-on #menu-toggle span { background-color:rgba(0,0,0,0); -webkit-transition-delay:.2s; transition-delay:.2s }
	body.menu-on #menu-toggle span:before { margin-top:0; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition-delay:0s, .2s; transition-delay:0s, .2s }
	body.menu-on #menu-toggle span:after { margin-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition-delay:0s, .2s; transition-delay:0s, .2s }

/*	.more-products { background:#fff } */
	.more-products .thumbnail { display:none }
	.more-products .label, .more-products .label span { position:relative }
	.more-products .label span { padding:10% }
	/* .label.popping span {opacity: 0; font-size:1em; font-weight:normal; position: absolute; left: 50%; transform: translateX(-50%) } */
	#company, #distributors { padding-top:50px } /* przed zmianą na fixed menu było 0% /WojtekB  */
	
	/* Zmiany mobilne - Michał */
	#logo, #footer .logo { margin-left:10px; }
	#footer .logo { margin-top:5px; }
	    #menu-toggle { margin-right: 10px;}
	table { width:calc(100% - 10px)!important;margin-left:5px; margin-right:5px; }
	#footer-text {padding:0 5px;}
}

/* ////////////////////////////////////////////////// szerokość MIN 1050 pixeli ////////////////////////////////////////////////// */
@media (min-width:1050px) {
/*
	.triangle { position:relative; width:120%; background:#f9d20b; z-index:2; -webkit-transform-origin:0 0; transform-origin:0 0;
		-webkit-transform:rotate(3.75deg); transform:rotate(3.75deg); display:block }
	.triangle:after { content:""; padding-top:5.6%; height:0; display:block }
	.triangle.top, .triangle.bottom { position:absolute; left:0 }
	.triangle.top { top:0; -webkit-transform:rotate(3.75deg) translate(0, -100%); transform:rotate(3.75deg) translate(0, -100%) }
	.triangle.bottom { bottom:0 }
*/
	blockquote { padding:24px }
	.single .content img { margin:2% auto }
	.wrap { padding:0 0px }
	/* .thumbnail img { max-width:65%; max-height:65% } niepotrzebne, cały thumbnail się skaluje*/
	.list li { width:50% }
	.item { float:left }
	.list li { padding:0 16px 0 0 }
	
	.more-products .label span { top:50%; bottom:auto; padding:0; -webkit-backface-visibility:hidden; backface-visibility:hidden }
/*
	.label span { left:50%; bottom:5%; padding:0; -webkit-backface-visibility:hidden; backface-visibility:hidden }
	.label.popping span { opacity:0; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0) }
	.label.popping:hover span, .label span { opacity:1; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%) }
*/	
	.archive .content { padding:0 32px }
	.archive .item { border-left:1px solid #eaeaea; margin-bottom:32px }
	.archive .item:nth-child(odd) { border-left-width:0 }
	.archive .thumbnail img { max-width:90%; max-height:90% }
	.primary-mobile { display:none!important }

	.gallery .item { border:0 }
	.gallery .thumbnail img { max-width:80%; max-height:80% }

	#logo { height:50px }
	#menu { line-height:50px }
	#menu-toggle { display:none }
	#menu { float:right }
	#menu li { padding:0 0 0 25px; float:left; list-style:none }
	#menu li:first-child { padding:0 }
	#menu a { display:block; height:100%; font-size:.9em }
	
	#main { margin-top:78px }
	#main, #footer { padding:0px 0 }

	#primary { margin:0 }
	#primary .content, #primary img { display:inline-block; vertical-align:middle; width:50%; margin-bottom:32px;
		-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box }
	#primary .content { padding-right:32px }
	#additional .item { border:0 }
	#additional .item:after { position:absolute; content:""; left:-2px; top:0; bottom:0; width:6px; /* background:#ffcd05; */ z-index:1 }
	#additional .item:first-child:after { display:none }
	#additional .item:nth-child(1) img, #additional .item:nth-child(1) /* .label span { margin-top:-3% } */
	#additional .item:nth-child(3) img, #additional .item:nth-child(3) .label span { margin-top:2% }
	#additional .triangle.top, #company .triangle { background:#fff }

	#company, #distributors { padding-top:50px } /* przed zmianą na fixed menu było 2% /WojtekB    */
	#company h1, #distributors h1 { padding-top:0% }
	#company .triangle { margin-bottom:-32px }
	
	#footer { text-align:left; padding-top:16px; padding-bottom:16px}
	#footer-text { margin:0 }
	#plankton.logo { float:right }

	.item, .list-triple li { width:33.33% }
	.list li { padding:0 24px 0 0 }

	.dist-list { margin-bottom:48px }
	.dist-current { margin-bottom:24px }
	.dist-current:after { margin-bottom:-24px }
	.dist-window { margin:24px 0 }
	
	.archive .content { padding:0 8% }
	.archive .item:nth-child(odd) { border-left-width:1px }
	.archive .item:nth-child(3n+1) { border-left-width:0 }
	
	#main, #footer { padding:0% 0 }
	#primary .content { padding-right:3%; width:40% }
	#primary img { width:60%; margin:0 }
	#additional .item:nth-child(2) { display:block }
	#additional .item:nth-child(1) img, #additional .item:nth-child(1) .label span { margin-top: 0% }
	#additional .item:nth-child(3) img, #additional .item:nth-child(3) .label span { margin-top: 5% }
	
	#company, #distributors { padding-top:50px } /* przed zmianą na fixed menu było 0% /WojtekB  */
	#footer { padding-top:16px; padding-bottom:16px }
}

/* ////////////////////////////////////////////////// szerokość OD 1000 pixeli ////////////////////////////////////////////////// */
@media (min-width:1000px) {
	#mission-statement {padding-top: 50px; padding-bottom: 35px; text-align: center; } 
	#mission-statement h1{ font-size: 2.3rem; }
	
	.dist-item { width:20% }
	#company {padding-top: 100px;} /* przed zmianą na fixed menu było 0% /WojtekB  */
	#distributors {padding-top: 50px;} /* przed zmianą na fixed menu było 0% /WojtekB  */
}

/* ////////////////////////////////////////////////// szerokość OD 1570 pixeli ////////////////////////////////////////////////// */

@media (min-width:1570px) {
	.wrap { width:66.66% }
	/* .archive .wrap { width:75% }  // szerokość nie zgadzała się z resztą stron /WojtekB */
	#company, #distributors { padding-top:50px } /* przed zmianą na fixed menu było 0% /WojtekB */ 
	
	.single .side { position:absolute; left:90%; top:0; bottom:0 }
	.heading-list { position:-webkit-sticky; position:sticky; top:102px; padding:0; float:none }
	.heading-list:before, .heading-list:after { content:''; display:table }
	body.admin-bar .heading-list { top:134px }
}

@media screen and (min-width: 800px) {
	#swipebox-close { right:17px }
}