/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

.pre-loader {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999991;
background-color: var(--wdtBodyBGColor);
}

.loader-inner {
text-transform:uppercase;
width:100%;
text-align:center;
line-height:50px;
margin:auto;
position:absolute;
left:0;right:0;top:50%;
transform:translateY(-50%);
}

.cooking-pl {
margin: auto;
width: 12em;
height: 12em;
}
.cooking-pl__drop, .cooking-pl__drop-inner, .cooking-pl__pan, .cooking-pl__ring, .cooking-pl__shadow {
animation: pan 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.cooking-pl__drop {
transform-origin: 13px 60px;
}
.cooking-pl__drop-inner {
animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);
}
.cooking-pl__drop--1 {
animation-name: drop-1;
}
.cooking-pl__drop--1 .cooking-pl__drop-inner {
animation-name: drop-1-inner;
}
.cooking-pl__drop--2 {
animation-name: drop-2;
}
.cooking-pl__drop--2 .cooking-pl__drop-inner {
animation-name: drop-2-inner;
}
.cooking-pl__drop--3 {
animation-name: drop-3;
transform-origin: 67px 72px;
}
.cooking-pl__drop--3 .cooking-pl__drop-inner {
animation-name: drop-3-inner;
}
.cooking-pl__drop--4 {
animation-name: drop-4;
transform-origin: 67px 72px;
}
.cooking-pl__drop--4 .cooking-pl__drop-inner {
animation-name: drop-4-inner;
}
.cooking-pl__drop--5 {
animation-name: drop-5;
transform-origin: 67px 72px;
}
.cooking-pl__drop--5 .cooking-pl__drop-inner {
animation-name: drop-5-inner;
}
.cooking-pl__pan {
transform-origin: 36px 74px;
}
.cooking-pl__ring {
animation-name: flip-ring;
}
.cooking-pl__shadow {
animation-name: pan-shadow;
transform-origin: 36px 124.5px;
}

/* Animation */

@keyframes drop-1 
{
  from {animation-timing-function: steps(1, end);transform: translate(0, 0);visibility: hidden;}
  30% {animation-timing-function: linear;transform: translate(0, 0);visibility: visible;}
  50%, to {transform: translate(-6px, 0);}
}
@keyframes drop-1-inner 
{
  from, 30% {fill: var(--wdtPrimaryColor);transform: translate(0, 0);}
  50%, to {fill: rgba(171, 175, 186, 0);transform: translate(0, -27px);}
}
@keyframes drop-2 
{
  from {animation-timing-function: steps(1, end);transform: translate(0, 0);visibility: hidden;}
  30% {animation-timing-function: linear;transform: translate(0, 0);visibility: visible;}
  50%, to {transform: translate(-8px, 0);}
}
@keyframes drop-2-inner 
{
  from, 30% {fill: var(--wdtPrimaryColor);transform: translate(0, 0);}
  50%, to {fill: rgba(171, 175, 186, 0);transform: translate(0, -9px);}
}
@keyframes drop-3 
{
  from {animation-timing-function: steps(1, end);transform: translate(0, 0);visibility: hidden;}
  78% {animation-timing-function: linear;transform: translate(0, 0);visibility: visible;}
  98%, to {transform: translate(-24px, 0);}
}
@keyframes drop-3-inner 
{
  from, 78% {fill: var(--wdtPrimaryColor);transform: translate(0, 0);}
  98%, to {fill: rgba(171, 175, 186, 0);transform: translate(0, -28px);}
}
@keyframes drop-4 
{
  from {animation-timing-function: steps(1, end);transform: translate(0, 0);visibility: hidden;}
  78% {animation-timing-function: linear;transform: translate(0, 0);visibility: visible;}
  98%, to {transform: translate(-8px, 0);}
}
@keyframes drop-4-inner 
{
  from, 78% {fill: var(--wdtPrimaryColor);transform: translate(0, 0);}
  98%, to {fill: rgba(171, 175, 186, 0);transform: translate(0, -36px);}
}
@keyframes drop-5 
{
  from {animation-timing-function: steps(1, end);transform: translate(0, 0);visibility: hidden;}
  78% {animation-timing-function: linear;transform: translate(0, 0);visibility: visible;}
  98%, to {transform: translate(8px, 0);}
}
@keyframes drop-5-inner 
{
  from, 78% {fill: var(--wdtPrimaryColor);transform: translate(0, 0);}
  98%, to {fill: rgba(171, 175, 186, 0);transform: translate(0, -32px);}
}
@keyframes flip-ring 
{
  from, 27% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);stroke-dashoffset: 20;stroke-width: 4px;}
  53.5% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);stroke-dashoffset: -100;stroke-width: 10px;}
  80%, to {stroke-dashoffset: -220;stroke-width: 4px;}
}
@keyframes pan 
{
  from, 88%, to {transform: translate(0, 0) rotate(0);}
  20% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);transform: translate(-5px, 0) rotate(-30deg);}
  30% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);transform: translate(0, 0) rotate(20deg);}
  60%, 78% {animation-timing-function: linear;transform: translate(0, 0) rotate(0);}
  81.33% {animation-timing-function: linear;transform: translate(0, 4px) rotate(0);}
  84.67% {animation-timing-function: linear;transform: translate(0, -2px) rotate(0);}
}
@keyframes pan-shadow 
{
  from, 88%, to {fill: rgba(115, 122, 140, 0.2);transform: scaleX(1);}
  20% {animation-timing-function: cubic-bezier(0.33, 0.16, 0.67, 0.16);fill: rgba(115, 122, 140, 0.2);transform: scaleX(0.77);}
  30% {animation-timing-function: cubic-bezier(0.33, 0.84, 0.67, 0.84);fill: rgba(115, 122, 140, 0.2);transform: scaleX(1);}
  60%, 78% {animation-timing-function: linear;fill: rgba(115, 122, 140, 0.2);transform: scaleX(1);}
  81.33% {animation-timing-function: linear;fill: rgba(115, 122, 140, 0.25);transform: scaleX(0.87);}
  84.67% {animation-timing-function: linear;fill: rgba(115, 122, 140, 0.225);transform: scaleX(1.065);}
}


/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .loader-inner .loader-text:after { background-color: var(--wdtPrimaryColor); }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

/*----*****---- << Mobile (Landscape) >> ----*****----*/

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}


/* Common Styles for the devices below 479px width */

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

}