/**
 * WEB FONTS
 */
@font-face { /* montserrat-regular - latin */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('./fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/montserrat-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face { /* montserrat-500 - latin */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('./fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/montserrat-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/**
 * COLOURS
 */
body {
  background-color: #fff;
  color: #b3a686;
}

.main:before {
  background-color: #426072;
}

footer,
a {
  background-color: #b3a686;
  color: #fff;
  color: rgba(255, 255, 255, .87);
}

.preview p {
  color: #7d7d7d;
}

footer .secondary:before {
  background-color: #000;
}


/**
 * TYPO
 */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
}

h1 {
  font-size: 1.27em;
}

.secondary {
  font-size: 9px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

i {
  font-style: normal;
}

@media (min-width: 440px) {
  body {
    font-size: 16px;
    font-size: 3vw;
    line-height: 2;
  }

  .secondary {
    font-size: 12px;
    font-size: 2.05vw;
  }

  footer,
  .preview p, td {
    font-size: 16px;
    font-size: 2.6vw;
    line-height: 2;
  }
}

@media (min-width: 720px) {
  body {
    font-size: 24px;
    line-height: 2;
  }
  
  .secondary {
    font-size: 14px;
  }

  footer,
  .preview p, td {
    font-size: 16px;
    line-height: 1.625;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 30px;
    line-height: 1.6;
  }
}

@media (min-width: 1024px) and (max-height: 800px) {
  body {
    font-size: 24px;
    font-size: 3vh;
    line-height: 1.6;
  }
}


/**
 * BASIC STUFF
 */
html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

article,
.logos {
  margin: 0 auto;
}

@media (min-width: 1024px) {
  article,
  .footer-section {
    max-width: 85rem;
    margin-left: auto;
    margin-right: auto;
  }

  .logos {
    max-width: none;
  }
}



/**
 * MAIN CONTENT
 */
 article.main {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 0 6%;
  position: relative;
}

article.main:before {
  content: '';
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
}

article.main > * {
  position: relative;
  z-index: 1;
}

article.main h1 {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

article.main p {
  margin: 2em .6em 6.6em;
  max-width: 35em;
}

article.main img {
  align-self: center;
  display: block;
  margin: 4vh auto 0;
  object-fit: contain;
}

@media (min-width: 480px) {
  article.main img {
    max-width: 20em;
  }
}

@media (min-width: 720px) {
  article.main img {
    margin-top: 8vh;
    max-height: 40vh;
    max-width: 25em;
  }
}

@media (min-width: 1024px) {
  article.main img {
    margin: 5% auto 0;
    max-height: 55vh;
    max-width: 890px;
    width: 67%;
  }

  article.main p {
    margin: 2.8em 0;
  }
}

@media (min-width: 1024px) and (max-height: 800px) {
  article.main img {
    margin-top: 5%;
  }
}


/**
 * PREVIEW CONTENT
 */
article.preview {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5em 6% 2.5em;
  text-align: left;
}

article.preview h1 {
  margin: 0 0 1em;;
}

article.preview img {
  margin: 1em 0 0;
  max-width: 400px;
}

@media (min-width: 720px) {
  article.preview {
    flex-direction: row;
  }

  article.preview > * {
    width: 45%;
  }

  article.preview div {
    max-width: 27.5em;
  }

  article.preview img {
    margin: 0 0 0 2em;
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  article.preview {
    align-items: flex-start;
  }

  article.preview h1 {
    margin: 1.2em 0 1.9em;
  }

  article.preview img {
    margin-left: 11%;
  }
}



/**
 * FOOTER
 */
footer .logos {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  padding: 3em 6% 2.16em;
}

footer img {
  margin: 0 1.16em;
  width: 30%;
}

footer p {
  margin: 0 0 2em;
}

footer .secondary {
  padding: 1.67em 0;
  position: relative;
}

footer .secondary:before {
  bottom: 0;
  content: '';
  left: 0;
  opacity: .05;
  position: absolute;
  right: 0;
  top: 0;
}

footer .secondary p {
  margin: 0;
}

@media (min-width: 440px) {
  footer img {
    max-width: 8em;
  }
}

@media (min-width: 1024px) {
  footer .footer-section {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
    padding: 2.4em 6%;
    text-align: left;
  }

  footer .logos {
    justify-content: flex-start;
    margin: 0;
    padding: 0;
  }

  footer .contact {
    display: flex;
    padding-top: 3em;
  }

  footer .contact > * {
    margin: 0 1.6em;
  }

  footer .secondary .footer-section {
    padding-top: 0;
    padding-bottom: 0;
  }
}


/**
 * H-CARD
 */
.h-card span {
  display: block;
}

/*.h-card span.label {
  display: none;
}*/

@media (min-width: 1024px) {
  .h-card .address-item {
    display: flex;
  }

  .h-card i.label,
  .h-card span.label {
    display: block;
    margin-right: 1em;
    width: 8em;
  }
}
td {
	padding-right: 8px; 
}