/*** COLORS ***/
/*** DEMO ***/
html,
body {
height: 100%;
margin: 0;
}
body {
background: #913D88;
font: 13px monospace;
color: #FFFFFF;
}
p {
margin-top: 30px;
}
.cntr {
display: table;
width: 100%;
height: 100%;
}
.cntr .cntr-innr {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*** STYLES ***/
.search {
display: inline-block;
position: relative;
height: 35px;
width: 35px;
box-sizing: border-box;
margin: 0px 8px 7px 0px;
padding: 7px 9px 0px 9px;
border: 3px solid #FFFFFF;
border-radius: 25px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
cursor: text;
}
.search:after {
content: "";
position: absolute;
width: 3px;
height: 20px;
right: -5px;
top: 21px;
background: #FFFFFF;
border-radius: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.search.active,
.search:hover {
width: 200px;
margin-right: 0px;
}
.search.active:after,
.search:hover:after {
height: 0px;
}
.search input {
width: 100%;
border: none;
box-sizing: border-box;
font-family: Helvetica;
font-size: 15px;
color: inherit;
background: transparent;
outline-width: 0px;
}

.no-ready {
   color: white;
   background-color: none;
}

.ready {
   color: black;
   background-color: white;
}

.flex-container {
  display: flex;
  
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

.flex-container > div {
  margin: 8px;
  padding: 8px;
}

.flex-container > div > a{
  color: black;
  font-size: 14px;
}

.white-text {
  color: white;
  margin: 8px;
  padding: 8px;
}

.white-text > a {
  color: white;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .flex-container {
     max-width: 90%;
   }
}