@charset "utf-8";
/* CSS Document */

@media (min-width: 1200px) and (max-width: 1342px) {

}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 767px) and (max-width: 991px) {

    .box{max-width:786px; padding-left: 10px; padding-right: 10px;}
    
    .mainNav .logo img{max-height:60px;}
    
    .home-book{padding-top: 0;justify-content:center ;align-items:center;align-content:center}
    .home-book div:nth-child(2) img{margin: 0; padding: 0; max-width: 300px}
   
    .feature-box-home{align-items:center; justify-content:center; gap:0 30px}
    .feature-box-home div{max-width:220px;}
    .feature-box-home div img{width: 200px; height:132px}
    .feature-box-home div h2 img{height:25px; width:167px }

    .faq .flex-one{flex-flow:column nowrap; justify-content: center; align-items: flex-start;}
    .contact-right p.margin-top{margin-top:0px;}
    
    .flex-one.profile{flex-flow:column;justify-content: center; row-gap:20px; padding: 0 15px;}
    .profile .flex-left {flex-flow: row wrap; justify-content: flex-start; column-gap: 20px;}
    .profile .flex-left li{flex: 1 1 auto;}
    .profile .flex-left li.figure{flex: 0 1 auto;}
    .linkNav{flex-flow: row wrap; justify-content:space-between;}
    .linkNav li{flex:1 1 auto; text-align: center}
    
    .book .profile .flex-left li:first-child{order:4;}
    
    .book .flex-right .input-box label,
    .book .flex-right .input-box aside{display:inline-block; vertical-align:bottom}
    
}

