/* Created on 31-Jul-2023 23:09:42 */
* {box-sizing: border-box; scroll-behavior: smooth; margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none;}
@font-face {font-family: Montserrat-Black; src: url(Montserrat-Black.ttf), local(Helvetica); font-weight: bold;} 
@font-face {font-family: Montserrat-Regular; src: url(Montserrat-Regular.ttf), local(Helvetica); font-weight: normal;}
.wrap{overflow-x:hidden;}

/* Transition animation */ 
@keyframes slideInFromLeft {0% {transform: translateX(-100%);}100% {transform: translateX(0);}}
.transition {animation: 1s ease-out 0s 1 slideInFromLeft;}

/* Menu */ 
header {display: flex; justify-content: flex-end; align-items: center; padding: 1.5vw; background-color:#E3311D; font-family: Montserrat-Regular; position: fixed; top:4.1vw; width:92vw; z-index:5; left:4vw;}
#nav-logo {margin-right: auto;}
#nav-logo:hover {filter: brightness(600%);}
#nav-logo img {height:30px;}
header ul {margin:0;}
header li {list-style: none; display: inline-block;font-size:16px;}
header li:not(.last){padding: 0 20px;}
header li.last {padding:0 5px 0 20px;}
header a {text-decoration: none; color: #362E2D; transition: all 0.3s ease 0s;}
header a:hover {color:white;}
.header-m {display:none;}
.header-big {display:block;}

/* Menu Portfolio*/ 
.Portfolio-page header {background-color:#AAACA1;}

/* Sections */
#Home {background-color: #E3311D; padding:4vw;}
#Involved {line-height:1; background-color: #362E2D;}
#Friendly,#Organized {background-color: #E3311D;}
#TeamPlayer {background-color:#AAACA1; padding:10vw 4vw;}
section:not(#Involved, #Friendly, #TeamPlayer) {width: 100vw; height: 100vh;}

/* Text */ 
.big-title, #marcheva, #petya, .tab-label, .portfolio-section .port-title {font-family: Montserrat-Black;}
.under-title, .menu__item, .title, .titleName, a.back, .name {font-family: Montserrat-Regular;line-height:120%;}
.big-title {font-size: 6vw; color: #362E2D;}
a, a:hover {text-decoration: none;}
.under-title {font-size:1.2rem; color: white;}
.tab-content,.Portfolio-page .under-title,.tab-label {font-size:1rem;}


/* Home #Curious */ 
#Home .under-title {font-size:1.2rem;-webkit-animation: slide-up 1s forwards; -moz-animation: slide-up 1s forwards; animation: slide-up 1s forwards; -webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}
.home-name {font-family: Montserrat-Black; font-size: 11vw;line-height:1;text-align:right;color:white;word-wrap: break-word;}
.h-column {width:50vw;}
.slide-up {animation: slide-up 0.1s cubic-bezier(0.65, 0, 0.35, 1) both;}
@keyframes slide-up {0%{transform: translateY(-10vw);opacity:0;}100%{transform: translateY(0vw);opacity:1;}}
.slide-down {animation: slide-down 0.1s cubic-bezier(0.65, 0, 0.35, 1) both;}
@keyframes slide-down {0%{transform: translateY(10vw);opacity:0;}100%{transform: translateY(0vw);opacity:1;}}
.home-columns {display:flex;flex-flow: row; align-items: center;height:92vh;gap: 4vw;}
#Home .big-title {-webkit-animation: slide-down 1s forwards; -moz-animation: slide-down 1s forwards; animation: slide-down 1s forwards; -webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}


/* #Involved */ 
#Involved .big-title {color:#E3311D;}
.projects-links{font-family: Montserrat-Black; background-color: white; border:none; color: #362E2D; text-align: center;padding:1.5rem; width:20rem; height:5rem; font-size:2rem;}
.projects-links a {color:#362E2D;}
.projects-links:hover {background-color: #E3311D;}
.horizontal {height: 100vh; width: 200vw; background-color: #362E2D; padding:4vw;pointer-events: auto;}
.container-projects {display: flex;  height:100%; justify-content: space-between; align-items: center; gap:4vw;}


/* Fixed 2 cols #Friendly */ 
.footer {height:18vh;}
#Friendly {width:100vw;}
.container {align-items: flex-start; display: flex; padding:0; gap:4vw; width:92vw;}
.col1 {position: sticky; top: 0; width:50%;}
.col2 {width:50%; margin:0; padding:0;}
#Friendly .big-title {padding-top:15vw;}
#Friendly .col2 .under-title {padding-top:25vh;}
.f-in,.f-be,.f-e {width: 25vw; clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0); background-color:white; padding:5vw; transition-duration: 0.4s;}
.f-in {content: url(images/in-5q.svg);}
.f-be {content: url(images/be-5q.svg);}
.f-e {content: url(images/email-5q.svg);}   
.f-in:hover,.f-be:hover,.f-e:hover {transform: scale(0.9);}


/* #Team Player */ 
#TeamPlayer p.big-title {position:relative; text-align: center; color: #E3311D;}
#TeamPlayer .under-title {padding:0 10vw; text-align: center;}
#TeamPlayer .column {float: left; width: 25%; overflow: hidden; padding-bottom:5vh;}
#TeamPlayer .row {padding-top:4vw;margin:0;}
#TeamPlayer .row:after {content: ""; display: table; clear: both;}
.Network {width:100%; height: auto; transition-duration: 0.4s;}
.Network:hover {transform: scale(1.1) translateY(-4.5%); }
.Network-icons {list-style-type: none; text-align: center; margin: 0; padding: 0;}
.Network-icons li {display: inline-block; width: 3vw; padding:0 1%; transition-duration: 0.4s;}
.Network-icons li:hover {transform: scale(1.2);}
.containerS {text-align:center; padding:5% 0 0 0;}
.title,.titleName {line-height:1.4; margin:0;}
.titleName {font-size:0.9rem; color: #E3311D;}
.title {font-size: 1.2rem; color: white; padding-bottom:3%;}


/* #Organized */ 
#Organized .column {float: left; width: 50vw;padding:4vw;}
#Organized .row {padding:0; position: relative;height:50vh;overflow:hidden;display:flex;align-items: center;}
#Organized .big-title {position:relative; color: white;line-height:1;}
#Organized .grid {display: grid; grid-template-columns: repeat(8, auto); align-items: start;gap:5%;}
#Organized .grid-item {padding:15% 0; transition-duration: 0.4s;}
#Organized .grid-item:hover {transform: scale(1.2);}
#Organized span {color:white;}
#Organized span:hover,#Organized span:visited{color:white;}
.Organized-pic {height:100%; object-fit: cover; width:100%;}


/* Portfolio */ 
.Portfolio-page {background-color: #AAACA1;padding:0 4%;}
.Portfolio-page .under-title, .Portfolio-page .big-title {color:#362E2D;}
.Portfolio-page .under-title a {color:#E3311D; text-decoration:none; transition-duration: 0.3s;}
.Portfolio-page .under-title a:hover {color:#362E2D;}
.Portfolio-page .big-title {font-size: 3rem; position: relative;padding-bottom:1rem; line-height:1;}
.portfolio-section {text-align:center;padding: 17% 0 10% 0;}
.back {transform: rotate(-180deg);width:4rem;-webkit-transition: all .35s; transition: all .35s;}
.next {transform: rotate(90deg);width:4rem;-webkit-transition: all .35s; transition: all .35s;}
.back:hover {transform: rotate(-90deg);}
.next:hover {transform: rotate(0deg);}
.portfolio-section .port-title{font-size: 5.5rem; display:inline; color:#E3311D; margin:0 3vw;}
.portfolio-img img{width:100%; height:100%; max-height:800px; max-width:1728px;}
.port {position:relative;}
.right-text {position: absolute; top: 35%; right: 5%; width:33%;}
.mob {display:none;}
.desk {display:block;}
.padd {margin-bottom:25%;}

/* Portfolio Website*/ 
.website-text .big-title,.website-text .under-title {color:white;}
.website-text {display:flex; width:100%;padding-bottom:15vh; align-items: center;}
.video {width:100%; height:auto;}
.sixty {width:60vw;}
.forty {width:40vw; padding:0 5vw;}

/* Portfolio pages */
.full {width:100%; display:block;}
.active {color:#362E2D; pointer-events: none; cursor: default;}


/* Button See More Portfolio */ 
.tabs {overflow: hidden; border: none;}
.tab {width: 100%; color: white; overflow: hidden; margin:1vh 0 16vh 0;}
.tab-label {display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 0 2rem; align-items: center; background: #E3311D; background-color: #E3311D; cursor: pointer; margin:0; width: 20vw;height:3rem;}
.tab-label:hover,.tab-label:focus,.tab-label:active {background: white;background-color: white; color:transparent;}
.tab-label::after {content: url(images/arrow_white.svg); width:1.5vw; height:1.5vw;  text-align: center; -webkit-transition: all .35s; transition: all .35s; transform: translateX(0);display: flex; align-items: center;}
.tab-label:hover::after,.tab-label:active::active,.tab-label:focus::after {transform: translateX(-7.5vw) rotate(90deg);content: url(images/arrow.svg);}
.tab-content {max-height: 0; color: #E3311D; -webkit-transition: all 0.5s; transition: all 0.5s; padding-top:1vh;}
input:checked + .tab-label::after {transform-origin: center center; transform: translateX(-7.5vw) rotate(90deg);}
input:checked + .tab-label{color:transparent;}
input:checked ~ .tab-content {max-height: 400vh;}
input {position: absolute; opacity: 0; z-index: -1;}
.Portfolio-page .tab-content img {width:100%;}


@media only screen and (max-width: 600px) {
    .home-columns {flex-flow:column;}
    .h-column {width:100%;height:50vh;position:relative;}
    .home-name {text-align:left;margin:0;bottom:0;position:absolute;}
    header {align-items: center; justify-content: center;padding:4vw;}
    .header-m {display:block;}
    .header-big {display:none;}
    header li:not(.last){padding:0 10px;}
    header li.last {padding:0 0 0 10px;}
    .rwd-break {display: none;}
    .title {font-size: 1rem;}
    .v-column > div {width:45vw;}
    #Involved {padding:4vw 5vw;}
    .inv-columns .v-column:first-child {padding:40vw 0 10vw 0;}
    #TeamPlayer .column {width: 50%;}
    .Network-icons li {width: 9vw;}
    #Friendly .big-title {padding-top:35vw;}
    #Organized .column {width: 100vw;}
    .Organized-pic {height:50vh;}
    #Organized .row {justify-content: center;flex-direction:column;}
    .portfolio-section {padding-top:100px;}
    .portfolio-section .port-title {font-size:10vw;}
    .back, .next {width:7vw;}
    .tab {margin:1% 0 25% 0;}
    .right-text {width:100%;position:static;padding:3% 0;}
    .right-text .under-title,.forty .under-title {font-size:16px;}
    .right-text .big-title,.forty .big-title {font-size:24px;}
    .mob {display:block;}
    .desk {display:none;}
    .sixty {width:100%;}
    .forty {width:100%;padding:3% 0 0 0;}
    .website-text {display:block;}
    .tab-label {width:100%;}
    input:checked + .tab-label::after,.tab-label:hover::after  {transform: translateX(0) rotate(90deg);}
    .tab-label::after {width:1rem;}
    input:checked + .tab-label{color:white;}
    .container-projects {gap:1vw;}
    .projects-links {width:10rem;font-size:16px;height:3rem;padding:1rem;}
    .horizontal {width:350vw;}

}

@media only screen and (min-width: 601px) and (max-width: 1000px) {
    .tab-label {width:40%;}
    input:checked + .tab-label::after,.tab-label:hover::after  {transform: translateX(0) rotate(90deg);}
    .tab-label::after {width:1rem;}
    input:checked + .tab-label{color:white;}
    .portfolio-section {padding-top:100px;}
    .portfolio-section .port-title {font-size:10vw;}
    .back, .next {width:7vw;}
    .tab {margin:1% 0 25% 0;}
    .right-text {width:100%;position:static;padding:3% 0;}
    .right-text .under-title,.forty .under-title {font-size:16px;}
    .right-text .big-title,.forty .big-title {font-size:24px;}
    .mob {display:block;}
    .desk {display:none;}
    .sixty {width:100%;}
    .forty {width:100%;padding:3% 0 0 0;}
    .website-text {display:block;}
    header li:not(.last){padding: 0 10px;}
    header li.last {padding:0 5px 0 10px;}
    .Network-icons li {width: 5vw;}
    #TeamPlayer .column {width: 33%;}
    #Organized .column {width: 100vw;}
    .Organized-pic {height:50vh;}
    #Organized .row {justify-content: center;flex-direction:column;}
    .horizontal {width:250vw;}
}