@charset "CP852";

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url("../fonts/SourceSansPro-Regular.eot");
    src: local("☺"), url("../fonts/SourceSansPro-Regular.woff") format("woff"), url("../fonts/SourceSansPro-Regular.ttf") format("truetype"), url("../fonts/SourceSansPro-Regular.svg") format("svg");
}

@font-face {
    font-family: 'SourceSansPro-Light';
    src: url("../fonts/SourceSansPro-Light.eot");
    src: local("☺"), url("../fonts/SourceSansPro-Light.woff") format("woff"), url("../fonts/SourceSansPro-Light.ttf") format("truetype"), url("../fonts/SourceSansPro-Light.svg") format("svg");
}

@font-face {
    font-family: 'fontello';
    src: url("../fonts/fontello.eot");
    src: local("☺"), url("../fonts/fontello.woff") format("woff"), url("../fonts/fontello.ttf") format("truetype"), url("../fonts/fontello.svg") format("svg");
}

::-moz-selection,
::selection {
    background: #2f9550;
}

@-ms-viewport {
    width: device-width;
}

@media (min-width: 320px) {
    body {
        margin: 0;
        background-size: 320 auto;
        background-position: 0 0;
        background-attachment: initial;
    }

    .wrapper {
        width: 100%;
    }

    .left, #about-us .left, #contact .left, #about-us .left, #contact .left {
        width: 100%;
    }

    .content {
        margin-top: 30px;
    }

    .content .header h1 {
        font-size: 44px;
    }

    .content .hexagon {
        left: -55px;
        top: 202px;
    }

    .top {
        height: 55px;
        position: static;
        top: -45px;
    }

    .top .wrapper {
        padding: 0 10px;
    }

    .top .logo {
        height: 55px;
    }

    .top .logo img {
        height: 30px;
    }

    article {
        padding: 50px 20px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
    }

    .menu-button {
        display: block;
        position: absolute;
        background-color: #343434;
        width: 55px;
        height: 55px;
        right: 0;
        top: 0;
        font-size: 40px;
        line-height: 14px;
        text-align: center;
        padding: 20px 0 0 0;
        color: #2F9550;
        text-decoration: none;
        text-indent: -9999px;
        background-image: url("../img/menu-button.png");
        background-size: 100%;
    }

    nav.main-nav {
        display: none;
        background-color: #474747;
        width: 200px;
        position: absolute;
        right: 55px;
        top: 0;
        height: auto;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        z-index: 2;
    }

    nav.main-nav.visible {
        display: block;
    }

    nav.main-nav a {
        padding: 15px 10px;
        color: #FFF;
        border-bottom: 1px solid #333;
    }

    nav.main-nav a.active {
        padding-bottom: 15px;
        margin-bottom: 0;
    }

    nav.main-nav a:hover {
        background-color: #6F6F6F;
    }

    nav.main-nav a:last-child {
        border-bottom: 0 none;
    }

    #about-us .people,
    #clients .clients {
        width: 294px;
    }

    #about-us .people > div,
    #clients .clients > div {
        width: 130px;
        height: 130px;
        margin: 0 7px;
    }

    #about-us .people > div a,
    #clients .clients > div a {
        top: 34px;
    }

    #about-us .people > div img,
    #clients .clients > div img {
        width: 130px;
    }

    #about-us .people > div span,
    #clients .clients > div span {
        background-size: 130px 151px;
    }

    #about-us .people > div:nth-child(3n),
    #clients .clients > div:nth-child(3n) {
        margin-left: 80px;
    }

    #contact .qr-codes {
        float: left;
        width: 100%;
    }

    #contact .qr-codes img {
        display: none;
    }

    #contact .right {
        width: 100%;
    }

    #contact .right img {
        display: none;
    }

    #contact .right iframe {
        width: 100%;
    }

    #contact i.skan {
        display: none;
    }

    #offer {
        padding: 50px 10px;
    }

    #offer .categories {
        display: none;
    }

    #portfolio h2 {
        padding-bottom: 14px;
    }

    #portfolio #project .left {
        display: none;
    }

    #portfolio #project .right {
        width: 100%;
    }

    #portfolio #project .right .description {
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
    }

    #portfolio #project .right .description .more {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 45%, white 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(45%, white), color-stop(100%, white));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 45%, white 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 45%, white 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 45%, white 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%, white 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
        /* IE6-9 */
        z-index: 200;
        height: 35px;
    }

    #portfolio #project .right .description .more span {
        border-left: 10px solid transparent;
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 10px;
        height: 10px;
        border-right: 10px solid transparent;
        background-color: transparent;
        border-top: 8px solid #05832F;
        margin-left: -5px;
    }

    #portfolio #project .images a {
        width: 30%;
        margin-right: 5%;
        max-width: 128px;
    }

    #portfolio #project .images a:last-child {
        margin-right: 0;
    }

    #portfolio #project .images a img {
        width: 100%;
    }

    #portfolio .jcarousel {
        width: 272px;
    }

    #portfolio .jcarousel li {
        width: 80px;
        margin-right: 16px;
    }

    #portfolio .jcarousel li img {
        width: 78px;
    }

    #portfolio .jcarousel-control-prev,
    #portfolio .jcarousel-control-next {
        top: 24px;
    }

    .filter p {
        display: none;
    }

    footer {
        position: static;
        height: 1000px;
    }

    footer .col-3 {
        width: 100%;
        padding-right: 0;
    }

    footer .wrapper {
        padding: 0 10px;
    }

    .no-flexbox .top .logo img {
        margin-top: 10px;
    }

    .no-flexbox #offer .accordion h2 {
        padding-top: 20px;
    }
}

