/*VARIABLES*/
:root {
  /*COLORS*/
  --color1: #3f86cc;
  --color2: #434b56;
  --color3: #c22846;
  --light1: #ffffff;
  --light2: #f3f3f3;
  --light3: #cacaca;
  --light4: #e9ecef;
  --dark1: #20262f;
  --dark2: #2f3642;
  --dark3: #434d5d;
  --valid: #5cb85c;
  --invalid: #d9534f;
  /* FONTS */
  --font-family: Arial, Helvetica, sans-serif;
  --font-size: 1em;
  --h1: 2em;
  --h2: 1.8em;
  --h3: 1.6em;
  --h4: 1.4em;
  --h5: 1.2em;
  /* margin */
  --gutter: 1.2em;
}

html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  grid-template-columns: 1fr !important;
}

/*DEFAULT CSS STRUCTURE*/
.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  height: 100%;
  overflow: hidden;
}

html {
  font-size: 13px;
}
body {
  background-color: var(--color2) !important;
}
.blocLog {
  position: absolute;
  width: 50%;
  height: 50%;
  min-width: 640px;
  min-height: 370px;
  overflow: hidden;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow: 0px 0px 5px -1px #000000;
  box-shadow: 0px 0px 5px -1px #000000;
  background-color: #eeeeee;
}
.blocLog > img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.blocLog > div {
  width: 100%;
  position: relative;
  padding: var(--gutter);
}
.blocLog > div img {
  object-fit: scale-down;width: 100%;height: 100px;
}
.blocLog h1 {
  text-align: center;font-size: 2.5em;max-width: 300px;margin: auto;color: var(--color2);
}