/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/*----------- apply a natural box layout model to all elements --------------*/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*----------- BODY --------------*/
body {
  font-size: 16px;
  font-family: "Amiri", Verdana, sans-serif;
  min-width: 15rem;
  margin: 0;
}

/* Mobile Screen Size - 15em is also 240px (if basefont is 16px) */
@media only screen and (min-width: 15rem) {
  /*----------- HEADER --------------*/
  header {
    padding: 0.5rem 2%;
    background-color: #1d3c3f;
    display: grid;
    grid-template-columns: 350px auto;
  }
  header .slogan {
    display: none;
  }
  header figure {
    margin: 0;
  }
  header button {
    margin: 1rem 2%;
    background-color: transparent;
    border: none;
    font-size: 3rem;
    color: #555;
  }
  header h1 {
    margin: 0;
    margin-top: 1rem;
    font-weight: bold;
    font-size: 40px;
    color: #421215;
    text-shadow: -5px 0px 5px #e7e0cc, 0px 5px 5px #e7e0cc, 5px 0px 5px #e7e0cc, 0px -5px 5px #e7e0cc;
  }
  header h2 {
    margin: 0;
    font-weight: normal;
    font-size: 30px;
    color: #421215;
    text-shadow: -5px 0px 5px #e7e0cc, 0px 5px 5px #e7e0cc, 5px 0px 5px #e7e0cc, 0px -5px 5px #e7e0cc;
  }

  /*----------- NAVIGATION --------------*/
  nav {
    background-color: #1d3c3f;
  }
  nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  nav ul .hide {
    display: none;
  }
  nav ul li a {
    display: block;
    color: #421215;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    padding: 0.5rem 0;
    text-decoration: none;
    font-size: 20px;
    text-align: center;
    text-shadow: -5px 0px 5px #e7e0cc, 0px 5px 5px #e7e0cc, 5px 0px 5px #e7e0cc, 0px -5px 5px #e7e0cc;
  }
  nav ul li a:hover {
    background-color: #e7e0cc;
    color: #421215;
  }
  nav ul li .active a {
    background-color: #421215;
    color: #1d3c3f;
    text-shadow: -5px 0px 5px #421215, 0px 5px 5px #421215, 5px 0px 5px #421215, 0px -5px 5px #421215;
  }

  /*----------- MAIN --------------*/
  main {
    padding: 2%;
    min-height: 10rem;
  }
  main ul {
    cursor: pointer;
  }
  main h1 {
    font-weight: bold;
    font-size: 40px;
    color: #421215;
    text-shadow: 4px 4px 4px #aaa;
  }
  main h2 {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 30px;
    color: #421215;
    text-shadow: 4px 4px 4px #aaa;
  }
  main img {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  main .floatswitch ul li {
    text-indent: 2rem;
  }
  main .herodiv {
    width: 100%;
    padding: 0.5rem 2%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  main .herodiv figure {
    width: 100%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
  }
  main .herodiv .actioncall {
    position: absolute;
    top: 2rem;
    left: 2rem;
    background: #e7e0cc;
    border: 1px solid #000;
    padding: 0.2rem;
    box-shadow: 0 0 30px #421215;
  }
  main .herodiv .actioncall h3 {
    margin: 0.5rem;
  }
  main .herodiv .actioncall p {
    margin: 0.2rem;
  }
  main .herodiv .actioncall button {
    border: none;
    background-color: #421215;
    color: black;
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    width: 96%;
    max-width: 20rem;
  }

  /*----------- Slideshow --------------*/
  #slideshow:after {
    content: "";
    display: table;
    clear: both;
  }

  #slideshow img {
    float: left;
    margin: 0 -100% 0 0;
  }

  /*----------- Flexwrap Classes --------------*/
  main .asset {
    display: flex;
    flex-wrap: wrap;
  }
  main .asset section {
    margin: 1rem 2%;
    flex-basis: 96%;
    border-style: ridge;
    border-color: #421215;
    border-width: 6px;
    padding: 1%;
    transition: all 0.2s ease-in-out;
  }
  main .asset section img {
    width: 100%;
  }
  main .asset section:hover {
    box-shadow: 0 0 12px #555;
    transform: scale(1.05);
    cursor: pointer;
  }

  /*---START toggleClass sub-CSS---*/
  main .asset p {
    display: none;
  }

  main .asset ul {
    display: none;
  }

  main .asset .click p {
    display: block;
  }

  main .asset .click ul {
    display: block;
  }

  /*---END toggleClass sub-CSS---*/
  /*----------- #GLASS --------------*/
  #glass {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.6);
  }

  /*----------- FOOTER --------------*/
  footer {
    background-color: #1d3c3f;
    color: #421215;
    padding: 0.5rem 2%;
    text-align: center;
    clear: both;
  }
}
/* Tablet Screen Size - 45em is also 720px (if basefont is 16px) */
@media only screen and (min-width: 45rem) {
  /*----------- BODY --------------*/
  /*----------- HEADER --------------*/
  header button {
    display: none;
  }

  header img {
    width: auto;
  }

  header h1 {
    font-size: 2rem;
  }

  header h2 {
    font-size: 1.5rem;
  }

  header .slogan {
    display: block;
  }

  /*----------- NAVIGATION --------------*/
  nav ul.hide {
    display: block;
  }

  nav ul {
    margin-left: 2%;
  }

  nav ul li {
    float: left;
  }

  nav ul li a {
    border: none;
    border-right: 1px solid rgba(0, 0, 8, 0.3);
    padding: 0.8rem 1rem;
  }

  /*----------- MAIN --------------*/
  main ul img {
    width: 48%;
    float: left;
    padding: 2%;
    padding-top: 0;
  }

  main .floatswitch section:nth-child(2n+1) img, main .floatswitch ul:nth-child(2n+1) img {
    float: right;
    width: 48%;
    padding: 2%;
    padding-top: 0;
  }
  main .floatswitch section:nth-child(2n) img, main .floatswitch ul:nth-child(2n) img {
    float: left;
    width: 48%;
    padding: 2%;
    padding-top: 0;
  }

  /*----------- Flexwrap Classes --------------*/
  main .asset {
    justify-content: center;
  }

  main .asset section {
    flex-basis: 46%;
  }

  /*----------- FOOTER --------------*/
}
/* Computer Screen Size - 64em is also 1028px (if basefont is 16px) */
@media only screen and (min-width: 64rem) {
  /*----------- BODY --------------*/
  /*----------- HEADER --------------*/
  /*----------- NAVIGATION --------------*/
  /*----------- MAIN --------------*/
  /*----------- Flexwrap Classes --------------*/
  main .asset section {
    flex-basis: 29%;
  }

  /*----------- FOOTER --------------*/
}
/* Computer Widescreen Size - 90rem is also 1440px (if basefont is 16px) */
@media only screen and (min-width: 90rem) {
  header, nav, main, section, footer, body .contact {
    max-width: 90rem;
    margin: auto;
  }

  /*----------- BODY --------------*/
  /*----------- HEADER --------------*/
  /*----------- NAVIGATION --------------*/
  /*----------- MAIN --------------*/
  /*----------- Flexwrap Classes --------------*/
  main .asset section {
    flex-basis: 21%;
  }

  /*----------- FOOTER --------------*/
}
/*----- Clearfix: Force an Element not to collapse -----*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*---------- CLOSE CODE ----------*/

/*# sourceMappingURL=styles.css.map */