/* ---------------------------------------------------
                    DEMO CONTENT
---------------------------------------------------- */
#home-menu a{cursor: default}

#mobile-holder{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: black;
  z-index: 10;
  padding: 20px 20px;
  display: none
}

#mobile-holder img{
  width: 100%;

}

#mobile-inner{
  /*width: 70vw;*/
/*padding: 30px 30px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------
                      CONTENTS
---------------------------------------------------- */

/*

    00 - Reset
    01 - @font-face
    02 - Body & Html / Variables
    03 - General Typography
    04 - Unique Typography
    05 - Main Elements
    06 - Flex Setup
    07 - Unique Elements
    08 - Mobile Specific
    09 - Media Queries
    10 - Archive

*/


/* ---------------------------------------------------
                      00 - RESET
---------------------------------------------------- */

* {-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;    /* Firefox, other Gecko */box-sizing: border-box; /* Opera/IE 8+ */margin: 0;padding: 0;
-webkit-font-smoothing: antialiased;}
a {text-decoration: none;}
ul{list-style: none}
body{overscroll-behavior: none;}

/* ---------------------------------------------------
                    01 - @FONT-FACE
---------------------------------------------------- */

/* -- @fontface -- */
@font-face {
  font-family: "HelveticaLT";
  src: url("../fonts/HelveticaNeueLTCom-Lt.woff2") format("woff2"),
       url("../fonts/HelveticaNeueLTCom-Lt.woff") format("woff"),url("../fonts/HelveticaNeueLTCom-Lt.otf") format("opentype");
    font-style:normal;font-weight:400;;
}

@font-face {
    font-family:"HelveticaBD";
    src:url("../fonts/HelveticaNeueLTCom-Bd.woff2") format("woff2"),url("../fonts/HelveticaNeueLTCom-Bd.woff") format("woff"),url("../fonts/HelveticaNeueLTCom-Bd.otf") format("opentype");
    font-style:normal;font-weight:400;
}

@font-face {
    font-family:"HT";
    src:url("../fonts/Haettenschweiler-Regular.woff2") format("woff2"),url("../fonts/Haettenschweiler-Regular.woff") format("woff"),url("../fonts/Haettenschweiler-Regular.otf") format("opentype");
    font-style:normal;
    font-weight:100;
    
}


/* ---------------------------------------------------
                    02 - BODY & HTML / VARS
---------------------------------------------------- */

/* Variable Setup */

:root {
  --main-bg-color: #000;
  --main-text-color: #fff;
  --header-height: 50px;
  /* Universal Spacing Unit / usu */
  --usu: 25px;
  /* Wrapper Padding */
  --wrapper-padding: var(--usu);
  /* Colours */
  --color-grey: #555;
  --outline-stroke-width: 1.2px;
}

/* -- Body & Html -- */
html{min-height: 100%; font-size: 16px;}

body{
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

.is-hidden{
  visibility: hidden;
}

/* -- Troubleshooting Helpers -- */
.__ts1{background-color: red !important}
.__ts2{background-color: gold !important}
.__ts3{background-color: silver !important}
.__ts-hide1{display: none !important}
.__ts-hide2{display: none !important}

/* -- Margin Helpers -- */
.mar__b-1{margin-bottom: var(--usu);}
.mar__b-2{margin-bottom: calc(var(--usu)*2);}
.mar__b-3{margin-bottom: calc(var(--usu)*3);}
.mar__b-4{margin-bottom: calc(var(--usu)*4);}

.mar__t-1-2{margin-top: calc(var(--usu)/2);}
.mar__t-1{margin-top: var(--usu);}
.mar__t-2{margin-top: calc(var(--usu)*2);}
.mar__t-3{margin-top: calc(var(--usu)*3);}
.mar__t-4{margin-top: calc(var(--usu)*4);}

/* Flex Col Padding */
.pad__fc-l-1{padding-left: calc(var(--usu));}
.pad__fc-r-1{padding-right: calc(var(--usu));}
.pad__fc-l-1-2{padding-left: calc(var(--usu)/2);}


/* ---------------------------------------------------
                    03 - TYPOGRAPHY
---------------------------------------------------- */

/* -- Font Family -- */
h1{
  font-family: 'HT'; 
  font-weight: normal;
  text-transform: uppercase;
}

h2, .h2, p,.text__details {
  font-family: 'HelveticaLT', Helvetica;
}

/* -- Basic Size & Styles -- */
h1 {font-size: 7.5vw;}
h2, .h2, p{
  font-size: 1.9rem; 
  line-height: 2.5rem
}

.text__details{
  font-size: 1rem; 
  font-style: normal; 
  letter-spacing: 0.03rem; 
  font-weight: 100;
}

/* -- Font Weight Helpers --*/
.text__bold{font-family: 'HelveticaBD';}
.text__light{font-family: 'HelveticaLT';}

/* Lists - General */
ul {line-height: 1.2rem}

/* -- Colours -- */
a{
  color: inherit;
}
/* Styling */
.text__strike{text-decoration: line-through}

/* -- Helpers -- */
.text__align-right{text-align: right;}

/* -- Hovers -- */



.link{cursor: pointer;}
.link:hover{
  transition: all 0.2s; 
  transition-timing-function: cubic-bezier(0.42,0,0.58,1);
}

/* ---------------------------------------------------
                04 - UNIQUE TYPOGRAPHY
---------------------------------------------------- */

/* -- General -- */
.logo-symbol{ 
  font-size: 1rem;
  position: relative;
  top: -0.7rem;
  left: 0.3rem;
}

.text__amp{font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; font-weight: 100; font-size: 1em}
/* ---------------------------------------------------
                05 - BASIC PAGE ELEMENTS
---------------------------------------------------- */

/* -- Header -- */
#header{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
  height: var(--header-height);
  padding-top: 7px;
  background-color: var(--main-bg-color);
  padding-left: var(--usu);
  padding-right: var(--usu);
}

