@CHARSET "UTF-8";


@font-face {
    font-family: 'Tele-GroteskNor';
    src: url('../fonts/t036013t_v21-2-webfont.woff2') format('woff2'),
         url('../fonts/t036013t_v21-2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tele-groteskultregular';
    src: url('../fonts/tele-grotesk-ultr-webfont.eot');
    src: url('../fonts/tele-grotesk-ultr-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tele-grotesk-ultr-webfont.woff2') format('woff2'), url('../fonts/tele-grotesk-ultr-webfont.woff') format('woff'), url('../fonts/tele-grotesk-ultr-webfont.ttf') format('truetype'), url('../fonts/tele-grotesk-ultr-webfont.svg#tele-groteskultregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 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, .sanap-baner 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
}


body {
    margin: 0;
    display: block;
	background-color:#4B4B4B;
    font-family:Tele-GroteskNor;
    font-size:18px;
    color:#333;
}

.wrapper {
    width: 300px;
    height: 600px;
    background: url(../images/oferta_rodzinna_300x600_bg.jpg) no-repeat
}
.wrapper .header{
    height: 207px;
    margin-bottom: 149px;
    overflow: hidden;
    position: relative;
}
.wrapper .header ._1{
    font-family: tele-groteskultregular;
    font-size: 36px;
    color:white;
    line-height: 1em;
    padding-top: 35px;
}
.wrapper .header ._2{
    font-family: tele-groteskultregular;
    font-size: 33px;
    color:white;
}
.wrapper .header ._3{
    font-family: tele-groteskultregular;
    font-size: 25.5px;
}
.wrapper .header ._4{
    font-family: tele-groteskultregular;
    font-size: 24px;
    color:white;
    line-height: 1em;
    padding-top: 49px;
}
.wrapper .header ._5{
    font-family: tele-groteskultregular;
    font-size: 25px;
    color:white;
}
.wrapper .header ._6{
    font-family: tele-groteskultregular;
    font-size: 24.5px;
}
.wrapper .header .first-content.on-top,
.wrapper .header .second-content.on-top{
    opacity:0;
    top:-100px;
}
.wrapper .header .first-content.on-bottom,
.wrapper .header .second-content.on-bottom{
    opacity:0;
    top:100px;
}
.wrapper .header .first-content,
.wrapper .header .second-content{
  -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;
  position: absolute;
  width: 100%;
  left:0;
  opacity: 1;
  top:0;
}

.sanap-baner .form-holder{
    padding: 5px 15px 15px 15px;
}
.sanap-baner .form-holder .f-1{
    color:#e20074;
}
.sanap-baner .form-holder .f-2{
    font-size: 24px
}






/* -------------   .sanap-baner form -----------------------------------------------------------------------------------------------------*/


.btn {
    background: #e20074;
    border: 1px solid #E20074;
    color: white;
    font-family: Tele-GroteskUltra, Arial, Tahoma, Helvetica;
    font-size: 2.0em;
    height: auto;
    letter-spacing: -0.5px;
    line-height: auto;
    padding: 0.5em 1.6em 0.5em 0.9em;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    display:inline-block;
    margin: 0 auto;
    position: relative;
}
.btn .arrow {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    content: "";
    display: inline-block;
    height: 2px;
    position: absolute;
    width: 0;
    top:50%;
    right:20px;
    margin-top: -10px
}
.btn:hover .arrow {color:#333;border-color: transparent transparent transparent #333; }

.sanap-baner form {  padding: 0; position: relative; z-index: 1000; text-align: center }
.sanap-baner form fieldset { margin: 0px 0 20px; }
.sanap-baner form fieldset legend { font-weight: bold; padding: 0 0 5px 5px; }
.sanap-baner form fieldset.two-columns { margin-bottom: 30px; }
.sanap-baner form fieldset.two-columns .item { float: left; }
.sanap-baner form fieldset.two-columns .item.second { padding-left: 86px; }
.sanap-baner form fieldset.agreement { margin-bottom: 0; padding: 3px 0 0 6px; position: relative; width: 415px; }
.sanap-baner form fieldset.agreement label { cursor: pointer; }
.sanap-baner form .item { padding: 8px 0; position: relative; vertical-align: middle  }
.sanap-baner form .item.dateBirth, .sanap-baner form .item.dateOrder { width: 452px; }
.sanap-baner form .item.dateBirth img, .sanap-baner form .item.dateOrder img { margin: 0 0 0 8px; vertical-align: -10px; width: auto; display: inline; }
.sanap-baner form .item span.small { float: right; font-size: 10px; margin: 4px 2px 3px; color: #fff; }
.sanap-baner form .item.radio > label { margin-bottom: 30px; }
.sanap-baner form .item.radio div label { cursor: pointer; margin-bottom: 2px; width: 230px; }
.sanap-baner form label { display: inline-block;  line-height: 24px; padding-left: 5px;  }
.sanap-baner form label.two-lines { line-height: 14px; }
.sanap-baner form label.agreement { font-size: 10px; line-height: 12px; width: 390px; }
.sanap-baner form input[type="text"] { width:200px; border-radius: 25px; height:35px; background-color: white; border:2px solid #ccc; padding:0 8px;font-size:18px;text-align: center; font-family: Tele-GroteskNor}
.sanap-baner form input[type="text"].error {  border:1px solid red;}
.sanap-baner form button[type="submit"] {  
    cursor: pointer; 
    padding:4px 55px 4px 45px;
    border-radius: 25px;
    width:auto; 
    margin:0 auto; 
    position: relative; 
    font-size: 22px;
    margin-top: 10px
  }

    .sanap-baner form button[type="submit"]:hover {
    color:#333;
}
.sanap-baner form .btn_send { background: url("../images/btn_send.png") no-repeat scroll 0 0; border: none; float: left; height: 32px; margin: 25px 0 85px 182px; width: 79px; text-indent: -1000em; overflow: hidden; cursor: pointer;}
.sanap-baner form label.error { cursor: default !important; display: block; font-family: Tele-GroteskNor; font-size: 14px;  position: absolute; left:0px; top: -7px;  z-index: 1000;color:Red; text-align: center; width: 100%}
.sanap-baner form input[type="checkbox"].error + label.error { left: 15px; top:-5px;}
.sanap-baner form .topErrorMessage label.error { background: url("../images/bg_error_bottom.png") no-repeat scroll 0 0; display: none; font-family: Tele-GroteskNor; font-size: 14px; height: 36px; line-height: 24px; padding: 0; position: absolute; right: 32px; text-align: center; top: -28px; width: 192px; }
.sanap-baner form fieldset.agreement label.error { left: 5px; right: auto; top: -32px; }
.sanap-baner form .for-private-clients > p { font-family: Tele-GroteskNor; }
.sanap-baner form ~ .btn { position: absolute; }
.ui-datepicker-trigger { cursor: pointer; }

.col-container {
    clear:both;
}
.sanap-baner form .item .item.choose-starter {
    display: inline-block;
    width:33%;
}
.sanap-baner form .item.legal {
    display: inline-block;
    
}
.sanap-baner form .item.legal > * {
    display: inline-block;
}
.sanap-baner form .item.legal input {
    margin-left:-20px;
}
.sanap-baner form .col-container .col .item.legal label:not(.fake-chx) {
    width: 360px;
    font-size: 0.6em;
    line-height: 1.2em
}
.col-container .col {
    width:45%;
    display: inline-block;
}
.col-container .col .item  {
    clear: both
}
.col-container .col .item label {
    line-height: 40px
}
.col-container .col .item input[type='text'] {
    float:right;
}
.col-container .col .item input[type='text'] {
    float:right;
}

.sanap-baner form input[type="checkbox"] {
    visibility: hidden
}
.sanap-baner form input[type="checkbox"] ~ .fake-chx{
    display: inline-block;
    width:20px ;
    height: 20px;
    background: white;
    border:1px solid #ccc;
    position: relative;
    top:6px;
    padding:0 !important;
    vertical-align: top;

}
.sanap-baner form input[type="checkbox"]:checked ~ .fake-chx{
    background: url("../images/chx2.png") no-repeat scroll 0 0;
}
.sanap-baner form input[type="checkbox"].error ~ .fake-chx{
    border:1px solid red;
}
.sanap-baner form .legal-cont {
    font-size: 0.7em;
    line-height: 1.5em;
    max-width: 500px;
    text-align: left;
}
.sanap-baner form .item-inline {
    display: inline-block;
    position: relative;
}
.sanap-baner form .legal {
    text-align: justify;
    font-size: 10px;
    line-height: 10px
}

#thx, #err {
  text-align: center; 
  display: none
}


@keyframes pulse_animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);}
  100% { transform: scale(1); }
}

.pulse {
  animation-name: pulse_animation;
  animation-duration: 2000ms;
  transform-origin:70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}