/*
Theme Name:   Matchmaker Hudson's Bay default
Theme URI:    http://www.wayneparkerkent.com/
Description:  Whitelabel Theme for matchmaker default
Author:       Wayne Parker Kent
Author URI:   http://wayneparkerkent.com
Template:     wpk-matchmaker
Version:      1.1.5
Tags:         wayne, parker, kent
Text Domain:  wpk-matchmaker
*/

#matchmaker                 { background-color: #AA935E; color: #fff; background-image: url(img/matchmaker_bg.gif); font-family: "Montserrat", "Roboto", sans-serif; text-align: center; }
#matchmaker.mm_afterintro   { background-image: url(img/matchmaker_bg_green.jpg); }
#matchmaker h1.logo         { 
    margin: 7% auto 0 auto; 
    display: block; 
    text-indent: -9000px; 
    max-width: 275px; 
    width: 60%; 
    height: 210px; 
    background: url(img/matchmaker_logo_green.svg) no-repeat top center; 
    background-size: 100%; 
}
#matchmaker.mm_afterintro h1.logo { margin: 20% auto 0 auto; }
#matchmaker footer          { bottom: 0; z-index: 10; } 
#matchmaker footer .table-img   { position: absolute; bottom:0; left: 0; width: 100%; }
#matchmaker.mm_afterintro footer .table-img   { display: none; }
#matchmaker footer .footer-img   { display: none;  }
#matchmaker.mm_afterintro footer { display: flex; flex:1; justify-content: center; align-items: flex-end;}
#matchmaker.mm_afterintro footer .footer-img   { display: block; position: relative; max-width: 80px; width: 16%; padding-bottom: 3%; }
#matchmaker[data-round='round-1'] { background-image: url(img/matchmaker_bg_blue.jpg); }
#matchmaker[data-round='round-1'] h1.logo { background: url(img/matchmaker_logo_blue.svg) no-repeat top center; }
#matchmaker[data-round='round-2'] { background-image: url(img/matchmaker_bg_blue.jpg); }
#matchmaker[data-round='round-2'] h1.logo {background: url(img/matchmaker_logo_blue.svg) no-repeat top center;  }
#matchmaker[data-round='round-3'] { background-image: url(img/matchmaker_bg_green.jpg); }
#matchmaker[data-round='round-3'] h1.logo { background: url(img/matchmaker_logo_green.svg) no-repeat top center; }
#matchmaker[data-round='result'] { background-image: url(img/matchmaker_bg_result.jpg); }
#matchmaker[data-round='result'] h1.logo { background: url(img/matchmaker_logo.svg) no-repeat top center; }
#matchmaker.mm_afterintro[data-round='result'] h1.logo { margin: 7% auto 0 auto; }
#matchmaker footer a        { color: white; }
#matchmaker .header         { top: 0; }
#matchmaker #intro          { padding-top: 20%; align-items: flex-start; }
#matchmaker #intro .intro-img { width: 56%; max-width: 230px; margin-bottom: 0px; margin-top: 0px; }
#start_button               { 
    position: absolute;
    bottom: 21%;
}
#matchmaker #intro { padding-top: 0%; }
#matchmaker h1.logo { margin-top: 5%; }
.container                  { 
    height: 70%;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    position: relative;
    justify-content: center;
}
.content                    { z-index: 200; }
.content button             { color: #000; }
.choice                     { background-color: #877350; color: #fff; }
/* .result                     { box-shadow: 0px 4px 8px rgba(255,255,255,0.2); } */
.choices                    { box-shadow: 0px 4px 8px rgba(0,0,0,0.2); }
.result h2                  { color: #fff; margin: 0; padding: 0 15% 6% 15%; font-size: 18px;font-weight: 600; }
.result-content             { color: #fff;  }
.result-content p,
.result-content div         { margin: 0; padding: 0; display: inline; font-size: 15px; font-weight: 600; line-height: 1.3; }
.result-actions             { text-align: center; margin-top: 0px; }
.result-link                { max-width: 80%; display: inline-block; background: linear-gradient(#877350, #AA935E); color: #fff; font-weight: 600; margin: 0px 5px; padding: 13px 16px; text-decoration: none; text-align: center; font-size:16px;  border-radius: 0px;     box-shadow: 0px 4px 8px rgba(0,0,0,0.2);}
.reset-link                 { position: absolute; bottom: 34px; right: 34px; width: 25px; height: 25px; display: block; margin: 15px auto 0 auto; text-indent: -9000px; background: url(img/restart2.svg?v=2) no-repeat top center; background-size: contain; }
.result-social              { margin-top: 3%; font-size: 14px; font-weight: 600; display: flex; justify-content: center; align-items: center; }





  html { height: 100%; }
      body          { overflow: hidden; margin: 0; padding: 0; height: 100%; font-family: sans-serif; display: flex; justify-content: center; align-items: center; }
      #matchmaker   { position: relative; display: flex; flex: 1; width: 100%; height: 100%; max-width: 550px; min-width: 300px; max-height: 825px; min-height: 420px; background-repeat: no-repeat; background-size: cover; background-position: top center; text-align: center; }
      .header       { position: absolute; top: 57px; width: 100%; }
      h1            { font-weight: 600; margin: 0; padding: 0; word-break: break-word; font-size: 16px; letter-spacing: 0px; margin-bottom: 50px; text-shadow: 1px 1px 12px rgba(0,0,0,0.2); text-transform: uppercase; }
      h2            { font-size: 24px; letter-spacing: 1px; text-shadow: 1px 1px 12px rgba(0,0,0,0.3); color: #AA935E; text-transform: uppercase; }
      footer        { padding: 0; font-weight: bold; position: absolute; bottom: 0px; width: 100%; }
      .choices,
      .result               { border-radius: 0; position: relative; display: flex; flex-direction: row; margin: 2% 5%;}
      .choice               { position: relative; overflow: hidden; width: 50%; }
      .choice button        { cursor: pointer; position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; background: none; border: none;}
      .choice button[disabled='true'] { background: rgba(0,0,0,.7); }
      .choice h3            { font-size: 16px; min-height: 20px; padding: 0 5px; margin: 10px 0; }
      .choice:first-child   { margin-right: 1px; }
      .choice:last-child    { margin-left: 1px; }
      .choice img           { width: 100%; height: auto; }
      .result               { position: relative; margin: 29% 10px 25% 10px; flex-direction: column; display: flex; height: auto; width:100%; margin-bottom: auto; }
      /* .result img:not(.dft) { width: 90%; margin: 5% 5% 0 5%; height: auto; border-radius: 8px; overflow: hidden; } */
      .result .result-image { margin: 0 15%; background: #fff; border: 8px solid #877350;}
      .result img:not(.dft):not(.share-button) { max-width: 100%; max-height: 275px; height: auto; }
      .result .share-button { width: 40px; height: 40px; margin-top: -4px;}
      .result-content       { padding: 5% 3%; }
      .content              { 
          padding: 7px; display: flex; height: 100%; width: 100%; flex: 1 1 100%; justify-content: center; align-items: center; 
        }
      .content button       { cursor: pointer; display: block; width: auto; font-weight: 600; border: none; background: linear-gradient(#877350, #AA935E); color: white; border-radius: 0px; font-size: 21px; padding: 10px 50px; box-shadow: 5px 6px 10px rgba(0,0,0,0.6); margin: 0 auto 7px auto; letter-spacing: 2px; }
      .question             { position: absolute; top: 12%; bottom: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
      .question h2          { margin: 0 10% 5% 10%; }
      .hide                 { display: none; opacity: 0; }
      .active               { animation-name: show; animation-duration: .8s; animation-fill-mode: forwards; animation-iteration-count: 1; }
      .question.chosen      { animation-name: hide; animation-duration: .4s; animation-fill-mode: forwards; animation-iteration-count: 1; }
      .choice.chosen        { animation-name: choose; animation-duration: .2s; animation-fill-mode: forwards; animation-iteration-count: 1; }
      .question ul          { margin: 0; padding: 0 0 0 50px; display: inline-block; text-align: center; height: 30px; line-height: 10px; }
      .question ul li       { float: left; width: 30px; height: 20px; opacity: 1; font-size: 28px; color: #ffffff; }
      .question ul li.active       { opacity: 1; color: #C8B4E1; font-size: 44px; margin-top: -1px;}
      .reset-link           { cursor: pointer; }

      /* @media only screen and (min-width: 550px) {
        h1 { font-size: 16px; letter-spacing: 0px; }
      } */

      @media only screen and (max-width: 550px) {
        /* h1, .result h2 { font-size: 80%; } */
        /* #matchmaker #intro .intro-img { width: 60%; } */
        /* #start_button { margin-top: 0; } */
       h2 {
           font-size: 18px;
       }
       .choice h3 {
           font-size: 14px;
       }
       .result {
        margin: 25% 10px;
       }
       .result-link {
           font-size: 13px;
       }
       .result h2 {
           font-size: 15px;
       }
       .result-content p,
        .result-content div         {
            font-size: 13px;
        }
        #start_button {
            bottom: 15%;
        }

      }

      @media only screen and (max-width: 768px) {
        #matchmaker { /*max-height: 725px;*/ }
        .question { top: 100px; }
      }

      @keyframes show {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes hide {
        0% {
          opacity: 1;
        }
        99% {
          display: none;
        }
        100% {
          display: none;
          opacity: 0;
        }
      }

      @keyframes choose {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(.8);
          opacity: 0;
        }
      }


      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        body {
          display: block;
          flex: none;
        }

        #matchmaker,
        .choice,
        .result,
        .content button,
        .choice button  {
          border-radius: 0 0 0 0 !important;
          flex: none;
        }
        /*.result img {
          display: none;
        }*/

        .choices,
        .question,
        .result  {
          display: block;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 100%;
          border-radius: 0 0 0 0 !important;
          box-shadow: none !important;
          margin-left: 0;
          margin-right: 0;
        }
        .choice {
          width: 49.5%;
          float: left;
        }
      }