/*
Theme Name: Insitu
Theme URI: https:/insitu.ar
Author: Alexis Wursten
Author URI: https://tuweb.com
Description: Un tema personalizado hecho desde cero.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-tema
*/

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanRegular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanLight.ttf") format("truetype");
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanLightItalic.ttf")
    format("truetype");
  font-weight: lighter;
  font-style: italic;
}

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanItalic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Century Gothic Paneuropean";
  src: url("assets/fonts/CenturyGothicPaneuropeanBoldItalic.ttf")
    format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Social Gothic";
  src: url("assets/fonts/Social Gothic DemiBold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

:root {
  --color-primary: #005f81;
  --color-abordaje-territorial: #e17b1f;
  --color-abordaje-territorial-light: #e49f7a;
  --color-abordaje-territorial-lighter: #fff7f0;
  --color-investigacion-situada: #4c9f7e;
  --color-investigacion-situada-light: #4c9f7e;
  --color-investigacion-situada-lighter: #cfefe3;
  --color-formacion: #d6a423;
  --color-formacion-light: #eece77;
  --color-formacion-lighter: #fff7e1;
}

*:focus {
  outline: none;
}

button,
a {
  cursor: pointer;
}

.bg-primary {
  background-color: var(--color-primary);
  background-blend-mode: multiply;
}

.text-primary {
  color: var(--color-primary);
}

.border-primary {
  border-color: var(--color-primary);
}

.bg-abordaje-territorial {
  background-color: var(--color-abordaje-territorial);
  background-blend-mode: multiply;
}

.text-abordaje-territorial {
  color: var(--color-abordaje-territorial);
}

.border-abordaje-territorial {
  border-color: var(--color-abordaje-territorial);
}

.bg-abordaje-territorial-light {
  background-color: var(--color-abordaje-territorial-light);
  background-blend-mode: multiply;
}

.text-abordaje-territorial-light {
  color: var(--color-abordaje-territorial-light);
}

.border-abordaje-territorial-light {
  border-color: var(--color-abordaje-territorial-light);
}

.bg-abordaje-territorial-lighter {
  background-color: var(--color-abordaje-territorial-lighter);
  background-blend-mode: multiply;
}

.text-abordaje-territorial-lighter {
  color: var(--color-abordaje-territorial-lighter);
}

.border-abordaje-territorial-lighter {
  border-color: var(--color-abordaje-territorial-lighter);
}

.bg-investigacion-situada {
  background-color: var(--color-investigacion-situada);
  background-blend-mode: multiply;
}

.text-investigacion-situada {
  color: var(--color-investigacion-situada);
}

.border-investigacion-situada {
  border-color: var(--color-investigacion-situada);
}

.bg-investigacion-situada-light {
  background-color: var(--color-investigacion-situada-light);
  background-blend-mode: multiply;
}

.text-investigacion-situada-light {
  color: var(--color-investigacion-situada-light);
}

.border-investigacion-situada-light {
  border-color: var(--color-investigacion-situada-light);
}

.bg-investigacion-situada-lighter {
  background-color: var(--color-investigacion-situada-lighter);
  background-blend-mode: multiply;
}

.text-investigacion-situada-lighter {
  color: var(--color-investigacion-situada-lighter);
}

.border-investigacion-situada-lighter {
  border-color: var(--color-investigacion-situada-lighter);
}

.bg-formacion {
  background-color: var(--color-formacion);
  background-blend-mode: multiply;
}

.text-formacion {
  color: var(--color-formacion);
}

.border-formacion {
  border-color: var(--color-formacion);
}

.bg-formacion-light {
  background-color: var(--color-formacion-light);
  background-blend-mode: multiply;
}

.text-formacion-light {
  color: var(--color-formacion-light);
}

.border-formacion-light {
  border-color: var(--color-formacion-light);
}

.bg-formacion-lighter {
  background-color: var(--color-formacion-lighter);
  background-blend-mode: multiply;
}

.text-formacion-lighter {
  color: var(--color-formacion-lighter);
}

.border-formacion-lighter {
  border-color: var(--color-formacion-lighter);
}

.font-century-gothic {
  font-family: "Century Gothic Paneuropean", sans-serif;
}

.font-social-gothic {
  font-family: "Social Gothic", sans-serif;
}

.bg-paper {
  background-image: url("assets/images/papelarrugado5.png");
}

.bg-paper-cut {
  background-image: url("assets/images/papelcortado.png");
  background-position: bottom;
}

.bg-quienes-somos {
  background-image: url("assets/images/header-quienes-somos.png");
}

.bg-que-hacemos {
  background-image: url("assets/images/header-que-hacemos.png");
}

.bg-lecturas {
  background-image: url("assets/images/header-lecturas.png");
}

.container-insitu {
}

.trapecio {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 40px;
  min-height: 297px;
  margin-bottom: 20px;
}

.trapecio-0 {
  padding-left: 24px;
  padding-right: 24px;
  clip-path: polygon(0% 100%, 100% calc(100% - 25px), 100% 0%, 0% 0%);
}
.trapecio-1 {
  padding-top: 75px;
  padding-left: 24px;
  padding-right: 24px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 25px);
  margin-bottom: 45px;
}
.trapecio-2 {
  padding-bottom: 65px;
  padding-left: 24px;
  padding-right: 24px;
  clip-path: polygon(0% calc(100% - 25px), 100% 100%, 100% 0%, 0% 0%);
}
.trapecio-3 {
  padding-top: 75px;
  padding-left: 24px;
  padding-right: 24px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 25px, 0% 0%);
  margin-bottom: 45px;
}

