#mapa {
	margin-left:15em;
}

/*inicio hover icons*/
.da-thumbs {
	list-style: none;
	/*width: 960px;
	height: 600px;*/
	position: relative;
	margin: 20px auto;
	padding: 0;
}
.da-thumbs li {
	float: left;
	margin: 4px;
	/*background: #fff;*/
	padding: 8px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
	display: block;
	position: relative;
}
.da-thumbs li a {
	overflow: hidden;
}
.da-thumbs li a div {
	position: absolute;
	background: rgba(249,242,148,0.99);
	width: 100%;
	height: 100%;
}
.da-thumbs li a div.da-animate {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
	left: 0px;
	top: -100%;
}
.da-slideFromBottom {
	left: 0px;
	top: 100%;
}
.da-slideFromLeft {
	top: 0px; 
	left: -100%;
}
.da-slideFromRight {
	top: 0px;
	left: 100%;
}
/* Final state classes: */
.da-slideTop {
	top: 0px;
}
.da-slideLeft {
	left: 0px;
}
.da-thumbs li a div span {
	display: block;
	padding: 10px 0;
	margin: 40px 20px 20px 20px;
	/*text-transform: uppercase;*/
	font-weight: normal;
	color: rgba(49,68,106,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border-bottom: 1px solid rgba(49,68,106,0.5);
	box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(49,68,106,0.3);
}

/*fim hover icons*/

.alinhar-social {
	margin-top:85px; position:absolute; right:0; float:right;
	}
	
.zerooitocentos {
	margin-top:130px; position:absolute; right:0; float:right;
}




@-webkit-keyframes oscillation
{
	from
	{
		-webkit-transform:rotate(-9deg);
	}
	to{
		-webkit-transform:rotate(9deg);
	}
}
 
@-moz-keyframes oscillation
{
	from{
		-moz-transform:rotate(-9deg);
	}
	to{
		-moz-transform:rotate(9deg);
	}
}
 
.balangar{  
	-webkit-transform-origin:50% -40px;  
	-moz-transform-origin:50% -40px;   
	-webkit-animation: oscillation 1s ease-in-out infinite alternate;
	-moz-animation: oscillation 1s ease-in-out infinite alternate;
	/*background: url('guia.png') no-repeat;*/
	width: 100px; 
	height:120px;
	z-index:1;
	position:absolute;
	/*margin-top:-20px;*/
	right:11.5em;
	top:-20px;
	

}

.balangar a {  
	opacity:0.9;

}

.balangar a:hover {  
	opacity:1;

}

@media screen and (max-width: 1080px) {
	nav li {
	  float: left;
	  margin: 0;
	  margin-right: 6.5%;
	  padding: 0;
	  list-style: none;
	  text-align: center;
	  background: none;
	}
}

@media screen and (max-width: 852px) {
  /*.orgao h1 {
      font-size: 1.5em;
    }
    
    .orgao-sinopse .line1 {
      font-size: 1.25em;
    }

    .terms h1 a {
      background-position: bottom left;
    }*/

	nav li {
	  margin-right: 3%;

	}
	
	.da-thumbs li {
		margin-left:0;
	}
	
	.alinhar-social {
		margin-top:-5em;
		
	}
	
	.zerooitocentos {
		margin-top:-4em;
		font-size:0.975em;
		width:50%;
	}

}

@media screen and (max-width: 768px) {
  .orgao h1 {
    font-size: 1.5em;
  }
  
  .orgao-sinopse .line1 {
    font-size: 1.25em;
  }

  .terms h1 a {
    background-position: bottom left;
  }

	nav li {
	  margin-right: 3.5%;

	}
	
	.da-thumbs li {
		margin-left:0;
	}
	
	.alinhar-social {
		margin-top:-5em;
		
	}
	
	.zerooitocentos {
		margin-top:-4em;
		font-size:0.975em;
		width:50%;
		text-align:right;
	}

}

@media screen and (max-height: 16em) and (min-width: 40em) {
  html:before {
    display: inline;
    content: "Ahhh não" !important;
  }
  
  header {
    margin-top: -2em;
  }
  
  .viaje-legal {
    /*background: url() no-repeat 50% -70px;*/
    -webkit-mask-box-image: url(images/mala.png);    
  }
}

@-webkit-keyframes background {
	from {
		background-color: #D6CD7E;
	}
	25% {
		background-color: #FF242F;
	}
	50% {
		background-color: #D62782;
	}
	75% {
		background-color: #25D673;
	}
	to {
		background-color: #D6CD7E;
	}
}

@-webkit-keyframes invert-background {
	from {
    background-color: #000AD6;
		background-position: top left, top left, top left;
	}
	49.9% {
    background-color: #000AD6;
	}
	50% {
    background-color: #FF00A2;
	}
	74.9% {
    background-color: #FF00A2;
	}
	75% {
    background-color: #FF0016;
	}
	99.9% {
    background-color: #00FF12;
	}
	to {
    background-color: #000AD6;
		background-position: bottom right, bottom right, bottom right;
	}
}


@-webkit-keyframes foreground {
	from {
		color: #D6CD7E;
	}
	25% {
		color: #FF242F;
	}
	50% {
		color: #D62782;
	}
	75% {
		color: #25D673;
	}
	to {
		color: #D6CD7E;
	}
}

@media screen and (min-width: 88em) and (max-width: 88.124em) {
  html:before {
    display: inline;
    content: "Bem vindo ao modo de carregamento" !important;
  }
  
  header {
    margin-top: -2em;
  }
  
  .viaje-legal {
    background: #D6CD7E fixed no-repeat 50% -70px;
    -webkit-mask-box-image: url(images/mala.png);    
    -webkit-animation-name: background;
  	-webkit-animation-duration: 300ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;  	
  }
  
  .wrapper, header, h1, h2, a, p {
    -webkit-animation-name: foreground;
  	-webkit-animation-duration: 200ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  }
  
  html {
    background-position: bottom right, bottom right, bottom right;
    background-color: blue;
    background-image:
      -webkit-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -webkit-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -webkit-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -moz-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -moz-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -moz-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -o-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -o-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -o-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-size: 50px, 50px, 50px;
    background-repeat: repeat, repeat, repeat;
    -webkit-animation-name: invert-background;
  	-webkit-animation-duration: 0.8s;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  }

  blockquote {
    -webkit-mask-box-image: url(images/bubble.png);
  }
  
  blockquote, input {
    background-position: bottom right, bottom right, bottom right;
    background: #D6CD7E fixed no-repeat 50% -70px;
    background-image:
      -webkit-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -webkit-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -moz-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -moz-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -o-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -o-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-size: 50px, 50px, 50px;
    background-repeat: repeat, repeat, repeat;
    -webkit-animation-name: invert-background;
  	-webkit-animation-duration: 500ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  	-webkit-animation-fill-mode: both;
  	-webkit-animation-direction: alternate;   
  }
}

@media screen and (max-width: 73em) {
  .tweets div {
      width: 26%;
  }
}
@media screen and (min-width: 63em) {
  .wrapper {
    width: 94%;
  }
}
@media screen and (max-width: 63em) {
  .want-to {
    margin-bottom: 3.075em;
  }
  .tweets div {
      width: 34%;
  }
}
@media screen and (max-width: 56em) {  
  
  header .viaje-legal {
    margin-bottom: 0.6em;
  }
  header .embratur {
    position: relative;
    float: none;
    clear: both;
    font-size: 41px;
    line-height: 48px;
    overflow: hidden;
  }
  
  header h3 {
    margin-bottom:1.2em;
  }
  
  header .embratur .tickets-wrapper {
    float: left;
    margin-right: 308px;
  }
  header .embratur .type {
    margin-right: 0.2em;
  }
  header .embratur .type,
  header .embratur .price {
    float: left;
    font-size: 1em;
  }
  header .embratur .botao-embratur {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.2em;
    margin-top: 0;
  }
  nav {
    margin-top: 0.8em;
  }
  
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
   float: none;
   min-width: none;
   margin-left: 2.6em; 
  }
  .want-to section p {
    max-width: none;
    margin-left: 11em;
  }
}
/*@media screen and (max-width: 781px) {
  header .embratur .botao-embratur {
    top: 24px;
  }
}
*/
@media screen and (max-width: 47em) {
  .want-to {
    margin-bottom: 2.075em;
  }
  .tweets div {
      width: 50%;
  }
}
@media screen and (max-width: 37em) {
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
    float: right;
    min-width: 5em;
    margin-left: 0;
  }
  .want-to section p {
    max-width: 20em;
    margin-left: 0;
  }
}
@media screen and (max-width: 36em) {
  .wrapper {
    margin-top: 1em; 
  }
  .follow {
    font-size: 1.875em;
  }
  .terms h1 {
    float: none;
  }
}
@media screen and (max-width: 32em) {
  
  form {
    margin: 1.375em 0 1.375em 0;
  }
  
  .want-to {
    margin-bottom: 1.075em;
  }
  .tweets div {
      width: 100%;
  }
}
@media screen and (max-width: 25em) {
  .wrapper {
    min-width: 97%;
    width: 97%;
  }
  
  .terms {
    margin-bottom: 0.25em;
  }
  
  .terms h1 a {
    margin: 0 auto;
  }
  
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
   float: none;
   min-width: none;
   margin-left: 0; 
  }
  .want-to section p {
    float: none;
  }
}

