/* themes */

body.ThemeDefault {
  --action-color: #00a4b6;
  --saturation-color: #44ecff ;
  --highlight-color: #A7C800;
  --button1-color: #00a4b6;
  --button2-color: #A7C800;
  --main-color: #002F50;
  --bg-color: #F3F3F5;
  --text-color: #333;
  --textover-color: #fff;
}
body.ThemeDark {
  --action-color: #4DD881;
  --saturation-color: #8cff9a;
  --highlight-color: #4DD881;
  --button1-color: #4DD881;
  --button2-color: #4DD881;
  --main-color: #282828;
  --bg-color: #000;
  --text-color: #9A9A9A;
  --textover-color:#fff;
}
body.ThemeGrey {
  --action-color: #DB4437;
  --saturation-color: #ff867c;
  --highlight-color: #DB4437;
  --button1-color: #444;
  --button2-color: #DB4437;
  --main-color: #000;
  --bg-color: #eee;
  --text-color: #333;
  --textover-color:#fff;
}
body.ThemeNeapolitan {
  --action-color: #DC698A;
  --saturation-color: #ffb5ca;
  --highlight-color: #AB8EBB;
  --button1-color: #AB8EBB;
  --button2-color: #DC698A;
  --main-color: #43290E;
  --bg-color: #F8EFE8;
  --text-color: #43290E;
  --textover-color:#fff;
}
body.ThemeSand {
  --action-color: #C3A559;
  --saturation-color: #ffde8a;
  --highlight-color: #2E1915;
  --button1-color: #2E1915;
  --button2-color: #C3A559;
  --main-color: #000;
  --bg-color: #E4D7B4;
  --text-color: #2E1915;
  --textover-color:#fff;
}

/* geral */
html, body {
    margin: 0;
    padding: 0;
}
body, body *, body *:after, body *:before {
    box-sizing: border-box;
    line-height: 100%;
}
/* body.ThemeDefault, body.ThemeDefault * {
  font-family: 'Roboto', sans-serif;
} */
footer {
  clear: both;
}
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
section {
    width: 100%;
    display: block;
    clear: both;
    float: left;
    padding: 20px 0;
}
h2 {
    font-weight: normal;
    font-size: 2rem;
    color: var(--action-color);
    margin: .5em 0;
}
.ThemeSand h2,
.ThemeSand .button:not(:hover),
.ThemeSand a,
.ThemeSand ul.navigation li a:hover,
.ThemeSand ul.navigation li a:visited  {
    text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
}
.ThemeSand .button:not(:hover) {
  font-weight: bold;
}
/* GRID */
.grid-img {
  min-height: 200px;

  filter: drop-shadow(-8px 8px 0px var(--action-color));
  margin: 0 10px;
  transition: all .4s linear .2s;
    -webkit-transition: all .4s linear .2s;
    -moz-transition: all .4s linear .2s;
    -ms-transition: all .4s linear .2s;
    -o-transition: all .4s linear .2s;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.grid.reverse .grid-img {
    filter: drop-shadow(8px 8px 0px var(--action-color));
}
.grid-text {
  padding: 0 7px;
}
body .grid-text p {
    line-height: 120%;
    margin-bottom: 1em;
    color: var(--text-color);
}

/* SECTIONS */
    /* hero */
#hero {
  height: calc(100vh - 140px);
  background: url('/fmfiles/index.asp/::docpronto::/home/hero1.jpg') 80% 50%/cover no-repeat;
  margin-top: -16px;
}
@supports (mix-blend-mode: multiply) {
  .duotone::before,
  .duotone::after {
    background-color: var(--saturation-color);
    content: '';
    display: block;
    width: 100%;
    height: calc(100vh - 140px);
    mix-blend-mode: multiply;
    position: absolute;
    top: 80px;
    left: 0;
  }
  .duotone::after {
    background-color: var(--main-color);
    mix-blend-mode: lighten;
  }
}
#hero h1 {
    color: #fff;
    font-size: 3rem;
    text-shadow: 0px 2px 4px rgba(0,0,0,.65);
}

/* IMAGES */
#noLogin .grid-img {
  background-image: url('/fmfiles/index.asp/::docpronto::/home/noLogin.jpg');
  height: 100%;
}
#print .grid-img {
  background-image: url('/fmfiles/index.asp/::docpronto::/home/print.jpg');
  height: 100%;
}
#customize .grid-img {
  background-image: url('/fmfiles/index.asp/::docpronto::/home/customize.jpg');
  height: 100%;
}

/* GLOBAL CLASSES */
.alignCenter {text-align: center}
.middle.middleMaster {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.middle.middleMaster > h1,
.middle.middleMaster > h2,
.middle.middleMaster > p {margin-top: 0} /* fix */

.button {
  background-color: transparent;
  border: solid 3px var(--action-color);
  color: var(--action-color);
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  margin: 0 auto 20px;
  padding: .75em 1.5em;
  text-align: center;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
.button:hover {
  background-color: var(--action-color);
  color: var(--textover-color);
}

/* // SIZES // */
@media only screen and (min-width: 640px) {
  #hero {
    height: 500px;
    background-position: center 60%;
  }
  .duotone::before,
  .duotone::after {
    height: 500px;
  }
  .button {
    margin: 20px auto 0;
    font-size: 1.1rem;
  }
  .grid {
  	display: grid;
    grid-template-columns: 50% 50%;
  	grid-column-gap: 10px;
    align-items: center;
    height: 440px;
  }
  .grid.reverse div:nth-of-type(1) {
    order: 2;
  }
  .grid.reverse div:nth-of-type(2) {
    order: 1;
  }
  .grid-text {
    margin: 0 auto;
    max-width: 420px;
  }
  .grid-img {
    filter: drop-shadow(0px 0px 0px var(--action-color));
    margin: 0 50px;
    background-size: calc(100% - 40px);
    background-position: calc(50% - 20px) calc(50% + 20px);
  }
  .grid.reverse .grid-img {
      filter: drop-shadow(0px 0px 0px var(--action-color));
      background-position: calc(50% + 20px) calc(50% + 20px);
  }
  .grid-img.shadow {
    filter: drop-shadow(-40px 40px 0px var(--action-color));
    background-position: calc(50% + 20px) calc(50% - 20px);
  }
  .grid.reverse .grid-img.shadow {
      filter: drop-shadow(40px 40px 0px var(--action-color));
      background-position: calc(50% - 20px) calc(50% - 20px);
  }
  /* mozilla only */
  @supports (-moz-appearance:meterbar) {
    .grid-img.shadow {
      filter: drop-shadow(-40px 40px 0px var(--action-color));
      background-position: calc(50% - 20px) calc(50% + 20px);
    }
    .grid.reverse .grid-img.shadow {
      filter: drop-shadow(40px 40px 0px var(--action-color));
      background-position: calc(50% + 20px) calc(50% + 20px);
    }
  }
}