@import url("globals.css");
@import url("tipography.css");
@import url("animation.css");
@import url("buttons.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--black);
  position: relative;
  background-color: var(--orange-10);
  overflow-x:hidden;
}

img {
  max-width: 100%;
}

a,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/*========================================\\
||                                        ||
||               Backgrounds              ||
||                                        ||
\\========================================*/

.bg-yellow {
  background-color: var(--yellow);
  color: var(--black);
}

.bg-yellow-to-white {
  background-image: linear-gradient(0deg, var(--white) 50%, var(--yellow) 100%);
  color: var(--black);
}

.bg-orange {
  background-color: var(--orange);
  color: var(--white);
}

.bg-acqua {
  background-color: var(--acqua);
  color: var(--white);
}

.bg-acqua-to-blue {
  background-image: linear-gradient(45deg, var(--blue) 0%, var(--acqua) 100%);
  color: var(--white);
}

.bg-white {
  background-color: var(--white);
  color: var(--black);
}

.bg-blue {
  background-color: var(--blue);
  color: var(--white);
}

.bg-red {
  background-color: #cc0000;
  color: var(--white);
}

/*========================================\\
||                                        ||
||            Grids & Structure           ||
||                                        ||
\\========================================*/

section {
  padding-top: calc(2 * var(--padding));
  padding-bottom: calc(2 * var(--padding));
}

.double-spaced {
  padding-top: calc(4 * var(--padding));
  padding-bottom: calc(4 * var(--padding));
}

.container {
  max-width: 1280px;
  display: flex;
  margin: auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

@media screen and (max-width:864px) {
  .container {
    flex-direction: column;
  }
}

.container.full-width {
  width: 100%;
  max-width: inherit;
}

.col {
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: var(--gap);
  padding: var(--padding);
  position: relative;
}

@media screen and (max-width:864px) {
  .col{
    padding-left: 0;
    padding-right: 0;
  }
}

.col.one-third {
  flex-basis: 33.33%;
}

.col.two-thirds {
  flex-basis: 66.66%;
}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  align-items: flex-start;
}

@media screen and (max-width:864px) {
  .grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    align-items: flex-start;
  }
}

.grid-4col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: flex-start;
}

/***
*
* Alignments
*
*/

.h-left {
  align-items: start;
}

.h-center {
  align-items: center;
}

.h-right {
  align-items: end;
}

.v-top {
  justify-content: start;
}

.v-center {
  justify-content: center;
}

.v-bottom {
  justify-content: end;
}

/*========================================\\
||                                        ||
||                  Nav Top               ||
||                                        ||
\\========================================*/

nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 108px;
  display: flex;
  align-items: center;
  color: var(--black);
  font-weight: bold;
  font-family: sans-serif;
  z-index: 999;
  transition: all .3s ease-in-out;
  background-color: var(--white);
  border-bottom: 1px solid #e5e5e5;
  font-family: 'Poppins', sans-serif;
}

nav.admin {
  height: 72px;
}

nav .container {
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 0 var(--gap);
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: var(--gap);
  list-style: none;
  padding: 16px 96px;
}

nav ul li {
  padding: 8px 12px;
  border-radius: var(--radius);
}

nav ul li:hover {
  color: var(--orange);
}

nav a.nav-hamb {
  display: none;
}

nav img.logo_light,
nav img.logo_dark {
  height: 56px;
  width: auto;
}

nav img.logo_light {
  display: none;
}

/***
*
* Nav Scrolled
*
*/

nav.scrolled {
  background-color: var(--blue);
  height: 72px;
  color: var(--white);
  font-size: 1em;
  box-shadow: var(--shadow);
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  position: fixed;
}

nav.scrolled img.logo_light {
  display: inherit;
}

nav.scrolled img.logo_dark {
  display: none;
}

nav.scrolled ul {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: var(--gap);
  list-style: none;
  border-bottom: 0px solid #fff;
  padding: 0px
}

nav.scrolled ul li:hover {
  color: var(--white);
  background-color: var(--orange-50);
}

nav.scrolled img.nav-logo {
  display: block;
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}


/***
*
* Nav Mobile
*
*/

