body{
	background-image: url(../../images/back.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	
	
}

/*=============================================================================
	Navbar Styling
=============================================================================*/
.nav-menu{
	margin-top: 20px; 
	background-color: #fff; 
	padding-top: 5px;
}
.nav-menu ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
	width: 100%;
}
/*Create a horizontal list with spacing*/
.nav-menu li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
.nav-menu  a {
    display:block;
    min-width:160px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;

    text-decoration: none;
}
/*Hover state for top level links*/
.nav-menu  li:hover a {
    background: #570304;
	
}
/*Style for dropdown links*/
.nav-menu li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
.nav-menu  li:hover ul a:hover {
    background: #570304;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
.nav-menu li ul {
    display: none;
}
/*Make dropdown links vertical*/
.nav-menu  li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
.nav-menu li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
.nav-menu ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #333;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
     .nav-menu ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
     .nav-menu li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
     .nav-menu ul li, .nav-menu li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}




/*===============================================================================
Card Styling
=================================================================================*/
.card{
	margin-top: 20px; 
	padding: 20px;
	text-align: center; 
	background-color:#fff;
	border: solid 0.1px #999;
}

.container-chopper{
	    position: relative;
    font-family: Arial;
	box-shadow: 0px 0px 30px -5px;
	margin: 0px;
	padding: 0px;
}
.img-panel-block {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.7);
    color: white;
	text-align:center;
    width:100%;
}





$defaultSeconds: 3s;
body {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
}

.flex-container {
	
	height: 400px;
	padding-bottom: 50px;
	width: 100%;
	display: -webkit-flex; /* Safari */
	display: flex;
	background-color: #fff;
	overflow: hidden;
	@media screen and (max-width: 768px) {
		display:block;
	}
}
.flex-title {
	color: #f1f1f1;
	position: relative;
	font-size: 40px;
	margin: auto;
	text-align: center;
	
	top: 15%;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		transform: rotate(0deg) !important;
	}
}
@media screen and (max-width: 768px) {
	.flex-title{
		font-size:20px;
		padding:50px 0px;
	}
	.flex-container{
		display: block;
		height: 650px;
	}
}
.flex-about {
	opacity: 0;
	color: #f1f1f1;
	position: relative;
	width: 70%;
	font-size: 2vw;
	padding: 5%;
	top: 20%;
	border: 2px solid #f1f1f1;
	border-radius: 10px;
	line-height: 1.3;
	margin: auto;
	text-align: left;
	transform: rotate(0deg);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		padding: 0%;
		border: 0px solid #f1f1f1;
	}
}


.flex-slide {
	-webkit-flex: 1;  /* Safari 6.1+ */
	-ms-flex: 1;  /* IE 10 */    
	flex: 1;
	cursor: pointer;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	@media screen and (max-width: 768px) {
		overflow: auto;
		overflow-x: hidden;
	}
}
.flex-slide p {
	@media screen and (max-width: 768px) {
		font-size: 2em;
	}
} 
.flex-slide ul li {
	@media screen and (max-width: 768px) {
		font-size: 2em;
	}
} 
.flex-slide:hover {
	-webkit-flex-grow: 3;
	flex-grow: 3;
}
.home {
	
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-cyan-2-1030x494.jpg);
	background-size: cover;
	background-position: center center;

}

@keyframes aboutFlexSlide {
	0% {
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}
	50% {
		-webkit-flex-grow: 3;
		flex-grow: 3;
	}
	100% {
		-webkit-flex-grow: 1;
		flex-grow: 1;
	}
}

.flex-title-home {
	@media screen and (min-width: 768px) {
		transform: rotate(90deg);
		top: 15%;
		@include animation-properties((animation: homeFlextitle, animation-duration: $defaultSeconds, animation-iteration-count: 1, animation-delay: 0s));
	}
}



@keyframes homeFlextitle {
	0% {
		transform: rotate(90deg);
		top: 15%;
	}
	50% {
		transform: rotate(0deg);
		top: 15%;
	}
	100% {
		transform: rotate(90deg);
		top: 15%;
	}
}

.flex-about-home {
	opacity: 0;
	@media screen and (min-width: 768px) {
		@include animation-properties((animation: flexAboutHome, animation-duration: $defaultSeconds, animation-iteration-count: 1, animation-delay: 0s));
	}
}

@keyframes flexAboutHome {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}



.about {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-8-1030x494.jpg);
	background-size: cover;
	background-position: center center;

}


.contact-panel{
	margin: 10px;
}
@media screen and (min-width: 800px) {
	.contact-panel{
		margin: 1px;
	}
.about {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-8-1030x494.jpg);
	background-size: cover;
	background-position: center center;
}
}
.contact-form {
	width: 100%;
}
input {
	width: 100%;
}
textarea {
	width: 100%;	
}
.contact {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-1-1210x423.jpg);
	background-size: cover;
	background-position: center center;

}
.work {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-3-1030x494.jpg);
	background-size: cover;
	background-position: center center;

}
.activity {
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/bottom-slider/travel-banner-6-2-1210x423.jpg);
	background-size: cover;
	background-position: center center;

}




.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}




	
.banner-head h1 { font-family: Finger Paint; font-size: 45px; font-style: normal; font-variant: normal; font-weight: 800; line-height: 26.4px; text-align:center; } 
.banner-head h3 { font-size: 18px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; text-align: center; } 
	

/*======================================================================
				Shinny Button Styling
======================================================================*/
/* Slicebox Style */
	
