@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
:root {
    /** Fonts **/
    --main-font: "Roboto Condensed", sans-serif;

    /** Colores **/
    --primary: #f3f7f6;
    --white: #FFFFFF;
    --black: #000;
}

html {box-sizing: border-box;font-size: 62.5%; /* 10 PX = 1rem */}
*, *:before, *:after {box-sizing: inherit;}
body {font-family: var(--main-font);font-size: 18px;font-size: 1.8rem;line-height: 2;background-color: var(--primary);min-width: 400px;}
/** Headings **/
h1, h2, h3, h4 {margin: 0 0 5rem 0;line-height: 1.2;}
h1 {font-size: 6rem;}
h2 {font-size: 4.8rem;}
h3 {font-size: 3.6rem;}
h4 {font-size: 2.4rem;}

/** Globals **/
p {margin: 1rem 0 2rem;font-size: 1.6rem;line-height: 2rem;}
a {text-decoration: none;color:var(--black);}
ul {list-style: none;margin: 0;padding: 0;}
img {display: block;max-width: 100%;height: auto;}
strong,b{font-weight: 700;}
                            
.container{width: min(95%, 150rem);margin: 0 auto;position: relative;display: flex;}
.main{width:120rem;}
.page{padding-top:0;position:relative;margin:0 auto;width:100%;}
.main.page > p {margin: 2px 0 20px 0;font-size: 1.2rem;}
.logo{align-content: center;background-color: transparent;margin-top:70px;}
.page .logo{display:none;}
.page .subcontent-grid > div:first-child{background:transparent;padding-left:0;padding-right:0;}
.main.page {margin-bottom: 25px;}
@media only screen and (min-width: 900px) {
    .page{width: 50%;}
}
@media only screen and (min-width: 1200px) {
    .logo{margin-top:0;}
    .page{width: 64%;}
}
@media only screen and (max-width: 900px) {
    .page{padding-top:70px;}
}

