/*!
Theme Name: Barraza
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: barraza
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Barraza is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
@import url("https://use.typekit.net/iek6rwg.css");

/*** The new CSS Reset - version 1.4.5 (last updated 13.1.2022) ***/

/*
		 Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
		 - The "symbol *" part is to solve Firefox SVG sprite bug
	*/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
	display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
	- fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Bebas Neue Pro Book
 
 font-family: bebas-neue-pro, sans-serif;
 
 font-weight: 300;
 
 font-style: normal;
 
 
 Bebas Neue Pro Bold
 
 font-family: bebas-neue-pro, sans-serif;
 
 font-weight: 600;
 
 font-style: normal; */
body,
html {
  font-size: 18px;
  line-height: 1.2;
  background-color: #0f0f0f;
}
p {
  font-family: "Inconsolata", monospace;
}

/*main banner*/
.main-banner-container {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}
.main-banner-container:after {
  content: "";
  width: 100%;
  position: absolute;
  min-height: 690px;
  background-color: #fff;
  bottom: -60%;
  min-height: 36vw;
}
.main-banner-container .banner-image-block {
  position: relative;
  z-index: 1;
  max-width: 72%;
}
/* .main-banner-container:after{
	 content: '';
	 position: absolute;
	 width: 100%;
	 height: 90%;
	 top: 0;
	 right: 0;
	 
	 z-index: 0;
 } */

