/*
Theme Name: OffArtStudio
Author: Damian Pruciak
Author URI: www.i-creative.pl
Description: Szablon stworzony na potrzeby witryny OffArtStudio
Version: 1.0.0
*/

html {font-size: 100%;}

body {background-color: #ffffff; color: #000000; font-size: 0.75em; font-family: "Poppins", sans-serif; font-weight: 400; line-height: 1.45; -ms-overflow-style: scrollbar; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

p, ul, ol, iframe, table, address {margin-bottom: 24px;}

a { outline: 0; position: relative; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

a {color: #00b400;}

a:active {background-color: transparent; outline: 0;}

a:focus, a:hover {color: #00b400; outline: 0; text-decoration: none;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 400; margin-bottom: 24px; margin-top: 36px; text-transform: uppercase;}

h2, .h2 {font-weight: 300;}

h3, .h3 {font-size: 20px;}

h4, .h4 {color: #00b400; margin-bottom: 16px;}

#wrapper *:first-child {margin-top: 0;}

#wrapper img {height: auto; max-width: 100%;}

.color {color: #00b400;}

.gutter-16.row {margin-right: -8px; margin-left: -8px;}

.gutter-16 > [class^="col-"], .gutter-16 > [class^=" col-"] { padding-right: 8px; padding-left: 8px;}

::selection {background: #00b400; color: #ffffff;}

::-moz-selection {background: #00b400; color: #ffffff;}

header {}

.navbar-header {position: relative; z-index: 999;}

.navbar {border: none; border-bottom: 1px #000000 solid; border-radius: 0; height: auto; min-height: 0; margin: 0 0 16px 0;}

.navbar-brand, .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {height: auto;}

.navbar-brand {padding-bottom: 5px;}

.navbar-brand>img {max-width: 100%;}

#navbar {border: none; margin-left: auto; position: relative; box-shadow: none;}

.navbar-nav {bottom: 5px; margin: 0; position: absolute; right: 0;}

.navbar-nav>li {margin-left: 46px;}

.navbar-nav li a {background-color: transparent; color: #000000; font-size: 1.333em; line-height: 1; padding: 0; text-transform: uppercase;}

.navbar-nav li a:focus, .navbar-nav li a:hover {background-color: transparent; color: #00b400;}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background-color: transparent; border-color: transparent;}

.dropdown-menu {background-color: #000000; font-size: inherit;}

.dropdown-menu li {border-bottom: 1px rgba(255,255,255,0.2) solid;}

.dropdown-menu li a {color: #ffffff; line-height: normal; padding: 3px 16px;}

.navbar-nav>li>.dropdown-menu {border: none; border-radius: 0; margin-top: 5px; right: auto; text-shadow: none;}

.navbar-nav li a span {display: inline-block;}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {background-color: #000000; color: #00b400;}

#wrapper {margin-bottom: 16px;}

#rotator {padding: 0; position: relative; width: 100%;}

#pola {bottom: 0; height: 100%; left: 0; position: absolute; top: 0; right: 0; z-index: 1;}

#pola div {border-left: 8px #ffffff solid; border-right: 8px #ffffff solid; height: 100%; position: relative;}

#pola div a {bottom: 0; color: #000000; display: inline-block; left: 0; position: absolute; text-align: center; top: 0; right: 0; width: 100%;}

#pola div a h2, #pola div a h3 {-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

#pola div a h2 {border-bottom: 1px #000000 solid; bottom: 50%; display: block; font-size: 48px; font-weight: 300; left: 24px; margin: 0; padding: 32px 0; opacity: 0; position: absolute; right: 24px; visibility: hidden;}

#pola div a h3 {display: block; font-size: 30px; font-weight: 300; left: 24px; margin: 0; padding: 32px 0; opacity: 0; position: absolute; right: 26px; top: 50%; visibility: hidden;}

#pola div a:hover {background-color: #00b400; background-color: rgba(0,180,0,0.5);}

#pola div a:hover h2 {opacity: 1; visibility: visible;}

#pola div a:hover h3 {opacity: 1; visibility: visible;}

#pola div img {bottom: 0; height: auto; left: 0; position: absolute; width: 100%; z-index: 2;}

.owl-carousel .owl-item {-webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; -ms-animation-duration: 1.5s; animation-duration: 1.5s;}

.owl-carousel  .owl-item img {display: block; height: auto; width: 100%;}

/*#rotator:after, #rotator:before {background-color: #ffffff; bottom: 0; content: ""; display: inline-block; height: 100%; position: absolute; top: 0; width: 16px; z-index: 1;}

#rotator:after {left: 33.333%; margin-right: -6px;}

#rotator:before {right: 33.333%; margin-left: 5px;}*/

footer {border-top: 1px #000000 solid; font-size: 0.923em; padding-top: 5px; white-space: nowrap;}

footer .row {position: relative;}

footer span {display: inline-block; margin-bottom: 16px; padding-left: 46px; position: relative;}

footer span img {left: 0; position: absolute;}

footer a {color: #000000;}

footer a:focus, footer a:hover {color: #00b400;}

#back {background: url(images/layout/back.png) center center no-repeat; display: block; height: 30px; float: right; margin: 0 0 16px 30px; width: 30px;}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {#back {background: url(images/layout/back@2x.png) center center no-repeat; background-size: 30px 30px;}}

#category-bar {position: absolute; right: 0; text-align: right;}

#category-bar h2 {display: inline-block; font-size: 34px; font-weight: 300; line-height: 1; margin: 0 0 16px 0;}

.project h2 {color: #00b400; margin-top: 0;}

.gallery {margin: 0 -8px -16px -8px !important;}

.gallery-item {display: inline-block; margin-bottom: 16px; margin-top: 0!important; padding: 0 8px; position: relative; text-align: center; vertical-align: top;}

.gallery-item img {border: none !important; height: auto !important; width: 100% !important;}

#gallery-4 .gallery-item {min-width: 33.333%;}

.gallery-caption {font-size: 30px; font-weight: 300; left: 50%; line-height: 1.2; opacity: 0; padding: 18px; pointer-events: none; position: absolute; text-transform: uppercase; top: 50%; z-index: 2; visibility: hidden; -moz-transform: translateX(-50%) translateY(-50%) translateZ(0); -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); -o-transform: translateX(-50%) translateY(-50%) translateZ(0); -ms-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0);}

.gallery-columns-1 .gallery-caption {font-size: 1em; font-weight: 400; left: auto; line-height: 1.2; opacity: 1; padding: 18px; position: relative; text-transform: none; top: auto; visibility: visible; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none;}

.gallery-item a {display: block; position: relative;}

.gallery-item a.no-lightbox:after {background-color: #00b400; background-color: rgba(0,180,0,0.5); content: ""; display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; visibility: hidden;}

.gallery-item:focus a.no-lightbox:after, .gallery-item:hover a.no-lightbox:after, .gallery-item:focus .gallery-caption, .gallery-item:hover .gallery-caption {opacity: 1; visibility: visible;}

.gallery-caption, .gallery-item a:after {-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

.wp-caption {max-width: 100%;}

.wp-caption p {margin: 10px auto 28px; text-align: center;}

#swipebox-top-bar {font-family: inherit; font-size: 1em; line-height: 50px;}

.tablepress tbody td, .tablepress tfoot th {border-top: none;}

.tablepress tbody td {vertical-align: top;}

.tablepress td, .tablepress th {padding: 6px 12px 6px 0 !important; border: none !important; background: 0 0; text-align: left; float: none!important; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

.tablepress .row-hover tr:hover td {background-color: transparent !important; color: #00b400;}

.wpcf7-validation-errors, .wpcf7-mail-sent-ng {border: 1px #00b400 solid!important; clear: both; margin: 0 0 36px !important; padding: 8px!important;}

.wpcf7-mail-sent-ok {clear: both; margin: 0 0 36px !important; padding: 8px!important;}

.wpcf7-not-valid {clear: both; border: 1px #00b400 solid!important; padding: 8px!important;}

form button, form input, form select, form textarea {border: 1px #eeeeee solid; outline: #00b400; padding: 8px; width: 100%; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

form input:focus, form textarea:focus {border-color: #00b400!important;}

form input[type=submit] {background-color: #00b400; color: #ffffff; text-transform: uppercase; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}

form input[type=submit]:focus, form input[type=submit]:hover {background-color: #000000;}

@media (min-width: 1260px) {.container {width: 1230px;}}

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

    #pola div a h2, #pola div a h3 {font-size: 2em; padding-bottom: 24px; padding-top: 24px;}

    .navbar-header {float: none;}

    .navbar-left,.navbar-right {float: none !important;}

    .navbar-toggle {display: block;}

    .navbar-collapse {}

    .navbar-fixed-top {top: 0; border-width: 0 0 1px;}

    .navbar-collapse.collapse {display: none!important;}

    .navbar-nav {float: none!important;  margin-top: 7.5px;}

    .navbar-nav li a span.caret {display: inline-block; padding: 0; width: auto;}

    .navbar-brand {display: block; height: 34px; line-height: 34px; margin-top: 15px; padding: 0 15px 0 15px;}

    .navbar-brand>img {display: inline-block;}

    .navbar-toggle .icon-bar {background-color: #000000;}

    #navbar {background-color: #ffffff; left: 0; margin: 1px 0 0 0; max-width: none !important; padding: 0; position: absolute; right: 0; z-index: 2;}

    #navbar ul {bottom: auto; left: 0; margin: 0px; position: relative; right: 0;}

    .navbar-nav>li {border-bottom: 1px #eeeeee solid; float: none; margin: 0;}

    .navbar-nav>li>a {line-height: 1.45; margin: 0 auto; max-width: 750px; padding: 12px 15px 10px 15px;}

    .navbar-nav li a span {display: block; margin: 0 auto; max-width: 750px; padding: 0 15px; width: 100%;}

    .collapse.in{display:block !important;}

    .navbar-toggle {position: relative; float: right; padding: 9px 10px; margin-top: 14px; margin-right: 0px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid #eeeeee; border-radius: 4px; width: auto;}

    .navbar-nav .open .dropdown-menu {position: static; float: none; padding: 5px 0px 5px 0px; width: auto;  margin-top: 0; background-color: #000000; font-size: inherit; border: 0; -webkit-box-shadow: none; box-shadow: none;}

    .dropdown-menu li a {color: #ffffff; line-height: normal;}
    
    .dropdown-menu li:last-child {border-bottom: none;}

    .navbar-nav .open .dropdown-menu li a {margin: 0 auto; max-width: 750px; padding: 7px 15px 7px 15px;}

    #category-bar {position: relative; right: auto; text-align: left;}

    .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item {width: 33.33%;}

}

@media screen and (max-width: 767px) {
    
    #pola div a h2, #pola div a h3 {font-size: 1.5em; left: 6px; padding-bottom: 24px; padding-top: 24px; right: 6px;}

    .navbar-brand {max-width: 80%;}

    .navbar-toggle {margin-right: 15px;}

    .navbar-nav>li>a>span {padding: 0;}

    .navbar-nav .open .dropdown-menu li a {padding: 7px 15px 7px 15px;}

    .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item {width: 50% !important;}


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

        .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item, .gallery-columns-6 .gallery-item, .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item {width: 100% !important;}
        
        #pola div a h2, #pola div a h3 {font-size: 1em; padding-bottom: 12px; padding-top: 12px;}

    }


    @media screen and (max-width: 320px) {
    }