@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&family=Play:wght@400;700&display=swap');


/* Cross-browser code generated by : https://demo.dsheiko.com/ccss/ */
/* CSS clippath genrated using - https://bennettfeely.com/clippy/ */

:root {
  --darkgray:#3f4b61;
  --lightgrey:#8f8f8f;
  --lightgrey_2:#a7a7a7;
  --lightwhite: #eeeeea;
  --lightwhite_2: #e4e4e4;
  --lightyellow:#f4e3c9;
  --grey_1: #f5f5f5;
  --grey_2: #e8e8e8;
  --grey_3:#d5d5d5;
  --p_orange:#fcede0;
  --p_purple:#e9eff4;
  --p_green:#e8f4ea;
  --p_blue:#ebf0fa;
  --p_brown:#d6cdc8;
  --d_brown:#e8cebf;
  --brightred: #F9423D;
  --white: #fff;
  --red: crimson;
  --lightblue: #337af1;
  --blue: rgb(61,90,128);
  --orange: #EE6C4D;
  --yellow: #f5b215;
}

.l_blue {
  color: var(--lightblue);
}
.yellow {
  color: var(--yellow);
}
.blue{
  color: var(--blue);
}
.orange{
  color: var(--orange);
}
.red{
  color: var(--red);
}
.l_grey{
  color: var(--lightgrey);
}
.white{
  color: var(--white);
}
.l_white{
  color: var(--lightwhite);
}
.l_white_2{
  color: var(--lightwhite_2);
}
.l_yellow{
  color: var(--lightyellow);
}
.l_grey_2{
  color: var(--lightgrey_2);
}
.d_gray{
  color: var(--darkgray);
}
.grey_1{
  background-color: var(--grey_1);
}
.grey_2{
  background-color: var(--grey_2);
}
.grey_3{
  background-color: var(--grey_3);
}
.lightgrey{
  background-color: var(--lightgrey);
}
.darkgray{
  background-color: var(--darkgray);
}
.p_orange{
  background-color: var(--p_orange);
}
.p_purple{
  background-color: var(--p_purple);
}
.p_green{
  background-color: var(--p_green);
}
.p_blue{
  background-color: var(--p_blue);
}
.p_brown{
  background-color: var(--p_brown);
}
.d_brown{
  background-color: var(--d_brown);
}

.projects-nav {
  background: rgb(0,0,0);
  background: -moz-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#3d5a80",GradientType=1); 
  width: 100vw;
  height: auto;
}


/* Special */
#select-navigator {
  width: 100%;
  color: var(--white);
  background: rgb(0,0,0);
  background: -moz-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(41,50,65,1) 55%, rgba(61,90,128,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#3d5a80",GradientType=1); 
  font-family: 'Play', sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
}
/* Special */

.all-projects {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
  background-color: transparent;
  height: auto;
  -webkit-transform: translatey(80px);
   -moz-transform: translatey(80px);
    -ms-transform: translatey(80px);
     -o-transform: translatey(80px);
        transform: translatey(80px);
}

.hexagon-selector {
  flex: 0 1 250px;
  max-width: 250px;
  height: 275px;
  margin: 2px 2px;
  position: relative;
  text-align: center;
  z-index: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.8);
   -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.8);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.8);

filter:progid:DXImageTransform.Microsoft.dropshadow(
    OffX=0px, OffY=0px, Color='black', Positive='false'
); /* IE 5.5 */ 
border-collapse: separate; /* Required by IE 9 */
}

.hexagon-selector_link {
text-decoration: none;
}

.hexagon-selector_img {
  -o-object-fit: cover;
  object-fit: cover;
  
  -o-object-position: center;
  object-position: center;
}

.hexagon-selector_title {
  font-family: 'Play', sans-serif;
  font-weight: 500;
  font-size: 19px;
  height: 100%;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 2px 2px 2px var(--darkgray);
  -webkit-transition: opacity 350ms;
   -moz-transition: opacity 350ms;
    -ms-transition: opacity 350ms;
     -o-transition: opacity 350ms;
        transition: opacity 350ms;
}

.hexagon-selector_title_selected {
  font-family: 'Play', sans-serif;
  font-weight: 500;
  font-size: 21px;
  height: 100%;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: 2px 2px 2px var(--darkgray);
  -webkit-transition: opacity 350ms;
   -moz-transition: opacity 350ms;
    -ms-transition: opacity 350ms;
     -o-transition: opacity 350ms;
        transition: opacity 350ms;
}