.btnShinny{
  position: relative;
  margin: 20px;
  width: 150px;
  height: 80px;
  border-radius: 45px;
  background: #ff0000;
  box-shadow: inset 6px 6px 12px rgba(255,255,255,0.6), inset -6px -6px 12px rgba(0,0,0,0.6);
  border: none;
  border-bottom: 1px solid white;
  color:#fff;
  font-weight: 900;
}

.btnShinny::-moz-focus-inner {
  border: 0;
}

.btnShinny:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-image-source: radial-gradient(ellipse closest-side, rgba(0,255,255,0.6) 0%, rgba(0,0,0,0, 0) 100%);
  border-image-slice: 49% fill;
  border-image-width: 60px 45px 30px 45px;
  border-width: 1;
}

.btnShinny:after {
  content: attr(data-label);
  position: absolute;
  top: 6px; left: 18px; right: 18px; height: 36px;
  border-radius: 36px 36px 0 0 / 24px 24px 0 0;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.2));
	
  text-align: center;
  color: white;
  text-shadow: 3px 3px 6px black;
  font-size: 60px;
}

.btnShinny:hover {
  background: #777;
}

.btnShinny:hover:before {
  border-image-source: radial-gradient(ellipse closest-side, rgba(250,255,255,1) 0%, rgba(0,0,0,0) 100%);
}

.btnShinny:active {
  background: #333;
}

.btnShinny:active:before {
  border-image-source: radial-gradient(ellipse closest-side, rgba(250,250,250,1) 0%, rgba(0,0,0,0) 100%);
}

.btnShinny:focus {
  outline: none;
  border-image-source: radial-gradient(ellipse closest-side, rgba(0,0,0,0) 70%, rgba(250,250,250,0.33) 75%, rgba(250,250,250,0.33) 80%, white 85%, rgba(250,250,250,0.33) 90%, rgba(250,250,250,0.33) 95%, rgba(0,0,0,0));
  border-image-slice: 49%;
  border-image-width: 60px;
  border-image-outset: 18px;
  border-width: 0;
  border-bottom-width: 1px;
}
	
	
/*======================================================================
				Vertical Tab Styling
======================================================================*/
/* Slicebox Style */
		
/* Style the tab */
.tab {
    
    border: 1px solid #ccc;
    background-color: #f1f1f1;
	padding: 0px;
    min-height: 350px;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: solid 0,6px #888;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
	margin: 0px;
	
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #333;
	color: #fff;
}
.tab button.active span{
    border: solid 1px #fff;
	color: #fff;
}
/* Style the tab content */
.tabcontent {
    padding: 0px 12px;
    border: 1px solid #ccc;
    background-color:#fff;
    border-left: none;
    min-height: 350px;
	color:#777;
}	
.tabcontent h3{
	color:red;
}
.tabcontent p{
	text-align: center;
}
.tabcontent ul{
	font-size: 18px;   
	padding: 0px 5px;
	margin: 0px;
}
.tabcontent ul li {
   font-size: 18px;   
   padding: 0px 5px;
	margin: 0px;
}
.tab span{
	font-size: 15px; border:solid 1px #333; border-radius: 100%; padding: 20px;
}
.item div span{
	font-size: 15px; border:solid 1px #333; border-radius: 100%; padding: 10px;
}

.service-list{
	height:160px;
	padding:10px;
	text-align: center;
	color:#888;
	border:solid 1px #888;
	box-shadow: -5px 5px 25px -10px;
}
@media only screen and (max-width: 800px) {
	.content-banner{
		text-align: center;	
	}
	
	.item{
		text-align: center;
	}
	.item h3{
		text-align: center;
	}
}	
.tabcontent ul{
	list-style: none;
}
.tabcontent span{
	color: red;
}



.img-box-shadow{
	box-shadow: -5px 5px 25px 1px;
}

/*==================================================
 * Effect 2
 * ===============================================*/
	.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}
	.contentBox{
		
	}
	.content{
	
		padding: 5% 0;
	}
	.content p{
		font-size: 16px;
		color:#999;
		font-weight: 500;
	}	
	
.about-us div h1, .about-us div p{
	text-align: left;
	padding:0px;
	
}
.abtContent{
	padding: 0px 20px;
	color:#888;
	font-size: 22px;
}
.contact-form input[type=text], input[type=email], textarea{
	margin-bottom: 10px;
}
.contact-form textarea{
	min-height: 200px;
}
.side-left-contact{
	padding: 10px 50px 10px 50px;
}
@media only screen and (max-width: 800px) {
	.side-left-contact{
		padding: 5px;
	}
}
.side-contact h1, .side-contact h3, .side-contact p{
	text-align: center;
}
.side-contact ul{
	list-style: none;
}
.side-contact ul li{
	color:#777;
}
.side-contact span{
	color:red;
}
@media only screen and (max-width: 800px) {
	.side-contact{
			padding: 0px;
		margin: 0px;
	}
	.contact-content{
		padding: 0px;
		margin: 0px;
	}
}

/*===========================================================================================
	Footer
===========================================================================================*/

footer{
	background-color: #333;
	color: #999;
	padding: 20px;
}
@media only screen and (max-width: 800px) {
	footer{
	text-align: center;
}
}	
footer ul{
	list-style: none;
	padding: 0px;
}
footer strong{
	color: #fff;
}
.footer-center{
	text-align: center;
}
.social{
	text-align: center;
}
.social img{
	width: 25px;
	margin: 0px 10px;
}
.copy-right{
	background-color: #000000;
	text-align: center;
	padding: 15px 0px 5px 0px;
}