body{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main{
    flex: 1 0 auto;
}

.top{
    height: 200px;
    overflow: hidden;
    background-image: url(../img/web%20ui%20diag-01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;    
}

.hide{
    overflow: hidden;
}

.logo{
    height: 50px;
}
.brand-logo img{
    height: 90px !Important; 
}

.info{ 
    width: 100%;
}

/*the tabs*/

.indicator{
    height: 2px;
    background: white !Important;
}

.tabs .tab a{
    color: white !Important; 
}

.tabs .tab a:hover{
    color: gainsboro !Important;
}

.big-container{
    width: 90%;
    margin-left: 5%;
    padding: 0.5em;
}

.smaller{
    font-size: 18px !Important;
    line-height: 20px !Important;
}

.collection{
    z-index: -1 !Important;
}

/*the dark part*/

.every-info{
    height: 620px !Important;
    -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.75);
    width: 100%;
    overflow-y: scroll;
    z-index: -2;
}

.small{
    height: 200px;
    width: 200px;  
}

.back{
    background: none;
}

.back:hover{
    background: #e6e6e6;
    -webkit-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
     -o-transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */

    -webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    -o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
}

.icons{
    margin: 15px auto;
    width: 80px ;
    height: 80px;
    overflow: hidden;
    text-align: center;  
}

.icons:hover{
    transform: scale(1.5);
    -webkit-transition: all 1000ms cubic-bezier(0.610, 0, 0.045, 1.000); /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.610, -0.405, 0.045, 1.000);
    -moz-transition: all 1000ms cubic-bezier(0.610, -0.405, 0.045, 1.000);
    -o-transition: all 1000ms cubic-bezier(0.610, -0.405, 0.045, 1.000);
    transition: all 1000ms cubic-bezier(0.610, -0.405, 0.045, 1.000); /* custom */

    -webkit-transition-timing-function: cubic-bezier(0.610, 0, 0.045, 1.000); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.610, -0.405, 0.045, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.610, -0.405, 0.045, 1.000);
    -o-transition-timing-function: cubic-bezier(0.610, -0.405, 0.045, 1.000);
    transition-timing-function: cubic-bezier(0.610, -0.405, 0.045, 1.000); /* custom */
}