/*--------------------------------------------------------------
Reset CSS
--------------------------------------------------------------*/
html{-webkit-text-size-adjust:100%}html,body{width:100%;height:100%;background:#fdfdfd}html,html a{text-shadow:1px 1px 1px rgba(0,0,0,.004);-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:always}body,html,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,select,p,xmp{margin:0;padding:0}img,button,input,textarea,fieldset{border:0}button{background:none;cursor: pointer}button,input,option,select,textarea{font:inherit}li{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%}a,xmp{display:inline-block;text-decoration:none}textarea,button,input{outline:none}img{image-rendering:-webkit-optimize-contrast}*{font:normal 13px 'Roboto', sans-serif;color:#888}

*, *::before, *::after{box-sizing: border-box}
b{font-weight:bold}


/*--------------------------------------------------------------
Animations
--------------------------------------------------------------*/
.arrow-jump{
    -webkit-animation: arrow-jump 1s infinite; /* Safari 4+ */
    -moz-animation:    arrow-jump 1s infinite; /* Fx 5+ */
    animation:         arrow-jump 1s infinite; /* IE 10+, Fx 29+ */
}

@keyframes arrow-jump 
{
    0%   { opacity: 0;}
    100% { opacity: 1; 
          -webkit-transform: translateX(10px);
          -moz-transform: translateX(10px);
          transform: translateX(10px);
      }
}

@-webkit-keyframes arrow-jump 
{
    0%   { opacity: 0;}
    100% { opacity: 1; 
          -webkit-transform: translateX(10px);
          -moz-transform: translateX(10px);
          transform: translateX(10px);
      }
}

.quiz-progress-bg{
    width: 0;
    overflow: hidden;
    position: relative
}
  
.quiz-progress-bg:after{
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    
    background-image: linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
    );
    
    z-index: 1;
    background-size: 50px 50px;
    animation: move 2s linear infinite;
    overflow: hidden;
}
  
@keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }


/*--------------------------------------------------------------
Preloader
--------------------------------------------------------------*/
.preloader{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
    opacity: 1!important
}

.loader-circle {
    border: 5px solid #fff;
    border-top-color: #e32449;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    z-index: 101
}
  
@keyframes spin {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}


/*--------------------------------------------------------------
SweetAlert2
--------------------------------------------------------------*/
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {overflow-y: initial !important}

html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown):not(.kt-sweetalert2--nopadding),
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown):not(.kt-sweetalert2--nopadding) {padding-right: 0 !important}

@media screen\0 {
    html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {overflow: visible } 
}

.swal2-popup {
    border-radius: 4px;
    padding: 3rem 
}

.swal2-popup .swal2-title {
    font-weight: 500;
    font-size: 1.2rem;
    margin: 0 0 1rem
}

.swal2-popup .swal2-content {
    font-weight: normal;
    font-size: 1rem
}

.swal2-popup .btn {margin: 15px 5px 0}
.swal2-popup .swal2-styled:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.swal2-container {overflow-y: hidden !important}

body.swal2-height-auto {height: 100% !important}

.swal2-container.swal2-shown {background-color: rgba(0, 0, 0, 0.2)}
.swal2-popup .swal2-title {color: #464457}
.swal2-popup .swal2-content {color: #a7abc3}

.swal-wide{width: 525px}

/*--------------------------------------------------------------
Global classes
--------------------------------------------------------------*/
.page{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    flex-direction: column
}

.page-content{
    position: relative;
    width: 500px;
    min-height: 280px;
    max-height: 500px;
    z-index: 10;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.05);
    padding: 30px;
    overflow: hidden;
    margin: 0 auto
}

.overflow-hidden{overflow: hidden}

@media screen and (max-width: 600px) {
    .page-content{width: 100%}
}


/*--------------------------------------------------------------
HOME PAGE
--------------------------------------------------------------*/
.home-page{
    text-align: center;
    padding: 30px
}

.home-page .content{margin-top: 20px}
.home-page .content h1{
    font: 800 30px 'Poppins';
    color: #575962
}

.home-page .content p{
    max-width: 400px;
    margin: 5px auto;
    font-size: 14px
}

.home-page .content b{
    font-weight: bold;
    font-size: 14px
}

.home-page .content button{
    margin: 30px auto 0;
    border-radius: 5px;
    width: 156px;
    height: 40px;
    background: #ff8100;
    box-shadow: 0 0 24px 0 rgba(0,0,0,.1);
    border: 1px solid #ff8100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s
}

.home-page .content button > *{
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.1)
}

.home-page .content button > span{
    font-weight: bold;
    margin-top: -2px
}

.home-page .content button > i{font-size: 20px}



/*--------------------------------------------------------------
Quiz
--------------------------------------------------------------*/
.quiz-logo{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px
}

.quiz-progress{
    width: 100%;
    height: 20px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    width: 100%
}

.quiz-progress-bg{
    height: 100%;
    max-width: 500px;
    background: #e32449
}

