.mainmenu-wrapper { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.mainmenu-btn { text-align: center; width: 60%; }
.mainmenu-btn img { margin: 10px; width: 32%; /*box-shadow: 0 1px 5px #666666; filter: contrast(100%);*/ }
.mainmenu-btn img:hover { /*box-shadow: 0 1px 5px blueviolet; filter: contrast(150%);*/ -webkit-transform: scale3d(1.03, 1.03, 1); -moz-transform: scale3d(1.03, 1.03, 1); -ms-transform: scale3d(1.03, 1.03, 1); -o-transform: scale3d(1.03, 1.03, 1); }
.mainmenu-btn .mainmenu-corner-l { border-radius: 55px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 55px; }

.titie-page { display: block;  margin: 0 auto 30px auto; font-size: 300%; width: 80%; border-bottom: 9px solid #07305c; text-align: center; color: #07305c; }

.titie-page { display: block;  margin: 10px auto 30px auto; padding: 10px 5px; width: 80%; border-bottom: 9px solid #07305c; text-align: center; }
.titie-page img { height: 100px; }

.opening-vdo-btn { margin: 20px auto; padding: 10px; width: 250px; text-align: center; background: #12609B; box-shadow: 0 2px 5px #AAA; border-radius: 9px; color: #FFF; font-weight: bold;  cursor: pointer; }
.opening-vdo-btn:hover { background: burlywood; color: #000000; }

.bookshelves-wrapper { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; overflow: hidden; }
.bookshelves-container { float: left; margin: 8px; padding: 0; width: 23%; }
.bookshelves-bg { margin: 8px auto; width: 90%; height: 290px; border: 12px solid #12609B; }
.bookshelves-container:hover .bookshelves-bg { border: 12px solid burlywood; }
.bookshelves-title { margin: -280px auto 8px auto; height: 20px; padding: 0 12px; width: 90%; font-size: 110%; text-align: center; color: #12609B; font-weight: bold; }
.bookshelves-title a { color: #58595B; }
.bookshelves-container:hover .bookshelves-title a { color: #12609B; text-decoration: underline; }
.bookshelves-thumb { margin: 0; padding: 0; width: 100%; text-align: center; }
.bookshelves-thumb img { width: 90%; margin: 5px 0; width: 220px; box-shadow: 0 0 5px #999999; border-radius: 3px; overflow: hidden; }
.bookshelves-container:hover .bookshelves-thumb img, .bookshelves-thumb img:hover {  box-shadow: 0 1px 5px darkgoldenrod; filter: contrast(150%); -webkit-transform: scale3d(1.07, 1.07, 1); -moz-transform: scale3d(1.07, 1.07, 1); -ms-transform: scale3d(1.07, 1.07, 1); -o-transform: scale3d(1.07, 1.07, 1);  }
.bookshelves-vdo-btn { margin: 4px auto; text-align: center; z-index: 100; font-size: 90%; color: #3E7BE5; }
.bookshelves-vdo-btn img { width: 20px; box-shadow: 0 0 5px #666; border-radius: 50%; }
.bookshelves-date { margin: 8px auto; width: 90%; text-align: center; color: #58595B; height: 55px; font-size: 90%; }

.sponser-wrapper { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; border-top: 1px solid #dddddd; }
.sponser-thumb { margin: 5px auto; padding: 0; text-align: center; width: 80%; /* border-top: 1px solid #dddddd; */ }
.sponser-thumb img { margin: 0 8px; height: 35px; }
.sps-premium img { height: 50px; }
.sps-gold img { height: 40px; }
.sps-silver img { height: 35px; }

.exhibition-wrapper { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; overflow: hidden;  }
.exhibition-thumb { margin: 5px auto; padding: 0; text-align: center; width: 95%;  }
.exhibition-thumb img { margin: 8px; }
.exh-premium img { height: 200px; }
.exh-gold img { height: 150px; }
.exh-silver img { height: 120px; }
.exh-premium img:hover, .exh-gold img:hover, .exh-silver img:hover { filter: contrast(150%); -webkit-transform: scale3d(1.3, 1.3, 1); -moz-transform: scale3d(1.3, 1.3, 1); -ms-transform: scale3d(1.3, 1.3, 1); -o-transform: scale3d(1.3, 1.3, 1); box-shadow: inset 0 0 50px #BBBBBB; border-radius: 20px; border-bottom: 1px solid #999; }

@media only screen and (min-width: 1441px) and (max-width: 1680px) {

.mainmenu-btn { width: 70%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 65px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 65px; }

}


@media only screen and (min-width: 1281px) and (max-width: 1440px) {

.mainmenu-btn { width: 52%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 48px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 48px; }

}


@media only screen and (min-width: 1025px) and (max-width: 1280px) {

.mainmenu-btn { width: 95%; }
.mainmenu-btn img { width: 20%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 48px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 48px; }

}


@media only screen and (min-width: 769px) and (max-width: 1024px) {

.mainmenu-btn { width: 80%; }
.mainmenu-btn img { width: 35%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 55px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 55px; }

.bookshelves-container { width: 30%; }
.bookshelves-thumb img { width: 200px; }

}


@media only screen and (min-width: 481px) and (max-width: 768px) {

.mainmenu-btn { width: 100%; }
.mainmenu-btn img { width: 40%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 62px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 62px; }

.bookshelves-container { width: 45%; }

}


@media only screen and (max-width: 480px) {

.mainmenu-btn { width: 100%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 35px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 35px; }
.mainmenu-btn img { margin: 5px; width: 46%; box-shadow: 0 0 5px #ccc; }


.titie-page { font-size: 200%; }
.titie-page { width: 95%; }
.titie-page img { height: auto; width: 80%; }
.bookshelves-container { float: none; margin: 8px; padding: 0; width: 90%; }

}

@media only screen and (max-width: 360px) {

.bookshelves-container, .bookshelves-bg { width: 100%; }
.mainmenu-btn .mainmenu-corner-l { border-radius: 46px 0; }
.mainmenu-btn .mainmenu-corner-r { border-radius: 0 46px; }
.mainmenu-btn img { margin: 10px; width: 80%; box-shadow: 0 0 5px #ccc; }

}

@-webkit-keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 0.75; }
}
@-moz-keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 0.75; }
}
@-ms-keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 0.75; }
}
@-o-keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 0.75; }
}
@keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
 100% { opacity: 1; -webkit-transform: none; transform: none; }
}

#border-fadein {
-webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s;
-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;
}

#text-fadein-down {
 -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
 -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
}

/* -------------------- Conference (VDO) -------------------- */

.vdo-conf-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        overflow: hidden;
    }
    
    .vdo-conf-container {
        float: left;
        margin: 8px;
        padding: 0;
        width: 32%;  /* width: 23%; */
    }
    
    .vdo-conf-thumb {
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
    }
    
    .vdo-conf-thumb img {
        width: 95%;
        margin: 5px 0;
        box-shadow: 0 0 5px #999999;
        border-radius: 0 24px;
        overflow: hidden;
    }
    
    .vdo-conf-container:hover .vdo-conf-thumb img, .vdo-conf-thumb img:hover {
        box-shadow: 0 1px 5px darkgoldenrod;
        filter: saturate(1.5);
    /*    -webkit-transform: scale3d(1.07, 1.07, 1);
        -moz-transform: scale3d(1.07, 1.07, 1);
        -ms-transform: scale3d(1.07, 1.07, 1);
        -o-transform: scale3d(1.07, 1.07, 1);   */
    }
    
    .vdo-conf-btn {
        margin: 4px auto;
        width: 60px;
        text-align: center;
        z-index: 100;
        font-size: 300%;
        color: sienna;
        position: relative;
        margin-top: -80px;
        opacity: 0;
        border-radius:50%;
        -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s;
    }
    
    .vdo-conf-container:hover .vdo-conf-btn {
    
    opacity: .9;
    
    }
    
    .vdo-conf-btn img {
        width: 20px;
        box-shadow: 0 0 5px #666;
        border-radius: 50%;
    }
    
    .vdo-conf-title {
        margin: 8px auto;
        width: 90%;
        text-align: center;
        color: #58595B;
        font-size: 90%;
    }
    
    /* -------------------- END Conference (VDO) -------------------- */

@media only screen and (min-width: 769px) and (max-width: 1024px) {

     
        /* -------------------- Conference (VDO) -------------------- */
            .vdo-conf-container {
                width: 48%;
            }
        
            .vdo-conf-thumb img {
               /*  width: 200px; */
            }
        /* -------------------- END Conference (VDO) -------------------- */
        
}

@media only screen and (max-width: 360px) {
        .vdo-conf-container {
            width: 100%;
        }
}

@media only screen and (max-width: 480px) {
        .vdo-conf-container {
            float: none;
            margin: 8px;
            padding: 0;
            width: 90%;
        }
 }