/* yeah, overkill - sorry :( --rs */

@media screen and (max-width: 1212px) {
  
  .balangar{  
	right:8em;

}
  
}

@media screen and (max-width: 1060px) {
  
  .balangar{  
	right:7em;
	}
	
	.da-thumbs li {
		margin: 0px;
		width:280px;
	}
  
}

@media screen and (max-width: 896px) {
  html {
    background-position: center -71px;
  }
  
  .balangar{  
		right:6em;
	}
   
  
}
@media screen and (max-width: 750px) {
  html {
    background-position: center -36px;
  }   
}
@media screen and (max-width: 731px) {
  html {
    background-position: center 9px;
  }
  
  #mapa {
	margin-left:7em;
  }  
  
   
}
@media screen and (max-width: 594px) {
  html {
    background-position: center 9px;
  }
  
}
@media screen and (max-width: 594px) {
  html {
    background-position: center 10px;
  }
}
@media screen and (max-width: 576px) {
  html {
    background-position: center 6px;
  }
  #mapa {
	margin-top:16em;
	margin-left:-3.2em;
  } 
}
@media screen and (max-width: 554px) {
  html {
    background-position: center 157px;
  }  
}
@media screen and (max-width: 544px) {
  html {
    background-position: center 202px;
  }  
}
@media screen and (max-width: 520px) {
  html {
    background-position: center 114px;
  }
  
	.balangar {
		right:4em;
	}
}