@media screen and (max-width:864px) {

  nav .container a.nav-hamb {
    display: inherit;
  }

  nav,
  nav.scrolled {
    background-color: var(--blue);
    height: 72px;
    font-size: 1em;
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    position: fixed;
    justify-content: flex-start;
    padding: 0px var(--padding);
  }

  nav .container {
    flex-direction: row;
    color: var(--white);
    padding: 0;
  }

  nav ul,
  nav.scrolled ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    grid-gap: 0px;
    list-style: none;
    border-bottom: 0px solid #fff;
    padding: 0px;
    position: absolute;
    top: 72px;
    left: -120%;
    height: 100vh;
    background-color: var(--blue-80);
    backdrop-filter: blur(30px);
    width: 100%;
    max-width: 80%;
    transition: all 1s ease-in-out;
    padding: var(--gap);
  }

  nav ul li {
    width: 100%;
  }

  nav ul.active {
    left: 0%;
    transition: all 1s ease-in-out;
  }

  nav ul li a {
    padding: 12px 24px;
    width: 100%;
    border-radius: var(--radius);
    display: block;
  }

  nav ul li:hover {
    color: var(--white);
    background-color: #fff3;
  }

  nav img.logo_dark,
  nav.scrolled img.logo_dark {
    display: none;
  }

  nav img.logo_light,
  nav.scrolled img.logo_light {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

}

/*========================================\\
||                                        ||
||               Components               ||
||                                        ||
\\========================================*/

/***
*
* Article Grid
*
*/

.article-grid-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  -webkit-box-shadow: var(--shadow);
}

.article-grid-1 .full-line {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 5;
}

.article-grid-1 .half-line-first {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
}

.article-grid-1 .half-line-second {
  display: grid;
  grid-column-start: 3;
  grid-column-end: 5;
}

.article-grid-1 .content {
  width: 100%;
  display: flex;
}

.article-grid-1 .content .article {
  width: 100%;
  height: 100%;
  max-height: calc(12 * var(--padding));
}

.article-grid-1 .content .article.image {
  overflow: hidden;
  position: relative;
  padding: var(--padding);
}

.article-grid-1 .content .article.image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.article-grid-1 .content .article.content {
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  grid-gap: var(--gap);
}

@media screen and (max-width:864px) {
  .article-grid-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .article-grid-1 .full-line,
  .article-grid-1 .half-line-first,
  .article-grid-1 .half-line-second {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .article-grid-1 .half-line-first .article.image {
    order: 2;
  }
}

@media screen and (max-width:540px) {
  .article-grid-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .article-grid-1 .full-line,
  .article-grid-1 .half-line-first,
  .article-grid-1 .half-line-second {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .article-grid-1 .full-line {
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .article-grid-1 .half-line-first {
    grid-row-start: 3;
    grid-row-end: 5;
  }

  .article-grid-1 .half-line-second {
    grid-row-start: 5;
    grid-row-end: 7;
  }

  .article-grid-1 .article.image {
    aspect-ratio: 4/3;
  }

  .article-grid-1 .half-line-first .article.image {
    order: 0;
  }

  .article-grid-1 .content {
    flex-direction: column;
  }
}

/*** ====================
*
* Team Member
*
====================== */

.profile-pic {
  background-size: cover;
  background-position: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  display: block;
  margin: auto;
}

.profile-pic .flipper {
  position: relative;
	width: 100%;
	height: 100%;
  transition: transform 0.8s;
	transform-style: preserve-3d;
}

.profile-pic div {
  background-size: cover;
  background-position: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  display: block;
  margin: auto;
  position: absolute;
  backface-visibility: hidden;
}

.profile-pic div.back {
  transform: rotateY(180deg);
}

.profile-pic:hover .flipper {
  transform: rotateY(180deg);
  transition: transform 0.8s;
	transform-style: preserve-3d;
}

h4 span.name-two {
  display: none;
}

.profile-pic:hover + h4 span.name-one {
  display: none;
}
.profile-pic:hover + h4 span.name-two {
  display: block;
}


.profile-icons {
  display: flex;
  grid-gap: var(--gap);
}

.round-icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
}

.round-icon.small {
  min-width: 32px;
  min-height: 32px;
  font-size: 24px;
}

.round-icon.orange {
  color: var(--orange);
}

.round-icon.orange:hover {
  color: var(--white);
  background-color: var(--orange);
}

#top-header {
  padding: 0;
  position: relative;
  background: linear-gradient(315deg, var(--orange-20) 0%, var(--white) 100%);
}

#top-header .background-image {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

#top-header .background-image .gradient {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  background: linear-gradient(0deg,
      var(--yellow) 0%,
      hsl(21, 89%, 52%, 0%) 100%);
  background-size: cover;
  background-position: top;
  background-blend-mode: normal;
}

#top-header .background-image .image-container {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background-image: url("/assets/img/bg_stage_01.jpg");
  background-position: top;
  background-size: cover;
}

#top-header img.curtain {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 7;
}

#top-header img.curtain.left {
  left: 0;
}

#top-header img.curtain.right {
  right: 0;
}

@media screen and (max-width:864px) {
  #top-header img.curtain {
    height: 50%;
  }

  #top-header .col {
    align-items: center;
    text-align: center;
  }
}

