body {
	font-family: 'Open Sans', sans-serif;
	color: #ccc;
	text-align: center;
	margin: 0;
  background: #EBF2F3;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

img {
	max-width: 100%;
	margin: auto;
}

.header,
.demos,
.footer {
    padding: 5%;
}

.header {
  border-bottom: solid 1px #CCC;
  background: #FFF;
  color: #FFA500
}

.header > h1 {
  margin: 0;
  font-size: 70px;
}

.header > p {
  font-weight: normal;
}

.footer {
    padding: 3% 5%;
    border-top: solid 1px #ccc;
    background: #fff;
    color: #5D5D5D;
}

.footer a {
  color: #5D5D5D;
}

.btn {
    display: block;
    color: #FFF !important;
    padding: 15px;
    border: solid 1px #FFA500;
    background: #FFA500;
    width: 110px;
    margin: 22px auto 40px;
}

.btn:hover {
    color: #FFA500 !important;
    background: #FFF;
}

.row:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.col > a {
    padding: 5%;
    display: block;
    margin-bottom: 30px;
}

.col > a > h2 {
    margin-top: 0;
    color: #039BE5;
    font-weight: 400;
}

.col > a > p {
    color: #FFF;
    padding: 15px;
    border: solid 1px #42A1C7;
    background: #42A1C7;
    width: 110px;
    margin: 22px auto 0;
}

.col > a > p:hover {
    background: #FFF;
    color: #42A1C7;
}

.col > a:hover {
    box-shadow: 0 0 0 1px #42A1C7;
}

@media screen and (min-width: 1366px) {
  .demos {
    width: 1200px;
    margin: auto;
  }
}

@media screen and (min-width: 668px) {
.col {
	width: 50%;
	float: left;
}
.col.center {
  margin: auto;
  float: none;
} 
}