/*!
Theme Name: usc-sns
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: usc-sns
*/

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

.header-pattern::before { background: #28A5CF url(images/header-pattern.png) no-repeat center center / cover;}
.arrow-title::before { background-image: url(images/title-arrow.svg);}
.spent-time::before { background-image: url(images/spent-minutes-icon.svg);}
.avtar-pattern::before { background: #28A5CF url(images/avatar-pattern.svg) no-repeat center center / cover;}
.error-message p::before { background: url(images/info-circle.svg) no-repeat center center / cover;}
.quote-block-cnt::before { background: url(images/comma-icon.svg) no-repeat center center / cover;}
.cyclical-prosess-circle { background-image: url(images/cyclical-circle.svg);}
.helthy-plate-cycle { background-image: url(images/healthy-plate-img.png);}
.wave-card { background-image: url(images/wave-bg.jpg);}


/* loader */
.loader { -webkit-mask: conic-gradient(from 15deg,#0000,#000); animation: l26 1s infinite steps(12); }
.loader, .loader:before, .loader:after{ background: radial-gradient(closest-side at 50% 12.5%, #ffffff 96%,#0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #ffffff 96%,#0000) 0 50%/80% 20% repeat-x; }
.loader:before, .loader:after { content: ""; grid-area: 1/1; transform: rotate(30deg); }
.loader:after { transform: rotate(60deg); }
@keyframes l26 {
    100% {transform:rotate(1turn)}
}
@-webkit-keyframes l26 {
  100% {transform:rotate(1turn)}
}
input[type=number]{
  -moz-appearance: textfield;
}

.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/* range slider */
.cab-slider::-webkit-slider-thumb {   -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: transparent; cursor: pointer; }
.value-bubble::after { border-width: 5px; border-style: solid; border-color: #008CBA transparent transparent transparent; }

/* audio control */
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #404040; cursor: pointer; border-radius: 50%; }
.volume-slider::-moz-range-thumb { width: 12px; height: 12px; background: #404040; cursor: pointer; border-radius: 50%; border: none; }
.volume-slider::-moz-range-track { background: #404040; height: 4px; }
.volume-slider::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
.volume-slider::-ms-fill-lower, .volume-slider::-ms-fill-upper { background: #404040; }
.volume-slider::-ms-thumb { width: 12px; height: 12px; background: #404040; cursor: pointer; border-radius: 50%; }


/* loader */

.scene { width: 250px; margin: 0 auto; }
        .scene-wrapper { padding-top: 100%; position: relative; }
        .bottle { width: 13%; position: absolute; top: 50%; transform: translateY(-50%); left: 30%; animation: tiltBottle 5s infinite ease-in-out; transform-origin: top;}
        .bottle-wrapper { padding-top: 308%; }
        .bottle-neck { width: 34%; height: 50%; background-color: black; border-radius: 20%; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
        .bottle-ball { width: 94%; height: 31%; border-radius: 50%; background-color: black; position: absolute; top: 35%; left: 50%; transform: translateX(-50%); z-index: 1; }
        .bottle-body { width: 94%; height: 50%; background-color: black; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 2; }
        .bottle-sticker { width: 83%; height: 70%; background-color: #fff; border-bottom-left-radius: 10%; border-bottom-right-radius: 10%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; overflow: hidden;}
        .gray-Label { width: 41%; height: 100%; background-color: #d3d3d3; border-bottom-left-radius: 10%; border-bottom-right-radius: 10%; position: absolute; top: 0px; right: 0; z-index: 4; }
        .bottle-shadow { width: 21%; height: 4%; background-color: #2F3233; opacity: 0.5; border-radius: 50%; position: absolute; bottom: 28%; left: 34%; z-index: 1; animation: disappearShadow 5s infinite ease-in-out}
        .glass  { width: 16%; position: absolute; top: 72%; left: 55%; }
        .glass-wrapper { padding-top: 131%; }
        .glass-neck { width: 64%; height: 58%; background-color: #000; border-top-left-radius: 10%; border-top-right-radius: 10%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); overflow: hidden;}
        .glass:before { content: ''; width: 8%; height: 100%; background-color: black; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); }
        .glass-stand { width: 63%; height: 8%; border-top-right-radius: 100%; border-top-left-radius: 100%; background-color: #000; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 2; }
        .wine-drops { position: absolute; top: 41%; left: 54%; width: 8%; height: 2%; background-color: transparent; border-top: 10px solid #F5A905; border-right: 3px dashed #F5A905; border-top-right-radius: 1000%; opacity: 0; animation: dropWine 5s .5s infinite ease-in-out;}
        .glass-shadow { width: 101%; height: 15%; background-color: #2F3233; opacity: 0.4; border-radius: 50%; position: absolute; bottom: -4%; left: 28%; z-index: 3; }
        .wine-wrapper { width: 79%; height: 67%; display: flex; align-items: flex-end; position: absolute; bottom: 5px ; left: 50%; transform: translateX(-50%); overflow: hidden; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; }
        .uncover-wine { margin-left: 1px; width: 100%; height: 0%; margin: 0px 0px 0px 0px; background-color: #F5A905; opacity: 0.5; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; animation: showWine 5s infinite ease-in-out; z-index: 3; opacity: 0; }
        .bottal-loder{ background: rgba(255, 255 , 255 ,0.9); position: fixed; top: 0; left: 0; width: 100%; height: 100%; display:flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 9999;}
        @keyframes tiltBottle{
            0%{
                transform: translateY(-50%);
            }
            20%{
                transform: rotate(60deg) translateY(-50%);
            }
            80%{
                transform: rotate(60deg) translateY(-50%);
            }
            100%{
                transform: rotate(0deg) translateY(-50%);
            }
        }
        @keyframes dropWine{
            0%{
            
            }
            30%{
                height: 32%;
                opacity: 1;
            }
            60%{
                height: 30%;
                opacity: 1;
            }
            75%{
                height: 10px;
                opacity: 0;
            }
            100%{
                height: 0px;
                opacity: 0;
            }
        }
        @keyframes showWine{
            0%{
                opacity: 0;
            }
            33%{
                height: 0%;
            }
            
            70%{
                height: 100%;
                opacity: 0.5;
            }
            80%{
                height: 100%;
                opacity: 0.5;
            }
            100%{
                height: 100%;
                opacity: 0;
            }
        }
        @keyframes disappearShadow{
            0%{
                width: 21%;
                left: 34%;
            }
            20%{
                    width: 28%;
                    left: 24%;
                }
            80%{
                    width: 28%;
                    left: 24%;
                }
            100%{
                    width: 21%;
                    left: 34%;
                }
        } 
        
        /* 404 page style */
.center {background-color: #E8EDF8;height: 100vh;gap: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.error {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
.number {
    font-weight: 900;
    font-size: 190px;
    color: #28A5CF;
    line-height: 1;
    text-shadow: 1px 1px 1px #28A5CF, 2px 2px 1px #356b7d, 3px 3px 1px #356b7d, 4px 4px 1px #356b7d, 5px 5px 1px #356b7d, 6px 6px 1px #356b7d, 7px 7px 1px #356b7d, 8px 8px 1px #356b7d, 25px 25px 8px rgba(0, 0, 0, 0.2);
}
.illustration {
    position: relative;
    width: 130px;
    margin: 0 12px 0 24px;
}
.circle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    border-radius: 50%;
    background-color: #5e3e23;
    box-shadow: 0px 30px 1px #7b411b, 0px 40px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 20px 18px 8px rgba(0, 0, 0, 0.2);
    transform: scaleY(0.4);
    transition: 1s;
    transform-origin: center 60%;
    animation: clip-rotate 2.5s infinite;
}
@keyframes clip-rotate {
    0%,100% {transform: scaleY(0.4);}
    50% {transform: scaleY(0.5);}
}
.clip {
    position: absolute;
    bottom: 23%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 0 0 30% 30%;    
}

.paper {
    position: absolute;
    bottom: -0.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50%;    
    bottom: -130%;
    transition: 0.3s;
    animation: paper-move 2s forwards;
}

@keyframes paper-move {
    0% {bottom: -130%;}
    50% {bottom: 15%;}
    100% {bottom: 10%;}
}
.paper .glass-wrap{
    width: 100%;
    height: 100%;
}

.glass-wrap {
    width: 16%;
    position: absolute;
    top: 0%;
    left: 0%;
}
.glass-wrap::after {
    content: '';
    width: 130%;
    height: 130%;
    border: 5px solid #bb3a3a;
    position: absolute;
    top: -17%;
    left: -17%;
    border-radius: 50%;
}
.paper::before {
    content: '';
    width: 5px;
    height: 122%;
    background-color: #bb3a3a;
    position: absolute;
    top: -12%;
    left: 42%;
    transform: rotate(-40deg);
    z-index: 1;
}
.glass-wrap:before {
    content: '';
    width: 8%;
    height: 100%;
    background-color: #9296a1;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.glass-wrapper-wrap {
    padding-top: 131%;
}
.glass-neck-wrap {
    width: 64%;
    height: 58%;
    background-color: #9296a1;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.glass-stand-wrap {
    width: 50%;
    height: 8%;
    border-top-right-radius: 100%;
    border-top-left-radius: 100%;
    background-color: #9296a1;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.uncover-wine-wrap{
    height: 60%;
    width: 100%;
    background: #af2031;
    bottom: 0;
    position: absolute;
}

/* imoji list css */
.bullet-none.imoji-list li { padding: 10px 0px 10px 40px !important; position: relative;}
.imoji-list li img { position: absolute; top: 5px !important; left: 0 !important; width: 30px !important; height:30px !important; display: block !important;}

@media screen and (max-width: 767px){
    .center{gap: 24px;}
    .number{font-size: 140px;}
    .illustration{width: 100px;}
}
@media screen and (max-width: 575px){
    .center{gap: 22px;}
    .number{font-size: 100px;}
    .illustration{width: 70px;margin: 0 9px 0 18px;}
    .circle{height: 80%;box-shadow: 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 20px 1px #7b411b, 0px 25px 1px #7b411b, 0px 18px 1px #7b411b, 0px 20px 1px #7b411b, 20px 18px 8px rgba(0, 0, 0, 0.2);}
    .glass-wrap::after{border-width: 3px;}
    .paper::before{width: 3px;}
    .center p{padding-inline:12px;}
    .bullet-none.imoji-list li { flex-wrap: wrap; }
    .bullet-none.imoji-list li img { top: 10px !important}
    .bullet-none.imoji-list li span { width: 100%; flex-grow: 1;}
}