@font-face{
    font-family: Indra;
    src: url(../fonts/Indira_K.ttf);
  }
  
  @font-face{
    font-family: Yantramanav;
    src: url(../fonts/Yantramanav-Regular.ttf);
  }
  
  @font-face{
    font-family: SCE;
    src: url(../fonts/SCE3.7W1.TTF);
  }

  .all_btn:hover{
    transform: translate(0px, 2px);
  }

  .col{
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin: auto;
  }

  h1{
    margin-bottom: 2px;
    clear: both;
    font-family: 'Indra', serif;
    color: #caa637;
  }

  h2{
    clear: both;
    font-family: 'Indra', serif;
    color: #caa637;
  }

  h3{
    font-family: 'Indra', serif;
    color: #caa637;
    font-size: 1.4rem;
  }


  body{
    margin: auto;
    color: #fff;
    font-family: 'Yantramanav', sans-serif;
    font-size: 1rem;
    text-align: center;
    background: url(../img/bg.jpg);
  }

  .left-border{
    float:left;
    display:block;
  }

  .right-border{
    float:right;
    display:block;
  }

 /*LOG IN PAGE */

  #log-in{
    padding:10px;
    margin: auto;
    max-width: 800px;
  }

  .standard-box{
    overflow: hidden;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, .3);
    max-width: 1200px;
    border: #caa637 1px solid;
  }

  .text-box{
    width: 70%;
  }
  
  /* QUIZ */
  .quiz-box{
    overflow: hidden;
    padding: 20px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, .3);
    max-width: 1200px;
    border: #caa637 1px solid;

    display: none;
  }

  .quiz-box h3{
    padding-top: 7px;
  }

  /* MAIN PAGES*/
  
  .faction-box{
    overflow: hidden;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, .3);
    max-width: 1200px;
    border: #caa637 1px solid;

    background-size: cover;
    background-position: center;
    
  }

  .faction-box h3 {
    padding: 1em;
  }

  .imperial{
    background: url(../img/main/imperial.png);
    background-size: cover;
    background-position: center;
  }

  .light{
    background: url(../img/main/light.png);
    background-size: cover;
    background-position: center;
  }

  .chaos{
    background: url(../img/main/dark.png);
    background-size: cover;
    background-position: center;
  }

  #quiz-btn{
    animation-duration: 2.4s;
    animation-iteration-count: infinite;
  }

  .your-follower{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"] + label,
  .nextbtn,
  .nextbtn:active  {
    background-color: #000;
    padding: 0.5em;
    color: #caa637;
    cursor: pointer;
  }

  input[type="radio"] + label {
    width: 100%;
    max-width: 400px;
  }

  .nextbtn,
  .prevbtn {
    width: 50%;
    max-width: 200px;
    border: 0;
  }

  @media (pointer: fine){
    input[type="radio"]:hover + label,
    .nextbtn:hover {
      background-color: #fff;
    }
  }

  input[type="radio"]:checked + label {
    background-color: #caa637;
    color: #fff;
  }

  button:focus {
    outline: 0;
  }

  .qbox h3 {
    padding-bottom: 1em;
  }

  .error {
    color: #f00;
  }
/*RESULTS*/

.visit_btn{
  padding: 3px;
  padding-top: 10px;
  padding-bottom: 10px;
}


/*FOOTER*/

footer {
    color: #fff;
    background-color: #000;
    text-align: center;
}

@media only screen and (max-width: 992px)  {

    #mc_embed_signup_scroll{
      padding-left: 40px;
      padding-right: 40px;
    }
    
  }

  footer section{
   background-color: #000;
  }
  
  footer p{
    font-size: .8rem;
  }
  
  .follow{
    padding-top: 40px;
  }
  
  .logos img{
    margin: 6px;
  }
  
  .social .btn {
    width: 25%;
    max-width: 75px;
    color: #000;
    background-color: #fff;
    border-color: #000;
    border-style: solid;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    font-size: 1.5rem;
  }
  
  .social .btn:hover{
    color:#fff;
    border-color: #fff;
    background-color:#000
  }