@media (min-width: 480px) {

    .honeycomb, #clients .clients > div, #about-us .people > div {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: -18px;
        width: 162px;
        height: 181px;
    }

    .content article .hexagon {
        left: -48px;
        top: 235px;
    }

    .top .wrapper {
        padding: 0 20px;
    }

    #about-us .people,
    #clients .clients {
        width: 380px;
    }

    #about-us .people > div a,
    #clients .clients > div a {
        top: 42px;
    }

    #about-us .people > div img,
    #clients .clients > div img {

        width: auto;
    }

    #about-us .people > div span,
    #clients .clients > div span {

        background-size: auto auto;
    }

    #about-us .people > div:nth-child(3n),
    #clients .clients > div:nth-child(3n) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 105px;
    }

    #portfolio .jcarousel {

        width: 416px;
    }

    #portfolio .jcarousel li {

        width: 128px;
    }

    #portfolio .jcarousel li img {

        width: auto;
    }

    #portfolio .jcarousel-control-prev,
    #portfolio .jcarousel-control-next {

        top: 45px;
    }

    footer {

        height: 575px;
    }

    footer .wrapper {

        padding: 0 20px;
    }

    footer .col-3 {

        width: 50%;
    }

    footer .col-3:nth-child(2n+1) {

        padding-right: 30px;

        clear: left;
    }
}

@media (min-width: 640px) {

    .wrapper {

        width: 610px;
    }

    article {

        padding: 50px 20px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {

        margin-left: 6px;

        margin-right: 6px;

        margin-top: -25px;
    }

    #about-us .people,
    #clients .clients {

        width: 540px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 6px;
    }

    #about-us .people > div:nth-child(5n+1),
    #clients .clients > div:nth-child(5n+1) {

        margin-left: 96px;
    }

    #contact .qr-codes img {

        display: block;

        margin-bottom: 40px;
    }

    #contact i.skan {

        display: none;
    }

    #portfolio .jcarousel {

        width: 444px;
    }

    #portfolio .jcarousel li {

        margin-right: 30px;
    }
}

@media (min-width: 768px) {

    .menu-corner, nav.main-nav a.active:after, nav.main-nav a.active:before {

        content: " ";

        height: 0px;

        width: 0px;

        border-bottom: 10px solid transparent;

        position: absolute;

        bottom: 0px;
    }

    body {

        background-size: 1300px auto;

        background-position: 0 40px;

        margin-bottom: 560px;
    }

    .wrapper {

        width: 730px;
    }

    .top {

        -webkit-box-shadow: 0 2px 3px rgba(154, 154, 154, 0.5);

        -moz-box-shadow: 0 2px 3px rgba(154, 154, 154, 0.5);

        -ms-box-shadow: 0 2px 3px rgba(154, 154, 154, 0.5);

        box-shadow: 0 2px 3px rgba(154, 154, 154, 0.5);

        height: 100px;

        position: fixed;

        top: 0;
    }

    .top .logo {

        height: 100px;
    }

    .top .logo img {

        height: 36px;
    }

    .content {

        margin-top: 140px;
    }

    .content .header h1 {

        font-size: 57px;
    }

    .menu-button {

        display: none;
    }

    nav.main-nav {

        display: -webkit-box;

        display: -moz-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        background-color: transparent;

        width: auto;

        position: static;

        height: 100px;

        -webkit-flex-direction: row;

        -moz-flex-direction: row;

        -ms-flex-direction: row;

        -webkit-flex-direction: row;

        flex-direction: row;
    }

    nav.main-nav.visible {

        display: -webkit-box;

        display: -moz-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;
    }

    nav.main-nav a {

        padding: 0 15px;

        border-bottom: 0 none;

        color: #212121;
    }

    nav.main-nav a.active {

        padding-bottom: 10px;

        margin-bottom: -10px;
    }

    nav.main-nav a.active:after {

        border-left: 10px solid #05832F;

        right: -10px;
    }

    nav.main-nav a.active:before {

        border-right: 10px solid #05832F;

        left: -10px;
    }

    nav.main-nav a:hover {

        background-color: whitesmoke;
    }

    .top.fixed nav.main-nav a.active {

        padding-bottom: 25px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {

        margin-left: 12px;

        margin-right: 12px;

        margin-top: -12px;
    }

    #about-us .people,
    #clients .clients {

        width: 670px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(5n+1),
    #clients .clients > div:nth-child(5n+1) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(6n+1),
    #clients .clients > div:nth-child(6n+1) {

        margin-left: 108px;
    }

    #contact .qr-codes {

        float: right;

        width: 400px;
    }

    #offer {

        padding: 50px 30px;
    }

    #portfolio #project .right .description .more {

        display: none;
    }

    #portfolio .jcarousel {

        width: 602px;
    }

    footer {

        position: absolute;
    }

    .no-flexbox .logo img {

        margin-top: 25px;
    }

    .no-flexbox nav.main-nav {

        display: block;

        width: auto;

        float: right;
    }

    .no-flexbox nav.main-nav a {

        height: 100px;

        display: inline-block;

        padding-top: 40px;
    }

    .no-flexbox nav.main-nav a:before, .no-flexbox nav.main-nav a:after {

        display: none;
    }

    .no-flexbox nav.main-nav a.active:hover {

        background-color: #2f9550;
    }
}

@media (min-width: 860px) {

    body {

        margin-bottom: 520px;
    }

    .wrapper {

        width: 820px;
    }

    .top .logo {

        height: 100px;
    }

    .top .logo img {

        height: 43px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {

        margin-left: 12px;

        margin-right: 12px;

        margin-top: -12px;
    }

    nav.main-nav a {

        padding: 0 22px;
    }

    #about-us .people,
    #clients .clients {

        width: 760px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(5n+1),
    #clients .clients > div:nth-child(5n+1) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(6n+1),
    #clients .clients > div:nth-child(6n+1) {

        margin-left: 12px;
    }

    #about-us .people > div:nth-child(7n+1),
    #clients .clients > div:nth-child(7n+1) {

        margin-left: 108px;
    }

    #offer .categories {

        padding-bottom: 390px;
    }

    #offer .descriptions .tagsmap {

        display: none;
    }

    #offer .descriptions .text {

        width: 540px;
    }

    #portfolio .jcarousel {

        width: 706px;
    }

    #portfolio .jcarousel li {

        margin-right: 16px;
    }
}

