:root {
  --ms-background: #f4ede2;
  --ms-colour-boxes: #908db3;
  --ms-colour-circles: #e46a3c;
  --ms-colour-lines: #efcb86;
  --ms-colour-footer: #49226f;
  --ms-colour-text: #49226f;
  --ms-colour-header: #49226f;
}


@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: lighter;
}
@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'ms_fontello';
  src:  url('/classes/fonts/fontello25.woff') format('woff');
}


[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "ms_fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  width:2em;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-list:before { content: '\e800'; } /* 'î €' */
.icon-calendar:before { content: '\e801'; } /* '' */
.icon-adult:before { content: '\e802'; } /* 'î ‚' */
.icon-group:before { content: '\e803'; } /* 'î ƒ' */
.icon-logout:before { content: '\e804'; } /* 'î „' */
.icon-login:before { content: '\e805'; } /* 'î …' */
.icon-bell:before { content: '\e806'; } /* 'î †' */
.icon-location:before { content: '\e807'; } /* 'î ‡' */
.icon-award:before { content: '\e808'; } /* 'î ˆ' */
.icon-cog:before { content: '\e809'; } /* 'î ‰' */
.icon-left-big:before { content: '\e80a'; } /* 'î Š' */
.icon-camera:before { content: '\e80b'; } /* 'î ‹' */
.icon-ok:before { content: '\e80c'; } /* '' */
.icon-user:before { content: '\e80d'; } /* '' */
.icon-heart:before { content: '\e80e'; } /* 'î Ž' */
.icon-basket:before { content: '\e80f'; } /* '' */
.icon-phone:before { content: '\e810'; } /* '' */
.icon-pause:before { content: '\e811'; } /* 'î ‘' */
.icon-clock:before { content: '\e812'; } /* 'î ’' */
.icon-arrows-cw:before { content: '\e813'; } /* 'î “' */
.icon-edit:before { content: '\e814'; } /* 'î ”' */
.icon-makesweat:before { content: '\e815'; } /* 'î •' */
.icon-right-open:before { content: '\e816'; } /* 'î –' */
.icon-left-open:before { content: '\e817'; } /* 'î —' */
.icon-picture:before { content: '\e818'; } /* 'î ˜' */
.icon-mail:before { content: '\e819'; } /* 'î ™' */
.icon-sun:before { content: '\e81a'; } /* 'î š' */
.icon-sun-filled:before { content: '\e81b'; } /* 'î ›' */
.icon-search:before { content: '\f002'; } /* '' */
.icon-cancel:before { content: '\f00d'; } /* '' */
.icon-plus:before { content: '\f067'; } /* '' */
.icon-minus:before { content: '\f068'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-sort:before { content: '\f0dc'; } /* '' */
.icon-comment-empty:before { content: '\f0e5'; } /* '' */
.icon-food:before { content: '\f0f5'; } /* '' */
.icon-doc-text:before { content: '\f0f6'; } /* '' */
.icon-medkit:before { content: '\f0fa'; } /* '' */
.icon-plus-squared:before { content: '\f0fe'; } /* '' */
.icon-angle-double-down:before { content: '\f103'; } /* '' */
.icon-help:before { content: '\f128'; } /* '' */
.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
.icon-thumbs-up-alt:before { content: '\f164'; } /* 'ï…¤' */
.icon-child:before { content: '\f1ae'; } /* '' */
.icon-share:before { content: '\f1e0'; } /* '' */
.icon-cc-visa:before { content: '\f1f0'; } /* '' */
.icon-cc-mastercard:before { content: '\f1f1'; } /* '' */
.icon-cc-amex:before { content: '\f1f3'; } /* '' */
.icon-cc-stripe:before { content: '\f1f5'; } /* '' */
.icon-bell-off-empty:before { content: '\f1f7'; } /* '' */
.icon-user-secret:before { content: '\f21b'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-user-times:before { content: '\f235'; } /* '' */
.icon-sticky-note-o:before { content: '\f24a'; } /* '' */
.icon-shopping-basket:before { content: '\f291'; } /* '' */
.icon-handshake-o:before { content: '\f2b5'; } /* '' */


body {
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: lighter;
  color: var(--ms-text-def);
  background: var( --ms-background );
  color: var( --ms-colour-text );
  margin: 0;
  position: relative;
  background: rgb(191,183,164);
  background: linear-gradient(0deg, rgba(191,183,164,1) 0%, rgba(244,237,226,1) 30%, rgba(244,237,226,1) 100%);
  min-height: 100vh;
  font-size: 19px;
}

h1, h2, h3, h4 {
  margin: 0.5em 10px;
}
p {
  margin: 1em 10px;
}

a, a:visited {
  text-decoration: none;
  color: var( --ms-colour-text );
}
a:hover {
  text-decoration: underline;
}

button {
  border-radius: 5px;
  transition: border 0.25s;
  background: white;
  margin: 10px;
  font-family: OpenSans, sans-serif;
  font-size: 18px;
  color: var(--ms-colour-highlight);
  line-height: 32px;
  padding: 0px 10px;
  border: 1px solid var(--ms-colour-highlight);
  position: relative;
  color: white;
}

button:hover, button.highlight, button[type='submit'] {
  background: var(--ms-colour-boxes);
  color: white;
}

li {
  margin: 8px 0;
  line-height: 1.4em;
}
p {
  line-height: 1.4em;
}

.content-block {
  width: 95vw;
  margin: 0 auto;
  max-width: 800px;
  overflow: hidden;
}


/* Header box */

.header-box {
  margin: 27px auto 40px auto;
  max-width: 1000px;
  width: 95vw;
  padding: 35px 55px 20px 55px;
  color: var( --ms-colour-header );
  font-size: 70px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: bold;
  border: 7px solid var( --ms-colour-boxes );
  box-sizing: border-box;
  position: relative;
}
.header-box:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0; right: 0;
  border-top: 7px solid var( --ms-colour-boxes );
}

.fitem {
  width: 90vw;
  max-width: 400px;
  margin: 10px auto;
}
.fitem label {
  font-weight: bold;
}
.fitem input, .fitem textarea {
  font-size: 1em;
  padding: 10px;
  margin: 10px auto;
  width: 90%;
  color: var( --ms-colour-text );
  border: 3px solid var( --ms-colour-boxes );
  border-radius: 5px;
}
.fitem textarea {
  min-height: 100px;
}

.fitem > * {
  display: block;
  width: 90%;
}

.fitem-buttons {
  display: block;
  text-align: center;
}


/* Menu icon */

.icon-menu.toggle-slide-menu {
  display: none;
}


/* Top menu */

.main-menu {
    overflow: hidden;
    transition: 0.5s;
  }
  .main-menu {
    text-align: right;
    max-width: 800px;
    font-weight: 500;
    margin: 0 auto;
  }
  .main-menu > a {
    display: inline-block;
    margin: 20px 10px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    text-decoration: none;
    padding-bottom: 3px;
  }
  .main-menu > a:not(.icon-makesweat):hover, .main-menu > a.active {
    border-bottom: 1px solid var( --ms-colour-text );
  }
  
  .main-menu > a.icon-makesweat {
    height: 50px;
    width: 50px;
    top: 20px;
    right: 20px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid var( --ms-colour-boxes);
    color: #888;  
    border-radius: 50%;
    margin: 0;
    background: rgba(244,237,226,1);  
  }
  



.hand.container {
  text-align: center;
}

.hand.container .hand {
  display: block;
  margin: 0 auto;
  /* left: 50%; */
  height: 335px;
  transform: translateX( -30px );
  object-fit: fill;
  z-index: 100;
}
  
div.try-now {
  position: relative;

  width: 220px;
  height: 220px;
  box-sizing: border-box;
  line-height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 42px;
  text-align: center;
  color: var( --ms-colour-text);
  font-weight: bold;
  cursor: pointer;  
  margin: 0 auto;
  border: 11px solid var( --ms-colour-circles);
  margin: 0 auto;
  z-index: 200;
  background: rgba( 255 , 255 , 255 , 0.25 );
}


.footer {
  background: var( --ms-colour-footer );
  color: #ddd;
  height: 84px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
  .footer > div {
    margin: 0 20px;
    cursor: pointer;
  }

.pagebody {
  max-width: 800px;
  margin: 10px auto;
  min-height: 600px;
}

@media (max-width: 1200px) {
  body {
    font-size: 16px;
  }
  h1, h2, h3, h4, p {
    margin: 0.25em 5px;
  }

  
  .header-box {
    width: calc( 100vw );
    max-width: 500px;
    transform: translateX( max( -10vw , -50px ) );
    padding: 35px 20px 15px 100px;

    border-width: 5px;
    font-size: 35px;
    margin-bottom: 30px;
  }
  .header-box:before {
    border-width: 5px;
  }
  .content-block {
    max-width: 600px;
  }
  
}

@media (max-width: 800px) {

  .main-menu {
    /* display: none; */
    width: 95vw;
    max-width: 600px;
    padding-top: 0;
    transition: 0.5s;
  }
  body.menu-active .main-menu {
    padding-top: 80px;
    /* display: block; */
  }

  .main-menu > a {
    margin: 0 10px;
    transform: 0.5s;
    height: 0px;
    margin: 10px 10px;
    transition: 0.5s;
    overflow: hidden;
    display: block;
    text-align: center;
    border-bottom: 0;
    padding: 0;
  }
  .main-menu > a.active {
    border-bottom: 0;
  }
  
  body.menu-active .main-menu > a {
    height: 20px;
  }
  body.menu-active .main-menu > a.active {
    font-weight: bold;
  }
  .main-menu > a:not(.icon-makesweat):hover, .main-menu > a.active {
    border-bottom: 0;
  }  

  body.menu-active .main-menu {
    display: block;
  }

  .icon-menu.toggle-slide-menu {
    display: block;
    height: 50px;
    width: 50px;
    top: 20px;
    right: 20px;
    position: absolute;
    border: 1px solid var( --ms-colour-boxes);
    color: #888;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 2000;
    background: rgba(244,237,226,1);
    transition: 0.5s;
    transform: rotate( 0 );
  }
  body.menu-active .icon-menu.toggle-slide-menu {
    right: calc( 50vw - 25px );
    transform: rotate( -180deg );
  }


}