@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
html,
body {
  padding: 0px;
  margin: 0px;
  font-family: "Raleway", sans-serif;
  color: #333;
  font-size: 16px;
}

.logo {
  position: absolute;
  font-size: 1.6rem;
  line-height: 3rem;
  padding: 10px 4rem;
}
.logo span {
  position: fixed;
  display: inline-block;
  top: 10px;
  left: 10px;
  color: #008da0;
  background-color: #fff;
  width: 3rem;
  height: 3rem;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #008da0;
}

.btn {
  border: 1px solid #fff;
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 0 0.3rem;
  border-radius: 0.2rem;
  text-decoration: none;
}

.home {
  min-height: 500px;
  height: 100vh;
  padding: 4rem 4rem;
  box-sizing: border-box;
  background: #00c1db;
  background: -moz-radial-gradient(center, ellipse cover, #00c1db 0%, #008da0 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #00c1db 0%, #008da0 100%);
  background: radial-gradient(ellipse at center, #00c1db 0%, #008da0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00c1db", endColorstr="#008da0", GradientType=1 );
  display: flex;
  flex-direction: column;
}
.home .welcome {
  margin: auto;
  width: 100%;
  text-align: center;
  color: #fff;
}
.home .welcome h1 {
  border-bottom: 2px dotted #fff;
  margin: 0 0 2rem 0;
  padding: 0 0 2rem 0;
  font-size: 3rem;
}

.services {
  padding: 4rem 4rem;
}
.services h2 {
  color: #008da0;
}
.services > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.services .service-block {
  width: 30%;
  min-width: 280px;
  margin: 1.5%;
  box-sizing: border-box;
}
.services .service-block h3 {
  color: #008da0;
  text-align: center;
}
.services .service-block .service-img {
  background-color: #ccc;
  height: 150px;
}


.pen-box {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjU3QTRBQUI2OTA1MTFFNDkwOTFENUQyMzA3MTQzODMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjU3QTRBQUM2OTA1MTFFNDkwOTFENUQyMzA3MTQzODMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NTdBNEFBOTY5MDUxMUU0OTA5MUQ1RDIzMDcxNDM4MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NTdBNEFBQTY5MDUxMUU0OTA5MUQ1RDIzMDcxNDM4MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvhzG8UAAAAySURBVHjaYjz86FMaAwLMspHlBTOYGHAAFnSBI48/wyVmIYnDjWUCmQkzFxngtAMgwACAtAhzrNNqnQAAAABJRU5ErkJggg==);
  border: 1px solid #c9dbe6;
  margin: 0 0 16px;
  padding: 0;
}

.pen-box .pen-box,
.pen-box-minimum .pen-box {
  margin: 0;
}
.pen-box p,
.pen-box-minimum p{
  margin: 6px;
}
.pen-box p:last-child {
  margin-bottom: 0;
}
hr.pen {
  border-top-color: #c9dbe6;
  margin: 6px 0;
}
hr.pen-tall {
  border-top-color: #c9dbe6;
  margin: 24px 0;
}