@media (min-width: 980px) {

    body {

        margin: 0 0 316px;
    }

    .wrapper {

        width: 960px;
    }

    .left, #about-us .left, #contact .left, #about-us .left, #contact .left {

        width: 410px;
    }

    .right, #about-us .right, #contact .right {

        width: 400px;
    }

    .right iframe, #about-us .right iframe, #contact .right iframe {

        width: 400px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {

        margin-left: 20px;

        margin-right: 20px;

        margin-top: 0px;
    }

    article {

        padding: 50px;
    }

    #portfolio #project .left {

        background: url("../img/project-shadow-min.png") no-repeat scroll 0 bottom transparent;

        display: block;

        width: 450px;
    }

    #portfolio #project .left .img {

        width: 384px;

        cursor: pointer;

        margin: 0 auto 8px;
    }

    #portfolio #project .left .img img {

        width: 100%;
    }

    #portfolio #project .right {

        width: 410px;
    }

    #portfolio .jcarousel {

        width: 734px;
    }

    #portfolio .jcarousel li {

        margin-right: 23px;
    }

    #about-us .people,
    #clients .clients {

        width: 830px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(5n+1),
    #clients .clients > div:nth-child(5n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(6n+1),
    #clients .clients > div:nth-child(6n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(7n+1),
    #clients .clients > div:nth-child(7n+1) {

        margin-left: 121px;
    }

    #about-us .people > div:nth-child(7n+3),
    #clients .clients > div:nth-child(7n+3) {

        margin-left: 20px;
    }

    #offer .accordion {

        display: none;
    }

    #offer .categories {

        padding-bottom: 390px;
    }

    #offer .categories > div.aplikacje-bazodanowe {

        top: 96px;

        left: 0px;
    }

    #offer .categories > div.www {

        top: 0px;

        left: 168px;
    }

    #offer .categories > div.brand-dtp {

        top: 194px;

        left: 168px;
    }

    #offer .categories > div.grafika-video {

        top: 97px;

        left: 345px;
    }

    #offer .categories > div.hosting {

        top: 0px;

        right: 171px;
    }

    #offer .categories > div.outsourcing {

        top: 194px;

        right: 171px;
    }

    #offer .categories > div.zenit {

        top: 96px;

        right: 0px;
    }

    #offer .categories > div img {

        width: 200px;
    }

    #offer .categories {

        display: block;
    }

    footer {

        height: 316px;
    }

    footer .col-3 {

        width: 25%;

        padding-right: 20px;
    }

    footer .col-3:last-child {

        padding-right: 0;
    }

    footer .col-3:nth-child(2n+1) {

        padding-right: 20px;
    }

    footer .col-3:nth-child(3) {

        clear: none;
    }
}

@media (min-width: 1200px) {

    body {

        background-size: 100% auto;
    }

    .left, #about-us .left, #contact .left, #about-us .left, #contact .left {

        width: 610px;
    }

    .wrapper {

        width: 1200px;
    }

    .honeycomb, #clients .clients > div, #about-us .people > div {

        margin-left: 20px;

        margin-right: 20px;

        margin-top: 0px;
    }

    #about-us .people,
    #clients .clients {

        width: 1030px;
    }

    #about-us .people > div:nth-child(3n+1),
    #clients .clients > div:nth-child(3n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(5n+1),
    #clients .clients > div:nth-child(5n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(6n+1),
    #clients .clients > div:nth-child(6n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(7n+1),
    #clients .clients > div:nth-child(7n+1) {

        margin-left: 20px;
    }

    #about-us .people > div:nth-child(9n+1),
    #clients .clients > div:nth-child(9n+1) {

        margin-left: 121px;
    }

    #about-us .people > div:nth-child(9n+3),
    #clients .clients > div:nth-child(9n+3) {

        margin-left: 20px;
    }

    #contact .right img {

        display: block;
    }

    #offer .categories {

        padding-bottom: 396px;
    }

    #offer .categories > div.aplikacje-bazodanowe {

        top: 50px;

        left: 0px;
    }

    #offer .categories > div.www {

        top: 0px;

        left: 286px;
    }

    #offer .categories > div.brand-dtp {

        top: 194px;

        left: 286px;
    }

    #offer .categories > div.grafika-video {

        top: 98px;

        left: 465px;
    }

    #offer .categories > div.hosting {

        top: 0px;

        right: 286px;
    }

    #offer .categories > div.outsourcing {

        top: 194px;

        right: 286px;
    }

    #offer .categories > div.zenit {

        top: 50px;

        right: 0px;
    }

    #offer .descriptions .tagsmap {

        display: block;
    }

    #offer .descriptions .text {

        width: 440px;
    }

    #offer .categories > div img {

        width: auto;
    }

    #portfolio {

        min-height: 400px;
    }

    #portfolio #project .left {

        background: url("../img/project-shadow.png") no-repeat scroll center bottom transparent;

        width: 590px;
    }

    #portfolio #project .left .img {

        width: 529px;

        height: 352px;

        margin: 0 auto 10px;
    }

    #portfolio #project .left .img img {

        width: 527px;
    }

    #portfolio #project .right {

        width: 490px;

        padding-left: 20px;
    }

    #portfolio #project .images a {

        width: 128px;

        height: 128px;

        margin-right: 23px;
    }

    #portfolio #project .images a img {

        width: auto;
    }

    #portfolio .jcarousel {

        width: 1038px;
    }

    #portfolio .jcarousel li {

        margin-right: 23px;
    }

    .filter p {

        display: block;
    }

    .filter select {

        display: none;

        padding: 3px;
    }

    footer .col-3 {

        padding-right: 30px;
    }

    footer .col-3:nth-child(2n+1) {

        padding-right: 30px;
    }
}

html {

    position: relative;

    min-height: 100%;
}

