/* to allow text positioning in the divs */
.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
}
.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
}
.topright {
    position: absolute;
    top: 8px;
    right: 16px;
}
.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
}
.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.avalogridbox {
    min-height: 280px;
}

.takaisin {
    margin-top: 10px;
}

/* common stuff for the image divs */
.avalodiv {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    color: #A9F5F2;
    transition: all .25s ease;
}
/* common stuff for the image divs */
.avalodivnohover {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    color: #A9F5F2;
    transition: all .25s ease;
}
.avalodiv:hover {
    color: #A9F5F2;
    border-style: solid;
    border-width: 3px;
    border-color: #A9F5F2;
    transition: all .25s ease;
}

/* paragraph style inside the image divs. */
.avaloimagep {
    /* font-family: arial, sans-serif; */
    cursor: pointer;
}

/* https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive#28265444 */
.carousel-inner img {
  margin: auto;
}
.carousel-inner p {
    text-align: center;

}

.avaloimagetitle {
    /* font-family: arial, sans-serif; */
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 0px;
}

/* fillfb div is used only for the FB cell*/ 
.fillfb {
    min-height: 500px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    color: #A9F5F2;
    transition: all .25s ease;

    background-position: center center;
    background-image: url('../images/fb/FB-FindUsonFacebook-online-1024.png');
}
.fillfb:hover {
    cursor: pointer;
    color: #A9F5F2;
    border-style: solid;
    border-width: 3px;
    border-color: #A9F5F2;
    transition: all .25s ease;
}

.fillfb_small {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 70%;
    color: #A9F5F2;
    transition: all .25s ease;

    background-position: center center;
    background-image: url('../images/fb/FB-FindUsonFacebook-online-1024.png');
}
.fillfb_small:hover {
    cursor: pointer;
    color: #A9F5F2;
    border-style: solid;
    border-width: 3px;
    border-color: #A9F5F2;
    transition: all .25s ease;
}

.fillyt_small {
    overflow: hidden;
    color: #A9F5F2;
    transition: all .25s ease;

    background-position: center center;
    background-image: url('../images/public/stars-moving.gif');
    background-repeat: no-repeat;

    /*
    background-position: center center;
    background-size: 15%;
    background-image: url('../images/google/YouTube-icon-full_color.png');
     */    
}
.fillyt_small:hover {
    cursor: pointer;
    color: #A9F5F2;
    border-style: solid;
    border-width: 3px;
    border-color: #A9F5F2;
    transition: all .25s ease;
}




.hovertext {
    /*    visibility:hidden; */
    opacity: 0.0;
    margin-top: 4px;
    transition: all .0s ease;
    opacity: 0.0;
}
.avalodiv:hover .hovertext {
/*    visibility:visible; */
    opacity: 1.0;
    transition: all .25s ease;
}


/* fillfb div is used only for the FB cell*/ 
.fillyt {
    min-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    color: #A9F5F2;
    transition: all .25s ease;

    background-position: center center;
    background-image: url('../images/fb/FB-FindUsonFacebook-online-1024.png');
}
.fillyt:hover {
    cursor: pointer;
    color: #A9F5F2;
    border-style: solid;
    border-width: 3px;
    border-color: #A9F5F2;
    transition: all .25s ease;
}