/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
   
@font-face {
    font-family: 'simplifica';
    src: url('../fonts/simplifica_typeface-webfont.eot');
    src: url('../fonts/simplifica_typeface-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/simplifica_typeface-webfont.woff') format('woff'),
         url('../fonts/simplifica_typeface-webfont.ttf') format('truetype'),
         url('../fonts/simplifica_typeface-webfont.svg#simplificasimplifica') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,
button,
input,
select,
textarea {
    color: #444;
}

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

body {
    font-size: 16px;
    line-height: 1.4;
}

::-moz-selection {
    background: #9dd0ac;
    text-shadow: none;
}

::selection {
    background: #9dd0ac;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #9dd0ac;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a { color: #76203d;
	-webkit-transition: color 300ms linear;
     -moz-transition: color 300ms linear;
     -o-transition: color 300ms linear;
     -ms-transition: color 300ms linear;
     transition: color 300ms linear;
  }
a:hover { color: #000 }

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

html, body { height: 100%; background: #fff; }

body {
    font: 16px/26px 'Open Sans', Helvetica, Helvetica Neue, Arial; 
}

.wrapper {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}





/* ==============
    MOBILE: Menu
   ============== */

#title { margin: 50px auto; border: none; }
#title a { display: block; width: 300px; height: 60px; text-indent: -9999px; position: relative; margin: 0 auto; background: url(../img/logo.png) no-repeat center; background-size: contain;  }

.topnav { height: 50px; width: 100%; border-top: 1px solid #d6d3d4; }
.topnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
	float: left;
	font-size: 0.8em;
}
.topnav .leftnav { width: 30%; }

.topnav ul li { 
	 list-style: none; padding: 0; margin: 0; height: 51px; margin-top: -1px; margin-right: 20px; display: inline-block; position: relative;

}
.topnav a {
    border-top: 5px solid transparent;
    line-height: 46px; height: 46px; display: block;

    font-weight: normal; text-decoration: none; color: #444;;
}
.topnav a .fa { font-size: 16px; }

.topnav a:hover, .topnav a.active {
    color: #76203d; border-top-color: #76203d;
}

.topnav .rightnav, .topnav .centrenav { float: right; text-align: right;}
.rightnav { width: 30px; }
.topnav .rightnav li { margin-right: 0; text-align: right; }
.centrenav { width: 50%; }
.pagecontent { padding-top: 40px; }


/* ==============
    MOBILE: Main
   ============== */
   
   .cover-image { width: 100%; height: 450px; margin-bottom: 30px; background: url(../img/cover.jpg) no-repeat center; background-size: cover; }
   .cover-image .wrapper { height: 450px; position: relative; }
   .cover-image h1 { font-size: 4em; color: #fff; position: absolute; bottom: 0; }

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 2em;
}

.sidebarheader { font-size: 14px; height: 30px; line-height: 30px; padding: 0 10px; background: #e4e4e4; margin-top: 0; }

.sidebarbox { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e4e4e4;}
.sidebarbox a { text-align: center; font-weight: bold; text-decoration: none;}
.sidebarbox a span { padding-bottom: 20px; }
.sidebarbox a img { max-width: 100%; }

.footer-container { height: 200px; background: url(../img/footer.jpg) no-repeat center; background-size: cover; }
.footer-container footer {
    color: white;
    padding: 80px 0;
    line-height: 40px;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   

.slide { margin: 0 0; padding: 0 0 50px; background: #fff; color: #444 }

h1, h2, h3 {  font-weight: normal; text-align: left; color: #76203d; font-family: "PT Serif"; position: relative; line-height: 1.3; font-variant: small-caps; }
h1 { border-bottom: 1px solid #d6d3d4; }
h1 .artistfirstname { font-variant: normal; color: #444; }
h1 .artistlastname { font-variant: normal; text-transform: uppercase; }

.twocolumn, .left-column, .right-column { width: 48%; float: left; }
.twocolumn.rightcolumn, .right-column { float: right; }

.threecolumn { width: 30%; float: left; margin-right: 5%; }
.fourcolumn { width: 24.25%; float: left; margin-right: 1%; }
.threecolumn.rightcolumn, .fourcolumn.rightcolumn { margin-right: 0; }


.singlecolumn { width: 70%; margin: 0 auto; }
.wrapper > .editable > p { width: 70%; margin: 1em auto; }

.centered { text-align: center; }

.button { padding: 13px; margin: 10px 5px; font-size: 18px; text-transform: uppercase; font-weight: normal; color: #76203d; text-decoration: none; background: transparent; border: 2px solid #76203d; display: inline-block; font-weight: 200; font-family: "PT Serif" }
.button strong { font-weight: normal; }
.button.filled, .button:hover { background: #76203d; color: #fff; }

.button.small { padding: 7px; font-size: 11px; border-width: 1px; }

.sliderimg { height: 400px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center center; margin: 0; }


.counters { color: #fff;  padding-top: 80px; padding-bottom: 80px; font-family: "Bebas Neue"; }

.countercontainer { background: rgba(0,0,0,0.8); padding: 20px; text-align: center; }
.counters .fa { display: block; font-size: 70px; height: 90px; width: 90px; text-align: center; line-height: 90px; margin: 0 auto; }
.counters .counter { font-size: 80px; font-weight: bold; line-height: 80px;  }
.counters .counterlabel { text-transform: uppercase; font-size: 22px; font-weight: 200; }


.opinionsslideshow { padding: 50px 0; }
.clientreference { width: 48%; float: left; margin: 0 1%;}
.clientreferencewrapper { padding: 20px 20px 20px 80px; color: #fff; background: rgba(0,0,0,0.8); position: relative;}
.clientreferencewrapper:before { content: "”"; font-family: "Bebas Neue"; display: block; text-align: center; font-weight: 700; width: 50px; height: 50px; line-height: 100px; font-size: 100px; background: #9dd0ac; position: absolute; top: 40px; left: 0; }
.clientreference:nth-of-type(3n) { margin-right: 0; }
.clientreference:nth-of-type(3n+1) { clear: left; }

.clientfooter { color:#9dd0ac; }
.clientname { text-transform: uppercase; font-weight: bold;  font-family: "Bebas Neue"; font-size: 1.5em; ;}
.clientloc { font-weight: 200; font-family: "Bebas Neue";font-size: 1.5em; }

.cycle-pager { text-align: center; color: #fff;}
.cycle-pager span { cursor: pointer; padding: 2px; font-size: 1.5em; margin-top: 20px; }
.cycle-pager-active { color: #9dd0ac; }

.artistlink { display: block; text-align: left; text-decoration: none; }

/*
.clientcomment {
	position: relative;
	padding: 15px;
	margin: 1em 0 0;
	border: 3px solid #9dd0ac;
	color: #333;
	background: #eaeaea;
	font-size: 14px;
	font-style: italic;
}

.clientcomment:before {
	content: "";
	position: absolute;
	left: 20px;
	border-style: solid;
	border-color: #9dd0ac transparent;
	display: block;
	width: 0;
	top: -17px;
	bottom: auto;
	border-width: 0 17px 17px;
}

.clientcomment:after {
	content: "";
	position: absolute;
	left: 24px;
	border-width: 13px 13px 0;
	border-style: solid;
	border-color: #eaeaea transparent;
	display: block;
	width: 0;
	top: -13px;
	bottom: auto;
	border-width: 0 13px 13px;
}*/

#realizacjawrapper2 { text-align: center; padding-top: 100px; padding-bottom: 50px; }
.realizacja-step { display: inline-block; width: 130px; text-align: center; vertical-align: top; padding-bottom: 30px; }
.realizacja-img { display: block; margin: 0 auto 20px; width: 100px; height: 100px; }
.realizacja-caption { color: #000; font-size: 18px; font-family: "Bebas Neue"; font-weight: 700; text-shadow: 1px 1px 0px white  }
.realizacja-arrow { display: inline-block; width: 30px; text-align: center; }
.realizacja-arrow .fa { line-height: 100px; font-size: 30px; }


.ui-tabs-nav { list-style: none; padding: 0; margin: 20px 0; border-bottom: 2px solid #eee; text-align: center; }
.ui-tabs-tab { display: inline-block; padding: 10px; font-family: "Bebas Neue"; font-size: 18px; border-bottom: 2px solid #eee; margin-bottom: -2px; }
.ui-tabs-tab a { color: #444; cursor: pointer; text-decoration: none; }
.ui-tabs-tab a:hover { color: #9dd0ac; cursor: pointer; }
.ui-tabs-active { border-bottom-color: #9dd0ac; }
.ui-tabs-active a { color: #9dd0ac; outline: none; }


.ui-tabs-panel { overflow: scroll; }

table { width: 100%; border-collapse: collapse; }
table th { padding: 10px; text-align: center; font-size: 18px; font-family: Lato; font-weight: 700; color: #9dd0ac; border: 1px solid #fff; background: #eee; }
table td { text-align: center; padding: 10px; border: 1px solid #fff;}

#cfform { margin: 0 auto; width: 70%; }
#cfform p { position: relative; }
.textinput, textarea { border: none; padding: 15px 5px; background: white; border: 1px solid #76203d; width: 90%; height: 18px;}
#cfform textarea { height: 130px; }
textarea { height: 50px; }
#cfform label { position: absolute; height: 48px; line-height: 48px; left: 10px; top: 0; color: #aaa;  }
#cfform label.error { position: relative; display: block; width: 90%; margin-left: -10px; padding: 5px; border-radius: 5px; height: 18px; line-height: 18px; margin-top: 3px; color: red; background-color: #ffb0b0; }

#cfsubmit { padding: 13px; margin: 0 5px; font-size: 16px; border: none; border: 2px solid #76203d; text-transform: uppercase; font-weight: normal; color: #76203d; text-decoration: none;  font-family: "PT Serif"; background: transparent;   }
#cfsubmit:hover { background: #76203d; color: #fff; }


#cfform-success { color: green; text-align: center; display: none; }

#contactinfo { padding: 20px; background: rgba(255, 255, 255, 0.8); width: 55%; }


#contactlogo { width: 250px; height: auto; padding-bottom: 30px; }
.contactinfopiece { font-family: Lato; font-size: 1em; text-transform: uppercase; }
.contactinfopiece .fa { float: left; padding-right: 10px; font-size: 1.2em; padding-top: 2px; display: block; width: 30px; text-align: center; }
.contactinfopiece .fa-home { padding-bottom: 30px; }

.contactsocial { padding-left: 30px; }
.contactsocial a { margin: 2px; display: inline-block; font-size: 20px; line-height: 50px; height: 50px; width: 50px;  text-align: center; background: #5469ba; border-radius: 50%; color: #fff; }
.contactsocial a:hover { background: #000; cursor: pointer; }

.ppfolio-categories { width: 100%; height: 100%; }
.ppfolio-category-image { height: 100%; position: relative; float: left; overflow: hidden; display: block; }
.ppfolio-category-image-inner { position: relative; display: block; height: 100%; text-align: center; }
.ppfolio-category-image-inner img { position: relative; height: 100%; width: auto; display: block;}
.ppfolio-blur-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; height: 100%; width: 100%; }
.ppfolio-blur-overlay img { position: absolute; height: 100%; width: auto; }
.ppfolio-category-name { text-align: center; text-decoration: none; line-height: 14px; padding: 30px 0; color: #fff; font-weight: bold; position: absolute; width: 100%; top: 50%; margin-top: -37px; border: none; background-color: #E44D26; }
.ppfolio-category-image.even { background-color: #E44D26; }
.ppfolio-category-image.even .ppfolio-category-name { color: #E44D26; background: #fff; }


#togglemenu { display: none; }

.columns .left-column { width: 48%; float: left; }
.columns .right-column { width: 48%; float: right; }

.em-karta .main article li { padding: 10px 0; }

.featuredimage { width: 100%; height: 400px; background: no-repeat center; background-size: cover; margin-bottom: 20px; }


.gallery-images { text-align: center; }
.gallery-images a img { padding: 5px; }

.printbutton { text-decoration: none; padding: 5px; font-weight: bold; border: 1px solid #da251d; }

.footer { background: #d6d3d4; }

.footercontactinfo, .footercontactinfo a { font-size: 18px; color: #eee; }
.footersocial a { margin: 2px; display: inline-block; font-size: 20px; line-height: 50px; height: 50px; width: 50px; text-align: center; background: #eee; border-radius: 50%; color: #444; }
.footersocial a:hover { background: #5469ba; cursor: pointer; }

.gallery-image-container { display: block; float: left; width: calc(25% - 9px); margin-right: 12px; margin-bottom: 12px; position: relative; text-align: center; }
.gallery-image { display: block; width: 100%; height: auto; background: #000; position: relative; }
.gallery-image-container:nth-of-type(4n) { margin-right: 0; }
.gallery-image img { width: 100%; height: auto; position: relative; z-index: 2;}

.gallery-image:after { content: " "; text-align: center; width: 100%; height: 100%; display: block; position: absolute; z-index: 5; background: rgba(0,0,0,0.3); top: 0; left: 0; opacity: 0;
		-webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear;
      }
      
.gallery-image:before {  content: "\f065"; font-family: FontAwesome; color: #fff; font-size: 30px; position: absolute; width: 100%; text-align: center; z-index: 9; height: 30px; line-height: 30px; top: 50%; margin-top: -15px; opacity: 0; left: 0; -webkit-transition: all 300ms linear;
     -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
     -ms-transition: all 300ms linear;
     transition: all 300ms linear; }
      
.gallery-image:hover:after, .gallery-image:hover:before { opacity: 1; }

.showsamples { width: 70%; margin: 30px auto 0; }

.showsamples .gallery-image { width: 33%; }

#onas .showsamples { width: 80%; }
#onas .showsamples .gallery-image { width: 30%; margin: 0 1.5%; }

.presentationinstance { width: 33%; float: left; height: 300px; }
.showsamples .presentationinstance  { height: 200px; }

.copyright { color: #76203d;  margin-top: 0; text-align: center; padding-top: 40px; width: 98%; margin: 0 auto; font-size: 0.8em; }

#newswrapper {
    max-width: 1000px;

}

.tile { float: left; margin: 10px; background: #000 no-repeat center center; background-size: cover; position: relative; text-decoration: none; }
.tile.small { width: 313px; height: 313px; }

.tile.newsitem  { -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     padding: 30px 20px 20px; border: 3px solid #666; background: transparent; font-family: "PT Serif"; text-transform: none; font-size: 14px; overflow: scroll;}
     
.tile.newsitem h4 { margin-top: 0; font-size: 16px; text-transform: uppercase; text-decoration: none; margin-bottom: 20px; line-height: 20px; }
.tile.newsitem h4 a{ text-decoration: none; }
.tile.newsitem span { position: static; display: inline; height: auto; left: auto; top: auto; color: #666; font-size: 12px; font-weight: normal; font-style: italic; line-height: 20px; }
.tile.newsitem p { margin: 0; }


#news-list { list-style: none; padding: 0; margin: 0 auto; max-width: 500px; }
#news-list li { padding-bottom: 30px; }
.news-title { font-size: 16px; text-transform: uppercase; text-decoration: none; line-height: 20px; border-bottom: 1px solid #666; text-align: center; padding-bottom: 10px; margin-bottom: 10px; }
.news-title a { text-decoration: none; }
.news-date { color: #666; font-size: 14px; font-weight: normal; font-style: italic; line-height: 20px; }


.singlenewswrapper { max-width: 500px; margin: 50px auto 30px; }
.single-news-title { font-size: 20px; text-transform: uppercase; text-decoration: none; line-height: 20px; border-bottom: 1px solid #666; text-align: center; padding-bottom: 10px; margin-bottom: 10px; font-family: "PT Serif"; }
.single-news-date { color: #666; font-size: 14px; font-weight: normal; font-style: italic; line-height: 20px; margin-top: 0; text-align: center; }

/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 1000px) {
	.gallery-image-container { width: calc(33% - 8px); }
	.gallery-image-container:nth-child(4n) { margin-right: 12px; }
	.gallery-image-container:nth-child(3n) { margin-right: 0; }
	
	
	.presentationinstance { width: 50%; }
	
	#title a { max-width: 80%; }

	.fourcolumn { width: 49%; margin-right: 2%; margin-bottom: 10px; }
	.fourcolumn:nth-child(2n) { margin-right: 0; }
	.sliderimg { background-attachment: scroll; }
.header-container .wrapper { width: 100%; }
#togglemenu { display: block; background: #d6d3d4; color: #fff; padding: 10px 0; text-align: center; width: 100%; }
#topnav { height: auto; display: none;  }

.header-container {
    height: auto;
}

#topnav ul, #topnav .leftnav, #topnav .centrenav, #topnav .rightnav {
	width: 100%;
    text-align: center;
    float: none;
}
.topnav .rightnav li { text-align: center; }
#topnav ul li { 
	 height: auto; display: block; margin: 0;
}

#topnav a {
    height: auto; width: 100%; display: block; border: none; 
}

#topnav a:hover, #topnav a.active { border: none; color: #fff; background: #76203d;  }




.header-container.bottom .submenu { bottom: auto; }
.header-container.bottom .submenu li a, .header-container.bottom .submenu li{ line-height: 26px; height: 26px; }
.header-container.bottom .submenu { width: 100%; }

nav li:hover .submenu { display: block; }


   
   .columns .left-column, .columns .right-column, .twocolumn.rightcolumn, .twocolumn { width: 100%; float: none; }
   #cfform { width: 100%; padding-bottom: 20px; border-bottom: 1px solid #fff; margin-bottom: 20px; }


   .wrapper > .editable > p { width: 100%; }
   .showsamples { width: 100%; }
   
   .clientreference { width: 100%; float: none; margin-right: 0; padding-bottom: 30px; }


	.counters { padding: 20px 0; height: auto; }
	#separator5 { height: auto; }
	
	.separator, #home { background-attachment: scroll; background-position: center center; }
   
}


#cookiewarning { position: fixed; right: 50px; bottom: 50px; padding: 30px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.8em; z-index: 9999; max-width: 400px; line-height: 1.1; }
#shutup { background: #76203d; padding: 7px; font-weight: bold; color: #fff; text-decoration: none; }


@media only screen and (max-width: 900px) {
	#homepresentationwrapper { display: none; }
	
		#homelogo, #homelogo-kettle { height: 200px; width: 200px; left: 50%; margin-left: -100px; margin-top: -100px; }
		h2 { line-height: 1; }
		
		.tile.small { width: 180px; height: 180px; }
		
		.tile.newsitem  {padding: 10px 5px 5px;}
	     
	.tile.newsitem h4 { font-size: 14px; margin-bottom: 16px; line-height: 16px; }

	.tile.newsitem p { line-height: 1.2 }
		


}

@media only screen and (max-width: 700px) {
	.tile.small { width: 90%; height: auto; padding: 30px 20px 20px; margin: 10px 5%;  }
	#contactinfo { width: 100%; box-sizing: border-box }
	
}

@media only screen and (max-width: 600px) { 
	.gallery-image-container { width: calc(50% - 6px); }
	.gallery-image-container:nth-child(3n) { margin-right: 12px; }
	.gallery-image-container:nth-child(2n) { margin-right: 0; }
	
	.showsamples .gallery-image, #onas .showsamples .gallery-image { margin: 0; width: 100%; float: none; margin-bottom: 10px; }

	.presentationinstance { width: 100%; height: 300px; }
		.showsamples .presentationinstance { width: 100%; }
	
		.threecolumn, .fourcolumn { width: 100%; float: none; margin-right: auto; margin-left: auto; clear: both; padding-bottom: 30px; max-width: 300px;  }
	.threecolumn.rightcolumn, .fourcolumn.rightcolumn, .fourcolumn:nth-child(2n) { float: none; margin-right: auto; }
	
	.instructorbutton { max-width: 90%; box-sizing: border-box }
	.contactinfopiece { font-size: 0.8em; }
	.featuredimage { display: none; }
}

@media only screen and (max-width: 500px) { 
	.gallery-image-container { width: 100%; margin-right: 0;}
	.gallery-image-container:nth-child(3n) { margin-right: 0; }
	

	.showsamples .presentationinstance { display: none; }
	.showsamples .presentationinstance:first-child { display: block; }


}


@media only screen and (min-width: 1140px) {
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.center { text-align: center; }

/* ==========================================================================
   Plugin styles
   ========================================================================== */
   
   
/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}