/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html, body {
  margin: 0;
  padding: 0; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

:before, :after {
  content: ""; }

a img {
  border: none; }

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

a {
  cursor: pointer; }

@font-face {
  font-family: 'Helvetica';
  src: url("../fonts/Helvetica.otf") format("truetype"); }

.tit {
  font-size: 3rem;
  font-family: "Arial", sans-serif;
  color: white;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  line-height: 3.6rem; }

.txt {
  font-size: 1.25rem;
  font-family: "Arial", sans-serif;
  color: white;
  text-align: left;
  line-height: 1.875rem; }

@media only screen and (max-width: 767px) {
  .tit {
    font-size: 1.8rem;
    line-height: 2.5rem; } }

* {
  box-sizing: border-box; }

body {
  color: #000;
  text-align: center;
  font-size: 16px;
  font-family: "Arial", sans-serif;
  line-height: auto; }

textarea:focus, input:focus, select:focus, button:focus {
  box-shadow: 0 0 0 0 !important;
  border: 0 none;
  outline: 0 !important; }

.floatoff {
  float: none; }

/*------COLORS-----*/
/*------GLOBAL-----*/
body {
  width: 100%; }

section {
  display: grid;
  padding: 14% 0; }

.open nav {
  top: 66px !important; }

h3 {
  font-size: 24px;
  margin: 20px 0 10px 0;
  font-family: 'Lato', sans-serif;
  font-weight: bold; }

h2 {
  font-size: 30px;
  margin: 20px 0 10px 0;
  font-family: 'Lato', serif;
  font-weight: bold; }

p {
  margin-bottom: 22px;
  font-family: 'Lato', sans-serif;
  line-height: 1.4em; }

a {
  font-family: 'Lato', sans-serif; }

button {
  font-family: 'Montserrat', serif; }

.msg-contact {
  font-family: 'Montserrat', serif; }

/*Emojis*/
.em {
  height: 1em !important;
  width: 1em !important; }

/*------NAV-----*/
.main-header {
  background-color: #ffc107;
  display: grid;
  grid-row: 1;
  grid-column: 1 / 13;
  /*grid-template-columns: repeat(12, 1fr);*/
  grid-template-columns: repeat(1, 1fr);
  padding: 1rem 0;
  text-align: left; }
  .main-header .menu-trigger {
    display: none;
    outline: none;
    font-size: 1em;
    cursor: pointer;
    line-height: 1.3;
    color: #eee;
    border-radius: 5px;
    border: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px; }
    .main-header .menu-trigger .linha {
      display: block;
      width: 40px;
      padding: 2.75px; }
      .main-header .menu-trigger .linha:after {
        display: block;
        width: 100%;
        height: 5.5px;
        background-color: #fff;
        border-radius: 2px;
        -webkit-transform: translateZ(0) rotate(0);
        transform: translateZ(0) rotate(0);
        -webkit-transition: background-color 0.2s ease-out;
        transition: background-color 0.2s ease-out;
        /* -webkit-transition: all .2s;
								-moz-transition: all .2s;
								-o-transition: all .2s;
								transition: all .2s;*/
        transition: all .25s ease-in-out !important; }
      .main-header .menu-trigger .linha:after:nth-child(3) {
        transition: all .1s ease-in-out !important; }
  .main-header nav {
    letter-spacing: 1px;
    grid-column: 3 / 12;
    overflow: hidden;
    background: inherit;
    transition: all .30s ease-out; }
    .main-header nav ul {
      list-style: none;
      float: right;
      display: flex; }
      .main-header nav ul li {
        position: relative;
        transition: background-color .2s ease-out;
        font-size: .75em;
        display: list-item;
        text-align: -webkit-match-parent;
        letter-spacing: 1px;
        text-transform: uppercase; }
        .main-header nav ul li a {
          color: #fff;
          font-weight: 400;
          font-size: 18px;
          text-decoration: none;
          padding: 1em 1.5em;
          color: inherit;
          transition: color .2s linear; }
          .main-header nav ul li a:hover {
            color: #67493d; }

/*Sobre-----------*/
@-webkit-keyframes typing {
  from {
    width: 0; } }

@-webkit-keyframes blink-caret {
  50% {
    border-color: transparent; } }

/* The grid container */
.grid-container {
  display: grid;
  grid-gap: 0 2em;
  grid-template-areas: 'menu menu menu menu menu menu menu menu menu menu menu menu' 'hey hey hey hey hey hey hey hey hey hey hey hey' 'about about about about about about about about about about about about' 'jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit' 'jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs' 'movies movies movies movies movies movies movies movies movies movies movies movies' 'footer footer footer footer footer footer footer footer footer footer footer footer'; }

.esquerda {
  grid-column: 1/2;
  grid-row: 1;
  text-align: left;
  padding-right: 15%; }

.direita {
  grid-column: 2/2;
  grid-row: 1; }

/* ------- NAVBAR --------------------------------*/
#menu {
  grid-area: menu;
  background-color: #f83e62;
  padding: 8px;
  color: #fff;
  text-align: center;
  font-size: 20px;}

  #menu a{
    color: #ffd95c;
  }
  #menu a:hover{
    color: #ffd95c;
    border-bottom: 1px solid #ffffffe3;
    box-shadow: inset 0 -8px 0 #ffffffe3;
    transition: all .15s cubic-bezier(.33,.66,.66,1)!important;
    text-decoration: none!important;
  }
