/* LANATSI'S BLOG - REWRITTEN ON 20/4/2022 - 30/4/2020 BY DIMITRIS MARAKOMIHELAKIS */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap');

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}


/* GENERAL */

* {
    box-sizing: border-box;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* height: 100vh; */
    overflow-x: hidden;
  }
  
  a {
    text-decoration: none !important;
  }
  
  h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
  }
  
  .row {
    max-width: 900px;
    margin: 50px auto 0;
  }
  

    /* Scrollbar */

    ::-webkit-scrollbar {
      width: 6px;
      background-color: #F5F5F5;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #333; 
    }
     
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background-color: #ddd; 
    }
    




/* NAVBAR */

    #nav .navbar-brand::after {
     content: "  Lanatsi's Blog";
 }  
  #nav.scrolled{
    background-color: #333 !important;
    transition: background-color 200ms linear;
  }

  #nav.scrolled .nav-link, #nav.scrolled .navbar-brand {
    color: #fff !important;
  }


  #nav.scrolled .navbar-toggler {
      color: #fff;
      border: 1px solid #fff;
  }

  #nav.scrolled .navbar-toggler .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");      
  }

  /* remove effects from toggler */

  button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  /*effect-underline*/

  .navbar-light .navbar-nav .nav-link {position: relative;}
  .navbar-light .navbar-nav .nav-link:after {
	background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #ddd;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.navbar-light .nav-item.active .nav-link
 {
    font-weight: 600;
}

.navbar-light .navbar-nav .nav-link:hover:after {
    width: 100%;
    left: 0;
}

@media screen and (max-width: 991px) {
    .navbar-light .navbar-nav .nav-link:after {
        background-color: transparent;
    }
}


section {
    margin: 5em;
}

/* CAROUSEL */

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

.carousel-caption h1 {
  margin-bottom: 35vh;
  font-size: 5em;
}

@media screen and (max-width: 546px) {
    .carousel-caption h1 {
        font-size: 3em;
        margin-bottom: 38vh;
    }
    
}



/* NEWEST ARTICLES CONTAINER */

.newest {
    background: #1abc9c;
    background: -webkit-linear-gradient(to right, #1abc9c 20%, #4caf50);
    background: linear-gradient(to right, #1abc9c 20%, #4caf50);
    width: 100%;
    
    padding: 10em;
    display: flex;
}

.cardsContainer {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
    flex-direction: row;
}


@media screen and (max-width: 1125px) {
    .newest {
        flex-direction: column;
    }
}

.newest h1 {
    color: #333;
    /* padding: 2em 2.5em; */
    font-size: 3.4rem;
}

@media screen and (max-width: 600px) {
    .newest h1 {padding: 2em 0; text-align: center;font-size:2em;}
}


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

    .newest {
        flex-direction: column;
    }

}


/* 'new' ribbon */


.ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 145px;
  padding: 5px 0;
  background-color: #1eb5ff;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

/* top right*/
.ribbon-top-right {
  top: -3px;
  right: -3px;
  z-index: 9;
}

@media screen and (max-width: 950px) {
  .ribbon-top-right {
    right: 0px;
  }
  
}

.ribbon-top-right span {
  
  left: -14px;
  top: 18px;
  text-align: center;
  transform: rotate(45deg);
}






/* SEARCHBAR */

.search {
  position: sticky;
  display: block;
  margin: 0 50%;
  width: 100%;
  max-width: 400px;
  height: 50px;
  transform: translateX(-50%) translateY(-50%);
}
.search__toggle:checked ~ .search__field {
  width: calc(100% - 80px);
  border-width: 2px;
}
.search__toggle:checked ~ .search__field .search__input::placeholder {
  opacity: 1;
}
.search__toggle:checked ~ .search__field .search__close {
  left: -25px;
}
.search__toggle:checked ~ .search__field .search__button {
  right: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50px;
}
.search__toggle:checked ~ .search__field .search__button--toggle {
  display: none;
}
.search__toggle:checked ~ .search__field .search__button--submit {
  display: flex;
}
.search__close {
  position: relative;
  top: 50%;
  left: 0;
  transform: translateX(-50%);
  transition: 0.3s;
}
.search__close::before, .search__close::after {
  position: absolute;
  display: block;
  content: "";
  width: 15px;
  height: 3px;
  background-color: #333;
}
.search__close::before {
  transform: rotate(45deg);
}
.search__close::after {
  transform: rotate(-45deg);
}
.search__field {
  position: absolute;
  right: 0;
  left: 50%;
  width: 40px;
  height: 45px;
  border: 0px solid #333;
  border-radius: 50px;
  transform: translateX(-50%);
  transform-origin: right;
  transition: 0.3s;
}
.search__input {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: calc(100% - 40px);
  height: 100%;
  padding: 5px 15px;
  color: #1abc9c;
  background-color: transparent;
  border: 0;
  outline: none;
  font-family: Comfortaa, sans-serif;
  font-size: 16px;
}
.search__input::placeholder {
  color: #333;
  opacity: 0;
  transition: 0.3s;
  transition-delay: 0.3s;
}
.search__label {
  cursor: pointer;
}
.search__button {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 5px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.3s;
}
.search__button--submit {
  display: none;
  border: 0;
}
.search__icon {
  position: relative;
  width: 19px;
  height: 19px;
}
.search__icon::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 50px;
}
.search__icon::after {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 8px;
  height: 2px;
  background-color: #fff;
  text-decoration: none;
  transform: rotate(45deg);
  transform-origin: right;
}



.hiddenCategory, .hiddenTextSearch {display:none}



/* BLOG CARDS */


p#status {color: white;font-size: .8em;}




.blogcard {
  position: relative;
  float: left;
  padding: 0 1rem;
  width: 100%;
  margin: 2em;
}

@media screen and (max-width: 950px) {
    .blogcard h1 {font-size: 2.25em;}
    .blogcard {margin: 1em 0;}
    .cardsContainer {display: inline-block;}
    .newest h1{padding: 0;}
}

@media screen and (max-width: 1400px){
  .blogcard .title a {font-size: 2rem;}
  .blogcard .data .content {font-size: .8rem;}
}

@media screen and (max-width: 950px){
  .blogcard .title a {font-size: 1em;}
}



@media screen and (max-width: 1300px) {
    .newest {padding: 0}
    .newest h1 {
        padding: 1em;
    }
}

.blogcard h1 {padding: 0;text-align: left!important;font-weight: 400;}
.blogcard .wrapper {
  min-height: 540px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
}

.blogcard .wrapper:hover .data {
  transform: translateY(0);
}
.blogcard .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(70px + 1em));
  transition: transform 0.3s;
}
.blogcard .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
}
.blogcard .categoryTag {
  font-size: 15px;
  padding-left: 5px;
}
.blogcard .title {
  margin-top: 10px;
}
.blogcard .text {
  height: 70px;
  margin: 0;
}

