@font-face {
    font-family: "visuelt";
    src: url("../fonts/VisueltPro-Regular.ttf");
}

 @font-face {
    font-family: "visuelt-bold";
    src: url("../fonts/VisueltPro-Bold.ttf");
}
@font-face {
font-family: "visuelt-light";
src: url("../fonts/VisueltPro-Light.ttf");
}
 @font-face {
    font-family: "visuelt-black";
    src: url("../fonts/VisueltPro-Black.ttf");
}
html {margin: 0; padding: 0; background: white; font-family: visuelt-light, lato, tahoma, helvetica; font-style: normal; font-weight: 300; color: #23377a; font-size: 12px; line-height: 20px; background: url('../design/bgr_body.jpg') #6bcff6 center top; background-repeat: no-repeat; background-size: 100%;}
body {margin: 0; padding: 0;}
form {
    width: 100%; 
    margin: 65% 0 0 0; 
    /*padding:2em 2em 2em 2em;
    border-radius: 15px;
    background: #302138;
    background: -webkit-linear-gradient(left top, #881d11, #d93a20);
    background: -o-linear-gradient(top right, #881d11, #d93a20);
    background: -moz-linear-gradient(top right, #881d11, #d93a20);
    background: linear-gradient(to top right, #881d11, #d93a20);*/
    }
input {padding: 3%; width: 42%; border: 0px; font-family: lato, tahoma, helvetica; font-weight: 300;  font-size: 19px; line-height: 23px; border-radius: 1px; float: right; text-align: left;}
input:focus {
border: 0px solid #000 !important;
box-shadow: 0 0 15px #050D3E !important;
-moz-box-shadow: 0 0 15px #050D3E !important;
-webkit-box-shadow: 0 0 15px #050D3E !important;
outline-offset: 0px !important;
outline: none !important;
}
select option { z-index: 1000; }
.ui-selectmenu-button.ui-button {
    padding: 6% 3%; width: 94%; border: 0px; font-size: 16px; font-family: lato, tahoma, helvetica; font-weight: 300; line-height: 20px;
}
.ui-button, .ui-button:hover, .ui-button:active, .ui-button:link, .ui-button:visited {
    background-image: none;
    background-color: #fff;
}

h2 {font-family: visuelt-light, lato, tahoma, helvetica; font-weight: 300; text-align: left; font-size: 25px; padding-left: 21%; line-height: 1rem;}
h2 b {font-family: visuelt, lato, tahoma, helvetica; font-weight: 600; font-size: 1.8rem; color: #23377a;}
.pozycja4 {width: 100%; margin:0 auto; float: left; display: inline;}
.pozycja5 a {position: absolute;}
.pozycja5 {width: 33%; margin: 2% 0 0 0; float: right; display: inline-block; height: 20px;}
.pozycja6 {width: 45%; margin: 2% 0 0 0; float: right; display: inline-block; text-align: right;}
.pozycja6 div {display: inline;}
.pozycja7 { margin:3% 0 0 21%; font-size: 1.5rem; width: 150%; }
.pozycja7 div {display: inline;}
.send {
    width: 30%;
    margin-left: 1%;
    text-align: center;
    font-family: visuelt-black, lato, tahoma, helvetica; font-weight: 400; color: #fff; font-size: 32px; border: 0; border-radius: 0; line-height: 23px;
    cursor: pointer; 
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: #23377a;
    /*background: rgb(19,102,255);
    background: linear-gradient(25deg, rgba(19,102,255,1) 0%, rgba(117,32,251,1) 60%, rgba(150,16,248,1) 100%);*/
}


A:link {color: #23377a; text-decoration: none; line-height: 20px;}
A:visited {color: #23377a; text-decoration: none; line-height: 20px;}
A:hover {color: #23377a; border-bottom: 1px dotted #23377a; line-height: 20px;}
A:active {color: #23377a; text-decoration: none; line-height: 20px;}

#animacja {
    position: absolute;
    left: 44%;
    top: 10%;
}

#animacja img {
    max-width: 100%;
    display: block;
}

#mainSlogan {
    position: absolute;
    right: 0;
    top: 0;
    /*background-color: red;*/
    font-size: 4.2em;
    font-weight: bold;
    font-style: italic;
}

#logo {position: absolute; z-index: 0; width: 15.6%; top: 5%; right: 3%;}
#main {position: absolute; width: 33.5%; top: 3%; left: 10%; display: none;}
#main_mobile {display: none; max-width: 100%; margin: auto;}
#main_mobile_horizontal {display: none; width: 100%;}
#apla {position: absolute; left: -3.8%; width: 38%; top: 18rem;}
#slogan {width: 100%; margin-bottom: 20px;}
#slogan_mobile {display: none; max-width: 100%; margin: auto;}

#info {float: right; max-width: 100%;}

/* building height */
.selectmenuHeight {
  height: 160px;
}


/*** checkbox ***/
input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    cursor: pointer;
    position: absolute;
    margin-left: -3%;
}

input[type="checkbox"] + label div {
    display:inline;
}

input[type="checkbox"] + label div:hover {
    border-bottom: 1px dotted #273583;
}

input[type="checkbox"] + label div:hover {
    border-bottom: 1px dotted #273583;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-4px 4px 0 0;
    vertical-align:middle;
    background:url('../design/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url('../design/check_radio_sheet.png') -19px top no-repeat;
}

h2 b br {
    display: none;
}

/*1792*/ 
@media (max-width: 1792px) {

html { background: url('../design/bgr_body_1792.jpg') #6bcff6  center top; background-repeat: no-repeat; background-size: 100%;}
#apla {top: 11rem;}
h2 b { font-size: 1.7rem; }
.pozycja7 { font-size: 1.2rem; }

}

/*1690*/ 
@media (max-width: 1690px) {

html { background: url('../design/bgr_body.jpg') #6bcff6 center top; background-repeat: no-repeat; background-size: 100%;}
#apla {top: 16rem;}
.pozycja7 { font-size: 1.5rem; }
}

/*1600*/ 
@media (max-width: 1600px) {
#apla {top: 15rem;}
.pozycja7 { font-size: 1.4rem; }
}



/*1536*/ 
@media (max-width: 1536px) {
#apla {top: 14rem;}
h2 b { font-size: 1.4rem;}
.pozycja7 { font-size: 1.2rem; }

}

/*1440*/ 
@media (max-width: 1440px) {
#apla {top: 13rem;}
.send { font-size: 25px; }


}

/*1366*/ 
@media (max-width: 1366px) {

    #apla {top: 13rem;}
   h2 b { font-size: 1.5rem;}
   .pozycja7 { font-size: 1.2rem; }
}

/*1280*/ 
@media (max-width: 1280px) { 

#apla {top: 12rem;}
h2 b { font-size: 1.3rem;}

}


@media (max-width: 1024px) and (orientation: landscape) {

    html { background: #d3eeff;}
    form {width: 80%; min-width: 300px; margin: auto; margin-top: 1em; padding-top: 1.5%; background: none; min-height: 300px;}
    input { width: 51%; }
    input::placeholder { font-size: 15px; }
    .pozycja5 {width: 48%; float: none;}
    .pozycja6 {width: 48%;}
    .send { width: 42%; /*background-color: #f3b932; color: #192c75;*/}
    #main {display: none;}
    #logo {display: none;}
    #apla {background: none; position: static; height: auto; width: 100%; left: 0; right: 0;}
    #slogan {display: none;}
    #slogan_mobile {display: none;}
    #main_mobile {display: none;}
    #main_mobile_horizontal {display: block;}
    h2 {display: block; margin-top: 0px; line-height: 2rem; padding-left: 0; text-align: center;}
    .tooltip_informacja .tooltiptext_informacja { width: 25em;}  
    input[type="checkbox"] + label { margin-left: 0; }
    .pozycja7 { display:none; }
     #animacja {
        left: initial;
        max-width: 40%;
        right: 10%;
        top: 4%;
    }
    
}

@media (max-width: 1024px) and (orientation: portrait)/*, (max-width: 440px)*/  {

    html { background: #d3eeff;}
    form {width: 80%; min-width: 300px; margin: auto; margin-top: 1em; padding-top: 1.5%; background: none; min-height: 300px;}
    input { width: 51%; }
    input::placeholder { font-size: 15px; }
    .pozycja5 {width: 48%; float: none;}
    .pozycja6 {width: 48%;}
    h2 {text-align: center; display: block; line-height: 16px; padding-left: 0; text-align: center; margin-top: 0px; font-size: 14px; }
    h2 b { font-size: 1.6rem; line-height: 2.2rem}
    h2 b br { display: block; }
    .send { width: 42%; font-size: 25px; /*background-color: #f3b932; color: #192c75;*/}
    #main {display: none;}
    #main_mobile {display: block;}
    #logo {display: none;}
    #apla {background: none; position: static; height: auto; width: 100%; left: 0; right: 0;}
    #slogan {display: none;}
    #slogan_mobile {display: none;}
    .tooltip_informacja .tooltiptext_informacja { right: 0; width: 25em;}  
    input[type="checkbox"] + label { margin-left: 0; }
    .pozycja7 { display:none; }
    #animacja {
    left: 0;
    top: 45%;
}

}