/* -------CUSTOM NORMALIZE CSS - FB------*/
 *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
     all: unset;
     display: revert;
 }

 /* Preferred box-sizing value */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 /* Reapply the pointer cursor for anchor tags */
 a,
 button {
     cursor: revert;
 }

 /* Remove list styles (bullets/numbers) */
 ol,
 ul,
 menu {
     list-style: none;
 }

 /* For images to not be able to exceed their container */
 img {
     max-width: 100%;
 }

 /* removes spacing between cells in tables */
 table {
     border-collapse: collapse;
 }

 /* revert the 'white-space' property for textarea elements on Safari */
 textarea {
     white-space: revert;
 }

 /* minimum style to allow to style meter element */
 meter {
     -webkit-appearance: revert;
     appearance: revert;
 }

 /* reset default text opacity of input placeholder */
 ::placeholder {
     all: unset;
 }

 /* fix the feature of 'hidden' attribute.
  display:revert; revert to element instead of attribute */
 :where([hidden]) {
     display: none;
 }

 /* revert for bug in Chromium browsers
  - fix for the content editable attribute will work properly. */
 :where([contenteditable]) {
     -moz-user-modify: read-write;
     -webkit-user-modify: read-write;
     overflow-wrap: break-word;
     -webkit-line-break: after-white-space;
 }

 /* apply back the draggable feature - exist only in Chromium and Safari */
 :where([draggable="true"]) {
     -webkit-user-drag: element;
 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type=number] {
     -moz-appearance: textfield;
 }

 /*--------END NORMALIZE CSS-------*/

 html,
 body {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 500;
     overflow-x: hidden;
     color: #161823;
     background: rgba(248, 248, 248, 1);
 }

 h1 {
     font-family: 'Nunito Sans', sans-serif;
     font-size: 50px;
     font-weight: 900;
     line-height: 1;
     text-align: center;
     /* text-shadow: 4px 3px #161823; */
     text-shadow: 1px 1px rgb(22 24 35 / 50%);
 }

 h4 {
     font-family: 'Nunito Sans', sans-serif;
     font-size: 24px;
     font-weight: 800;
     text-align: center;
     text-shadow: 1px 1px rgb(22 24 35 / 50%);
 }

 h6 {
     font-family: 'Nunito Sans', sans-serif;
     font-size: 18px;
     color: #848CFC;
     max-width: 400px;
     margin: 5px auto 30px;
 }

 p {
     font-family: 'Nunito Sans', sans-serif;
 }

 /*--------------------------------------------------*/
 /*--------------------------------------------------*/
 /*--------------------------------------------------*/
 /*---------------SPINNING WHEEL---------------------*/
 #canvasContainer {
     position: relative;
     width: 400px;
     margin: 0 auto;
     text-align: center;
 }

 #canvas {
     z-index: 1;
 }

 #prizePointer {
     position: absolute;
     left: 180px;
     top: 102px;
     z-index: 999;
 }

 /*--------------------------------------------------*/
 /*--------------------------------------------------*/
 /*--------------------------------------------------*/
 /*--------------------OVERLAY-----------------------*/

 .custom-model-main {
     text-align: center;
     overflow: hidden;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     /* z-index: 1050; */
     -webkit-overflow-scrolling: touch;
     outline: 0;
     opacity: 0;
     -webkit-transition: opacity 0.15s linear, z-index 0.15;
     -o-transition: opacity 0.15s linear, z-index 0.15;
     transition: opacity 0.15s linear, z-index 0.15;
     z-index: -1;
     overflow-x: hidden;
     overflow-y: auto;
 }

 .model-open {
     z-index: 99999;
     opacity: 1;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .custom-model-inner {
     -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
     transform: translate(0, -25%);
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: -webkit-transform 0.3s ease-out;
     -o-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
     display: inline-block;
     vertical-align: middle;
     width: 600px;
     margin: 30px auto;
     max-width: 97%;

 }

 .custom-model-wrap {
     display: block;
     width: 100%;
     position: relative;
     background-color: #fff;
     border: 1px solid #999;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     background-clip: padding-box;
     outline: 0;
     text-align: left;
     padding: 20px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     max-height: calc(100vh - 70px);
     overflow-y: auto;
     max-width: 650px;
     padding: 30px 50px;
     text-align: center;
 }

 .model-open .custom-model-inner {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     transform: translate(0, 0);
     position: relative;
     z-index: 999;
     /* position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%); */
     margin: 50px 30px;
 }

 .model-open .bg-overlay {
     background: rgba(0, 0, 0, 0.6);
     z-index: 99;
 }

 .bg-overlay {
     background: rgba(0, 0, 0, 0);
     height: 100vh;
     width: 100%;
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
     -webkit-transition: background 0.15s linear;
     -o-transition: background 0.15s linear;
     transition: background 0.15s linear;
 }

 .close-btn {
     position: absolute;
     right: 0;
     top: -30px;
     cursor: pointer;
     z-index: 99;
     font-size: 30px;
     color: #fff;
 }

 .model-open .pop-up-content-wrap {
     display: none;
 }

 .model-open-1 .pop-up-content-wrap-1,
 .model-open-2 .pop-up-content-wrap-2,
 .model-open-3 .pop-up-content-wrap-3 {
     display: block;
 }

 .model-open-3 .close-btn {
     display: none;
 }

 .model-open-2 .pop-up-content-wrap-2 img {
     max-width: 50px;
     margin-bottom: 10px;
 }

 .model-open-2 .pop-up-content-wrap-3 img {
     max-width: 30px;
     margin-bottom: 10px;
 }

 .custom-model-wrap h4 {
     font-size: 32px;
     color: #431C5D;
     text-shadow: none;
     margin: 0 30px 20px;
 }

 .custom-model-wrap h4 span {
     color: #161823;

 }

 .custom-model-wrap p {
     margin-bottom: 30px;
     font-size: 24px;
 }

 .repeat-btn {
     display: inline-block;
     padding: 20px 50px;
     background-color: #431C5D;
     font-weight: 900;
     color: #fff;
     border-radius: 6px;
     border: 2px solid #431C5D;
     transition: all ease-in 50ms;
     cursor: pointer;
 }

 .repeat-btn:hover {
     background-color: transparent;
     color: #431C5D;
 }

 .pop-up-content-wrap-3 img {
     max-width: 200px;
     margin-bottom: 20px;
 }

 /*  .final-btn {
     background-color: #25F4EE;
     padding: 20px 30px;
     border: 2px solid #25F4EE;
     color: #161823;
 } */

 @media screen and (min-width:800px) {
     .custom-model-main:before {
         content: "";
         display: inline-block;
         height: auto;
         vertical-align: middle;
         margin-right: -0px;
         height: 100%;
     }
 }

 @media screen and (max-width:799px) {
     .custom-model-inner {
         margin-top: 45px;
     }
 }

 /*--------------------------------------------------*/
 /*---------------------------------------------------*/
 /*---------------------------------------------------*/
 /*------------------------PAGE-----------------------*/

 .main-section {
     width: 100%;
     height: 100%;
     padding: 50px 30px 230px;
     background-image: url('../img/background.png');
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
 }

 h1.main-title {
     margin-bottom: 30px;
     color: #fff;
 }

 h1.main-title img {
     width: 80px;
     /* margin: -10px 10px; */
     transform: translateY(20px);
 }

 .main-section h4 {
     max-width: 500px;
     margin: 0 auto 20px;
     text-shadow: 1px 1px rgb(22 24 35 / 50%);
     font-weight: 600;
     color: #fff;
 }

 .main-section .spin-copy {
     text-align: center;
     color: #fff;
     font-size: 24px;
     margin-bottom: 30px;
     font-weight: 600;
     text-shadow: 1px 1px rgb(22 24 35 / 50%);
 }

 /*--------------------------------------------------*/
 /*---------------------------------------------------*/
 /*---------------------------------------------------*/
 /*------------------------COMMENTS-------------------*/


 .comments-section {
     margin-bottom: 75px;
     padding: 0 30px;
 }

 .comments-wrapper {
     display: block;
     max-width: 650px;
     margin: -180px auto 0;
     background-color: #F8F8F8;
     padding: 30px 30px;
     background: #F8F8F8 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000073;
     border-top: 1px solid #1618234b;
 }

 .comments-wrapper .comment-row {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     width: 100%;
     padding: 20px 0;
 }

 .comments-wrapper .comment-row .comment-pic {
     margin-right: 20px;
 }

 .comments-wrapper h6 {
     font-size: 20px;
     font-weight: 800;
     color: #161823;
     margin: 0;
 }

 .comments-wrapper .comment-text {
     width: 80%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding-right: 15px;
 }

 .comment-line {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .comment-emoji {
     margin-left: 5px;
     display: flex;
     align-items: center;
 }

 .comment-emoji img {
     display: none;
     max-width: 20px;
     margin-right: 5px;
 }

 .like-counts {
     font-size: 12px;
     cursor: pointer;
 }

 .comments-wrapper svg {
     cursor: pointer;
 }

 .comments-wrapper svg:hover {
     fill: #E05915;
 }

 .comment-like-sect {
     text-align: center;
 }

 .comments-publish-section {
     max-width: 650px;
     display: block;
     margin: 0 auto;
     background: #F8F8F8 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000073;
     border-top: 1px solid #1618234b;
     padding: 20px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* border-bottom: 1px solid #1618234b; */
 }

 .input-bar {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     background-color: rgba(22, 24, 35, 0.05);
     padding: 7.5px 20px;
     border-radius: 10px;
     width: 85%;
     margin-right: 10px;
 }

 .input-bar input {
     border-radius: 10px;
     width: 100%;
     opacity: 0.5;
     font-family: 'Nunito Sans', sans-serif;
 }

 .publish {
     cursor: pointer;
     color: rgba(22, 24, 35, 1);
     opacity: 0.75;
 }

 .publish:hover {
     opacity: 1;
 }

 @media screen and (max-width:768px) {
     h1.main-title {
         font-size: 44px;
     }

     h4 {
         font-size: 20px;
     }
 }

 @media screen and (max-width:480px) {
     .comment-line p {
         font-size: 12px;
     }

     .main-section {
         padding: 50px 10px 230px;
     }

     #canvasContainer {
         width: 300px;
     }

     #prizePointer {
         left: 131px;
     }

     .comments-section {
         margin-bottom: 75px;
         padding: 0 10px;
     }

     h1.main-title img:first-child {
         display: none;
     }
 }

 @media screen and (max-width:414px) {
     h1.main-title {
         font-size: 36px;
     }
 }