/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
button svg {
  fill: white;
}


 /* reset end */



@font-face { 
  font-family: Bebas;
  src: url(../fonts/BebasNeue-Regular.ttf) format('truetype'); 
 } 

html, body {
  margin: 0;
  font-family: "Bebas", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: white;
  background-color: #111;
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior: none;
  height: 100%;
}

body{
  height: 100; /* Fallback */
  height: fill-available;
}


a{
  text-decoration: none !important;
  color: inherit;
  opacity: 1;
}


a:hover{
  opacity: 0.75;
  -webkit-transition: all 0.3s; /* Safari */
  transition: all 0.3s;
}

a.active{
  color: #f9bdb3;
}


.wrapper{
  position: relative;
  height: 100%;

}

/* Flickity requirements */

.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}
.flickity-enabled.flickity-enabled.is-draggable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.flickity-enabled .flickity-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100% !important;
}
.flickity-enabled .flickity-slider {
  position: relative;
  width: 100%;
  height:  100% !important;
}

.carousel {
	height: calc(100% - 100px);
  width: 100vw;
  padding-top: 80px;
}

.carousel-cell{
  height: calc(100% - 100px);
  /* width: calc(100vw - 200px); */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-cell img{
  height: 100%;
  max-width: calc(100vw - 40px); 
  object-fit: contain;
  margin-right: -20vw;
}
@media only screen and (max-width: 1000px) {
  .carousel-cell img{
    margin-right: 0;
  }
}

.flickity-prev-next-button {
  position: absolute;
  /* top: 50%; */
  height: 40px;
  width: 40px;
  color: white;
}
.flickity-prev-next-button.previous{
  left: 55vw;
  bottom: 20px;
}
.flickity-prev-next-button.next{
  right: 35vw;
  bottom: 20px;
}

@media only screen and (max-width: 1000px) {
  .flickity-prev-next-button.previous{
    left: 35vw;
    bottom: 20px;
  }
  .flickity-prev-next-button.next{
    right: 35vw;
    bottom: 20px;
  }
}


/* nav */


.nav-side{
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(17, 17, 17, 0.8);
  z-index: 3;
  padding: 80px 40px 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
@media only screen and (max-width: 1000px) {
  .nav-side{
    left: -320px;
    background-color: rgba(17, 17, 17, 1);
    padding: 30px ;
  }
}
.mid{
  margin-bottom: -100px;
}
.nav-side .profile{
  width: 110px;
  position: relative;
}
.nav-side .top h1{
  font-size: 3.25em;
  line-height: 1em;
  margin-bottom: 0.1em;
 }
 .nav-side .top h1 span{
  font-size: 1.1em;
  display: block;
 }
.nav-side .mid{
 font-size: clamp(2rem, 2.5vw, 2.75em); 
 line-height: 8vh;
}
.nav-side .top{
  justify-self: start;
}
.nav-side .mid{
  margin-top: -200px;
}
.nav-side .lower{
  justify-self: end;
}

.nav-side .lower ul li{
 display: inline;
}


.lower a.mail{
  font-size: 1.3em;
  letter-spacing: 0.025em;
 }


.lower ul li a{
  position: relative;
  display: inline-block;
  content: '';
  height: 60px;
  width: 60px;
 }
 

 .lower ul li a.fb{
  background-image: url('../img/icon/fb.svg');
  background-repeat: no-repeat;
  background-position: center;
 }

 .lower ul li a.in{
  background-image: url('../img/icon/in.svg');
  background-repeat: no-repeat;
  background-position: center;
 }


.nav-top{
  display: none;
}
@media only screen and (max-width: 1000px) {
  .nav-top{
    display: block;
  }
}
.nav-top h2.logo{
  position: absolute;
  font-size: 32px;
  margin: 30px;
  
}

 /* menu */

button#btn-menu{

  width: 80px;
  height: 80px;
  padding: 10px;
  /* text-transform: uppercase; */
  opacity: 1;
  cursor: pointer;
  border: none;
  background-image: url('../img/icon/menu.svg');
  background-repeat: no-repeat;
  background-position: center;
}
button#btn-menu:hover{
  opacity: 0.7;
}
button#btn-menu:focus{
  outline: 0 !important;
}
#btn-menu{
  position: fixed;
  z-index: 10;
  right: 0;
}
/* #btn-menu.active{
  background-color: red;
  content: "close";
} */
#btn-menu.active:after {
  content:''; 
  visibility: visible;
  display: block;
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;
  padding: 10;
  top: 0;
  left: 0;

  /* text-transform: uppercase; */

  position: absolute;
  z-index: 10;
  cursor: pointer;
  border: none;
  background:#111;
  background-image: url('../img/icon/close.svg');
  background-repeat: no-repeat;
  background-position: center;
}