.hexagon-selector::before, .hexagon-selector::after, .hexagon-selector_img {
  top: -50%;
  width: 100%;
  height: 200%;
  display: block;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.hexagon-selector:hover {
  -khtml-opacity: 1;
  -moz-opacity: 1;
       opacity: 1;
       filter: alpha(opacity=100);
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;

  -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
        transform: scale(1.2);
  z-index: 99;
  overflow: hidden;
}

.hexagon-selector:before {
  content: '';
  position: absolute;
  -khtml-opacity: 0.4;
  -moz-opacity: 0.4;
       opacity: 0.4;
       filter: alpha(opacity=40);
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

  width: 350px;
  height: 70px;
  background: var(--white);
  top: 50;
  left: 0;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
       transform: rotate(45deg);
  -webkit-transition: -webkit-transform 1.5s;
   -moz-transition: -moz-transform 1.5s;
    -ms-transition: -ms-transform 1.5s;
     -o-transition: -o-transform 1.5s;
        transition: transform 1.5s;
}

.hexagon-selector:hover:before {
  -webkit-transform: translate(-100px, 600%) rotate(45deg);
  -moz-transform: translate(-100px, 600%) rotate(45deg);
   -ms-transform: translate(-100px, 600%) rotate(45deg);
    -o-transform: translate(-100px, 600%) rotate(45deg);
       transform: translate(-100px, 600%) rotate(45deg);

  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
   -ms-transition: -ms-transform 0.5s;
    -o-transition: -o-transform 0.5s;
       transition: transform 0.5s;
}


@media screen and (min-width: 825px) and (max-width: 1100px) {
  .hexagon-selector:nth-child(4) {
    top: -70px;
    margin-left: calc(50% - 275px);
    position: relative;
  }
  .hexagon-selector:nth-child(5) {
    margin-right: calc(50% - 275px);
    position: relative;
    top: -70px;
  }

  .hexagon-selector:nth-child(6) {
    margin-left: calc(50% - 530px);
    top: -140px;
  }

  .hexagon-selector:nth-child(7) {
    margin-right: calc(50% - 275px);
    top: -140px;
  }
  .projects-nav {
    min-height: 16vh;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1100px) {
  .hexagon-selector:nth-child(n + 5) {
    position: relative;
    top: -70px;
  }
  .projects-nav {
    min-height: 16vh;
    padding-bottom: 2.7rem;
  }
}

@media screen and (min-width: 773px) and (max-width: 825px) {
  .projects-nav {
    min-height: 16vh;
    padding-bottom: 7rem;
  }
}

@media screen and (max-width:700px) {
  #select-navigator {
    font-size: 16px;
  }
}

@media screen and (min-width: 561px) and (max-width: 772px) {
  .hexagon-selector:nth-child(3n) {
    margin-right: calc(50% - 125px);
    margin-left: calc(50% - 125px);
  }
  .hexagon-selector:nth-child(3) {
    top: -70px;
  }
  .hexagon-selector:nth-child(4) {
    top: -140px;
  }
  .hexagon-selector:nth-child(5) {
    top: -140px;
  }
  .hexagon-selector:nth-child(6) {
    top: -210px;
  }
  .hexagon-selector:nth-child(7) {
    margin-left: 50px;
    margin-right: 50px;
    top: -210px;
  }
 
  .projects-nav {
    min-height: 20vh;
    padding-bottom: 5px;
  }
}

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

  .hexagon-selector:nth-child(1) {
    margin-top: 10px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
  }
  .hexagon-selector:nth-child(2) {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
    
  }
  .hexagon-selector:nth-child(3) {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
    
  }
  .hexagon-selector:nth-child(4) {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
  }
  .hexagon-selector:nth-child(5) {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
    
  }
  .hexagon-selector:nth-child(6) {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    margin-right: 50px;
    
  }
  .hexagon-selector:nth-child(7) {
    margin-top: 3px;
    margin-bottom: 0;
    margin-left: 50px;
    margin-right: 50px;
  }
  .projects-nav {
    min-height: 20vh;
    padding-bottom: 6.4rem;
  }
}