html {touch-action:pan}

.question {
    width: 75vw;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 8.25vw;
    line-height: 1.25;
    color:#22317F;		padding-top:20px
}
.recommend {
    width: 100%;
    margin-left: auto;    
    margin-right: auto;    
    font-weight: bold;    
    font-size: 30px;    
    line-height: 1.25;    
    color:#22317F;		
    padding-top:30px;
    padding-bottom:20px;
    
}
.offer {
    width: 100%;
    margin-left: auto;    
    margin-right: auto;    
    font-weight: bold;    
    font-size: 26px;    
    line-height: 1.25;    
    color:#22317F;	
    padding-top:30px;
    padding-bottom:20px;    
}

.answer-container {
    width: 85vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.85vw;
}

a:link, a:visited,a:hover, a:active { text-decoration: none !important;  color:#ffffff !important;} 


.answer-selection {
    position: relative;
    margin-bottom: 6.25vw;
}


.answer-selection img {	width: 50%;    margin: auto;    max-width: 100%;    height: auto;    vertical-align: middle;    box-sizing: border-box;    cursor: pointer;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    -moz-border-radius: 5px;    -moz-box-shadow: -3px 3px 4px #BBB;    text-align: center;    position: relative;    margin-left: 50%;
}

.answer-selection p {
    position: absolute;
    top: 3%;
    left: 5vw;
    width: 40vw;
    font-size: 4.75vw;
    text-align: left !important;
    font-weight: normal;
    line-height: 1.35;
    color:#22317F;
}

.answer-solid-red {
    background-color:#decee5;
}

.answer-solid-teal {
    background-color:#f7cde1;
}

.answer-solid-brown {
    background-color:#acdee1;
}

.answer-solid-pink {
    background-color:#b9dfc6;
}

.answer-solid-purple {
    background-color:#FFDDAB;
}

.hide {
    display:none;
}


.button-facebook{
    background-color: rgb(24, 119, 242);
}

.button-google{
    background-color: #e60023;
}

.button-social{
    display: flex;
    align-items: center;
    border: none;
    height: 40px;
    transition: opacity 0.2s linear 0s;
    width: 100%;
    border-radius: 20px;
    padding: 0px 0px 0px 8px;
    color:#ffffff;
    font-weight:bold;
    justify-content: center;
     outline: none !important;
}

.modal-request {
    font-weight: bold;
    line-height: 1.25;
    color:#22317f;
}


.modal {
  text-align: center;
  padding: 0!important;
  width:100%;
  background-color: rgba(0,0,0,0.6);
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-body {
    width:50vh
}

.modal-footer {
    width: 50vh;
    background-color: yellow;
}


.products-container{
    position: relative;
    display: block;
    width: 100%;
}

.product-container {
    
}

.product-title {
    
}

.product-title-item{
    position: relative;
    background-color: transparent;
    font: 18px/19px sans-serif;
    padding-left: 8px;
    color: #fff;
    box-sizing: border-box;
    letter-spacing: .02em;
    margin: 0 0 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
}

.product-container img {
    float: left;
    /* padding-right: 3%; */
    height: 100px;
    /* width: 50%; */
    margin-bottom: 10px;
}

.product-info {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding-right: 10%;
    padding-left: 10%;
}


.product-info-content {
    padding-top: 3%;
    text-align: left;
    color: #707475;
}

.product-description{
    padding-left: 10%;
    text-align: left;
    max-width: 90%;
    padding-right: 2%;
    margin: 0 0 10px;
    height: 200px;
    overflow-y: scroll;
}

.card {border:0 !important;}

.brands {background-color:#AFEEF5;}
.advise {margin-top:30px;	padding: 20 20 20; background-color:#CBEBFB;}
    .advise-bottom {background-image:url('../../bin/images/note.png'); height:100px;background-position-x: right;}
    .advise p {margin:0 auto auto;}
.card-title {	margin-top:20px}
.reward {	padding: 20 20 20;;}

.thankyou {
 width:100%;
    margin: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-border-radius: 5px;
    -moz-box-shadow: -3px 3px 4px #BBB;
    text-align: center;
    position: relative;
}

.thankyoucontainer {
        width: 85vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.85vw;
    overflow: hidden;

}


@media (min-width: 768px){
.advise-bottom {background-repeat:no-repeat; background-position-x:right;background-image:url('../../bin/images/note-long.png');}
 html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin-bottom:20px;
}
    
div.answer-solid-red {height:200px;overflow: hidden;}
div.answer-solid-teal {height:200px;overflow: hidden;}
div.answer-solid-brown {height:200px;overflow: hidden;}
div.answer-solid-pink {height:200px;overflow: hidden;}
div.answer-solid-purple {height:200px;overflow: hidden;}

.answer-solid-red img  {margin-bottom:0;}
.answer-solid-teal img {margin-bottom:0;}
.answer-solid-brown img{margin-bottom:0;}
.answer-solid-pink img {margin-bottom:0;}
.answer-solid-purple img{margin-bottom:0;}
    
.modal-dialog{
    max-width:800px    ;
    width: 100vh;

}   

.modal-body {
    width:100%
}

.modal-footer {
    width:100%
}

.question {
    width: 60vw;
    font-size: 3vw;
}

.q-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.15vw;
}

.answer-container{
        width: 100%;
}

.answer-selection {
    width: 30vw;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 4.65vw;
    position: relative;
    display: inline-block;
    cursor:pointer
}


.answer-selection p {
    left: 1.5vw;
    width: 13vw;
    font-size: 20px;
}



.product-container img {
    float: left;
    /* padding-right: 3%; */
    height: 100px;
    /* width: 50%; */
    margin-bottom: 10px;
}

.button-social{
    width:100%;
}

.product-description {
    overflow:hidden;
    width:90%;
}


.thankyoucontainer {
        width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.85vw;
    overflow: hidden;

}

}




.voucher {background: #22317f;border-color: #54aaba;color:#ffffff}