html,
body {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 14px;
    font-family: 'Dosis', sans-serif;
    
    position: relative;
}

html {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

a {
    transition: all 0.3s ease;
    color: #999;
    display: inline-block;
    position: relative;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 30px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

.heading {
    padding-top: 50px;
    color: #A36920;
    font-family: 'Dosis', sans-serif;
    line-height: 38px;
}

.heading2 {
    padding-top: 30px;
    color: #fff;
    font-family: 'Dosis', sans-serif;
    line-height: 38px;
}

.heading3 {
    padding-top: 0px;
    color: #fff;
    font-family: 'Dosis', sans-serif;
    line-height: 38px;
}

.heading4 {
    padding-top: 0px;
    color: #000;
    font-weight: 600;
    font-family: 'Dosis', sans-serif;
    font-size: 22px;
}

.subheading {
    color: #ccc;
    font-family: 'Dosis', sans-serif;
    line-height: 1.52em;
    margin: 30px 0;
}

.subheading1 {
    color: #888;
    font-family: 'Dosis', sans-serif;
    line-height: 1.52em;
    margin: 30px 0;
    margin-bottom: 50px;
}

.subheading2 {
    color: #eee;
    font-family: 'Dosis', sans-serif;
    line-height: 30px;
}
.subheading3 {
    color: #000;
    font-family: 'Dosis', sans-serif;
    line-height: 22px;
    font-size: 14px;
    font-weight: 600;
}

.light {
    font-family: 'Dosis', sans-serif;
}

a:hover {
    text-decoration: none;
}

.accent {
    color: #A36920 !important;
}

.white {
    color: white !important;
}

.muted {
    color: #333 !important;
}

.muted-light {
    color: #888 !important;
}

.gray {
    color: #6a727b;
}

hr {
    border: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    display: inline-block;
}

hr:before {
    content: ' ';
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    top: -9px;
    left: -10px;
    border-radius: 50%;
    background: white;
}

hr:after {
    content: ' ';
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    top: -29px;
    right: -10px;
    border-radius: 50%;
    background: white;
}

p {
    margin: 20px 0;
    font-size: 30px;
    line-height: 42px;
}

p.small {
    font-size: 18px;
    line-height: 36px;
    color: #c5c5c5;
}

.navbar-filler {
    height: 0;
    width: 100%;
}

.ind {
    background: url('../img/tlo3.jpg') no-repeat;
    background-position: 50% 70%;
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-width: 100%;
}

.ind2 {
    background: url('../img/tlo_oferta.jpg') no-repeat center top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 400px;
    min-width: 100%;
}

header video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

header a {
    transition: all 0.3s ease;
    color: #999;
    display: block;
    position: static;
}

.kont {
    display: flex;
    justify-content: center;
    align-items: center;
}

#icons {
    width: 591px;
    height: 142px;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.wow {
    opacity: 0;
}

.opoz {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.opoz2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}


@font-face {
  font-family: 'icomoon';
  src:  url('https://i.icomoon.io/public/temp/b0c9e24cc8/UntitledProject/icomoon.eot?jtfaw');
  src:  url('https://i.icomoon.io/public/temp/b0c9e24cc8/UntitledProject/icomoon.eot?jtfaw#iefix') format('embedded-opentype'),
    url('https://i.icomoon.io/public/temp/b0c9e24cc8/UntitledProject/icomoon.ttf?jtfaw') format('truetype'),
    url('https://i.icomoon.io/public/temp/b0c9e24cc8/UntitledProject/icomoon.woff?jtfaw') format('woff'),
    url('https://i.icomoon.io/public/temp/b0c9e24cc8/UntitledProject/icomoon.svg?jtfaw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ikona-paluch:before {
  content: "\e900";
  color: #fff;
}






.wrapper {
  width: 100px;
  height: 100px;
  left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -25px;
}

.wrapper, .wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 5px solid #A46B28;
}

.wrapper .spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 0;
  border-right: none;
     -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
  opacity: 0;
    transition: all 300ms ease-in-out;
}





.wrapper .filler {
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  left: 50%;
  opacity: 0;
     -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
  opacity: 0;
  border-left: none;
    transition: all 300ms ease-in-out;
}

.wrapper .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
     -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
  opacity: 0;
    transition: all 300ms ease-in-out;
}

@-webkit-keyframes rota {
  0% {transform: rotate(0deg);border-color:#A46B28;}
  100% {transform: rotate(360deg);z-index:0;}
}
@-webkit-keyframes opa {
  0% {opacity: 1;}
  50%, 100% {opacity: 0;}
}


.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
  animation-play-state: running;
}
.wrapper:hover .spinner, .scrollto:hover .spinner{
    -webkit-animation: rota 3s linear infinite;
    opacity: 1;
}
.wrapper:hover .filler, .scrollto:hover .filler{
    -webkit-animation: opa 3s steps(1, end) infinite reverse;
    opacity: 1;
}
.wrapper:hover .mask, .scrollto:hover .mask{
    -webkit-animation: opa 3s steps(1, end) infinite;
    opacity: 1;
}
.wrapper .spinner.hover-s{
    -webkit-animation: rota 3s linear infinite;
    opacity: 1;
}
.wrapper .filler.hover-f{
    -webkit-animation: opa 3s steps(1, end) infinite reverse;
    opacity: 1;
}
.wrapper .mask.hover-m{
    -webkit-animation: opa 3s steps(1, end) infinite;
    opacity: 1;
}





[data-slides] {
	background-image: url(../foto/optitax1.jpg); /* Default image. */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transition: background-image 1s linear;
}

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */

.test { height: 220px; }
@media all and (min-width: 48em) {
	.test { height: 320px; }
}






.ctc-slider{
    text-align: center;
}

