@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Protest Riot', sans-serif;
  color: #3a3e3b; }

body {
  background: linear-gradient(#f0eff4, white);
  height: auto; }

.header-desktop {
  display: none; }

.header {
  background-color: #9523B2;
  width: 100%; }
  .header .nav-mobile {
    width: 100%;
    background-color: #9523B2;
    color: white; }
  .header .a-logo {
    width: 20%; }
  .header .img-header {
    width: 100%; }
  .header .menu-burger {
    border: none; }
  .header .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none; }
  .header .a-nav {
    text-decoration: none;
    color: white; }
  .header .menu-burger-2 {
    height: 40px; }

@media (min-width: 480px) and (orientation: landscape) {
  .header-desktop {
    display: none; } }

@media (min-width: 600px) {
  .header-desktop {
    display: none; }
  .header .a-logo {
    width: 20%; }
  .header .img-header {
    width: 60%; }
  .header .menu-burger {
    border: none; }
  .header .a-nav {
    text-decoration: none;
    color: white; }
  .header .menu-burger-2 {
    height: 40px; } }

@media (min-width: 768px) {
  .header {
    background-color: #9523B2;
    width: 100%;
    display: none; }
  .header-desktop {
    width: 100%;
    height: 70px;
    background-color: #9523B2;
    display: flex;
    justify-content: space-between; }
    .header-desktop .a-logo {
      width: 20%;
      justify-self: center;
      align-self: center; }
    .header-desktop .img-header {
      width: 40%; }
    .header-desktop nav {
      width: 10%;
      display: flex;
      justify-content: end;
      align-items: center; }
    .header-desktop .ul-nav {
      display: flex;
      margin: auto;
      margin-right: 2%; }
    .header-desktop .a-nav {
      text-decoration: none;
      color: white; }
    .header-desktop .li-nav {
      font-size: 20px;
      margin: auto 5px auto 5px;
      list-style: none; } }

@media (min-width: 1024px) {
  .header {
    background-color: #9523B2;
    width: 100%;
    display: none; }
  .header-desktop {
    width: 100%;
    background-color: #9523B2;
    display: flex;
    justify-content: space-between; }
    .header-desktop .a-logo {
      width: 15%;
      justify-self: center;
      align-self: center; }
    .header-desktop .img-header {
      width: 30%; }
    .header-desktop nav {
      width: 10%;
      display: flex;
      justify-content: end;
      align-items: center; }
    .header-desktop .ul-nav {
      display: flex;
      margin: auto;
      margin-right: 2%; }
    .header-desktop .a-nav {
      text-decoration: none;
      color: white; }
    .header-desktop .li-nav {
      font-size: 20px;
      margin: auto 5px auto 5px;
      list-style: none; } }

@media (min-width: 1600px) {
  .header .a-logo {
    width: 10%;
    justify-self: center;
    align-self: center; }
  .header .ul-nav {
    display: flex;
    margin: auto;
    margin-right: 2%; } }

.main-index {
  width: 100;
  min-height: 66.5vh; }
  .main-index .section-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; }
    .main-index .section-index .img-main {
      width: 35%;
      margin: 1% 0 1% 0;
      animation: 1s 9 alternate animacion; }
    .main-index .section-index .img-banner-index {
      width: 100%;
      box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75);
      -webkit-box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75); }
    .main-index .section-index h1 {
      width: 90%;
      font-size: 25px;
      margin: 10% auto 1% auto;
      text-align: center; }
    .main-index .section-index p {
      font-size: 20px;
      text-align: center;
      width: 90%;
      margin: 5% auto 2% auto; }

@keyframes animacion {
  0% {
    opacity: 5%; }
  1% {
    opacity: 10%; }
  20% {
    opacity: 20%; }
  30% {
    opacity: 30%; }
  40% {
    opacity: 40%; }
  50% {
    opacity: 50%; }
  60% {
    opacity: 60%; }
  70% {
    opacity: 70%; }
  80% {
    opacity: 80%; }
  90% {
    opacity: 90%; }
  100% {
    opacity: 100%; } }

