@font-face
{
    font-family: gosmick;
    src: url('font/GosmickSans.ttf');
}

@font-face
{
    font-family: berlin;
    src: url('font/BerlinSans.ttf');
}

body{
    background: linear-gradient(90deg, #180b00 5%, #371b03 50%, #180b00 95%);
}

.toe-main-container
{
    //
    background-color: rgba(255,255,255,.1);
    width: 80%;
    max-width: 1000px;
    min-width: 250px;
    margin: 0 auto;
}

.toe-header
{
    color: #bababa;
    font-family: berlin;
    font-size: 3rem;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    margin: 0 auto;
}

.toe-header img
{
    width: 100%;
}

.toe-horizontal-border
{
    /*    border-image: url("img/border-white.png") 100 round;
        border-top: 25px;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;*/
}

.toe-horizontal-border:before
{
    background-image: url("orb-blue.png");
    width: 50px;
    height: 50px;
    display: block;
}

.toe-item-block
{
    min-height: 350px;
    margin: 20px 0;
    border: 25px;
    padding: 5px;
}

.thin-block
{
    min-height: 200px !important;
}

.toe-item-block:nth-child(odd)
{
    //background-color: pink;
}

.toe-item-block:nth-child(odd) .toe-image-block
{
    width: 35%;
    //
    background-color: cyan;
    float: left;
    padding: 50 25 0;
    text-align: center;
}

.toe-item-block:nth-child(odd) .toe-text-block
{
    font-family: gosmick;
    color: #bababa;
    font-size: 1.3rem;
    text-align: left;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}

.toe-item-block:nth-child(odd) .toe-subtitle
{
    font-family: berlin;
    font-size: 2em;
    text-align: left;
    padding-top: 50px;
}

.toe-item-block:nth-child(even)
{
    //background-color: yellow;
}

.toe-item-block:nth-child(even) .toe-image-block
{
    width: 35%;
    //
    background-color: cyan;
    float: right;
    padding: 75 50 25 0;
    text-align: center;
}

.toe-item-block:nth-child(even) .toe-text-block
{
    font-family: gosmick;
    color: #bababa;
    font-size: 1.3rem;
    text-align: left;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}

.toe-item-block:nth-child(even) .toe-subtitle
{
    font-family: berlin;
    font-size: 2rem;
    text-align: left;
    padding-top: 50px;
    padding-left: 50px;
}

.toe-image-block img
{
    width: 100%;
}

.fire
{
    color: #F4C026;
}

.water
{
    color: #9FDBEC;
}

.forest
{
    color: #8CC640;
}

.rock
{
    color: #989898;
}

.toe-footer-item-block
{
    min-height: 100px;
    margin: 20px 0;
    color: #bababa;
    font-family: gosmick;
    font-size: 1.3rem;
    padding: 50px;
}

.toe-buy-block
{
    font-family: berlin;
    width: 100%;
}

.toe-buy-button
{
    font-size: 3rem;
    margin: 0 auto;
    text-align: center;
    width: 50%;
    cursor: pointer;
}

.toe-buy-button img
{
    width: 100%;
}

.toe-footer
{
    color: #ffffff;
    font-size: .8rem;
    font-family: gosmick;
    margin-top: 50px;
    padding-left: 50px;
}

.border-blue
{
    border-image: url("img/border-blue.png") 100 round;
}

.border-green
{
    border-image: url("img/border-green.png") 100 round;
}

.border-red
{
    border-image: url("img/border-red.png") 100 round;
}

.border-gray
{
    border-image: url("img/border-gray.png") 100 round;
}

.border-white
{
    border-image: url("img/border-white.png") 100 round;
}

.clear
{
    width: 100%;
    clear: both;    
}

.tiny-image
{
    padding: 0 !important;
}

.tiny-image img
{
    width: 80%;
    padding: 0;
}

.intro-text p 
{
}