/*----------------------------------------------
/* VARIABLES
--------------------------------------------- */

:root {
  --clr-background-primary: #ffffff;
  --clr-background-muted: #eeeeee;

  /* Colors */
  --clr-primary: #fd0000;
  --clr-secondary: #000000;

  --clr-light: #ffffff;
  --clr-muted: #666666;
  --clr-success: #10b547;
  --clr-warning: #f0bc00;
  --clr-danger: #e2321b;
  --clr-dark: #000000;

  /* Text colors */
  --clr-text-primary: var(--clr-secondary);
  --clr-text-link: var(--clr-primary);
  --clr-text-link-hover: var(--clr-primary);

  /* Typography */
  --fnt-family-primary: 'Roboto Condensed', sans-serif;
  --fnt-family-secondary: 'Big Shoulders Text', cursive;
  --fnt-size-base: 20px;
  --fnt-size-sm:  0.85rem;
  --fnt-size-md:  1rem;
  --fnt-size-lg:  1.5rem;
  --fnt-size-xl:  2rem;
}

/*--------------------------------------------------------------
# BASIC TAGS
--------------------------------------------------------------*/

* {
    box-sizing:border-box;
    &:before, &:after {
        box-sizing:border-box;
    }
}

html, body {
  font-family: var(--fnt-family-primary);
	color: var(--clr-text-primary);
	font-size: var(--fnt-size-base);
  font-weight: normal;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

a {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	color: var(--clr-text-link);
}

a:hover {
	text-decoration: none;
	color: var(--clr-text-link-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--clr-text-primary);
  font-family: var(--fnt-family-secondary);
}

h2 {
  font-size: 4rem;
}

strong {
  font-weight: bold;
}

/*--------------------------------------------------------------
# LAYOUT
--------------------------------------------------------------*/

/* Site header */

.site-header {}

.site-header__container {
  position: absolute;
  top: 0;
  z-index: 10;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0);
}

.site-header__container--sticky {
  background: #fff;
}

.site-header__content {
  z-index: 2;
  padding-bottom: 1rem;
}

.site-header__motto {
  padding: 1rem;
  background: rgba(255,255,255,0);
  text-align: center;
}

/* Site navbar */

.site-navbar {}
.site-navbar__left {}
.site-navbar__right {}

.site-navbar .site-navbar__toggle {
    color: var(--clr-text-primary);
}

.site-navbar__logo-link {
    font-family: var(--fnt-family-secondary);
    font-weight: bold;
}

.site-navbar__logo-img {
    width: auto;
    height: 42px;
}

@media (orientation: portrait) {
  .header-text {
    padding-bottom: 3rem;
  }

  .site-motto {
    padding-bottom: 3rem;
  }
}

@media (min-aspect-ratio: 16/7) {
  .site-motto {
    background: rgba(255,255,255,1);
  }
}

.site-footer .logo {
  max-width: 200px;
}

.site-footer a {
  color: #000;
}

.overlay-background {
  min-height: 50vh;
}

@media (min-width: 960px) {
  .overlay-background {
    min-height: 100vh;
  }
}

.portfolio {
  overflow: hidden;
}

.portfolio .portfolio-title {
  font-size: 1.5rem;
}

.portfolio .portfolio-overlay {
  box-shadow: 0px 2px 12px rgba(0,0,0,.25);
}

.portfolio .uk-slider-container {
  overflow: hidden;
}

/*--------------------------------------------------------------
# NAV
--------------------------------------------------------------*/

/* Primary navigation */

.nav-main {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main__item {
  position: relative;
}

.nav-main__item::before {
  content: '';
  display: block;
  position: absolute;
  background-color: var(--clr-primary);
  height: 4px;
  left: 10px;
  right: 10px;
  bottom: 26px;
  opacity: 0;
  transition: opacity ease .5s;
}

.nav-main__item.uk-active::before,
.nav-main__item:hover::before {
  opacity: 1;
}

.nav-main .nav-main__link {
  color: var(--clr-text-primary);
  font-family: var(--fnt-family-secondary);
  font-size: 1.25rem;
  position: relative;
  text-transform: lowercase;
  padding: 0 10px;
}

.nav-main .nav-main__link:hover {
  color: var(--clr-text-primary);
}

.lang-switcher--lang-it .lang-it {
  display: none;
}

.lang-switcher--lang-en .lang-en {
  display: none;
}

.lang-switcher .nav-main__link {
  opacity: .35;
}

.uk-offcanvas-bar .lang-switcher {
  margin-top: 2rem;
  opacity: .35
}

.nav-mobile .uk-offcanvas-close {
  right: 0 !important;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Overrides
--------------------------------------------------------------*/

.uk-navbar-container.uk-background-white {
  background: #fff !important;
}

.uk-sticky-placeholder {
  height: 0 !important;
}

.uk-overlay-white {
  background: rgba(255,255,255,1) !important;
}

.uk-navbar-toggle {
  color: #000 !important;
}

.uk-modal-work .overlay-background {
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  border: 8px solid #111111;
}

@media (min-width: 960px) {
  .uk-modal-work .overlay-background {
    border: 32px solid #111111;
  }
}

.uk-modal-work .modal-controls {
  padding-top: .75rem;
  padding-bottom: .75arem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.text-gs {
  color: #fd0000;
}

.font-gs {
  font-family: 'Big Shoulders Text', cursive;
}

a.underline {
  background-image: -webkit-linear-gradient(top, rgba(253,0,0,0.4) 0, rgba(253,0,0,0.4) 100%);
  background-image: linear-gradient(to bottom, rgba(253,0,0,0.4) 0, rgba(253,0,0,0.4) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 30% 30%;
}

.uk-dotnav {
  padding: 0 1rem;
}

.uk-dotnav>* {
  padding: 6px;
}

.uk-dotnav>*>* {
  border-radius: 0;
  width: 20px;
  height: 14px;
}

.uk-dotnav>.uk-active>* {
  background-color: #fd0000;
}

.uk-modal-close {
  color: var(--clr-dark);
}

.uk-offcanvas-bar {
  background-color: var(--clr-dark);
}

.uk-offcanvas-bar a {
  color: rgba(255,255,255,1) !important;
  opacity: 1 !important;
}

.list-gs li {
  position: relative;
  padding-left: 30px;
}

.list-gs li > span {
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
  color: #fd0000;
}

.work-link {
  line-height: 1;
}