body {

    background-image: url("../img/banner3.jpg");

    background-repeat: no-repeat;

    background-color: whitesmoke;

    background-attachment: fixed;
}

a {

    transition: 0.2s all ease;

    color: #858585;
}

a:hover {

    color: #2f9550;

    text-decoration: none;
}

p {

    line-height: 1.5;
}

area {

    outline: 0 none;
}

.wrapper {

    margin: 0 auto;
}

.top {

    background-color: #FFF;

    z-index: 999;

    left: 0;

    right: 0;
}

.top .logo {

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -moz-flex-direction: row;

    -ms-flex-direction: row;

    -webkit-flex-direction: row;

    flex-direction: row;

    float: left;

    -webkit-flex-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;
}

.top .logo img {

    display: block;

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    box-flex: 1;
}

.top.fixed {

    top: -45px;
}

.top.fixed nav.main-nav a {
    -webkit-flex-align: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    padding-bottom: 15px;
}

.top.fixed .logo {

    padding-top: 45px;
}

.top.fixed .logo img {

    height: 36px;
}

nav.main-nav {

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

    text-transform: uppercase;
}

nav.main-nav a {

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;
}

nav.main-nav a.active {

    background-color: #2f9550;

    color: #FFF;

    position: relative;
}

.honeycomb, #clients .clients > div, #about-us .people > div {

    display: inline-block;

    position: relative;
}

.left, #about-us .left, #contact .left {

    float: left;

    margin-right: 50px;
}

.right, #about-us .right, #contact .right {

    float: left;
}

.content .header {

    text-align: center;
}

.content .header h1 {

    color: white;

    text-transform: uppercase;

    font-family: SourceSansPro-Regular;
}

.content .header p {

    font-family: Arial;

    font-size: 12px;

    color: white;

    margin-bottom: 18px;
}

.content article {

    background-color: white;

    text-align: left;
}

.content article h2 {

    color: #151515;

    font-size: 26px;

    font-family: SourceSansPro-Regular;

    border-bottom: 1px solid #bcbcbc;

    padding-bottom: 20px;

    margin-top: 0;

    margin-bottom: 25px;
}

.content article h3 {

    font-family: SourceSansPro-Regular;

    color: #151515;

    font-size: 21px;

    margin-top: 0;
}

.content article p {

    font-family: SourceSansPro-Regular;

    font-size: 14px;

    color: #484848;
}

.content article .clearfix {

    clear: both;

    float: none;
}

#clients .clients {

    clear: both;

    margin: 0 auto;
}

#clients .clients > div a {

    position: absolute;

    z-index: 2;

    left: 0;
}

#about-us .left {

    margin-bottom: 50px;
}

#about-us .right {

    margin-bottom: 50px;
}

#about-us .sign {

    float: right;

    margin-top: 20px;
}

#about-us .people {

    clear: both;

    margin: 0 auto;
}

#about-us .people > div.ewa-l span {
    background-image: url("../img/about-us/ewa-l-hover.png");
}

#about-us .people > div.ewa-l .hexagon {
    background-color: #2f9550;
}

#about-us .people > div.ewa-l .hexagon:before {
    border-bottom-color: #2f9550;
}

#about-us .people > div.ewa-l .hexagon:after {
    border-top-color: #2f9550;
}

#about-us .people > div.tomek span {
    background-image: url("../img/about-us/tomek-hover.png");
}

#about-us .people > div.tomek .hexagon {
    background-color: #6fa4ba;
}

#about-us .people > div.tomek .hexagon:before {
    border-bottom-color: #6fa4ba;
}

#about-us .people > div.tomek .hexagon:after {
    border-top-color: #6fa4ba;
}

#about-us .people > div.lukasz span {
    background-image: url("../img/about-us/lukasz-hover.png");
}

#about-us .people > div.lukasz .hexagon {
    background-color: #00a7e4;
}

#about-us .people > div.lukasz .hexagon:before {
    border-bottom-color: #00a7e4;
}

#about-us .people > div.lukasz .hexagon:after {
    border-top-color: #00a7e4;
}

#about-us .people > div.janek span {
    background-image: url("../img/about-us/janek-hover.png");
}

#about-us .people > div.janek .hexagon {
    background-color: #263c6e;
}

#about-us .people > div.janek .hexagon:before {
    border-bottom-color: #263c6e;
}

#about-us .people > div.janek .hexagon:after {
    border-top-color: #263c6e;
}

#about-us .people > div.michal span {
    background-image: url("../img/about-us/michal-hover.png");
}

#about-us .people > div.michal .hexagon {
    background-color: #971756;
}

#about-us .people > div.michal .hexagon:before {
    border-bottom-color: #971756;
}

#about-us .people > div.michal .hexagon:after {
    border-top-color: #971756;
}

#about-us .people > div.przemek span {
    background-image: url("../img/about-us/przemek-hover.png");
}

#about-us .people > div.przemek .hexagon {
    background-color: #00E48B;
}

#about-us .people > div.przemek .hexagon:before {
    border-bottom-color: #00E48B;
}

#about-us .people > div.przemek .hexagon:after {
    border-top-color: #00E48B;
}

#about-us .people > div.wojtek span {
    background-image: url("../img/about-us/wojtek-hover.png");
}

#about-us .people > div.wojtek .hexagon {
    background-color: #BBE300;
}

#about-us .people > div.wojtek .hexagon:before {
    border-bottom-color: #BBE300;
}

#about-us .people > div.wojtek .hexagon:after {
    border-top-color: #BBE300;
}

#about-us .people > div span {

    cursor: pointer;

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    height: 189px;

    width: 163px;

    background-repeat: no-repeat;

    background-attachment: scroll;

    background-position: 0 0;

    background-color: transparent;

    z-index: 2;
}

#about-us .people > div.active span {

    display: block;
}

.content article .hexagon {

    width: 240px;

    height: 130px;

    position: absolute;

    z-index: 3;

    display: none;

    padding: 0 30px;

    text-align: center;

    font-family: SourceSansPro-Regular;
}

