@import url('fonts/fonts.css');

html, body { height:100%; }

body { background:#fff; margin: 0; padding: 0; font-family: 'camptonbook', Arial; color:#03272e; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
/* scrollbar change start */
* { scrollbar-width: auto; scrollbar-color: #293269 #ffffff; }
*::-webkit-scrollbar { width: 12px; }
*::-webkit-scrollbar-track { background: #ffffff; }
*::-webkit-scrollbar-thumb { background-color: #293269; border-radius: 5px; border: 3px solid #ffffff; }
/* scrollbar change end */
a { color:#118e9b;  text-decoration:none;  transition:all 0.6s;  -moz-transition:all 0.6s; -webkit-transition:all 0.6s;  -o-transition:all 0.6s; }
a:hover { color:#005681;  transition:all 0.6s;  -moz-transition:all 0.6s;  -webkit-transition:all 0.6s;  -o-transition:all 0.6s; }
p, h1, h2, h3, h4, h5, h6, ul, li, img, iframe, form, table, td, tr { line-height:100%; font-weight:normal; margin:0;  padding:0;  border:none;  border-collapse:collapse; }
b, strong { font-family: 'Campton Bold', Arial; font-weight: normal; }
content { display: block; width:1280px; margin:0 auto; }
.clear { clear:both; }
#toTop { display:none; width:80px; height:80px; background:url(img/totop.webp) no-repeat center #d8c198; background-size:36px auto; text-align:left; text-indent:-9999px;  position:fixed; bottom:0; right:40px; z-index:20000; cursor:pointer; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px;  -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; }

/* fixed contact links start */
.fixed-contact-links { display:flex; flex-wrap:wrap; width:auto; height:80px; position:fixed; left:40px; bottom:0; z-index:10001; }
  .fixed-contact-links a { display:block; width:auto; height:80px; padding: 24px 20px 24px 62px; margin: 0 20px 0 0; text-align:left; line-height: 32px; font-size:20px; color:#fff; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; }
    .fixed-contact-links a.whatsapp { background: url(img/icon/whatsapp.webp) no-repeat center left 20px #5cc83e; }
      .fixed-contact-links a.whatsapp:hover { box-shadow: 0 0 20px #9ffe84; }
    .fixed-contact-links a.phone { background: url(img/icon/phone.webp) no-repeat center left 20px #1398cc; }
      .fixed-contact-links a.phone:hover { box-shadow: 0 0 20px #6dd6ff; }
/* fixed contact links end */

/* animated header start */
.cbp-af-header { position:fixed; top:0; left:0; z-index:10000; width:100%; height:170px; padding:0; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }
  
  header { display:block; position: relative; width: 100%; height: 120px; padding: 40px 0 0 0; background: #fff; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }

  a.logo { display:block; width:162px; height:80px; position: absolute; top:20px; left:40px; text-align:left; text-indent:-9999px; opacity: 1; background: url(img/logo.webp) no-repeat center center;  background-size: 100% 100%;}
    a.logo:hover { transform: scale(0.94); -ms-transform: scale(0.94); -webkit-transform: scale(0.94); -o-transform: scale(0.94); -moz-transform: scale(0.94); }

  a.res-button { display:block; width:auto; height:60px; position: absolute; top:30px; right:40px;  padding: 20px 20px 20px 60px; text-align:left; opacity: 1; background: url(img/icon/check.webp) no-repeat center left 20px #118e9b; color:#fff; font-size:20px; line-height: 20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
    a.res-button:hover { background-color: #f1b443; }

  ul.social-icons { display:block; float: right; width: auto; height: 50px; transition:all 0.6s;  -moz-transition:all 0.6s; -webkit-transition:all 0.6s;  -o-transition:all 0.6s;  opacity: 1; padding: 10px 35px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px; background-color: rgb(23,31,79,0.78); background-color: rgba(23,31,79,0.78); }
      ul.social-icons li { display: block; float: left; height: 30px; margin: 0 5px; }
        ul.social-icons li a { display:block; width: 30px; height: 30px; text-align:left; text-indent:-9999px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
          ul.social-icons li a.ig { background: url(img/icon/ins.webp) no-repeat center center; background-size: 100% 100%; }
          ul.social-icons li a.fb { background: url(img/icon/fb.webp) no-repeat center center; background-size: 100% 100%; }
          ul.social-icons li a.tw { background: url(img/icon/tw.webp) no-repeat center center; background-size: 100% 100%; }
          ul.social-icons li a.ta { background: url(img/icon/tra.webp) no-repeat center center; background-size: 100% 100%; }
          ul.social-icons li a.email { background: url(img/icon/email.webp) no-repeat center center; background-size: 100% 100%; margin-left:30px; }
            ul.social-icons li a:hover { transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); box-shadow: 0 0 10px #fff; }
            
  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { height: 120px; padding: 0; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }
  .cbp-af-header.cbp-af-header-shrink header { height: 70px; padding: 15px 0 0 0; }
  .cbp-af-header.cbp-af-header-shrink a.logo { width:81px; height:40px; top:15px; opacity: 1;}
  .cbp-af-header.cbp-af-header-shrink a.res-button { height:40px; top:15px; padding: 10px 20px 10px 60px; opacity: 1; }
/* animated header end */

.spot { width:100%; height:100%; position: relative;  box-shadow: 0 10px 70px #9296b6; }
  .spot span { position: absolute; bottom:0; left:0; z-index: 2; width: 50%; height: 100%; padding: 0; background-color: rgb(41,50,105,0.62); background-color: rgba(41,50,105,0.62); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
  .spot span article { width:100%; padding: 0 40px 0 28%; }
    .spot span article h1 { display: block; text-align: right; font-family: 'BioRhyme Bold', 'Times New Roman', Times, serif; font-size: 50px; color:#fff; }
    .spot span article p { text-align: right;  font-family:'Campton Medium', Arial, Helvetica, sans-serif; font-size: 16px; color:#fff; line-height: 140%; margin:24px 0; }
    .spot span article a { display: block; width: auto; height: 60px; padding: 20px; float: right; background-color: #fff; color:#293269; font-size:14px; line-height: 20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;  font-family:'Campton Medium', Arial, Helvetica, sans-serif; border-bottom:3px solid #b6b6b6;  }
      .spot span article a:hover { background-color: #293269; color:#fff; border-bottom:3px solid #151c44; }
    .spot .swiper-container { width: 100%; height: 100%; padding: 0; margin:0; position: relative;  }
      .spot .swiper-container .swiper-slide { padding: 0; margin:0; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
        .spot .swiper-container .swiper-slide img { width:100%; height:auto; }

.page-header { display:block; position: relative; width:100%; height: auto; padding: 160px 0 40px 0; background:#bbecff; }
  .page-header h1 { display: block; position: relative; z-index: 2; font-size:32px; color:#283879; font-family:'Campton Bold', Arial, Helvetica, sans-serif; line-height: 120%; text-align: center; } 
    .page-header h1 span { display: block; font-size:18px; color:#474747; font-family:'Campton Medium', Arial, Helvetica, sans-serif; line-height: 100%; text-align: center; } 
      .phfi { width: auto; height: 140%; position: absolute; top:0; right: 0; z-index: 1; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

.content-holder { width:100%; padding:80px 0; }

  .content-holder h1 { font-size:26px; color:#364672; font-family:'Campton Bold', Arial, Helvetica, sans-serif; line-height: 100%; margin:0 0 30px 0; }
  .content-holder h2 { font-size:32px; font-family: 'BioRhyme Bold', 'Times New Roman', Times, serif; color:#118e9b; line-height: 130%; margin:0 0 30px 0; }
  .content-holder h3 { font-size:32px; font-family: 'BioRhyme Bold', 'Times New Roman', Times, serif; color:#1aa2b0; text-align: center; line-height: 100%; margin:0 0 40px 0; }
    .content-holder h3 span { display: block; font-size:14px; color:#293269; line-height: 130%; margin:0 0 6px 0; font-family:'Campton Medium', Arial, Helvetica, sans-serif; }

  .content-holder p { font-size: 20px; line-height:140%; margin:0 0 20px 0;}
    .content-holder p:last-child {margin:0; }
    .centered-text { text-align: center; }

    a.buttons { display:inline-block; width:auto; height:60px; padding:20px; line-height:20px; text-align:center; font-size:14px; color:#293269; background-color: #fff; border-bottom:3px solid #b6b6b6; font-family:'Campton Medium', Arial, Helvetica, sans-serif; font-size: 14px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
      a.buttons:hover { background-color: #293269; color:#fff; border-bottom:3px solid #151c44; }

  .home-icons { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: 40px; grid-row-gap: 0px; padding:40px 0 0 0; background: url(img/dotline.webp) no-repeat center top 20px; background-size: 100% auto; margin-bottom:40px; }
    .home-icons div { display:block; text-align: center; color:#353535; font-size: 17px; line-height: 120%; }
      .home-icons div img { display:block; width:180px; height:auto; margin:0 auto 20px auto; }
        .content-holder .home-icons h1.grid1 { color:#63b4c0; margin:0 0 20px 0; }
        .content-holder .home-icons h1.grid2 { color:#c48d29; margin:0 0 20px 0; }
        .content-holder .home-icons h1.grid3 { color:#1e97c6; margin:0 0 20px 0; }
        .content-holder .home-icons h1.grid4 { color:#158f9c; margin:0 0 20px 0; }

  .blue-hosbes { position: relative; background:url(img/blue-hosbes-bg.webp) no-repeat center bottom #5ac0de; background-size: 100% auto; }
    .sand-image { position: absolute; bottom:-175px; right:0; z-index: 1; }
    .blue-hosbes figure { display:block; width: 50%; float: left; position:relative; top:-140px; }
      .blue-hosbes figure img { display:block; width: 100%; border:10px solid #fff;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
    .blue-hosbes article { display:block; width: 50%; float: left; padding: 0 0 0 80px; position:relative; z-index: 2; }
      .blue-hosbes article h2 { color:#fff; }
      .blue-hosbes article p { color:#03272e; line-height:120%;  margin:0 0 30px 0; font-size: 18px; }

  .hp-tours { padding-bottom:130px; background:url(img/dotline2.webp) no-repeat center bottom; background-size: 100% auto; }

  .cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto, 1fr); grid-column-gap: 40px; grid-row-gap: 40px; margin:0 0 40px 0; }
    .cards a { display: block; width: 100%; overflow: hidden; position: relative; padding: 20px; background-color: #f9f9f9; border:1px solid #cdeaf2; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; -webkit-box-shadow: 0px 20px 30px -11px rgba(194,194,194,0.75); -moz-box-shadow: 0px 20px 30px -11px rgba(194,194,194,0.75); box-shadow: 0px 20px 30px -11px rgba(194,194,194,0.75); }
      .cards a:hover { background-color: #f5eee2; -webkit-box-shadow: 0px 20px 30px -11px rgba(194,194,194,1); -moz-box-shadow: 0px 20px 30px -11px rgba(194,194,194,1); box-shadow: 0px 20px 30px -11px rgba(194,194,194,1); }	
      .cards a img { display:block; width:100%; height:auto; margin:0 0 20px 0; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; }
      .cards a h4 { display:block; color:#01558b; font-size: 22px; line-height: 140%; margin: 0 0 20px 0; font-family:'Campton Medium', Arial, Helvetica, sans-serif; }
      .cards a article { display:block; width:100%; color:#6b6b6b; font-size: 16px; line-height: 20px; margin: 0 0 20px 0; }   
      .cards a span { display:block; width:100%; padding: 0 20px; height:40px; line-height: 40px; font-size:16px; color:#053962; background-color: #d4f6ff; text-align: right; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; transition:all 0.6s;  -moz-transition:all 0.6s;  -webkit-transition:all 0.6s;  -o-transition:all 0.6s; }
      .cards a:hover span { color:#fff; background-color: #053962; }

      .cards.blogs { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; margin:0 0 40px 0; }
      .cards.blogs a { border:1px solid #1dcac0; }
      .cards.blogs a h4 { color:#16aca3; font-size: 30px; line-height: 34px; min-height: 68px; font-family:'Campton Bold', Arial, Helvetica, sans-serif; }
      .cards.blogs a article { font-size: 19px; line-height: 130%; height: 200px; }   
      .cards.blogs a span { font-size:19px; color:#053962; background-color: #59e3db; }
      .cards.blogs a:hover span { color:#59e3db; background-color: #053962; }
      
      a.buttons.camel { display:block; width:200px; background-color: #ecdec4; border-bottom:3px solid #ffcc6e; margin:0 auto; }
      a.buttons.camel:hover { background-color: #ffcc6e; color:#293269; border-bottom:3px solid #c6963d; }


  img.full { display: block; width:100%; margin:0 0 40px 0; box-shadow: 0 10px 50px #9296b6; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
  img.side-right { display: block; width:40%; float:right; margin:0 0 40px 40px; box-shadow: 0 10px 50px #9296b6; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

  .flexthis { display:flex; flex-wrap:wrap; }

  .menu-clmn { display: block; width:25%; padding:0 40px 0 0; position: -webkit-sticky; position: sticky;  top: 110px; align-self: flex-start; }
    .menu-clmn ul { display:block }
      .menu-clmn ul li { display:inline; }
        .menu-clmn ul li a { display:block; color:#305699; padding:5px 10px; margin: 0 0 2px 0; font-size: 15px; line-height: 120%; border-bottom:1px solid #cdeaf2; }
        .menu-clmn ul li a:hover, .menu-clmn ul li a.active { background-color: #305699; color:#fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
      .menu-clmn ul li a.maincat { font-size:18px; padding: 12px 10px; background-color: #ecdec4; border:none; font-family:'Campton Bold', Arial, Helvetica, sans-serif;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
      .menu-clmn ul li a.maincat:hover { background-color: #d4b580; color:#305699;}

  .cntct-clmn { display: block; width:75%; padding:0; }
    
    .cntct-clmn ul { display: block; }
      .cntct-clmn ul li { line-height: 150%; font-size: 18px; margin: 0 0 10px 0; }

    .tour-photo-spot { display: block; width: 100%; height: auto; margin:0 0 60px 0; overflow: hidden; box-shadow: 0 10px 50px #9296b6; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

    .tour-photo-spot .swiper-container { width: 100%; height: 100%; padding: 0; margin:0; }
      .tour-photo-spot .swiper-container .swiper-slide { padding: 0; margin:0; overflow: hidden; }
        .tour-photo-spot .swiper-container .swiper-slide img { width:100%; height:auto; }
        .tour-information { display:block; width: 100%; }
        .tour-detail { display:block; float: left; width: 60%; padding:0 40px 0 0; }
          .content-holder .tour-detail h1, .content-holder .tour-detail h2, .content-holder .tour-detail h3 { text-align: left; }
          .tour-detail ul li { padding: 0 0 0 20px; list-style-position: inside; }

        .tour-short-info { display:block; float: left; width: 40%; padding: 40px; border:1px solid #cdeaf2; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
        .tourcub { display:block; width: 100%; padding: 20px; margin: 40px 0; font-size:18px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background-color: #ecdec4; }

        .tour-short-info a.res-button { width:100%; height:60px; position: static; top:none; right:none;  }
  
/* 

  .thumbnails { display:flex; flex-wrap:wrap; }
  .thumbnails a { width:29.33%; display:block; margin:0 4% 40px 0; text-align: center; font-size:15px; line-height: 140%; color:#2c2c2c; }
  .thumbnails a img { width:100%; -webkit-transition:0.6s; transition:0.6s;  -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px;
                      -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.2); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.2); }
  .thumbnails a:hover { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); }	
  .thumbnails.ytv a img { margin:0 0 15px 0; }

  .lightbox {	cursor: pointer; 	position: fixed; 	width: 100%;	height: 100%; 	top: 0; 	left: 0; 	-webkit-filter: none; 	z-index: 99999999999; 	background-color:rgb(255,255,255, 0.9); background-color:rgba(255,255,255, 0.9); }
	.lightbox img { display: block; position: absolute; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
	.lightbox-loading { 	background: url(scripts/lightbox/loading.gif) center center no-repeat; 	width: 32px; 	height: 32px; 	margin: -16px 0 0 -16px; 	position: absolute; 	top: 50%; 	left: 50%; }
	.lightbox-caption { 	display: none; 	position: absolute; 	left: 0; 	bottom: 0; 	width: 100%; 	text-align: center; 	z-index: 9998; }
	.lightbox-caption p { 	margin: 0 auto; 	max-width: 70%; 	display: inline-block; 	*display: inline; 	*zoom: 1;	padding: 10px; 	color: #fff; 	font-size: 12px; 	line-height: 18px; }
	.lightbox-button { position: absolute; z-index: 9999; background: no-repeat center center; width: 32px; height: 32px; opacity:0.9; -webkit-transition: all 0.6s; -moz-transition:    all 0.6s; -ms-transition:     all 0.6s; transition: 		all 0.6s; }
	.lightbox-button:hover, .lightbox-button:focus { opacity: 1; }
 	.lightbox-close { right: 30px; top: 20px; background-image: url('scripts/lightbox/close.webp'); }
	.lightbox-nav { top: 45%; width:100%; margin-top: -16px; }
	.lightbox-nav-next { width: 20px;  height: 40px; right: 30px; background: url('scripts/lightbox/arrow.webp') no-repeat -12px -2px; }
	.lightbox-nav-prev { left: 30px; width: 20px; height: 40px;  background: url('scripts/lightbox/arrow.webp') no-repeat -8px -54px; }

 */ 

  .contact-information { display:block; float: left; width: 60%; padding:0 80px 0 0; }
    .contact-information iframe { display:block; width: 100%; height: 480px; overflow: hidden; margin: 0 0 80px 0; box-shadow: 0 10px 50px #9296b6; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
  .contact-form { display:block; float: left; width: 40%; }

  .online-res-photo { display:block; float: left; width: 37%; padding:0 20px 0 0; position: -webkit-sticky; position: sticky;  top: 110px; align-self: flex-start; }
    .online-res-photo img { display:block; width: 100%; height: auto; margin: 0; box-shadow: 0 10px 50px #9296b6; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
  .online-res-form { display:block; float: left; width: 63%; }

  a.ucplogo { display:block; width:300px; height:auto; margin:160px auto 0 auto; padding: 120px 0 0 0; font-size: 36px; font-family: 'BioRhyme Bold', 'Times New Roman', Times, serif; color:#1aa2b0; text-align:center; background: url(img/logo.webp) no-repeat center top;  background-size: 162px 80px;}
    a.ucplogo span { font-size: 20px; font-family:'Campton Bold', Arial, Helvetica, sans-serif;}


footer { display: block; width:100%; padding:80px 40px 120px 40px; background: url(img/footer-bg-big-transparent-logo.webp) no-repeat top left, url(img/footer-bg-shadow.webp) no-repeat top; background-size: auto auto, 100% 74px; background-color:  #293269; position: relative; }		 

  footer a.logo { position: absolute; top:80px; right:40px; left:auto; background: url(img/logo-footer.webp) no-repeat center center; background-size: 100% 100%;}

  ul.footer-menus { display:block; float:left; padding: 0 40px 0 0; border-right: 2px solid #fff; margin:0 40px 0 0; text-align: left; color:#fff; font-size:14px; line-height:140%; }
   ul.footer-menus.rights { float:right; text-align: right; margin: 120px 0 0 0; padding: 0; border:none; font-size:12px; }
    ul.footer-menus b { display:block; font-size:18px; line-height: 100%; margin: 0 0 20px 0; font-family: 'BioRhyme Regular', 'Times New Roman', Times, serif; }
    ul.footer-menus li { display:block; line-height:150%; }
      ul.footer-menus li a { display:block; color:#fff; }
        ul.footer-menus li a:hover { color:#15c8db; }
        .add-border-left { border-left:none; }

        ul.footer-menus li.location { background: url(img/icon/location.webp) no-repeat top left; padding:0 0 0 24px;  }
        ul.footer-menus li.phone2 { background: url(img/icon/phone2.webp) no-repeat top left; padding:0 0 0 24px;  }
        ul.footer-menus li.email2 { background: url(img/icon/email2.webp) no-repeat top left; padding:0 0 0 24px;  }

        img.tursab { width:240px; } 

.error-page {display:block; width: 600px; margin:0 auto; padding:5% 0 0 0; text-align: center;}
  .error-page img {display:block; width: 100%; max-width: 480px; height: auto; margin:0 auto 40px auto;}
  .error-page h1 { font-size:36px; color:#293269; line-height: 100%; margin:0 0 20px 0; text-align: center; }
 



/* responsive css */ 

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

content { width:1160px; }

a.res-button { padding: 20px 12px 20px 52px; background: url(img/icon/check.webp) no-repeat center left 12px #118e9b; font-size:18px; letter-spacing: -1px; }
  .cbp-af-header.cbp-af-header-shrink a.res-button { padding: 10px 12px 10px 52px; }

  .spot .swiper-container .swiper-slide img { width:auto; height:100%; }

}

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

  content { width:100%; padding: 0 40px; }

/* animated header start */
.cbp-af-header { height:220px; }
  header { height: 170px; padding: 110px 0 0 0; }

  ul.social-icons { padding: 10px 35px; }
      ul.social-icons li a.email { margin-left:0; }

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { height: 120px; }
  .cbp-af-header.cbp-af-header-shrink header { height: 70px; padding: 15px 0 0 0; }
  .cbp-af-header.cbp-af-header-shrink a.logo { width:81px; height:40px; top:-40px; }
  .cbp-af-header.cbp-af-header-shrink a.res-button { height:40px; top:-40px; padding: 10px 12px 10px 52px; }
/* animated header end */
  
.page-header { padding: 260px 0 40px 0; }
  .page-header h1 { font-size:26px;  } 
    .page-header h1 span { font-size:17px; } 

.content-holder { padding:60px 0; }

  .content-holder h1 { font-size:22px; margin:0 0 20px 0; }
  .content-holder h2 { font-size:26px; margin:0 0 20px 0; }
  .content-holder h3 { font-size:26px; margin:0 0 30px 0; }
    .content-holder h3 span { font-size:14px; }

.spot { box-shadow: 0 10px 60px #9296b6; }
  .spot span article { padding: 0 40px 0 18%; }
    .spot span article h1 { font-size: 40px; }

    .home-icons { grid-column-gap: 20px; padding:20px 40px 0 40px; }
    .home-icons div { font-size: 16px; }
      .home-icons div img { width:160px; }

      .sand-image { bottom:-100px; width: 300px; height: auto; }
      .blue-hosbes figure { top:-120px; }
      .blue-hosbes article { padding: 0 0 0 40px; }
        .blue-hosbes article p { font-size: 16px; }

        .cards { grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; margin:0 0 40px 0; }
            .cards a h4 { font-size: 20px; line-height: 130%; }
            .cards a article { font-size: 15px; }   
            .cards a span { font-size:15px; }
      
            .cards.blogs { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; margin:0 0 40px 0; }
            .cards.blogs a h4 { font-size: 24px; line-height: 30px; min-height: 60px; }
            .cards.blogs a article { font-size: 15px; height: 180px; }   
            .cards.blogs a span { font-size:16px; }
            
        img.side-right { width:30%;  }
      
        .contact-information { width: 50%; padding:0 40px 0 0; }
        .contact-information iframe { width: 100%; height: 400px; margin: 0 0 40px 0; }
      .contact-form { width: 50%; }
    
      .online-res-photo { width: 30%; padding:0 20px 0 0; }
      .online-res-form { width: 70%; }

ul.footer-menus { padding: 0 20px 0 0; margin:0 20px 0 0;}
 ul.footer-menus.rights { margin: 120px 0 0 0; font-size:11px; }
  ul.footer-menus b { font-size:16px; }
  img.tursab { width:200px; } 


  .menu-clmn { width: 30%; padding:0 20px 0 0; }
      .menu-clmn ul li a { font-size: 14px; }
    .menu-clmn ul li a.maincat { font-size:16px;}
.cntct-clmn { width:70%; }
    .cntct-clmn ul li { font-size: 16px; }
  .tour-photo-spot { margin:0 0 40px 0; }
      .tour-detail { width: 100%; float: none; padding:0 0 40px 0; }
      .tour-short-info { float: none; width: 100%; }

      .tourcub { width:100%; float: none; }

	}

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

#toTop { width:60px; height:60px; background-size:26px auto; right:40px; }

.fixed-contact-links { height:60px; left:40px; }
  .fixed-contact-links a { height:60px; padding: 20px 20px 20px 62px; margin: 0 10px 0 0; line-height: 20px; font-size:18px; }

/* animated header start */
.cbp-af-header { height:170px; }
  header { height: 120px; padding: 40px 0 0 0; }

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { height: 120px; }
  .cbp-af-header.cbp-af-header-shrink header { height: 70px; padding: 15px 0 0 0; }
  .cbp-af-header.cbp-af-header-shrink a.logo { width:81px; height:40px; top:15px; }
  .cbp-af-header.cbp-af-header-shrink a.res-button { height:40px; top:15px; padding: 10px 12px 10px 52px; }
/* animated header end */

  .spot span article { padding: 0 40px 0 14%; }
    .spot span article h1 { font-size: 34px; }
    .spot span article p { font-size: 14px; }

    .page-header { padding: 160px 0 40px 0; }
  .page-header h1 { font-size:24px;  } 
    .page-header h1 span { font-size:16px; } 

    .content-holder h1 { font-size:20px; margin:0 0 20px 0; }
    .content-holder h2 { font-size:24px; margin:0 0 20px 0; }
    .content-holder h3 { font-size:24px; margin:0 0 30px 0; }
      .content-holder h3 span { font-size:13px; }

    .home-icons { grid-column-gap: 10px; padding:20px 40px 0 40px; }
    .home-icons div { font-size: 14px; }
      .home-icons div img { width:120px; }

      .cards.blogs a h4 { font-size: 22px; }
      .cards.blogs a article { font-size: 14px; height: 180px; }   
      .cards.blogs a span { font-size:14px; }
     
      
      footer { padding:160px 40px 120px 40px; }		 
      footer a.logo { top:40px; right:none; left:calc(50% - 80px);}
      ul.footer-menus { display:block; float:left; width: 33.33%; padding: 0 20px; border-right: 2px solid #fff; margin:0; font-size:13px; }
      .add-border-left { border-left: 2px solid #fff; }
       ul.footer-menus.rights { float:right; width: 100%; text-align: center; margin:0; padding: 40px 20px 0 20px; border:none; font-size:12px; }
        ul.footer-menus b { font-size:15px; }
    
	}

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

html, body { height:auto; }

#toTop { width:40px; height:40px; background-size:20px auto; right:20px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }

.content-holder { padding:40px 20px; }
content { width:100%; padding: 0; }

.fixed-contact-links { height:40px; left:20px; }
  .fixed-contact-links a { height:40px; padding: 10px 20px 10px 62px; font-size:13px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }

/* animated header start */
.cbp-af-header { height:120px; }
  
  header { height: 80px; padding: 20px 0 0 0; }

  a.logo { width:122px; height:60px; top:10px; left:20px;}

  a.res-button { height:40px; top:20px; right:20px;  padding:10px 20px 10px 46px; background: url(img/icon/check.webp) no-repeat center left 10px #118e9b; font-size:14px; }

  ul.social-icons { height: 40px; padding: 5px 15px; }
      ul.social-icons li { margin: 0 5px; }
          ul.social-icons li a.email { margin-left:0; }
            
  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { height: 120px; padding: 0; transition:all 0.6s; -moz-transition:all 0.6s; -webkit-transition:all 0.6s; -o-transition:all 0.6s; }
  .cbp-af-header.cbp-af-header-shrink header { height: 60px; padding: 10px 0 0 0; }
  .cbp-af-header.cbp-af-header-shrink a.logo { width:81px; height:40px; top:10px; opacity: 1;}
  .cbp-af-header.cbp-af-header-shrink a.res-button { height:40px; top:10px; padding:10px 20px 10px 46px; }
/* animated header end */

.spot { height:auto; padding: 80px 0 0 0; }
  .spot span article { padding: 0 20px 0 10%; }
    .spot span article h1 { font-size: 20px; }
    .spot span article p { font-size: 12px; margin:16px 0; }
    .spot span article a { height: 40px; padding: 10px 20px; font-size:12px; }
    .spot .swiper-container { width: 100%; height: auto;  }
        .spot .swiper-container .swiper-slide img { width:100%; height:auto; }

        .page-header { padding: 130px 0 20px 0; }
        .page-header h1 { font-size:20px;  } 
          .page-header h1 span { font-size:14px; } 
      
  .home-icons { grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; padding:60px 0 0 0; background: url(img/dotline.webp) no-repeat center top; background-size: 100% auto; margin-bottom:20px; }
    .home-icons div img { width:140px; }
            
    .blue-hosbes figure { width: 100%; float: none; top:-80px; }
      .blue-hosbes figure img { border:5px solid #fff; }
    .blue-hosbes article { width: 100%; float: none; padding: 0; }
      .blue-hosbes article h2 { text-align: center; }
      .blue-hosbes article p { font-size: 15px; text-align: center; }

      a.buttons { display:block; width:200px; height:40px; padding:10px 20px; line-height:20px; margin:0 auto; font-size:13px; }

  .hp-tours { padding-bottom:70px; }

  .cards { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; margin:0 0 20px 0; }
      .cards a img { margin:0 0 16px 0; }
      .cards a h4 { font-size: 16px; margin: 0 0 16px 0; }
      .cards a article { font-size: 14px; margin: 0 0 16px 0; }   
      .cards a span { padding: 0 16px; font-size:14px; }

      .cards.blogs { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; margin:0 0 20px 0; }
      .cards.blogs a h4 { font-size: 22px; line-height: 30px; min-height: 60px; }
      .cards.blogs a article { font-size: 15px; }   
      .cards.blogs a span { font-size:15px; }
      
     footer { padding:120px 20px 60px 20px; background: url(img/footer-bg-big-transparent-logo.webp) no-repeat top left, url(img/footer-bg-shadow.webp) no-repeat top; background-size: 200px auto, 100% 60px; background-color:  #293269; position: relative; }		 

     footer a.logo { top:40px; right:none; left:calc(50% - 70px);}

     ul.footer-menus { float:none; display: block; width: 100%; padding: 20px 0; border-right: none; border-bottom:2px solid #fff; margin:0; text-align: center;}
      ul.footer-menus.rights { float:none; text-align: center; margin:40px 0 0 0; padding: 0; font-size:12px; }


           .add-border-left { border-left:none; border-top:2px solid #fff; }
   
           ul.footer-menus li.location { background:none; padding:0; }
           ul.footer-menus li.phone2 { background:none; padding:0; }
           ul.footer-menus li.email2 { background:none; padding:0; }
   
           img.tursab { width:240px; } 

           .content-holder h1 { font-size:20px; margin:0 0 20px 0; }
           .content-holder h2 { font-size:22px; margin:0 0 20px 0; }
           .content-holder h3 { font-size:22px; margin:0 0 20px 0; }
             .content-holder h3 span {font-size:13px; }
         
           .content-holder p { font-size: 15px;}

           img.side-right { width:50%; }
      
           .contact-information { float: none; width: 100%; padding:0; margin:0 0 40px 0; }
           .contact-information iframe { width: 100%; height: 420px; margin: 0 0 40px 0; }
         .contact-form { float: none; width: 100%; }
       
         .online-res-photo { float: none; width: 100%; padding:0; position:static; top: none; margin:0 0 60px 0; }
         .online-res-form { float: none; width: 100%; }
       
         a.ucplogo { display:block; width:300px; height:auto; margin:160px auto 0 auto; padding: 120px 0 0 0; font-size: 36px; font-family: 'BioRhyme Bold', 'Times New Roman', Times, serif; color:#1aa2b0; text-align:center; background: url(img/logo.webp) no-repeat center top;  background-size: 162px 80px;}
           a.ucplogo span { font-size: 20px; font-family:'Campton Bold', Arial, Helvetica, sans-serif;}
       
        
         .menu-clmn { display: none;}
     
         .cntct-clmn { width:100%; display: block; float: none; }
         
           .cntct-clmn ul li { line-height: 140%; font-size: 16px; }
     
         .tour-photo-spot { margin:0 0 40px 0; box-shadow: 0 10px 30px #9296b6; }
     
             .tour-information { display:block; width: 100%; }
             .tour-detail { display:block; float: none; width: 100%; padding:0 0 40px 0; }
     
             .tour-short-info { display:block; float: none; width: 100%; padding: 20px; }
     
             .tour-short-info a.res-button { width:100%; height:60px; position: static; top:none; right:none; font-size: 18px; letter-spacing: 0; line-height: 40px;  }
             .tourcub { font-size:15px; }

   

  }

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

  #toTop { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;  -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }

  /* fixed contact links start */
.fixed-contact-links { height:40px; left:20px; }
.fixed-contact-links a { height:40px; padding: 10px 10px 10px 30px; margin: 0 5px 0 0; line-height: 20px; font-size:13px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
  .fixed-contact-links a.whatsapp { background: url(img/icon/whatsapp.webp) no-repeat center left 10px #5cc83e; background-size: auto 14px; }
  .fixed-contact-links a.phone { background: url(img/icon/phone.webp) no-repeat center left 10px #1398cc; background-size: auto 14px; }
/* fixed contact links end */

  a.res-button { height:40px; padding: 10px 10px 10px 30px; background: url(img/icon/check.webp) no-repeat center left 10px #118e9b; background-size: auto 14px; font-size:13px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.cbp-af-header.cbp-af-header-shrink a.res-button { height:40px; top:10px; padding: 10px 10px 10px 30px; }

  .spot span article p, .spot span article a { display: none;  }

  .sand-image { bottom:-66px; width: 200px; height: auto; }

  .cards a { padding: 10px; }
      .cards a img { margin:0 0 10px 0; }
      .cards a h4 { font-size: 17px; line-height: 130%; margin: 0 0 10px 0; }
      .cards a article { font-size: 14px; line-height: 120%; margin: 0 0 10px 0; min-height: none; }   
      .cards a span { padding: 0 10px; font-size:14px; }

      .cards.blogs a h4 { font-size: 19px; line-height: 120%; min-height: none; }
      .cards.blogs a article { font-size: 14px; line-height: 120%; height: auto; min-height: none; }   
      .cards.blogs a span { font-size:14px; }
    
  .error-page { width: 280px; }
  .error-page img { width: 100%; max-width: 280px; margin:0 auto 20px auto; }
  .error-page h1 { font-size:20px; margin:0 0 14px 0; }

  a.ucplogo { width:280px; margin:80px auto 0 auto; padding: 100px 0 0 0; font-size: 22px; background-size: 162px auto;}
    a.ucplogo span { font-size: 14px; }
  
    .tourcub { font-size:13px; }


}

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

  a.logo { width:81px; height:40px; top:20px;}

  a.res-button { font-size:10px; letter-spacing: -1px; }


  .cards { display: block; grid-column-gap: none; grid-row-gap: none; margin:0 0 20px 0; }
    .cards a { display: block; width: 100%; margin-bottom:20px; }

      .cards.blogs { display: block; grid-template-rows: none; margin:0 0 20px 0; }
      .cards.blogs a article { height: auto; }   

      img.side-right { width:100%; float:none; margin:0 0 20px 0; }

      
      .home-icons { grid-column-gap: 10px; grid-row-gap: 10px; padding:50px 0 0 0; }
      .home-icons div img { width:100px; }
            

}