body{
    font-family: 'Roboto', sans-serif; 
    width: 100%;
    overflow-x: hidden;
}


.navi-bar{
    background-color: rgba(256, 256, 256, 0.8);
    z-index: 9999;
    position: absolute;
    padding-top: 5px;
}
.main-navi{
    width: 100%;
    position: relative;
    z-index: 999;
    
    height: 70px;
    color: #ffffff;
    }

.logo{
    padding: 5px 20px;
    margin-left: 20px;
    margin-top: -11px;
    font-size: 0.5em;
    font-weight: 700;
    
    
    

}

.nav-container{
  padding: 30px 30px;
  
  height: 200px;
  float: left;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  
}

.home-intro{
    
    height: 736px;
}

.home-intro-inside{
    
  height: 350px;
  overflow: hidden;
  background-image: url(../img/itenary-img/colombo-sri-lanka.jpg);
  background-size: cover;
  background-position: center center;
}

.introMain-inside h1{
  font-size: 10em;
  padding-top: 80px; 
  text-align: center;
  font-family: 'Roboto', sans-serif; 
  font-weight: 900;
  color: #fff;
}

.Whale-slide{
  width: 57% !important;
}

 

.intro-title{
    margin-top: 18%;
 font-size: 4em;
    
}  

.title-top{
  color: rgba(7, 61, 93, 0.8);
  
  font-size: 1em;
  font-weight: 700;
  /*text-shadow: 2px 1px 5px rgba(7,27,40,0.4);*/
}

.title-2nd{
  
  color: #fff;;
  font-size: 1.7em;
  font-weight: 700;
  position: relative;
  top: 0px;
 /* text-shadow: 2px 1px 5px rgba(7,27,40,0.4);*/
}


.title-3rd{
  
  color:#227093;
  font-size: 2.6em;
  font-weight: 700;
 /* text-shadow: 2px 1px 5px rgba(7,27,40,0.4);*/
  margin: 0px;
  
}



.title-4th{
  color: #2c3e50;
  font-size: 1.5em;
  font-weight: 700;
  
  
  
  
  
}


.para-style1{
  color: #34495e;
  font-size: 1.1em;
  font-weight: 100;
  
  /*background-color:rgba(255,255,255, 0.2);*/
  
  
}


.para-style2{
  color: #000;
  font-size: 1.2em;
  font-weight: 100;
  
  
  /*background-color:rgba(255,255,255, 0.2);*/
  
  
}



.btn-cuz{
  border: 0.11em solid #fff !important;
  border-radius: 10em !important;
  padding: 20px 25px !important;
  color: #fff !important;
  background: none !important;
  line-height: 0% !important;
}

.intro-sub{
    margin-top: 0%;
    margin-left: 80%;
    float: right;
    margin-right: 15%;
    margin-top: -25px;
    color: #fff;
   
}


/* side 2 */

.slide2 .intro-sub{
  margin-top: 0%;
  margin-left: 90%;
  float: right;
  margin-right: 15%;
  margin-top: -50px;
  color: #fff;
 
}

.slide2 .title-top{
  color: #fff;
  font-size: 1em;
  font-weight: 100;
}

.slide2 .title-2nd{
  color: rgba(215, 148,  110, 0.5);
    
  font-size: 1.7em;
  font-weight: 700;
  position: relative;
  top: -20px;
}

.slide2 .intro-sub{
    margin-top: 0%;
    margin-left: 80%;
    float: right;
    margin-right: 15%;
    margin-top: -50px;
    color: #fff;
   
}

.slide2 .intro-title{
  margin-top: 18%;
  margin-left: 35%;
  font-size: 4em;
  
} 


/* side3 */

.slide3 .intro-sub{
  margin-top: 0%;
  margin-left: 90%;
  float: right;
  margin-right: 15%;
  margin-top: -50px;
  color: #fff;
 
}

.slide3 .title-top{
  color: #000000;
  font-size: 1em;
  font-weight: 100;
}

.slide3 .title-2nd{
  color: rgba(0, 0,  0, 0.8);
    
  font-size: 1.7em;
  font-weight: 700;
  position: relative;
  top: -20px;
}

.slide3 .intro-sub{
    margin-top: 0%;
    margin-left: 80%;
    float: right;
    margin-right: 25%;
    margin-top: -50px;
    color: #000000;
    width: 200px;
   
}

.slide3 .intro-title{
  margin-top: 18%;
  margin-left: 35%;
  font-size: 4em;
  
} 






.introMain{
  position: relative;
  top: 0;
}

.main-nav{
  position: absolute;
  z-index: 999;
  width: 100%;
  
}


/* fade slider */
.slides {
 /* height:800px; */
  margin:auto;
  overflow:hidden;
  position:relative;
  width:100%;
}


.nav{
  padding-top: 0px;
  
}

.nav-item a {
  color: #2484c6;
  font-weight: 100;
}


.nav-center{
  width: 29%;
  margin: 0 auto;
}

.no-radius{
  border-radius: 0px !important;
}