@media screen and (max-width: 409px) {
  html { 
    background-position: center 150px;
  }
}

@media screen and (max-width: 360px) {
  html {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2P4//+/MBQzgDAICEMxXAAMYCoRIlCVANL6FYTYi5d+AAAAAElFTkSuQmCC), url('images/nuvens.png'); 
     background-position: center 335px;
  }
}

@media screen and (max-width: 320px) {
  html {
    overflow-x: hidden;
    background-position: center 125px;
  }
  
  .orgao-sinopse p {
    display: none;
  }
  
  .guias a.large,
  .guias a.half,
  .guias a.small {
    width: 100%;
    height: auto;
    text-align: center;
  }
  
  .viaje-legal {
    display: none;
  }

  .lista-textos li {
    font-size: 2em;
  }

  .fat-footer section {
    float: none;
  }
  
  .updates, .guias {
    width: auto;
  }
  
  .updates .follow {
    line-height: 1.75em;
    margin-right: 0;
    padding: 0.1em 0;
  }
  
  .updates p {
    padding-right: 0;
  }
  
  .viaje-legal {
    background: url(images/mala.png) no-repeat center;
    background-size: 100%;
    height: 77px; /*1.1em;*/
    width: 82px; /*1.1em;*/
  }
  
  .fat-footer {
    padding-bottom: 1em;
  }
  
/*  .guias a.small {
    width: 28%;
    line-height: 4em;
    height: 4em;
  }
*/  
  hgroup {
    display: inline;
  }
  
  header hgroup {
    background: url(images/mala.png) no-repeat top left;
    background-size: 25%;
  }

  header h2,
  header .tickets {
    font-size: 2.71em;
  }

  header h2 {
    padding-left: 26%;
  }
  
  .texto {
    width: 100%;
    margin-right: 0;
  }
  
  /* cidade */
  #cidade .detalhes { 
    width: 100%;
  }
  
  #cidade .detalhes li > span {
    display: none;
  }
  
  #cidade .cidade img {
    width: 100%;
  }
  
  #cidade #mapa-cidade {
    display: none;
  }
  
  footer {
    margin-bottom: 2em;
  }
}

@media screen and (max-width: 940px) {
  #cidade .detalhes {
    width: 60%;
  }

  #cidade .cidade img,
  #mapa-cidade {
    width: 39%;
  }
}

@media screen and (max-width: 840px) {
  .lista-textos li {
    margin-bottom: 2%;
  }
}

@media screen and (max-width: 776px) {
  header .embratur .botao-embratur {
    top: 0;
  }
}

@media screen and (max-width: 720px) {
  .orgao-sinopse h1 {
    display: none;
  }
  
  .orgao-sinopse p {
    width: 100%;
    float: none;    
  }
  
  .orgao-full > a {
    float: none;
    display: block;
    width: 100%;
    padding-bottom: 0;
  }
  
  .orgao-full > a img {
    width: 50%;
    margin: 0 auto;
    display: block;
  }
  
  .orgao-full .sinopse {
    border-left: 0;
  }
  
  .orgao-small .orgao-logo {
    width: auto;
  }

  .orgao-half .orgao-logo {
    width: auto;
    margin-right: 1%;
    margin-bottom: 1%;
  }
  
  ul {
    padding-left: 0;
  }
  
}

@media screen and (max-width: 520px) {
  #cidade .detalhes {
    width: 100%;
  }

  #cidade .cidade img,
  #mapa-cidade {
    display: none;
  }

  header .embratur .botao-embratur {
    max-width: 100%;
    top: 0;
    position: relative;
  }  
  .tickets p span {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 14px;
  }
  
  .tickets {
    margin-bottom: 1em;
  }

  /* removed elements */
  header .embratur .tickets-wrapper,
  .image-cube {
    display: none;
  }
  
  .lista-textos {
    width: 100%;
    float: none;
  }  
}

@media screen and (max-width: 442px) {
  .lista-textos li {
    font-size: 3em;
  }
}