/*       Just setting CSS for the page   */

* {
	margin: 0;
	padding: 0;
  }
  
  html,
  css {
	width: 100%;
	height: 100%;
  }
  img.carousel-cell-image{
      width: 300px;
	  height: 300px;
	  filter: brightness(0.5);
  }
  .font-Montserrat{
	font-family: 'Montserrat', sans-serif;
  }
  .orange-white .accent-bg {
    background-color: #d60e14;
}
  .carousel-cell {
   height: 310px;
    width: 310px;
}
  .filter-custom-color{
    background-color: #FD4001;
    /* width: 104%; */
  }
  .background-cards{
	background-image: url(./img/background.svg);
	background-repeat: no-repeat;
    background-size: contain;
  }
 .custom-btn-green {
    background-color: #20B11F;
}


  .color-black {
	color: black!important;
}

.cards-transflix {
	position: relative;
	/* z-index: 10; */
}

.cards-transflix .titulo {
	background: #c1181a;
	text-align: center;
	padding-top: 85px;
	padding-bottom: 250px;
}

.cards-transflix .titulo h1 {
	color: #fff;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	margin: 0px;
	font-size: 28px;
}

.ml-ajust {
	margin-left: -16px!important;
}

.cards {
	display: table;
	margin: 0 auto;
	margin-top: -50px;
	padding-bottom: 75px;
}

.cards .card:first-child {
	background: #131212;
	width: 364px;
	height: 420px;
	border-radius: 8px;
	font-family: 'Roboto', sans-serif;
	position: relative;
	z-index: 5;
	border-radius: 12px;
    color: #eaeaea;
    box-shadow: 1px 8px 13px 0px #4444449c
	/* background: #ffffff;
	width: 298px;
	height: 340px;
	padding: 50px 0px 47px 0px;
	font-family: 'Roboto', sans-serif;
	margin-top: 57px;
	box-shadow:0 0px 10px 0 #eeeeee;
	border-radius: 12px; */
}

.cards .card:nth-child(2) {
	background: #131212;
	width: 364px;
	height: 420px;
	border-radius: 8px;
	font-family: 'Roboto', sans-serif;
	position: relative;
	z-index: 5;
	border-radius: 12px;
    color: #eaeaea;
    box-shadow: 1px 8px 13px 0px #4444449c
}

.cards .card:first-child,
.cards .card:last-child {
	background: #131212;
	width: 364px;
	height: 420px;
	border-radius: 8px;
	font-family: 'Roboto', sans-serif;
	position: relative;
	z-index: 5;
	border-radius: 12px;
    color: #eaeaea;
    box-shadow: 1px 8px 13px 0px #4444449c
	/* background: #ffffff;
	width: 298px;
	height: 340px;
	padding: 50px 0px 47px 0px;
	font-family: 'Roboto', sans-serif;
	margin-top: 57px;
	box-shadow:7px 8px 9px 4px #00000069    ;
	border-radius: 12px; */
}

.cards .card {
	float: left;
}

.preco-promo {
	text-align: center;
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.cards .card h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 64px;
	text-align: center;
	width: 200px;
	display: table;
	margin: 0 auto;
	margin-top: 10px;
	/* margin-bottom: 30px; */
}

.cards .card h1 span {
	font-size: 28px;
	float: left;
	margin-top: 30px;
}

.cards .card .coroa {
	display: table;
	margin: 0 auto;
	margin-top: -30px;
	margin-bottom: 30px;
}
/*NOVAS ALTERACOES CSS*/

.pos-header{
	background-color: #BF1522;
	height: 64vh;
	top: 0;
}
.content-header h2{
	color:white;
	font-size: 2em;
	margin: 0;
	padding: 10px;
}
.btn-reserva1{
	color:white;
	background-color: #17B40B;
	border-radius: 12px;
	border: none;
	padding: 12px 36px;
	z-index: 2;
	position: absolute;
	top: 65%;
	left: 30%;
}
/* DESCRICAO CARDS PASSEIOS*/
.desc-cards-passeios{
	position: absolute;
    color: white;
    font-weight: 900;
    bottom: 10%;
	left: 6%;
	right: 6%;
    font-size: 1.4em;
    padding: 0;
    margin: 0;
}
			

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
/*    start code for the actual button:         */


/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 156px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #1da519;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -38px;
  text-align: center;
}

#text a {
  color: white;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;
}
#shape-disable {
    stroke-width: 6px;
    fill: transparent;
    stroke: #f5f5f5;
    /* stroke-dasharray: 85 400; */
    stroke-dashoffset: -220;
    transition: 1s all ease;
}
.svg-wrapper:hover #shape-disable {
    stroke-dasharray: 50 0;
    stroke-width: 3px;
    stroke-dashoffset: 0;
    stroke: #ca1b1e;
}

