* {font-family: 'Rubik', sans-serif, Microsoft JhengHei;}

a, a:hover {text-decoration: none;cursor: pointer;}

.wrap {
    overflow: hidden;
}


.bg-cover {
    background-size: cover;
    background-position: center center;
}

@media (min-width:768px) {
    .text-md-dark {
        color: #333;
    }
}

header {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#about h5, #makeawish h5 {
    line-height: 1.8;
    font-weight: normal;
}

h3.inline-block{
    display: inline-block;
}

/* bg & text color */

.bg-white {background-color: #ffffff;}

.bg-red {background-color: #e9462b;}

.bg-orange {background-color: #ff9000;}

.bg-yellow {background-color: #ffdb6f;}

.bg-brown {background-color: #684224;}

.bg-cat {
    background-image: url('images/bg-cat.png');
    background-position: center 90%;
    background-repeat: no-repeat;
}

.text-white {color: white!important;}

.text-dark {color: #000!important;}

.text-grey {color: #666;}

.text-red {color: #e9462b;}

.text-orange {color: #ff9000;}

.text-yellow {color: #ffdb6f;}

.text-brown {color: #684224;}


/*border*/

.border-top {border-top: 1px solid #fff;}

.border-red {border-bottom: 1px solid #e9462b;}

.border-right {border-right: 1px solid rgba(255, 255, 255, 0.5);}


.profile-photo {
    width: 140px;
    height: 140px;
    border-radius: 999em;
    background-size: cover;
}

.profile-photo-s {
    width: 80px;
    height: 80px;
    border-radius: 999em;
    background-size: cover;
    background-position: center;
}

.expert-01 {background-image: url('images/expert-01.jpg')}

.expert-02 {background-image: url('images/expert-02.jpg')}

.expert-03 {background-image: url('images/expert-03.jpg')}

.expert-title {
    display: inline-block;
    text-align: center;
    letter-spacing: 0.2rem;
    line-height: 1.5;
    border-radius: 30px;
    position: relative;
}

img.img-hover:hover {
    opacity: 0.8;
}

@media (min-width:768px) {
    .img-w80 {
        max-width: 80%;
    }
    .img-w70 {
        max-width: 70%;
    }
    .img-w50 {
        max-width: 50%;
    }
    .img-w40 {
        max-width: 40%;
    }
    .img-w30 {
        max-width: 30%;
    }
    .img-w20 {
        max-width: 20%;
    }
}

.bg-cover {
    background-size: cover;
    background-position: center center;
}

.photo-vh {
    height: 100vh;
}

.photo-p {
    height: 600px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1);
}

/*hoi*/

.kv {
    width: 100%;
    height: 655px;
    text-align: center;
}

.toys {
    width: 100%;
    height: 655px;
    position: absolute;
    top: 0;
    margin:0 auto;
}

.toy {
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
}

.title {
    background-image: url('images/kv.png');
    background-size: 109%;
    background-position: center top;
    height: 655px;
    background-repeat: no-repeat;
}

.papers-01 {
    background-image: url('images/papers-01.png');
    width: 1093px;
    height: 563px;
    top: 70px;
    left: 20px;
}

.toy-01 {
    background-image: url('images/toy-01.png');
    width: 236px;
    height: 192px;
    top: 70px;
    left: -70px;
}

.move {
    -webkit-animation: gif 1.4s infinite linear;
    animation: move 5s infinite linear;
}

@keyframes move
{
    0%   {top:70px;}
    50%  {top:100px;}
    100% {top:60px;}
}

.toy-02 {
    background-image: url('images/toy-02.png');
    width: 140px;
    height: 142px;
    top: 30px;
    left: 280px;
}

.toy-03 {
    background-image: url('images/toy-03.png');
    width: 93px;
    height: 94px;
    top: 380px;
    left: 20px;
}

.toy-04 {
    background-image: url('images/toy-04.png');
    width: 250px;
    height: 159px;
    top: 600px;
    left: 180px;
}

.toy-05 {
    background-image: url('images/toy-05.png');
    width: 675px;
    height: 427px;
    top: 440px;
    left: 580px;
}

.move5 {
    -webkit-animation: gif 1.4s infinite linear;
    animation: move5 3s infinite linear;
}

@keyframes move5
{
    0%   {top:440px;}
    50%  {top:450px;}
    100% {top:440px;}
}

.toy-06 {
    background-image: url('images/toy-06.png');
    width: 84px;
    height: 90px;
    top: 90px;
    left: 680px;
}

.move6 {
    -webkit-animation: gif 1.2s infinite linear;
    animation: move6 2s infinite linear;
}

@keyframes move6
{
    0%   {top:90px;}
    25%   {top:70px;}
    50%  {top:60px;}
    75%   {top:70px;}
    100% {top:90px;}
}

.toy-07 {
    background-image: url('images/toy-07.png');
    width: 113px;
    height: 69px;
    top: 40px;
    left: 1000px;
    z-index: 1031;
}

.ribbon {
    position: relative;
    width: 375px;
    padding: 10px;
    margin: 10px auto;
}

.ribbon-border {
    position: relative;
    width: 200px;
    padding: 10px;
    margin: 10px auto;
    border: 3px solid #fff;
}

.ribbon-border-lg {
    position: relative;
    width: 90%;
    padding:10px;
    margin: 10px auto;
    border: 3px solid #fff;
}

.ribbon-border-lg i {
    font-size: 1.2rem;
}

.ribbon:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    border: 29px solid #e9452c;
    z-index: 999;
    left: -33px;
    border-right-width: 33px;
    border-left-color: transparent;
}

.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    border: 29px solid #e9452c;
    z-index: 999;
    right: -33px;
    border-left-width: 33px;
    border-right-color: transparent;
}

.btn.bg-red {
    width: 400px;
}

.cart-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
}
.cart-circle-s {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
}

.cart-circle i {
    font-size: 1.2rem;
}

.cart-circle-s i {
    font-size: 0.9rem;
}

.rounded {
    border-radius: 15px!important;
}

a.show-modal {
    cursor: pointer;
}

a.show-modal .zoom {
    font-size: 120%;
}

a.show-modal:hover .zoom{
    font-size: 200%;

}
.see-more {
    background: #fff;
    border-radius: 15px;
    width: 210px;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s;
}

.arrow_box {
    position: relative;
    background: #ffffff;
}

.arrow_box:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}

a.show-modal:hover .see-more {
    opacity: 1;
    z-index: 9999;
}

ul.sidebar {
    display: block;
    width: 50px;
    height: 104px;
    position: fixed;
    top: 30%;
    right: 0px;
    z-index: 9999;
    border-radius: 5px;
    padding: 0
}

ul.sidebar a {
    text-decoration: none;
}

ul.sidebar li {
    width: 50px;
    height: 50px;
    padding: 5px 2px;
    list-style: none;
    font-size: 1rem;
}

ul.sidebar li small {
    display: block;
}

.flex {
    display: flex;
    align-items::center;
    justify-content:center;
}


/*youtube*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*bg*/
#blogger, #here {
    background-image: url('images/papers-02.png');
    background-size: 100%;
}

#about, #expert, #activity {
    background-image: url('images/papers-03.png');
    background-size: 100%;
}


.table td, .table th {
    vertical-align: middle!important;
}

span.price {
    font-size: 125%;
    font-weight: 500;
}

.booklist {display: inline-block;}

@media (max-width: 767.98px) {
    h1 {font-size:2rem;}
    h3 {font-size:1.5rem;}
    h3.modal-title {font-size:1.3rem;}
    section#about .pt-5 {padding-top:0!important;}
    section#about .mt-5 {margin-top:0!important;}
    .border-right, .border-bottom {border-right:0;border-bottom:1px solid #fff;padding-bottom:2rem;margin-bottom: 3rem;}
    .see-more {display: none;}
    .btn.bg-red {width: 90%;}
    ul.sidebar {top:70%;}
}

.bounce {
    animation-duration: 1s;animation-iteration-count:3"
}

/*fadeIn*/
.animated {
  opacity: 0.3;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  translateY(50px);
  transition: all 2s;
}
.fadeIn {
  opacity: 1;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  translateY(0px);
  animation-iteration-count:1;
}

@-webkit-keyframes bounce {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0px);}
  30%, 70% {-webkit-transform: translateY(-15px);}
  50% {-webkit-transform: translateY(15px);}
} 

@keyframes bounce { 
  0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0px);}
  30%, 70% {transform: translateY(15px);}
  50% {transform: translateY(-15px);}
}