.content article .hexagon:before {

    content: "";

    position: absolute;

    top: -75px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 120px solid transparent;

    border-right: 120px solid transparent;

    border-bottom: 75px solid;
}

.content article .hexagon:after {

    content: "";

    position: absolute;

    bottom: -75px;

    left: 0;

    width: 0;

    height: 0;

    border-left: 120px solid transparent;

    border-right: 120px solid transparent;

    border-top: 75px solid;
}

.content article .hexagon h2 {

    font-size: 23px;

    color: #151515;

    border-bottom-color: #3d3d3d;

    margin-bottom: 20px;
}

.content article .hexagon p {

    font-size: 14px;

    color: #222;
}

.content article .hexagon a {

    color: #222;
}

.content article .hexagon.white * {

    color: #FFF !important;

    border-bottom-color: whitesmoke;
}

#offer .accordion h2 {

    font-family: 'Open Sans';

    background-color: #f4f4f4;

    height: 60px;

    cursor: pointer;

    border-bottom: 0 none;

    margin-bottom: 1px;

    padding-left: 20px;

    font-weight: normal;

    font-size: 20px;

    display: table-cell;

    vertical-align: middle;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    -moz-flex-flow: row wrap;

    -ms-flex-flow: row wrap;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    float: left;

    -webkit-flex-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    width: 100%;

    padding-bottom: 0;
}

#offer .accordion h2.aplikacje-bazodanowe {

    border-left: 20px solid #27479e;
}

#offer .accordion h2.active.aplikacje-bazodanowe {

    background-color: #5169b1;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.www {

    border-left: 20px solid #21afb1;
}

#offer .accordion h2.active.www {

    background-color: #4bbfbf;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.brand-dtp {

    border-left: 20px solid #ef2571;
}

#offer .accordion h2.active.brand-dtp {

    background-color: #f24e8b;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.grafika-video {

    border-left: 20px solid #7eaa5b;
}

#offer .accordion h2.active.grafika-video {

    background-color: #96ba7a;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.hosting {

    border-left: 20px solid #a7329d;
}

#offer .accordion h2.active.hosting {

    background-color: #b858af;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.outsourcing {

    border-left: 20px solid #f79609;
}

#offer .accordion h2.active.outsourcing {

    background-color: #faaa39;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion h2.zenit {

    border-left: 20px solid #00853e;
}

#offer .accordion h2.active.zenit {

    background-color: #309c62;

    color: #fff;

    transition: all 0.3s ease;
}

#offer .accordion div.tab {

    clear: both;

    padding: 20px;

    display: none;
}

#offer .categories {

    position: relative;

    border-bottom: 1px solid #808080;
}

#offer .categories > div {

    position: absolute;
}

#offer .descriptions {

    margin-top: 24px;
}

#offer .descriptions > div.aplikacje-bazodanowe .text h2 {

    color: #27479e;
}

#offer .descriptions > div.aplikacje-bazodanowe .side-banner {

    background: url("../img/side-banner/aplikacje-bazodanowe.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.www .text h2 {

    color: #21afb1;
}

#offer .descriptions > div.www .side-banner {

    background: url("../img/side-banner/www.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.brand-dtp .text h2 {

    color: #ef2571;
}

#offer .descriptions > div.brand-dtp .side-banner {

    background: url("../img/side-banner/brand-dtp.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.grafika-video .text h2 {

    color: #7eaa5b;
}

#offer .descriptions > div.grafika-video .side-banner {

    background: url("../img/side-banner/grafika-video.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.hosting .text h2 {

    color: #a7329d;
}

#offer .descriptions > div.hosting .side-banner {

    background: url("../img/side-banner/hosting.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.outsourcing .text h2 {

    color: #f79609;
}

#offer .descriptions > div.outsourcing .side-banner {

    background: url("../img/side-banner/outsourcing.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions > div.zenit .text h2 {

    color: #00853e;
}

#offer .descriptions > div.zenit .side-banner {

    background: url("../img/side-banner/zenit.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions .default {

    display: block;
}

#offer .descriptions .default .tagsmap p:nth-child(1) {

    font-size: 42px;

    color: #6a6a6a;

    left: 0;

    top: 72px;
}

#offer .descriptions .default .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .default .tagsmap p:nth-child(3) {

    font-size: 38px;

    color: #444444;

    left: 0;

    top: 132px;
}

#offer .descriptions .default .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #868686;

    left: 98px;

    top: 70px;
}

#offer .descriptions .default .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    right: 0;

    bottom: 0;
}

#offer .descriptions .default .tagsmap p:nth-child(6) {

    font-size: 33px;

    color: #626262;

    right: 8px;

    top: 103px;
}

#offer .descriptions .default .tagsmap p:nth-child(7) {

    top: 0;

    left: 0;

    font-size: 30px;

    color: #999;
}

#offer .descriptions .default .tagsmap p:nth-child(8) {

    font-size: 37px;

    color: #B8B8B8;

    top: 32px;

    right: 41px;
}

#offer .descriptions .default .tagsmap p:nth-child(9) {

    font-size: 25px;

    color: #B8B8B8;

    bottom: 0;

    left: 5px;
}

#offer .descriptions .aplikacje-bazodanowe .tagsmap p:nth-child(1) {

    font-size: 37px;

    color: #979696;

    right: 0;

    top: 53px;
}

#offer .descriptions .aplikacje-bazodanowe .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .aplikacje-bazodanowe .tagsmap p:nth-child(3) {

    font-size: 26px;

    color: #444;

    left: 0;

    top: 130px;
}

#offer .descriptions .aplikacje-bazodanowe .tagsmap p:nth-child(4) {

    font-size: 18px;

    color: #a4a4a4;

    left: 30px;

    top: 105px;
}

#offer .descriptions .aplikacje-bazodanowe .tagsmap p:nth-child(5) {

    font-size: 33px;

    color: #626262;

    left: 0;

    top: 20px;
}