/*** ====================
*
* Top Header Figure 1
*
====================== */

.top-header-figure {
  position: relative;
  width: 100%;
}

.background-square {
  background-color: var(--blue);
  border-radius: calc(3 * var(--radius));
  width: 70%;
  aspect-ratio: 1;
  margin: 64px;
  z-index: 1;
  margin: auto;
}

.top-header-figure img {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  width: 45%;
}

.top-header-figure .image-one {
  z-index: 3;
  right: 50%;
  top: 0;
  transform: translate(90%, -15%);
  box-shadow: 0 10px 20px 0 #00000055;
}

.top-header-figure .image-two {
  z-index: 2;
  left: 50%;
  bottom: 0;
  transform: translate(-90%, 15%);
  box-shadow: 0 10px 20px 0 #00000055;
}

.top-header-figure .dotted {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: translate(32px, -32px);
  background: #fff0;
  background-image: radial-gradient(var(--blue-50) 2px, transparent 0);
  background-size: 20px 20px;
  background-position: -6px -6px;

}

.top-header-figure .circle-orange {
  width: 50%;
  border-radius: 50%;
  background-color: var(--orange);
  aspect-ratio: 1;
  position: absolute;
  top: 0;
  transform: translateY(-15%);
  z-index: -1;
}

.top-header-figure .circle-acqua {
  width: 20%;
  border-radius: 50%;
  background-color: var(--acqua);
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-15%, 30%);
  z-index: 2;
}

/*** ====================
*
* Top Header Figure 2
*
====================== */

.top-header-figure-2 {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 50% 50%;
  aspect-ratio: 4/5;
}

.top-header-figure-2 .circle {
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--orange);
  position: absolute;
  z-index: 1;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.top-header-figure-2 img {
  z-index: 2;
  width: max-content;
  position: relative;
}

/*** ====================
* 
* Time line
*
====================== */

.timeline-separator-h {
  margin-left: var(--gap);
  border-left: 4px dotted var(--blue);
  height: 32px;
}

#logo-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 24px;
}

#logo-container .col {
  max-width: 180px;
  min-width: 100px;
}

#logo-container img {
  max-width: 240px;
  max-height: 240px;
  width: 100%;
  margin: auto;
}

figure {
  position: relative;
}

figure.decoration-one {
  display: flex;
  aspect-ratio: 2/3;
  max-width: 360px;
  max-height: 460px;
}

figure.decoration-one img.pic-one {
  margin: auto;
  z-index: 9;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  width:max-content;
  height:80%;
  margin: 0;
}

figure.decoration-one img.pic-two {
  position:absolute;
  bottom:0;
  right:0;
  width:50%;
  border-radius: var(--radius);
  z-index:10;
}


figure.decoration-one .solid {
  width: 80%;
  height: 100%;
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 1;
  transform: translate(-32px, 32px);
  border-radius: calc(4 * var(--radius));
}

figure.decoration-one .dotted {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: translate(32px, -32px);
  background: #fff0;
  background-image: radial-gradient(var(--blue-50) 2px, transparent 0);
  background-size: 20px 20px;
  background-position: -6px -6px;
}

/*** ====================
*
* Icons
*
====================== */

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon.round {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
}

.icon.medium {
  width: 48px;
  height: 48px;
}

.icon.large {
  width: 80px;
  height: 80px;
  font-size: 40px;
  margin: auto;
}

.icon.xx-large {
  width: 160px;
  height: 160px;
  font-size: 80px;
  margin: auto;
}

@media screen and (max-width:864px) {
  .icon.xx-large {
    width: 120px;
    height: 120px;
    font-size: 64px;
  }
}

.icon-list {
  display: flex;
  flex-direction: column;
}

.icon-list .list-item {
  display: flex;
  align-items: strecht;
  grid-gap: var(--gap);
  padding: var(--gap) 0px;
}

.icon-list .list-item .content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.icon-list .list-item .icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-list .list-item .icon-container .icon{
  z-index: 2;
}

.icon-container .timeline-separator {
  border-left: 2px dotted var(--blue);
  position: absolute;
  left:50%;
  height:calc(50% + var(--gap));
  z-index: 1;
}

.icon-container .timeline-separator.bottom {
  bottom: calc(-1*var(--gap));
  transform: translate(-50%,0%);
}

.icon-container .timeline-separator.top {
  top: calc(-1*var(--gap));;
  transform: translate(-50%,0%);
}

/*** ====================
*
* Responsive iframe
*
====================== */

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*** ====================
*
* CTAs
*
====================== */

.cta-orange {
  background-color: var(--orange);
  color: var(--white)
}

