@font-face {
    font-family: 'BNPP Sans';
    src: url('../fonts/bnpp_sans_bold.woff2') format('woff2'), url('../fonts/bnpp_sans_bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'BNPP Sans';
    src: url('../fonts/bnpp_sans_light.woff2') format('woff2'), url('../fonts/bnpp_sans_light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'BNPP Sans';
    src: url('../fonts/bnpp_sans.woff2') format('woff2'), url('../fonts/bnpp_sans.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body{height: 100%; margin: 0; padding: 0;}
body{margin: 0; padding: 0; font-family: 'BNPP Sans'; font-weight: 400;  position: relative;}
*{box-sizing: border-box;}
a{color: #000000; text-decoration: none;}
strong{font-weight: 500}
p, li{}
h1{color: #00A16A; font-size: 200%; line-height: 200%; font-weight: 500; padding: 0 0 1vw; margin: 0; }
h2{color: #222222; margin: 0.5vw 0 0.5vw 0; padding: 0.5vw 0; font-weight: 600; letter-spacing: 0.1vw; font-size: 4vw; line-height: 4vw;}
h3{font-size: 18px; }

.cleaner{clear: both}
.text-center{text-align: center;}
.center{text-align: center}

#wrapper{position: relative; margin: 0 auto; padding: 0 2.5%; background: #ffffff;}
#center{width: 100%; margin: 0 auto; padding: 0}
header{width: 100%; padding: 15px 0 5px ; line-height: 80px; height: 100px;}
header img{width: 200px; max-width: 100%; float: left; margin: 20px 60px 0 0;}
header h1{margin: 0; padding: 0; line-height: 80px; font-weight: 400; font-size: 26px; float: left;}
header .button{font-size: 100%; line-height: 40px; border-radius: 8px; padding: 3px 45px; display: inline-block; float: right; text-align: center; margin: 20px 0 0 0; background: #00A16A; color: #ffffff; font-weight: 400;  }
section{width: 100%;}
.container{}

.login{width: 100%; padding: 3.5% 2% 3% 8.5%; display: flex;}
.login .left{width: 35%; padding: 0 2.5% 0 0;}
.login .right{width: 65%; background: url('../img/login.svg') no-repeat; background-size: contain}
.login .button{font-size: 15px; line-height: 26px; border-radius: 8px; padding: 10px 35px; width: 100%; display: block; text-align: center; margin: 30px 0 15px 0; background: #00A16A; color: #ffffff; font-weight: 500;  }
.login .placeholder{height: 125px; width: 100%; display: block;}

.menu{display: flex; flex-wrap: wrap; padding: 2.5%}
.menu a{display: block; width: 31.666%; margin: 0 2.5% 2.5% 0; border: 2px solid rgba(212,212,212,0.65); border-radius: 8px; background: #ffffff; padding: 20px 2.5% 35px;}
.menu a:nth-child(3n){margin-right: 0; }
.menu a .img{width: 22.5%; height: 0; padding-top: 22.5%; margin: 20px auto; background: url('../img/icon_formular.svg') no-repeat; background-size: contain; }
.menu a:hover{background: #00A16A;}
.menu a:hover .img{background: url('../img/icon_formular2.svg') no-repeat; background-size: contain; }
.menu a h2{font-size: 24px; line-height: 32px; letter-spacing: -0.5px; margin: 0; padding: 10px 0 5px; color: #00A16A; text-align: center; font-weight: 400;}
.menu a:hover h2{color: #ffffff}
.menu a p{font-size: 16px; line-height: 24px;  margin: 0; padding: 10px 0; color: #585858; text-align: center;  font-weight: 400;}
.menu a:hover p{color: #ffffff}
.menu a h3{color: #222222; text-align: center; margin: 10px 0 0 0}

label{color: #575757; font-size: 16px; line-height: 30px; margin: 0; padding: 15px 0; display: inline-block}
label.filled{font-size: 14px; color: #232323}
label.push-left{float: left; width: auto; display: inline-block; margin: 15px 0 0 0;}
input{font-size: 14px; color: #575757; line-height: 30px; padding: 5px 15px; border: 2px solid rgba(212,212,212,0.65); border-radius: 8px; background: #ffffff; box-shadow: none; width: 100%; display: block; margin: 8px 0; font-family: 'BNPP Sans'; font-weight: 400;}
input.inline{display: inline-block; margin: 8px; width: 300px;}
input.small{width: 65%; margin: 8px 2% 8px 0; float: left;}
input.success{border-color: #00A16A; }
input.error{border-color: #FD003B; }
input::placeholder{color: #9B9B9B;}
textarea{resize: vertical; font-size: 14px; color: #575757; line-height: 22px; height: 150px; padding: 5px 15px; border: 2px solid rgba(212,212,212,0.65); border-radius: 8px; background: #ffffff; box-shadow: none; width: 100%; display: block; margin: 8px 0 25px 0; font-family: 'BNPP Sans'; font-weight: 400;}
p.error{font-weight: 400; font-size: 12px; line-height: 16px; margin: 0; padding: 0; color: #FD003B; position: relative; top: -8px;}
input[type='checkbox']{display: initial; width: initial; float: left; margin: 12px 12px 0 0;}
p.agreement{font-size: 13px; line-height: 22px; color: #4B4B4B; font-weight: 300; overflow: hidden; margin: 39px 0 0 0; padding: 0;}
p.agreement a{text-decoration: underline; color: #00A16A;}
.select{position: relative; z-index: 100; cursor: pointer;  padding: 5px 15px; border: 2px solid rgba(212,212,212,0.65); border-radius: 8px; background: #ffffff;  width: 100%; display: block;  margin: 8px 0;}
.select.highlighted{z-index: 200;}
.select img{height: 10px; position: absolute; z-index: 110; top: 17px; right: 15px; width: auto}
.form .select p{font-size: 14px; color: #9B9B9B; line-height: 30px; padding: 0; margin: 0; font-weight: 400; letter-spacing: 0}
.select .picker{display: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;  position: absolute; z-index: 110; margin: 0; padding: 0; top: 36px; left: -2px; right: -2px; background: #ffffff; list-style: none;  border-right: 2px solid rgba(212,212,212,0.65); border-left: 2px solid rgba(212,212,212,0.65); border-bottom: 2px solid rgba(212,212,212,0.65);}
.select .picker li{display: block; width: 100%; font-size: 16px; color: #575757; line-height: 30px; padding: 5px 15px; margin: 0; font-weight: 300}
.select .picker li:hover{color: #ffffff; background: #00A16A;}

.switch{cursor: pointer; float: right; width: 80px; height: 30px; border-radius: 15px; position: relative; background: #D8D8D8; margin: 11px 0 0 0}
.switch .circle{background: #ffffff; height: 24px;  width: 24px; border-radius: 100%; position: absolute; z-index: 110; top: 3px; left: 3px;}
.switch p{ margin: 0; color: #ffffff; font-size: 14px; line-height: 30px; font-weight: 400;}
.switch .no{display: initial; float: right; padding: 0 20px 0 0;}
.switch .yes{display: none; float: left; padding: 0 0 0 15px;}
.switch.active{background: #00A16A;}
.switch.active .circle{left: initial; right: 3px;}
.switch.active .no{display: none;}
.switch.active .yes{display: initial;}
.half{float: left; width: 50%; padding: 0 0 0 2.5%;}
.half.first{float: left; width: 50%; padding: 0 2.5% 0 0;}
.input-cover{position: relative}
.input-cover img{height: 18px; position: absolute; z-index: 110; top: 13px; right: 15px; width: auto; display: none;}

.header{width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; display: flex;}
.header .right{width: 50%; background: url('../img/photo.jpg') no-repeat center center; background-size: cover; border-top-right-radius: 10px; }
.header .right.bg2{background: url('../img/photo2.jpg') no-repeat center center; background-size: cover; }
.header .left{width: 50%; padding: 30px 20px 30px 50px; background: #00A16A; border-top-left-radius: 10px;}
.header .left h1{color: #ffffff; font-size: 36px; line-height: 46px; margin: 0; padding: 0 0 0 0;  font-weight: 500;}
.header .left h2{color: #ffffff; font-size: 24px; line-height: 34px; margin: 0; padding: 0 0 15px 0; font-weight: 400;}
.header .left p{color: #ffffff; font-size: 12px; line-height: 20px; margin: 0; padding: 0; font-weight: 300; float: left;}
.header .left p.first{width: 40%; padding: 0 5px 0 0;}
.header .left p.second{width: 30%; padding: 0 5px 0 0;}
.header .left img{float: right; width: 30%;}

.form{padding: 50px;}

.form .cols{display: flex;flex-wrap: nowrap; padding: 40px 0 15px 0;}
.form h2{color: #00A16A; font-size: 22px; line-height: 32px; font-weight: 500; padding: 0 15% 10px 0; margin: 0; letter-spacing: 0.5px;}
.form h3{color: #575757; font-size: 19px; line-height: 26px; font-weight: 500; padding: 15px 0 15px 0; margin: 0; letter-spacing: 0.25px;}
.form .h2-line{display: block; width: 6%; height: 3px ; background: #00A16A; padding: 0; margin: 5px 0 20px 0;}
.form .big-line{display: block; width: 100%; height: 3px ; background: #00A16A; padding: 0; margin: 50px 0 30px;}
.form .thin-line{display: block; width: 100%; height: 1px ; background: #D4D4D4; padding: 0; margin: 5px 0 5px;}
.form .row{display: flex; border-bottom: 1px solid #D4D4D4;}
.form .row.without-border{border-bottom: none}
.form .col{width: 50%;}
.form .col.left{padding: 0 7.5% 0 0; border-right:  1px solid #D4D4D4;}
.form .col.right{padding: 0 0 0 7.5%;}
.form .col .button{float: right; display: block; width: 33%; color: #ffffff; font-weight: 400; background: #00A16A; text-align: center; line-height: 44px; margin: 8px auto; padding: 0 0; border-radius: 5px;}
.star{color: #00A16A; font-weight: 600; font-size: 26px; position: relative; top: -4px;}
.form p{font-size: 14px; color: #9B9B9B; line-height: 40px; padding: 2px 0; margin: 8px 0; font-weight: 400; }
.form p.text{line-height: 24px; margin: 15px 0; padding: 5px 0 10px; font-weight: 300;}
.form p.check{line-height: 24px; margin: 15px 0; padding: 5px 0 10px; font-weight: 500; overflow: hidden; color: #585858; letter-spacing: 0; font-size: 16px;}
.form p.check-disclaimer {font-size: 14px;
    line-height: 22px;
    padding: 0 0 0 26px;
}
.form p.check-disclaimer strong {
    display: block;
    margin-top: 15px;
}
.form p.text a{color: #00A16A}
.form p.inline{display: inline-block;}
.form p.thin{font-weight: 300; color: #585858;}
.form p.center{text-align: center; line-height: 28px;}

.form .signature{width: 50%; border-top: 1px solid #D4D4D4; text-align: center; margin: 150px 0 0 0;}

.form .upload{/*float: left;width: 31.5%;*/width: 100%; margin: 0 2.75% 2.75% 0;}
.form .upload:nth-child(3n){margin-right: 0;}
.form .upload .drag{text-align: center; justify-content: center; height: 120px; color: #9B9B9B; font-size: 14px; font-weight: 400; display: flex; width: 100%; border-radius: 8px; background: #ffffff; align-items: center; justify-items: center;}
.form .upload a{font-size: 16px; line-height: 20px; color: #00A16A; text-decoration: underline; font-weight: 500;  padding: 10px 0; display: inline-block}
.form .upload p{font-size: 16px; line-height: 20px; color: #585858; font-weight: 400; padding: 10px 0 0;}

.form .button{white-space: nowrap; font-size: 15px; line-height: 30px;  border-radius: 8px; padding: 12px 70px;  display: inline-block; text-align: center; margin: 10px 0 15px; background: #00A16A; color: #ffffff; font-weight: 500; }

.form.thanks{text-align: center; padding: 80px 0; }
.form.thanks img{width: 125px; height: 125px; margin: 0px auto 50px;}
.form.thanks h2{padding: 0px; font-size: 40px; line-height: 60px; font-weight: 400;}

.links{padding: 30px 0 35px 0; text-align: center}
.links .button{white-space: nowrap; font-size: 15px; line-height: 30px;  border-radius: 8px; padding: 12px 70px;  display: inline-block; text-align: center; margin: 0; background: #00A16A; color: #ffffff; font-weight: 500; }
.links .button.gray{background: #D8D8D8;}
.links .button.left{float: left}
.links .button.right{float: right}


@media (max-width: 1280px){}

@media (max-width: 1279px){
    .login{display: block; padding: 2.5% 5%;}
    .login .left{width: 100%; padding: 0;}
    .login .right{width: 100%; padding: 0;}

    p.agreement{font-size: 14px; line-height: 28px; margin: 37px 0 0 0; }

    header h1{display: none}

    .menu a{width: 49%; margin: 0 2% 2% 0;}
    .menu a:nth-child(3n){margin-right: 2%; }
    .menu a:nth-child(2n){margin-right: 0; }
    .menu a h2{font-size: 16px; line-height: 26px;}
    .menu a p{font-size: 14px; line-height: 22px;}

    .header .left{width: 100%; border-top-right-radius: 10px; padding: 15px 20px 20px 20px;}
    .header .right{display: none;}
    .header .left h1{font-size: 26px; line-height: 36px;}
    .header .left h2{font-size: 18px; line-height: 28px;}

    .form{padding: 0 4% 25px;}

}

@media (max-width: 1024px){ /* iPads landscape */}

@media (max-width: 1023px){
    .form.thanks{padding: 60px 0; background: url('../img/dekujeme.svg') no-repeat top 75px right -75px; background-size: contain}
}

@media (max-width: 768px){ /* iPads portrait */}

@media (max-width: 767px){
    .menu a{width: 100%; margin: 2% 0; padding: 8px 5% 10px;}

    .form .cols{display: block; padding: 15px 0 0;}
    .form .cols .col.left{width: 100%; padding: 10px 4%; border-right: 0;}
    .form .cols .col.right{width: 100%; padding: 10px 4%}
    .form .h2-line{margin: 0px 0 30px 0;}
    .form h2{padding: 10px 5% 10px 0}

    .form .graph{padding: 25px 0;}
    .form .graph .cell p{font-size: 10px;}
    .form p{line-height: 28px;}

    .form .upload{width: 100%; margin: 0 0 20px 0;}

    label{padding: 7px 0 2px;}
    input.small{width: 49%;}
    .form .col .button{width: 49%;}

    .form .signature{width: 100%}


    .form .row{flex-wrap: wrap;}
    .form .row .col{width: 100%}

    .links{padding: 0 0 35px;}
    .links .button{padding: 15px 25px; display: block; width: 100%; text-align: center; margin: 7px 0;}

    .form.thanks{padding: 60px 0; background: url('../img/dekujeme.svg') no-repeat top 75px right -100px; background-size: contain}
}

@media (max-width: 480px){ /* iPhones landscape */}

@media (max-width: 479px){

}

@media (max-width: 320px){ /* iPhones portrait */}