*{margin:0px; padding:0px; outline:none; list-style:none;}
a{text-decoration:none;}
a img{border:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}

@font-face {
    font-family:Poppins-Regular;
    src: url(Poppins-Regular.ttf);
}

body{width:100%; background:#fff; font-weight:400; font-size:14px; font-family:Poppins-Regular;}

header{width:100%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,0.13); z-index:999999;}
.top_header{width:100%; display:inline-block; background:#000; padding:5px 0;}
.container{width:100%;}

.contact_left ul{margin:0px;}
.contact_left ul li{display:inline-block; padding-right:20px;}
.contact_left ul li i{padding-right:5px; font-weight:400; font-size:19px; color:#fff; vertical-align:bottom;}
.contact_left ul li a{font-size:14px; color:#fff; font-weight:400; font-family: "Poppins", sans-serif;}
.contact_left ul li a:hover{text-decoration:none; color:#fff !important;}

.social_tag_right{text-align:right;}
.social_tag_right a{color:#fff; padding-right:20px; font-weight:400; font-size:14px;}
.social_tag_right a:hover{text-decoration:none; color:#fff;}

.navbar.navbar-default {background: #fff; border: none; width: 100%; display: inline-block; margin: 0; padding:5px 0 !important;}
.navbar-brand {display: inline-table; padding: 0 15px !important;}
.nav.navbar-nav.navbar-right {margin:25px 0 0 0;}
.navbar-default .navbar-nav > li > a {color:#000 !important; font-weight:400 !important; font-size:14px; padding-left:10px; font-family: "Poppins", sans-serif;}
.navbar-default .navbar-nav > li > a:hover{color:#074A75 !important;}


.slider{width:100%; display:inline-block; margin-top:0px;}
.item img {width: 100%;}


.site_content{width:100%; display:inline-block; padding:40px 0;}
.site_content_heading_txt{font-size:32px; font-weight:bold; color:#000; margin:0px; font-family: "Poppins", sans-serif;}
.site_content_p{font-size:14px; text-align:justify; color:#747474; padding:0px; font-weight:400; margin:30px 0 0 0; font-family: "Poppins", sans-serif;}

.map_box{border:1px solid #757575; padding:20px;}
.map_box h1{font-size:24px; color:#000; font-weight:bold;; margin:0px; border-bottom:1px solid #747474; padding-bottom:20px; font-family: "Poppins", sans-serif;}
.map_box ul li{list-style:inside; color:#074A75; padding-top:20px;}
.map_box ul li a{font-size:14px; font-weight:400; color:#074A75; font-family: "Poppins", sans-serif;}
.map_box ul li a:hover{color:#074A75; text-decoration:none;}


.key_amenities_site{width:100%; display:inline-block; padding:40px 0; background:#074A75; text-align:center; margin-bottom:40px;}
.key_amenities_heading{font-size:32px; font-weight:bold; color:#fff; margin:0px; font-family: "Poppins", sans-serif;}
.key_amenities_icon{width:100%; text-align:center; display:inline-block; margin:40px 0;}
.key_amenities_icon img {text-align:center; display:inline-block;}
.key_amenities_icon h1{font-size:24px; color:#fff; font-weight:bold; margin:20px 0 0 0; font-family: "Poppins", sans-serif;}
.material-icons {color: #fff;}

.hotel_btn{width:100%; display:inline-block; text-align:center;}
.all_hotel_details_btn{width:80%; text-align:center; border:1px solid #fff; display:inline-block; padding:20px 0; border-radius:15px; font-size:14px; font-weight:400;  color:#fff; font-family: "Poppins", sans-serif;}
.all_hotel_details_btn:hover{color:#fff; text-decoration:none; border:1px solid #074A75;}

.accessibility_btn{width:80%; text-align:center; border:1px solid #fff; display:inline-block; padding:20px 0; border-radius:15px; font-size:14px; font-weight:400;  color:#fff; font-family: "Poppins", sans-serif;}
.accessibility_btn:hover{color:#fff; text-decoration:none; border:1px solid #074A75;}



.hotel_highlights_site{width:100%; display:inline-block; padding:40px 0;}
.hotel_highlights_heading_txt{font-size:32px; color:#000; font-weight:bold; margin:0px; text-align:center; font-family: "Poppins", sans-serif;}

.hotel_highlights_icon{width:100%; padding:40px 15px 0 15px; display:inline-block; text-align:center;}
.hotel_highlights_icon p{display:inline-block; font-size:14px; font-weight:400; color:#747474; font-family: "Poppins", sans-serif;}



.guest_rooms_site{width:100%; display:inline-block; padding:0 0 40px 0;}
.guest_rooms_heading_txt{font-size:32px; color:#000; font-weight:bold; margin:0px; text-align:center; display:inline-block; width:100%; font-family: "Poppins", sans-serif;}
.guest_rooms_heading_txt_p{display:inline-block; font-size:14px; font-weight:400; color:#747474; text-align:center; width:100%; margin:10px 0 0 0; font-family: "Poppins", sans-serif;}

.guest_rooms_icon img {width: 100%;}

.guest_rooms_icon {margin-top: 35px;}
.guest_rooms_icon_color{width:100%; display:inline-block; padding:20px 10px; /*background:#B0CE06;*/ background:#ebeff1;}
.guest_rooms_icon_color h2{font-size:18px; margin:0px; color:#000; font-weight:bold; font-family: "Poppins", sans-serif;}
.guest_rooms_icon_color p{display:inline-block; font-size:14px; font-weight:400; color:#747474; margin:10px 0; font-family: "Poppins", sans-serif;}
.view_details_btn{color:#074A75 !important; display:inline-block; font-size:14px; font-weight:400; color:#fff; font-family: "Poppins", sans-serif;}
.view_details_btn:hover{text-decoration:none;}



.check_room_rates_availability{width:100%; display:inline-block; background:url(../img/bg-img.jpg) no-repeat; height:auto; padding:80px 0; background-size:cover; margin-bottom:0px;}
.check_room_rates_availability_heading_txt{font-size:32px; font-weight:bold; color:#fff; margin:0 0 40px 0; border-bottom:1px solid#fff; padding-bottom:20px;}
#checkin {display: block; font-family: "Poppins", sans-serif; font-size:14px; font-weight:400;}
#checkout{display: block; font-family: "Poppins", sans-serif; font-size:14px; font-weight:400;}
label{display: block; font-family: "Poppins", sans-serif; font-size:14px; font-weight:400 !important;}
#checkout {display: block;}
#meeting {width: 100%; padding: 6px; border-radius: 5px; border:1px solid#ccc; font-family: "Poppins", sans-serif;}
.btn-search-now {padding: 15px 60px; border-radius: 5px; border: 1px solid #fff; color: #fff; font-size: 14px; font-weight: 400; background:#074A75; margin:30px 0 0 15px; font-family: "Poppins", sans-serif;}



footer{width:100%; display:inline-block; padding:40px 0 0 0; background:#3b3b3b; box-shadow: 0 1px 3px rgba(0,0,0,1);}
.foot_icon_heading_txt{font-size:32px; font-weight:bold; color:#fff; margin:0 0 20px 0; border-bottom:1px solid#747474; padding-bottom:15px; font-family: "Poppins", sans-serif;}
.our_links_txt a{font-size:14px; font-weight:400; color:#747474; line-height:24px; font-family: "Poppins", sans-serif;}
.our_links_txt a:hover{text-decoration:none; color:#074A75;}
.foot_icon_contact_txt li{font-size:14px; font-weight:400; color:#747474; line-height:24px; font-family: "Poppins", sans-serif;}

.insta_img_icon{float:left; padding:0 7.5px 7.5px 0;}
.btn-instagram {background:#4C68D7;	border-radius:5px; color:#fff; font-size:14px !important; font-weight:400 !important; padding:14px 30px 14px 15px; margin:10px 0 15px 0;}
.btn-instagram span{font-family: "Poppins", sans-serif;} 
.btn-instagram:hover{text-decoration:none; color:#fff;}

.foot_social_tag a {border:1px solid #fff; border-radius:100px; width:40px; height:40px;	text-align:center;	padding:12px 0 0 0; color:#fff; margin-right:9px;
margin-top:10px;}
.foot_social_tag a:hover{text-decoration:none; color:#074A75; border:1px solid #074A75;}

.copyright{width:100%; display:inline-block; padding:20px 0; margin:30px 0 0 0; border-top:1px solid #747474; text-align:center;}
.copyright p{display:inline-block; font-size:14px; font-weight:400; color:#fff; margin:0; padding:0; font-family: "Poppins", sans-serif;}



/******our hotel*******/
.our_hotel_img{width:100%; display:inline-block;}
.our_hotel_img img{width:100%;}

.flemingo_convenience_icon{width:100%; display:inline-block; margin-top:40px;}
.flemingo_convenience_icon h1 {font-size:24px; font-weight:bold; color:#000; margin:0 0 20px 0; border-bottom:1px solid#747474; padding-bottom:15px; font-family: "Poppins", sans-serif;}
.flemingo_convenience_icon p{font-size:14px; font-weight:400; color:#747474; line-height:24px; font-family: "Poppins", sans-serif;}

.hotel_policies_page{width:100%; display:inline-block; margin-bottom:40px;}
.hotel_policies_content h1{font-size:32px; font-weight:bold; color:#000; margin:0 0 20px 0; font-family: "Poppins", sans-serif;}
.hotel_policies_content p{font-size:14px; font-weight:400; color:#747474; line-height:24px; font-family: "Poppins", sans-serif;}








/*****contact us page*****/
.contact_page_site{width:100%; display:inline-block; padding:40px 0;}
.map_lactation {width: 100%; height:250px;	border: 1px solid; margin-top:24px;}
.nf-form-fields-required {font-size: 14px; font-weight: 400; color: #757575; font-family: "Poppins", sans-serif;}
.ninja-forms-req-symbol {color: #E80000;}
#nf-field-12 {width: 100%;}
#nf-field-13 {width: 100%;}
#nf-field-14 {width: 100%; height: 200px;}
#nf-field-15 {width: 100%;}
.nf-field-label {margin-bottom: 10px; margin-top: 10px;}
#nf-field-16{line-height: 36px; background: #074A75; border: 1px solid #074A75; color: #fff; border-radius: 1px; padding:0 45px; margin-top:15px;}
.nf-field-label label {font-weight: bold; font-size: 14px; vertical-align:middle;}


.contact_content_txt h2{font-size:24px; color:#000; font-weight:bold; margin:0 0 10px 0; display:inline-block; width:100%; font-family: "Poppins", sans-serif;}
.contact_content_txt p{font-size:14px; font-weight:400; color:#747474; line-height:24px; font-family: "Poppins", sans-serif;}

.nf-form-title h3 {font-size:24px; color:#000; font-weight:bold; margin:0 0 10px 0; display:inline-block; width:100%; font-family: "Poppins", sans-serif;}
/*****end contact us page*****/




/*****photos page CSS3 Image Hover Effects*****/
.photos_page{padding:40px 0;}
.photos_heading_txt{font-size:32px; font-weight:bold; color:#000; margin:0 0 40px 0; border-bottom:1px solid#747474; padding-bottom:20px;}

.photos {width:100%; margin:0 auto; position:relative; background:url(img/hover.gif) repeat;}
.photos > div {background-color: rgba(128, 128, 128, 0.5); border: 2px solid #074A75; float: left; margin: 5px; overflow: hidden; position: relative; width:32.45%; z-index: 1; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.photos > div img{width: 100%;}
.photos > div:hover{z-index: 10; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}
/*.photos > div:hover{z-index: 10; -webkit-transform:scale(2.0); -moz-transform:scale(2.0); -ms-transform:scale(2.0); -o-transform:scale(2.0); transform:scale(2.0);}*/
.photos > div div {background: url(../images/hover.gif) repeat scroll 0 0 transparent; cursor: pointer; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: 15; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.photos > div:nth-child(1):hover div {height: 0%;}
.photos > div:nth-child(2):hover div {height: 0%; margin-top: 100px;}
.photos > div:nth-child(3):hover div {width: 0%;}
.photos > div:nth-child(4):hover div {margin-left: 300px; width: 0%;}
.photos > div:nth-child(5):hover div {height: 0%; margin-left: 150px; margin-top: 50px; width: 0%;}
.photos > div:nth-child(6):hover div {margin-left: 150px; width: 0%;}
.photos > div:nth-child(7):hover div {height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateX(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);}
.photos > div:nth-child(8):hover div {height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateZ(600deg); -moz-transform: rotateZ(600deg); -ms-transform: rotateZ(600deg); -o-transform: rotateZ(600deg); transform: rotateZ(600deg);}
.photos > div.pair div {width: 50%;}
.photos > div.pair div:nth-child(odd) {margin-left: 150px;}
.photos > div.pair:hover div {width: 0%;}
.photos > div.pair:hover div:nth-child(odd) {margin-left: 300px;}
/******end CSS3 Image Hover Effects******/




/*****rooms page*****/
.guest_rooms_site_page{width:100%; padding:40px 0; display:inline-block;}
/*****end rooms page*****/




/*****weddings page*****/
.widdings_page{width:100%; display:inline-block; padding:40px 0;}
.weddings_heading_txt{font-size:32px; font-weight:bold; color:#000; margin:0 0 20px 0; font-family: "Poppins", sans-serif;}

.capacity_site{width:100%; display:inline-block; background:#074A75; text-align:center; padding:40px 0;}
.capacity_heading_txt {font-size: 32px; font-weight: bold;	color: #fff; margin:0px; font-family: "Poppins", sans-serif;}
.capacity_heading_txt span {font-size: 16px; font-weight: 600; color: #fff; font-family: "Poppins", sans-serif;}

.about_this_venue_site{width:100%; display:inline-block; padding:40px 0;}
.heading_txt_about_this_venue{text-align:center; font-size:32px; font-weight:bold; margin:0 0 10px 0;}
.about_this_venue_icon ul {display: inline-block;	padding: 0 15px;}
.about_this_venue_icon li {line-height: 24px; font-size: 16px; font-weight: 400; list-style: outside; padding: 0 5px;	margin: 20px 0 0 0; color:#747474; font-family: "Poppins", sans-serif;}

.services_facilities_page{width:100%; display:inline-block; padding:40px 0;}
.Services_Facilities_heading_txt{font-size:32px; font-weight:bold; color:#000; margin:0 0 40px 0; border-bottom:1px solid#747474; padding-bottom:20px; font-family: "Poppins", sans-serif;}

.wedding_certification_site h1{font-size:32px; font-weight:bold; margin:0 0 20px 0; font-family: "Poppins", sans-serif;}
.wedding_certification_site p{font-size:14px; font-weight:400; color:#747474; margin:0px; text-align:justify; font-family: "Poppins", sans-serif;}

.services_icon_box h2{font-size:32px; font-weight:bold; margin:40px 0 20px 0; font-family: "Poppins", sans-serif;}
.services_icon_box li{line-height: 35px; font-size: 16px; font-weight: 400; color:#747474; font-family: "Poppins", sans-serif;}

/*****end weddings*****/




/*****spa page*****/
.spa_page{width:100%; display:inline-block; padding:40px 0;}
.spa_heading_txt{font-size:32px; font-weight:bold; color:#768520; margin:0 0 40px 0; border-bottom:1px solid#768520; padding-bottom:20px;}
.spa_site h1{font-size:32px; font-weight:bold; margin:0 0 20px 0;}
.spa_site p{font-size:14px; font-weight:400; color:#747474; margin:0px; text-align:justify; line-height:32px;}
.services_spa_heading_txt{font-size:32px; font-weight:bold; margin:40px 0 20px 0; text-align:center;}
.spa_icon_box li{line-height: 35px; font-size: 16px; font-weight: 400; color:#768520;}
.spa_services_page{padding:0 0 40px 0; width:100%;}
/*****end spa*****/




/*****deluxe room page btn*****/
.deluxe_room_page_btn{width:100%; display:inline-block; background:#000; padding:40px 0;}
.Deluxe-Room-btn-heading-txt{font-size:32px; font-weight:bold; margin:0 0 30px 0; border-bottom:2px solid #fff; color:#fff; padding-bottom:15px;}

.Deluxe-Room-btn-img{border:2px solid #fff;}




/*****amenities page*****/
.amenities_page{width:100%; display:inline-block; padding:40px 0;}
.amenities_heading_txt{font-size:32px; font-weight:bold; margin:0 0 0px 0; color:#000; padding-bottom:15px; font-family: "Poppins", sans-serif;}
.amenities_page_icon {margin-top: 30px;}
.icon_bg_clr {background:#074A75; padding: 10px; font-size: 16px; font-weight: 400;	color: #fff; font-family: "Poppins", sans-serif;}
.amenities_img_border{/*border:2px solid #074A75;*/}

.Amenities_img{width:100%; display:inline-block;}




/*****tariff page*****/
.tariff_page{width:100%; display:inline-block; padding:80px 0 40px 0;}
.tariff_icon{border:2px solid #757575; position:relative;}
.tariff_margin_bottom {margin: 0 0 40px 0;}
.tariff_heading_txt {position: absolute; text-align: center; color:#fff; background: #074A75; padding: 20px 40px;	border-radius: 100px; top: -60px;	font-size: 32px; font-weight: bold;	left: 233px; font-family: "Poppins", sans-serif;}
.tariff_icon_box {text-align: center; margin:0 0 20px 0;}
.tariff_icon_box h3{font-size:20px; font-weight:bold; font-family: "Poppins", sans-serif;}
.tariff_icon_box p{font-size:14px; font-weight:400; color:#747474; font-family: "Poppins", sans-serif;}

.tariff_box_txt{text-align:center; margin:20px 0 0 0;}
.tariff_box_txt p{font-size:14px; font-weight:400; color:#747474; font-family: "Poppins", sans-serif;}



/*****sight seeing
.sight_seeing_page{width:100%; display:inline-block; padding:40px 0;}
.sight_seeing_heading_txt{font-size:32px; font-weight:bold; margin:0 0 0px 0; border-bottom:2px solid #074A75; color:#000; padding-bottom:15px;}

.heading_txt_sight{font-size:20px; font-weight:bold; margin:30px 0 20px 0; color:#000; border-bottom:1px solid #074A75; padding-bottom:10px;}
.sight_seeing_links li a{line-height: 32px; font-size:14px; font-weight:400; color:#747474;}
.sight_seeing_links li a:hover{color:#074A75; text-decoration:none;}

.seeing_bg_clr a{color:#768520; font-size:16px; font-weight:400;}
.seeing_bg_clr a:hover{text-decoration:none; color:#074A75;}

.nearby_heading_txt{font-size:32px; font-weight:bold; margin:30px 0 20px 0; color:#074A75;}
.sight_img_border{border:2px solid #074A75; margin-bottom:20px;}
.place_name{font-size:20px; font-weight:bold; color:#000;}
.sight_p_content{font-size:14px; font-weight:400; color:#747474; line-height:24px; text-align:justify;}*****/

.sight_seeing_page{width:100%; display:inline-block; padding:40px 0;}
.sight_seeing_heading_txt{font-size:32px; font-weight:bold; margin:0 0 0px 0; color:#000; font-family: "Poppins", sans-serif;}
.sight_seeing_content_txt {margin-top: 20px; font-size: 14px; font-weight: 400; color: #747474; font-family: "Poppins", sans-serif;}


.article_icon{width:100%; display:inline-block;}
.article_icon h1{font-size:28px; font-weight:bold; margin:20px 0 0 0; color:#000; font-family: "Poppins", sans-serif;}

.article{width:100%; display:inline-block; box-shadow:0 0 3px 0.13px; background:#fff; margin:30px 0 0 0;}
.article_img{width:50%; float:left;}
.article_img img{width:100%;}
.article_content{width:50%; display:inline-block; padding:40px;}
.article_content h1{font-size:24px; font-weight:bold; margin:0 0 20px 0; color:#000; font-family: "Poppins", sans-serif;}
.article_content p{font-size: 14px; font-weight: 400; color: #747474; font-family: "Poppins", sans-serif;}

.article_left{width:50%; float:left;}
.article_right{width:50%; display:inline-block;}

.page-numbers.current {background: #074A75; color: #fff; width: 40px; height: 40px; box-shadow: none;}
.page-numbers {line-height:40px; background:#FFF; border-radius:50%; border:none; display: inline-block; padding:0; margin-right:5px; color:#074A75; width:40px; height:40px; text-align:center;}
.page-numbers:hover{background:#074A75; text-decoration:none;color:#fff;}
.navigation.pagination {width:100%; display:inline-block; margin:20px 0 0 0; text-align:center;}




/*****location map page*****/
.location_map_page{width:100%; display:inline-block; padding:40px 0;}
.location_map_heading_txt{font-size:32px; font-weight:bold; margin:0 0 20px 0;  color:#000; padding-bottom:15px; font-family: "Poppins", sans-serif;}
.map_img {width: 100%;}







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

.top_header {display: none !important;}
.navbar-toggle.collapsed {top: 25px !important;}

.map_box {margin-top: 30px !important;}
.hotel_btn {margin-top: 20px !important;}


.article_img {width: 100% !important;}
.article_content {width: 100%;}

.article_left {width: 100% !important;}
.article_right {width: 100% !important;}

.article_img img {height:auto !important;}


}



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

.top_header {display: none !important;}
.navbar-toggle.collapsed {top: 25px !important;}

.map_box {margin-top: 30px !important;}
.hotel_btn {margin-top: 20px !important;}



.article_img {width: 100% !important;}
.article_content {width: 100%;}

.article_left {width: 100% !important;}
.article_right {width: 100% !important;}




}



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

.top_header {display: none !important;}
.navbar-toggle.collapsed {top: 25px !important;}



}



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

.top_header {display: none !important;}
.navbar-toggle.collapsed {top: 25px !important;}

.all_hotel_details_btn {width: 50% !important; margin-bottom:20px !important;}
.accessibility_btn {width: 50% !important;}


}




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

.contact_left ul li {padding-right: 5px !important;}

.hotel_highlights_icon {padding: 40px 0 0 0 !important;}

.foot_social_tag a {margin-right: 0px !important;}

.article_img img {height: 457px;}


.photos > div {width: 48.6% !important;}


} 


#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}

#filter-buttons button:hover {
  background: #ddd;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {

  width: 27rem;
  border: 2px solid transparent;
}
#filterable-cards{
	display: inline-flex;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }


.wrapper{
  margin: 100px auto;
  max-width: 1100px;
}
.wrapper nav{
  display: flex;
  justify-content: center;
}
.wrapper .items{
  display: flex;
  max-width: 720px;
  width: 100%;
  justify-content: space-between;
}
.items span{
  padding: 7px 25px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  color: #007bff;
  border-radius: 50px;
  border: 2px solid #007bff;
  transition: all 0.3s ease;
}
.items span.active,
.items span:hover{
  color: #fff;
  background: #007bff;
}

.gallery{
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}
.gallery .image{
  width: calc(100% / 4);
  padding: 7px;
}
.gallery .image span{
  display: flex;
  width: 100%;
  overflow: hidden;
}
.gallery .image img{
  width: 100%;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.gallery .image:hover img{
  transform: scale(1.1);
}
.gallery .image.hide{
  display: none;
}
.gallery .image.show{
  animation: animate 0.4s ease;
}
@keyframes animate {
  0%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
}

.preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;
  width: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.preview-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease;
}
.preview-box .details{
  padding: 13px 15px 13px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.details .title{
  display: flex;
  font-size: 18px;
  font-weight: 400;
}
.details .title p{
  font-weight: 500;
  margin-left: 5px;
}
.details .icon{
  color: #007bff;
  font-style: 22px;
  cursor: pointer;
}
.preview-box .image-box{
  width: 100%;
  display: flex;
}
.image-box img{
  width: 100%;
  border-radius: 0 0 3px 3px;
}
.shadow{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0,0,0,0.4);
}
.shadow.show{
  display: block;
}

@media (max-width: 1000px) {
  .gallery .image{
    width: calc(100% / 3);
  }
}
@media (max-width: 800px) {
  .gallery .image{
    width: calc(100% / 2);
  }
}
@media (max-width: 700px) {
  .wrapper nav .items{
    max-width: 600px;
  }
  nav .items span{
    padding: 7px 15px;
  }
}
@media (max-width: 600px) {
  .wrapper{
    margin: 30px auto;
  }
  .wrapper nav .items{
    flex-wrap: wrap;
    justify-content: center;
  }
  nav .items span{
    margin: 5px;
  }
  .gallery .image{
    width: 100%;
  }
}