/* Stylesheets import
-------------------------------*/
@import url('normalize.min.css');
@import url('flip.css');
@import url('bootstrap.min.css');
@import url('animate.min.css');


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    padding-bottom: 40px;
    padding-top: 100px;
    color: #0f0f0f;
    /* Margin bottom by footer height */
    margin-bottom: 25px;
}

html {
    position: relative;
    min-height: 100%;
}

.page-wrapper{
    height: auto;
}

.footer {
    position: absolute;
    padding: 20px;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

.featurette img {
    -webkit-box-shadow: 0px 0px 18px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 18px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 18px 0px rgba(50, 50, 50, 0.75);
}

.featurette .firm {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow:    0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow:         0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.thumbnails {
    min-height: 500px;
}


.thumbnails img {
    -moz-opacity:0.1;
    -khtml-opacity: 0.1;
    opacity: 0.1;
    filter: alpha(opacity=10); /* For IE8 and earlier */
    max-height: 200px;
}
.product-description {
    position: absolute;
    z-index: 1;
}
.products-wrapper{

    padding: 5px;
}


.center{
    text-align: center;
    margin: 0 auto;
}


.logo {
    min-height: 480px;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}

.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}

.navbar-wrapper .navbar .container {
    width: auto;
}

/* Featurettes
------------------------- */

.featurette-divider {
    margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}


/* CUSTOMIZE CSS ANIMATIONS
-------------------------------------------------- */
#products {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}





/* RESPONSIVE CSS
-------------------------------------------------- */
.back .lead{
    margin-left: -50px;
}

@media (min-width: 768px) {
    /* Navbar positioning foo */

    .navbar-wrapper {
        margin-top: 20px;
    }
    .navbar-wrapper .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }

    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
        border-radius: 4px;
    }

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }

}

@media (min-width: 992px) {
    .featurette-heading {
        margin-top: 0px;
    }
}

@media (max-width: 480px) {
    .back .lead{
        margin-left: 50px;
    }

    .flip-container, .front, .back {
        width: 300px;
        height: 250px;
    }

    .logo {
        min-height: 380px;
    }

}