/*
Theme name: JulianKernbach
*/
/* ------------------------------

		Color vars

------------------------------ */
/* ------------------------------

		Fonts vars

------------------------------ */
/* ------------------------------

		Main style butttons

------------------------------ */
/* ------------------------------

		hide

------------------------------ */
.u-hide {
  display: none !important; }

/* ------------------------------

		Positions

------------------------------ */
.u-position-r {
  position: relative; }

/* ------------------------------

		Text

------------------------------ */
.u-text-right {
  text-align: right; }

.u-text-center {
  text-align: center; }

@media only screen and (max-width: 1000px) {
  .u-mobile-center {
    text-align: center; } }

/* ------------------------------

		paddings

------------------------------ */
.u-no-padding-l {
  padding-left: 0 !important; }

.u-no-padding-r {
  padding-right: 0 !important; }

/* ------------------------------

		Margins

------------------------------ */
.u-no-margin-t {
  margin-top: 0 !important; }

.u-no-margin-b {
  margin-bottom: 0 !important; }

/* ------------------------------

        Html & Body

------------------------------ */
html {
  font-size: 16px;
  overflow-x: hidden;
  margin: 0;
  padding: 0; }

body {
  background-color: white;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  color: #000;
  margin: 0;
  padding: 0; 
  overflow-x: hidden;
}

h1 {
  font-size: 44px;
  color: #fff;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
}
h2 {
  font-size: 16px;
  color: #fff;
  margin:0;
  font-weight: 400;
  text-transform: lowercase;
}
h3 {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 75px 0;
  text-align: center;
}
/* ------------------------------

		Lists

------------------------------ */
ul {
  padding: 0;
  margin: 0;
  list-style-type: none; }

/*
* ==================================
*  MOBILE
*/
/* ------------------------------

    Links

------------------------------ */
a, a:visited {
  color: #000;
  text-decoration: none; }

a:hover {
  text-decoration: underline;
}
/*
* Helpers
*/
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* ------------------------------

		NAV

------------------------------ */
nav {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  color: #fff;
  z-index: 3;
  transform: translateY(-50px);
  opacity: 0;
  transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
}
nav a, nav a:visited {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}
nav a:hover {
  text-decoration: none;
}
nav .menu__item {
  display: inline-block;
  margin: 0 20px;
}
.social-menu li {
  display: inline-block;
  margin: 0 12px;
}
nav .scroll-hidden {
  opacity: 0;
  pointer-events: none;
}


/* 
* Reel
*/
section.reel {
  width: 100vw;
  height: 100vh;
  background: url('../images/reel.png') no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
section.reel img {
  opacity: 0;
  display: none;
}
section.reel .header {
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: all 2.2s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  margin-top: -100px;
}
.reel .video-holder {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.reel .video-holder video {  
  width: 105vw;
  height: 105vh;
  object-fit: cover;
  position: relative;
  top: -2.5vh;
  left: 0;
  z-index: -1;
  background: #fff;
}

/*
* Work grid
*/
.work-grid {
  width: 100%;
  margin: 0 !important;
  padding: 0;
}
.work-grid__item {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.work-grid__item a {
  /*display: block;
  height: 100%;*/
}
.works__img {
  display: block;
  aspect-ratio: 2.51/1;
}
.works__img img{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translate(-50%,0);
}
.works__desc {
  position: absolute;
  opacity: 0;
  bottom: -50px;
  padding: 16px;
  width: 100%;
  transition: all .65s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.works__desc h4 {
  margin: 0;
  font-size: 16px;
  text-transform: none;
  font-weight: 400;
  color: #fff;
}
.work-grid__item:hover .works__desc {
  opacity: 1;
  bottom: 0;
}


/*
* No move
*/
html.mouseMove nav {
  transform: translateY(0px);
  opacity: 1;
}
html.mouseMove .header {
  transform: translateY(0px); 
  opacity: 1;
}


/*
* ScrollUP
*/
.scrollingUp nav {
  position: fixed;
  transform: translateY(0px);
  background: rgba(0,0,0,.8);
}
/*
* Footer 
*/
footer {
  padding: 50px 0;
  font-size: 10px;
  opacity: .7;
}

/*
* remodal
*/
.remodal-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.85);
}
.remodal-wrapper.remodal-is-opened .remodal-is-initialized {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.remodal-wrapper.remodal-is-opened {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.remodal-close {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  position: absolute;
  top: 30px;
  right: 30px;
}


.with-text {
  min-height: 100vh;
  display: flex;
  align-items: center;
}




@media screen and (max-width: 400px){
  nav .menu__item:first-child {
    margin-left: 0;
  }
  nav .menu__item:last-child {
    margin-right: 0;
  }
  nav .menu__item {
    margin: 0 10px;
  }


  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 16px;
  }

  .header {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }
  nav {
    /*transform: translateY(0px) !important;
    opacity: 1 !important;*/
  }
  .scrollingUp nav {
    position: fixed;
    transform: translateY(50px);
    background: rgba(0,0,0,.8);
  }
  html.mouseMove nav {
    transform: translateY(50px);
    opacity: 0;
  }
  .work-grid__item:hover .works__desc {
    opacity: 0;
    bottom: -50px;
  }
  .works__desc {
    display: none !important;
  }

}
@media screen and (max-width: 900px) and (max-height: 500px){
  nav .menu__item:first-child {
    margin-left: 0;
  }
  nav .menu__item:last-child {
    margin-right: 0;
  }
  nav .menu__item {
    margin: 0 10px;
  }


  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 16px;
  }

  .header {
    transform: translateY(0px) !important;
    opacity: 1 !important;
    margin-top: 0 !important;
  }
  nav {
    /*transform: translateY(0px) !important;
    opacity: 1 !important;*/
  }
  .scrollingUp nav {
    position: fixed;
    transform: translateY(50px);
    background: rgba(0,0,0,.8);
  }
  html.mouseMove nav {
    transform: translateY(50px);
    opacity: 0;
  }
  .work-grid__item:hover .works__desc {
    opacity: 0;
    bottom: -50px;
  }
  .works__desc {
    display: none !important;
  }

}

@media screen and (max-width: 320px){
  .social-menu li {
    margin: 0 7px;
  }
  nav .menu__item:first-child {
    margin-left: 0;
  }
  nav .menu__item:last-child {
    margin-right: 0;
  }
  nav .menu__item {
    margin: 0 2px;
  }
  .scrollingUp nav {
    position: fixed;
    transform: translateY(50px);
    background: rgba(0,0,0,.8);
  }
  html.mouseMove nav {
    transform: translateY(50px);
    opacity: 0;
  }


  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 16px;
  }

  .header {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }
  nav {
    /*transform: translateY(0px) !important;
    opacity: 1 !important;*/
  }
  .work-grid__item:hover .works__desc {
    opacity: 0;
    bottom: -50px;
  }
  .works__desc {
    display: none !important;
  }

}