.trapecio-color-0 {
  background-color: #adc6cf; /* Color de fondo */
}

.trapecio-color-1 {
  background-color: #e7d5a2; /* Color de fondo */
}

.trapecio-color-2 {
  background-color: #e0bea3; /* Color de fondo */
}

.trapecio-color-3 {
  background-color: #abc8bd; /* Color de fondo */
}

.trapecio-color-4 {
  background-color: #e7d5a2; /* Color de fondo */
}

.trapecio-color-5 {
  background-color: #adc6cf; /* Color de fondo */
}

.trapecio-color-6 {
  background-color: #abc8bd; /* Color de fondo */
}

.trapecio-color-7 {
  background-color: #e0bea3; /* Color de fondo */
}

.form-contacto {
  background-color: #5d85a2;
  /* padding: 120px 120px 80px;   */
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 40px);
}

.no-margin {
  margin: 0;
}

html {
  font-family: "Century Gothic Paneuropean", sans-serif;
  font-size: 20px;
  color: var(--color-primary);
}

h1 {
  font-family: "Social Gothic", sans-serif;
  font-weight: bold;
  font-size: 60px;
  margin-bottom: 30px;
}

h1.titulo-articulo {
  font-family: "Century Gothic Paneuropean", sans-serif;
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 6px;
}

h2 {
  font-family: "Century Gothic Paneuropean", sans-serif;
  font-weight: bold;
  font-size: 40px;
  margin-bottom: 20px;
}

p {
  text-align: left;
}

p.force-left {
  text-align: left;
}

.prose p {
  font-size: 18px;
  margin-bottom: 1rem;
}

.form-control label {
  display: block;
  color: white;
  font-style: italic;
  font-weight: lighter;
}

.form-control input,
.form-control textarea {
  background: white;
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  width: 100%;
  margin-bottom: 32px;
}

.form-control textarea {
  resize: vertical;
  min-height: 135px;
}

.bg-ilustracion {
  background-image: url("./assets/images/ilustracion.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

.bg-ilustracion.bg-ilustracion-bottom {
  background-position-y: -887px;
}

@media only screen and (min-width: 768px) {
  .trapecio-0 {
    padding-left: 40px;
    padding-right: 40px;
  }
  .trapecio-1 {
    padding-left: 40px;
    padding-right: 40px;
  }
  .trapecio-2 {
    padding-left: 40px;
    padding-right: 40px;
  }
  .trapecio-3 {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media only screen and (min-width: 1024px) {
  .trapecio {
    width: 50%;
    padding-top: 50px;
    padding-bottom: 40px;
    min-height: 297px; /* Alto del div */
    margin-bottom: 40px;
  }

  .trapecio-0 {
    padding-left: 60px;
    padding-right: 80px;
    clip-path: polygon(0% 100%, calc(100% - 25px) 100%, 100% 0%, 0% 0%);
  }
  .trapecio-1 {
    padding-left: 80px;
    padding-right: 60px;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 25px 0%);
  }
  .trapecio-2 {
    padding-left: 60px;
    padding-right: 80px;
    clip-path: polygon(0% 100%, 100% 100%, calc(100% - 25px) 0%, 0% 0%);
  }
  .trapecio-3 {
    padding-left: 80px;
    padding-right: 60px;
    clip-path: polygon(25px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
}

@media only screen and (min-width: 1153px) {
  .bg-ilustracion {
    background-size: auto;
  }

  .bg-ilustracion-bottom {
    background-image: url("./assets/images/ilustracion.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-position-y: -887px;
  }
}