/*
Theme Name: Table Bouddha
Theme URL: tablebouddha.be
Author: Enza Lombardo

Description: Page de maintenace site
Version: 1.0
*/

/* -- IMPORT -- */
@import "reset.css";
@import "./../fonts/flaticon/flaticon.css";

/* -- Variante -- */
:root {
  --color-primary: #f5a623;
  --color-primary-light: #ffbd4e;
  --color-primary-dark: #a16500;

  --color-grey-light: #919191;

  --color-dark: #111;
  --color-dark-light: #212529;

  --color-light: #fafafa;
}

/* -- GENERAL -- */
body {
  background: #333;
  color: var(--color-light);
  font-family: sans-serif;
}

h1 {
  font-size: 3em;
  font-weight: bolder;
  font-family: serif;
}

.little-title {
  font-family: serif;
}

.main-content p {
  font-size: 1.2em;
  font-weight: lighter;
}

.pt-2 {
  margin-top: 2em;
}

.container-fluid {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

/* -- SIDE -- */
.side-left,
.side-right {
  width: 100%;
}
.side-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.card-panel {
  background-color: inherit;

  box-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px var(--color-dark),
    0 1px 5px 0 var(--color-dark);
}

/* contact */

.contact {
  font-size: 1.2em;
}
.contact span {
  font-size: 1.5em;
}

.contact-group {
  display: flex;
  flex-direction: row;
}

.contact-group .contact-item {
  padding: 1em;
}

.contact-group .contact-item:first-child {
  padding-left: 0;
}

.icons {
  color: var(--color-primary);
}

.icons:hover .icons:focus {
  color: var(--color-primary-dark);
}

/* -- BUTTON -- */

.btn {
  display: flex;
  justify-content: center;
  /* border: 1px solid var(--color-primary); */
  color: var(--color-primary);
  border-radius: 5px;
  /* margin: 0 5em; */
  /* padding: 1em !important; */
  overflow: hidden;
  /* opacity: 0; */
  text-shadow: 4px 2px 4px rgba(9, 9, 9, 0.9);
  height: 3em;
  background-color: inherit;
}

.btn::before,
.btn::after {
  display: block;
  clear: both;
  content: "";
  width: 0;
  height: 0;
}

.btn:hover,
.btn:focus {
  /* opacity: 1; */
  background-color: var(--color-primary);
  color: var(--color-light);
}

/* ------------------------------------------------ */
/* ---------------    RESPONSIVE    --------------- */
/* ------------------------------------------------ */

@media (max-height: 700px) {
}

@media only screen and (min-width: 1000px) {
  /*.main-content h1 {
    font-size: 4em;
  }*/
}

@media only screen and (min-width: 989px) and (max-width: 480px) {
}

@media (max-height: 500px) {
  .main-content h1 {
    font-size: 1.7em;
  }

  .contact-group {
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
  }
}

@media only screen and (max-width: 479px) {
  .main-content h1 {
    font-size: 1.7em;
  }

  .contact-group {
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
  }
}