.main-navi-btn i{
  color: #2484c6 !important;
  font-size: 2em !important;
}

.main-navi-btn:hover{
  background-color:  #fff !important;
  
}


.para-slider-back{
  float: left;
  width: 105%;
  height: 796px;
  position: absolute;
}







.left-box-mid{
  background-image: url(../img/beach.jpg);
  background-position-x: top left;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 630px;
  



}



.left-box-mid-2{
  
  overflow: hidden;
}



.info-sri-lanka{
  height: 630px;
  
}


.focus-in-expand {
	-webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-11 16:45:9
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


.bounce-in-left {
	-webkit-animation: bounce-in-left 1.1s both;
	        animation: bounce-in-left 1.1s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-4-11 16:49:1
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-left
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



.main-itinerary{
  height: 600px;
}


.itinerary-container{
  overflow: hidden;
}


.caption_1{
  float: left;
}

.middle-box{
  /*background-color: rgba(116, 185, 255, 0.8);*/
  /*padding: 20px 140px;*/
  padding: 30px;
  height: 100%;
  
  
}

.mid-back{
  -moz-transform: skew(-38deg, 0deg);
  -webkit-transform: skew(-38deg, 0deg);
  -o-transform: skew(-38deg, 0deg);
  -ms-transform: skew(-38deg, 0deg);
  transform: skew(-38deg, 0deg);
}


.block-img{
  float: left;
  position: relative;
  height: 500px;
  overflow: hidden;
  width: 100%;
  
 
  
}

.block-img img{

  width: 100%;
    

}


.mid-row .title-info{


  padding: 15px;
  color: #000;
  width: 100%;
  background:rgba(255,255,255, 0.5);
  float: right;
  margin-top: 80%;
  
  height: 30%;
  /*text-shadow: 2px 2px 2px #000000;*/
  font-weight: 700;
  



}

.title-info-style1{
 
  /* 
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */


  position: absolute;
  top: 0;
  padding: 30% 15px 15px 15px;
  color: #000;
  width: 100%;
  background:rgba(255,255,255, 0.5);
  
  float: right;
  text-align: center;
  height: 100%;
  /*text-shadow: 2px 2px 2px #000000;*/
  font-weight: 700;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0, 0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: -3px 0px 20px 1px rgba(0,0,0,0.26);
-moz-box-shadow: -3px 0px 20px 1px rgba(0,0,0,0.26);
box-shadow: -3px 0px 20px 1px rgba(0,0,0,0.26);


  
}






.title-info-style2{
 
  /* 
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */


  
padding: 15px;
color: #000;
width: 35%;
background:rgba(255,255,255, 0.5);
float: left;

height: 100%;
/*text-shadow: 2px 2px 2px #000000;*/
font-weight: 700;

  
  
}



.hover-info{
  
  padding: 15px;
color: #000;
width: 35%;
position: relative;
right: -35%;
top: 50%;
background:rgba(255,255,255, 0.7);
float: right;

height: 30%;
/*text-shadow: 2px 2px 2px #000000;*/
font-weight: 700;
display: none;


}

.tile-title{
  color: #fff;
  font-size: 2.5em;
  width: 100%;
  font-weight: 900;
  
}

.tile-title-2{
  color: #fff;
  font-size: 1em;
  width: 100%;
  font-weight: 900;
  
}

.tile-sub{
  font-weight: 100;
  color: #273746;
}

.tile-title-small{
  font-size: 1.5em;
}





.featured-post{
  
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
 
  background-size: cover;
  overflow: hidden;
}

.featured-post img{
  width: 100%;
}



.featured-post-2{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
 max-height: 300px;
  background-size: cover;
  overflow: hidden;

}

.featured-post-2 img{
  width: 100%;
}
/*
.box-1{
  background-image: url(../img/itenary-img/sigiriya-sri-lanka.jpg);
}

.box-2{
  background-image: url(../img/itenary-img/negombo.jpg);
}

.box-3{
  background-image: url(../img/itenary-img/polonnaruwa-sri-lanka.jpg);
}

.box-4{
  background-image: url(../img/itenary-img/sigiriya-sri-lanka.jpg);
}

.box-5{
  background-image: url(../img/itenary-img/Kandy.jpg);
}

.box-6{
  background-image: url(../img/itenary-img/sigiriya-sri-lanka.jpg);
}

.box-7{
  background-image: url(../img/itenary-img/whale-sri-lanka.jpg);
}

.box-8{
  background-image: url(../img/itenary-img/sigiriya-sri-lanka.jpg);
}
 */

.footer-sec{
  padding-top: 50px;
  color:rgba(255,255,255, 0.8);
  font-weight: 100;


}

.footer-sec p{
  font-size: 14px;
  

}

.intro-background-layer{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2484c6+0,34495e+100 */
background: rgb(36,132,198); /* Old browsers */
background: -moz-linear-gradient(top, rgba(36,132,198,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(36,132,198,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(36,132,198,1) 0%,rgba(52,73,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2484c6', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
height: 600px;
  


}

.footer-background-layer{
background: #264348;
height: 400px;

}