@CHARSET "UTF-8";


/* tele-groteskultregular */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: top;
    box-sizing:border-box;
}

.fett {
    font-family: Tele-GroteskFet !important;
}
.halb {
    font-family: Tele-Grotesk-Halb !important;
}
.ultra {
    font-family: tele-groteskultregular !important;
}

.center {
    text-align: center
}

.blue {
    color: #427bab !important;
}
.font07  {  font-size:  0.7em;}
.font08  {  font-size:  0.8em;}
.font09  {  font-size:  0.9em;}
.font10  {  font-size:  1.0em;}
.font11  {  font-size:  1.1em;}
.font12  {  font-size:  1.2em;}
.font13  {  font-size:  1.3em;}
.font14  {  font-size:  1.4em;}
.font15  {  font-size:  1.5em;}
.font16  {  font-size:  1.6em;}
.font17  {  font-size:  1.7em;}
.font18  {  font-size:  1.8em;}
.font19  {  font-size:  1.9em;}
.font20  {  font-size:  2.0em;}
.font21  {  font-size:  2.1em;}
.font22  {  font-size:  2.2em;}
.font23  {  font-size:  2.3em;}
.font24  {  font-size:  2.4em;}
.font25  {  font-size:  2.5em;}
.font26  {  font-size:  2.6em;}
.font27  {  font-size:  2.7em;}
.font28  {  font-size:  2.8em;}
.font29  {  font-size:  2.9em;}
.font30  {  font-size:  3.0em;}
.font31  {  font-size:  3.1em;}
.font32  {  font-size:  3.2em;}
.font33  {  font-size:  3.3em;}
.font34  {  font-size:  3.4em;}
.font35  {  font-size:  3.5em;}
.font36  {  font-size:  3.6em;}
.font37  {  font-size:  3.7em;}
.font38  {  font-size:  3.8em;}
.font39  {  font-size:  3.9em;}
.font40  {  font-size:  4.0em;}

body {
    margin: 0;
    display: block;
	background-color:#4B4B4B;
    font-family:Tele-GroteskHal;
    font-size:18px;
    
}
body * {
    box-sizing: border-box;
}
table.area {
    width: 100%
}
a {
    text-decoration: none;
    color: #4379ab;
}
a:hover {
    color: #E20074;
}
a:hover,
a:focus,
a:active {
    outline: medium none;
    text-decoration: underline;
}
b,
strong {
    font-family: Tele-GroteskFet;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.clear {
    clear: both;
    float: none;
    font-size: 0px;
    height: 0px;
    background: none;
    padding: 0;
}
.magenta {
    color: #E20074 !important;
}

.btn {
    background: #e20074;
    color: white;
    font-family: Tele-GroteskNor, Arial, Tahoma, Helvetica;
    font-size: 1.2em;
    height: auto;
    letter-spacing: -0.5px;
    line-height: auto;
    padding: 0.5em 1.9em;
    border-radius: 3px;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    display:inline-block;
    margin: 10px auto;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.69);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.69);
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.69);
}
.btn:hover {
    color:black;
}
.wrapper {
    max-width: 1920px;
    min-width: 350px;
    /* width: 1520px; */
    /* display: block; */
    /* position: relative; */
    margin: 0 auto;
    padding: 25px 0;
    height: auto;
    box-shadow: 0 0 35px rgba(0,0,0,0.77);
    width: 100%;
    background-color: white;
    overflow-x:hidden;
}



.mainCon {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: Arial;
    font-size: 12px;
    color: #333;
    background-color: #fff;
    height:80px;
    max-width: 1920px
}
.mainCon a.logo1 {
    display: inline-block;
    float:left;
    margin: 0 auto;
    height: 75px;
    width:120px;
    background: url(../images/logo_03.png) 20px center no-repeat;
}
.mainCon a.logo2 {
    display: inline-block;
    width: 160px;
    float: right;
    margin: 0 auto;
    height: 75px;
    margin-right: 20px;
    background: url(../images/logo_06.png) right center no-repeat;
}

.mainCon a:hover {
    text-decoration: none
}

