@font-face {
    font-family:'AudiType Ext'; font-weight:700;
    src:url('../fonts/AudiType-ExtendedBold.eot');
    src:url('../fonts/AudiType-ExtendedBold.eot?#iefix') format('embedded-opentype'), url('../fonts/AudiType-ExtendedBold.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'AudiType Ext'; font-weight:400;
    src:url('../fonts/AudiType-ExtendedNormal.eot');
    src:url('../fonts/AudiType-ExtendedNormal.eot?#iefix') format('embedded-opentype'), url('../fonts/AudiType-ExtendedNormal.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

/* #Reset */

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, sup, 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;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
body {
    line-height: 1; }
ol, ul {
    list-style: none; }
blockquote, q {
    quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none; }
table {
    border-collapse: collapse;
    border-spacing: 0; }

/* #Basic Styles */

body {
    background: #fff;
    font-family: 'AudiType Ext', sans-serif;
    font-size: 100%;
    line-height: 1.6;
    color: #000;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    overflow-x:hidden;
}
.red {
    color: #c03;
}
#logo {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
}
#A1 {
    position: absolute;
    bottom: -1px;
    height: 134px;
    z-index: 1;
    opacity: 0;
    left: 35px;
}
#Hi {
    font-size: 2em; 
    font-weight: bold;
    -webkit-transform: rotate(-4deg); 
    -ms-transform: rotate(-4deg); 
    transform: rotate(-4deg);
    opacity: 0;
    margin-top: 200px; 
    margin-left: 70px;
    
}
#atestiraj, #svoj_ego {
    position: absolute; 
    box-shadow: -4px 5px 5px 0px rgba(0,0,0,0.5);
    background-color: #fff; 
    padding: 0px 20px;
}
#atestiraj {
    z-index: 5;
    color: #d1052f; 
    padding: 0px 20px;
}
#svoj_ego {
    z-index: 6;
    top: 2.5em;
    font-size: 0.6em; 
    left: 5em;
    color: #000;
}
#upper_back {
    width: 110%;
    height: 310px;
    left: -30px;
    top: -110px;
    position: absolute;
    background: #000;
}
#under_back1, #under_back2, #under_back3, #under_back4 {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    width: 100%;
    height: 100%;
    top:32em;
    position: absolute;
    z-index: -10;
    opacity: 0;
}
#copy, #result_head, #result_body, #button_emisije, #button_privacy  {
    position: absolute;
    text-align: right;
    -webkit-transform: rotate(-4deg); 
    -ms-transform: rotate(-4deg); 
    transform: rotate(-4deg); 
    opacity: 0;
}
#copy {
    top: 310px;
    left: 10%;
    width: 80%;
}
#start{
    position: relative;
    padding-top: 20px;
    padding: 6px 15px 5px 15px;
    color: #fff;
    background-color: #000;
    font-weight: 700;
    font-size: 120%;
    text-transform: uppercase;
    width: 3.9em;
    margin: 10px 0 10px auto;
}
#start:hover { 
    background-color: #c03;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    cursor: pointer;
}
#result_head, #result_body {
    background-color: #000;
    color: #fff;
    opacity: 0;
    display: none;
}
#result_head {
    margin-top: 9em;
    margin-left: 10%;
    padding: 30px;
}
#result_body {
    display: none;
    margin-top: 17em; 
    left: -50%;
    width: 50%;
    padding: 30px 30px 30px 65%;
    text-align: left;
}
.result_header {
    position: absolute;
    padding: 5px 20px;
    right: 10%;
    top: -1px;
    background-color: #fff;
    color: #000;
}
.result_title1, .result_title2, .result_title3, .result_title4 {
    display: none;
    font-size: 1.7em;
    font-weight: bold;
    margin-top: 1em;
    left: -200%
}
.result_desc1, .result_desc2, .result_desc3, .result_desc4 {
    display: none;
}
#prijava{
    position: relative;
    width: 150px;
    margin-top: 25px; 
    padding: 6px 15px 5px 15px;
    color: #000;
    background-color: #fff;
    text-align: left; 
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
}
#prijava a {
    text-decoration: none;
    color: #000;
}
#prijava:hover { 
    background-color: #c03;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    color: #fff;
}
#fb_share {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    position: absolute;
    right:  -90px;
    bottom: 3px;
}
#fb_share:hover { 
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
#page1, #page2, #page3, #page4, #page5 {
    position: absolute;
    top: 350px;
    left: -100%;
    text-align: left;
    opacity: 0;
    display:none;
        -webkit-transform: rotate(-4deg); 
    -ms-transform: rotate(-4deg); 
    transform: rotate(-4deg); 

}

