html{
  background:#ffffff;
}
body{
  overflow:auto;
}
html, body{
  height:100%;
  margin:0;
}

body, input, textarea, select{
  font-family: 'Lato', sans-serif;
  font-size:1em;
  color:#ffffff;
}

#mob{display:none}
                
#page{
  width:100%;
  min-width:480px;
  min-height:100%;
  position:relative;
  background:url(images/bg.jpg) no-repeat;
  bbackground-attachment:fixed;
  background-size:100% auto;
}
#ppage{
  width:1200px;
  background-image:url(images/kopa_win.jpg);
}
#page.winners{
  background-image:url(images/bg_win.jpg);
}
#wrapper{
  padding-bottom:3em;
}

#logo{
  display:none;
}

#side{
  width:50%;
  left:0;
  top:0;
  position:absolute;
}
#side h1.slogan{
  text-indent:-999em;
  margin:0;
  position:absolute;
}
#side a.back{
  width:6em;
  height:6em;
  text-indent:-999em;
  position:absolute;
  border-radius:50%;
  margin:40% 0 0 7%;
  background:#00a719 url(images/back.png) no-repeat center center;
  background-image:url(images/back.svg), none;
  background-size:cover;
-webkit-box-shadow: .2em .2em .2em 0 rgba(0,0,0,0.75);
-moz-box-shadow: .2em .2em .2em 0 rgba(0,0,0,0.75);
box-shadow: .2em .2em .2em 0 rgba(0,0,0,0.75);
}

#content{
  width:32%;
  padding:8% 9% 0 9%;
  position:relative;
  top:0;
  left:50%;
  margin:0;
}

#menu{
  width:32%;
  position:absolute;
  right:0;
  top:0;
  margin:4% 9% 0 0;
  z-index:100;
}
#menu ul{
  list-style:none;
  padding:0;
  margin:0;
  white-space:nowrap;
  text-align:center;
  display:block;
}
#menu li{
  display:inline-block;
  padding:0 0 0 25%;
}
#menu li:first-child{
  padding-left:0;
}
#menu li a{
  font-size:1.31em;
  line-height:1.5em;
  font-weight:normal;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#000000;
  text-decoration:none;
  display:block;
  padding:0;
}
#menu li a:hover,
#menu li a.active{
  color:#009f14;
}


#content .block{
  padding:0 10%;
  wwidth:460px;
  position:relative;
  ddisplay:none;
}

#content .register{
  padding:1% 0 0 0;
}
#content .register.done{
  padding-top:10%;
}
#content .register.done form{
  display:none;
}
#content .register ul{
	list-style:none;
  padding:0 0 4% 3%;
  margin:0 auto;
  width:100%;
}
#content .register ul li{
  width:100%;
  display:block;
  margin:0 0 3% 0;
  position:relative;
}
#content .register ul li.choose{
  height:2em;
  margin-top:-.3em;
}
#content .register ul li.choose > span{
  font-size:1em;
  line-height:2em;
  font-weight:400;
  color:#009f14;
  display:block;
  width:10em;
  padding-left:.5em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#content .register ul li.check{
  white-space:nowrap;
  margin:0;
}
#content .register ul li.err::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  margin:-.5em 0 0 .5em;
  width:2.75em;
  height:2.75em;
  border-radius:50%;
  background:#000000 url(images/err.png) no-repeat center center;
  background-image:url(images/err.svg), none;
}
#content .register ul li.check.err::after{
  display:none;
}

#content .register .thanks{
  width:18.5em;
  height:18.5em;
  background:#ffffff url(images/thanks.png) no-repeat center center;
  background-size:contain;
  margin:3em auto 0 auto;
  position:relative;
  display:none;
}
#content .register .thanks a.close{
  position:absolute;
  right:0;
  top:0;
  margin:.5em .5em 0 0;
  width:2.5em;
  height:2.5em;
  border-radius:50%;
  background:#000000 url(images/close.png) no-repeat center center;
  background-image:url(images/close.svg), none;
  background-size:contain;
  box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.55);
}
#content .register .thanks h2{
  position:absolute;
  text-indent:-999em;
  margin:0;
}
#content .register.done .thanks{
  display:block;
}

