*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  font-size: 0.85em;
  color: black;
}

p + ul {
    margin-top: -1.5em;
}

hr.event { 
  height: 25px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
  width: 70%;
} 
hr.event:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

.controls{
  padding: 2%;
  background: white;
  color: black;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #00283a;;
  border: 0;
  color: white;
  font-size: .95em;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1%;
}

button.active{
  background: #6f9600;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.containerMixin{
  padding: 2% 2% 0;
  text-align: justify;
  background: #6f9600;
  -webkit-backface-visibility: hidden;
}

.containerMixin .mix{
  text-align: left;
  background: white;
  margin-bottom: 2%;
  padding-left: 10%;
  padding-bottom: 5%;
  display: none;
}

.ics-text {
   text-align: left;
   vertical-align: middle;
   color: white;
   font-size: 0.95em;
   line-height: 1.5em;
   padding-left: 15%;
   padding-right:15%;
   padding-bottom: 2%;
}
.iCalendar {
     vertical-align: middle;
   color: black;
   font-size: 0.95em;
   line-height: 1.5em;
}
.iCalendar img {
   float: left;
   text-align: center;
}

.iCalendar a:link {
color:#0000FF;
}

.iCalendar a:visited {
color:#800080;
}

.iCalendar a:active {
color:#FF0000;
}

@media all and (min-width: 420px){
  .containerMixin .mix,
  .containerMixin .gap{
    width: 80%;
    margin-left:10%;
    margin-right: 10%;
  }
}

@media all and (min-width: 640px){
  .containerMixin .mix,
  .containerMixin .gap{
    width: 80%;
     margin-left:10%;
    margin-right: 10%;
  }
}