.questions, .answers { 
    padding: 5px 5px 5px 25%; 
    margin: 5px 5px 5px -20%; 
}
.questions {
    background-color: #000;
    color: #fff;
    font-size: 130%;
    font-weight: 700;
}
.answers {
    background-color: #fff;
}
.answers input {
    opacity: 0.0001;
    outline: 0;
    box-sizing: border-box;
    padding: 0;
}
.radio {
    position: relative;
    display: block;
    float: left;                
    width: 2em;
    height: 2em;
    cursor: pointer;
    background: url(/assets/img/icons.png) no-repeat;
    background-position: -1136px -908px;
    margin: -.32em .45em 0 0;
    zoom: 1;
    list-style-type: none;
}
.radio .caption {
    text-indent: -900em;
    position: relative;
    display: block;
    width: 0;
    height: 0;
}
.checked {
    background-position: -1106px -938px;
}

#emisije, #privacy {
    font-size: 0.6em;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    padding: 2% 5%;
    opacity: 0;
    display: none;
}
#button_emisije, #button_privacy {
    font-size: 0.6em;
    position: fixed;
    background-color: #000;
    color: #fff;
    padding: 10px 15px 5px 11px;
    z-index: 1000;
    opacity: 1;
}
#button_emisije {
    left:   -0.5em;
    bottom: 4em;
}
#button_privacy {
    left:   6em;
    bottom: 1em;
}
#button_emisije:hover, #button_privacy:hover {
    background-color: #c03;
    cursor: pointer;
}

sub {bottom: -.25em;}

@media only screen and (min-width: 480px) {
    body        { font-size: 110% }
    .questions, .answers { padding: 15px 5px 15px 60%; }
    #fb_share { right: 10px; }
}
@media only screen and (min-width: 640px) {
    body        { font-size: 120% }
    #upper_back { height: 250px; }
    #A1         { height: 158px; }
    #copy       { top: 240px; left: 20%; width: 60%; }
    #Hi         { margin-top: 110px; margin-left: 330px; } 
    #page1, #page2, #page3, #page4, #page5 { top:13em; }
    #result_head { margin-left: 20%; }
    #prijava    { width: 160px; }
    .radio      { margin: .16em .45em 0 0; }
    #button_emisije { bottom: 3.8em; }
}
@media only screen and (min-width: 800px) {
    body        { font-size: 130% }
    #A1         { height: 172px; }
    #Hi         { margin-top: 110px; margin-left: 430px; } 
    #copy       { top: 260px; }
    #under_back1, #under_back2, #under_back3 { top: 17em; }
    #prijava    { width: 14.4em; }
    #button_emisije { bottom: 3.5em; }
}
@media only screen and (min-width: 1200px) {
    body        { font-size: 150% }
    #A1         { height: 187px; }
    #Hi         { margin-top: 90px; margin-left: 630px; } 
    #copy       { top: 280px; }
    #under_back1, #under_back2, #under_back3 { top: 13em; }
    #result_body { margin-top: 16em; }
    #button_emisije { bottom: 3.3em; }
}
@media only screen and (min-width: 1600px) {
    body        { font-size: 170% }
    #A1         { height: 200px; }
    #under_back1, #under_back2, #under_back3 { top: 5em; }
    #button_emisije { bottom: 3.2em; }
}
@media only screen and (min-width: 2000px) {
    body        { font-size: 200% }
    #A1         { height: 220px; }
    #under_back1, #under_back2, #under_back3 { top: 1em; }
    #button_emisije { bottom: 3.1em; }
}