.ctc-slider .ctc-sq{
    margin: 0 auto;
}
.ctc-sep{
    width: 30px;
    display: inline-block;
}
.ctc-slider .ctc-sq.sq-center{
    width: 70px;
    height: 70px;
    position: relative;
    top: -10px;
    background: url('../img/btn-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
}
.ctc-slider .ctc-sq.sq-center i{
    line-height: 70px;
    transform: rotate(180deg);
}

.ctc-slider .ctc-sq.sq-center.hover-sq{
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    border-radius: 50%;
}



.ind{
    position: relative;
}
.csq{
    position: fixed;
    right: 0;
    top: 100px;
    z-index: 999;
}
.csq2{
    top: 170px;
}
.csq3{
    top: 240px;
}
.csq4{
    top: 310px;
}







.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.frame {
    position: absolute;
    background-size: contain;
}

.frame.top,
.frame.bottom,
.frame.bottom2 {
    left: 0;
    width: 100%;
    height: 70px
}

.frame.top {
    top: 0
}

.frame.top:before {
    animation: top_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-animation: top_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    content: '';
    position: absolute;
    background: url('../img/ui-trans-white-50.png');
    top: 50%;
    left: 180px;
    right: 180px;
    margin-top: -0.5px;
    height: 1px
}

.frame.bottom {
    bottom: 20px;
}

.frame.bottom2 {
    bottom: 0;
    background: transparent url('../img/ui-header-frame-bottom-white.png') no-repeat center;
}

.frame.bottom:before,
.frame.bottom:after,
.frame.bottom2:before,
.frame.bottom2:after {
    content: '';
    position: absolute;
    background: url('../img/ui-trans-white-50.png');
    top: 50%;
    margin-top: -0.5px;
    height: 1px
}
/*
.frame.bottom:before,
.frame.bottom2:before {
    animation: bottom_left_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-animation: bottom_left_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    left: 90px;
    right: 50%;
    margin-right: 100px
}

.frame.bottom:after,
.frame.bottom2:after {
    animation: bottom_right_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-animation: bottom_right_frame 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    left: 50%;
    right: 90px;
    margin-left: 100px
}
*/
.frame.right,
.frame.left {
    top: 0;
    width: 90px;
    height: 100%
}

.frame.right:before,
.frame.left:before {
    animation: side_frames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-animation: side_frames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    content: '';
    position: absolute;
    background: url('../img/ui-trans-white-50.png');
    top: 180px;
    bottom: 180px;
    right: 50%;
    margin-right: -0.5px;
    width: 1px;
}

.frame.right {
    right: 0;
}

.frame.left {
    left: 0;
}

.fade-in {
    -webkit-animation: fade_in 2s cubic-bezier(0.39, 0.58, 0.57, 1) 0s 1 normal;
    -moz-animation: fade_in 2s cubic-bezier(0.39, 0.58, 0.57, 1) 0s 1 normal;
    -ms-animation: fade_in 2s cubic-bezier(0.39, 0.58, 0.57, 1) 0s 1 normal;
    -o-animation: fade_in 2s cubic-bezier(0.39, 0.58, 0.57, 1) 0s 1 normal;
    animation: fade_in 2s cubic-bezier(0.39, 0.58, 0.57, 1) 0s 1 normal;
}

.word-cycle .cycle {
    white-space: nowrap;
}

.all-chevrons {
    position: relative;
    display: inline-block;
    margin: 0 12px;
    padding: 30px;
}

.all-chevrons .chevron-up-right {
    position: absolute;
    top: 1px;
    right: 1px;
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url('../img/white-chevron-up-right.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.all-chevrons .chevron-up-right {
    background: transparent url('../img/white-chevron-up-right-10px.png') no-repeat center
}

.all-chevrons .chevron-up-right {
    width: 10px;
    height: 10px;
}

.all-chevrons .chevron-down-left {
    position: absolute;
    bottom: 1px;
    left: 1px;
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url('../img/white-chevron-down-left.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.all-chevrons .chevron-down-left {
    background: transparent url('../img/white-chevron-down-left-10px.png') no-repeat center;
}

.all-chevrons .chevron-down-left {
    width: 10px;
    height: 10px;
}

.all-chevrons .chevron-up-left {
    position: absolute;
    top: 1px;
    left: 1px;
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url('../img/white-chevron-up-left.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.all-chevrons .chevron-up-left {
    background: transparent url('../img/white-chevron-up-left-10px.png') no-repeat center
}

.all-chevrons .chevron-up-left {
    width: 10px;
    height: 10px;
}

.all-chevrons .chevron-down-right {
    position: absolute;
    right: 1px;
    bottom: 1px;
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url('../img/white-chevron-down-right.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.all-chevrons .chevron-down-right {
    background: transparent url('../img/white-chevron-down-right-10px.png') no-repeat center;
}

.all-chevrons .chevron-down-right {
    width: 10px;
    height: 10px;
}

.font-b {
    color: #fff;
    font-family: 'Dosis', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}

h2 span {
    color: #fff;
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 25, 25, 0.3);
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.mask {
    background: url(../img/header-mask.png) no-repeat center bottom;
    background-size: cover;
}

.v-center-wrapper {
    white-space: nowrap;
    position: relative;
}

.v-center-content {
    position: absolute;
    margin: auto;
    top: -30px;
    right: -30px;
    bottom: 0;
    height: 100px;
    border-radius: 3px;
    z-index: 99;
}
.vcc2{
    left: -30px;
}
.vcc3{
    top: unset;
    bottom: unset;
    left: -30px;
}


.v-center {
    position: absolute;
    left: 50%;
    margin-left: -60px;
    bottom: 10px;
}

.v-center-wrap {
    white-space: nowrap
}

.v-center-wrap .v-center-cont {
    position: relative;
    z-index: 3;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    white-space: normal;
    top: 300px;
}

.v-center-wrap:after {
    display: inline-block;
    height: 100%;
    margin-right: -0.25em;
    content: '';
    vertical-align: middle
}

.button {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    text-decoration: none;
    color: #fff;
    border: 3px solid #A46B28;
    background-color: transparent;
    text-align: center;
    font-size: 1em;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #A46B28;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Dosis', Arial, Helvetica, sans-serif;
    line-height: 120px;
    width: 120px;
    height: 120px;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.pulse-button {

  position: relative;
  width: 120px;
  height: 120px;
  border: none;
  box-shadow: 0 0 0 0 #A46B28;
  background-color: #A46B28;
  box-shadow: 0 0 0 15px rgba(164, 107, 40,.35);
  cursor: pointer;
    -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
  
}
.pulse-button:hover 
{
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
.button.secondary {
    color: #fff;
    border: 3px solid #A46B28;
    line-height: 18px;
    padding-top: 40px;
}

.button.third {
    color: #000;
    border: 3px solid #A46B28;
    margin: 0 auto;
}

.button.third::after,
.button.third:focus,
.button.third:hover,
.button.third.active {
    background-color: #000;
    color: #fff;
}

.button::after,
.button:focus,
.button:hover,
.button.active {
}

.book1 .chevron-up-right,
.book3 .chevron-up-right {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    background: transparent url('../img/white-chevron-up-right.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.book1 .chevron-down-left,
.book3 .chevron-down-left {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    background: transparent url('../img/white-chevron-down-left.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.book2 .chevron-down-right {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    display: block;
    width: 25px;
    height: 25px;
    background: transparent url('../img/white-chevron-down-right.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.book2 .chevron-up-left {
    position: absolute;
    top: 0;
    left: 20px;
    opacity: 0;
    display: block;
    width: 35px;
    height: 35px;
    background: transparent url('../img/white-chevron-up-left.png') no-repeat center;
    background-size: contain;
    -webkit-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -moz-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -ms-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    -o-transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    transition: all 0.125s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}

.book1:hover .chevron-up-right,
.book3:hover .chevron-up-right {
    top: 20px;
    right: 20px;
    opacity: 1
}

.book1:hover .chevron-down-left,
.book3:hover .chevron-down-left {
    bottom: 20px;
    left: 20px;
    opacity: 1
}

.book2:hover .chevron-up-left {
    top: 20px;
    left: 20px;
    opacity: 1
}

.book2:hover .chevron-down-right {
    right: 20px;
    bottom: 20px;
    opacity: 1
}

.book1:hover .button.secondary,
.book2:hover .button.secondary,
.book3:hover .button.secondary,
{
    color: #222;
    background-color: #fff
}

header.container {
    position: relative;
    height: 100%;
}

header .intro-book {
    position: relative;
}

#onas {
    background-color: #222;
}

#cennik,
#smedia {
    background-color: #fff;
}

#oferta {
    background-color: #eee;
}

.book1 {
    background-image: url('../img/blok1.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 800px;
}

.book11 {
    background-image: url('../img/of1.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 550px;
}

.pad {
    background-color: #222;
    padding: 0px 3% 0px 3%;
    min-height: 800px;
}

.pad0 {
    background-color: #eee;
    padding: 0px 3% 0px 3%;
    min-height: 1000px;
}

.pad1 {
    background: url('../img/img5.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.pad2 {
    padding: 70px 3% 0px 3%;
}
#oferta .pad2{
    padding: 10px 3% 0px 3%;
}

.pad3 {
    background-color: #fff;
    padding: 0px 3% 0px 3%;
}

.pado1 {
    background-color: #fff;
    padding: 0px 3% 0px 3%;
    min-height: 550px;
}

.pado2 {
    background-color: #eee;
    padding: 30px 3% 30px 3%;
    min-height: 400px;
}

.pado3 {
    background-color: #eee;
    padding: 30px 3% 30px 3%;
    min-height: 100px;
}

.pad4 {
    background-color: rgba(30, 30, 30, .5);
    padding: 100px 0px 200px 0px;
    margin: 0;
}

.pad5 {
    margin-top: -20px;
    background-color: #eee;
    padding: 0px 3% 0px 3%;
}

.pad6 {
    margin-top: 0px;
    background-color: #eee;
    padding: 0px 3% 350px 3%;
}

.mar50 {
    margin-top: 50px;
}

.schemat {
    padding-top: 20px;
    padding-bottom: 30px;
}

.col-md-3 {
    padding-left: 0;
    padding-right: 0;
}

.overlay {
    min-height: 440px;
    
    padding: 20px;
    z-index: 2;
    position: relative;
    margin-bottom: 30px;
    transition: all 300ms ease-in-out;
}
.overlay:after{
    transition: all 300ms ease-in-out;
}
.overlay:hover:after{
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255, .65);
    z-index: -2;
    transition: all 300ms ease-in-out;
}
/*
.overlay:hover {
    background: rgba(0, 0, 0, .6);
}
*/
.oferta2 .container{
    width: 90%;
    margin: 0 auto;
    padding: 40px 0;
}
.oferta2{
    background: #1B1112;
}
.oferta2 .button{
    width: 90px;
    height: 90px;
    position: relative;
}
.oferta2 .button span{
    position: absolute;
    line-height: 90px;
    font-size: 1.4em;
    left: -10px;
    right: 0;
    display: block;
    margin: 0 auto;
    text-shadow: 1px 1px 10px #000;
}
.top-oferta-wrap{
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}
.top-oferta-wrap img{
    height: 150px;
    width: auto;
    display: block;
    margin: 40px auto 20px;
    opacity: 0.15;
}

.top-oferta-wrap h4{
    margin: 0;
    padding: 0;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 22px;
    color: #fff;
    opacity: 0.5;
    text-align: center;
}


.heading4{
    opacity: 1;
    display: block;
    color: #A46B28;
    font-size: 20px;
    text-shadow: 1px 1px #000;
    font-weight: 700;
}
.subheading3{
    opacity: 0;
    transition: all 300ms ease-in-out;
}
/*
.heading-rotate{
    color: #A46B28;
    transform: rotate(90deg);
    position: absolute;
    left: -70px;
    top: 140px;
    font-size: 18px;
    text-shadow: 0 0 20px #fff;
    transition: all 300ms ease-in-out;
    font-weight: 700;
}
.karta3 .heading-rotate{
    left: -120px;
    top: 150px;
}
.karta5 .heading-rotate{
    left: -110px;
}
.karta6 .heading-rotate{
    left: -120px;
    top: 160px;
}
.karta7 .heading-rotate{
    left: -110px;
}
.karta8 .heading-rotate{
    left: -50px;
}
.karta9 .heading-rotate{
    left: -100px;
}
.overlay:hover .heading-rotate{
    position: unset;
    transform: rotate(0);
    color: #000;
    font-size: 20px;
    text-shadow: 1px 1px 5px #fff;
}
*/
.overlay:hover .subheading3{
    opacity: 1;
}
.overlay:hover .heading4{
    font-size: 20px;
    text-shadow: 1px 1px #000;
}

.karta1 {
    background: url('../img/of3.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.karta2 {
    background: url('../img/of6.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.karta3 {
    background: url('../img/of1.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.karta4 {
    background: url('../img/karta4.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.karta5 {
    background: url('../img/of2.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.karta6 {
    background: url('../img/newsletter.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.karta7 {
    background: url('../img/sprzedaż.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.karta8 {
    background: url('../img/karta8.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.karta9 {
    background: url('../img/karta9.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.card1,
.card2 {
    display: block;
    background-color: #fff;
    border: 1px solid #D8D8D8;
    border-radius: 7px;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card5,
.card6 {
    max-width: 340px;
}

.card5 {
    float: right;
}

.card6 {
    clear: both;
}

.checkboxes label,
.checkboxes input {
    display: inline-block;
}

.checkboxes input {
    margin-right: 10px !important;
}

.ad-iluzja {
    color: #666;
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 14px;
}

.card1 {
    min-height: 620px;
}

.card2 {
    min-height: 400px;
}
#karty3 .card1, #karty4 .card1{
    min-height: 500px;
}
#karty4 .card1{
    min-height: 580px;
}

.card1 h4,
.card2 h4 {
    padding-top: 15px;
    font-size: 16px;
    color: #333;
    text-transform: uppercase;
}

.cena {
    margin-top: -10px;
}

.cena .c1 {
    font-size: 16px;
    color: #A0A0A0;
}

.cena .c2 {
    font-size: 100px;
    color: #A36920;
}

.cena .c3 {
    position: relative;
    font-size: 36px;
    color: #A0A0A0;
    bottom: 40px;
    font-weight: 500;
}

.cenaopis {
    padding-top: 10px;
}

.cenaopis p {
    text-align: left;
    font-size: 16px;
    color: #A0A0A0;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -5px;
    border-bottom: solid 1px #D8D8D8;
    line-height: 20px;
    padding-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.cenaopis .fa {
    position: absolute;
    left: 0;
    font-size: 20px;
    color: #aaa;
    top: 2px;
    
}


.cardbut,
.cardbut2 {
    text-align: center;
    width: 90%;
    border: 1px solid #A36920;
    border-radius: 15px;
    padding: 10px 10px;
    color: #222;
    font-size: 20px;
    background-color: #fff;
    margin-bottom: 15px;
    align-self: center;
}

.cardbut:hover,
.cardbut2:hover {
    color: #fff;
    background-color: #A36920;
}

.cardbut2 {
    margin-top: 57px;
}

#contact>.container>.row>.col-md-6 {
    padding-left: 0;
    padding-right: 0;
}

#contact>.container>.row>.col-md-6 .pad4 h3 {
    padding-left: 20px;
}

.ilogo img {
    height: 80px;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    margin: -15px auto 0 auto;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.arrow.left.dark {
    border-right: 15px solid #222;
}

.arrow.left {
    right: 0px;
    z-index: 500;
}

.arrow.right {
    left: 0px;
    z-index: 500;
}

.arrow.right.light {
    border-left: 15px solid #eee;
}

.book2 {
    background: url('../img/blok22.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 800px;
}

.book12 {
    background: url('../img/karta2.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 500px;
}

.book3 {
    background-image: url('../img/img3.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 800px;
}

.book33 {
    background-image: url('../img/img3.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 550px;
}

.book13 {
    background-image: url('../img/karta1.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 500px;
}

.book14 {
    background-image: url('../img/karta4.jpg');
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 500px;
}

.intro-book img {
    display: block;
    margin: 0 auto;
    width: 100%;
    transition: all 0.3s ease;
    max-width: 450px;
}

@media(max-width:991px) {
    .intro-book img {
        width: 450px;
        position: relative;
        margin: 0 auto;
    }
}

@media(max-width:768px) {
    .book1,
    .book2 {
        min-height: 300px;
    }
    .book3 {
        min-height: 400px;
    }
}


/** how **/
.how-wrap{
    background: #eee;
    padding: 50px 100px;
    overflow: auto;
}
.how-col{
    display: inline-block;
    height: 140px;
    margin: 0 5px;
}
.how-col img{
    height: 80px;
    margin: 0 auto;
    width: auto;
    display: block;
    
}
.how-tb{
    color: #A46B28;
    font-size: 16px;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 600;
    height: 20px;
}
.dotted{
    background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
    background-position: top;
    background-size: 20px 8px;
    background-repeat: repeat-x;
    height:4px;
    position: relative;
    top: 60px;
}
.hcs{
    position: relative;
    width: 150px;
}
.hcs2{
    position: relative;
    width: 180px;
}
.hcs3{
    position: relative;
    width: 100px;
}
.htb1{
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.htb2{
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    margin: 0 auto;
}



header .intro-text {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

header .intro-text h3 {
    text-shadow: 0 0 5px white
}

@media(max-width:768px) {
    .intro-book img {
        width: 250px;
        position: relative;
        margin: 0 auto;
        bottom: -160px;
    }
}

.container {
    padding: 0 0px;
    width: 100%;
}

.row {
    margin: 0;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.main-nav {}

.navbar {
    background-color: #D4D4D4;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .05);
    margin-bottom: 0px;
    padding-right: 5%;
    min-height: 90px;
}

.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
    padding: 25px 0;
    display: inline;
    margin-left: 100px;
}

.navbar .navbar-brand img {
    padding-left: 15px;
    padding-top: 0;
}

@media(max-width:768px) {
    .navbar .navbar-brand img {
        padding-left: 30px;
        padding-top: 0;
    }
    .navbar-default .navbar-nav {
        padding-top: 30px;
    }
}

.navbar-default .navbar-nav > li {
    padding-left: 10px;
    position: relative;
    margin-left: 40px;
    line-height: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
    font-family: 'Dosis', sans-serif;
    line-height: 60px;
    font-weight: 600;
}

.navbar-default .navbar-nav > li:after {
    position: absolute;
    display: block;
    color: #A46B28;
    top: 3px;
    content: '\f0c8';
    left: 0;
    margin-top: 3px;
    transition: all 0.3s ease;
    font-family: FontAwesome;
    opacity: 0;
}

.navbar-default .navbar-nav > li:hover:after,
.navbar-default .navbar-nav > li.active > a {
    opacity: 1;
}

@media(min-width:768px) {
    .navbar-default .navbar-nav > li > a:hover:after,
    .navbar-default .navbar-nav > li > a:focus:after,
    .navbar-default .navbar-nav > li.active > a:after {
        width: 100%;
    }
}

.navbar-nav > li > a.btn {
    color: white;
    margin: 0;
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    margin-top: -5px;
    border-width: 0px;
}

.navbar-nav > li > a.btn.btn-green {
    background: white;
    color: #7cc576;
    border-color: #7cc576;
}

.navbar-nav > li > a.btn.btn-green:hover {
    background: #7cc576;
    border: 2px solid #7cc576;
    color: white;
}

.navbar-nav > li > a.btn:after {
    display: none;
}

.navbar.nav-fixed .navbar-nav > li > a.btn {
    width: auto;
    padding: 15px;
    border-width: 2px;
}

.nav-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

header .heading {
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    color: white;
    font-size: 40px;
    margin: 10px 0;
}

header .subheading {
    color: white;
    opacity: .5;
    font-size: 24px;
    margin: 10px 0px 30px;
}

header p {
    margin: 20px 0;
    font-size: 20px;
    color: white;
    line-height: 34px;
}

section {
    padding: 0px 0;
}

.btn {
    display: inline-block;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 15px 30px;
    margin: 20px 10px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.btn.btn-green {
    background: #E31E23;
    border: 3px solid #E31E23;
    color: white;
}

.btn.btn-green:hover {
    background: #96db90;
    border-color: #96db90;
}

.btn.btn-white {
    border: 3px solid white;
    background: transparent;
    color: white;
}

.btn.btn-white:hover {
    background: white;
    color: #7cc576;
}

.btn .price {
    font-family: 'Dosis', sans-serif;
    margin-left: 10px;
}

.btn-dropdown {
    border: 1px solid #cccccc;
    font-family: 'Dosis', sans-serif;
    color: #888888;
}

.btn-dropdown span.caret {
    margin-left: 60px;
}

.book-preview {
    display: inline-block;
    max-width: 400px;
    width: 80%;
    position: relative;
}

.book-preview .background-device {
    width: 100%;
    position: absolute;
}

footer {
    width: 100%;
    background: white;
}

footer .social {
    padding: 20px 0;
}

footer .social a {
    margin: 0 3px;
    width: 30px;
    height: 30px;
    line-height: 32px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    font-size: 15px;
    display: inline-block;
    text-align: center;
    position: relative;
    color: #cccccc;
    z-index: 2;
}

footer .social a:before {
    content: ' ';
    z-index: -1;
    border-radius: 50%;
    transition: all 0.15s ease;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    background: black;
}

footer .social a:hover {
    color: white;
}

footer .social a:hover:before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

footer .social a:active:before {
    width: 200%;
    height: 200%;
    opacity: 0;
    top: -50%;
    left: -50%;
}

footer .social a.facebook:before {
    background: #3b5998;
}

footer .social a.twitter:before {
    background: #55acee;
}

footer .social a.dribbble:before {
    background: #ea4c89;
}

footer .social a.vine:before {
    background: #00b488;
}

footer .social a.google-plus:before {
    background: #dd4b39;
}

footer .social a.facebook:active {
    color: #3b5998;
}

footer .social a.twitter:active {
    color: #55acee;
}

footer .social a.dribbble:active {
    color: #ea4c89;
}

footer .social a.vine:active {
    color: #00b488;
}

footer .social a.google-plus:active {
    color: #dd4b39;
}

@media(max-width:768px) {
    .text-left-mobile {
        text-align: left;
    }
    .text-center-mobile {
        text-align: center;
    }
}

.author {
    margin-bottom: 40px;
}

.author .author-name {
    padding-top: 25px;
}

.author .pic {
    width: 100%;
}

@media(max-width:768px) {
    .author .pic {
        width: 150px;
    }
}

.author .author-name .heading {
    margin-bottom: 0;
}

.author .author-name .subheading {
    margin-top: 0;
}

.locations {
    margin-top: 60px;
}

.locations .location {
    margin-bottom: 40px;
}

.locations .location .date {
    color: #6a727b;
    display: inline-block;
    margin-right: 20px;
}

.locations .location .date .fa {
    color: #bbbbbb;
    margin-right: 10px;
    font-size: 20px;
}

.locations .location .time {
    color: #6a727b;
    display: inline-block;
    margin-right: 20px;
}

.locations .location .time .fa {
    color: #bbbbbb;
    margin-right: 10px;
    font-size: 20px;
}

.locations .location .directions {
    display: inline-block;
}

.locations .location .directions a {
    color: #ffc107;
    font-size: 20px;
}

.locations .location.done {
    margin-bottom: 20px;
}

.locations .location.done .heading {
    color: #bbbbbb;
    text-decoration: line-through;
}

.call-to-action .top-fit {
    margin-top: 15px;
    margin-bottom: 0;
}

#contact{
    background: url('../img/kontakt.jpg') no-repeat;
    background-size: cover;
    background-position: 50% 0;
    padding: 0 50px 40px;
}
.contact-info-wrap{
    float: right;
    margin: 50px 0 0;
}
.ctc-sq{
    border: 1px solid #A36920;
    height: 50px;
    width: 50px;
    border-radius: 8px;
    background: #A36920;
    transition: all 300ms ease-in-out;
    display: inline-block;
    box-shadow: 0 0 0 10px rgba(164, 107, 40,.35);
    -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}
.ctc-sq i{
    color: #fff;
    font-size: 30px;
    text-align: center;
    display: block;
    line-height: 50px;
}
.ctc-sq:hover{
    border-radius: 50%;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.sq-text{
    padding-left: 15px;
    padding-right: 25px;
    font-size: 18px;
    vertical-align: super;
}



.contact-details .details {
    margin-top: 30px;
    padding-left: 20px;
}

.contact-details .details .fa {
    margin-top: 30px;
    padding-left: 20px;
    font-size: 45px;
    display: inline-block;
}

.form-control {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #A36920;
    background-color: #fff;
    background-image: none;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #A36920;
    outline: 0;
}

.form-control::-moz-placeholder {
    color: #444;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
     color: #444;
}

.form-control::-webkit-input-placeholder {
     color: #444;
}

.btn.btn-green.contact-button {
    margin: 15px;
    float: right;
    background-color: #A36920;
    border-radius: 10px;
    font-weight: 400;
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-color: #A36920;
    padding: 8px 10px;
}

button:focus {
    outline: 0;
}

#sample-form {
    padding: 20px 0;
    display: none;
}

#sample-form .sign-up-button {
    padding: 10px 25px;
    margin: 15px 0;
    width: 100%;
}

.notification-box {
    width: 30%;
    padding: 10px;
    background: #7cc576;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
    border-radius: 3px;
    text-align: center;
    color: white;
    position: fixed;
    left: 35%;
    bottom: -40px;
    z-index: 4000;
    opacity: 0;
    transition: all 0.5s ease;
}

.notification-box.active {
    opacity: 1;
    bottom: 40px;
}

.notification-box > .content {
    color: #bbb;
    border: 0;
    padding: 0;
    text-align: center;
}

.form-incomplete {
    border: 1px solid #bb5555;
}

#wrapper {
    transition: all 0.3s ease;
    width: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
}

#wrapper.behind {
    position: relative;
    transform: scale(0.8) translateY(-5%);
}

.mobile-nav {
    position: fixed;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    z-index: 9500;
    color: #222;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, .95);
    display: table;
    opacity: 0;
}

.mobile-nav.active {
    top: 0;
    opacity: 1;
}

@media(min-width:991px) {
    .mobile-nav {
        display: none;
    }
}

.mobile-nav > ul {
    display: table-cell;
    vertical-align: middle;
    list-style: none;
    width: 100%;
    padding: 0;
    text-align: center;
    overflow-y: hidden;
}

.mobile-nav > ul > li > a {
    margin: 10px 0;
    font-size: 16px;
}

.mobile-nav a {
    color: #888;
}

.mobile-nav a.close-btn {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 10px);
    color: #666;
    font-size: 24px;
}

#check,
#check2 {
    display: none;
}

.main,
.containers {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -90px;
    width: 180px;
    height: 180px;
    border-radius: 5%;
}

.main {
    background-color: #A46B28;
    box-shadow: 1px 2px 6px #A46B28;
    cursor: pointer;
    z-index: 50;
}

.main:hover {
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.main:active {
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
    background-color: #000;
}

.main .title {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    font-size: 5em;
    line-height: 80px;
    text-align: center;
    color: #fafafa;
}

.containers {
    z-index: 10;
}

.plate {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 110px;
    height: 110px;
    opacity: 0;
    border-radius: 5%;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

.plate:nth-of-type(1) {
    background: url('../foto/foto1.jpg');
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 23;
}

.plate:nth-of-type(2) {
    background: url('../foto/detailsquad.jpg');
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    z-index: 22;
}

.plate:nth-of-type(3) {
    background: url('../foto/foto40.jpg');
    -webkit-transition-delay: 0.15s;
    -moz-transition-delay: 0.15s;
    transition-delay: 0.15s;
    z-index: 21;
}

.plate:nth-of-type(4) {
    background: url('../foto/foto4.jpg');
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
    z-index: 20;
}

.plate:nth-of-type(5) {
    background: url('../foto/foto5.jpg');
    -webkit-transition-delay: 0.25s;
    -moz-transition-delay: 0.25s;
    transition-delay: 0.25s;
    z-index: 19;
}

.plate:nth-of-type(6) {
    background: url('../foto/zarandkuj.jpg');
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
    z-index: 18;
}

.plate:nth-of-type(7) {
    background: url('../foto/pozamiatane.jpg');
    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    transition-delay: 0.35s;
    z-index: 17;
}

.plate:nth-of-type(8) {
    background: url('../foto/foto8.jpg');
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
    z-index: 16;
}

.plate:nth-of-type(9) {
    background: url('../foto/foto36.jpg');
    -webkit-transition-delay: 0.45s;
    -moz-transition-delay: 0.45s;
    transition-delay: 0.45s;
    z-index: 15;
}

.plate:nth-of-type(10) {
    background: url('../foto/foto10.jpg');
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
    z-index: 14;
}

.plate:nth-of-type(11) {
    background: url('../foto/foto11.jpg');
    -webkit-transition-delay: 0.55s;
    -moz-transition-delay: 0.55s;
    transition-delay: 0.55s;
    z-index: 13;
}

.plate:nth-of-type(12) {
    background: url('../foto/foto12.jpg');
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    transition-delay: 0.6s;
    z-index: 12;
}

.plate:nth-of-type(13) {
    background: url('../foto/zarandkuj1-logo.jpg');
    -webkit-transition-delay: 0.65s;
    -moz-transition-delay: 0.65s;
    transition-delay: 0.65s;
    z-index: 11;
}

.plate:nth-of-type(14) {
    background: url('../foto/Ka_ja1 wizytówka.jpg');
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    transition-delay: 0.7s;
    z-index: 10;
}

.plate:nth-of-type(15) {
    background: url('../foto/wizytówka1-nadkreska.jpg');
    -webkit-transition-delay: 0.75s;
    -moz-transition-delay: 0.75s;
    transition-delay: 0.75s;
    z-index: 9;
}

.plate:nth-of-type(15) {
    background: url('../foto/wizytówka1-nadkreska.jpg');
    -webkit-transition-delay: 0.75s;
    -moz-transition-delay: 0.75s;
    transition-delay: 0.75s;
    z-index: 9;
}

.plate:nth-of-type(16) {
    background: url('../foto/nadkreska.jpg');
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay: 0.8s;
    transition-delay: 0.8s;
    z-index: 8;
}

.plate:nth-of-type(17) {
    background: url('../foto/foto17.jpg');
    -webkit-transition-delay: 0.85s;
    -moz-transition-delay: 0.85s;
    transition-delay: 0.85s;
    z-index: 7;
}

.plate:nth-of-type(18) {
    background: url('../foto/foto18.jpg');
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    transition-delay: 0.9s;
    z-index: 6;
}

.plate:nth-of-type(19) {
    background: url('../foto/foto19.jpg');
    -webkit-transition-delay: 0.95s;
    -moz-transition-delay: 0.95s;
    transition-delay: 0.95s;
}

.plate:nth-of-type(20) {
    background: url('../foto/foto20.jpg');
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    transition-delay: 1s;
}

.plate:nth-of-type(21) {
    background: url('../foto/wieszak-shop.jpg');
    -webkit-transition-delay: 1.05s;
    -moz-transition-delay: 1.05s;
    transition-delay: 1.05s;
}

.plate:nth-of-type(22) {
    background: url('../foto/foto38.jpg');
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.plate:nth-of-type(1),
.plate:nth-of-type(2),
.plate:nth-of-type(3),
.plate:nth-of-type(4),
.plate:nth-of-type(5),
.plate:nth-of-type(6),
.plate:nth-of-type(7),
.plate:nth-of-type(8),
.plate:nth-of-type(9),
.plate:nth-of-type(10),
.plate:nth-of-type(11),
.plate:nth-of-type(12),
.plate:nth-of-type(13),
.plate:nth-of-type(14),
.plate:nth-of-type(15),
.plate:nth-of-type(16),
.plate:nth-of-type(17),
.plate:nth-of-type(18),
.plate:nth-of-type(19),
.plate:nth-of-type(20),
.plate:nth-of-type(21),
.plate:nth-of-type(22) {
    background-repeat: none;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
}

.opis {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5%;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.opis h4 {
    opacity: 1;
    margin: 0 auto;
    color: #eee;
    padding-top: 40px;
}

.opis:hover {
    opacity: .75;
    background-color: #ccc;
    box-shadow: inset 0 0 0 110px rgba(247, 122, 51, 0.8), inset 0 0 0 16px rgba(255, 255, 255, 1), 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}

#check:checked ~ .main + .containers .plate {
    opacity: 1;
}

#check:checked ~ .main + .containers .plate:hover {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

#check:checked ~ .main + .containers .plate:nth-of-type(1) {
    top: -160%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(2) {
    top: -110%;
    right: -110%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(3) {
    right: -160%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(4) {
    right: -110%;
    bottom: -110%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(5) {
    bottom: -160%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(6) {
    bottom: -110%;
    left: -110%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(7) {
    left: -160%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(8) {
    top: -110%;
    left: -110%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(9) {
    top: -280%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(10) {
    top: -235%;
    right: -115%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(11) {
    top: -160%;
    right: -220%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(12) {
    top: -50%;
    right: -270%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(13) {
    bottom: -70%;
    right: -260%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(14) {
    bottom: -180%;
    right: -210%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(15) {
    bottom: -230%;
    right: -100%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(16) {
    bottom: -280%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(17) {
    bottom: -230%;
    left: -115%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(18) {
    bottom: -160%;
    left: -220%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(19) {
    bottom: -50%;
    left: -270%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(20) {
    top: -70%;
    left: -260%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(21) {
    top: -180%;
    left: -210%;
}

#check:checked ~ .main + .containers .plate:nth-of-type(22) {
    top: -235%;
    left: -110%;
}

@media only screen and (max-width:991px) {
    .iconlogo {
        position: absolute;
        top: 50%;
        padding: 0px 40px 0px 40px;
        transform: translateY(-50%);
        margin: 0 auto;
    }
}

@media only screen and (max-width:768px) {
    .iconlogo {
        position: absolute;
        top: 50%;
        padding: 0px 40px 0px 40px;
        transform: translateY(-50%);
    }
    .main,
    .containers {
        width: 90px;
        height: 90px;
        margin-top: -45px;
    }
    .plate {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 60px;
        opacity: 0;
        border-radius: 5%;
        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }
}

.md-effect-8.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.md-effect-8 .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -moz-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.md-show.md-effect-8 .md-content {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding: 0;
    margin: 0;
}

.md-show {
    visibility: visible;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(50, 50, 50, 0.8);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

.md-content {
    color: #333;
    background: #fff;
    position: relative;
    margin: 0 auto;
}

.md-content h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    font-size: 2.4em;
    font-weight: 300;
    opacity: 0.8;
    background: #e31e24;
    color: #fff;
}

.md-content > div {
    padding: 0;
    margin: 0;
    font-weight: 300;
}

.md-content .md-left {
    float: left;
    display: block;
    width: 50%;
    overflow: hidden;
    height: 100%;
}

.md-content .md-left img {
    border: 0;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
    margin-left: -101px;
    margin-top: -28px;
}

.md-content .mask {
    position: relative;
    height: 345.5px;
    overflow: hidden;
    float: left;
}

.md-content .md-right {
    float: right;
    display: block;
    width: 50%;
    height: 345px;
    background: #fff;
    position: relative;
}

.md-content .md-right h3 {
    color: #333;
    background: none;
}

.md-content > div p {
    margin: 0;
    padding: 10px 20px 0 20px;
    font-size: 16px;
    line-height: 1.52em;
}

.md-content > div i {
    font-size: 1.2em;
    margin: 0;
    padding: 20px 0 5px 20px;
}

.md-content > div ul {
    margin: 0;
    padding: 0 0 5px 20px;
}

.md-content > div ul li {
    padding: 0px 0;
}

.md-content button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin-bottom: 10px;
}

.md-close {
    border: none;
    padding: 0.6em 1.2em;
    background: #e31e24;
    color: #fff;
    font-family: 'Dosis', sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
    margin: 0px;
    border-radius: 2px;
}

.md-content button:hover {
    background: #A5281B;
}

.md-trigger {
    cursor: pointer;
}

.prost1 {
    position: relative;
    left: 50%;
    margin-left: -75px;
    display: block;
    width: 150px;
    height: 100px;
    background-color: #E31E24;
    border-radius: 10px;
    text-align: center;
    padding-top: 7px;
}

.prost2 {
    margin: 30px 0px 0px -58px;
    display: block;
    width: 130px;
    height: 130px;
    background-color: #e31e24;
    text-align: center;
    border-radius: 0%;
    border: 5px dashed #fff;
    transition: all 1s;
    padding-top: 15px;
}

.prost3 {
    position: absolute;
    top: 45px;
    right: -50px;
    display: block;
    width: 130px;
    height: 130px;
    background-color: #e31e24;
    border-radius: 0%;
    text-align: center;
    border: 5px dashed #fff;
    transition: all 1s;
    padding-top: 10px;
}

.prost2:hover,
.prost3:hover,
.prost4:hover {
    border-radius: 50%;
}

.prost4 {
    position: absolute;
    left: 50%;
    margin-top: -50px;
    margin-left: 60px;
    padding-top: 10px;
    display: block;
    width: 130px;
    height: 130px;
    background-color: #e31e24;
    border-radius: 0%;
    text-align: center;
    border: 5px dashed #fff;
    transition: all 1s;
}

.prost1 p,
.prost2 p {
    margin-top: 0px;
    font: 16px "Dosis", sans-serif;
    color: #fff;
}

.prost2 p,
.prost3 p {
    margin-top: 0px;
    font: 16px "Dosis", sans-serif;
    color: #fff;
}

.prost4 p {
    margin-top: 0;
    font: 16px "Dosis", sans-serif;
    color: #fff;
}

.dotted-path {
    background-image: url(../img/dot.svg);
    background-position: 0 0;
    position: relative;
    clear: both
}

.no-svg .dotted-path {
    background-image: url(../img/dot.png);
}

.dotted-path.center {
    margin: 0 auto;
}

.dotted-path.vertical {
    width: 12px;
    background-position: center 0;
}

.dotted-path.vertical.dots-1 {
    height: 1px;
}

.dotted-path.vertical.dots-2 {
    height: 15px;
}

.dotted-path.vertical.dots-2.odm {
    top: -2px;
    left: -3px;
}

.dotted-path.vertical.dots-2.odm2 {
    top: -2px;
    right: 0;
}

.dotted-path.vertical.dots-3 {
    height: 48px;
}

.dotted-path.vertical.dots-4 {
    height: 64px;
}

.dotted-path.vertical.dots-5 {
    height: 80px;
}

.dotted-path.vertical.dots-6 {
    height: 96px;
}

.dotted-path.vertical.dots-12 {
    height: 192px;
}

.dotted-path.vertical.start-arrow {
    margin-top: 11px;
}

.dotted-path.vertical.start-arrow:before {
    top: -11px;
}

.dotted-path.vertical.end-arrow {
    margin-bottom: 11px;
}

.dotted-path.vertical.end-arrow:after {
    bottom: -11px;
}

.dotted-path.vertical.start-arrow:before,
.dotted-path.vertical.end-arrow:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 6px 0 6px;
    border-color: #E31E24 transparent transparent transparent;
    position: absolute;
    left: 0;
    right: 0;
}




/** podstrony **/
.portf-single{
    
    background: #eee;
}
.portf-bg{
    width: 90%;
    padding: 50px 0;
    margin: 0 auto;
}

.p-back{
    width: 85%;
    margin: 35px auto 0;
    display: block;
}
.p-back--2{
    margin: 15px auto;
}
.p-back a{
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    padding-left: 25px;
}
.p-back a:before{
    position: absolute;
    left: 0;
    font-size: 12px;
    color: #A36920;
    font-family: FontAwesome;
    content: "\f0c8";
    top: 2px;
}
.p-back a:hover{
    color: #A36920;
}

.heading5{
    color: #A36920;
    font-size: 36px;
    font-weight: 500;
    margin-top: 40px;
}
.sq-left{
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
    color: #A36920;
    padding-left: 35px;
}
.sq-left:before{
    position: absolute;
    left: 0;
    font-size: 22px;
    color: #A36920;
    font-family: FontAwesome;
    content: "\f0c8";
    top: -2px;
}
.sq-left a{
    color: #A36920;
}
.sq-left a:hover{
    color: #999;
}
.sq-left small{
    font-size: 65%;
    text-transform: lowercase;
    transition: all 300ms ease-in-out;
}
.sq-left a:hover small{
    color: #000;
}
.subheading5{
    color: #A36920;
    margin-top: 35px;
}

.sq-list{
    margin: 0;
    padding: 0;
    margin-top: 25px;
}
.sq-list li{
    list-style: none;
    font-size: 14px;
    text-transform: uppercase;
    color: #A36920;
    position: relative;
    padding-left: 30px;
}
.sq-list li:before{
    position: absolute;
    left: 0;
    font-size: 14px;
    color: #A36920;
    font-family: FontAwesome;
    content: "\f0c8";
}
.iluzja-color{
    color: #A36920;
    font-size: 16px;
    line-height: 24px;
}
.vcc4{
    top: unset;
    bottom: -100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    text-align: center;
}
.bs1{
    font-size: 12px;
}
.portf-gallery{
    width: 90%;
    margin: 0 auto;
}
.p-img{
    box-sizing: border-box;
    padding: 20px;
}

.p-img img{
    object-fit: cover;
    height: 300px;
    width: 400px;
    display: block;
    background-position: 50% 50%;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(1);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(1);
 
 -ms-transform: scale(1);
 -ms-transition-duration: 0.6s; 
}
.p-img img:hover{
    box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
}






.portf-img{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 600px;
}
.w-bg{
    min-height: 450px;
}

.p-ats{
    background-image: url('../portf1/sesje1/ats1/ats1.jpg');
}
.p-happydom{
    background-image: url('../portf1/sesje1/happydom1/01.jpg');
}
.p-olimpiada{
    background-image: url('../portf1/sesje1/olimpiada1/02.jpg');
}
.p-ats-i{
    background-image: url('../portf1/identyfikacja2/ats1/01ats.jpg');
}
.p-kaja{
    background-image: url('../portf1/identyfikacja2/kaja1/kaja-logo.jpg');
}
.p-salon-euforia{
    background-image: url('../portf1/identyfikacja2/salon-euforia1/GRAFIKA-3.jpg');
}
.p-przedszkole-calineczka{
    background-image: url('../portf1/identyfikacja2/przedszkole-calineczka1/GRAFIKA-4.jpg');
}
.p-platinum-catering-o{
    background-image: url('../portf1/identyfikacja2/platinum-catering-o1/GRAFIKA-5.jpg');
}
.p-3xu{
    background-image: url('../portf1/identyfikacja2/3xu1/3xu-nakl.jpg');
}
.p-agromar{
    background-image: url('../portf1/identyfikacja2/agromar1/agromar-kalendarz.jpg');
}
.p-bazakred{
    background-image: url('../portf1/identyfikacja2/baza-kred1/baza-kredytow.jpg');
}
.p-biopar{
    background-image: url('../portf1/identyfikacja2/biopar1/biopar.jpg');
}
.p-mercbus{
    background-image: url('../portf1/sesje1/mercbus1/merc3.jpg');
}
.p-mercbus-sesja{
    background-image: url('../portf1/sesje1/mercbus1/merc3.jpg');
}
.p-amuzyk{
    background-image: url('../portf1/identyfikacja2/annamuzyk1/anna-muzyk.jpg');
}
.p-apn{
    background-image: url('../portf1/identyfikacja2/apn1/dfa-logo-big.jpg');
}
.p-blackhorse{
    background-image: url('../portf1/identyfikacja2/blackhorse1/black-horse.jpg');
}
.p-budolux{
    background-image: url('../portf1/identyfikacja2/budolux1/budo-wiz-big.jpg');
}
.p-carmelowa{
    background-image: url('../portf1/identyfikacja2/carmelova1/carmelowa.jpg');
}
.p-centertax{
    background-image: url('../portf1/identyfikacja2/centertax1/centertax.jpg');
}
.p-dds{
    background-image: url('../portf1/identyfikacja2/dds1/dds_logo.jpg');
}
.p-kaczor{
    background-image: url('../portf1/identyfikacja2/dkaczor1/kaczor3.jpg');
}
.p-frequency{
    background-image: url('../portf1/identyfikacja2/frequency1/frequency.jpg');
}
.p-anover{
    background-image: url('../portf1/identyfikacja2/anover1/anover-wizytowki.jpg');
}
.p-baz{
    background-image: url('../portf1/identyfikacja2/baz1/baz-logo.jpg');
}
.p-binkiewicz{
    background-image: url('../portf1/identyfikacja2/binkiewicz1/wizytowki.jpg');
}
.p-gam{
    background-image: url('../portf1/identyfikacja2/gam1/gam-logo.jpg');
}
.p-gestell{
    background-image: url('../portf1/identyfikacja2/gestell1/gestell.jpg');
}
.p-geocentrum{
    background-image: url('../portf1/identyfikacja2/geocentrum1/geocentrum.jpg');
}
.p-homecapital{
    background-image: url('../portf1/identyfikacja2/homecapital1/homecapital.jpg');
}
.p-jpyka{
    background-image: url('../portf1/identyfikacja2/jpyka1/neurotape-kupon.jpg');
}
.p-junext{
    background-image: url('../portf1/identyfikacja2/junext1/junext-wizytowka.jpg');
}
.p-krzyniobike{
    background-image: url('../portf1/identyfikacja2/krzyniobike1/krzyniobike-logo.jpg');
}
.p-labtechniq{
    background-image: url('../portf1/identyfikacja2/labtechniq1/mockup2-lab-big.jpg');
}
.p-lann{
    background-image: url('../portf1/identyfikacja2/lann1/lann-logo1.jpg');
}
.p-lekkastopa{
    background-image: url('../portf1/identyfikacja2/lekkastopa1/lekkastopa-ulotka.jpg');
}
.p-lookart{
    background-image: url('../portf1/identyfikacja2/lookart1/lookart1.jpg');
}
.p-miras{
    background-image: url('../portf1/identyfikacja2/miras1/taxi-wiz-big.jpg');
}
.p-musicpe{
    background-image: url('../portf1/identyfikacja2/musicpe1/music-naklejki.jpg');
}
.p-nadkreska{
    background-image: url('../portf1/identyfikacja2/nadkreska1/nadkreska-naklejki.jpg');
}
.p-odlotowi{
    background-image: url('../portf1/identyfikacja2/odlotowi1/odlotowi-logo.jpg');
}
.p-optitax{
    background-image: url('../portf1/identyfikacja2/optitax1/optitax1.jpg');
}
.p-pcleaner{
    background-image: url('../portf1/identyfikacja2/pcleaner1/partner-cleaner.jpg');
}
.p-pkhs{
    background-image: url('../portf1/identyfikacja2/pkhs1/projekt-wizytowka3.jpg');
}
.p-pozamiatane{
    background-image: url('../portf1/identyfikacja2/pozamiatane1/pozamiatane-logo.jpg');
}
.p-pwi{
    background-image: url('../portf1/identyfikacja2/pwi1/kubek-pwi.jpg');
}
.p-qbatour{
    background-image: url('../portf1/identyfikacja2/qbatour1/qbatour1.jpg');
}
.p-rockqueen{
    background-image: url('../portf1/identyfikacja2/rockqueen1/rock-queen-wizytówki.jpg');
}
.p-securx{
    background-image: url('../portf1/identyfikacja2/securx1/securx-wizytówki.jpg');
}
.p-sendor{
    background-image: url('../portf1/identyfikacja2/sendor1/sendor.jpg');
}
.p-soldar{
    background-image: url('../portf1/identyfikacja2/soldar1/soldar-katalog2.jpg');
}
.p-sprogoznik{
    background-image: url('../portf1/identyfikacja2/sprogoznik1/rogoznik1.jpg');
}
.p-sucha47{
    background-image: url('../portf1/identyfikacja2/sucha471/sucha_logo.jpg');
}
.p-sztukakul{
    background-image: url('../portf1/identyfikacja2/sztukakul1/sztukakulinarna-logo.jpg');
}
.p-velonews{
    background-image: url('../portf1/identyfikacja2/velonews1/velonews-grawer.jpg');
}
.p-vericon{
    background-image: url('../portf1/identyfikacja2/vericon1/vericon-katalog2.jpg');
}
.p-zarandkuj{
    background-image: url('../portf1/identyfikacja2/zarandkuj1/zarandkuj-logo.jpg');
}
.p-zdalnapomoc{
    background-image: url('../portf1/identyfikacja2/zdalnapomoc1/zdalna_logo.jpg');
}
.p-eurohotel-kce{
    background-image: url('../portf1/identyfikacja2/eurohotel-kce1/eurohotelkatowice3.jpg');
}
.p-eurohotel-sc{
    background-image: url('../portf1/identyfikacja2/eurohotel-sc1/eurohotelsosnowiec2.jpg');
}
.p-venta{
    background-image: url('../portf1/identyfikacja2/venta1/venta-logo.jpg');
}
.p-festiwalszycia{
    background-image: url('../portf1/identyfikacja2/festiwalszycia1/festiwal-www.jpg');
}
.p-zenobia{
    background-image: url('../portf1/identyfikacja2/zenobia1/zenobia-teczka.jpg');
}
.p-monmar{
    background-image: url('../portf1/identyfikacja2/monmar1/logo-mockup.jpg');
}
.p-ituran{
    background-image: url('../portf1/identyfikacja2/ituran1/ituran-screen.jpg');
}
.p-property{
    background-image: url('../portf1/identyfikacja2/property1/proprety-screen.jpg');
}



.w-cmyk{
    background-image: url('../portf1/www1/cmyk1/cmyk.jpg');
}
.w-ogrospec{
    background-image: url('../portf1/www1/ogrospec1/ogrospec.jpg');
}
.p-motodrozd{
    background-image: url('../portf1/identyfikacja2/motodrozd1/motodrozd.jpg');
}



.p-quattro{
    background-image: url('../portf1/identyfikacja2/quattro1/quattro-logo.jpg');
}
.w-miro{
    background-image: url('../portf1/www1/miro1/miro.jpg');
}
.w-siatex{
    background-image: url('../portf1/www1/siatex1/siatex.jpg');
}
.p-strzelnicza{
    background-image: url('../portf1/identyfikacja2/strzelnicza1/strzelnicza.jpg');
}
.p-detailsquad{
    background-image: url('../portf1/identyfikacja2/detailsquad1/detailsquad.jpg');
}

.w-bcp{
    background-image: url('../portf1/www1/bestcplus1/bestcplus.jpg');
}
.p-chromik{
    background-image: url('../portf1/identyfikacja2/chromik1/chromik.jpg');
}
.w-taxonline{
    background-image: url('../portf1/www1/taxonline241/taxonline24.jpg');
}
.p-zdesign{
    background-image: url('../portf1/identyfikacja2/zielendesign1/teczka-projekt.jpg');
}
.w-nazylaki{
    background-image: url('../portf1/identyfikacja2/nazylaki1/zylaki.jpg');
}
.p-attrans{
    background-image: url('../portf1/identyfikacja2/attrans1/attrans.jpg');
}
.p-dachdrew{
    background-image: url('../portf1/identyfikacja2/dachdrew1/dachdrew-logo.jpg');
}
.p-silesia{
    background-image: url('../portf1/identyfikacja2/silesia1/silesia.jpg');
}
.p-steward{
    background-image: url('../portf1/identyfikacja2/steward1/steward.jpg');
}
.p-trementi{
    background-image: url('../portf1/identyfikacja2/trementi1/trementi.jpg');
}
.p-wieszak{
    background-image: url('../portf1/identyfikacja2/wieszak1/wieszak.jpg');
}
.p-wistawio{
    background-image: url('../portf1/identyfikacja2/wistawio1/wistawio.jpg');
}
.p-zielonepod{
    background-image: url('../portf1/identyfikacja2/zielonepod1/zielone-logo.jpg');
}
.p-bajkowo{
    background-image: url('../portf1/identyfikacja2/bajkowo1/bajkowo.jpg');
}
.p-automagik{
    background-image: url('../portf1/identyfikacja2/automagik1/automagik.jpg');
}


.p-keszomaniacy{
    background-image: url('../portf1/identyfikacja2/keszomaniacy1/keszomaniacy.jpg');
}
.p-oilmag{
    background-image: url('../portf1/identyfikacja2/oilmag1/oilmag.jpg');
}
.p-yagoo{
    background-image: url('../portf1/identyfikacja2/yagoo1/yagoo.jpg');
}
.p-trackimo{
    background-image: url('../portf1/identyfikacja2/trackimo1/trackimo.jpg');
}
.p-ombra{
    background-image: url('../portf1/identyfikacja2/ombra1/ombra.jpg');
}
.p-wisniewski{
    background-image: url('../portf1/identyfikacja2/wisniewski1/wisniewski.jpg');
}
.p-marifashion{
    background-image: url('../portf1/identyfikacja2/marifashion1/marifashion.jpg');
}
.p-calineczka{
    background-image: url('../portf1/identyfikacja2/calineczka1/calineczka.jpg');
}
.p-spart{
    background-image: url('../portf1/www1/spart1/spart1.jpg');
}
.p-igpsport{
    background-image: url('../portf1/www1/igpsport1/igpsport1.jpg');
}

.p-ministerstwo{
    background-image: url('../portf1/identyfikacja2/ministerstwo1/MINISTERSTWO.jpg');
}
.p-gminasierakow{
    background-image: url('../portf1/identyfikacja2/gminasierakow1/gminasierakow.jpg');
}
.p-bwrewers{
    background-image: url('../portf1/www1/bwrewers1/bwrewers.jpg');
}

/*--------------------------------
OFERTA 
---------------------------------*/

.of-top{
    margin: 35px 0 0;
}
.of-top .container-fluid{
    padding: 0;
    margin: 0;
}
.of-top .container-fluid .col-md-6{
    padding: 0;
}
.of-top .sq-left{
    font-size: 18px;
    text-transform: inherit;
    padding-left: 20px;
    line-height: 24px;
}
.of-top .sq-left:before{
    font-size: 12px;
    top: 2px;
}
.of-top .of-subtext{
    font-size: 18px;
    text-align: justify;
    font-weight: 500;
    margin-bottom: 35px;
    line-height: 24px;
    color: #A36920;
}
.of-top ul{
    margin: 0;
    padding: 0;
    margin-left: 20px;
}
.of-top ul li{
    list-style: none;
    color: #A36920;
}

.of-top .mleft{
    color: #A36920;
    font-size: 16px;
    margin-left: 20px;
    line-height: 24px;
}

.of-top .obg-promo .of-subtext{
    margin-bottom: 15px;
}



.of-bg{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 560px;
}
.obg1{
    background-image: url('../img/of1.jpg');
}
.obg2{
    background-image: url('../img/of2.jpg');
    height: 650px;
}
.obg3{
    background-image: url('../img/of3.jpg');
}
.obg4{
    background-image: url('../img/newsletter.jpg');
}
.obg5{
    background-image: url('../img/sprzedaż.jpg');
}
.obg6{
    background-image: url('../img/of6.jpg');
}
.obg7{
    background-image: url('../img/karta8.jpg');
}
.obg8{
    background-image: url('../img/karta4.jpg');
}
.obg9{
    background-image: url('../img/karta9.jpg');
    min-height: 1010px;
}
.obg10{
    background-image: url('../img/karta9.jpg');
}
.of-top .of-text{
    padding: 0 80px 0 50px;
}


.of-title{
    display: block;
    margin: 40px 0;
    color: #A36920;
    font-size: 32px;
    text-transform: uppercase;
}
.of-form .of-title{
    text-align: center;
}
.of-form .of-subtext{
    font-size: 18px;
    text-align: justify;
    font-weight: 500;
    margin-bottom: 35px;
}
.of-form{
    font-weight: 600;
    width: 90%;
    margin: 0 auto;
    padding: 50px 0;
}
.of-form h5{
    color: #A36920;
    font-size: 24px;
}
.of-form p{
    color: #A36920;
    font-size: 16px;
    line-height: 24px;
}
.of-form .sq-list{
    margin-left: 40px;
}
.of-form .sq-list li{
    text-transform: inherit;
    padding-left: 15px;
}
.of-form .sq-list li:before{
    font-size: 10px;
    top: 2px;
}

.of-form .of-price{
    font-size: 94px;
    text-align: center;
    line-height: 100px;
    margin: 25px 0;
    font-weight: 400;
}
.of-form .form-control{
    border-radius: 5px;
    background: transparent;
}
.of-form .cardbut{
    background-color: transparent;
    transition: all 300ms ease-in-out;
}
.of-form .cardbut:hover{
    background: #A36920;
    color: #fff;
}


.pricing-pado{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.subhead{
    margin: 15px 0;
    padding-top: 0;
}
.sbhead1{
    margin: 15px 0;
}
.pricing-list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.pricing-list li{
    color: #888;
    text-transform: lowercase;
}





/* Global */

.portfolio-section {
    padding-bottom:40px;
    background-color: #F9F9F9;
}
.filter-section.pado3{
    background-color: #F9F9F9;
}

/* category filter */

.filter-section {
	padding-top:40px;
}


.filter-container {
    text-align:center;
    padding:20px
}


ul.filter > li > a {
    color:#000;
    font-size:20px;
    line-height:40px
}

ul.filter > li > a:hover,ul.filter > li > a:focus {
    text-decoration:none;
    color:#000;
    outline:none
}

ul.filter > li.active a {
    color:#A36920;
}

ul.filter > li span {
    color:#ddd;
    font-size:20px;
    display:inline-block;
    margin:0 5px
}
ul.filter > li span i{
    color: #A36920;
    font-size: 10px;
    vertical-align: middle;
    margin: 0 10px;
}

.filter-section .filter-container .filter > li {
    padding:0;
    margin:0
}

.filter-section h1 {
    text-align:center
}


/* the color of the transparent overlay border */

.portfolio-section.port-col figure .overlay-background {
    background-color: transparent;
    background-color:transparent;
}

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

/* 5 columns, percentage width
.grid-item,
.grid-sizer {
  width: 20%;
}

.grid-item {
  float: left;
  height: 268px;
}

.grid-item--width2 { width: 40%; }
.grid-item--height2 { height: 268px; }

 */

/* portfolio images 

.portfolio-section figure {
    float:left;
    width:100%;
    position:relative
}

.portfolio-section figure img {
    width:100%;
    height: 268px;
    object-fit: cover;
}


/* project title under image */

.portfolio-section .article-title {
    text-align:center;
    float:left;
    width:100%;
    font-size:18px;
    line-height:24px;
    padding:10px 0 30px 0;
}

.portfolio-section .article-title a {
    color:#aaa
}


/* transparent overlay */

.portfolio-section figure:hover .overlay {
    opacity:1;
    visibility:visible
}

.portfolio-section figure:hover .overlay-background {
    opacity:1;
    visibility:visible;
    background: transparent;
    background-color: transparent;
    transform: scale(1.04);
}

.portfolio-section figure .overlay-background {
    z-index:1;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    width:100%;
    height:100%
}

.portfolio-section figure .overlay-background .inner {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color:transparent;
    background-color:rgba(255,255,255,.6);
}

.portfolio-section figure .overlay {
    z-index:2;
    transition:all .2s ease-in-out;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    width:100%;
    height:100%
}

.portfolio-section figure .inner-overlay {
    display:table;
    width:100%;
    height:100%
}

.portfolio-section figure .inner-overlay-content {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    padding:20px 40px
}

.portfolio-section figure .inner-overlay-content.with-icons {
    text-align:center
}


/* icons inside overlay */

.portfolio-section figure .inner-overlay-content.with-icons a .fa{
    width:40px;
    height:40px;
    line-height:42px;
    display:inline-block;
    margin:0 10px;
    text-decoration:none;
    font-size:20px;
	background:rgba(0,0,0,0.9);
    color:#fff;
    border-radius:0

}

.item-meta {
    text-align: center;
  white-space: nowrap;
  vertical-align: middle;
 
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.item-title {
    font-size: 22px;
    font-weight: bold;
    opacity:1;
    transition: all 300ms ease-in-out;;
    z-index: 99;
    color: #A36920;
    text-shadow: 1px 1px 1px #000;
    line-height: 26px;
         position: relative;
    margin: 5px auto;
}
.item-title a {
    font-weight: 500;
    color: #fff;
    opacity: 1;

}
.item-title a {
    outline: none;
}


.item-category{
    font-size:18px;
    
    position: relative;
    z-index: 99;
    color: #A36920;
    text-shadow: 1px 1px 1px #000;
    transition: all 300ms ease-in-out;;
}
.portfolio-section figure:hover>.item-title{opacity:1;}@keyframes fadeInFromNone{0%{display:none;opacity:0;}1%{display:block!important;opacity:0;}100%{display:block!important;opacity:1;}}
.item-meta:hover .item-title{}
.item-meta:hover .item-category{margin-left:0;opacity:1;}
/* skew image on hover */ 

.isotopeSelector img {
    -webkit-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    -o-transition:all .4s ease;
    transition:all .4s ease
}

.isotopeSelector:hover img {
    -moz-transform:scale(1.5) rotate(2deg);
    -webkit-transform:scale(1.5) rotate(2deg);
    -o-transform:scale(1.5) rotate(2deg);
    -ms-transform:scale(1.5) rotate(2deg);
    transform:scale(1.5) rotate(2deg);
    -webkit-transition:all .8s ease;
    -moz-transition:all .8s ease;
    -ms-transition:all .8s ease;
    -o-transition:all .8s ease;
    transition:all .8s ease
}

.isotopeSelector figure {
    overflow:hidden
}

.isotopeSelector figure {
    box-shadow:0 0 2px rgba(0,0,0,0.2)
}


.policy-link{
    margin: 10px 0;
    display: block;
}
.policy-link a{
    display: inline-block;
    color: #A36920;
    text-transform: uppercase;
    transition: all .3s ease;
}
.policy-link a:hover{
    text-shadow: 0 1px 1px #aaa;
}

.button-area .button {
  display: inline-block;
  padding: 10px;
  margin: 30px 5px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
    color: #000;
    line-height: inherit;
    width: auto;
    height: auto;
}
.button-area .button:hover {
  background-color: rgba(163, 105, 32, 0.32);
}
.button-area .button.active {
  background-color: rgba(163, 105, 32, 0.82);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) inset;
}
.button-area input[type=checkbox] {
  display: none;
}
#mnsry_container {
  position: relative;
    width: 90%;
    margin: auto;
}
#mnsry_container:hover img {
}
#mnsry_container .item {
  width: 33.3%;
  min-height: 200px;
  overflow: hidden;
  cursor: pointer;
    padding: 10px;
}
#mnsry_container .item h1 {
  position: absolute;
  top: 46%;
  left: 0;
  width: 100%;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  transition: all 1.2s;
  z-index: 1;
}
#mnsry_container .item img {
  display: block;
  width: 100%;
  transition: all 0.8s;
}
#mnsry_container .item:hover h1 {
  transform: translate3d(0, 18px, 0) scale(1.2, 0.4);
  opacity: 0;
}
#mnsry_container .item:hover img {
  opacity: 1;
  transform: scale(1.04);
}
#loading_msg {
  position: fixed;
  top: 48%;
  width: 100%;
  z-index: 999;
}
@media (max-width: 860px) {
  #mnsry_container .item {
    width: 50%;
    min-height: 150px;
  }
}
@media (max-width: 667px) {
  #mnsry_container .item {
    width: 100%;
    min-height: 220px;
  }
}
  
/*
|--------------------------------------------------------------------------
|  Demo Specific Code
|--------------------------------------------------------------------------
|
|
|
*/



.demo-colored-wrap {
	background:#ecf0f1;
}

.top-nav {width:100%; height:40px; background:#111;}
img.logo {margin-top:13px; margin-left:50px}
a.article-link, a.article-link:visited {display:inline-block; float:right; color:#FF4629; text-decoration:none; margin-right:50px; margin-top:10px;}
a.article-link:hover {color:#fff}



/* buy sell */
body .one .bsa_it_ad {  background: rgba(255,255,255,0.8); border: none; font-family: inherit; padding: 10px 15px; margin: 0; text-align: right; -moz-box-shadow: 0 0 3px #666; -webkit-box-shadow: 0 0 3px #666; box-shadow: 0 0 3px #666; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition:  all .2s ease-in-out;   }
body .one .bsa_it_ad:hover	{-moz-box-shadow: 0 0 12px #666; -webkit-box-shadow: 0 0 12px #666; box-shadow: 0 0 12px #666; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition:  all .5s ease-in-out; }
body .one .bsa_it_ad:hover img {  }
body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; margin: 0 0 5px; }
body .one .bsa_it_ad .bsa_it_i img { padding: 0; border: none; }
body .one .bsa_it_ad .bsa_it_t { padding: 6px 0; }
body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
body .one .bsa_it_p { display: none; }
body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; margin: 12px 15px 0; text-align: right; }
.buy-ad { width:160px; position:fixed; top:50px; right:15px; z-index:12000 !important }

/** iluzja promo popup **/


/* Voucher popup */


/* The Modal (background) */

#iluzjaPop.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 99;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}


/* Modal Content/Box */

.vouchery .modal-content {
    background: url('../img/urlop-info.jpg');
    background-position: center center;
    background-size: contain;
    height: 520px;
    background-repeat: no-repeat;
    margin: 3% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: none;
    box-shadow: none;
    width: 60%;
    /* Could be more or less, depending on screen size */
    z-index: 102;
}

@media (max-width:1200px) {
    .vouchery .modal-content {
        width: 65%;
    }
}

@media (max-width:992px) {
    .vouchery .modal-content {
        width: 75%;
    }
}

@media (max-width:768px) {
    .vouchery .modal-content {
        width: 83%;
    }
}

@media (max-width:450px) {
    .vouchery .modal-content {
        width: 95%;
    }
}


/*
  .vouchery .modal-content:after{
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,.75);
    z-index: -2;
  }
  */


/* The Close Button */

.vouchery .close {
    color: #222;
    float: right;
    margin-right: 20px;
    font-size: 36px;
    font-weight: bold;
    opacity: .75;
    display: none;
}

.vouchery .close:hover,
.vouchery .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.phone-call {
    color: #ccc;
}

.phone-call:hover {
    color: #999;
}

#modal-121 .md-right a {
    width: 48%;
    display: inline-block;
}

.robotic {
    display: none;
}

.antispam {
    display: none;
}


/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 999;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    display: block;
}


/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}


/* The Close Button */

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #A36920;
    color: white;
    display: block;
}

.modal-body {
    padding: 2px 16px;
    min-height: 665px;
}

.modal-oklejenie .modal-body,
#sklepabo .modal-body,
#sklepfull .modal-body,
#fotoprod .modal-body,
#fotownetrz .modal-body,
#fotobiznes .modal-body {
    min-height: 755px;
}

.modal-body h5 {
    margin: 20px auto;
    color: #333;
    font-size: 22px;
}

.modal-body ul {
    margin-top: 35px;
}

.modal-body ul li {
    font-size: 16px;
    line-height: 28px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #A36920;
    color: white;
    display: block;
}

.modal-footer p {
    font-size: 12px;
    color: #fff;
    text-align: right;
}

.modal-footer h3 {
    font-size: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

.modal-form input {
    padding: 8px 20px;
    margin: 3px 0;
}


/**** popup ***/


/* Popup container */

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}


/* The actual popup (appears on top) */

.popuptext {
    visibility: hidden;
    width: 260px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 30%;
    margin-left: -80px;
}




.shownotify{
    opacity: 1;
    bottom: 0;
}





.social-floats{
    display: block;
}
/* Popup arrow */

.popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width:500px) {
    .modal-body .col-md-8,
    .modal-body .col-md-4 {
        padding-left: 3px;
        padding-right: 3px;
    }
    .mail-form.modal-form .col-xs-12 {
        padding-left: 3px;
        padding-right: 3px;
    }
    input[name="cf_edycja"] {}
}

@media (max-width:991px) {
    .card5,
    .card6 {
        max-width: 100%;
    }
}

@media (min-width:48em) {
    .dotted-path.vertical.dots-2-medium {
        height: 32px;
    }
    .dotted-path.vertical.dots-3-medium {
        height: 48px;
    }
    .dotted-path.vertical.dots-12-medium {
        height: 192px;
    }
    .dotted-path.vertical.end-arrow-medium {
        margin-bottom: 11px;
    }
    .dotted-path.vertical.end-arrow-medium:after {
        bottom: -11px;
    }
    .dotted-path.vertical.start-arrow-medium:before,
    .dotted-path.vertical.end-arrow-medium:after {
        content: '';
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 5px 6px 0 6px;
        border-color: #E31E24 transparent transparent transparent;
        position: absolute;
        left: 0;
        right: 0;
    }
}

.dotted-path.horizontal {
    top: 14px;
    height: 12px;
    background-position: -5px center;
    -webkit-transition: width 0.333s ease-in-out;
    -moz-transition: width 0.333s ease-in-out;
    -o-transition: width 0.333s ease-in-out;
    transition: width 0.333s ease-in-out;
}

.dotted-path.horizontal.dots-0 {
    width: 0px;
}

.dotted-path.horizontal.dots-4 {
    width: 78px;
}

.dotted-path.horizontal.dots-7 {
    width: 112px;
}

.dotted-path.horizontal.dots-9 {
    width: 144px;
}

.dotted-path.horizontal.dots-14 {
    width: 224px;
}

.dotted-path.horizontal.dots-15 {
    width: 240px
}

.dotted-path.horizontal.dots-18 {
    width: 288px
}

.dotted-path.horizontal.dots-20 {
    width: 320px
}

.dotted-path.horizontal.dots-22 {
    width: 352px
}

.dotted-path.horizontal.dots-23 {
    width: 368px
}

.dotted-path.horizontal.left {
    right: 50%;
    position: absolute;
    top: auto;
    margin-top: -14px
}

@media (min-width:48em) {
    .dotted-path.horizontal.left {
        margin-top: 0
    }
}

.dotted-path.horizontal.right {
    top: auto;
    left: 50%;
    position: absolute
}

.dotted-path.horizontal .float-right {
    float: right
}

.dotted-path.horizontal.bottom {
    position: absolute;
    bottom: -14px;
    left: 3px;
    top: auto
}

.dotted-path.horizontal .dotted-path.vertical {
    top: 14px
}

.dotted-path.horizontal .dotted-path.vertical.left {
    margin-left: 0px
}

.dotted-path.horizontal .dotted-path.vertical.right {
    margin-right: 0px;
    position: absolute;
    right: -3px;
}

.dotted-path.horizontal.start-arrow {
    margin-left: 6px
}

.dotted-path.horizontal.start-arrow:before {
    left: -6px
}

.dotted-path.horizontal.end-arrow {
    margin-right: 6px
}

.dotted-path.horizontal.end-arrow:after {
    right: -6px
}

.dotted-path.horizontal.start-arrow:before,
.dotted-path.horizontal.end-arrow:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 6px 0 6px 5px;
    border-color: transparent transparent transparent #E31E24;
    position: absolute;
    top: 0;
    bottom: 0;
}

@media (max-width:768px) {
    .dotted-path.horizontal.dots-14-medium {
        margin-left: 3px;
        margin-top: 3px;
        width: 54px
    }
    .prost3 {
        top: 45px;
        right: -65px;
        transition: all 1s;
    }
    .prost4 {
        left: 50%;
        margin-top: -50px;
        margin-left: 20px;
        padding-top: 10px;
        transition: all 1s;
    }
    .dotted-path.vertical.dots-2.odm3 {
        margin-top: -5px;
        height: 75px;
    }
}

@media (min-width:320px) and (max-width:768px) {
    .frame {
        display: none !important;
    }
    .schemat {
        margin-bottom: 50px;
    }
}

@media (min-width:320px) and (max-width:480px) {
    .zak1 {
        position: relative;
        top: -160px;
    }
    .zak2 {
        position: relative;
        top: -110px;
    }
    .zak3 {
        padding-top: -1100px;
    }
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand{
        margin-left: 25px;
    }
}

@media (min-width:481px) and (max-width:768px) {
    .zak1 {
        position: relative;
        top: -70px;
    }
    .zak2 {
        position: relative;
        top: -130px;
    }
    .zak3 {
        position: relative;
        top: 1000px;
    }
}

@media screen and (max-device-width:991px) {
    .ind {
        
        background-size: cover;
        position: relative;
        overflow: hidden;
        height: 550px;
        min-width: 100%;
    }
    .navbar-header {
        float: none;
        min-height: 90px;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-default .navbar-toggle {
        border: 1px solid #000;
    }
    .navbar-toggle {
        position: relative;
        float: right;
        margin-right: 15px;
        padding: 9px 10px;
        margin-top: 25px;
        margin-bottom: 0px;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
    }
    .navbar-collapse.collapse {
    }
}

@media (min-width:768px) and (max-width: 991px){
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
}

@media (min-width:48em) {
    .dotted-path.horizontal.dots-14-medium {
        width: 174px
    }
    .dotted-path.horizontal.dots-15-medium {
        width: 240px
    }
    .dotted-path.horizontal.start-arrow-medium {
        margin-left: 6px
    }
    .dotted-path.horizontal.start-arrow-medium:before {
        left: -6px
    }
    .dotted-path.horizontal.end-arrow-medium {
        margin-right: 6px
    }
    .dotted-path.horizontal.end-arrow-medium:after {
        right: -6px
    }
    .dotted-path.horizontal.start-arrow-medium:before,
    .dotted-path.horizontal.end-arrow-medium:after {
        content: '';
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 6px 0 6px 5px;
        border-color: transparent transparent transparent #e31e24;
        position: absolute;
        top: 0;
        bottom: 0
    }
}

@media (min-width:80em) {
    .dotted-path.horizontal.dots-18-large {
        width: 288px
    }
    .dotted-path.horizontal.dots-23-large {
        width: 368px
    }
    .dotted-path.horizontal.dots-20-large {
        width: 172px;
    }
}

.dotted-path.horizontal.dots-0:before,
.dotted-path.horizontal.dots-0:after {
    display: none
}

@media (min-width:48em) {
    .dotted-path.horizontal.dots-0[class$="-medium"] {
        display: inline
    }
}

@media (min-width:80em) {
    .dotted-path.horizontal.dots-0[class$="-large"] {
        display: inline
    }
}

#main>.dotted-path {
    position: absolute;
    left: 6px;
    right: 0;
    top: -50px
}

@media (min-width:48em) {
    .dotted-path.dots-0-medium {
        width: 0 !important;
        height: 0 !important;
        float: none !important;
        margin: 0 !important
    }
    .dotted-path.dots-0-medium:before,
    .dotted-path.dots-0-medium:after {
        display: none !important
    }
}

@media (min-width:48em) and (min-width:80em) {
    .dotted-path.dots-0-medium[class$="-large"] {
        display: inline
    }
}

@media (min-width:80em) {
    .dotted-path {
        width: 0;
        height: 0;
        float: none;
        margin: 0
    }
    .dotted-path.dots-0-large {
        display: none
    }
}

#seo-footer {
    text-align: center;
    color: #666;
    margin: 10px 0 0 0;
}

@media (max-width:1270px){
    .book2, .book1, .pad{
        min-height: 1100px;
    }
    .pad, .pad5, .pad3{
        padding: 0px 50px 0 3%;
    }
    .pad2{
        padding: 70px 50px 0px 3%;
    }
    .v-center-content{
        right: -10px;
    }
    .p-img img{
        width: 100%;
    }
}

@media (max-width:1062px){
    .navbar > .container .navbar-brand{
        margin-left: 50px;
    }
}
@media (max-width:992px){
    .v-center-content{
        left: 0;
        right: 0;
        text-align: center;
    }
    .hcs3{
        width: 200px;
    }
    .book2, .book1, .pad{
        min-height: 800px;
    }
    .portf-gallery{
        width: 100%;
        margin: 120px auto 20px;
    }
    .portf-img{
        min-height: 250px;
        margin-bottom: 50px;
    }
    .pad5{
        background-color: transparent;
    }
}
@media (max-width:850px){
    .how-col{
        width: 31%;
    }
}

@media (max-width:767px){
    
    .of-form .of-price{
        font-size: 64px;
    }
    .pricing-pado{
        padding: 0 25px;
    }
    .modal{
        padding-top: 25px;
    }
    .modal-body{
        height: auto;
        min-height: unset;
        padding: 25px 15px;
    }
    .modal-header h2{
        font-size: 22px;
    }
    .modal-body h5{
        font-size: 16px;
    }
    .modal-body ul li{
        font-size: 14px;
    }
    .button-area{
        margin-top: 35px;
    }
    .button-area .button{
        display: block;
        margin: 5px 0;
    }
    
    
    
    .p-img{
        width: 100%;
    }
    .p-img img{
        width: 100%;
    }
    .navbar-toggle{
        margin-right: 35px;
    }
    
    #contact{
        background: #eee;
    }
    .ctc-sq{
        height: 25px;
        width: 25px;
        box-shadow: 0 0 0 2px rgba(164, 107, 40,.35);
        margin-bottom: 25px;
    }
    .ctc-sq i{
        line-height: 25px;
        font-size: 15px;
    }
    .csq1{
        top: 135px;
    }
    .csq2{
        top: 170px;
    }
    .csq3{
        top: 205px;
    }
    .csq4{
        top: 240px;
    }
    .portfolio-section figure .overlay-background{
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width:690px){
    .how-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .how-col, .hcs, .hcs2, .hcs3{
        width: 100%;
    }
    .checkboxes{
        clear: both;
        margin-top: 20px;
    }
}


@media (max-width:450px){
    .how-col, .hcs, .hcs2, .hcs3{
        width: 100%;
    }
    #contact{
        padding: 0 25px 40px;
    }
    
    .v-center{
        left: 0;
        right: 0;
        text-align: center;
        margin: auto;
    }
    .overlay{
        min-height: 480px;
    }
    .sq-left{
        font-size: 16px;
    }
    .sq-left:before{
        font-size: 14px;
        top: unset;
    }
    .info-nl{
        display: block;
    }
    
    .of-bg.obg9, .of-bg{
        max-height: 300px;
        min-height: 300px;
    }
    .of-top .of-text{
        padding: 0 40px;
    }
    
    .portf-img{
        background-size: contain;
        min-height: 200px;
    }
    .hcs{
        margin: 20px 5px;
    }
    .dotted{
        transform: rotate(90deg);
        width: 120px;
        margin: 0 auto;
    }
    .htb1{
        right: unset;
        left: -60px;
    }
    .htb2{
        left: unset;
        right: -50px;
    }
    .hcs2 .htb1{
        right: -30px;
        left: unset;
    }
    .hcs2 .htb2{
        left: unset;
        right: 120px;
    }
    .hcs3 .htb1{
        right: unset;
        left: -30px;
    }
    .hcs3 .htb2{
        left: unset;
        right: -10px;
    }
    .modal{
        padding-top: 90px;
    }
    .modal-content{
        width: 92%;
    }
    input[placeholder] { text-overflow: ellipsis; word-break: break-word;}
    ::-moz-placeholder { text-overflow: ellipsis; word-break: break-word; } /* firefox 19+ */
    input:-moz-placeholder { text-overflow: ellipsis; word-break: break-word;}
    .of-form .col-md-7{
        padding: 0;
    }
}


@media (max-width:400px){
    .navbar-toggle{
        margin-right: 35px;
    }
    .pad, .pad5, .pad3{
        padding: 0px 30px 0 3%;
    }
    .pad2{
        padding: 70px 30px 0px 3%;
    }
    .overlay{
        min-height: 560px;
    }
    .overlay.karta9{
        min-height: 400px;
    }
    
}