/* ------- PRESENTATION--------------------------------*/
#hey {
  grid-area: hey;
  /*grid-template-areas:
		'esquerda esquerda esquerda esquerda esquerda esquerda direita direita direita direita direita direita';
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(1, 1fr); */
  background: url(../img/menina2.png) top right no-repeat #FFD95C;
  color: #654EA3;
  font-weight: 900;
  font-size: 1.5em;
  padding-left: 14%; }
  #hey p {
    font-size: 1.5em; }
  #hey h3 {
    font-weight: bold;
    font-family: monospace;
    font-size: 2em;
    border-right: .1em solid #654EA3;
    width: calc(0.55em * 4);
    width: 4.5ch;
    white-space: nowrap;
    overflow: hidden;
    /*Animation typing*/
    -webkit-animation: typing 1.5s steps(4, end), blink-caret 0.2s step-end infinite alternate; }
  #hey .esquerda {
    padding-right: 65%; }

/* ------- ABOUT --------------------------------*/
#about {
  grid-area: about;
  padding: 11% 50% 11% 14%;
  text-align: left;
  background-color: #8668D9;
  color: #FFD95C;
  font-weight: 900;
  font-size: 1.5em; }
  #about h3 {
    font-weight: bold;
    font-size: 1.5em; }
  #about p {
    color: #fff; }
  #about span {
    color: #FFD95C; }

/* ------- JOBS --------------------------------*/
#job-tit {
  padding: 0 14%;
  grid-area: jobtit;
  text-align: center;
  grid-template-columns: repeat(1, 12fr);
  grid-template-rows: repeat(1, 1fr);
  background-color: #8668D9;
  color: #FFD95C;
  font-weight: 900;
  font-size: 1.5em;
  text-transform: uppercase;
  border-top: solid #fff; }
  #job-tit h2 {
    padding-bottom: 1.3%; }

/* ------- JOBS --------------------------------*/
#jobs {
  padding: 0 14%;
  grid-area: jobs;
  text-align: center;
  grid-template-columns: repeat(3, 12fr);
  grid-template-rows: repeat(1, 1fr); }
  #jobs #vampirinho {
    /**border-right: solid 3px #8668d9; **/
  }
  #jobs #vampirinho img{
    width: 85px;
  }
  #jobs #cenarios {
    /**padding-left: 21%;**/}
  #jobs .projeto {
    display: grid;
    grid-row: 2;
    grid-template-rows: repeat(1, 1fr);
    /**padding: 3% 5%;**/
    text-align: left; 
    margin: 10% 3%;
    border: 1px solid #68739f;
  }
    #jobs .projeto img {
      width: 100%;
      padding: 12px 0 0 0;
    }
    #jobs .projeto .botao {
      text-align: center;
      width: 100%;
      cursor: pointer;
      padding: 8px 27px;
      background: #8668d9;
      color: #000;
      font-weight: 600;
      transition: all .3s; }
      #jobs .projeto .botao:hover {
        background-color: #000;
        color: #fff; }
      #jobs .projeto .projeto-dercricao{
        display: grid;
        margin: 0 5%;
      }#jobs .projeto .projeto-link{
        display: grid;
      }