.textfield{
  width:22.5em;
  height:2.5em;
  background:#000000;
  padding:0;
  border:2px solid #000000;
  margin:0;
  position:relative;
}
.focus .textfield{
  background:#ef9b75;
  border-color:#ef9b75;
}
.err .textfield{
  background:#ffffff;
  border-color:#009f14;
}
.textfield span,
.textfield input{
  font-size:1em;
  line-height:2.5em;
  font-weight:400;
  color:#ffffff;
  text-align:center;
  text-transform:uppercase;
  width:100%;
  height:100%;
  height:2.5em;
  background:url(images/spacer.gif);
  ddisplay:block;
  box-sizing:border-box;
  border:0;
  padding:0 10%;
  margin:0;
  position:relative;
}
.textfield.cheque span,
.textfield.cheque input{
  wwidth:68%;
  text-align:right;
}
.textfield.cheque > div:first-child{
  width:68%;
  position:relative;
}
.textfield.cheque > div{
  display:inline-block;
  vertical-align:top;
}
.textfield input:-webkit-autofill,
.textfield input:-webkit-autofill:hover,
.textfield input:-webkit-autofill:focus,
.textfield input:-webkit-autofill:active {
  -webkit-text-fill-color:#ffffff;
  transition: background-color 5000s ease-in-out 0s;
}
.textfield span{
  position:absolute;
  display:block;
}
.focus .textfield span{
  color:#ffffff;
  opacity:.5;
}
.focus .textfield input{
  color:#ffffff;
}
.focus .textfield input,
.focus .textfield input:-webkit-autofill,
.focus .textfield input:-webkit-autofill:hover,
.focus .textfield input:-webkit-autofill:focus,
.focus .textfield input:-webkit-autofill:active {
  -webkit-text-fill-color:#ffffff;
  color:#ffffff;
}
.err .textfield span,
.err .textfield input{
  color:#009f14;
}

a.check{
  display:inline-block;
  padding:0;
  vertical-align:top;
}
a.check img{
  width:auto;
  height:1.5em;
  background:#ffffff url(images/spacer.gif) no-repeat center center;
  background-size:contain;
  border:2px solid #009f14;
}
.err a.check img{
  background-image:url(images/check_err.png);
  background-image:url(images/check_err.svg), none;
}
a.check.on img{
  background-image:url(images/check.png);
  background-image:url(images/check.svg), none;
}
span.check{
  font-size:0.6em;
  line-height:120%;
  font-weight:400;
  color:#7c7c7c;
  display:inline-block;
  margin:0 20% 0 2%;
  vertical-align:middle;
  white-space:normal;
}
span.check.short{
  padding-top:.5em;
}
span.check a{
  color:#7c7c7c;
  text-decoration:none;
}
span.check a:hover{
  text-decoration:underline;
}

div.choose{
  position:absolute;
  right:0;
  background:#ffffff;
  padding:0;
  border:2px solid #009f14;
  margin:0 1.5em 0 0;
  width:11.5em;
  height:1.5em;
  overflow:hidden;
  cursor:pointer;
}
div.choose img{
  width:1.5em;
  height:1.5em;
  background:#009f14 url(images/choose.png) no-repeat;
  background-image:url(images/choose.svg), none;
  background-size:contain;
  position:absolute;
}
div.choose a{
  font-size:.6em;
  line-height:2.5em;
  color:#009f14;
  font-weight:700;
  text-transform:uppercase;
  text-align:right;
  width:97%;
  height:100%;
  display:inline-block;
  text-decoration:none;
  border:0;
  margin:0;
  padding-right:2%;
}
div.choose input[type="file"]{
  font-size:1em;
  width:300%;
  height:2em;
  display:block;
  cursor:pointer;
  position:absolute;
  text-align:right;
  -moz-opacity:0;
  opacity:0;
  filter:alpha(opacity:0);
  margin:0 0 0 -200%;
}

.submit{
  font-size:1em;
  line-height:1.5em;
  font-weight:normal;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#ffffff;
  width:12.5em;
  height:3.75em;
  display:block;
  margin:4.5% 0 0 21%;
  padding:2px;
  background:url(images/submit.png) no-repeat center center;
  background-image:url(images/submit.svg), none;
  background-size:cover;
  border:0;
  cursor:pointer;
-webkit-appearance: none;
}
.submit:hover,
.submit:active{
  color:#009f14;
  background:#ffffff;
  padding:0;
  border:2px solid #009f14;
}

