/*--------------- desktop device --------------*/

@media (min-width: 1025px) and (max-width: 1299px) {

.vission-head { position: relative; left: auto; top: 53px;}
}

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

.top-header .col-md-2 { padding-left: 0px;}
.head-contact { margin-top: 11px;}
.head-contact i { height: 33px; width: 33px; line-height: 33px; font-size: 18px; margin-right: 6px;}
.head-contact p { margin-bottom: 0px; line-height: 16px;}
.head-contact span { font-size: 13px;}
.about-area { padding: 60px 0px 100px;}
.vission-head { padding: 100px 12px; position: relative; left: auto; top: 50px;}
.vission-head h3 { font-size: 24px;}
.contact-detail ul li { margin-bottom: 13px; padding-bottom: 13px;}
}


/*--------------- tab device --------------*/

@media (min-width: 600px) and (max-width: 768px) {

.heading h3 { font-size: 24px;}
.heading img { margin: 0px auto 20px;}

.small-logo a img { width: 260px;}
.head-contact i { height: 35px; width: 35px; line-height: 35px; font-size: 18px; margin-right: 8px;}
.head-contact p { margin-bottom: 0px; line-height: 18px;}
.navbar-nav { margin-left: 0px;}
.navbar-default .navbar-nav > li > a { font-size: 13px; letter-spacing: normal; padding: 22px 10px;}
.donate-btn { position: relative; z-index: 1;}
.donate-btn:before { z-index: -1;}
.donate-btn a { padding: 23px 9px 23px 0px;}

.about-area { padding: 40px 0px 60px;}
.about-text h1 { font-size: 24px; margin: 0px 0px 12px;}
.about-text img { margin: 0px auto 20px;}
.image-shadow { margin-top: 50px;}
.what-area { margin: 15px 0px 60px;}
.what-box { margin-top: 20px;}
.what-box a img { width: 60px;}
.video-area { background-position: center;}
.mission-area { margin: 50px 0px;}
.mission-area-box { margin: 0px 15px;}
.vission-head { padding: 100px 12px; position: relative; left: auto; top: 80px;}
.vission-head h3 { font-size: 24px;}
.help-area p { font-size: 26px; line-height: 41px;}
.total-area { padding: 80px 0px 50px;}
.item-number { margin-top: 25px;}
.item-number p { font-size: 15px; letter-spacing: normal;}

.trustee-page { margin: 40px 0px 50px;}
.trustee-photo, .trustee-detail { margin-bottom: 0px; margin-top: 25px;}
.trustee-photo img { padding: 8px;}
.trustee-detail ul li { margin-bottom: 5px;}

.camp-page { margin: 40px 0px 50px;}

.milestone-table { margin: 40px 0px 50px;}

.book-page { margin: 40px 0px 20px;}
.book-box { padding: 10px 7px; margin-bottom: 25px;}
.book-box h4 { font-size: 13px;}

.photo-page { margin: 40px 0px 50px;}

.contact-page { margin: 40px 0px;}
.contact-detail { padding: 25px;}
.contact-detail ul li { margin-bottom: 12px; padding-bottom: 12px;}
.contact-detail ul li strong { font-size: 16px;}

.help-page { margin: 40px 0px;}
}
	

/*------------- small device ----------------*/