/* ------- MOVIES --------------------------------*/
#movies {
  padding: 5% 14%;
  grid-area: movies;
  text-align: center;
  grid-template-columns: repeat(2, 12fr);
  grid-template-rows: repeat(1, 1fr);
  background-color: #8668d9;
  color: #fff; }
  #movies a {
    position: relative; }
  #movies a:hover .play {
    background-image: url(../img/play-bg-hover.png); }
  #movies .play {
    background-image: url(../img/play-bg.png);
    z-index: 222;
    background-size: 100%;
    background-position: center;
    position: absolute;
    padding: 28% 0;
    display: block;
    width: 100%;
    background-position: center;
    transition: all 0.2s; }
  #movies div {
    display: grid;
    grid-row: 1;
    display: grid; }
  #movies .txt {
    padding-right: 25%; }

#movie-mob {
  grid-area: moviemob;
  grid-template-columns: repeat(1, 12fr);
  grid-template-rows: repeat(1, 12fr);
  margin: 0;
  padding: 0;
  display: none; }
  #movie-mob a:hover .play {
    background-image: url(../img/play-bg-hover.png); }
  #movie-mob img {
    display: grid; }
  #movie-mob .play {
    background-image: url(../img/play-bg.png);
    z-index: 222;
    background-size: 100%;
    background-position: center;
    position: absolute;
    padding: 28% 0;
    display: block;
    width: 100%;
    background-position: center;
    transition: all 0.2s; }

/* ------- FOOTER --------------------------------*/
#footer {
  grid-area: footer;
  padding: 0;
  background-color: #ffd95c; }
  #footer h2 {
    color: #654ea3;
    margin-bottom: 0.6em; }
  #footer p {
    margin: 5px 0 !important;
    color: #000;
    font-weight: 600;
    line-height: 35px; }
  #footer a {
    color: #8668d9; }
  #footer svg {
    width: 50px;
    position: relative;
    margin: 6% auto 0; }
  #footer .esquerda {
    border-right: solid 3px #fff;
    text-align: left; }
  #footer .direita {
    padding: 0 0 0 24%;
    text-align: left; }
  #footer .footer-container {
    text-align: center;
    color: #8668d9;
    padding: 2% 10% 7% 10%;
    display: grid;
    grid-template-areas: 'esquerda esquerda esquerda esquerda esquerda esquerda direita direita direita direita direita direita';
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr); }
  #footer .creditos {
    text-align: center;
    background-color: #8668d9;
    padding: 10px; }
    #footer .creditos p {
      color: #ffd95c;
      font-weight: 400; }

/* ------- COOKIES --------------------------------*/
      .modal{
        opacity: 100%;
        position: fixed;
        left: 0;
      }
      .modal-dialog {
        margin-top: 0rem;
        max-width: 100%;
      }
      .modal-content {
          position: relative;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-direction: column;
          flex-direction: column;
          width: 100%;
          pointer-events: auto;
          background-color: #fff;
          background-clip: padding-box;
          outline: 0;
          color: #000;
      }
      .modal-body{
        position: relative;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 1rem;
      }
      .fade{
        transition: opacity .15s linear;
      }
      .fadeout{
        opacity: 0;
      }
      .modal-dialog .buttons .btn{
        margin: 0.2rem;
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
        border-radius: .2rem;
      }
      .btn-success{
        color: #fff !important;
        background-color: #28a745;
        border-color: #28a745;
      }.btn-success:hover{
        color: #fff !important;
        background-color: #218838;
        border-color: #1e7e34;
        box-shadow: none !important;
        box-shadow: none !important;
      }
      .btn-secondary{
        color: #fff !important;
        background-color: #6c757d;
        border-color: #6c757d;
      }.btn-secondary:hover{
        color: #fff !important;
        background-color: #5a6268;
        border-color: #545b62;
        box-shadow: none !important;
        box-shadow: none !important;
      }
      