/* a:focus, a:active {
    text-decoration: none;
    color: inherit;
} */

.blogcard .wrapper:hover .menu-content span {
  transform: translate(-50%, -10px);
  opacity: 1;
}
.blogcard .header {
  color: #fff;
  padding: 1em;
}
.blogcard .header::before, .blogcard .header::after {
  content: "";
  display: table;
}
.blogcard .header::after {
  clear: both;
}
.blogcard .header .date {
  float: left;
  font-size: 12px;
}
.blogcard .menu-content {
  float: right;
}
.blogcard .menu-content li {
  margin: 0 5px;
  position: relative;
}
.blogcard .menu-content span {
  transition: all 0.3s;
  opacity: 0;
}
.blogcard .data {
  color: #fff;
  transform: translateY(calc(70px + 4em));
}
.blogcard .title a {
  color: #fff;
}
.blogcard .button {
  display: block;
  width: 100px;
  margin: 2em auto 1em;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 1;
  position: relative;
  font-weight: 700;
}
.blogcard .button::after {
  content: "→";
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: all 0.3s;
}
.blogcard .button:hover::after {
  transform: translate(5px, -50%);
  opacity: 1;
}


/* CATEGORY CARDS */

.cat {
    width: 100%;
    background-color: #333;
    display: grid;
    align-items: center;
    box-shadow: 0px 0px 14px 6px #333;
}