/* Specific to change the nav bar UI only */
@media (max-width: 767px) {
      
    .mainNav{padding:10px;}
    .mainNav .logo img{max-height:50px;}
    .mainNav label:before{content:'\2261';font-size: 44px; color:#3a79b9}
    .mainNav label{display: block;}

    .mainNav ul{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:absolute;
        opacity: 0;
        visibility: hidden;
        z-index: 3;
        top:20px;
        right: 44px;
        background: #fff;
    }
    
    .mainNav ul li{display: block;padding: 0; width: 100%;}
    .mainNav ul li:not(:last-child){ border-bottom: 1px solid #eeeeee}
    .mainNav ul li a{display:block;padding:10px 18px;}
    .mainNav ul li.active,
    .mainNav ul li:hover{background:#3a79b9}
    
    .mainNav ul li ul{
        position: relative;
        top:auto;
        left:auto;
        right: auto;
        border-bottom: none;
        z-index: 0;
    }
    
    /*.grid-options*/
    .grid-options li{display:block}
    .grid-options li.right{text-align: left;}
    
    .book .profile .flex-left li:first-child{order:4;}
    .book .flex-right .input-box aside{display:inline-block; vertical-align:bottom}
  
}

@media (min-width: 576px) and (max-width: 767px) {

    .box{max-width:576px;}
    
    .home-book{padding-top: 20px; flex-flow:column nowrap;align-items:center;align-content:flex-start}
    .home-book div:nth-child(2) img{margin: 0; padding: 0; max-width: 300px}
        
    .feature-box-home{align-items:center; justify-content:center; gap:30px}
    .feature-box-home div{max-width:220px;}
    .feature-box-home div img{width: 200px; height:132px}
    .feature-box-home div h2 img{height:25px; width:167px }
    
    .input-box li label{display:block; vertical-align: top;margin-bottom: 5px}
    
    .faq{margin-left: 20px; margin-right: 20px;}

    .faq .flex-one{flex-flow:column nowrap; justify-content: center; align-items: flex-start;}
    .contact-right p.margin-top{margin-top:0px;}

    .search-result-item{padding-bottom: 5px;}
    .search-item-profile{flex:0 1 auto;}
    .search-item-profile-detail header{order:2;}
    .search-item-profile-detail .link-wraper{flex-flow:row; justify-content:flex-start; gap:0 10px;} 
    .search-item-profile-detail .link-im,.search-item-profile-detail .link-book{width:210px;}
    
    .flex-one.profile{flex-flow:column;justify-content: center; row-gap:20px; padding: 0 15px;}
    .profile .flex-left {flex-flow: row wrap; justify-content: flex-start; column-gap: 20px;}
    .profile .flex-left li{flex: 1 1 auto;}
    .profile .flex-left li.figure{flex: 0 1 auto;}
    .linkNav{flex-flow: row wrap; justify-content:space-between;}
    .linkNav li{flex:1 1 auto; text-align: center}
    
    .book .flex-right .input-box label{display:inline-block; vertical-align:bottom}
    
    .sitemap {flex-flow:column nowrap; gap:20px 0; margin:0 20px;}
    .sitemap div.about{max-width:555px;}
    .copyright {flex-flow:column nowrap; gap:10px 0}

}

@media (min-width: 412px) and (max-width:575px){

    .box{max-width:412px;}

    .home-book{padding-top: 20px; flex-flow:column nowrap;align-items:center;align-content:flex-start}
    .home-book-input img{max-width:392px;}
    .home-book-input label{display:block;margin-bottom: 5px;}
    .home-book div img{margin: 0; padding: 0; max-width: 372px}
    .feature-box-home {flex-flow:column nowrap;align-items:center; gap:20px 0;}
    .feature-box-home div{max-width:392px}
    
    .input-box li label{display:block; margin-bottom: 5px;}
    .input-box li aside{display:block;margin-top: 5px;}
    .input-box .captcha input{display:block; margin-bottom: 10px;}
    
    .faq{margin-left: 20px; margin-right: 20px;}

    .faq .flex-one{flex-flow:column nowrap; justify-content: center; align-items: center;}
    .contact-left textarea{display:block; width:350px;}
    .contact-right p.margin-top{margin-top:0px;}
    .contact-right img{max-width:350px;}

    .search-result-item{flex-flow: column nowrap;padding-bottom: 5px;}
    .search-result-item figure img{width:180px;}
    .search-item-profile{flex:0 1 auto;}
    .search-item-profile-detail header{order:2;}
    .search-item-profile-detail .link-wraper{flex-flow:row; justify-content:space-between;}
    .search-item-profile-detail .link-im,.search-item-profile-detail .link-book{width:180px;}
    
    .flex-one.profile{flex-flow:column;justify-content: center;row-gap:20px;padding: 0 20px;}
    .profile .flex-left {flex:0 1 auto;}
    .profile .flex-left li figure img{width:100%}
    .linkNav{flex-flow: row wrap; justify-content:space-between;}
    .linkNav li{flex:1 1 auto; text-align: center}

    .sitemap {flex-flow:column nowrap; gap:20px 0; margin:0 20px;}
    .sitemap div.about{max-width:392px;}
    .copyright {flex-flow:column nowrap; gap:10px 0}
}


@media (min-width: 375px) and (max-width:411px){
    
    .box{max-width:375px;}

    .home-book{padding-top: 20px; flex-flow:column nowrap;align-items:center;align-content:flex-start}
    .home-book-input img{max-width:315px;}
    .home-book-input label{display:block;margin-bottom: 5px;}
    .home-book div img{margin: 0; padding: 0; max-width: 315px}
    .feature-box-home {flex-flow:column nowrap;align-items:center; gap:20px 0;}
    .feature-box-home div{max-width:355px}
    
    .input-box li label{display:block; margin-bottom: 5px;}
    .input-box li aside{display:block;margin-top: 5px;}
    .input-box .captcha input{display:block; margin-bottom: 10px;}
    
    .faq{margin-left: 20px; margin-right: 20px;}
    
    .faq .flex-one{flex-flow:column nowrap; justify-content: center; align-items: center;}
    .contact-left input{display:block; width:330px;}
    .contact-left textarea{display:block; width:330px;}
    .contact-right p.margin-top{margin-top:0px;}
    .contact-right img{max-width:330px;}
    
    .search-result-item{flex-flow: column nowrap;padding-bottom: 5px;}
    .search-result-item figure img{width:180px;}
    .search-item-profile{flex:0 1 auto;}
    .search-item-profile-detail header{order:2;}
    .search-item-profile-detail .link-wraper{flex-flow:row; justify-content:space-between}
    .search-item-profile-detail .link-im,.search-item-profile-detail .link-book{width:160px;}
    
    .flex-one.profile{flex-flow:column;justify-content: center;row-gap:20px;padding: 0 20px;}
    .profile .flex-left {flex:0 1 auto;}
    .profile .flex-left li figure img{width:100%}
    .linkNav{flex-flow: row wrap; justify-content:space-between;}
    .linkNav li{flex:1 1 auto; text-align: center}
    
    
    .sitemap {flex-flow:column nowrap; gap:20px 0; margin:0 20px;}
    .sitemap div.about{max-width:355px;}
    .copyright {flex-flow:column nowrap; gap:10px 0}
    
}

@media (max-width: 360px){
    
    .box{max-width:360px;}
        
    .home-book{padding-top: 20px; flex-flow:column nowrap;align-items:center;align-content:flex-start}
    .home-book-input img{max-width:340px;}
    .home-book-input label{display:block;margin-bottom: 5px;}
    .home-book div img{margin: 0; padding: 0; max-width: 320px}
    .feature-box-home {flex-flow:column nowrap;align-items:center; gap:20px 0;}
    .feature-box-home div{max-width:340px}
    
    .input-box li label{display:block; margin-bottom: 5px;}
    .input-box li aside{display:block; margin-top:5px}
    .input-box li.captcha aside{margin-top: 10px}

    .faq{margin-left: 20px; margin-right: 20px;}
    
    .faq .flex-one{flex-flow:column nowrap; justify-content: center; align-items: center;}
    .contact-left input{display:block; width:320px;}
    .contact-left textarea{display:block; width:320px;}
    .contact-right p.margin-top{margin-top:0px;}
    .contact-right img{max-width:320px;}
    
    .search-result-item{flex-flow: column nowrap;padding-bottom: 5px;}
    .search-result-item figure img{width:180px;}
    .search-item-profile{flex:0 1 auto;}
    .search-item-profile-detail header{order:2;}
    .search-item-profile-detail .link-wraper{flex-flow:row; justify-content: space-between}
    
    .flex-one.profile{flex-flow:column;justify-content: center;row-gap:20px;padding: 0 20px;}
    .profile .flex-left {width:100%;flex:0 1 auto;}
    .profile .flex-left li figure img{width:100%}
    .linkNav{flex-flow: row wrap; justify-content:space-between;}
    .linkNav li{flex:1 1 auto; text-align: center}
    
    
    
    .sitemap {flex-flow:column nowrap; gap:20px 0; margin:0 20px;}
    .sitemap div.about{max-width:340px;}
    .copyright {flex-flow:column nowrap; gap:10px 0}
    
}