/* ------- MEDIA QUERIES --------------------------------*/
@media screen and (min-width: 1390px) {
  section:not(#footer), .footer-container {
    padding-right: 24% !important;
    padding-left: 24% !important; }
  #hey {
    background-size: 100%; } }

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-areas: 'menu menu menu menu menu menu menu menu menu menu menu menu' 'hey hey hey hey hey hey hey hey hey hey hey hey' 'about about about about about about about about about about about about' 'jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit jobtit' 'jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs jobs' 'movies movies movies movies movies movies movies movies movies movies movies movies' 'moviemob moviemob moviemob moviemob moviemob moviemob moviemob moviemob moviemob moviemob moviemob moviemob' 'footer footer footer footer footer footer footer footer footer footer footer footer'; }
  .esquerda {
    grid-column: 1/13;
    grid-row: 1; }
  .direita {
    grid-column: 1/13;
    grid-row: 2 !important; }
  .footer-container {
    grid-template-columns: repeat(1, 12fr) !important;
    grid-template-rows: repeat(2, 1fr) !important; }
  #hey .esquerda {
    padding-right: 0;
    margin-top: 46%; }
  #about {
    padding: 11% 12% 14% 14%; }
  #jobs {
    margin-bottom: 14%;
    grid-template-columns: repeat(1, 12fr) !important;
    grid-template-rows: repeat(2, 1fr) !important; }
    #jobs #vampirinho {
      border-right: 0; }
  #movies {
    grid-template-columns: repeat(1, 12fr) !important;
    grid-template-rows: repeat(1, 12fr) !important; }
    #movies .imagem {
      display: none; }
  #movie-mob {
    display: grid; }
  .projeto {
    grid-column: 1/13;
    /**padding: 23% 0 0 !important;**/ }
  #vampirinho {
    grid-row: 1 !important; }
    #vampirinho img {
      margin-left: 6%; }
  #cenarios {
    grid-row: 2 !important; }
  #filmes {
    grid-row: 3 !important; }
  #footer {
    padding: 2% 0 0 0; }
    #footer svg {
      margin: 6% auto 2%; }
    #footer .esquerda {
      border-right: 0;
      margin-bottom: 10%; }
    #footer .direita {
      padding: 4% 0 0 0;
      border-top: #fff solid 3px; }
    #footer .footer-container {
      font-size: 20px;
      padding: 2% 10% 0; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #hey .esquerda {
    padding-right: 6px;
    margin-top: 77%; } }

@media only screen and (max-width: 479px) {
  #hey {
    background: #FFD95C; }
    #hey .esquerda {
      padding-right: 14%;
      margin-top: 0; }
  #footer {
    padding: 7% 0 0; } }

/*#cenarios{
  background: url("../img/cenarios1.png");
  .descricao{
    text-align: left;
  }
  button{
    border: solid #333;
    color: #333;
  }
  button:hover{
    background-color: #333;
    color: #EAF2F8;
  }
}

#vampirinho{
  height: 20rem;
  font-size: 12px;
  font-family: 'Helvetica', sans-serif;
  background: url("../img/vampirinho.png");
  background-repeat:no-repeat !important;
  -webkit-background-size:cover !important;
  -moz-background-size:cover !important;
  -o-background-size:cover !important;
  background-size:cover !important;
  background-position-y: 70%;
  .descricao{
    text-align: left;
    color: #E7FFEE;
    margin-top: -2em;
  }
  button{
    border: solid #E7FFEE;
    color: #E7FFEE;
  }
  button:hover{
    background-color: #E7FFEE;
    color: #0C1222;
  }
}

#item3{
  background: url("../img/sun.png");
  .descricao{
    color: #F3F0DA;
    text-align: right;
    h2{
        margin-top: -2em;
    }
  }
  button{
    border: solid #F3F0DA;
    color: #F3F0DA;
  }
  button:hover{
    background-color: #F3F0DA;
    color: #23272E;
  }
}*/