.fade-in {
    -webkit-animation: fadein 1.6s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.6s; /* Firefox < 16 */
        -ms-animation: fadein 1.6s; /* Internet Explorer */
         -o-animation: fadein 1.6s; /* Opera < 12.1 */
            animation: fadein 1.6s;
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@media (min-width: 768px) {
    .productpreview {
        position: sticky;
        top: 0;
    }

}

.btn {
    border-radius: 2px;
    color: #fff;
    border-color: #29c68c;
    background: #29c68c;
    outline: none;
}

.jumbotron {
    color: black;
    background-image: url("../img/heroimage.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
  }

.heroimage {
    text-align:end;
}
.logoVisible{
    display: none;
}

@media (max-width: 768px) {
    .logoVisible{
        display: inherit;
    }
    .carousellVisible{
        display: none !important;
    }

    .herotext {
        margin-top: 10vh;
    }
}
strong {
    font-weight: bold;
}

footer {
    background-color: #23282d;
    color: white;
    bottom: 0;
    width: 100%;
}

footer h5 {
    color:#999;

}

footer ul {
    padding: 0;
}
footer ul > li {
    text-decoration: none;
    list-style: none;
}

.navbar,
.navbar-toggler-icon{
    background-image: url("../img/menu.png");
    font-weight: bold;
}

.navbar{
    margin-bottom: 2vh;
}

.navbar a{
    color: rgb(37, 37, 37);
}

.thumbnail:hover {
    box-shadow: 0 0 2vw rgba(33, 33, 33, 0.2)
}
.thumbnail img{
    width: 100%;
}

.productpreview img {
    width: 25vh;
    height: 25vh;
}

.form-control {
    box-shadow: none;
    border-radius: 4px;
    border-color: #dfe3e8;
}
.form-control:focus {
    border-color: #29c68c;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.navbar-header.col {
    padding: 0 !important;
}	
.navbar {
    background: #fff;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid #dfe3e8;
    border-radius: 0;
}

.navbar-brand a,
.navbar-brand{
    color: #24aa79;
}

.navbar .navbar-brand {
    font-size: 20px;
    padding-left: 0;
    padding-right: 50px;
}

.navbar-img {
    width: 40px;
}

.navbar a:hover,
.navbar .navbar-brand b {
    font-weight: bold;
    color: #24aa79;
}
.navbar ul.nav li a {
    color: #999;
}
.navbar ul.nav li a:hover, .navbar ul.nav li a:focus {
    color: #29c68c !important;
}
.navbar ul.nav li.active > a, .navbar ul.nav li.open > a {
    color: #26bb84 !important;
    background: transparent !important;
}
.navbar .form-inline .input-group-addon {
    box-shadow: none;
    border-radius: 2px 0 0 2px;
    background: #f5f5f5;
    border-color: #dfe3e8;
    font-size: 16px;
}
.navbar .form-inline i {
    font-size: 16px;
}
.navbar .form-inline .btn {
    border-radius: 2px;
    color: #fff;
    border-color: #29c68c;
    background: #29c68c;
    outline: none;
}
.navbar .form-inline .btn:hover, .navbar .form-inline .btn:focus {
    border-color: #26bb84;
    background: #26bb84;
}
.navbar .search-form {
    display: inline-block;
}
.navbar .search-form .btn {
    margin-left: 4px;
}
.navbar .search-form .form-control {
    border-radius: 2px;
}
.navbar .login-form .input-group {
    margin-right: 4px;
    float: left;
}
.navbar .login-form .form-control {
    max-width: 158px;
    border-radius: 0 2px 2px 0;
}    	
.navbar .navbar-right .dropdown-toggle::after {
    display: none;
}
.navbar .dropdown-menu {
    border-radius: 1px;
    border-color: #e5e5e5;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar .dropdown-menu li a {
    padding: 6px 20px;
}
.navbar .navbar-right .dropdown-menu {
    width: 505px;
    padding: 20px;
    right: auto;
    right: 0;
    font-size: 14px;
}
@media (min-width: 1200px){
    .search-form .input-group {
        width: 300px;
        margin-left: 30px;
    }
}
@media (max-width: 768px){
    .navbar .navbar-right .dropdown-menu {
        width: 100%;
        background: transparent;
        padding: 10px 20px;
    }
    .navbar .input-group {
        width: 100%;
        margin-bottom: 15px;
    }
    .navbar .input-group .form-control {
        max-width: none;			
    }
    .navbar .login-form .btn {
        width: 100%;
    }
}