/*------------------------------------*\
   Schriften
\*------------------------------------*/


@font-face {
	font-family: 'MADEOkineSans-Light';
	src: url('../fonts/made-okine-sans-light.eot');
	src: url('../fonts/made-okine-sans-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/made-okine-sans-light.woff2') format('woff2'),
	     url('../fonts/made-okine-sans-light.woff') format('woff'),
	     url('../fonts/made-okine-sans-light.ttf') format('truetype'),
	     url('../fonts/made-okine-sans-light.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'MADEOkineSans-Regular';
	src: url('../fonts/made-okine-sans-regular.eot');
	src: url('../fonts/made-okine-sans-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/made-okine-sans-regular.woff2') format('woff2'),
	     url('../fonts/made-okine-sans-regular.woff') format('woff'),
	     url('../fonts/made-okine-sans-regular.ttf') format('truetype'),
	     url('../fonts/made-okine-sans-regular.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*------------------------------------*\
   roots
\*------------------------------------*/

* {
  margin: 0;
  padding: 0;
}

:root {
  --text_mini: .6rem;
  --text_sm: .8rem;
  --text_md: .9rem;
  --color-black: #2b3037;
  --color-grey: #9398a2;
  --color-light-grey: #c8cbd2;
  --color-white: #fff;
  --color-text: var(--color-black);
  --color-background: var(--color-white);
  --font-family-regular: 'MADEOkineSans-Light', Helvetica, Arial, Sans-Serif;
  --font-family-bold: 'MADEOkineSans-Regular', Helvetica, Arial, Sans-Serif;
}


/*------------------------------------*\
   main default
\*------------------------------------*/

.uniform__potty {
    position: absolute;
    left: -9999px;
}


.default video {
  width: 100%;
  height: auto;
}

#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
  pointer-events: none;
  background: var(--color-white);
  animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}

@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}


html, body {
  font-family: var(--font-family-regular);
  color: var(--color-text);
  background: var(--color-background);
  -moz-font-feature-settings:'aalt=0,calt=0,ccmp=0,liga=0,locl=0,ordn=0';
  font-size: 17px;
}

main.main {
	margin: 6rem 0;
}

footer.footer {
	padding: 6rem 0;
}

h1, h2, h3, h4, h5, h6, a.navbar-brand, .font_bold {
	font-family: var(--font-family-bold);
}

.font_regular {
	font-family: var(--font-family-regular);
}

a {
	text-decoration: none;
	outline: none;
}

a h1, a h2, a h3, a h4, a h5, a h6, a p {
	text-decoration: none;
	color: var(--color-black);
}

.text a, .members a {
	color: var(--color-black);
	font-family: var(--font-family-bold);
}

.text_sm, figcaption {
	font-size: var(--text_sm);
}

hr.xl {
  margin: 6rem 0;
}

figcaption {
  color: var(--color-grey);
  text-align: right;
}

.btn.btn-primary {
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  -webkit-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn.btn-primary:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

main.default .cover {
  position: relative;
}

main.default .copyright {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.copyright p {
  text-transform: uppercase;
  font-size: var(--text_mini);
  font-family: var(--font-family-bold);
}

/*------------------------------------*\
   navi
\*------------------------------------*/

header.mainmenu nav ul li a {
	color: var(--color-black);
	font-family: var(--font-family-bold);
}

.navbar-toggler {
	border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43, 48, 55, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	-webkit-tap-highlight-color: transparent;
}


/*------------------------------------*\
   footer
\*------------------------------------*/

.footer_nav ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.instagram {
  width: 100%;
  background-color: var(--color-black);
}

.instagram a {
  color: var(--color-white);
  font-size: 2.5rem;
  line-height: 1;
}

.instagram a:hover  {
  color: var(--color-white);
}

/*------------------------------------*\
   opacity hover + effect
\*------------------------------------*/

header.mainmenu nav ul li a,
a.navbar-brand,
.navbar-toggler-icon,
p.grey a.close {
	opacity: .75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
	-webkit-transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

header.mainmenu nav ul li a.active,
header.mainmenu nav ul li a:hover,
a.navbar-brand:hover,
.navbar-toggler-icon:hover,
p.grey a.close:hover {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

a i.bi, .more ul li, .members .inner {
	-webkit-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)
}


/*------------------------------------*\
   projekte
\*------------------------------------*/

article.project_item {
}

p.client {
	color: var(--color-grey);
}

.grey {
	color: var(--color-grey);
}

.card {
	border-radius: 0;
	border: none;
}

.grey a.close {
	color: var(--color-grey);
}

ul.tags {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	font-size: var(--text_sm);
}

ul.tags li {
	display: inline-block;
	line-height: 3;
}

ul.tags li:not(:last-child) {
	margin-right: .35rem;
}

ul.tags li.anyclass:not(:last-child):after {
	content: " •";
	color: var(--color-grey);
}


ul.tags li a, ul.tags li a.active, ul.tags li a.active:hover {
	color: var(--color-grey);
	background-color: var(--color-white);
	border: 1px solid var(--color-grey);
	padding: .3rem .6rem;
	border-radius: .6rem;
	-webkit-transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

ul.tags li a.active, ul.tags li a.active:hover {
	opacity: .333;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
    filter: alpha(opacity=33);
    -moz-opacity: 0.333;
    -khtml-opacity: 0.333;
}

ul.tags li a:hover {
	color: var(--color-black);
}

.text figure {
	margin-bottom: 0;
}

.text figure img {
	width: 100%;
	display: block;
	height: auto;
}

/*------------------------------------*\
   projekt
\*------------------------------------*/

main.main.projectPage, main.main .cover_container #has_image {
	margin-top: -6rem;
}


.cover {
	width: 100%;
	justify-content: center;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-position: center center!important;
	height: 65vh;
	position: relative;
}

.cover_container {
	margin-top: 3rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	width: 100%;
}

.layout {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.layout figure.layout_figure {
  margin: 0;
  padding: 0;
}

.img-caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

figure .video iframe {
   aspect-ratio: 16 / 9;
   width: 100%;
  height: auto;
  display: block;
}






.accordion-button:not(.collapsed) {
  color: var(--color-black);
}


/*------------------------------------*\
   hover effect on deskop
\*------------------------------------*/

@media (hover: hover) {

.project_item a figure, .layout .text figure {
	position: relative;
	overflow: hidden;
	height: auto;
}

.project_item a figure img.masonry_img, .layout a #masonry_img {
	-webkit-transition: all 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: all 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}

 .project_item a:hover figure img.masonry_img, .layout a:hover #masonry_img {
	transform: scale(1.015) rotate(.125deg);
	filter: brightness(110%);
}

}



/*------------------------------------*\
   onscroll header
\*------------------------------------*/

body {
    padding-top: 56px;
}

header.mainmenu {
	-webkit-transition: top .666s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: top .666s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

.nav-up {
    top: -59px;
}

/*------------------------------------*\
   more
\*------------------------------------*/

.more ul {
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.more ul li {
  display: inline-block;
  text-align: center;
  font-family: var(--font-family-bold);
}

.more ul li a {
  color: var(--color-black);
  text-decoration: none;
}




/*------------------------------------*\
   team
\*------------------------------------*/

main.main.team {
  margin-top: 0;
}

main.main.team .team_header {
  padding: 6rem 0;
  margin-bottom: -1.5rem;
}

.members a {
  font-family: var(--font-regular);
}

.members .email a {
	font-size: var(--text_md);
}

/*------------------------------------*\
   FFC Forms
\*------------------------------------*/


body.ffc_award_ceremony .cover_container, body.ffc_opening .cover_container {
	margin: 0!important;
	padding-top: 5.9rem;
	padding-left: 0;
	padding-right: 0;
}

body.ffc_award_ceremony .form-floating>label, body.ffc_opening .form-floating>label {font-size: .75rem;}


body.ffc_award_ceremony .modal-backdrop.show, body.ffc_opening .modal-backdrop.show {
opacity: var(--bs-backdrop-opacity);
}

body.ffc_award_ceremony .modal-backdrop, body.ffc_opening .modal-backdrop {
--bs-backdrop-bg: #000;
--bs-backdrop-opacity: 0.8;
background-color: var(--bs-backdrop-bg);
}

/*------------------------------------*\
   responsive
\*------------------------------------*/


@media (min-width: 576px) {
	body { padding-top: 76px;}
	.nav-up {top: -76px;}
}


@media (min-width: 768px) {
}


@media (min-width: 992px) {
}



@media (min-width: 1200px) {
	.cover_container {margin-top: 9rem; padding: 0 3rem;}


  .layout .row.g-lg-5 {--bs-gutter-x: 4.5rem;}
  .layout .row.g-lg-5 {--bs-gutter-y: 4.5rem;}
  .layout .row.mb-lg-5 {margin-bottom: 4.5rem !important;}
  .layout {margin-top: 4.5rem;}
}


@media (min-width: 1400px) {
  .layout .row.g-lg-5 {--bs-gutter-x: 5rem;}
  .layout .row.g-lg-5 {--bs-gutter-y: 5rem;}
  .layout .row.mb-lg-5 {margin-bottom: 5rem !important;}
  .layout {margin-top: 5rem;}
}


@media (min-width: 1500px) {
	.container {max-width: 1400px;}
  .layout .row.g-lg-5 {--bs-gutter-x: 5.5rem;}
  .layout .row.g-lg-5 {--bs-gutter-y: 5.5rem;}
  .layout .row.mb-lg-5 {margin-bottom: 5.5rem !important;}
  .layout {margin-top: 5.5rem;}
}

@media (min-width: 1600px) {
	.container {max-width: 1500px;}
}

@media (min-width: 1920px) {
	.cover_container {max-width: 1920px;}
}