.cta-orange .container {
  justify-content: space-between;
}

.cta-orange .btn {
  border: 2px solid var(--white);
  margin-top: var(--padding);
  display: block;
}

.cta-orange .btn:hover {
  color: var(--orange);
  background-color: var(--white);
}

.cta-orange .img-container {
  position: relative;
  min-width: 320px;
}

.cta-orange .img-container img {
  position: absolute;
  bottom: calc(-2*var(--padding));
}

@media screen and (max-width:864px) {
  .cta-orange {
    text-align: center;
  }

  .cta-orange .btn {
    margin: auto;
    margin-top: var(--padding);
  }

  .cta-orange .img-container {
    order: 2;
    height: 100%;
    min-height: 300px;
  }

  .cta-orange .img-container img {
    left: 50%;
    transform: translateX(-50%);
  }
}


.card-icon {
  border: 1px solid #999;
  padding: var(--padding);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  background-color: var(--white);
  width: 100%;
  display: flex;
  grid-gap: 8px;
  flex-direction: column;
  align-items: center;
}

.card-icon.active {
  box-shadow:
    0 0 0 2px #0909,
    0 0 0 6px #0903,
    0 0 0 10px #0901,
    0 0 0 16px #0901;
}

/*========================================\\
||                                        ||
||                  FORM                  ||
||                                        ||
\\========================================*/

form.card {
  background-color: var(--white);
  box-shadow: var(--shadow);
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  grid-gap: var(--gap);
  border-radius: var(--radius);
}

form fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  grid-gap: var(--gap);
  margin-bottom: var(--gap);
}

fieldset .group-heading {
  font-size: 1.25em;
  font-weight: 700;
}

fieldset .group-heading i {
  color: var(--orange);
  margin-right: 8px;
}

form div.line {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px, 1fr));
  grid-gap: var(--gap);
}

form div.input-group {
  display: flex;
  flex-direction: column;
  grid-gap: 4px;
  width: 100%;
}

form label {
  font-size: 0.8em;
}

form input,
form select {
  height: 36px;
  padding: 4px 8px;
  border: 0px solid var(--orange-20);
  border-bottom: 1px solid var(--orange);
  width: 100%;
  background-color: #fff;
  font-size: 1em;
}

form input:focus {
  border: 1px solid var(--orange);
  outline: 3px solid var(--orange-20);
  background-color: #fff;
}

input[type=submit] {
  padding: 0;
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  accent-color: var(--orange)
}

.inline-checkbox {
  display: flex;
  align-items: center;
  grid-gap: 8px;
}

input.alert,
select.alert {
  outline: 3px solid #cc000055;
  border: 1px solid #cc0000
}

form span.alert-message {
  display: none;
  font-size:0.7em;
  color: #cc0000;
}

.alert ~ span.alert-message,
input.alert ~ span.alert-message{
  display:inline-block;
}

/*** ====================
*
* Input with icon
*
====================== */

label.input-icon {
  position: relative;
}

label.input-icon input {
  padding-left: 32px;
}

label.input-icon > i.input-icon {
  position: absolute;
  left:12px;
  top: 50%;
  transform: translateY(-50%);
  color: #cc0000;
}
/*========================================\\
||                                        ||
||                 BADGES                 ||
||                                        ||
\\========================================*/

.badge {
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bolder;
  display: inline-flex;
  vertical-align: middle;
  width: max-content;
}

.badge.red {
  background-color: var(--red);
  color: var(--white);
}

.badge.green {
  background-color: #009900;
  color: var(--white);
}

.badge.gray {
  background-color: #ddd;
  color: var(--black);
}

.badge.orange {
  background-color: var(--orange);
  color: var(--white);
}

/*========================================\\
||                                        ||
||                Blog Grid               ||
||                                        ||
\\========================================*/

.post-grid {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width:100%;
  justify-content: center;
}

.post-item a{
  width: 100%;
  display: flex;
  flex-direction: column;
  grid-gap: 8px;
}

.post-image {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.image-container {
  background-size:cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(1);
  transition:all .3s ease-in-out;
}

.post-item a:hover .image-container {
  transform: translate(-50%,-50%) scale(1.05);
  transition:all .3s ease-in-out;
}

.post-item h3 {
  font-size: 1.5em
}

.post-item a:hover h3 {
  color: var(--orange);
}

/*========================================\\
||                                        ||
||                 FOOTER                 ||
||                                        ||
\\========================================*/

footer {
  padding-top: calc(2 * var(--padding));
  padding-bottom: calc(2 * var(--padding));
  background-color: var(--blue);
  color: var(--white);
}

footer h2,
footer h3,
footer h4 {
  color: var(--white);
}