.logo{
    height: 70px;
}

.button-icons{
    margin-right: 10px;
}

.buttons-startpage{
    margin-left:30px;
}

.my-list{
    list-style: none;
    margin-left: -30px;
}

.logo-on-scroll{
    -webkit-filter: invert(90%);
}

h4.stories{
    margin-top: 20px;
}


.img-hover{
    -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -o-transition: all .3s ease; /* IE 9 */
    -ms-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
}

.img-hover:hover{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:translatZ(0) scale(1.05); /* Opera */
    transform:translatZ(0) scale(1.05);
}

.details-modal-bg{
     background-image: url("../img/artificial-intelligence-3382507_640.png");
     --background-color: #0a0a0a;
 }

.stories-modal-bg{
    background-image: url("../img/car1.jpg");
    --background-color: #0a0a0a;
}

.modal-text-bg{
    background-color: #0b0b0b;
    background: rgba(0, 0, 0, 0.8);
}

.db-images{
    height: 200px;
}

.white-link{
    color:white;
}


.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.my-hr{
    width: 100%;
}



/* make keyframes that tell the start state and the end state of our object */
/*

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; !* IE9 only *! } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; !* IE9 only *! } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; !* IE9 only *! } to { opacity:1; } }

.fade-in {
    opacity:0;  !* make things invisible upon start *!
    -webkit-animation:fadeIn ease-in 1;  !* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time *!
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  !* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*!
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.fade-in.two {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay:0.4s;
    animation-delay: 0.4s;
}

.fade-in.three {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.fade-in.fourth {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.fade-in.fifth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

.fade-in.sixth {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay:1.2s;
    animation-delay: 1.2s;
}

.fade-in.seventh {
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
.fade-in.eight {
    -webkit-animation-delay: 1.6s;
    -moz-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.fade-in.nine {
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.fade-in.ten {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}
*/

/*---make a basic box ---*/