stavebniny/public/layout.css

html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway Light";
}
.index-grid-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr 1fr auto;
  gap: 1em 1em;
  grid-template-areas: "logo top_menu top_menu top_menu" "side_menu preliminary preliminary preliminary" "side_menu content content content" "side_menu content content content" "footer footer footer footer";
}
.index-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  text-transform: uppercase;
  font-family: "Raleway Thin";
  letter-spacing: 0.2em;
}
.index-logo a {
  padding: 2em 1em;
  font-weight: 100 !important;
  font-style: normal;
  color: #222;
  text-decoration: none;
  transition: 0.5s;
}
.index-logo a:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 0.65rem;
  animation: COLOR_BLINK 6s infinite;
}
.index-top_menu {
  grid-area: top_menu;
  display: flex;
  align-items: center;
  justify-content: center;
}
.index-top_menu nav {
  align-items: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.index-top_menu nav a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Raleway Light";
  font-weight: 200;
  font-style: normal;
  color: #444;
  transition: 0.3s;
}
.index-top_menu nav a:hover {
  color: #000;
  border-bottom-width: 0.75rem !important;
}
.index-top_menu nav a.active {
  border-bottom-width: 0.75rem !important;
}
.index-top_menu nav a.katalog {
  border-bottom: solid 1px #93ce38;
}
.index-top_menu nav a.vyhledavani {
  border-bottom: solid 1px #4089bb;
}
.index-top_menu nav a.kontakt {
  border-bottom: solid 1px #ad32a1;
}
.index-top_menu nav a.o-spolecnosti {
  border-bottom: solid 1px #c69f88;
}
.index-preliminary {
  grid-area: preliminary;
  text-align: justify;
  padding: 0;
}
.index-preliminary h3 {
  color: #000;
}
.index-preliminary p {
  color: #606060;
}
@media (min-width: 60rem) {
  .index-preliminary {
    padding: 0 6vw;
  }
}
@media (min-width: 90rem) {
  .index-preliminary {
    padding: 0 40% 0 0;
  }
}
@media (min-width: 120rem) {
  .index-preliminary {
    padding: 0 50% 0 0;
  }
}
.index-content {
  grid-area: content;
}
.index-content .select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.index-content .select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 1em 1.5em;
  outline: 0;
  border-width: 0 0 1px 0;
  border-color: #aaa;
  border-style: solid;
  border-radius: 0;
  background: #fff;
  color: #808080;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.index-content .select select::-ms-expand {
  display: none;
}
.index-content .select select:hover,
.index-content .select select:focus {
  color: #000;
  background: #fff;
}
.index-content .input {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.index-content .input input {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 1em 1.5em;
  outline: 0;
  border-width: 0 0 1px 0;
  border-color: #aaa;
  border-style: solid;
  border-radius: 0;
  background: #fff;
  color: #808080;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.index-content .input input::-ms-expand {
  display: none;
}
.index-content .input input:hover,
.index-content .input input:focus {
  color: #000;
  background: #fff;
}
.index-content .input textarea {
  display: inline-block;
  width: 100%;
  height: 30em;
  cursor: pointer;
  padding: 1em 1.5em;
  outline: 0;
  border-width: 0 0 1px 0;
  border-color: #aaa;
  border-style: solid;
  border-radius: 0;
  background: #fff;
  color: #808080;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.index-content .input textarea::-ms-expand {
  display: none;
}
.index-content .input textarea:hover,
.index-content .input textarea:focus {
  color: #000;
  background: #fff;
}
.index-content .index-top-part {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  grid-template-rows: 0.5fr;
  gap: 1em 1em;
  grid-template-areas: "sorting search_bar";
}
.index-content .index-top-part .search_bar {
  grid-area: search_bar;
}
.index-content .index-top-part .sorting {
  grid-area: sorting;
}
.index-side_menu {
  grid-area: side_menu;
}
.index-side_menu ul {
  border-right: 1px solid #edf2f7;
  list-style: none;
  font-family: "Raleway Light";
  text-align: right;
  font-size: 1.2rem;
}
.index-side_menu ul li {
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  padding-right: 2rem;
  margin-right: 2rem;
  transition: 0.5s;
}
.index-side_menu ul li a {
  text-decoration: none;
  color: #555;
}
.index-side_menu ul li a:hover {
  color: #000;
}
.index-side_menu ul li:hover {
  border-radius: 0.3rem;
  box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25);
  background-color: #fff;
}
.index-footer {
  font-family: "Raleway Thin" !important;
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  text-transform: uppercase;
  color: #333;
}
.kontakt-grid-container {
  display: grid;
  min-height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 1em;
  grid-template-areas: "kontakt-top kontakt-top" "kontakt-informace kontakt-form" "kontakt-mapa kontakt-form";
}
.kontakt-top {
  grid-area: kontakt-top;
}
.kontakt-top h1 {
  color: #000;
  font-size: 2rem;
  font-weight: 200;
  font-style: normal;
  text-transform: uppercase;
  font-family: "Raleway Thin";
}
.kontakt-informace {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 0.45rem;
  grid-area: kontakt-informace;
  padding: 1rem;
}
.kontakt-informace table {
  color: #333;
  border: none;
  border-collapse: collapse;
}
.kontakt-informace table td {
  border: none;
}
.kontakt-informace table th {
  text-align: left;
  padding-right: 1rem;
}
.kontakt-mapa {
  grid-area: kontakt-mapa;
}
.kontakt-mapa .map {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
}
.kontakt-form {
  grid-area: kontakt-form;
}
.kontakt-form form {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 0.45rem;
  margin: 0rem 2rem;
  height: 100%;
  padding: 2rem;
}
.kontakt-form form button {
  padding: 1rem 3rem;
  float: right;
}
.kontakt-form form label {
  font-family: "Raleway";
  text-transform: uppercase;
}
@-moz-keyframes COLOR_BLINK {
  0%, 15% {
    color: #721b65;
  }
  15%, 25% {
    color: #b80d57;
  }
  25%, 35% {
    color: #f8615a;
  }
  35%, 45% {
    color: #f8615a;
  }
  45%, 50% {
    color: #ffd868;
  }
  50%, 65% {
    color: #f8615a;
  }
  65%, 75% {
    color: #f8615a;
  }
  75%, 80% {
    color: #b80d57;
  }
  80%, 90% {
    color: #721b65;
  }
  90%, 100% {
    color: #222;
  }
}
@-webkit-keyframes COLOR_BLINK {
  0%, 15% {
    color: #721b65;
  }
  15%, 25% {
    color: #b80d57;
  }
  25%, 35% {
    color: #f8615a;
  }
  35%, 45% {
    color: #f8615a;
  }
  45%, 50% {
    color: #ffd868;
  }
  50%, 65% {
    color: #f8615a;
  }
  65%, 75% {
    color: #f8615a;
  }
  75%, 80% {
    color: #b80d57;
  }
  80%, 90% {
    color: #721b65;
  }
  90%, 100% {
    color: #222;
  }
}
@-o-keyframes COLOR_BLINK {
  0%, 15% {
    color: #721b65;
  }
  15%, 25% {
    color: #b80d57;
  }
  25%, 35% {
    color: #f8615a;
  }
  35%, 45% {
    color: #f8615a;
  }
  45%, 50% {
    color: #ffd868;
  }
  50%, 65% {
    color: #f8615a;
  }
  65%, 75% {
    color: #f8615a;
  }
  75%, 80% {
    color: #b80d57;
  }
  80%, 90% {
    color: #721b65;
  }
  90%, 100% {
    color: #222;
  }
}
@keyframes COLOR_BLINK {
  0%, 15% {
    color: #721b65;
  }
  15%, 25% {
    color: #b80d57;
  }
  25%, 35% {
    color: #f8615a;
  }
  35%, 45% {
    color: #f8615a;
  }
  45%, 50% {
    color: #ffd868;
  }
  50%, 65% {
    color: #f8615a;
  }
  65%, 75% {
    color: #f8615a;
  }
  75%, 80% {
    color: #b80d57;
  }
  80%, 90% {
    color: #721b65;
  }
  90%, 100% {
    color: #222;
  }
}