/* ==========================================================================
    VARIABLES
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500&display=swap");
/* Fonts*/
/* ==========================================================================
    GENERAL
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  color: #262624;
  font-size: 10px;
  font-family: "Cormorant Garamond", Serif;
  margin: 0 auto;
  scroll-behavior: smooth;
}

/* ----- TYPOGRAPHY  ----- */
a {
  text-decoration: none;
  color: #262624;
}

a:hover {
  color: #FF6C86;
  text-decoration: none;
}

p {
  font-family: "Fira Sans", Sans-Serif;
  color: #262624;
  font-size: 2rem;
  font-weight: 300;
  margin: 2rem 0 0 0;
  line-height: 160%;
}

b {
  font-family: "Fira Sans", Sans-Serif;
  color: #262624;
  font-size: 2rem;
  font-weight: 400;
}

h1 {
  font-family: "Cormorant Garamond", Serif;
  color: #262624;
  font-size: 2.3rem;
  font-weight: 400;
  margin: 3rem 0 3rem 0;
  text-align: center;
}

h2 {
  font-family: "Cormorant Garamond", Serif;
  color: #262624;
  font-size: 5rem;
  font-weight: 700;
  font-style: italic;
  line-height: 102.1%;
}

h3 {
  font-family: "Cormorant Garamond", Serif;
  color: #262624;
  font-size: 3rem;
  font-weight: 400;
  margin: 3rem 0 1rem 0;
}

h4 {
  font-family: "Fira Sans", Sans-Serif;
  font-size: 2rem;
  font-weight: 300;
  margin: 2rem 0 0 0;
  line-height: 160%;
  margin: 0 0 3rem 0;
}

i {
  transition: all .2s ease-in-out;
}

i:hover {
  color: #FF6C86;
  transform: scale(1.1);
}

.fab {
  transition: all .2s ease-in-out;
}

.fab:hover {
  color: #FF6C86;
  transform: scale(1.1);
}

li {
  list-style: none;
}

.year {
  font-family: "Cormorant Garamond", Serif;
  color: #262624;
  font-size: 5rem;
  font-weight: 700;
  font-style: italic;
  padding: 2rem 0 0 3rem;
}

/* ==========================================================================
    STRUCTURE
   ========================================================================== */
/* ----- LAYOUT  ----- */
header {
  display: flex;
  flex-flow: row-reverse wrap;
  padding: 1rem 2rem 1rem 2rem;
}

header .menu ul {
  display: flex;
  flex-flow: row wrap;
}

header .menu ul li {
  padding: 0 0 0 2rem;
  font-size: 2rem;
  color: #75756e;
}

.intro {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 13% 0 13% 0;
}

.intro .hello {
  padding: 0 0 15% 0;
  width: 25%;
}

.photo {
  position: absolute;
  top: 17%;
  left: 10%;
  width: 12%;
}

.photo .profile_pic {
  transform: rotate(-15deg);
  width: 100%;
  background-color: white;
  box-shadow: 3px 3px 13px rgba(33, 32, 33, 0.13);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 3%;
}

.photo .profile_pic img {
  object-fit: contain;
  width: 100%;
}

.project {
  width: 100%;
  padding: 9% 17% 1% 17%;
  height: 120vh;
}

.project .project_content {
  padding: 7% 0 0 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.project .project_content .gallery {
  width: calc(50% - 6rem);
  height: 450px;
  background-color: white;
  box-shadow: 3px 3px 13px rgba(33, 32, 33, 0.13);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 1%;
  object-fit: contain;
}

.project .project_content .gallery .carousel-inner {
  width: 100%;
  height: 450px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.project .project_content .description {
  width: calc(50% - 6rem);
}

.project .project_content .description .qr {
  width: 25%;
  margin: 2rem 0 0 0;
}

.project .project_content .description .qr img {
  object-fit: contain;
  width: 100%;
}

.project .project_content .description .ugo_link {
  display: none;
}

.project .project_content .description .footer {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
}

.project .project_content .description .footer i {
  padding: 2rem 0 0 1rem;
  font-size: 3rem;
}

.project .project_content .description .footer i.no_sep {
  padding: 0;
}

.project .arrow_smooth {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: 12% 0 5% 0;
}

.contact {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
}

.year {
  position: absolute;
  background-color: none;
}

/* ==========================================================================
    COLORS
   ========================================================================== */
::selection {
  background: #FCCF68;
}

::-moz-selection {
  background: #FCCF68;
}

mark {
  background-color: #FCCF68;
}

.ugo {
  background-color: #EDF5F7;
}

.ugo h4 {
  color: #468d9f;
}

.ugo .arrow_smooth i {
  color: #468d9f;
}

.man {
  background-color: #F7EDEF;
}

.man h4 {
  color: #9f4658;
}

.man .arrow_smooth i {
  color: #9f4658;
}

.ging {
  background-color: #FAECD3;
}

.ging h4 {
  color: #b97e15;
}

.ging .arrow_smooth i {
  color: #b97e15;
}

.wave {
  background-color: #F5E8FF;
}

.wave h4 {
  color: #855c91;
}

.wave .arrow_smooth i {
  color: #855c91;
}

/* ==========================================================================
    ANIMATIONS
   ========================================================================== */
.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* ==========================================================================
    BOOTSTARP
   ========================================================================== 

.carousel-control-next {
    color: black;
    //background-color: yellow;
    font-weight: 700;
    right: -7rem;
    opacity: 1;

    &:hover {
        color: $hover;
    }

    &::after {
        opacity: 1;
        color: black;
    }

    &:visited {
        opacity: 1;
        color: black;
    }

    &:active {
        opacity: 1;
        color: black;
    }
}


.carousel-control-prev {
    color: black;
    //background-color: yellow;
    font-weight: 700;
    left: -7rem;
    opacity: 1;

    &:hover {
        color: $hover;
    }

    &::after {
        opacity: 1;
        color: black;
    }

    &:visited {
        opacity: 1;
        color: black;
    }

    &:active {
        opacity: 1;
        color: black;
    }
}
*/
/* ==========================================================================
    RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  body,
  html {
    color: #262624;
    font-size: 9px;
  }
  .intro {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 38% 0 15% 0;
  }
  .intro .hello {
    padding: 0 0 15% 0;
    margin: 20% 0 15% 0;
    width: 50%;
  }
  .photo {
    position: absolute;
    top: 15%;
    left: 30%;
    width: 35%;
  }
  .photo .profile_pic {
    transform: rotate(5deg);
    width: 100%;
    background-color: white;
    box-shadow: 3px 3px 13px rgba(33, 32, 33, 0.13);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 6%;
  }
  .photo .profile_pic img {
    object-fit: contain;
    width: 100%;
  }
  .project {
    width: 100%;
    padding: 11% 17% 11% 17%;
    height: auto;
  }
  .project .project_content {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
  }
  .project .project_content .gallery {
    width: 100%;
    margin: 15% 0 15% 0;
    height: 250px;
  }
  .project .project_content .description {
    width: 100%;
  }
  .project .project_content .description .qr_all {
    display: none;
  }
  .project .project_content .description .ugo_link {
    display: block;
  }
  .project .arrow_smooth {
    display: none;
  }
  .contact {
    padding: 30% 5% 40% 5%;
    text-align: center;
  }
}