@font-face {
    font-family: 'bobba_tearegular';
    src: url('../fonts/bobba_tea-webfont.woff2') format('woff2'),
         url('../fonts/bobba_tea-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body 
{
    font-family: 'bobba_tearegular';
    background-image: url('../images/sfondo.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;

    overflow-x: hidden;
}

.topper
{
    margin-top: 10%;
}

.toastimages
{
    width: 90%;
}

.toast1,.toast2,.toast3,.toast4
{
    position: relative;
    width: 45%;
}

.toast1
{
    top:10%;
    left: 20%;
    
}

.toast2
{
    top: 24%;
    left: 6%;
}

.toast3
{
    top: -27%;
    width: 65%;
}

.toast4
{
    top: -44%;
    width: 65%;
}

.toastlinks
{
    display: inline-block;
    margin-top: -4%;
}

.toastlinks img
{
    width: 15%;
    padding: 1%;
}

.bigger
{
    margin-top: -5%;
}

.linkrow
{
    position: relative;
    top: -21%;
}

.toastlinksicons img
{
    width: 9%;
    padding: 1%;
    margin-left: 3%;
    margin-right: 3%;
}

.second
{
    margin-bottom: -10%;
}

.topper2
{
    margin-top: 5%;
}

.mintbox
{
    width: 40%;
}

.ketchup
{
    margin-top: 5%;
    margin-right: 15%;
    width: 61%;
}

.story
{
    width: 90%;
}

.rarities
{
    width: 100%;
}

.nachos
{
    margin-top: 12%;
    width: 25%;
}

.storytext
{
    color: #21007A;
    font-size: 3vw;
}

.jam
{
    margin-top: -79%;
    margin-right: 4%;
    width: 30%;
}

.sushi
{
    width: 19%;
}

.whitetoast
{
    margin-top: -22%;
    margin-right: 4%;
    width: 30%;
}

.roadmap
{
    width: 100%;
}

.egg
{
    margin-top: -7%;
    width: 27%;
}

.bubble
{
    width:120%;
    margin-left:-10%;
    height: 120%;
    background-image: url('../images/bubble.png');
    
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bubbleleft
{
    color: #5700B5;
    font-size: 9vw;
}

.bubbleright
{
    
    color: #7C4EF5;
    font-size: 1.7vw;
    margin-left: -4%;
}


.rainbowtoast
{
    margin-top: -22%;
    margin-left: 11%;
    width: 46%;
}

.toaster
{
    height: auto;
    width: 100%;

}

.pinktoast
{
    margin-top: -7%;
    margin-left: 19%;
    width: 38%;
}


.team
{
    width: 100%;
}

.shrimp
{
    margin-top: -22%;
    margin-left: 11%;
    width: 33%;
}

.brown
{
    margin-top: -18%;
    margin-left: 19%;
    width: 31%;
}

.teamers
{
    display: inline;
    margin: 3%;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 19%;
}
.item img {
 width: 100%;
 margin-bottom: -13%;
}
.caption {
    display: block;
    font-size: 3.5vw;
    color: #4D15B3;
}

.caption2
{
    display: block;
    font-size: 2.5vw;
    color: #7735BA;
}

div.itemz {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 60%;
}
.itemz img {
 width: 100%;
 margin-bottom: -13%;
}
.captionz {
    display: block;
    font-size: 5vw;
    background-color:rgba(0, 0, 0, 0.5);
}

.caption2z
{
    display: block;
    font-size: 4vw;
    color: #FFF;
    background-color:rgba(0, 0, 0, 0.5);
}

.common
{
    color: #FFF;

}

.uncommon
{
    color: #1eff00;

}

.rare
{
    color: #0070dd;
}

.epic
{
    color: #a335ee;
}

.legendary
{
    color: #ff8000;
}

.mythic
{
    color: #FFFF00;
}

.toastslide
{
    
}

.bubble li:not(:last-child) { 
   margin-bottom: 3px;  
}

.flexer
{
    align-items: center;
    display: flex;
    justify-content: center;
}

.heighter
{
    height: 100%;
}

.correction{
    height: 430px;
}

.teamtext
{
    display: inline-block;
    color: #FFF;
   
}

.teamicon
{
    width:10%;
}

.opak{ opacity: 0.7; }



.linkrow2
{
    position: relative;
    top: -52%;
}

.smaller
{
    transform: scale(2);
}

.footer
{
    margin-top: 10%;margin-bottom: 4%;
}

.arrows
{
    width: 100%;
}

.overarrow
{
    font-size: 0;
    line-height: 0;
    z-index:100;

    position: absolute;
    

    display: block;
    top: 0%;
    width: 10%;
    margin-top: -10px;
    padding: 0;

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.arrleft
{
    left: -77px;
}
.arrright
{
    right: -77px;
    left: auto;
}



@media (max-width: 1400px) { 
 .correction{
        height: 300px;
    }
}

@media (max-width: 1200px) { 
 .correction{
        height: 260px;
    }
}

@media (max-width: 1000px) { 
 .correction{
        height: 220px;
    }
}


@media (max-width: 800px) { 
 .correction{
        height: 180px;
    }

.bubble
{
    width: 180%;
    margin-left: -40%;
}

  .bubbleleft
{
    font-size: 11vw;
}

.bubbleright
{
    margin-top: 4%;
    font-size: 2.2vw;

}

.bubble li:not(:last-child) { 
   margin-bottom: 0px;  
}

}


@media (max-width: 722px) { 
    .bubbleleft{ padding-left: 12%; }
    .arrleft
    {
        left: -47px;
    }
    .arrright
    {
        right: -47px;
        left: auto;
    }

    .correction{
        height: 180px;
    }
}

@media (max-width: 576px) { 
 .correction{
        height: 150px;
    }

}
@media (max-width: 530px) { 
   .correction{
        height: 150px;
    }
}

@media (max-width: 460px) { 
      .correction{
        height: 130px;
    }
}