@media(max-width:480px) {	

.heading h3 {font-size: 22px; margin: 0px 0px 10px;}
.heading img { margin: 0px auto 20px;}
.subheader {padding: 60px 0 40px; background-size: cover;}

.top-header { padding: 15px 0px 55px;}
.small-logo a img { width: 270px; display: block; margin: 0px auto;}
.head-contact { margin-top: 18px;}
.head-contact i { border: 0px; height: auto; width: auto; line-height: 18px; font-size: 16px; margin-right: 6px;}
.head-contact p { margin-bottom: 3px; font-size: 13px;}
.head-contact span { border-top: 1px solid #e7e7e7; display: block;}
.top-navbar { margin: -35px auto 0px;}
.navbar-default { border-radius: 15px 0px 0px; z-index: 1;}
.navbar-toggle { padding: 8px 8px; margin-top: 6px; margin-right: 0px; margin-left: 15px; margin-bottom: 7px; float: none; background-color: #e3e9ea;}
.navbar-default .navbar-nav > li { margin: 8px 0px;}
.navbar-default .navbar-nav > li > a { font-size: 13px; padding: 4px;}
.navbar-default .dropdown-menu li a{color: #fff !important; font-weight: 500; padding: 0px !important;}
.dropdown-menu li{ margin: 0px 15px; padding: 7px 0px; border-bottom: 0px;}
.donate-btn { border-radius: 0px 0px 15px; z-index: 1; position: relative;}
.donate-btn:before { left: -12px; z-index: -1; width: 40px;}
.donate-btn a { padding: 14.3px 8px 14.3px 0px; font-size: 13px;}

.about-area { padding: 40px 0px 70px;}
.about-text h1 { font-size: 22px; margin: 0px 0px 10px;}
.about-text img { margin: 0px auto 20px;}
.image-shadow { margin-top: 20px;}
.what-area { margin: 20px 0px 40px;}
.what-box { margin-top: 20px;}
.what-box a { padding: 15px 5px; font-size: 13px;}
.what-box a img { width: 64px;}
.mission-area { margin: 40px 0px;}
.mission-area-box { margin: 0px 15px;}
.vission-head { background: transparent; padding: 0px; border: 0px; position: relative; width: 100%; left: auto; top: auto; margin: 5px 0px 25px;}
.vission-head h3 { font-size: 22px; margin: 0px 0px 10px;}
.vission-box { padding-right: 0px;}
.total-area { padding: 80px 0px 40px;}
.item-number { margin-top: 20px;}
.item-number h4 { margin: 0px 0px 5px;}
.item-number p { font-size: 14px; letter-spacing: normal;}
.help-area {padding: 25px 0px;}
.help-area p { font-size: 18px;}
.help-area a { border-radius: 8px; padding: 8px 7px; font-size: 13px; letter-spacing: normal;}
.footer-area .row { padding: 20px 0px 20px;}
.quick-link h3, .footer-gallery h3 { margin: 0px 0px 18px; font-size: 20px;}
.footer-gallery h3 { margin-top: 10px;}

.trustee-page { margin: 40px 0px 20px;}
.trustee-photo, .trustee-detail { margin-bottom: 20px;}
.trustee-photo { margin-top: 20px;}
.trustee-detail h4 { padding-bottom: 10px; text-align: center;}
.trustee-photo img { width: 190px;}
.trustee-detail ul li { margin-bottom: 5px;}

.project-page { margin: 40px 0px 25px;}
.project-box { margin-bottom: 25px;}
.project-box img{ 
width: 115px;
display: block; 
float: none; 
margin-right: 0px; 
margin: 0 auto 18px;
-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
-o-box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
}
.project-box h4 { margin: 0px 0px 15px; text-align: center;}

.milestone-table { margin: 40px 0px;}

.book-page { margin: 40px 0px;}
.book-box { margin-top: 20px; margin-bottom: 0px;}
.book-box h4 { font-size: 14px;}
.clear { clear: both;}
.book-modal .modal-body ul li:nth-child(1) { text-align: center; margin-bottom: 0px;}
.book-modal .modal-body ul li:nth-child(2) { text-align: center; margin-bottom: 20px;}
.book-modal .modal-body a img { margin: 5px 6px 0px 0px;}
.mobile-center { margin: 0px auto; width: 180px;}

.contact-page { margin: 40px 0px;}
.no-right { padding-right: 15px;}
.no-left { padding-left: 15px;}
.contact-form { padding: 25px 20px; margin: 30px 0px;}
.contact-form p { margin-bottom: 30px;}
.contact-form form button { margin-top: 0px;}
.contact-form h4 { font-size: 20px;}
.contact-detail { padding: 25px 20px;}
.contact-detail h4 { font-size: 20px;}
.contact-page iframe { margin-top: 30px;}
#contact_message { bottom: 52px; left: 42%;}

.help-page { margin: 40px 0px 30px;}
.help-detail h5 { padding: 25px; margin-top: 10px; display: block;}

.camp-page { margin: 40px 0px;}

.photo-page { margin: 40px 0px;}
.photo-box { padding: 20px 10px; margin-top: 30px;}
.photo-box h4 { font-size: 16px;}
.photo-carousel.owl-theme .owl-controls .owl-buttons div { font-size: 18px; width: 30px; height: 30px; line-height: 30px;}
}

@media(max-width:320px) {

.donate-btn a { padding: 14.8px 4px 14.8px 0px; font-size: 12px;}
.donate-btn:before { left: -8px;}
.help-area p { font-size: 16px;}
.help-area a { border-radius: 5px; padding: 6px 1px; font-size: 13px;}
#contact_message { left: 48%;}
}