.logo-container{
    display: block;
    width: 100%;
    padding: 50px 15px;
    padding-bottom: 0px;
    text-align: center;
    overflow: hidden;
    border: 0px solid #000000;
}
.logo-box-home{
    display: block;
    box-sizing: border-box;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

@keyframes left{
    from{
        position: relative;
        left: -1000px;
    }
    to{
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }
}

@keyframes right{
    from{
        position: relative;
        left: 1000px;
    }
    to{
        position: relative;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

#logo-home-left{
    width: 30%;
    position: relative;
    left: -1000px;
    animation-name: left;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

#logo-home-right{
    width: 70%;
    position: relative;
    left: 1000px;
    animation-name: right;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/**
@keyframes example {
    0%   {
        background-image: url("/images/4.png");
        position: relative;
        right:-1500px; 

    }
    25%   {
        left:0px; 
        top:0px;
    }
    50%   {
        background-color:red;
        left:0px; 
        top:0px;
    }
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }
  **/

/** border: 1px solid #ffffff; **/

.home-slideshow-cont{
    display: block;
    width: 100%;
    max-width: 1024px;
    height: 500px;
    overflow: hidden;
    border-radius: 3px;
    padding-top: 500px;
    box-sizing: border-box;
    overflow: hidden;
}
.home-slideshow-text-container h1{
    margin: 20px 0;
}
.home-slideshow-text-container{
    z-index: 2;
    position: absolute;
    padding: 25px;
    width: 60%;
    max-width: 1024px;
    background-color: #000000;
    opacity: 0.5;
    margin-top: 40px;
}

.home-slideshow-text p{
    text-align: justify;
}
.home-slideshow-text h1{
    font-size: 50px;
    text-align: center;
}
.home-slideshow-image-box{
    width: 4000px;
    position: relative;
}
#shop-online{
    float: right;
}
.home-slideshow-image-box img{
    width: 1024px;
    display: inline;
    float: left;
    position: relative;
    top: -500px;
    animation-name: home-slideshow;
    animation-duration: 30s;
    animation-iteration-count: infinite;
} 

@keyframes home-slideshow{
    from{
        position: relative;
        left: -2250px;
        z-index: 2;
    }
    to{
        position: relative;
        left: 0px;
        z-index: 2;
    }
}


@media screen and (min-width: 321px) and (max-width: 700px){
    #logo-home-left{
        width: 50%;
        animation-delay: 0s;
    }
    .logo-box-home{
        width: 100%;
    }
    .home-slideshow-cont{
        box-sizing: border-box;
        margin: 0px;
        margin-bottom: 50px;
        padding: 0px
        margin: 0px;
    }
    .home-slideshow-text-container{
        box-sizing: border-box;
        padding: 0px
        margin: 0px;
        width: 100%;
        margin-top: 0px;
    }
    .home-slideshow-text{
        box-sizing: border-box;
        padding: 0px
        margin: 0px;
    }
    .home-slideshow-text h1{
        font-size: 35px;
    }
}