html, body{
    height: 100%;
}

body { 
        background-image: url(../images/background_small.jpg) ;
        background-position: center center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
        background-size:  cover;
        background-color: #999;
    
}

div, body{
    margin: 0;
    padding: 0;
    font-family: exo, sans-serif;
    
}

.insta { 
    width: 33px;
    height: 33px;
    float: right;
    padding: 5px;
}

.wrapper {
    height: 100%; 
    width: 100%; 
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15px;
    background: #525050;
    color:white;
    font-size: 10px;
    text-align: center;
    vertical-align: bottom;
}
.message {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%; 
    height:45%;
    bottom: 0; 
    display: block;
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 0.5em;
}

.container {
    width: 100%;
    max-width: 854px;
    min-width: 440px;
    background: #525050;
    margin: 20px auto;
}


#close {
    padding: 11px 15px;
    background: #4c4444;
    color: azure;
    display:inline-block;
    transition: background-color 0.5s ease;
}
#close:hover {
    background:#ccc;
    color:#fff;
}
#closeAd {
    padding: 2px 15px;
    background: #4c4444;
    color: azure;
    display:inline-block;
    transition: background-color 0.5s ease;
    float:left;
    z-index:99;
}
#closeAd:hover {
    background:#ccc;
    color:#fff;
}
.vid-container {
    position: relative;
    padding-bottom: 52%;
    padding-top: 30px; 
    height: 0; 
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vid-list-container {
    width: 50%;
    overflow: hidden;
    margin-top: 20px;
    margin-left:24%;
    padding-bottom: 20px;
}

.vid-list {
    width: 1344px;
    position: relative;
    top:0;
    left: 0;
}
.vid-item {
    display: block;
    width: 200px;
    height: 200px;
    float: left;
    margin: 0;
    padding: 10px;
}

.thumb {
    overflow:hidden;
    height: 140px;
}

.thumb img {
    width: 100%;
    position: relative;
    top: -13px;
}

.vid-item .desc {
    color: #21A1D2;
    font-size: 15px;
    margin-top:5px;
}
.arrows {
    position:relative;
    width: 100%;
}

.arrow-left {
    color: #fff;
    position: absolute;
    background: #777;
    padding: 15px;
    left: -25px;
    top: -130px;
    z-index: 99;
    cursor: pointer;
}

.arrow-right {
    color: #fff;
    position: absolute;
    background: #777;
    padding: 15px;
    right: -25px;
    top: -130px;
    z-index:100;
    cursor: pointer;
}
@media (max-width: 624px) {
    .arrows {
        position:relative;
        margin: 0 auto;
        width:96px;
    }
    .arrow-left {
        left: 0;
        top: -20px;
    }

    .arrow-right {
        right: 0;
        top: -20px;
    }
}

/* For width 800px and larger: */
/*@media only screen and (min-width: 800px) {*/
   #snackbar { 
        background-image: url('../images/severin_vacuum_728.jpg'); 
        width: 728px;
        height:90px;
        min-width: 728px; /* Set a default minimum width */
        margin-left: -362px; /* Divide value of min-width by 2 */
    }
/*}*/



/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    
    /*background-image: url('../images/severin_vacuum_728.jpg');*/
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    /*border-radius: 2px; *//* Rounded borders */
    /*padding: 16px;*/ /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}


#snackbar.ad2 {
    background-image: url('../images/severin_tantus_728.jpg'); 
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
    animation: fadein 0.5s, fadeout 0.5s 4s;
}

/* Banner For width smaller than 400px: */
@media screen and (max-device-width: 640px){
    #snackbar {
       /* @include background-2x( '../images/severin_vacuum_600', 'jpg', 300px, 50px, center center, repeat-x );*/

       background-image: url('../images/severin_vacuum_600.jpg'); 
            width: 600px;
            height:100px;
            min-width: 300px; /* Set a default minimum width */
            margin-left: -300px; /* Divide value of min-width by 2 */
    }
    #snackbar.ad2 {
        background-image: url('../images/severin_tantus_600.jpg'); 
        visibility: visible; /* Show the snackbar */

    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
        animation: fadein 0.5s, fadeout 0.5s 4s;
    }
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";
 
  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;
 
  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}