/*mai-container*/
.main-container {
  position: relative;
  z-index: 1;
  margin-top: 295px;
  padding-left: 375px;
  padding-left: 19.5%;
  padding-left: 19.5vw;
}
.title-container .pre-title {
  font-size: 46px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 15px;
}
.title-container h1 {
  font-size: 160px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #ffffff;
  text-transform: uppercase;
}
.bordered-container {
  border-left: 1px solid #f52b2d;
  margin-top: 80px;
}
.first-fdate {
  padding-left: 126px;
  position: relative;
  top: -10px;
}
.first-fdate:before {
  content: "";
  width: 100px;
  height: 1px;
  border-bottom: 1px solid #f52b2d;
  position: absolute;
  left: 0;
  top: 10px;
}
.first-fdate span {
  font-size: 36px;
  line-height: 26px;
  color: #ffffff;
  letter-spacing: 15px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
.top-content-container {
  border-left: 1px solid #f52b2d;
  padding-top: 560px;
  padding-top: 29.2vw;
  padding-left: 70px;
  display: flex;
  padding-bottom: 125px;
}
.top-content-container .image {
  flex-shrink: 0;
  background-size: cover;
}
.top-content-container .image img {
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.top-content-container .text-block {
  background-color: #ffffff;
  padding-left: 100px;
  width: 100%;
}
.top-content-container .text-container {
  max-width: 470px;
}
.top-content-container .text-container .title {
  color: #111111;
  font-size: 66px;
  line-height: 70px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 60px;
  text-transform: uppercase;
}
.top-content-container .text-container p {
  margin-bottom: 40px;
  line-height: 27px;
}
.top-content-container .text-container p b {
  font-weight: normal;
  padding-left: 2px;
  padding-right: 2px;
  color: #ffffff;
  background-color: #111111;
}

.warning-container {
  border-left: 1px solid #f52b2d;
  padding-left: 70px;
  padding-bottom: 75px;
  max-width: 1170px;
}
.warning {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f52b2d;
  padding: 20px;
}
.warning .left-side span {
  font-size: 56px;
  line-height: 70px;
  color: #f52b2d;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.warning .right-side {
  max-width: 50%;
  margin-left: 35px;
}
.warning .right-side p {
  font-size: 18px;
  line-height: 27px;
  color: #ffffff;
}

.timeline-section {
  border-left: 1px solid #f52b2d;
  padding-left: 70px;
  padding-bottom: 60px;
  max-width: 1170px;
}
.title-timeline-section {
  margin-bottom: 60px;
}
.title-timeline-section h2 {
  color: #ffffff;
  font-size: 66px;
  line-height: 70px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.timeline-block .timeline-title {
  padding: 10px 20px;
  background-color: #f52b2d;
  display: inline-block;
  position: relative;
  margin-bottom: 60px;
}
.timeline-block .timeline-title:after {
  content: "";
  width: 70px;
  height: 1px;
  border-bottom: 1px solid #f52b2d;
  position: absolute;
  left: -70px;
  top: 50%;
  display: block;
}
.timeline-block .timeline-title h3 {
  font-size: 26px;
  line-height: 26px;
  color: #ffffff;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.timeline-block-item {
  display: flex;
  margin-bottom: 20px;
}
.timeline-block-item .time {
  font-size: 18px;
  line-height: 26px;
  color: #ffffff;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  width: 70px;
  flex-shrink: 0;
}
.timeline-block-item .triangle {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.timeline-block-item .triangle img {
  display: inline-block;
}
.content-timeline p {
  color: #bdbcbc;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 40px;
}
.content-timeline img,
.content-timeline video {
  margin-bottom: 40px;
  max-width: 100%;
  height: auto;
}
.content-timeline iframe {
  max-width: 100%;
}
.presslink-block {
  border-left: 1px solid #f52b2d;
  padding-left: 70px;
  padding-bottom: 120px;
  max-width: 1170px;
}
.title-presslink-section {
  margin-bottom: 75px;
}
.title-presslink-section h2 {
  color: #ffffff;
  font-size: 66px;
  line-height: 70px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.press-links-wrapp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.press-links-item {
  padding: 40px;
  border: 1px solid #f52b2d;
  width: calc(50% - 15px);
  margin-bottom: 30px;
}
.press-links-item h4 {
  color: #ffffff;
  font-size: 18px;
  line-height: 26px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 25px;
  
}
.press-links-item p {
  color: #bdbcbc;
  font-size: 16px;
  line-height: 24px;
}
.press-links-item h4 a,
.press-links-item p a{
  transition: all .3s ease;
}

.press-links-item h4 a:hover{
  color: #f52b2d;
}
.press-links-item p a:hover{
  color: #f52b2d;
}
.bottom-content-container {
  border-left: 1px solid #f52b2d;
  padding-left: 70px;
  display: flex;
  position: relative;
  padding-top: 140px;
  padding-bottom: 140px;
}
.bottom-content-container .image {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* .bottom-content-container .image img {
	 height: 100%;
 } */
.bottom-content-container:before {
  content: "";
  background-color: #fff;
  position: absolute;
  width: 78%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 0;
}
.bottom-content-container .text-block {
  position: relative;
  z-index: 1;
  padding-left: 100px;
  width: 100%;
}
.bottom-content-container .text-container {
  max-width: 470px;
}
.bottom-content-container .text-container .title {
  color: #111111;
  font-size: 66px;
  line-height: 70px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 60px;
  text-transform: uppercase;
}
.bottom-content-container .text-container p {
  margin-bottom: 40px;
  line-height: 27px;
}
.bottom-content-container .text-container p b {
  font-weight: normal;
  padding-left: 2px;
  padding-right: 2px;
  color: #ffffff;
  background-color: #111111;
}

.last-border {
  border-left: 1px solid #f52b2d;
  padding-left: 70px;
  height: 20px;
  position: relative;
}
.last-border:after {
  content: "";
  width: 40px;
  height: 1px;
  border-bottom: 1px solid #f52b2d;
  position: absolute;
  left: 0;
  bottom: 0;
}

.gallery-section {
  padding-top: 125px;
  padding-bottom: 125px;
}
.gallery-container {
  max-width: 1170px;
  margin: 0 auto;
}
.gallery-title {
  padding-left: 70px;
  margin-bottom: 80px;
}
.gallery-title h2 {
  color: #ffffff;
  font-size: 66px;
  line-height: 70px;
  font-family: bebas-neue-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}
.gallery-wrapp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.gallery-wrapp .gallery-item {
  width: calc(33% - 15px);
  margin-bottom: 25px;
  background-size: cover;
  height: 370px;
}
.gallery-wrapp .gallery-item a {
  display: block;
  overflow: hidden;
}
.gallery-wrapp .gallery-item img {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}

footer {
  height: 95px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer p {
  color: #111111;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 3500px) and (min-width: 1920px) {
  .main-banner-container .banner-image-block {
    position: relative;
    z-index: 1;
    width: 72%;
  }
  .main-banner-container .banner-image-block img {
    width: 100%;
  }
	.press-links-item p,
  .warning .right-side p,
  .content-timeline p,
  body,
  html {
    font-size: 20px;
  }
  .top-content-container .text-container,
  .bottom-content-container .text-container {
    max-width: 590px;
  }
	.presslink-block, .warning-container, .timeline-section {
    max-width: 75%;
}
.press-links-item h4 {
    line-height: 46px;
    font-size: 34px;
}
.top-content-container {
	padding-top: 33.2vw;
}
	.main-banner-container:after {
   
    bottom: -40%;
    min-height: 25vw;
}
	.bottom-content-container .text-container .title,
	.top-content-container .text-container .title {
    font-size: 76px;
		line-height: 84px;
	}
	.bottom-content-container .text-container p,
	.press-links-item p,
  .warning .right-side p,
  .content-timeline p,
	.top-content-container .text-container p{
		font-size: 26px;
		line-height: 1.6;
	}
	.top-content-container .text-container, .bottom-content-container .text-container {
    max-width: 65%;
	}
	.warning .left-side span {
    font-size: 82px;
		line-height: 82px;
	}
	.gallery-title h2,
	.title-presslink-section h2,
	.title-timeline-section h2 {
    font-size: 84px;
		line-height: 94px;
	}
	.timeline-block .timeline-title h3 {
    font-size: 38px;
		line-height: 38px;
	}
	.timeline-block-item .time {
    font-size: 30px;
    line-height: 30px;
    	width: 100px;
	}
	.gallery-container {
    max-width: 70%;
    margin: 0 auto;
}
	.gallery-wrapp .gallery-item {
    
    height: 500px;
}
	footer p {
    font-size: 26px;
    line-height: 26px;
}
}
@media screen and (max-width: 1500px) {
  .main-container {
    margin-top: 200px;
  }
  .main-container {
    padding-left: 16.4vw;
  }
  .main-banner-container:after {
    bottom: -76%;
    min-height: 45vw;
  }
}

@media screen and (max-width: 1366px) {
  .main-container {
    padding-left: 10.4vw;
  }
  .main-container {
    margin-top: 125px;
  }
}

@media screen and (max-width: 1280px) {
  .title-container h1 {
    font-size: 125px;
  }
  .title-container .pre-title {
    font-size: 36px;
  }
  .main-container {
    padding-left: 5.4vw;
  }
  .bottom-content-container .text-block,
  .top-content-container .text-block {
    padding-left: 70px;
  }
}

@media screen and (max-width: 1024px) {
  .timeline-section {
    padding-right: 20px;
  }
  .bottom-content-container .image img,
  .top-content-container .image img {
    height: auto;
  }
  .bottom-content-container .top-content-container {
    padding-left: 50px;
    align-items: center;
  }
  .bottom-content-container .image,
  .top-content-container .image {
    flex-shrink: 0;
    width: 40%;
  }
  .bottom-content-container .text-block,
  .top-content-container .text-block {
    padding-left: 50px;
    padding-right: 20px;
  }
  .top-content-container,
  .warning-container,
  .timeline-section,
  .presslink-block {
    padding-left: 50px;
  }
  .bottom-content-container {
    padding-left: 50px;
    padding-top: 85px;
    padding-bottom: 85px;
    padding-right: 20px;
    align-items: center;
  }
  .timeline-block .timeline-title:after {
    width: 50px;
    left: -50px;
    top: 50%;
  }
  .first-fdate {
    padding-left: 85px;
  }
  .first-fdate:before {
    width: 65px;
  }
  .top-content-container {
    padding-top: 24.2vw;
    padding-bottom: 90px;
    align-items: center;
  }
  .gallery-wrapp .gallery-item {
    height: 320px;
}
}

@media screen and (max-width: 768px) {
  .title-container .pre-title {
    font-size: 24px;
  }
  .title-container h1 {
    font-size: 90px;
  }
  .main-container {
    margin-top: 80px;
  }
  .top-content-container {
    flex-direction: column-reverse;
  }
  .bottom-content-container .image,
  .top-content-container .image {
    flex-shrink: 0;
    width: auto;
  }
  .top-content-container,
  .warning-container,
  .timeline-section,
  .presslink-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .main-container {
    padding-left: 20px;
  }
  .timeline-block .timeline-title:after {
    width: 20px;
    left: -20px;
    top: 50%;
  }
  .timeline-block-item .triangle {
    width: 40px;
    margin-bottom: 5px;
  }
  .timeline-section {
    padding-bottom: 30px;
  }
  .title-presslink-section {
    margin-bottom: 40px;
  }
  .press-links-item {
    padding: 20px;
  }
  .bottom-content-container {
    padding-left: 20px;
    flex-direction: column;
  }
  .presslink-block {
    padding-bottom: 40px;
  }
  .bottom-content-container .text-container,
  .top-content-container .text-container {
    max-width: 100%;
  }
  .top-content-container {
    padding-top: 100px;
  }
  .bottom-content-container:before {
    display: none;
  }
  .bottom-content-container .text-block,
  .top-content-container .text-block {
    background-color: #ffffff;
  }
  .bottom-content-container .text-block,
  .top-content-container .text-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .bottom-content-container .text-container .title,
  .top-content-container .text-container .title {
    margin-bottom: 30px;
  }
  .gallery-title h2,
  .bottom-content-container .text-container .title,
  .title-presslink-section h2,
  .title-timeline-section h2,
  .top-content-container .text-container .title {
    font-size: 55px;
    line-height: 60px;
  }
  .bottom-content-container .text-block {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .gallery-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .timeline-block-item {
    display: flex;
    margin-bottom: 20px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .timeline-block-item .triangle img {
    display: inline-block;
    transform: rotate(-30deg);
  }
  .content-timeline {
    width: 100%;
  }
  .gallery-wrapp .gallery-item {

    height: 230px;
}
}

@media screen and (max-width: 440px) {
  .title-container .pre-title {
    font-size: 18px;
    letter-spacing: 10px;
  }
  .title-container h1 {
    font-size: 50px;
  }
  .main-container {
    margin-top: 50px;
  }
  .bordered-container {
    margin-top: 30px;
  }
  .first-fdate span {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 10px;
  }
  .first-fdate:before {
    width: 40px;
  }
  .first-fdate {
    padding-left: 60px;
  }
  .gallery-title h2,
  .bottom-content-container .text-container .title,
  .title-presslink-section h2,
  .title-timeline-section h2,
  .top-content-container .text-container .title {
    font-size: 40px;
    line-height: 46px;
  }
  .warning {
    padding: 20px;
    flex-direction: column;
  }
  .warning .right-side {
    max-width: 100%;
    margin-left: 0;
  }
  .warning-container,
  .top-content-container {
    padding-bottom: 50px;
  }
  .title-timeline-section {
    margin-bottom: 30px;
  }
  .timeline-block .timeline-title {
    margin-bottom: 40px;
  }
  .press-links-item {
    width: 100%;
  }
  .bottom-content-container {
    padding-top: 30px;
    padding-bottom: 50px;
  }
  .gallery-title {
    padding-left: 20px;
    margin-bottom: 40px;
  }
  .gallery-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gallery-wrapp .gallery-item {
    width: calc(50% - 7px);
    margin-bottom: 9px;
  }
  footer {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }
  .gallery-wrapp .gallery-item {
    height: 210px;
}
}

@media screen and (max-width: 360px) {
  .top-content-container {
    padding-top: 70px;
  }
  .main-container {
    margin-top: 20px;
  }
  .title-container .pre-title {
    font-size: 14px;
    letter-spacing: 8px;
  }
  .title-container h1 {
    font-size: 42px;
  }
  .first-fdate span {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 6px;
  }
  .gallery-title h2,
  .bottom-content-container .text-container .title,
  .title-presslink-section h2,
  .title-timeline-section h2,
  .top-content-container .text-container .title {
    font-size: 34px;
    line-height: 38px;
  }
  .press-links-item p,
  .bottom-content-container .text-container p,
  .warning .right-side p,
  .content-timeline p,
  .top-content-container .text-container p {
    margin-bottom: 20px;
    line-height: 18px;
    font-size: 14px;
  }
  .warning .left-side span {
    font-size: 44px;
    line-height: 54px;
  }
  .bottom-content-container .text-container p,
  .warning .right-side p {
    font-size: 16px;
    line-height: 22px;
  }
  .timeline-block-item .time {
    font-size: 16px;
    line-height: 24px;
  }
  .timeline-block-item .time {
    font-size: 16px;
    line-height: 24px;
    width: 63px;
  }
  .timeline-block-item .triangle {
    width: 25px;
  }
}