.nav{width: 100%;height:100%;position: absolute;right:0;top:0;z-index: 99999;overflow: hidden;background-color: var(--primary);}
@media only screen and (min-width: 900px) {
    .nav{width: 55%;right:-55%;}
}
@media only screen and (min-width: 1200px) {
    .nav{width: 32%;right:-32%;}
    .page .nav{position: absolute;width: 32%;right: -32%;top: 0;}
}
/*HAMBUGER MENU*/
.hamburger {display: flex;flex-direction: row;cursor: pointer;width: 50px;height: 50px;position: absolute;top:20px;right:0;align-items:center;z-index:9999999;}
.hamburger .bar{width: 100%;height: 3px;background-color: #000;position:relative;cursor:pointer;border-radius: 3px;}
.hamburger .bar:before,
.hamburger .bar:after{position:absolute;content:'';width:100%;height:3px;background-color:#000;border-radius: 3px;}
.hamburger .bar:before{top:-10px;}
.hamburger .bar:after{top:10px;}
.hamburger.open .bar:before,
.hamburger.open .bar:after{top:0px;}
.hamburger.open .bar{transform: rotate(-45deg);transition:0.3s;}
.hamburger.open .bar:after{transform: rotate(90deg);transition:0.3s;}
@media only screen and (min-width: 900px) {
    .hamburger{right:-50%;}
    
}
@media only screen and (min-width: 1200px) {
    .hamburger{right:-28%;}
    .page .hamburger{right:-28%;}
}
nav{width:100%;height:100%;position:relative;top:0;right:0;background-color: var(--primary);padding:8rem 3rem;display:none;z-index:1;}
.menu li a {font-size:2rem;text-transform:uppercase;font-weight:500;font-family:"Roboto";}
.menu li a:hover,
.menu li.active a{text-decoration:underline;}
@keyframes show-menu {
  from {right: -100%}
  to {right: 0}
}
nav.active {display: block;animation: show-menu 0.5s ease forwards;}
.footer {
  padding: 0rem 3rem 8rem;
  position: absolute;
  z-index: 9;
  top: 200px;
}
.footer p {
  margin: 2rem 0;
}

/* MAIN HOME*/
.home{display: grid;footer: repeat(1, 100%);gap: 1rem;position: relative;margin: 0 auto;}
@media only screen and (min-width: 900px) {
    .home{grid-template-columns: repeat(2, 49%);gap: 0.5% 2%;width: 50%;}
}
@media only screen and (min-width: 1200px) {
    .home{grid-template-columns: repeat(3, 32%);gap: 1% 2%;width: 64%;}
}

/*SUBCONTENT GRID*/
.subcontent-grid{display:grid;grid-template-columns: repeat(1,1fr);gap:2rem;}
.subcontent-grid .content{background-color:#FFFFFF;padding:1rem 3rem;}

@media only screen and (min-width: 900px) {
    .subcontent-grid{grid-template-columns: repeat(2,1fr);}
}

@media only screen and (min-width: 1200px) {
    .subcontent-grid{grid-template-columns: repeat(3,1fr);}
}

@media only screen and (min-width: 1200px) {
    .subcontent-grid .content.start_one_colum{grid-column-start:1}
    .subcontent-grid .content.end_one_column{grid-column-end:2}
    .subcontent-grid .content.start_two_colum{grid-column-start:2}
    .subcontent-grid .content.end_two_column{grid-column-end:3}
    .subcontent-grid .content.start_three_colum{grid-column-start:3}
    .subcontent-grid .content.end_three_column{grid-column-end:4}
}



/* GALLERY */
.lightbox { display: none; position: absolute; z-index: 999; top: 0; width: 100%; background-color: rgba(255,255,255,0.6); justify-content: center; opacity: 0; }
.lightbox-open { display: flex !important; animation: fadeIn 0.5s forwards; }
.lightbox.fade-out { animation: fadeOut 0.5s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
.lightbox-content { position: relative;text-align: center; }
.lightbox-wrapper { position: relative; width: 60.8%;max-width: 959.5px;}
#lightbox-image { width: 100%; height: auto !important; }
.lightbox-button { display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; z-index: 2; user-select: none; }
.lightbox-button.close { top: 15px; left: 15px; width: 50px; height: 50px; flex-direction: row; }
.lightbox-button.close .bar { width: 100%; height: 3px; background-color: #000; position: relative; cursor: pointer; border-radius: 3px; transition: transform 0.3s; }
.lightbox-button.close .bar:before, .lightbox-button.close .bar:after { content: ''; position: absolute; width: 100%; height: 3px; background-color: #000; border-radius: 3px; transition: transform 0.3s, top 0.3s; }
.lightbox-button.close .bar:before { top: -10px; }
.lightbox-button.close .bar:after { top: 10px; }
.lightbox-button.close.open .bar:before, .lightbox-button.close.open .bar:after { top: 0; }
.lightbox-button.close.open .bar { transform: rotate(-45deg); }
.lightbox-button.close.open .bar:after { transform: rotate(90deg); }
.lightbox-button.prev { left: 25px; top: 50vH; transform: translateY(-50vH); width: 20px; height: 20px; background-color: transparent; border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid black; border-right: 2px solid black; transform: rotate(135deg); box-sizing: border-box; }
.lightbox-button.next { right: 25px; top: 50vH; transform: translateY(-50vH); width: 20px; height: 20px; background-color: transparent; border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid black; border-right: 2px solid black; transform: rotate(-45deg); box-sizing: border-box; }

@media only screen and (max-width: 1200px) {
    .lightbox-wrapper{width: 47.5%;}
    .home{margin-left: 0;width: 65%;}
    .nav{width: 40%;right: -40%;}
    .page {width: 65%;margin-left: 0;}
    .hamburger {right: -40%;}
    .lightbox{justify-content: left;left: 29px;}
    .lightbox-wrapper {width: 61.9%;}
}
@media only screen and (max-width: 900px) {
    .hamburger{right:0;top: 5px;}
    .lightbox-wrapper {width: 100%;top:8vH;}
    .hamburger + .nav{right:-100%;display:none;}
    .hamburger.open + .nav{right:0;display:block;top: 0;}
    .page .logo {display: block;margin-top: 0;}
    .page .subcontent-grid > div:first-child {display:none;}
    .nav{width: 100%;right: 0;}
    .page {width: 100%;}
    .home {width: 100%;}
    .lightbox {left: 0;}
}