.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#all {
  padding: 2rem;
}

#demoiselle-box {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 3px solid #b28504;
}

#abertura {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#abertura:hover {
  cursor: pointer;
}

#capa {
  position: absolute;
  width: 100%;
  vertical-align: bottom;
}

#icone-box {
  flex-direction: row;
  -webkit-flex-direction: row;
}

#icone-box:hover #icone-mao {

}

#icone-box:hover #icone-arraste {

}

#icone-mao.animando {
  margin-right: 6rem;
}

#icone-arraste.animando {
  margin-right: 4rem;
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#icone-mao {
  width: 16%;
  margin-right: 2rem;
}

#icone-arraste {
  width: 32%;
}

#info-svg {
  position: absolute;
  width: 220px;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

#arraste-aqui {
}

#arraste-aqui:hover {
  cursor: pointer;
}

#frames {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

#frames img {
  width: 100%;
  vertical-align: bottom;
}

.demoiselle-img {
	position: absolute;
}

#fichas {
  background-color: rgba(255, 255, 255, 1);
  z-index: 2;
}

#ficha-aviao {
  position: absolute;
  top: 2rem;
  color: #402f2e;
}

#nome-do-aviao {
  font-family: 'flamabold';
  text-transform: uppercase;
  font-size: 2.4rem;
  pointer-events: none;
}

#detalhes {
  font-family: 'flamabook';
  font-size: 1.8rem;
  margin-top: 1rem;
  line-height: 2rem;
}

#detalhes span {
  display: block;
}

#como-usar {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 240px;
  width: 100%;
}

.pin {
	position: absolute;
  width: 40px;
  height: 40px;
	border-radius: 50%;
	border: 5px solid #402f2e;
	background-color: rgba(255, 255, 255, .75);
  opacity: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-animation: pulse 1.5s linear infinite;
  animation: pulse 1.5s linear infinite;
}

.box-shadow {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);
}

.pin:hover {
  opacity: .75; 
}

.pin:hover #icone-mais {
  /* font-size: 2.6rem; */
}

#icone-mais {
  font-size: 2rem;
  color: #402f2e;
}

.off {
  width: 50px;
  height: 50px;
  margin-left: -5px;
  margin-top: -5px;
  opacity: 0;
  pointer-events: none;
}

#p1.demoiselle {
  left: 39%;
  top: 8%;
}

#p2.demoiselle {
  left: 82%;
  top: 28%;
}

#p3.demoiselle {
  left: 47%;
  top: 50%;
}

#p4.demoiselle {
  left: 34%;
  top: 59%;
}

#p5.demoiselle {
  left: 4%;
  top: 40%;
}

#p6.demoiselle {
  left: 46%;
  top: 87%;
}

#p7.demoiselle {

}

#p8.demoiselle {

}

#p1.catorze-bis {
  left: 76%;
  top: 31%;
}

#p2.catorze-bis {
  left: 55%;
  top: 18%;
}

#p3.catorze-bis {
  left: 68%;
  top: 76%;
}

#p4.catorze-bis {
  left: 92%;
  top: 18%;
}

#p5.catorze-bis {
  left: 33%;
  top: 75%;
}

#p6.catorze-bis {
  left: 36%;
  top: 18%;
}

#p7.catorze-bis {
  left: 16%;
  top: 62%;
}

#p8.catorze-bis3 {

}

#voltar {
	position: absolute;
	top: 2rem;
	left: 0;
	font-family: 'flamabold';
	text-transform: uppercase;
  color: #402f2e;
  font-size: 2rem;
}

#voltar:hover {
  opacity: .75;
}

#icone-voltar {
  padding-right: 1rem;
}

#bt-esquerda, #bt-direita {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #402f2e;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#bt-esquerda {
  left: 0;
  top: 50%;
}

#bt-direita {
  right: 0;
  top: 50%;
}

#icone-esquerda, #icone-direita {
  font-size: 3rem;
  color: #402f2e;
}

#icone-esquerda {
  padding-right: 4px;
  padding-bottom: 2px;
}

#icone-direita {
  padding-left: 2px;
  padding-bottom: 2px;
}

.transition{
  -webkit-transition: all ease .2s;
  -moz-transition: all ease .2s;
  -o-transition: all ease .2s;
  transition: all ease .2s;
}

.transition-04{
  -webkit-transition: all ease-out .4s;
  -moz-transition: all ease-out .4s;
  -o-transition: all ease-out .4s;
  transition: all ease-out .4s;
}