#offer .descriptions .www .tagsmap p:nth-child(1) {

    font-size: 37px;

    color: #6a6a6a;

    left: 0;

    top: 80px;
}

#offer .descriptions .www .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .www .tagsmap p:nth-child(3) {

    font-size: 35px;

    color: #444444;

    left: 0;

    top: 150px;
}

#offer .descriptions .www .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #868686;

    left: 98px;

    top: 44px;
}

#offer .descriptions .www .tagsmap p:nth-child(5) {

    font-size: 20px;

    color: #a4a4a4;

    left: 30px;

    top: 120px;
}

#offer .descriptions .www .tagsmap p:nth-child(6) {

    font-size: 33px;

    color: #C7C7C7;

    left: 0;

    top: 41px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(1) {

    font-size: 37px;

    color: #6a6a6a;

    left: 0;

    top: 80px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(3) {

    font-size: 35px;

    color: #444444;

    right: 10px;

    top: 151px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #868686;

    right: 15px;

    top: 44px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    left: 30px;

    top: 120px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(6) {

    font-size: 33px;

    color: #C7C7C7;

    left: 0;

    top: 41px;
}

#offer .descriptions .brand-dtp .tagsmap p:nth-child(7) {

    right: 40px;

    top: 92px;

    font-size: 20px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(1) {

    font-size: 37px;

    color: #6a6a6a;

    left: 0;

    top: 80px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(3) {

    font-size: 35px;

    color: #444444;

    right: 10px;

    top: 58px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #868686;

    right: 15px;

    top: 0px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    left: 30px;

    top: 120px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(6) {

    font-size: 31px;

    color: #C7C7C7;

    left: 0;

    top: 146px;
}

#offer .descriptions .grafika-video .tagsmap p:nth-child(7) {

    right: 40px;

    top: 92px;

    font-size: 20px;
}

#offer .descriptions .hosting .tagsmap p:nth-child(1) {

    font-size: 37px;

    color: #6a6a6a;

    left: 0;

    top: 80px;
}

#offer .descriptions .hosting .tagsmap p:nth-child(2) {

    font-size: 36px;

    color: #6a6a6a;

    right: 38px;

    top: 0;
}

#offer .descriptions .hosting .tagsmap p:nth-child(3) {

    font-size: 35px;

    color: #444444;

    right: 10px;

    top: 58px;
}

#offer .descriptions .hosting .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #868686;

    left: 12px;

    top: 30px;
}

#offer .descriptions .hosting .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    left: 30px;

    top: 120px;
}

#offer .descriptions .hosting .tagsmap p:nth-child(6) {

    font-size: 31px;

    color: #C7C7C7;

    left: 150px;

    top: 146px;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(1) {

    font-size: 22px;

    color: #3A3A3A;

    left: 0;

    top: 60px;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(2) {

    font-size: 28px;

    color: #6a6a6a;

    right: 0;

    top: 0;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(3) {

    font-size: 24px;

    color: #888888;

    left: 0;

    top: 132px;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #BDBDBD;

    left: 110px;

    top: 25px;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    right: 0;

    bottom: 15px;
}

#offer .descriptions .outsourcing .tagsmap p:nth-child(6) {

    font-size: 33px;

    color: #626262;

    right: 8px;

    top: 88px;
}

#offer .descriptions .zenit .tagsmap p:nth-child(1) {

    font-size: 22px;

    color: #3A3A3A;

    left: 0;

    top: 60px;
}

#offer .descriptions .zenit .tagsmap p:nth-child(2) {

    font-size: 28px;

    color: #6a6a6a;

    right: 52px;

    top: 0;
}

#offer .descriptions .zenit .tagsmap p:nth-child(3) {

    font-size: 24px;

    color: #888888;

    left: 0;

    top: 0px;
}

#offer .descriptions .zenit .tagsmap p:nth-child(4) {

    font-size: 30px;

    color: #BDBDBD;

    left: 110px;

    top: 25px;
}

#offer .descriptions .zenit .tagsmap p:nth-child(5) {

    font-size: 26px;

    color: #a4a4a4;

    right: 0;

    bottom: 15px;
}

#offer .descriptions .zenit .tagsmap p:nth-child(6) {

    font-size: 33px;

    color: #626262;

    right: 8px;

    top: 88px;
}

#offer .descriptions .tagsmap {

    width: 310px;

    height: 200px;

    margin-right: 30px;

    font-family: SourceSansPro-Regular;

    position: relative;

    float: left;

    clear: left;
}

#offer .descriptions .tagsmap p {

    position: absolute;

    line-height: 1;

    margin: 0;

    transition: 1s all ease;
}

#offer .descriptions .tagsmap p:hover {

    color: #151515 !important;
}

#offer .descriptions .text {

    float: left;

    margin-right: 30px;
}

#offer .descriptions .text h2 {

    border-bottom: 1px solid #808080;

    margin-bottom: 14px;
}

#offer .descriptions .text p {

    font-size: 14px;

    font-family: SourceSansPro-Regular;

    color: #494949;
}

#offer .descriptions .side-banner {

    float: left;

    width: 310px;

    height: 190px;

    background: url("../img/side-banner/default.png") no-repeat scroll 0 0, url("../img/side-banner.jpg") no-repeat scroll 0 0;
}

#offer .descriptions .side-banner a {

    display: block;

    width: 100%;

    height: 100%;
}

#portfolio #project {

    overflow: hidden;
}

#portfolio #project .left {

    margin-bottom: 20px;

    margin-right: 0;

    float: left;
}

#portfolio #project .left .img {

    display: block;

    border: 1px solid #acacac;

    background-color: #FFF;
}

#portfolio #project .right {

    margin-bottom: 20px;

    float: left;
}

#portfolio #project .right h2 {

    font-size: 30px;

    border-bottom: 0 none;

    margin-bottom: 6px;

    padding-bottom: 0;

    position: relative;

    padding-right: 70px;
}