div.alert{
  height:3em;
  line-height:3em;
  text-align:center;
  margin-right:5%;
}
div.alert div{
  font-size:.63em;
  line-height:110%;
  font-weight:400;
  color:#e52e2e;
  text-transform:uppercase;
  display:none;
  vertical-align:top;
}
div.alert.on div{
  display:inline-block;
}

#content .winners {
  margin:0 auto;
  padding-top:30%;
}
#content .winners.active {
  padding:0;
}
.winners > h2 {
  font-size: 2em;
  line-height: 9em;
  font-weight: 900;
  text-transform:uppercase;
  color: #000000;
  width:8.34375em;
  height:8.53125em;
  background:#ffffff url(images/winners.png) no-repeat center center;
  background-image:url(images/winners.svg), none;
  background-size:contain;
  margin: 0 auto;
  text-align: center;
}
.winners.active > h2 {
  display:none;
}
.winners .list{
  padding:2% 0 10% 0;
  overflow:hidden;
  position:relative;
  display:none;
}
.winners.active .list{
  display:block;
}
.winners .list .item{
  margin:0 0 2.1em 0;
}
.winners .list .item h4{
  width:13.125em;
  height:2em;
  text-indent:-999em;
  background:#ffffff url(images/spacer.gif) no-repeat center center;
  background-size:contain;
  margin:0 auto 2% auto;
}
.winners .list .item[rel="merida"] h4{
  background-image:url(images/prizes/merida.png);
  background-image:url(images/prizes/merida.svg), none;
}
.winners .list .item[rel="garmin"] h4{
  background-image:url(images/prizes/garmin.png);
  background-image:url(images/prizes/garmin.svg), none;
}
.winners .list .item[rel="vaude-campo"] h4{
  background-image:url(images/prizes/vaude_campo.png);
  background-image:url(images/prizes/vaude_campo.svg), none;
}
.winners .list .item[rel="madara"] h4{
  background-image:url(images/prizes/madara.png);
  background-image:url(images/prizes/madara.svg), none;
}
.winners .list .item[rel="sun-30"] h4{
  background-image:url(images/prizes/sun_30.png);
  background-image:url(images/prizes/sun_30.svg), none;
}
.winners .list .item[rel="infinity-drops"] h4{
  background-image:url(images/prizes/infinity_drops.png);
  background-image:url(images/prizes/infinity_drops.svg), none;
}
.winners .list .item[rel="tm-hydra-firm"] h4{
  background-image:url(images/prizes/tm_hydra_firm.png);
  background-image:url(images/prizes/tm_hydra_firm.svg), none;
}
.winners .list .item[rel="smart-antioxidants"] h4{
  background-image:url(images/prizes/smart_antioxidants.png);
  background-image:url(images/prizes/smart_antioxidants.svg), none;
}
.winners .list .item ul{
  list-style:none;
  padding:0;
  margin:0;
}
.winners .list .item ul li{
  font-size:.75em;
  line-height:150%;
  font-weight:300;
  color:#009f14;
  text-align:center;
}
.winners .list .item ul li b{
  font-size:1.1em;
  font-weight:500;
  text-transform:uppercase;
}




#bottom{
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  margin:0;
  background:#f3f2f2;
  padding:.5em 0;
}
#bottom span{
  font-size:.63em;
  line-height:120%;
  color:#515151;
  display:block;
  text-align:center;
}
#bottom a{
  color:#515151;
  text-decoration:underline;
}
#bottom a:hover{
  text-decoration:none;
}

form{
  margin:0;
}
.left{
  float:left;
}
.right{
  float:right;
}
.clear{
  clear:both;
  height:1px;
  overflow:hidden;
  display:block;
}

sup, sub{
	height: 0;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
}
sup{
	bottom: 1.5ex;
  font-size:55%;
}
sub{
	top: .5ex;
  font-size:65%;
}

input:focus, textarea:focus, select:focus{
  outline: none;
  outline-width:0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
  -webkit-user-modify: read-write-plaintext-only;
}
textarea{
  resize: none;
}
@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}
input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}