* {
        box-sizing: border-box;
}
body {
        margin: 0;
        background: #eaedf1;
        font-family: 'Lato', sans-serif;
}
.header {
        background: white;
        padding: 30px;
        text-align: center;
}
.header h1 {
        font-weight: 400;
        display: inline;
}
h2 {
        color: #89867e;
        text-align: center;
        font-weight: 300;
}
/*.color {
        text-align: center;
        width: 100%;
        margin: 0 auto;
}
.color div {                            
        width: 60px;                    
        height: 60px;                   
        display: inline-block;          
        border-radius: 100%;            
}*/
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 1.1rem 1.25rem 1rem;
  background-color: white;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.125) !important;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
} 

.icon-green {
  float: right;
  top: 4px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1 12c0-6.07513 4.92487-11 11-11 6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11zm16.2803-2.71967c.2929-.29289.2929-.76777 0-1.06066s-.7677-.29289-1.0606 0l-5.9697 5.96963-2.46967-2.4696c-.29289-.2929-.76777-.2929-1.06066 0s-.29289.7677 0 1.0606l3 3c.29293.2929.76773.2929 1.06063 0z' fill='%2328a745'/%3E%3C/svg%3e")
}

.icon-green:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
}

.bg-green {
  background-color: #28a745;
}

.icon-orange {
  float: right;
  top: 4px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 286.054 286.054' style='enable-background:new 0 0 286.054 286.054;' xml:space='preserve'%3E%3Cpath style='fill:%23E2574C;' d='M143.027,0C64.04,0,0,64.04,0,143.027c0,78.996,64.04,143.027,143.027,143.027 c78.996,0,143.027-64.022,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236 c-64.183,0-116.209-52.026-116.209-116.209S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209 S207.21,259.236,143.027,259.236z M143.036,62.726c-10.244,0-17.995,5.346-17.995,13.981v79.201c0,8.644,7.75,13.972,17.995,13.972 c9.994,0,17.995-5.551,17.995-13.972V76.707C161.03,68.277,153.03,62.726,143.036,62.726z M143.036,187.723 c-9.842,0-17.852,8.01-17.852,17.86c0,9.833,8.01,17.843,17.852,17.843s17.843-8.01,17.843-17.843 C160.878,195.732,152.878,187.723,143.036,187.723z'/%3E%3C/svg%3E");
}

.icon-orange:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
}

.bg-orange {
  background-color: #f2c91e;
}

.icon-red {
  float: right;
  top: 4px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23E9020B' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E")
}

.icon-red:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
}                                      

.bg-red {
  background-color: #e2574c;
}

@media only screen and (max-width: 320px){
.color div {                              
        /*margin: 100px 15px 0 0;*/       
        width: 45px;                      
        height: 45px;                     
        display: inline-block;            
        border-radius: 100%;              
}                                         
}                                         
.color .red    {background: #fa5a5a;}     
.color .yellow {background: #f0d264;}     
.color .green  {background: #82c8a0;}     
.color .cyan   {background: #7fccde;}     
.color .blue   {background: #6698cb;}     
.color .purple {background: #cb99c5;} 

.content {                                
  position: relative;                     
  margin: 10px auto;                      
  width: 100%;                            
  max-width: 670px;                       
}                                         
                                          
.signbar {                              
  margin: 20px auto;                      
  border-radius: 4px;               
  text-align: center;
  max-width: 670px;          
  padding: 1px;                           
  color: white;
}         

.container {
  margin: 20px auto; 
  border-radius: 4px;      
  text-align: center;
  padding: 1px;
  background-color: white;
}                                
                                          
.container h2 {                           
        font-weight: 600;                 
}