/* -- Footer -- */
#footer{
  width: 100%;
  /*margin-top: 160px;*/
  margin-bottom: var(--usu)
}

/* -- Page Wrapper -- */

#page-wrapper{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: calc(var(--header-height) + 20px);
  padding-left: var(--wrapper-padding);
  padding-right: var(--wrapper-padding);
}

#replace{
  position: relative;
  width: 100%;
}

/* ---------------------------------------------------
                  06 - FLEX SETUP
---------------------------------------------------- */


.flex__row {
  display: flex;
  flex-direction: row;
  width: 100%;

}

.flex__col {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.flex__col-1-1{
  flex-grow: 0;
  flex-basis: calc(100%);
}

.flex__col-1-2{
  flex-grow: 0;
  flex-basis: calc(50%);
}

.flex__col-1-4{
  flex-grow: 0;
  flex-basis: calc(100%/4);
}

.flex__col-1-3{

  flex-grow: 0;
  flex-basis: calc(100%/3);
}

.flex__col-2-3{
  flex-grow: 0;
  flex-basis: calc(100% / 3 * 2);
}

.flex__col-1-6{
  flex-grow: 0;
  flex-basis: calc(100%/6);
}

/* Flex Helpers */
.flex__align-bottom{align-self: flex-end;}



/* ---------------------------------------------------
                  07 - UNIQUE PAGE ELEMENTS
---------------------------------------------------- */

/* ------------ Home ---------- */

/* -- Typography -- */
#home-menu h1{
  line-height: 0.72;
  display: inline-block;
}
#services-list{
  line-height: 1.5rem;
  list-style-type: disc
}
#services-list li:first-child{
  list-style-type: none
}

.text__journal{
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: var(--outline-stroke-width);
  -webkit-text-stroke-color: var(--color-grey);
}

/* -- Elements -- */
#home-menu, #home-arrows{
  justify-content: space-between;
}

#home-menu div{
  flex-grow: 0;
  flex-basis: auto;
}

#home-arrows div{ 
  flex-grow: 0;
  flex-basis: 5.6vw;
  display: flex;
  align-items: center;
  
}

.arrow{
  width: 100%;
}





/* ---------------------------------------------------
                08 - MOBILE SPECIFIC
---------------------------------------------------- */

/* -- Responsive Mobile -- */
.rm{display: none;} 

/* ---------------------------------------------------
                09 - MEDIA QUERIES
---------------------------------------------------- */
/* 
  ##Device = Large Desktops & Monitors
  ##Screen = 1281px to higher resolution desktops
*/

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

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) and (max-width: 1823px) {}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

html{font-size: 14px}


}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (max-width: 1024px) {
h1 {font-size: 6.5vw;}
  html{font-size: 12px}
}

@media (max-width: 700px) {


#mobile-holder{display: block;}
}

/* ---------------------------------------------------
                      10 - ARCHIVE
---------------------------------------------------- */
/*

@font-face {
    font-family:"HelveticaThin";
    src:url("../fonts/HelveticaNeueLTCom-Th.woff2") format("woff2"),url("../fonts/HelveticaNeueLTCom-Th.woff") format("woff");
    font-style:normal;font-weight:400;
}


*/