h1{
	font-family: 'Roboto', sans-serif;
	 font-weight: 500;
  }
  h2{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
  }
  hr{
	border-top: 1px solid #05F3E0!important;
  }
  button:focus{
	border: 1px solid #0af4e0;
	outline: none !important;
  }
  .gooey {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 142px;
	height: 40px;
	margin: -20px 0 0 -71px;
	background: #2b2b2b;
	filter: contrast(20);
  }
  .gooey .dot {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 12px;
	left: 15px;
	filter: blur(4px);
	background: #ff0000;
	border-radius: 50%;
	transform: translateX(0);
	animation: dot 2.8s infinite;
  }
  .gooey .dots {
	transform: translateX(0);
	margin-top: 12px;
	margin-left: 31px;
	animation: dots 2.8s infinite;
  }
  .gooey .dots span {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin-left: 16px;
	filter: blur(4px);
	background: #ff0000;
	border-radius: 50%;
  }
  @-moz-keyframes dot {
	50% {
	  transform: translateX(96px);
	}
  }
  @-webkit-keyframes dot {
	50% {
	  transform: translateX(96px);
	}
  }
  @-o-keyframes dot {
	50% {
	  transform: translateX(96px);
	}
  }
  @keyframes dot {
	50% {
	  transform: translateX(96px);
	}
  }
  @-moz-keyframes dots {
	50% {
	  transform: translateX(-31px);
	}
  }
  @-webkit-keyframes dots {
	50% {
	  transform: translateX(-31px);
	}
  }
  @-o-keyframes dots {
	50% {
	  transform: translateX(-31px);
	}
  }
  @keyframes dots {
	50% {
	  transform: translateX(-31px);
	}
  }
  .preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	background: none repeat scroll 0 0 #000000  ;
  }
  
  .btn-filter{
	  background: #C51E78;
	  border: 1px solid #C51E78;
	  border-radius: 6px;
	  padding: 8px 14px 8px 14px;
	}
  .btn-ordem-light{
	  background: transparent;
	  border: 1px solid #0EF5E0;
	  border-radius: 3px;
	  padding: 8px 14px 8px 14px;
	  color: white;
	  width: 100%;
  }
  .btn-ordem-pro{
	background-color: transparent ;
	border: 1px solid #0EF5E0;
	border-radius: 3px;
	color:white;
	padding: 8px 14px 8px 14px;
	width: 100%;

  }
  .btn-ordem-pro:focus{
	background-color: #0EF5E0 ;
	color:black;
  }
  .btn-ordem-light:focus{
	background-color: #0EF5E0 ;
	color:black;
  }
  .padding-8{
	  padding: 8px;
  }
  
  .popup-filter{
	  background: rgb(0, 0, 0);
	  height: 100vh;
	  position: absolute;
	  z-index: 9999999;
	  width: 100%;
	  left: 0; /* posiciona a 90px para a esquerda */ 
	  position: absolute;
	  top: calc(50% - 50%); /* posiciona na metade da tela */
	  padding-top: 25px; /* e retrocede metade da altura */
	  transition: ease-in;
	  transition-delay: 1s;
  }
  .display-inline-flex{
	  display: inline-flex;
  }
  .font-size-1-5{
	  font-size: 1.5em;
  }
  .font-16px{
	  font-size: 16px;
  }
  .font-22px{
	font-size: 22px;
}

  .close-filter{
	  max-height: 22px;
	  margin: 14px 4px;
  }
  .adjust-icon{
	  margin: 14px 5px 0 12px;
	  max-height:24px;
  }
  
  .text-filter{
	  padding: 10px 22px;
  }
  .bg-191919{
	background-color: #191919;
  }
  .bg-0D0D0D{
	background-color: #0D0D0D;
  }
  input, textarea {
	  background: none;
	  color: #c6c6c6;
	  font-size: 18px;
	  padding-left: 0;
	  display: block;
	  width: 320px;
	  border: none;
	  border-radius: 0;
  }
  /* input[type="text"] {
	  padding-left: 26px;
  } */
  
  
  .label-cbx {
	  user-select: none;
	  cursor: pointer;
	  margin-bottom: 0;
	}
	.label-cbx input:checked + .checkbox {
	  border-color: #20C2E0;
	}
	.label-cbx input:checked + .checkbox svg path {
	  fill: #20C2E0;
	}
	.label-cbx input:checked + .checkbox svg polyline {
	  stroke-dashoffset: 0;
	}
	.label-cbx:hover .checkbox svg path {
	  stroke-dashoffset: 0;
	}
	.label-cbx .checkbox {
	  position: relative;
	  top: 2px;
	  float: left;
	  margin-right: 8px;
	  width: 20px;
	  height: 20px;
	  border: 2px solid #C8CCD4;
	  border-radius: 3px;
	}
	.label-cbx .checkbox svg {
	  position: absolute;
	  top: -2px;
	  left: -2px;
	}
	.label-cbx .checkbox svg path {
	  fill: none;
	  stroke: #20C2E0;
	  stroke-width: 2;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-dasharray: 71px;
	  stroke-dashoffset: 71px;
	  transition: all 0.6s ease;
	}
	.label-cbx .checkbox svg polyline {
	  fill: none;
	  stroke: #FFF;
	  stroke-width: 2;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-dasharray: 18px;
	  stroke-dashoffset: 18px;
	  transition: all 0.3s ease;
	}
	.label-cbx > span {
	  pointer-events: none;
	  vertical-align: middle;
	}
	
	.cntr {
	  position: absolute;
	  top: 45%;
	  left: 0;
	  width: 100%;
	  text-align: center;
	}
	
	.invisible {
	  position: absolute;
	  z-index: -1;
	  width: 0;
	  height: 0;
	  opacity: 0;
	}
  .display-grid{
	  display: grid;
  } 
	  
  	


   /*---------------------------------------
		  CARDS EXPERIECE HOME
		  ---------------------------------------*/
  
		  .card {
			height: 320px;
			position: relative;
			width: 100%;
			transition: .3s all cubic-bezier(0.42, 0, 0.65, 0.99);
  
		}
		  .font-20px{
			font-size: 20px;
		  }
  
		.content-card-light {
			height: 100%;
			transition: all 0.5s ease;
			width: 100%;
			border-radius: 8px;
			height: 100%;
			background-color: #C1181A;
			box-shadow: 3px 3px 6px 0px #1f1b1b;

		}
		.content-card-pro {
			height: 100%;
			transition: all 0.5s ease;
			width: 100%;
			border-radius: 8px;
			height: 100%;
			background-color: #222;
			box-shadow: 3px 3px 6px 0px #1f1b1b;

		}
  
		.caption-card {
			color: #FFF;
			height: calc(100% - 45%);
			position: absolute;
			top: 6px;
			width:100%;
		}
  
  
		/* .caption-card,
		p {
			color: #FFF;
			padding: 0;
			line-height: 1.0;
			font-size: 1em;
			text-align: center;
		}
   */
	
	   

		/*---------------------------------------
		   CARDS EXPERIECE HOME
		---------------------------------------*/
  
		.icon-desconto{
		  position: absolute;
		  float: right;
		  z-index: 1;
		  right: 4%;
		  top: 4%;
		}
		.fa-whatsapp:hover {
		  color: aquamarine;
		  transition:.3s all cubic-bezier(0.42, 0, 0.65, 0.99);
	  } 
		.fa-commenting-o:hover{
		  color: aquamarine;
		  transition:.3s all cubic-bezier(0.42, 0, 0.65, 0.99);
		}
		.fa-envelope:hover{
		  color: aquamarine;
		  transition:.3s all cubic-bezier(0.42, 0, 0.65, 0.99);
		}
		.header-nav-link-list>li>a:hover, .header-nav-link-list>li>a:focus {
		  background-color: #eee;
		  color: #666;
		  border-radius:3px;
		  transition: .3s all cubic-bezier(0.42, 0, 0.65, 0.99);
	  }
	  .header-nav-link-list .dropdown-menu>li>a {
		padding: 10px;
		color: #666;
		text-transform: uppercase;
		transition: .3s all cubic-bezier(0.42, 0, 0.65, 0.99);
		border-radius: 6px;
	}
	input:focus{
	  border-color: transparent;;
	}
  
  
  
  
  .left-10{
	left:-10px
  }
  .container-filtros-pacote-aereo, .container-filtros-todos-hoteis, .container-filtros-todos-passeios, .container-filtros-todos-transportes{
	background-color: #0d0d0d!important;
	padding: 0!important;
  }
  .unstyled-link, .unstyled-link:hover, .unstyled-link:focus, .unstyled-link:active, .unstyled-link:link {
	color: #fff;
	text-decoration: none;
  }
  
  .container-filtros-pacote-aereo label, .container-filtros-todos-hoteis label, .container-filtros-todos-passeios label, .container-filtros-todos-transportes label {
	color: #fff!important;
	font-size: .9em;
	font-weight: 500;
  }
  .checkbox+.checkbox, .radio+.radio {
	 margin-top:10px!important; 
  }
  .container-filtros-todos-passeios .checkbox input[type=checkbox], .container-filtros-todos-passeios .checkbox-inline input[type=checkbox], .container-filtros-todos-passeios .radio input[type=radio], .container-filtros-todos-passeios .radio-inline input[type=radio] {
	margin-left: -148px!important;
  }