#portfolio #project .right h2 a {

    float: right;

    transition: 0s all ease;

    background: url("../img/arrow_left.png") no-repeat scroll 0 0 transparent;

    width: 17px;

    height: 34px;

    position: absolute;

    right: 36px;

    top: 0;
}

#portfolio #project .right h2 a.inactive {

    background-position: 0 bottom;
}

#portfolio #project .right h2 a.next {

    background-image: url("../img/arrow_right.png");

    background-position: 0 bottom;

    right: 0;
}

#portfolio #project .right h2 a.next.inactive {

    background-position: 0 top;
}

#portfolio #project .right .proj {

    font-size: 18px;

    color: #000;

    margin: 20px 0 0px;

    padding-bottom: 8px;
}

#portfolio #project .right .proj .small-gray {

    font-size: 12px;

    color: #666;
}

#portfolio #project .images {

    overflow: hidden;

    margin-bottom: 20px;

    max-width: 430px;
}

#portfolio #project .images a {

    display: block;

    float: left;

    border: 1px solid #E9E9E9;

    cursor: pointer;
}

#portfolio #project .images a:last-child {

    margin-right: 0;
}

#portfolio #project .images a.active {

    border-color: #818181;
}

#portfolio #project .description {

    font-family: SourceSansPro-Light;
}

#portfolio #project .site-url {

    font-family: SourceSansPro-Regular;

    margin-top: 10px;
}

#portfolio .project-list .filter {

    float: right;

    margin-top: -60px;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row;

    -moz-flex-direction: row;

    -ms-flex-direction: row;

    -webkit-flex-direction: row;

    flex-direction: row;

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

    margin-bottom: 20px;
}

#portfolio .project-list .filter p {

    margin-left: 20px;
}

#portfolio .project-list .filter p a {

    font-family: SourceSansPro-Light;

    font-size: 14px;

    color: #000;
}

#portfolio .project-list .filter p a.active {

    color: #2f9550;
}

#portfolio .project-list .filter p:before {

    content: "|";

    margin-right: 20px;
}

#portfolio .project-list .filter p:first-child:before {

    display: none;
}

#portfolio .project-list .filter select {

    margin-bottom: 15px;
}

#portfolio .jcarousel-wrapper {

    position: relative;
}

#portfolio .jcarousel-wrapper .jcarousel {

    position: relative;

    overflow: hidden;

    margin: 0 auto;
}

#portfolio .jcarousel-wrapper .jcarousel ul {

    width: 20000em;

    position: relative;

    list-style: none;

    margin: 0;

    padding: 0;
}

#portfolio .jcarousel-wrapper .jcarousel li {

    position: relative;

    float: left;

    cursor: pointer;

    transition: 1s all ease;

    border: 1px solid #CCC;
}

#portfolio .jcarousel-wrapper .jcarousel li:hover {

    border-color: #2f9550;
}

#portfolio .jcarousel-wrapper .jcarousel li.active:after {

    content: "";

    border: 3px solid #2f9550;

    display: block;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;
}

#portfolio .jcarousel-wrapper .jcarousel-control-prev {

    background: url("../img/arrow_left.png") no-repeat scroll 0 0 transparent;

    transition: 0s all ease;

    width: 17px;

    height: 34px;

    color: transparent;

    position: absolute;

    left: 0;

    z-index: 2;
}

#portfolio .jcarousel-wrapper .jcarousel-control-prev.inactive {

    background-position: 0 bottom;
}

#portfolio .jcarousel-wrapper .jcarousel-control-next {

    background: url("../img/arrow_right.png") no-repeat scroll 0 bottom transparent;

    transition: 0s all ease;

    width: 17px;

    height: 34px;

    position: absolute;

    color: transparent;

    right: 0;

    z-index: 2;
}

#portfolio .jcarousel-wrapper .jcarousel-control-next.inactive {

    background-position: 0 0;
}

#contact .right img {

    margin-bottom: 40px;
}

#contact .abude {

    float: left;
}

#contact .qr-codes > div {

    overflow: hidden;

    margin-bottom: 10px;
}

#contact .qr-codes img {

    float: left;

    margin-right: 20px;
}

footer {

    left: 0;

    bottom: 0;

    right: 0;

    background-color: #262626;

    color: white;

    font-family: Arial;
}

footer .col-3 {

    padding-bottom: 20px;

    float: left;
}

footer .col-3:last-child {

    padding-right: 0;
}

footer a {

    color: white;
}

footer a.green {

    color: #2f9550;
}

footer h2 {

    font-size: 17px;

    font-weight: normal;

    border-bottom: 1px solid #FFF;

    margin-top: 36px;

    padding-bottom: 14px;

    -webkit-box-shadow: 0 1px 0px black;

    -moz-box-shadow: 0 1px 0px black;

    -ms-box-shadow: 0 1px 0px black;

    box-shadow: 0 1px 0px black;
}

footer ul {

    margin: 0;

    padding: 0;

    list-style-type: none;
}

footer ul li {

    line-height: 1.6;

    font-size: 15px;
}

footer p {

    line-height: 1.6;

    font-size: 15px;
}

footer .bottom {

    background-color: #151515;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 14px 0;
}

footer .bottom p {

    font-size: 12px;

    margin: 0;
}

.android .accordion h2 {

    padding-top: 20px;
}

.android .logo {

    padding-top: 10px;
}

.no-flexbox .top.fixed .logo {

    padding-top: 30px;
}

.no-flexbox .top.fixed nav.main-nav a {

    padding-bottom: 25px;

    padding-top: 63px;
}

.no-flexbox .top.fixed nav.main-nav a.active {

    margin-bottom: 0;

    padding-top: 63px;
}

/*	Galeria	*/

#imagelightbox {

    position: fixed;

    z-index: 9999;

    -ms-touch-action: none;

    touch-action: none;
}

/* ACTIVITY INDICATION */

#imagelightbox-loading,
#imagelightbox-loading div {

    border-radius: 50%;
}

