/*================================= 1 Reset Css ( #res ) =================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#D46300;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

/*================================= 2 Font Face ( #face ) =================================*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nerko One", cursive;
}

/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}
button::-moz-focus-inner {border: 0}
:focus {outline:none;border-color: #343434 !important;}
::-moz-focus-inner {border:0;}

ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}
img{max-width: 100%;}
button{cursor: pointer;}

.hide{display: none !important;}

.main_bg{background-image: url(../Images/swap-it/main-bg.jpg);background-repeat: no-repeat;background-size: cover;display: flex;flex-flow: column;justify-content: space-around;}
.main{height: 100vh;padding: 30px;padding: 30px 50px;overflow: hidden;}
.main.level_4{padding: 30px 90px;}

.logo{width: 550px;height: auto;margin: 0 auto;display: block;padding-top: 50px;}
.volume_btn{width: 60px;position: absolute;top: 20px;right: 20px;cursor: pointer;z-index: 20;}
.btn_wrapper{position: absolute;top: 20px;right: 20px;display: flex;flex-flow: column;z-index: 20;}
.btn_wrapper img{width: 70px;cursor: pointer;}
.main_bg, .game {

    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

}
.level_1{background-image: url(../Images/swap-it/level-1/level-1-bg.jpg);background-size: cover;background-position: bottom;}
.level_2{background-image: url(../Images/swap-it/level-2/level-2-bg.jpg);background-size: cover;background-position: bottom;padding: 30px 150px 120px;}
.level_3{background-image: url(../Images/swap-it/level-3/level-3-bg.jpg);background-size: cover;background-position: bottom;}
.level_4{background-image: url(../Images/swap-it/level-4/level-4-bg.jpg);background-size: cover;background-position: bottom;}
.level_5{background-image: url(../Images/swap-it/level-5/level-5-bg.jpg);background-size: cover;background-position: bottom;}
.container{display: flex;justify-content: space-between;max-width: 1680px;margin: 0 auto;flex-flow: column;height: 100%;}
.item_row{display: flex;align-items: center;justify-content: space-between;}
.item_row img{height: 150px;}
.level_3 .item_row img{height: 140px;}
.bottom_row.item_row img{cursor: pointer; }
.main .bottom_row.item_row img{z-index: 1;}
.main .bottom_row.item_row div{position: relative;}

.main .bottom_row.item_row div.sparkle::after{content: '';width: 100%;height: 100%;position: absolute;background-repeat: no-repeat;top: 0;left: 0;z-index: 2;background-size: contain;pointer-events: none}
.level_1 .bottom_row.item_row div.sparkle::after{background-image: url(../Images/swap-it/level-1/sparkle.gif);}
.level_2 .bottom_row.item_row div.sparkle::after{background-image: url(../Images/swap-it/level-2/sparkle2.gif);}
.level_3 .bottom_row.item_row div.sparkle::after{background-image: url(../Images/swap-it/level-3/sparkle3.gif);}
.level_4 .bottom_row.item_row div.sparkle::after{background-image: url(../Images/swap-it/level-4/sparkle4.gif);}
.level_5 .bottom_row.item_row div.sparkle::after{background-image: url(../Images/swap-it/level-5/sparkle5.gif);}


.level_wrapper{background-image: url(../Images/swap-it/path.png);background-repeat: no-repeat;background-size: cover;display: flex;align-items: center;justify-content: center;background-position: center;margin: 30px 0;padding: 0 60px;}
.level_wrapper li{position: relative;margin: 50px;cursor: pointer;}
.level_wrapper li:nth-child(even){top: -40px;left: 20px;}
.level_wrapper li:nth-child(odd){top: 20px;}
.level_wrapper li:nth-child(3){left: 30px;}
.level_wrapper li:nth-child(4), .level_wrapper li:nth-child(5){left: 80px;}
.star_wrapper, .lock_wrapper{position: absolute;top: -30px;left: 0;right: 0;text-align: center;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 20px;}
.star_wrapper img{width: 60px;animation: bounce2 2s ease infinite;}
.star_wrapper img:nth-child(2){animation-delay: 1s;}
.star_wrapper img:nth-child(3){animation-delay: 0.5s;}
.lock_wrapper img{width: 80px;animation: bounce2 2s ease infinite;}
@keyframes bounce2{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-15px)}60%{transform:translateY(-5px)}}

.popup.hide{display: none;opacity: 0;}
.popup{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;right: 0;margin: 0 auto;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.7);z-index: 99;opacity: 1;transition: all 0.5s ease;}
.popup .popup_content{position: absolute;top: 50%;transform: translateY(-50%);text-align: center;max-width: 500px;left: 0;right: 0;font-size: 58px;color: #272727;line-height: 65px;padding: 20px;margin: 0 auto;}
.popup .popup_btn{position: absolute;left: 0;right: 0;text-align: center;bottom: -20px;}
.popup .popup_btn img{width: 150px;margin: 0 10px;cursor: pointer;}
.popup_wrapper{animation: popout 1s ease-in-out 0.3s;max-width: 640px;position: relative;margin-top: -40px;}
@keyframes popout{0%{transform:scale(0.5) rotate(-20deg);opacity:0}50%{transform:scale(1.1) rotate(10deg);opacity:1}75%{transform:scale(0.9) rotate(-5deg)}100%{transform:scale(1) rotate(0deg)}}

@media (max-width:1680px){
    .item_row img{height: 120px;}
    .level_2{padding: 30px 130px 100px;}
    .level_2 .item_row img{height: 100px;}
    .level_3 .item_row img{height: 130px;}
    .level_wrapper li{margin: 26px;}
    .level_wrapper li:nth-child(4), .level_wrapper li:nth-child(5){left: 50px;}
    .lock_wrapper img, .star_wrapper img{width: 55px;}
}
@media (max-width:1420px){
    .lock_wrapper img, .star_wrapper img{width: 40px;}
}
@media (max-width:1280px){
    .item_row img{height: 80px;}
    .level_2{padding: 30px 70px 80px;}

    .level_2 .item_row img{height: 90px;}
    .level_3 .item_row img{height: 80px;}
    .lock_wrapper img, .star_wrapper img{width: 27px;}
    
    .logo{width: 400px;}
    .btn_wrapper img{width: 60px;}
}
@media (max-width:1023px){
    .item_row img{height: 50px;}
    .level_2{padding: 30px 50px 40px;}

    .level_2 .item_row img{height: 60px;}

    .level_3 .item_row img{height: 60px;}
    .logo {width: 340px;padding-top: 20px;}
    .star_wrapper, .lock_wrapper{top: -10px;padding: 11px;left: -10px;}
    .lock_wrapper img, .star_wrapper img{width: 20px;}
    .level_wrapper li {margin: 15px;}
    .level_wrapper li:nth-child(odd){top: 10px;left: -10px;}
    .level_wrapper li:nth-child(even){top: -25px;left: 0px;}
    .level_wrapper li:nth-child(3) {left: 10px;}
    .level_wrapper li:nth-child(4), .level_wrapper li:nth-child(5){left: 30px;}
    
    .btn_wrapper img, .volume_btn{width: 50px;}
    .popup_wrapper > img{width: 430px;}
    .popup .popup_content{font-size: 40px;line-height: 50px;}
    .popup .popup_btn img{width: 100px;}
} 
@media (max-width:767px){
    .item_row img{height: 55px;}
    .level_2{padding-bottom: 50px;}
    .logo{width: 300px;}
    .lock_wrapper img, .star_wrapper img{width:18px;}
    .star_wrapper, .lock_wrapper{top: -17px;padding: 14px;}
    .lock_wrapper img, .star_wrapper img{width: 18px;}
    .level_wrapper li {margin: 10px;}
    .level_wrapper li:nth-child(odd){top: 0;}
    .level_wrapper li:nth-child(even){top: -20px;left: 0;}
    .level_wrapper li:nth-child(3) {left: 10px;}
    .level_wrapper li:nth-child(4), .level_wrapper li:nth-child(5) {left: 20px;}  
    .popup_wrapper > img{width: 350px;}
    .popup .popup_btn{bottom: -10px;}
    .main.level_4{padding: 30px 60px;}
    .btn_wrapper img, .volume_btn{width: 30px;}
}

@media screen and (max-width: 767px) and (orientation: portrait){
    .level_wrapper{background-image: none;flex-wrap: wrap;padding: 0 20px;}
    .level_wrapper li{left: auto !important;top: auto !important;max-width: 100px;}
}
.rotate-message {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: white;padding: 20px;border-radius: 10px;z-index: 1000;text-align: center;font-size: 18px;line-height: 25px;font-family: "Nerko One", cursive;}
.portrait #back_btn,.portrait .container,.portrait #volumeIcon {display: none;}

.fruit {position: absolute;object-fit: contain; }