#img-container {
  position: relative;
  width: 100%;
  height: 720px;
}

#img-container img {
  position: absolute;
  width: 100%;
  opacity: 1;
  padding: 0;
  vertical-align: bottom;
  left: 0;
  right: 0;
}

#fichas .esquerda {
  left: -10rem;
  opacity: 0;
}

#fichas .direita {
  left: 10rem;
  opacity: 0;
}

strong {
  font-family: 'flamabold';
}

input, button, submit
{
  border: none;
  background: none;
  padding: 0;
}

button:hover {
  cursor: pointer;
}

/*@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
  };
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  };
}
*/

@media screen and (max-width: 1080px) {
  #ficha-aviao {
    display: none;
  }
}

@media screen and (max-width: 640px) { 
  #como-usar {
    width: 40%;
  }
  .pin {
    width: 30px;
    height: 30px;
    border: 3px solid #402f2e;
  }
  .pin:hover {
    /*
    width: 40px;
    height: 40px;
    */
  }
  .off {
    width: 40px;
    height: 40px;
  }
  #icone-mais {
    font-size: 1.6rem;
  }
  #voltar {
    top: 0.8rem;
    font-size: 1.4rem;
  }
  #fichas .esquerda {
    padding-right: 0rem;
  }
  #fichas .direita {
    padding-left: 0rem;
  }
  #bt-esquerda, #bt-direita {
    width: 40px;
    height: 40px;
  }
  #icone-mao.animando {
    margin-right: 4rem;
  }
  #icone-arraste.animando {
    margin-right: 2rem;
  }
}

@media screen and (min-width: 1280px) {
  #bt-esquerda:hover, #bt-direita:hover {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.4);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,.4);
  }

  #bt-esquerda:hover #icone-esquerda {
    padding-right: 20px; 
  }

  #bt-direita:hover #icone-direita {
    padding-left: 20px; 
  }
}

#imagens-aqui, #icones-aqui  {
  display: none;
}

/* preloader */

#preloader-box {
  z-index: 2;
}

#preloader {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}

#preloader:before {
  content: "";
  display: block;
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  height: 100%;
  width: 100%;
  -webkit-animation: rotation 1s linear infinite;
          animation: rotation 1s linear infinite;
  border: 2.5px solid #b28504;
  border-top: 2.5px solid transparent;
  border-radius: 100%;
}

#preloader > .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 25px;
  width: 10.6px;
  margin-top: -12.5px;
  margin-left: -5.3px;
  -webkit-animation: wink 1s ease-in-out infinite alternate;
          animation: wink 1s ease-in-out infinite alternate;
}

@media only screen and (min-width: 768px) {
  #preloader {
    height: 30px;
    width: 30px;
    margin-top: -15px;
    margin-left: -15px;
  }
  #preloader:before {
    left: -5px;
    top: -5px;
    border-top-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-right-width: 5px;
  }
  #preloader > .icon {
    height: 37.5px;
    width: 15.9px;
    margin-top: -18.75px;
    margin-left: -7.95px;
  }
}

@media only screen and (min-width: 1200px) {
  #preloader {
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
  }
  #preloader > .icon {
    height: 50px;
    width: 21.2px;
    margin-top: -25px;
    margin-left: -10.6px;
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@-webkit-keyframes wink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* botões */

#go {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  margin-bottom: 4rem;
  height: 260px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#btn {
  position: relative;
  text-align: center;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}

#btn-img {
  position: absolute;
  max-width: 600px; 
  width: 100%;
  opacity: .25;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#explore {
  text-transform: uppercase;
  font-family: 'flamabold';
  font-size: 1.8rem;
  padding: 1.2rem;
  border: 3px solid #b28504;
  color: #402f2e;
}

#go:hover #explore {
  padding: 1.8rem;
}

/* ajuste menu do template */

#menu {
  z-index: 3;
}

@media screen and (min-width: 1024px) {
  #go:hover #btn-img {
    max-width: 660px;
    /*margin-top: -20px;*/
  }
}

@media screen and (max-width: 1024px) {
  #btn-img {
    
  }
}

@media screen and (max-width: 375px) {
  #explore {
    font-size: 1.4rem;
  }
}

/* ajuste abertura */

@media screen and (max-width: 414px) {
  #header {
    background-attachment: scroll;
  }
}