#imagelightbox-loading {

    width: 2.5em;

    /* 40 */

    height: 2.5em;

    /* 40 */

    background-color: #444;

    background-color: rgba(0, 0, 0, 0.5);

    position: fixed;

    z-index: 10003;

    top: 50%;

    left: 50%;

    padding: 0.625em;

    /* 10 */

    margin: -1.25em 0 0 -1.25em;

    /* 20 */

    -webkit-box-shadow: 0 0 2.5em rgba(0, 0, 0, 0.75);

    /* 40 */

    box-shadow: 0 0 2.5em rgba(0, 0, 0, 0.75);

    /* 40 */
}

#imagelightbox-loading div {

    width: 1.25em;

    /* 20 */

    height: 1.25em;

    /* 20 */

    background-color: #fff;

    -webkit-animation: imagelightbox-loading .5s ease infinite;

    animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {

    from {

        opacity: .5;

        -webkit-transform: scale(0.75);
    }

    50% {

        opacity: 1;

        -webkit-transform: scale(1);
    }

    to {

        opacity: .5;

        -webkit-transform: scale(0.75);
    }
}

@keyframes imagelightbox-loading {

    from {

        opacity: .5;

        transform: scale(0.75);
    }

    50% {

        opacity: 1;

        transform: scale(1);
    }

    to {

        opacity: .5;

        transform: scale(0.75);
    }
}

/* OVERLAY */

#imagelightbox-overlay {

    background-color: #fff;

    background-color: rgba(255, 255, 255, 0.9);

    position: fixed;

    z-index: 9998;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;
}

/* "CLOSE" BUTTON */

#imagelightbox-close {

    width: 2.5em;

    /* 40 */

    height: 2.5em;

    /* 40 */

    text-align: left;

    background-color: #666;

    border-radius: 50%;

    position: fixed;

    z-index: 10002;

    top: 2.5em;

    /* 40 */

    right: 2.5em;

    /* 40 */

    -webkit-transition: color .3s ease;

    transition: color .3s ease;

    border-width: 0;
}

#imagelightbox-close:hover,
#imagelightbox-close:focus {

    background-color: #111;
}

#imagelightbox-close:before,
#imagelightbox-close:after {

    width: 2px;

    background-color: #fff;

    content: '';

    position: absolute;

    top: 20%;

    bottom: 20%;

    left: 50%;

    margin-left: -1px;
}

#imagelightbox-close:before {

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);
}

#imagelightbox-close:after {

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    transform: rotate(-45deg);
}

/* CAPTION */

#imagelightbox-caption {

    text-align: center;

    color: #fff;

    background-color: #666;

    position: fixed;

    z-index: 10001;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 0.625em;

    /* 10 */
}

/* NAVIGATION */

#imagelightbox-nav {

    background-color: #444;

    background-color: rgba(0, 0, 0, 0.5);

    border-radius: 20px;

    position: fixed;

    z-index: 10001;

    left: 50%;

    bottom: 3.75em;

    /* 60 */

    padding: 0.313em;

    /* 5 */

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);
}

#imagelightbox-nav button {

    width: 1em;

    /* 20 */

    height: 1em;

    /* 20 */

    background-color: transparent;

    border: 1px solid #fff;

    border-radius: 50%;

    display: inline-block;

    margin: 0 0.313em;

    /* 5 */
}

#imagelightbox-nav button.active {

    background-color: #fff;
}

/* ARROWS */

.imagelightbox-arrow {

    width: 3.75em;

    /* 60 */

    height: 7.5em;

    /* 120 */

    background-color: #444;

    background-color: rgba(0, 0, 0, 0.5);

    vertical-align: middle;

    display: none;

    position: fixed;

    z-index: 10001;

    top: 50%;

    margin-top: -3.75em;

    /* 60 */

    cursor: pointer;
}

.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus {

    background-color: #666;

    background-color: rgba(0, 0, 0, 0.75);
}

.imagelightbox-arrow:active {

    background-color: #111;
}

.imagelightbox-arrow-left {

    left: 2.5em;

    /* 40 */
}

.imagelightbox-arrow-right {

    right: 2.5em;

    /* 40 */
}

.imagelightbox-arrow:before {

    width: 0;

    height: 0;

    border: 1em solid transparent;

    content: '';

    display: inline-block;

    margin-bottom: -0.125em;

    /* 2 */
}

.imagelightbox-arrow-left:before {

    border-left: none;

    border-right-color: #fff;

    margin-left: -0.313em;

    /* 5 */
}

.imagelightbox-arrow-right:before {

    border-right: none;

    border-left-color: #fff;

    margin-right: -0.313em;

    /* 5 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow {

    -webkit-animation: fade-in .25s linear;

    animation: fade-in .25s linear;
}

@-webkit-keyframes fade-in {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }
}

@keyframes fade-in {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }
}

@media only screen and (max-width: 41.25em) {

    #container {

        width: 100%;
    }

    #imagelightbox-close {

        top: 1.25em;

        /* 20 */

        right: 1.25em;

        /* 20 */
    }

    #imagelightbox-nav {

        bottom: 1.25em;

        /* 20 */
    }

    .imagelightbox-arrow {

        width: 2.5em;

        /* 40 */

        height: 3.75em;

        /* 60 */

        margin-top: -2.75em;

        /* 30 */
    }

    .imagelightbox-arrow-left {

        left: 1.25em;

        /* 20 */
    }

    .imagelightbox-arrow-right {

        right: 1.25em;

        /* 20 */
    }
}

@media only screen and (max-width: 20em) {

    .imagelightbox-arrow-left {

        left: 0;
    }

    .imagelightbox-arrow-right {

        right: 0;
    }
}

a.tel_link {
    color: #484848;
}

a.tel_link:hover {
    color: #2F9550;
}

a.tel_link_footer {
    color: #FFF;
}

a.tel_link_footer:hover {
    color: #2F9550;
}