.cat h1, .all h2 {
    font-size: 2.5em;
    padding: 1em 0em 0 2em;
    color: #fafafa;
}

@media screen and (max-width: 900px) {.cat h1{text-align: center;padding: 1em;}}

@media screen and (min-width: 936px) {
    .cat {height: 70%;}
}

.catCardContainer {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
  font-family: var(--font-sans);
}

@media (min-width: 600px) {
  .catCardContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .catCardContainer {
    grid-template-columns: repeat(4, 1fr);
  }
}

.catCard {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
  .catCard {
    height: 350px;
  }
}
.catCard:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
.catCard:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}
.catCard:nth-child(1):before {
  background-image: url(https://images.unsplash.com/photo-1621168854680-9250096b4a27?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
}
.catCard:nth-child(2):before {
  background-image: url(https://images.unsplash.com/photo-1528712306091-ed0763094c98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=740&q=80);
}
.catCard:nth-child(3):before {
  background-image: url(https://images.unsplash.com/photo-1587678711204-ca6d3d2f1f3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
}
.catCard:nth-child(4):before {
  background-image: url(https://images.unsplash.com/photo-1579781403289-674275bc71c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=749&q=80);
}

.catCardContent {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
}
.catCardContent > * + * {
  margin-top: 1rem;
}

.title {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}

.catbtn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;  
}
.catbtn:hover {
  background-color: #1abc9c;
}
.catbtn:focus {
  outline: 1px dashed #1abc9c;
  outline-offset: 3px;
}


  .blogcard > *:not(a), .ribbon {
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .blogcard:hover > *:not(.row .wrapper, .ribbon),
.blogcard:focus-within > *:not(.data .content, .ribbon) {
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .blogcard:hover > .ribbon, .blogcard:focus-within > .ribbon {
  transform: translateY(0);
  transition-delay: calc(var(--d) / 8);
  }

  .blogcard .text-wrapper {
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color var(--d) var(--e)
  }
  
  .blogcard:hover .text-wrapper,
  .blogcard:focus-within .text-wrapper {
    background-color: rgba(0, 0, 0, 0.7);
  }


  @media (hover: hover) and (min-width: 700px) { 

  .catCard:after {
    transform: translateY(0);
  }

  .catCardContent {
    transform: translateY(calc(100% - 4.5rem));
  }
  .catCardContent > *:not(.title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
  }

  .catCard:hover,
.catCard:focus-within {
    align-items: center;
  }
  .catCard:hover:before,
.catCard:focus-within:before {
    transform: translateY(-4%);
  }
  .catCard:hover:after,
.catCard:focus-within:after {
    transform: translateY(-50%);
  }
  .catCard:hover .catCardContent,
.catCard:focus-within .catCardContent {
    transform: translateY(0);
  }
  .catCard:hover .catCardContent > *:not(.title),
.catCard:focus-within .catCardContent > *:not(.title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 8);
  }

  .catCard:focus-within:before, .catCard:focus-within:after,
.catCard:focus-within .catCardContent,
.catCard:focus-within .catCardContent > *:not(.title) {
    transition-duration: 0s;
  }
 }


/* ALL ARTICLES */

.all {
  width: 100%;
  display: block;
}

.all h2 {color: #333; font-size: 3em;text-align: center;padding: 1.5em 0 1em 0;}

.all h1 {
  font-size: 3.4em;
}

.all .cardsContainer > * {
  flex: 0 0 25%;
}



/* EMAIL REQUEST FORM */

.request {
  margin: 3em 0 0 0;
  height: 50vh;
  background: #1abc9c;
  background: -webkit-linear-gradient(to right, #1abc9c 20%, #4caf50);
  background: linear-gradient(to right, #1abc9c 20%, #4caf50);
  width: 100%;  
  padding: 10em;
  display: block;
  position: relative;


  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  align-items: flex-start;
}

.request h1 {color: #fff;padding-top: 1em;}

.requestInfo p {
  text-align: left;
  padding: 1em 50% 0 0;
  color: #fff;
  font-size: 1.2em;
}

@media screen and (max-width: 1600px) {
  .requestInfo p {padding: 0 50% 0 0;}
  .request {flex-direction: column;}
}

@media screen and (max-width: 900px) {
  .request {
    padding: 5em;
    margin: 0;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: baseline;
  }
  
    form {
      width: 100% !important;
      padding: 0;
    }

  .requestInfo p {padding: 0;}

}

form {
  width: 30%;
}

form .form-group, form small {
  color: #fff !important;
}

form small {font-size: 12px !important;}


form .form-group input, form .form-group textarea {
  padding: 0.7em;
  background: #333;
  color: #1abc9c;
  font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  resize: none;
  z-index: 1;
  border: 2px solid #333;
  border-image-slice: 1;
  z-index: 1;
  transition: color 0.2s linear;
}

#status {
  display: inline;
  padding-left: 10px;
  color: #333;
  font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 600;
}

/* FOOTER */

section {margin: 0 !important;}

footer {
  background-color: #333;
}

footer h5 {
  color: #1abc9c;
}

footer a:hover {
  color: #4caf50 !important;
}

@media screen and (max-width: 950px) {
  #footerTitle {padding-top: 2em;}
}

/* CUSTOM BUTTON */

.OtherButton {
  padding: 0.7em;
  text-align: center;
  position: relative;
  display: inline-block;
  width: fit-content;
  margin: 1em auto;
  background: #333;
  color: #fff;
  z-index: 1;
  border: 2px solid transparent;
  -moz-border-image: -moz-linear-gradient(to right, #1abc9c 20%, #4caf50);
  -webkit-border-image: -webkit-linear-gradient(to right, #1abc9c 20%, #4caf50);
  border-image: linear-gradient(to right, #1abc9c 20%, #4caf50);
  border-image-slice: 1;
  z-index: 1;
}

.OtherButton::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #1abc9c 20%, #4caf50);
  color: white;
  z-index: -1;
  transition: all 0.2s linear;
  opacity: 0;
}

.OtherButton:hover, .OtherButtonRev:hover {
  cursor: pointer;
  color: white;
}

.OtherButton:hover::before, .OtherButtonRev:hover::before {
  opacity: 1;
}

.OtherButtonRev {
  padding: 0.7em;
  text-align: center;
  position: relative;
  display: inline-block;
  width: fit-content;
  margin: 1em auto;
  background: #333;
  color: #fff;
  z-index: 1;
  border: 2px solid transparent;
  -moz-border-image: -moz-linear-gradient(to right, #4caf50 20%,#1abc9c );
  -webkit-border-image: -webkit-linear-gradient(to right, #4caf50 20%,#1abc9c );
  border-image: linear-gradient(to right, #4caf50 20%,#1abc9c );
  border-image-slice: 1;
  z-index: 1;
}

.OtherButtonRev::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #4caf50 20%,#1abc9c );
  color: white;
  z-index: -1;
  transition: all 0.2s linear;
  opacity: 0;
}


.submitButton {
  padding: 0.7em;
  text-align: center;
  position: relative;
  display: inline-block;
  width: fit-content;
  margin: 1em auto;
  background: #333;
  color: #fff;
  z-index: 1;
  border: 2px solid #333;
  border-image-slice: 1;
  z-index: 1;
  transition: color 0.2s linear;
}

.submitButton:hover {
  cursor: pointer;
  color: #1abc9c;
}