.quiz-icon i{font-size: 100px}
.text-success{color: #a5dc86!important}
.text-brand{color: #5D9BFB!important}

.quiz-image{margin-bottom: 20px}

.quiz-title{margin: 20px 0 30px}
.quiz-title > h1{
    font-family: 'Poppins';
    color: #575962;
    font-weight: 500
}

.radio {
    margin: 16px 0;
    display: block;
    cursor: pointer;
    cursor: pointer; 
	font-weight: 400
}

input[type="radio"]{
    display: none;
    position: absolute;
	visibility: hidden;
}

input[type="radio"] + span{
    line-height: 22px;
    padding-left: 22px;
    display: block;
    position: relative;

    font-size: 14px;
    font-weight: 400
}

.small-radio input[type="radio"] + span{
    line-height: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    font-size: 11px
}

input[type="radio"] + span > a{
    font-size: 11px;
    font-weight: 400;
    text-decoration: underline;
    margin-left: 5px
}

input[type="radio"] + span:not(:empty){padding-left: 30px}
input[type="radio"] + span:before, input[type="radio"] + span:after{
    content: '';
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 50%;
    left: 0;
    top: 0;
    position: absolute;
}

.small-radio input[type="radio"] + span:before, .small-radio input[type="radio"] + span:after{
    width: 15px;
    height: 15px
}

input[type="radio"] + span:before{
    background:#D1D7E3;
    transition: background .2s ease, transform .4s cubic-bezier(.175, .885, .32, 2);
}

input[type="radio"] + span:after{
    background: #fff;
    transform: scale(.78);
    transition: transform .6s cubic-bezier(.175, .885, .32, 1.4)
}

input[type="radio"]:checked + span:before{
    transform: scale(1.04);
    background: #e32449
}

input[type="radio"]:checked + span:after{
    transform: scale(.4);
    transition: transform .3s ease;
}

.radio:hover input[type="radio"] + span:before{transform: scale(.92)}
.radio:hover input[type="radio"] + span:after{transform: scale(.74)}
.radio:hover input[type="radio"]:checked + span:after{transform: scale(.4)}


.quiz-button{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end
}

.quiz-button button{
    height: 40px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.1)
}

.quiz-button button.btn-next{background: #e32449}
.quiz-button button.btn-finish{background: #85ef47}
.quiz-button button.btn-close{background: #ff4949}

.quiz-button button > *{
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.15)
}

.quiz-button button > span{
    font-weight: bold;
    margin-top: -2px
}
.quiz-button button > i{ font-size: 20px }
.quiz-button button.btn-finish > i{margin-left: 8px}

.quiz-contact-form{width: 100%}
.quiz-contact-form .input-container label{
    position: relative;
    display: block;
    margin-bottom: 15px
}

.quiz-contact-form .input-container input{
    display: block;
    padding: 20px;
    width: 100%;
    margin-bottom: 10px;
    outline: none;
    transition: all 0.2s ease-in-out;
    background-color: white;
    font-weight: bold;
    color: #575962;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 5px
}

.quiz-contact-form .input-container input::placeholder{
    transition: all 0.2s ease-in-out;
    color: #575962;
    font-weight: 400
}

.quiz-contact-form .input-container input:focus{
    padding-top: 28px;
    padding-bottom: 12px;
}

.quiz-contact-form .input-container input:focus::placeholder{color: transparent}
.quiz-contact-form .input-container input:focus + span{
    opacity: 1;
    top: 10px
}

.quiz-contact-form .input-container span{
    font-size: .8rem;
    color: #575962;
    position: absolute;
    top: 0px;
    left: 20px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.awards{
    border-top: 1px solid #e5e5e5;
    margin-top: 20px
}

.awards img{
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.15)
}

.quiz-content{
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

.quiz-btn-download{
    text-decoration: underline;
    font-size: 15px
}


/*--------------------------------------------------------------
Scores
--------------------------------------------------------------*/
.quiz-scores{
    font-size: 15px;
    background: #ff8100;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    margin: 0 0 30px;
    text-shadow: 0 0 4px rgba(0,0,0,.05);
}


/*--------------------------------------------------------------
Confetti
--------------------------------------------------------------*/
#particle-canvas {
    display: block; 
    position: fixed;
    pointer-events: none; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    z-index: 10
}


/*--------------------------------------------------------------
Bubbles
--------------------------------------------------------------*/
.circle {
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.wave {
    position:relative;
    width: 100%;
    height:100%;
    background: #29B6F6;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0,0,0,.5)
}

.wave:before, .wave:after  {
    content: '';
    position:absolute;
    width:200%;
    height:200%;
    left:-50%;
}

.wave:before {
    border-radius:35%;
    background: #0288D1;
    animation: flow 3s linear infinite;
    animation-delay:2s;
    bottom:50%;
}

.wave:after{
    border-radius: 40%;
    background: #fff;
    animation: flow 3s linear infinite;
    bottom:70%;
}

.bubble {
    position:absolute;
    width: 40px;
    height:40px;
    background:white;
    border-radius: 50%;
    animation: rise 5s infinite linear;
}

/*ANIMATIONS*/
@keyframes flow {
    0%{ transform: rotate(0deg) }
    100%{ transform: rotate(360deg) }
}

@keyframes rise {
    0% { transform:translate(0,0) }
    20% { transform:translate(10px,-20px) }
    40% { transform:translate(-10px,-40px) }
    60% { transform:translate(-10px,-60px) }
    80% { transform:translate(10px,-80px) }
    100% {
        transform:translate(-10px,-100px);
        opacity: 0
        }
}


/*--------------------------------------------------------------
BTN SHARE QUIZ
--------------------------------------------------------------*/
.footer{margin-top: 25px}
.btn-share-quiz{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #3960ad;
    border: 1px solid #3960ad;
    padding: 7px 10px;
    border-radius: 3px;
    transition: 1s;
    margin: 0 auto
}

.btn-share-quiz:hover, .btn-share-quiz:focus{
    background: #365899;
    border-color: #365899
}

.btn-share-quiz > *{
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,.1)
}

.btn-share-quiz span{
    font-weight: bold;
    margin-left: 6px
}


@media screen and (max-height: 550px), (max-width: 500px) {
    .page{
        display: block;
        height: auto
    }

    .home-page{padding: 0}
    .home-page .content p{font-size: 12px}
    .home-page .content h1{font-size: 25px}
}