@charset "utf-8";
/* 
CSS Auther - Dinusha M Thennakoon - flexwalkers.com
Version : 0.0.1
 */

/* CSS Document */
body { font-family: 'Source Sans Pro', sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }


.header { background-color: #f6f7f8; padding-bottom:0px; box-shadow:0 0 3px rgba(0,0,0,0.3); transition:all 0.3s cubic-bezier(1,1,1,1); }

.top-header{ background-color:#000; z-index:9999;}
.top-header .social{ text-align:right;}
.top-header ul{ display:inline-block}
.top-header ul li{ display:inline-block; padding:10px; color:#FFF; font-size:14px;}
.top-header ul li .fa{color:#238dc1;}

nav {position:absolute;top:40px;width:100%;z-index:999;} 
.nav-top{ position:fixed; top:0 !important; background-color:rgba(0,0,0,.7);transition:all 0.3s ease-in-out;box-shadow:0 0 7px rgba(0,0,0,0.5);}
.nav { display:flex; }
.nav li { display:inline-block; width:100%; font-family: 'Rubik', sans-serif; text-transform:uppercase; border-left:1px #8a9cba solid; border-top:3px transparent solid; vertical-align:top; position:relative; overflow:hidden;background-color:rgba(0, 0, 0, 0.6);border-bottom: 1px solid #82a5c3;  }
.nav li a { position:relative; z-index:2; padding:5px 0; text-align:center; display:block; transition:all 0.3s cubic-bezier(1,2,0,1); }
.nav li a span { text-align:left;font-size: 16px;font-weight: 600; display:inline-block; padding:10px 5px; vertical-align:middle; }
.nav li a span small { display:block; font-size: 12px; font-weight: 300; }

.nav li:nth-child(8n+1) { border-top-color:#f9a424; border-left:none;} .nav li:nth-child(8n+1) a span { color:#f9a424;}
.nav li:nth-child(8n+1):hover,.nav li:nth-child(8n+1).active { border-top-color:#d68408;}
.nav li:nth-child(8n+1) .img { background-image: url(../img/nav/home-1.png); }
.nav li:nth-child(8n+2) { border-top-color:#e73735; } .nav li:nth-child(8n+2) a span { color:#e73735; }
.nav li:nth-child(8n+2):hover,.nav li:nth-child(8n+2).active { border-top-color:#bc1715; }
.nav li:nth-child(8n+2) .img { background-image: url(../img/nav/about-1.png); }
.nav li:nth-child(8n+3) { border-top-color:#a43975; } .nav li:nth-child(8n+3) a span { color:#a43975; }
.nav li:nth-child(8n+3):hover,.nav li:nth-child(8n+3).active { border-top-color:#89225c; }
.nav li:nth-child(8n+3) .img { background-image: url(../img/nav/sri-lanka-1.png); }
.nav li:nth-child(8n+4) { border-top-color:#558dd1; } .nav li:nth-child(8n+4) a span { color:#558dd1; }
.nav li:nth-child(8n+4):hover,.nav li:nth-child(8n+4).active { border-top-color:#2d67ad; }
.nav li:nth-child(8n+4) .img { background-image: url(../img/nav/packages-1.png); }
.nav li:nth-child(8n+5) { border-top-color:#0c4489; } .nav li:nth-child(8n+5) a span { color:#0c4489; }
.nav li:nth-child(8n+5):hover,.nav li:nth-child(8n+5).active { border-top-color:#083062; }
.nav li:nth-child(8n+5) .img { background-image: url(../img/nav/blog-1.png); }
.nav li:nth-child(8n+6) { border-top-color:#1fbaa7; } .nav li:nth-child(8n+6) a span { color:#1fbaa7; }
.nav li:nth-child(8n+6):hover,.nav li:nth-child(8n+6).active { border-top-color:#119d8c; }
.nav li:nth-child(8n+6) .img { background-image: url(../img/nav/offers-1.png); }
.nav li:nth-child(8n+7) { border-top-color:#4cb63b; } .nav li:nth-child(8n+7) a span { color:#4cb63b; }
.nav li:nth-child(8n+7):hover,.nav li:nth-child(8n+7).active { border-top-color:#2d921d; }
.nav li:nth-child(8n+7) .img { background-image: url(../img/nav/testimonials-1.png); }
.nav li:nth-child(8n+8) { border-top-color:#78be13; } .nav li:nth-child(8n+8) a span { color:#78be13; }
.nav li:nth-child(8n+8):hover,.nav li:nth-child(8n+8).active { border-top-color:#6caa12; }
.nav li:nth-child(8n+8) .img { background-image: url(../img/nav/contact-1.png); }

.nav li .img { width: 32px; height: 32px; overflow:hidden; background-position:center 32px; transition:all 0.4s cubic-bezier(0.5,0,0,0.5); }
.nav li:hover .img,.nav li.active .img { background-position: center 0; }
.nav li:hover a span,.nav li.active a span { color: #fff; }
.nav > li:after{ display:block; content:""; background-color:rgba(0,0,0,1.00); position:absolute; width:100%; height:100%; top:-100%; z-index:0; transition:all 0.3s cubic-bezier(1,0.5,0.5,1);  }
.nav > li:nth-child(8n+1):after {background-color: #f9a424;}
.nav > li:nth-child(8n+2):after {background-color: #e73735;}
.nav > li:nth-child(8n+3):after {background-color: #a43975;}
.nav > li:nth-child(8n+4):after {background-color: #558dd1;}
.nav > li:nth-child(8n+5):after {background-color: #0c4489;}
.nav > li:nth-child(8n+6):after {background-color: #1fbaa7;}
.nav > li:nth-child(8n+7):after {background-color: #4cb63b;}
.nav > li:nth-child(8n+8):after {background-color: #78be13;}

.nav li:hover:after,.nav li.active:after { top:0; }
/*.nav li:hover { overflow:hidden;}*/
.nav li ul { position:absolute; top:60px; z-index:9999; background-color:#558dd1; }
.nav li ul li { border:none; }
.nav li ul li a { color:#fff; padding:12px; text-align:left; border-bottom:1px rgba(255,255,255,0.1) solid; }
.nav li ul li a:hover { background-color:#437cc1; }
.nav-btn { font-family: 'Rubik', sans-serif; font-size:20px; display:none; background-color:#03092a; width:100%; border:none; padding:10px 0; color:#fff; text-transform:uppercase; outline:none; position:fixed; top:0; }
.nav-btn:before { content:""; display:inline-block; width:20px; height:3px; background-color:#fff; position:relative; top:-12px; margin-right:7px; box-shadow:0 7px 0 #fff,0 14px 0 #fff; }

/* ///BANNER/// */
.banner-wrap { position:relative; }
.banner-inner img,.banner-wrap img { max-width:100%;}
.logo { position:absolute;  display:flex;align-items:center;justify-content:center; height:80%; z-index:99; width:100%; }
.logo div {font-family: 'Rubik', sans-serif;color: #fff;font-size: 34px;font-weight: 400; background-color:rgba(0,0,0,0.3); padding:7px 0; margin-top:10px;}
.caption{ position:absolute;width:100%;height:100%;background:url(../img/banner/pat.png);z-index:9;color:#fff; display:flex;align-items:center;justify-content:center;font-size:26px; bottom:0;font-style:italic;}


/*  /// CONTENT ///  */
.r-btn{ display:inline-block;background-color:transparent;padding:7px 25px;vertical-align:middle;-webkit-transition: 0.3s all ease-in;-moz-transition: 0.3s all ease-in;transition:0.3s all ease-in;position:relative;overflow:hidden;border:none;outline:none;margin-top:35px;border:1px solid #2aa3ad;margin-left: 10px;}
.r-btn:before{content: "";display: block;width: 100%;height: 100%;position: absolute;top: 0;left: -94%;background:#2aa3ad;-webkit-transform: skew(-20deg);transform: skew(-20deg);-webkit-transition: 0.2s all ease-in;-moz-transition: 0.2s all ease-in;transition: 0.2s all ease-in;z-index: -1;}
.r-btn:hover:before { -webkit-transform: translateX(100%) skew(-20deg); transform: translateX(100%) skew(-20deg); opacity:1;}
.r-btn span{z-index:3;font-family: 'Rubik', sans-serif;font-size:12px;font-weight:600;letter-spacing: 1px;text-transform: uppercase;color:#2aa3ad;}
.r-btn:hover span { color:#FFF;}

.saicon{ content:''; display:flex; float:left;display: -webkit-box; display: -moz-box; display: -ms-flexbox;}
.h1 span, .h2 span, .h3 span { display:block; font-size:13px; font-style:italic; color:#198C9F;line-height:1.4em;font-family: 'Source Sans Pro', sans-serif;}
.p{ padding:25px 40px 0 5px; font-size:15px; font-weight:400; color:#0E2D3B; line-height:1.5em;text-align: justify;}

/* /// VISIT /// */
.list-img{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display:flex; justify-content:center; position:relative;align-items:center;}
.list-img li{flex-grow:1; margin:0 4px; background-color: #ffffff;box-shadow:0 -4px 15px rgba(0,0,0,0.3); border-radius:2px; -webkit-transition:0.3s all cubic-bezier(0.79, 0.7, 0.3, 3);transition:0.3s all cubic-bezier(0.79, 0.7, 0.3, 3); position:relative;overflow:hidden;}
.list-img li span{ position:absolute; color:#FFF; background-color:rgba(0,102,255,.6); right:0; bottom:0; padding:7px 15px;}
.list-img li img{ width:100%;}
.list-img li .visit{-webkit-transition:0.3s all ease-in;-moz-transition:0.3s all ease-in;transition:0.3s all ease-in;position:absolute;color:#FFF;font-size:18px;left:0;top:-100%;display:flex;align-items:center;justify-content:center;height:100%;width:100%;z-index:1;text-shadow:2px 1px 1px #0b16b0;font-weight:600; }
.list-img li:hover .visit{top:0;}
.list-img li:hover img{filter:hue-rotate(50deg); cursor:pointer;}

/* /// PACKAGE /// */
.pack-img{ display:flex; padding:10px;background:rgba(63, 63, 63, 0.3);flex-wrap: wrap; justify-content:center;}
.pack-img h2{display: block;color: #fff;width: 100%;}
.pack-img li{ display:inline-block; float:left; position:relative; overflow:hidden;box-shadow: 0 -4px 15px rgba(0,0,0,0.7); margin:3px;max-width: 47%;}
.pack-img li span{position:absolute; color:#FFF; background-color:rgba(0,102,255,.9); right:0; bottom:0; padding:7px 15px;transition: all ease-in-out 0.4s;}
.pack-img li .view{	position: absolute;background-color:rgba(38, 180, 227, 0.4);width: 100%;height: 100%;top: 0;z-index:99;-webkit-transition: all ease-in-out 0.3s;-moz-transition: all ease-in-out 0.3s;transition: all ease-in-out 0.3s;-webkit-transform: scale(4);-moz-transform: scale(4);transform: scale(4);opacity: 0; display:flex;align-items:center;justify-content:center;}
.pack-img li .view i{background-color:rgba(0,102,255,.8);color: #fff;padding: 9px 20px;border-radius: 2px;text-transform: uppercase;font-size: 13px;display:flex;align-items:center;justify-content:center; }
.pack-img li:hover .view{-moz-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);opacity: 1;}
.pack-img li:hover span{ bottom:-100%;}
.pack-img li:nth-child(4n+1) .view{background-color:rgba(191, 142, 33, 0.5);}
.pack-img li:nth-child(4n+1) span, .pack-img li:nth-child(4n+1) .view i{background-color:rgba(191, 142, 33, 0.9);}
.pack-img li:nth-child(4n+2) .view{background-color:rgba(227, 38, 38, 0.5);}
.pack-img li:nth-child(4n+2) span, .pack-img li:nth-child(4n+2) .view i{background-color:rgba(227, 38, 38, 0.9);}
.pack-img li:nth-child(4n+3) .view{background-color:rgba(33, 191, 82, 0.5);}
.pack-img li:nth-child(4n+3) span, .pack-img li:nth-child(4n+3) .view i{background-color:rgba(33, 191, 82, 0.9);}
.pack-img li:nth-child(4n+4) .view{background-color:rgba(38, 180, 227, 0.5);}
.pack-img li:nth-child(4n+4) span, .pack-img li:nth-child(4n+4) .view i{background-color:rgba(38, 180, 227, 0.9);}

/* /// COUSTOM MAP /// */
.map-box{ position:relative; padding-right:10px;}
.cus-map{padding: 20px; position:absolute; max-width:400px }
.cus-map img{max-width:100%; border-radius:5%;}
.cus-map .cs-map{position: relative;overflow: hidden;padding: 14px 20px; display:inline-block; cursor:pointer;}
.cs-map .sel{position: absolute;top:55%;left:45%;width: 10%;height: 10%;background-color:rgba(1%,13%,22%,.6);z-index: 99;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;-webkit-transition: all ease-in-out 0.5s;-moz-transition: all ease-in-out 0.5s;transition: all ease-in-out 0.5s;-moz-transform: scale(0);-webkit-transform: scale(0);transform: scale(0);opacity:1;}
.cs-map:hover .sel{-webkit-transform: scale(20);-moz-transform: scale(20);transform: scale(20);opacity:0;}
.map-text{margin-right: -10px;text-align:left; min-height:515px; padding:10% 0 0 15%; width:70%; float:right; border-left:10px solid transparent; border-top:5px solid transparent;margin-top: 40px;
-moz-border-image: -moz-linear-gradient(left, #0b811d 0%, #0c0d9c 100%); -webkit-border-image: -webkit-linear-gradient(left, #0b811d 0%, #0c0d9c 100%);border-image: linear-gradient(to right, #0b811d 0%, #0c0d9c 100%);border-image-slice:1;background:#fff;}
.map-text ul li{ padding-top:15px;font-family: 'Rubik', sans-serif;color: #116b22;}
.map-text ul li i{ color:#FF7E00; padding:0 10px;}
.map-text .r-btn{ width:135px; position:relative; padding:10px 25px; height:32px}
.map-text .r-btn:before{ z-index:0;}
.map-text .r-btn span{ position:absolute;}

/* /// WHY SAPPHIRE /// */
.cli-box{ text-align:center; color:#FFF;}
.cli-box h3{ display:inline-block;}.cli-box h3 i{ padding-right:10px;}
.testimonial li{width: 90%;display: inline-block;margin: 13px;box-sizing: border-box;position: relative;opacity: 1;-webkit-transition: opacity .25s ease;-moz-transition: opacity .25s ease;-o-transition: opacity .25s ease;transition: opacity .25s ease;border: 2px solid #dadada; margin-top:12%;}
.testimonial li .img{  width:100%; height:80px; text-align:center; margin-top:-12%;}
.testimonial li .img img{border-radius:50%;border: 2px solid #c4c4c9;padding: 4px;background-color:#fff;}
.testimonial li p{font-size: 17px;color: #636363;padding: 9px 24px 26px;line-height: 29px;margin-top: 10px;}
.testimonial li .holder{border-top: 2px solid #dadada;display: table;table-layout: fixed;width: 100%;height: 100%;}
.testimonial li .holder p{font-size: 13px;line-height: 20px;font-weight: 800;text-transform: uppercase;color: #464646;letter-spacing: 1px;padding: 15px 0;}
.testimonial li .holder i{display: table-cell;height: 100%;vertical-align: middle;width: 15%;border-right: 2px solid #dadada;box-sizing: border-box; }
.cli-box .r-btn{ margin-top:10px; margin-bottom:20px;}

/* /// Services /// */
.eni-ml{ margin-left:20px;}
.eni-pl{ padding-left:20px;}
.ser{ padding:5px; margin-top:25px;}
.ser img{ max-width:100%;}
.ser li{ background-color:#FFF;display:block;box-shadow:0 -4px 15px rgba(0,0,0,0.3); margin-bottom:20px;border:1px solid #dbdbe0; min-height:184px;text-align: left;}
.ser li span{ width:100%;}
.ser div h3{ padding:10px 0; font-size:16px;border-bottom: 1px solid #dae4ed;line-height: 1.4em;}
.ser div{ padding:10px 15px 20px;}
.ser div p{font-size:14px; line-height:1.4em; margin-top:8px; color:#039;}
.a{display: inline-block;padding: 15px 10px 0 0;font-size: 16px;color: #d73c13}
.a:hover{ color:#2B2D7B;}
.title{display: block !important;text-align: left;}

/* /// FOOTER /// */
.footer{ background-color:#05233E;}
.ftr-top{ border-bottom:1px solid #2d3560; padding:20px;background:#031d35;box-shadow: 1px 4px 8px rgba(0,0,0,0.8);}
.ftr-top .f-social li { display:inline-block; padding-right:10px;}
.ftr-mid{ background-image:url(../img/pattern-sapphire-footer.png); padding:20px;}
.ftr-mid .address li{ font-size: 15px; font-weight: 400; padding:2px 10px;line-height: 1.4em; color:#FFF; padding-left:35% !important;}
.ftr-mid .address li:first-child{ font-size: 18px; font-weight: 600; padding: 10px; font-style:italic; color:#4bb1ef;}
.ftr-mid .address li span{ font-size: 16px; font-weight: 600;}
.ftr-mid .address li i{ font-size:15px; color:#3B89B4; padding-right:12px;}
.ftr-mid .fb{ text-align:right;}
.ftr-bot{border-top:1px solid #888; padding:20px;background:#011321;}
.ftr-bot p{ color:#FFF !important;font-size:13px !important;}
.ftr-bot p a{ color:#2c8de3;} .ftr-bot p a:hover{ color:#6a737b;}

@media all and (max-width: 840px) {
	.nav{display:block;background:rgba(0,0,0,.8);margin:4px 0 15px 0;width:100%;left:-100%;position:absolute;transition:all 0.4s cubic-bezier(0.5,0,0,0.5);}
	.m-nav{left:0;}
	.nav-btn{ display:block;} .nav-top{top:40px !important;}
	.nav li{ max-width:50%; width: 24%;}
	.footer .ftr-mid .col-4:first-child { width: 100%; text-align: center; }
	.cli-box .row .col-4:last-child { margin: 10px auto; width: 60%; }
}


@media all and (max-width: 540px) {
	.cli-box .row .col-4:last-child { width:100%; }
	.nav li{ max-width:50%;width: 100%;}

	.banner-wrap{ margin-top:45px;}
	.top-header{ display:none;}
	.caption{ height:70%; font-size:13px;}
	.top-header .social, .top-header, .pack-img, .ftr-mid, .ftr-mid .fb { text-align:center;}
	.h1 span, .h2 span, .h3 span{ font-size:9px; text-align:center;}
	.p{ font-size:11px; padding:20px 15px; line-height:1.4em;}
	.r-btn{ margin:10px 0 25px 30%;}
	.cli-box .r-btn{margin-left: 0px;}
	.saicon{ position:absolute;}
	.list-img li span{ padding:5px 15px; font-size:10px;}
	.pack-img li{ float:none; max-width:98%;}
	.cus-map{ bottom:-5%; text-align:center;}
	.map-box{ display:table;margin: 5% auto;width:98%; float:left;}
	.cus-map img{ max-width:50%;}
	.map-text{padding: 5%;width:100%;} .map-text .r-btn{ margin-left:10px;}
	.map-text ul li{ font-size:12px;}
	.cli-box h3{display: block;padding: 10px;}
	.testimonial li{ width:90%; margin-bottom:30px;}
	#testi{ margin-top:5px !important;}
	.title{text-align:center;}
	.ftr-top .f-social{ float:none !important; text-align:center;}
	.ftr-mid .address li{ padding-left:0 !important;}
	.ftr-mid .address{ margin-bottom:15px;}
	.ftr-bot p{ float:none !important; display:block; text-align:center; padding-bottom:10px;}
	}