/*!
Theme Name: lateliertheme
Theme URI: https://banktm.de
Author: BANK / Graphic Design Today
Author URI: https://banktm.de
Description: latelier theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lateliertheme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

tachyons is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
@font-face {font-family: 'SpaceGrotesk-Light';
src: url('webfont/SpaceGrotesk-Light.woff2') format('woff2'),
url('webfont/SpaceGrotesk-Light.woff') format('woff');}

@font-face {font-family: 'SpaceGrotesk-Regular';
src: url('webfont/SpaceGrotesk-Regular.woff2') format('woff2'),
url('webfont/SpaceGrotesk-Regular.woff') format('woff');}

@font-face {font-family: 'SpaceGrotesk-Bold';
src: url('webfont/SpaceGrotesk-Bold.woff2') format('woff2'),
url('webfont/SpaceGrotesk-Bold.woff') format('woff');}

.f1, .f2, .f3, .f4, .f1-l {
    font-family: 'SpaceGrotesk-Light', helvetica,arial,sans-serif !important;
    font-weight: lighter;

}

.f1, .f2, .f3, .f4, .f4b, .f5, .f5b, .f6, .f1-l{
      letter-spacing: 0.4px;
}

.page-template-projects .f1 {
  /* */
}

.f2 {
  font-size: 1.90rem;
  line-height: 1.2em;
}

.f3 {
  font-size: 1.50rem;
  line-height: 1.2em;
}

.f4 {
  font-size: 1.1rem;
  line-height: 1.25em;
}

.f4b {
  font-family: 'SpaceGrotesk-Bold', helvetica,arial,sans-serif !important;
  font-size: 1.1rem;
  line-height: 1.25em;
}



.f5{
  font-family: 'SpaceGrotesk-Regular', helvetica,arial,sans-serif !important;
  font-size: 0.7rem;
  line-height: 1.2em;
}

.f5b {
  font-family: 'SpaceGrotesk-Bold', helvetica,arial,sans-serif !important;
  font-size: 0.7rem;
  line-height: 1.2em;
}

a{
  text-decoration: none;
}

a:link, a:visited {
color: black;}

a:hover {
color: #C0C0C0;}

a:active {
  color: #C0C0C0;
}

.mb45{
  margin-bottom: 3em;
}
.cursor{
  cursor: all-scroll;
}

h1, h2, p, .site-branding, #menupopout, #menu-projects, #tagline, #primary-menu li {
  margin: 0;
}


.headline h1, .headline p, .typology h1, .typology p{
  display: inline;
}

.content p{
  margin: 0;
}

ul{
  padding-left: 0.75em;
  margin-top: 0;
}



.logged-in.admin-bar, .admin-bar #masthead {
  margin-top: 32px !important;
}

/* .bb15{
  border-bottom: 1.5px solid black;
} */

/***************
LANDING PAGE
***************/

.landing img{
  width: 100%;
  height:auto;
}

.landing {
  line-height: 0;
}

/***************
MENU
***************/
#primary-menu li{
  padding-right: 0.5em;
}

.menu ul {
  margin: 0
}

.menu li {
  display: inline-block;
  margin: 0 .4rem;
}


/***************
MENU TOGGLE
***************/
button {
  font-size: 100%;
  /* margin:0.75em; */
}


.box-shadow-menu {
  position: relative;
  padding-left: 2em;
  padding-bottom: 1em;
  outline: 0;

}

.box-shadow-menu:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0px;
  width: 2.6em;
  height: 2px;
  background:
  black;
  box-shadow: 0 20px 0 0 black, 0 10px 0 0 black;
}
.menu-tagline {
  top: 1.4em;
}

.menutoggle {
  z-index: 5;
  position: absolute;
  right: 1rem;
}

.menutoggle .box-shadow-menu::before {
  background: transparent;
  box-shadow: 0 0 0;
  color: #000;
  width: 2rem;
  right: -23px;
  position: absolute;
  left: auto;
  content: '\00D7';
  font-size: 2rem;
  top: -9px;
  font-family: initial;
}

/***************
MENU SORT BY
***************/
.sortbytype{
  min-width: 8em;
}
/* Dropdown Button */
.dropbtn {
  cursor: pointer;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.typologies a[href="http://latelier.work/typologies/1/"]{
    visibility: hidden !important;
}

/***************
IMAGE GALLERY
***************/
.featured-img img{
  display: block;
  max-width: 100%;
  height: auto;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.gallery img {
  max-width: 750px;
  max-height: 750px;
  height: auto;
  width: auto;
}

.gallery-item {
  margin: 0 0 3em 0;
}

.wp-caption-text{
  display: none;
}

/***************
Table Projects List #list and #data
***************/
#list, #data {
  border-collapse: collapse;
}
#data{
  border-top: 1px solid black;
}

#list th, #list td, #list tr, #data th, #data td, #data tr {
  border: 0;
}

#list th, #list td, #data th, #data td{
  border-bottom: 1px solid black;
}

#data tr{
  display: flex;
}

#list th:hover{
  color: #C0C0C0;
}

.text-small p, .text-small li {
  margin: 0;
}

.project-list td, .project-list th{
  margin: 0;
}
.projects-list td, .data-project td{
  padding-top: 0.6em;
  padding-bottom: 0.5em;
}

.data-info{
  padding-left: 1.5em;
}

th{
  font-weight: normal;
}

/***************
NEWSLETTER
***************/

#mc_embed_signup{
  display:inline;
}
#mc_embed_signup_scroll{
  display: flex;
}
#mc-embedded-subscribe{
  padding-left: 0;
}
input[type=email] {
  border: none;
  border-bottom: 1px solid black;
  margin-bottom: 5px;
}

::placeholder{
  color: #C0C0C0;
  opacity: 1;
}

input[type=submit]{
  background-color: white ;
  border: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance:none;
 -webkit-border-radius:0px;
 border-radius:0;
}

input[type="button"] {
    -webkit-appearance:none;
    -webkit-border-radius:0px;
    border-radius:0;
}

input[type=submit]:hover{
  color: #C0C0C0;
}
/***************
VIDEO PROJECT SINGLE PAGE
***************/
.video {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    }

    .video iframe,
    .video object,
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/***************
RESPONSIVE
***************/
@media screen and (min-width:30em) {

  .f2 {
    font-family: 'SpaceGrotesk-Light', helvetica,arial,sans-serif !important;
    font-weight: lighter;
    font-size: 1.90rem;
    line-height: 1.2em;
  }
  .f4-ns {
    font-family: 'SpaceGrotesk-Light', helvetica,arial,sans-serif !important;
    font-weight: lighter;
    font-size: 1.1rem;
    line-height: 1.25em;
    letter-spacing: 0.4px;

  }

  .f4b-ns {
    font-family: 'SpaceGrotesk-Bold', helvetica,arial,sans-serif !important;
    font-size: 1.1rem;
    line-height: 1.25em;
    letter-spacing: 0.4px;

  }
  /* .w-20-ml{
    width:20%;
  }
  .w-80-ml{
    width: 80%;
  } */

}

@media screen and (min-width:67em) {

.f1-l {
  font-family: 'SpaceGrotesk-Light', helvetica,arial,sans-serif !important;
  font-weight: lighter;
  font-size: 2.40rem;
  line-height: 1.2em;
}





}