@media (min-width: 600px) {
  .main-index .section-index h1 {
    width: 90%;
    font-size: 30px;
    margin: 5% auto 1% auto;
    text-align: center; }
  .main-index .section-index p {
    font-size: 30px;
    text-align: center;
    width: 90%;
    margin: 1% auto 2% auto; } }

@media (min-width: 768px) {
  .main-index .section-index .img-main {
    width: 30%;
    margin: 1% 0 1% 0; }
  .main-index .section-index h1 {
    width: 100%;
    font-size: 35px;
    margin: 2% auto 1% auto;
    text-align: center; }
  .main-index .section-index p {
    font-size: 30px;
    text-align: center;
    width: 90%; } }

@media (min-width: 1024px) {
  .main-index {
    width: 100%;
    margin: auto; }
    .main-index .section-index .img-main {
      width: 10%;
      margin: 1% 0 1% 0; }
    .main-index .section-index .carousel-index {
      width: 60%;
      margin: auto;
      box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75);
      -webkit-box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 13px 15px 13px -4px rgba(0, 0, 0, 0.75); }
    .main-index .section-index .img-banner {
      width: 100%; }
    .main-index .section-index .img-banner-index {
      width: 100%;
      margin: auto; }
    .main-index .section-index h1 {
      width: 100%;
      font-size: 40px;
      margin: 1% auto 0 auto; }
    .main-index .section-index p {
      font-size: 35px;
      text-align: center;
      width: 90%; } }

