body { font-family: Lato; color: #693b60; font-size: 14px; font-weight: 300; background: url("../images/tlo.png") repeat transparent}

a, a:hover, .fa, .btn, .trans, .trans:hover,
.kontakt .styled_radio:hover .kolo, .kontakt .styled_radio .kolo, 
#reklama .custom > div > a > img, #reklama .custom > div > a:hover > img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out}

a { color: #693b60}

em { font-style: normal}

#all { position: relative; max-width: 1920px; margin: 0 auto}

.header { padding: 28px 0; background: #fff}
.header .brand { margin: 0 -15px 0 0; display: block}
.header img { max-width: 100%}

.navigation .nav { text-align: center}
.navigation .nav li { display: inline-block; margin: 8px 36px}
.navigation .nav li a { color: #693b60; font-weight: 400; font-size: 14px; text-transform: uppercase; line-height: 9px; padding: 0 }
.navigation .nav li a:hover, .navigation .nav li.active a, .navigation .nav li a:focus { background: none; color: #9a70af }

.navigation .navbar { display: none}

#top { background: #9a70af; height: 26px; width: 100%}
#top .container { background: #693b60; height: 26px; }
#top .info { position: absolute; top: 0; right: 0; font-size: 11px; color: #fff; line-height: 26px}
#top .info .white { display: inline-block; padding: 0 24px; font-size: 13px; color: #693b60; background: #fff; font-weight: 900; margin-left: 16px}
#top .info_color { background: #693b60; height: 26px; position: absolute; right: 0; top: 0; width: 50% }
#top span.icon-adres { font-size: 14px}

.left { text-align: left }
.right { text-align: right }

.footer { background: #fff; color: #9d9d9c; font-size: 10px; line-height: 14px; text-align: center; padding: 18px 0}
.footer a { margin-left: 5px; display: inline-block; vertical-align: middle}
.footer a span { color: #9d9d9c; font-size: 14px}
.footer a:hover, .footer a:focus { text-decoration: none } 
.footer a:hover span { color: #2ba9e0 }
.brand_footer img{ height: 8px}

.flex-caption h1, .flex-caption h2 {font-size: 38px; line-height: 36px; margin: 0 }
.flex-caption h1 { color: #693b60; font-weight: 900; text-transform: uppercase}
.flex-caption h2 { color: #7d7d7d; font-weight: 300}

.stopka { padding: 40px 0; font-size: 12px; background: #f6f6f6 }
.stopka h3 { text-transform: uppercase; margin: 0 0 20px; font-size: 11px; font-weight: 700; color: #693b60; line-height: 9px}
.stopka a { color: #693b60}
.stopka .social a { font-size: 16px; display: block; float: left; margin-right: 6px; line-height: 17px}
.stopka .social a:hover { text-decoration: none}
.stopka .nav li { margin: 0; line-height: 14px}
.stopka .nav li a { padding: 0; font-size: 12px; line-height: 17px }
.stopka .nav li a:hover, .stopka .nav li a:focus { background: none; text-decoration: underline}
.stopka input[type="text"], .kontakt .stopka input[type="text"] { height: 20px; border: 1px solid #ededed; line-height: 18px; font-size: 11px; padding: 0 5px; float: left}
.stopka .btn { width: 24px; height: 20px; background: #693b60; color: #fff; text-transform: uppercase; float: left; margin-left: 4px; font-size: 9px; line-height: 20px; font-weight: 900; padding: 0; text-align: center; border-radius: 0; border: none }
.stopka .acymailing_introtext { margin-bottom: 8px !important}

#mapa, .moduletable.mapa { width: 100%; height: 300px}

.item-page .page-header { padding: 0; margin: 0; border: none}
.item-page .page-header h2, .item-page .moduletable h3  { padding: 0; margin: 0 0 24px; font-size: 16px; line-height: 14px; text-transform: uppercase; font-weight: 700}

.kontakt input[type="text"], .kontakt textarea { background: #fff; border: 1px solid #ededed; font-size: 12px; padding: 6px 15px; line-height: 20px; width: 100%; margin: 0 0 15px}
.kontakt textarea { resize: none; height: 180px}
.kontakt .styled_radio { font-weight: 700; text-transform: uppercase; cursor: pointer; display: inline-block; margin: 3px 12px 18px; line-height: 18px; font-size: 15px }
.kontakt .styled_radio .kolo { margin-right: 8px; border: 1px solid #ededed; background: #fff; width: 16px; height: 16px; display: inline-block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; float: left}
.kontakt .styled_radio.active .kolo, .kontakt .styled_radio:hover .kolo { border: 7px double #693b60;}
.kontakt .styled_radio input { display: none}
.kontakt .kontakt_form .btn { background: #693b60; color: #fff; font-weight: 900; padding: 0 15px; text-transform: uppercase; height: 32px; line-height: 32px; border-radius: 0; float: right; margin: 0 0 36px}

#content { padding-top: 100px; padding-bottom: 100px}
.home #content { padding-top: 0}

.home .box { background: url("../images/box_home.png") center center repeat-x transparent; background-size: auto 100%; padding: 30px; text-align: right }
.home .box a { font-weight: 700}
.home .box .nav { text-align: left; margin-bottom: 12px}
.home .box .nav li { line-height: 12px; margin-bottom: 6px}
.home .box .nav li a {display: inline; padding: 0; font-size: 13px; font-weight: 400} 
.home .box .nav li a:hover, .home .box .nav li a:focus { background: none; color: #9a70af}

.home .box .nav li:before {color: #9a70af; height: 16px; vertical-align: middle; content: "\25AA"; display: inline-block; margin-right: 4px; font-size: 20px; line-height: 10px; margin-left: -12px}

.item-page > div > .row:first-child > .col-sm-6 { margin-top: -46px}
.item-page > div > .row:first-child > .col-sm-6:first-child { margin-top: 0}

.item-page .col-sm-6 img { max-width: 100%}

.breadcrumb { background: none; padding: 0; margin: 20px 0 0}
.breadcrumb > li + li:before { color: #9a70af; height: 16px; vertical-align: middle; content: "\25AA"; display: inline-block; margin-right: 2px; font-size: 26px; line-height: 10px}
.breadcrumb > li a { margin-right: 6px}

#reklama .custom > div { width: 50%; float: left; position: relative; font-size: 20px; line-height: 20px; text-align: left}
#reklama .custom > div:first-child { text-align: right}
#reklama .custom > div > a > img { width: 100%; opacity: 0.6 }
#reklama .custom > div > a:hover > img { opacity: 1}
#reklama .custom > div .center { z-index: 1; position: absolute; left: 0; top: 50%; width: 100%; height: 100%; display: table; padding: 0 125px}
#reklama .custom > div .center .center_me { margin-top: -10px}
#reklama .custom > div span { margin-right: -16px; font-size: 45px; line-height: 20px; display: inline-block; vertical-align: middle }

#baner_o_nas { width: 100%; min-height: 300px}
#baner_o_nas img { width: 100%; opacity: 0}
#baner_o_nas { background: url("/images/banery/baner_onas_parallax.jpg") no-repeat center center transparent; background-size: 100% auto}

.baner img, .blog img { width: 100%}
.blog { text-align: justify}
.blog .items-row { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #fff }
.blog .page-header { margin: 0; padding: 0; border: none}
.blog .page-header h2 { margin: 0 0 24px; font-size: 16px; font-weight: 700; line-height: 14px}

#przyciski { margin-top: -77px}
#przyciski .row div a { height: 77px; display: block; background: url("../images/przycisk.png") center center repeat-x transparent; background-size: auto 100%; text-align: center; font-size: 20px; line-height: 20px; padding-top: 28px;
                        -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
                        -webkit-border-top-left-radius: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topleft: 9px; -moz-border-radius-topright: 9px; border-top-left-radius: 9px; border-top-right-radius: 9px }
#przyciski .row div a:hover, #przyciski .row div a.active { background-image: url("../images/przycisk_active.png"); text-decoration: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
#przyciski .row div a span { font-size: 45px; line-height: 20px; display: inline-block; vertical-align: middle; margin-right: -16px}

.item-page p { margin: 0 0 24px; text-align: justify}
.item-page h4 { font-size: 14px; font-weight: 700}

.skontaktuj_sie a { margin-right: 12px}

.over_nasze_uslugi { padding: 30px 0; background: #fff}
.modul.nasze_uslugi h3 { font-size: 14px; line-height: 14px; font-weight: 700; margin-bottom: 26px}
.modul.nasze_uslugi h3 span { font-size: 35px; line-height: 14px; display: inline-block; vertical-align: middle; font-weight: 400; margin-right: 8px}
.modul.nasze_uslugi ul li { display: inline-block; margin: 0 4px}
.modul.nasze_uslugi ul li:before {color: #9a70af; height: 16px; vertical-align: middle; content: "\25AA"; display: inline-block; margin-right: 4px; font-size: 26px; line-height: 10px}

.modul.nasze_uslugi ul li a { padding: 0; margin: 0; display: inline}
.modul.nasze_uslugi ul li a:hover, .modul.nasze_uslugi ul li.active a, .modul.nasze_uslugi ul li a:focus { background: none; color: #9a70af}

.cennik .col-sm-6 strong { float: right}
.cennik .col-sm-6 ul { padding-left: 15px; margin-left: 0}
.cennik .col-sm-6 ul li { clear: both; line-height: 24px}
.cennik h4 { margin: 48px 0 30px; text-transform: uppercase; font-size: 16px}

.item-page .fotorama__thumb-border { border-color: #9a70af}

@media screen and (max-width: 1600px) 
{
    #reklama .custom > div .center { padding: 0 90px}
}

@media screen and (max-width: 1400px) 
{
   #reklama .custom > div .center { padding: 0 60px}
}

@media screen and (max-width: 1199px) 
{
    #reklama .custom > div { font-size: 16px}
    #reklama .custom > div span { font-size: 36px}
}

@media screen and (max-width: 991px) 
{
    #reklama .custom > div { font-size: 20px; width: 100%}
    #reklama .custom > div span { font-size: 36px}
    #przyciski { margin-top: 0}
    #przyciski .row div a { -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px }
    
    .header .brand { text-align: center; margin: 0 0 30px}
    .header .brand img { max-height: 30px}
    
}

@media screen and (max-width: 767px) 
{
    .flex-caption { display: none}
    
    #reklama .custom > div { font-size: 14px; text-align: center}
    #reklama .custom > div:first-child { text-align: center}
    #reklama .custom > div span { font-size: 24px }
    #reklama .custom > div .center { padding: 0 5px}
    #przyciski .row div a { font-size: 13px}
    #przyciski .row div a span { font-size: 20px; margin-right: -8px}
    
    .header .brand { margin: 0 0 15px; text-align: center}
    .stopka { text-align: center; font-size: 14px}
    .stopka .moduletable { margin-bottom: 45px}
    
    .stopka input[type="text"], .kontakt .stopka input[type="text"] { float: none; display: inline-block; font-size: 14px; height: 30px; padding: 0 10px; line-height: 30px}
    .stopka .btn { float: none; display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; width: auto}
    
    .stopka .acymailing_form > * { display: inline-block; vertical-align: middle}
    
    .stopka .social a { display: inline-block; float: none; font-size: 30px; margin: 0 8px}
    .stopka h3 { font-size: 14px}
    .stopka .nav li a { margin: 4px 0; font-size: 14px; padding: 6px; display: inline-block}
    .footer .col-sm-4 { text-align: center; margin: 20px 0}
    .item-page > div > .row:first-child > .col-sm-6 { margin-top: 0}
    
    .skontaktuj_sie span { margin-right: -4px}
    .skontaktuj_sie a { margin-right: 0px}
    
    .blog .page-header h2 { margin: 12px 0}
    
    .blog .item { margin-bottom: 30px}
    .blog .items-row { margin-bottom: 0; padding-bottom: 0}
    
    #content { padding-top: 50px; padding-bottom: 0}        
    
    #baner_o_nas { min-height: 180px; background-image: url("/images/banery/baner_onas_parallax_mobile.jpg")}   
    
    .home .box img { margin-bottom: 20px}
    
    .stopka { padding-bottom: 0}
    
    #top { height: auto}
    #top .container { display: none}
    #top .info_color { width: 100%}
    #top .info { position: relative; text-align: center}    
    #top .info .white { margin-left: 0; display: block}
    #top p { margin-bottom: -1px}
    
    .nav-collapse { display: none}
    .navigation .navbar { min-height: 0; display: block; text-align: center; margin: 0}
    .navigation .navbar .btn { display: inline-block; padding: 6px}
    .navigation .navbar .icon-bar { height: 1px; width: 24px; background: #693b60; display: block; margin: 5px auto}
    
    .navigation .nav li { display: block; margin: 16px 0}
    
    .item-page { margin-bottom: 40px}
}