* {
         margin: 2px;
         padding: 0;
         outline: 0      }
         html {
         font-size: 62.5%      }
         body {
         font-family: Larsseit,'Helvetica Neue',Helvetica,Arial,Sans-serif;
         font-size: 100%;
         margin: 0 auto;
         min-height: 100%;
         color: #32445c;
         background-color: #3d3242;
         }
         .topnav {
         overflow: hidden;
         background-color: #7b7a7a;
         text-align: center;
         border-bottom: 5px solid #605c5c;
         }
         .topnav a {
         float: left;
         color: #f2f2f2;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 2rem      }
         .logo {
         max-height: 55px;
         z-index: 12      }
         .flashy {
         background: #7e7e7e;
         color: #8eff57;
         width: 100%;
         min-height: 20px;
         font-size: 3rem;
         padding: 5px 0;
         margin: 5px auto;
         text-align: center      }
         .step {
         font-size: 2rem;
         color: #fff;
         display: none;
         margin: 0 auto;
         padding:3rem 0 0;
         text-align: center      }
         .step .ok {
         display: block;
         background:#a8a9a6;
         box-shadow: inset 0px -4px 1px rgba(0, 0, 0, .5), inset 0px 4px 1px rgba(255, 255, 255, .3);
         color: #fff;
         font-family: 'OpenSansB', Arial, sans-serif;
         text-align: center;
         text-transform: capitalize;
         cursor: pointer;
         text-decoration: none;
         position: relative;
         font-size: 30px;
         width: 40%;
         min-width: 250px;
         border-radius: 15px;
         }
         }
         .step .ok:hover {
         background: #6e9025;
         border-radius: 15px;
         }
         .step .ok:after {
         content: '';
         display: block;
         width: 22px;
         height: 28px;
         position: absolute;
         right: 40px;
         margin: auto;
         top: 0;
         bottom: 0;
         background: url("") no-repeat;
         -webkit-animation: next 1.2s infinite normal ease-out;
         -moz-animation: next 1.2s infinite normal ease-out;
         animation: next 1.2s infinite normal ease-out;
         }
         @-webkit-keyframes next {
         0% {
         opacity: 0;
         right: 40px        }
         15% {
         opacity: 1;
         right: 30px        }
         100% {
         opacity: 0;
         right: 10px        }
         }
         @-moz-keyframes next {
         0% {
         opacity: 0;
         right: 40px        }
         15% {
         opacity: 1;
         right: 30px        }
         100% {
         opacity: 0;
         right: 10px        }
         }
         @keyframes next {
         0% {
         opacity: 0;
         right: 40px        }
         15% {
         opacity: 1;
         right: 30px        }
         100% {
         opacity: 0;
         right: 10px        }
         }
         .step:nth-child(1) {
         display: block      }
         .step p {
         font-size: 2rem;
         padding: 2rem 0      }
         .step.step_check .step_head {
         text-transform: none      }
         .choose_answer {
         font-style: italic;
         font-size: 2rem;
         padding: 2rem 0 3rem;
         display: block      }
         .answer_box {
         max-width: 800px;
         margin: 0 auto;
         text-align: center;
         display: inline-block;
         vertical-align: top      }
         .checkbox_wrap {
         margin: 0 auto;
         width: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         max-width: 600px      }
         .option {
         width: 28%;
         position: relative;
         text-align: left;
         cursor: pointer;
         text-align: center;
         margin: .5rem 2%      }
         .option img {
         display: block;
         width: 100%;
         border: 3px solid #000;
         border-radius: 8px      }
         .option-title {
         font-size: 2rem;
         padding-top: 5px      }
         .option.checked img {
         border-color: #32c26b      }
         .option.checked .option-title {
         color: #32c26b      }
         .btn {
         color: #fff;
         display: block;
         margin: 2rem auto;
         padding: 13px 0;
         max-width: 220px;
         width: 100%;
         font-size: 2rem;
         font-family: Arial;
         border: 0;
         text-decoration: none;
         background: #32c26b      }
         .btn:hover {
         background: #3fdf7e      }
         @media screen and (max-width:560px) {
         html {
         font-size: 55%        }
         .answer_box {
         display: block;
         text-align: left        }
         .girl {
         width: 45%        }
         }
         @media screen and (max-width:420px) {
         html {
         font-size: 55%        }
         }
         @media screen and (max-width:350px) {
         .girl {
         width: 45%        }
         }
         .girl {
         max-width: 240px      }