.main-contact {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-areas: ". h1-contact h1-contact ."
 "img-banner-contact img-banner-contact img-banner-contact img-banner-contact"
 "h3-contact h3-contact h3-contact h3-contact"
 ". form form .";
  min-height: 80%;
  min-height: 66.5vh; }
  .main-contact .img-banner-contact {
    width: 100%;
    grid-area: img-banner-contact;
    animation: 1s 9 alternate animacion; }
  .main-contact .h1-contact {
    grid-area: h1-contact;
    margin: 2% auto; }
  .main-contact .h3-contact {
    grid-area: h3-contact;
    font-size: 85%;
    margin: 5% auto;
    text-align: center; }
  .main-contact .form-contact {
    grid-area: form;
    width: 100%; }
    .main-contact .form-contact input {
      width: 100%;
      font-size: 12px; }
    .main-contact .form-contact .button-form {
      font-size: 15px;
      width: 50%;
      height: 30px;
      border-width: 1px;
      color: #666666;
      border-color: #dcdcdc;
      font-weight: bold;
      border-top-left-radius: 27px;
      border-top-right-radius: 27px;
      border-bottom-left-radius: 27px;
      border-bottom-right-radius: 27px;
      box-shadow: inset 0px 1px 0px 0px #ffffff;
      text-shadow: inset 0px 1px 0px #ffffff;
      background: linear-gradient(#ffffff, #f6f6f6);
      cursor: pointer;
      margin: 2% 0 2% 25%; }
      .main-contact .form-contact .button-form :hover {
        background: linear-gradient(#f6f6f6, #ffffff); }
    .main-contact .form-contact textarea {
      width: 100%;
      font-size: 12px; }

@keyframes animacion {
  0% {
    opacity: 5%; }
  1% {
    opacity: 10%; }
  20% {
    opacity: 20%; }
  30% {
    opacity: 30%; }
  40% {
    opacity: 40%; }
  50% {
    opacity: 50%; }
  60% {
    opacity: 60%; }
  70% {
    opacity: 70%; }
  80% {
    opacity: 80%; }
  90% {
    opacity: 90%; }
  100% {
    opacity: 100%; } }

@media (min-width: 600px) {
  .main-contact .h1-contact {
    grid-area: h1-contact;
    font-size: 50px;
    margin: 2% auto; }
  .main-contact .img-banner-contact {
    grid-area: img-banner-contact; }
  .main-contact .h3-contact {
    grid-area: h3-contact;
    font-size: 25px;
    margin: 3% auto;
    text-align: center; }
  .main-contact .form-contact {
    grid-area: form;
    width: 80%;
    margin: auto; }
    .main-contact .form-contact label {
      font-size: 25px; }
    .main-contact .form-contact input {
      width: 100%;
      font-size: 20px; }
    .main-contact .form-contact .button-form {
      font-size: 15px;
      width: 50%;
      height: 40px;
      border-width: 1px;
      color: #666666;
      border-color: #dcdcdc;
      font-weight: bold;
      border-top-left-radius: 27px;
      border-top-right-radius: 27px;
      border-bottom-left-radius: 27px;
      border-bottom-right-radius: 27px;
      box-shadow: inset 0px 1px 0px 0px #ffffff;
      text-shadow: inset 0px 1px 0px #ffffff;
      background: linear-gradient(#ffffff, #f6f6f6);
      cursor: pointer;
      margin: 2% 0 2% 25%; }
      .main-contact .form-contact .button-form :hover {
        background: linear-gradient(#f6f6f6, #ffffff); }
    .main-contact .form-contact textarea {
      width: 100%;
      font-size: 20px; } }

@media (min-width: 1024px) {
  .main-contact .img-banner-contact {
    grid-area: img-banner-contact;
    width: 70%;
    margin: auto; }
  .main-contact .h1-contact {
    grid-area: h1-contact;
    font-size: 50px;
    margin: 1% auto; }
  .main-contact .h3-contact {
    grid-area: h3-contact;
    font-size: 30px;
    margin: 1% auto;
    text-align: center; }
  .main-contact .form-contact {
    grid-area: form;
    width: 70%;
    margin: auto; }
    .main-contact .form-contact label {
      font-size: 25px; }
    .main-contact .form-contact input {
      width: 100%;
      font-size: 20px; }
    .main-contact .form-contact .button-form {
      font-size: 15px;
      width: 50%;
      height: 40px;
      border-width: 1px;
      color: #666666;
      border-color: #dcdcdc;
      border-top-left-radius: 27px;
      border-top-right-radius: 27px;
      border-bottom-left-radius: 27px;
      border-bottom-right-radius: 27px;
      box-shadow: inset 0px 1px 0px 0px #ffffff;
      text-shadow: inset 0px 1px 0px #ffffff;
      background: linear-gradient(#ffffff, #f6f6f6);
      cursor: pointer;
      margin: 2% 0 2% 25%;
      font-weight: bold; }
      .main-contact .form-contact .button-form :hover {
        background: linear-gradient(#f6f6f6, #ffffff); }
    .main-contact .form-contact textarea {
      width: 100%;
      font-size: 20px; } }

@media (min-width: 1600px) {
  .main-contact .img-banner-contact {
    width: 40%;
    margin: auto; }
  .main-contact .h1-contact {
    font-size: 50px;
    margin: 1% auto; }
  .main-contact .h3-contact {
    font-size: 30px;
    margin: 1% auto;
    text-align: center; }
  .main-contact .form-contact {
    width: 70%; }
    .main-contact .form-contact label {
      font-size: 25px; }
    .main-contact .form-contact input {
      width: 100%;
      font-size: 20px; }
    .main-contact .form-contact .button-form {
      width: 50%;
      font-size: 15px;
      border-width: 1px;
      color: #666666;
      border-color: #dcdcdc;
      font-weight: bold;
      border-top-right-radius: 27px;
      border-top-left-radius: 27px;
      border-bottom-right-radius: 27px;
      box-shadow: inset 0px 1px 0px 0px #ffffff;
      text-shadow: inset 0px 1px 0px #ffffff;
      background: linear-gradient(#ffffff, #f6f6f6);
      cursor: pointer;
      margin: 2% 0 2% 25%;
      font-family: Arial;
      height: 40px;
      border-bottom-left-radius: 27px; }
      .main-contact .form-contact .button-form :hover {
        background: linear-gradient(#f6f6f6, #ffffff); }
    .main-contact .form-contact textarea {
      width: 100%;
      font-size: 20px; } }

.main-about {
  width: 90%;
  margin: auto;
  height: 65vh; }
  .main-about section {
    width: 100%; }
    .main-about section h1 {
      width: 100%;
      text-align: center;
      margin: auto;
      margin-top: 10px; }
    .main-about section img {
      margin: 0px 35%;
      width: 30%;
      height: auto; }
    .main-about section .img-about {
      display: none; }
    .main-about section p {
      margin: auto;
      margin-top: 20px;
      width: 90%;
      font-size: 14px;
      text-align: left; }
    .main-about section .p {
      margin: auto;
      margin-top: 20px;
      width: 90%;
      font-size: 14px;
      text-align: left; }
    .main-about section .p1 {
      margin: auto;
      margin-top: 20px;
      width: 90%;
      font-size: 14px;
      text-align: left; }

@media (min-width: 768px) {
  .main-about {
    min-height: 95vh; }
    .main-about section p {
      margin: auto;
      margin-top: 40px;
      width: 100%;
      text-align: justify;
      font-size: 25px; }
    .main-about section .p {
      margin: auto;
      margin-top: 40px;
      width: 100%;
      text-align: justify;
      font-size: 25px; }
    .main-about section .p1 {
      margin: auto;
      margin-top: 40px;
      width: 100%;
      text-align: justify;
      font-size: 25px; } }

@media (min-width: 1024px) {
  .main-about {
    width: 100%; }
    .main-about section {
      display: grid;
      grid-template-columns: 0.1fr 1fr 1fr 0.1fr;
      grid-template-rows: 0.1 1fr 1fr 1fr 1fr 0.1fr;
      gap: 0;
      grid-template-areas: ". h1 h1 ."
 ". img img-about ."
 ". p img-about ."
 ". p2 img-about ."
 ". p3 img-about ."; }
      .main-about section h1 {
        width: 100%;
        margin: 2% auto 2% auto;
        grid-area: h1; }
      .main-about section img {
        width: 25%;
        grid-area: img;
        margin: auto; }
      .main-about section .img-about {
        display: block; }
      .main-about section p {
        font-size: 15px;
        width: 100%;
        grid-area: p;
        margin-top: 0px; }
      .main-about section .p {
        font-size: 15px;
        width: 100%;
        grid-area: p2;
        margin-top: 0px; }
      .main-about section .p1 {
        font-size: 15px;
        width: 100%;
        grid-area: p3;
        margin-top: 0px; }
      .main-about section .img-about {
        width: 90%;
        margin: auto;
        grid-area: img-about; } }

@media (min-width: 1600px) {
  .main-about {
    min-height: 72vh; }
    .main-about section {
      margin-bottom: 60px; }
      .main-about section h1 {
        width: 10%;
        margin: 20px auto;
        grid-area: h1;
        text-align: center; }
      .main-about section img {
        width: 25%;
        grid-area: img; }
      .main-about section p {
        font-size: 20px;
        width: 100%;
        grid-area: p; }
      .main-about section .p {
        font-size: 20px;
        width: 100%;
        grid-area: p2; }
      .main-about section .p1 {
        font-size: 20px;
        width: 100%;
        grid-area: p3; }
      .main-about section .img-about {
        width: 70%;
        margin: auto;
        grid-area: img-about; } }

.main-services {
  min-height: 66.5vh; }
  .main-services section {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    .main-services section h1 {
      font-size: 25px;
      margin: 10px auto 5px auto;
      width: 100%;
      text-align: center; }
    .main-services section img {
      width: 25%;
      margin: auto; }
    .main-services section h3 {
      width: 100%;
      text-align: center;
      margin: auto;
      font-size: 15px; }
    .main-services section ul {
      width: 60%;
      font-size: 15px;
      margin: auto;
      order: 1; }
      .main-services section ul li {
        width: 100%; }
    .main-services section .img {
      width: 50%;
      margin: 5% auto 15px auto;
      border-radius: 10%; }

@media (min-width: 480px) and (orientation: landscape) {
  .main-services section ul {
    width: 50%;
    font-size: 15px;
    margin: 15% auto 40px auto; }
    .main-services section ul li {
      width: 100%; }
  .main-services section .img {
    width: 50%;
    margin: 5% auto 15px auto;
    border-radius: 10%; } }

@media (min-width: 600px) {
  .main-services section .h1 {
    font-size: 40px;
    margin: 10px auto 5px auto;
    width: 100%;
    text-align: center; }
  .main-services section img {
    width: 20%;
    margin: auto; }
  .main-services section h3 {
    width: 100%;
    text-align: center;
    margin: auto;
    font-size: 25px; }
  .main-services section ul {
    width: 50%;
    font-size: 20px;
    margin: 20% auto 6% auto; }
    .main-services section ul li {
      width: 100%; }
  .main-services section .img {
    width: 50%;
    margin: 5% auto 15px auto;
    border-radius: 10%; } }

@media (min-width: 768px) {
  .main-services section h1 {
    font-size: 50px;
    margin: 10px auto 5px auto;
    width: 100%;
    text-align: center; }
  .main-services section img {
    width: 25%;
    margin: auto; }
  .main-services section h3 {
    width: 100%;
    text-align: center;
    margin: auto;
    font-size: 35px; }
  .main-services section ul {
    width: 50%;
    font-size: 30px;
    margin: 20% auto 17% auto; }
    .main-services section ul li {
      width: 100%; }
  .main-services section .img {
    width: 50%;
    margin: 5% auto 15px auto;
    border-radius: 10%; } }

@media (min-width: 1024px) {
  .main-services section {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 0.1fr 0.9fr 1fr 0.1fr;
    grid-template-areas: ". h1 img ."
 ". h2 img ."
 ". h3 img ."
 ". h4 img ."; }
    .main-services section h1 {
      font-size: 30px;
      margin: 50px auto 0px auto;
      width: 100%;
      text-align: center;
      grid-area: h1; }
    .main-services section img {
      width: 20%;
      margin: auto;
      grid-area: h2; }
    .main-services section h3 {
      width: 100%;
      text-align: center;
      font-size: 25px;
      grid-area: h3; }
    .main-services section ul {
      width: 50%;
      font-size: 21px;
      margin: auto auto 20% auto;
      grid-area: h4; }
      .main-services section ul li {
        width: 100%; }
    .main-services section .img {
      width: 100%;
      margin: 50px auto 50px auto;
      border-radius: 10%;
      grid-area: img; } }

@media (min-width: 1600px) {
  .main-services section h1 {
    font-size: 50px;
    margin: 100px auto 0px auto;
    width: 100%;
    text-align: center;
    grid-area: h1; }
  .main-services section img {
    width: 30%;
    margin: 0px auto;
    grid-area: h2; }
  .main-services section h3 {
    width: 100%;
    text-align: center;
    font-size: 35px;
    grid-area: h3;
    margin: auto; }
  .main-services section ul {
    width: 60%;
    font-size: 25px;
    margin: 5% auto 20% auto;
    grid-area: h4; }
    .main-services section ul li {
      width: 100%; }
  .main-services section .img {
    width: 90%;
    margin: 100px auto 50px auto;
    grid-area: img;
    border-radius: 0; } }

.main-productions {
  width: 90%;
  margin: auto; }
  .main-productions section {
    display: flex;
    flex-direction: column;
    margin: auto; }
    .main-productions section h1 {
      width: 100%;
      margin: 20px auto 0px auto;
      text-align: center; }
    .main-productions section h3 {
      width: 100%;
      margin: 0 auto;
      text-align: center; }
    .main-productions section .h3 {
      width: 100%;
      margin: 15px auto;
      font-size: 17px;
      text-align: center; }
    .main-productions section iframe {
      order: 1;
      width: 100%;
      margin: 0 auto;
      font-size: 15px;
      text-align: center; }
    .main-productions section .img-productions {
      width: 50%;
      margin: -10% auto; }
  .main-productions .section-2 {
    display: none; }

@media (min-width: 768px) {
  .main-productions section .img-productions {
    width: 40%; }
  .main-productions section iframe {
    width: 60%;
    height: 50vh; } }

@media (min-width: 1024px) {
  .main-productions {
    display: flex;
    flex-wrap: wrap;
    width: 90%; }
    .main-productions section {
      width: 50%;
      margin: 0; }
      .main-productions section .img-productions {
        width: 40%; }
      .main-productions section h3 {
        width: 90%;
        font-size: 35px; }
      .main-productions section .h3 {
        width: 90%;
        font-size: 30px; }
      .main-productions section iframe {
        width: 60%;
        height: 60vh; }
    .main-productions .section-2 {
      order: -1;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 50%;
      margin: 0; }
      .main-productions .section-2 img {
        width: 49%;
        margin: 20px auto auto 1%; }
      .main-productions .section-2 .img-2 {
        margin: 20px 0 10px 5px;
        width: 100%; } }

@media (min-width: 1600px) {
  .main-productions {
    display: flex;
    flex-wrap: wrap;
    width: 90%; }
    .main-productions section {
      width: 50%;
      margin: 0; }
      .main-productions section .img-productions {
        width: 40%; }
      .main-productions section h3 {
        width: 90%;
        font-size: 35px; }
      .main-productions section .h3 {
        width: 90%;
        font-size: 30px; }
      .main-productions section iframe {
        width: 60%;
        height: 45vh; }
    .main-productions .section-2 {
      order: -1;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 50%;
      margin: 0; }
      .main-productions .section-2 img {
        width: 49%;
        margin: 20px auto auto 1%; }
      .main-productions .section-2 .img-2 {
        margin: 20px 0 10px 5px;
        width: 100%; } }

.footer {
  margin-top: 1%; }
  .footer h2 {
    font-size: 14px;
    width: 90%;
    text-align: center;
    margin: 5% auto 2% auto; }
  .footer p {
    font-size: 15px;
    text-align: center;
    margin: 0; }
  .footer section {
    text-align: center; }
    .footer section a img {
      width: 8%;
      margin: 1% auto 1% auto; }

@media (min-width: 600px) {
  .footer h2 {
    font-size: 25px;
    width: 90%;
    text-align: center;
    margin: auto auto 2% auto; }
  .footer p {
    font-size: 30px;
    text-align: center;
    margin: 0; }
  .footer section {
    text-align: center; }
    .footer section a img {
      width: 8%;
      margin: 1% 0 1% 0;
      padding: 1%; } }

@media (min-width: 768px) {
  .footer {
    margin-top: 1%; }
    .footer h2 {
      font-size: 35px;
      width: 90%;
      text-align: center; }
    .footer p {
      font-size: 30px;
      text-align: center; }
    .footer section a img {
      width: 8%;
      margin: 1% 0 1% 0;
      padding: 1%; } }

@media (min-width: 1024px) {
  .footer h2 {
    font-size: 30px;
    width: 90%;
    text-align: center;
    margin: auto; }
  .footer p {
    font-size: 25px;
    text-align: center;
    margin-top: 1%;
    font-weight: lighter; }
  .footer section a img {
    width: 4%;
    margin: auto; } }