.section {
    width: 100%;
    height: auto;
    padding:15px;
    overflow-x: hidden; 
}

.section .content {
    
    width:1050px;
    margin: 0 auto;
    position:relative;
    padding: 10px 0;
}



.visible-sm {display: none}
.visible-md {display: none}
.visible-lg {display: block}

.hidden-sm {display: block}
.hidden-md {display: block}
.hidden-lg {display: none}


.without-tel {
    display: none;
}


/* TYLKO DLA TEJ STRONY ---------------------------------------------- */
.tel-switcher{
    background:url(../images/bg_tel_switcher.png) center repeat-x;
}
.tel-switcher .switch-holder {
    background: #eee;
    width:100%;
    max-width: 330px;
    display: block;
    margin:5px auto;
    list-style: none;
    border-radius: 5px;
    padding: 3px;
    z-index: 20;
    text-align: center;
}
.tel-switcher .switch-holder a{
    display: inline-block;
    text-align: center;
    width:49%;
    color:#333;
    height: 2em;
    line-height: 2em;
    font-size: 0.85em;
    border-radius: 5px;
    text-decoration: none;
}
.tel-switcher .switch-holder a.active,
.tel-switcher .switch-holder a:hover{
    background: white;
    color:#e20074;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.56);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.56);
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.56);
}

.nav-holder {
    height:55px;
}
.point-nav  {
    width:auto;
    display: inline-block;
    margin-top: 20px
}
.point-nav .point {
    width:12px;
    height: 12px;
    border-radius: 50%;
    border:2px solid black;
    display: inline-block;
}
.point-nav .point.active {
    border:2px solid white;
    background: black;
}
.nav-holder .left {
    width:18px;
    height:26px;
    display: block;
    float: left;
    margin:15px;
    background: url(../images/nav_arrows.png) top left no-repeat;
}
.nav-holder .right {
    width:18px;
    height:26px;
    display: block;
    float: right;
    margin:15px;
    background: url(../images/nav_arrows.png) top right no-repeat;
}

.box-wrapper {
    -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;}
