@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700&display=swap');

:root{
  --m-width: 300px;
  --gap: 40px;
  --site-margin: 15px;
}
BODY{
  font-size: 14px;
  background-color: #e1e1e1;
  color: #111;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  text-transform: uppercase !important;
  letter-spacing: .1rem;
  }
H1,H2,H3,H4,H5,H6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-weight: 400;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase !important;
  font-size: 14px;
}


#container{
  position: relative;
  padding-top: 100px;
}
HEADER{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #e1e1e1fa;
  z-index: 999;
}
/*MAIN{
  max-width: calc(100vw - var(--m-width) - var(--gap)*2);
  margin-left: auto;
}*/
/**
    SELECT
**/
BODY ::-moz-selection{ background: #42c3ff; color:#333; text-shadow: none; }
BODY ::selection { background: #42c3ff; color:#333; text-shadow: none; }
/**
    TRANSITION
**/
A, A:hover {
	-webkit-transition: color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	-moz-transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	-o-transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	transition: color .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}
#main-menu A:before,
.item A .item-title:before {
	-webkit-transition: width  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	-moz-transition: width .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	-o-transition: width .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
	transition: width .5s cubic-bezier(0.21, 0.61, 0.35, 1.0), background-color  .5s cubic-bezier(0.21, 0.61, 0.35, 1.0);
}

A, A:hover{
  text-decoration: none;
  color: #111;
  font-weight: 300;
}
A,
.item-title{
  display: inline-block;
  position: relative;
}
#main-menu A:before,
.item A .item-title:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 0;
  z-index: -1;
}
#main-menu A:hover:before,
.item A:hover .item-title:before{
  background-color: rgba(0,0,0,.1);
  width: 100%;
  opacity: 1;
}
#main-menu .active A:before{
  background-color: rgba(0,0,0,.15) !important;
  width: 100%;
  opacity: 1;
}
P{
  font-weight: 300;
}

#page{
  width: 100%;
}

h1{
  font-weight: 600;
  font-size: 1rem;
}

.item-title{
  font-size: 15px;
  font-weight: 400;
}
#header-logo{
  font-size: 15px;
  font-weight: 600;
}
.item-image{
  position: relative;
  /*max-height: calc(100vh - 60px);*/
  }
.item-image IMG{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.item-image IMG.lazy{
  z-index: -1;
  opacity: .2;
}

@media (min-width: 990px){
  #container{
    padding-top: calc(var(--site-margin)*2);
    padding-right: calc(var(--site-margin)*2);
  }
  #main{
    padding-left: calc(var(--m-width) + var(--gap));
  }
  HEADER{
    top: 0;
    left: 0;
    padding-top: var(--site-margin);
    max-width: var(--m-width);
    max-height: 100vh;
    background-color: transparent;
  }
  #header-logo{
   margin-bottom: 40px;
   }
}
@media (max-width: 989px){
  #main-menu A{
    padding: 4px 0;
  }
}