.box {
    width:340px;
    background-color: #fafafa;
    height:auto;
    text-align: center;
    position: relative;
    display: inline-block;
    padding:15px 0 0;
    box-sizing:border-box;
    z-index: 50;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.32);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.32);

    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.box:hover {
    background-color: #fff;
    z-index: 60;
    transform: scale(1.005);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
.box.hovered {
    background-color: #fff;
    z-index: 60;
    transform: scale(1.005);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.box .name {
    font-family: Tele-GroteskFet;
    font-size: 2.2em;
    padding-bottom: 15px;
}

.box hr {
    width:100%;
    border: none;
    border-top: 1px solid #ccc
}
.box .item {
    width:100%;
    min-height: 60px;
    padding:15px;
    display: block;
    vertical-align: middle;
}
.box .item.grey {
    background-color: #eee
}
.box .item.switcher-holder {
    height: 120px
}
.box .item.fixed-height {
    height: 81px
}
.box .item span{
    color:#e20074;
    display: block;
    font-family: Tele-GroteskFet;
    font-size: 1.2em
}
.box .item sup{
    font-family: Tele-GroteskHal;
    font-size: 0.7em
}
.box .item sub{
    font-family: Tele-GroteskHal;
    font-size: 0.7em;
    position: relative;
    top:0.5em;
}

.box .item .switcher > p  {
    display: inline-block;
}
.box .item .switcher p.net.active {
    padding: 4px 10px;
    color:#427bab;
    font-size: 1.9em;
    font-family: Tele-GroteskFet
}
.box .item .switcher p.net.nolimit.active {
    
    font-size: 1em;
    line-height: 1em;
    color:#e20074;
}

.box .item .switcher .net {
    display: none
}
.box .item .switcher .net span {
    display: none
}
.box .item .switcher .net.active span {
    display: block;
    font-size: 13px;
    color:#333;

}
.box .item .switcher .net.active,
.box .item .switcher .net.btn-left, 
.box .item .switcher .net.btn-right {
    display: inline-block
}

.box .item .switcher .btn-left,
.box .item .switcher .btn-right {
    line-height: 50px;
    cursor: pointer;
}
.box .item .switcher .btn-right.nolimit {
    line-height: 1.1em;
    padding-top: 4px;
}
.box .item .switcher .btn-left {
    width:74px;
    height:52px;
    padding-left:13px;
    background: url(../images/button_arrow.png) bottom left no-repeat;
}
.box .item .switcher .btn-right {
    width:74px;
    height:51px;
    padding-right: 13px;
    background: url(../images/button_arrow.png) top right no-repeat;
}
.box .item .switcher .btn-left.disabled {
    width:74px;
    height:51px;
    background: url(../images/button_arrow.png) top left no-repeat;
}
.box .item .switcher .btn-right.disabled {
    width:74px;
    height:52px;
    background: url(../images/button_arrow.png) bottom right no-repeat;
}
.box .item .price {
    font-size: 2.7em;
    font-family: Tele-GroteskNor;
    margin-bottom: -0.2em;
}
.box .item .price span{
    font-size: 1em;
    color:#333;
    display: inline;
    font-family: Tele-GroteskNor;
}
.box .item .price sup {
    font-family: Tele-GroteskNor;
}
.box .item .price-static {
    font-size: 2.7em;
    font-family: Tele-GroteskFet;
    color:#e20074;
    margin-bottom: -0.2em;
}
.box .item .price-static span{
    font-size: 1em;
    display: inline;
}
.box .item .price-static sup {
    font-family: Tele-GroteskFet;
}

.box .item .block-price {
    display: inline-block;
    margin:0 10px;
}

.box .ico {
    font-size: 0.6em;
    display: inline-block;
    margin:10px;
    cursor:pointer;
}
.box .ico-bonus {
    font-size: 0.7em;
    display: inline-block;
    margin:15px 20px ;
    text-align: left;
    padding-left: 45px
}

.box .ico-bonus.delivery {
    background: url(../images/ico-delivery.png) center left no-repeat;
}
.box .ico-bonus.online-shop {
    background: url(../images/online-shop.png) center left no-repeat;
}

/* -------------- MOBILE ------------------------------------------------*/

@media screen and (max-width: 1085px){   /* ------------------------------ 1085 --------------------------------*/
    
.visible-sm {display: none}
.visible-md {display: block}
.visible-lg {display: none}

.hidden-sm {display: block}
.hidden-md {display: none}
.hidden-lg {display: block}


    .hide960{display: none}


    .box:hover {
        background-color: #fff;
        z-index: 30;
        transform: none;
        -webkit-box-shadow: none
        -moz-box-shadow: none
        box-shadow: none
    }
    .box.centered {
        filter:none;
        transform:scale(1.02);
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        z-index: 60
    }

}

@media screen and (max-width: 640px){   /* ------------------------------ 640 --------------------------------*/

.visible-sm {display: block}
.visible-md {display: none}
.visible-lg {display: none}

.hidden-sm {display: none}
.hidden-md {display: block}
.hidden-lg {display: block}

    body {font-size: 14px}
    


    .mainCon {
        position: relative;
        width: 100%;
        margin: 0 auto;
        font-family: Arial;
        font-size: 12px;
        color: #333;
        background-color: #fff;
        height:50px;
        max-width: 1920px
    }
    .mainCon a.logo1 {
        display: inline-block;
        float:left;
        margin: 0 auto;
        height: 50px;
        width:120px;
        background: url(../images/logo_03.png) 20px center no-repeat;
        background-size: auto 40px 
    }
    .mainCon a.logo2 {
        display: inline-block;
        width: 160px;
        float: right;
        margin: 0 auto;
        height: 50px;
        margin-right: 20px;
        background: url(../images/logo_06.png) right center no-repeat;
        background-size:  auto 40px
    }

    .section .content {
        width: 836px;
        text-align: center
    }
    .box {
        width:270px;
    }
    .box .item.fixed-height {
        height: 75px;
    }
    .box .ico {
        margin: 15px 0;
    }
    .box .ico-bonus {
        margin: 15px 10px;
        height: 36px;
    }

}