/* ::::: https://www.getyouonline.co.uk/route/reserved/css/style.css ::::: */

@font-face {
  font-family: "Lato";  src: url('lato.eot');}
@font-face {
  font-family: "Lato";  src: url('lato.ttf');}
@font-face {
  font-family: "LatoBold";  src: url('latobold.eot');}
@font-face {
  font-family: "LatoBold";  src: url('latobold.ttf');}
@font-face {
  font-family: "LatoLight";  src: url('latolight.eot');}
@font-face {
  font-family: "LatoLight";  src: url('latolight.ttf');}
@font-face {
  font-family: "ArialRounded";  src: url('arialrounded.eot');}
@font-face {
  font-family: "ArialRounded";  src: url('arialrounded.ttf');}
.left { float: left; }
.right { float: right; }
a { text-decoration: none; color: inherit; }
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; border: 0px none; }
body { background-image: url('bg.jpg'); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-color: rgb(0, 0, 0); font-family: "Lato"; font-size: 11px; line-height: 15px; color: rgb(255, 255, 255); text-align: center; position: relative; }
.container { text-align: center; width: 1100px; height: 370px; top: 50%; left: 50%; background-color: rgb(255, 255, 255); margin-top: -197px; margin-left: -550px; position: absolute; box-sizing: border-box; color: rgb(64, 64, 64); font-size: 13px; }
.container span { background-color: rgb(52, 152, 219); color: rgb(236, 240, 241); padding: 20px; box-sizing: border-box; width: 100%; display: inline-block; font-family: "LatoBold"; font-size: 24px; text-transform: uppercase; line-height: 30px; }
.container b { background-color: rgb(41, 128, 185); color: rgb(255, 255, 255); padding: 10px; box-sizing: border-box; width: 100%; display: inline-block; font-family: "LatoLight"; font-size: 16px; }
.container a img { margin-top: 30px; margin-bottom: 20px; }
.container em { color: rgb(234, 112, 29); margin: 0px 10px; }
.container .services { width: 100%; margin-top: 50px; text-align: center; }
.container .services a { box-sizing: border-box; color: rgb(255, 255, 255); padding: 10px; font-family: "LatoLight"; margin-right: 10px; text-transform: uppercase; }
.container .services a:hover { background-color: rgb(255, 255, 255) !important; }
.container .services a.web-design { background-color: rgb(229, 115, 29); border: 1px solid rgb(229, 115, 29); }
.container .services a.web-design:hover { color: rgb(229, 115, 29); }
.container .services a.ecommerce { background-color: rgb(22, 160, 133); border: 1px solid rgb(22, 160, 133); }
.container .services a.ecommerce:hover { color: rgb(22, 160, 133); }
.container .services a.applications { background-color: rgb(49, 92, 136); border: 1px solid rgb(49, 92, 136); }
.container .services a.applications:hover { color: rgb(49, 92, 136); }
.container .services a.marketing { background-color: rgb(142, 68, 173); border: 1px solid rgb(142, 68, 173); }
.container .services a.marketing:hover { color: rgb(142, 68, 173); }
.container .services a.mobile { background-color: rgb(53, 152, 219); border: 1px solid rgb(53, 152, 219); }
.container .services a.mobile:hover { color: rgb(53, 152, 219); }
.container .services a.graphic { background-color: rgb(252, 169, 39); border: 1px solid rgb(252, 169, 39); }
.container .services a.graphic:hover { color: rgb(252, 169, 39); }
@media screen and (max-width: 1100px) {
  .container { width: 100%; position: static; margin-left: 0px; margin-top: 0px; height: auto; }
  a.website { position: static !important; bottom: 0px; }
  .services { padding: 0px !important; display: inline-block; }
  .services a { display: inline-block; }
  .container .services a { margin-right: 0px; font-size: 12px; }
}
@media screen and (max-width: 925px) {
  .services a { width: 40%; margin-bottom: 10px; font-size: 13px; }
}
@media screen and (max-width: 925px) {
  .services a { width: 40%; margin-bottom: 10px; }
}
@media screen and (max-width: 470px) {
  .services a { width: 100%; margin-bottom: 10px; font-size: 14px !important; }
  .services a.mobile { width: 100%; }
  .container a img { width: 100%; }
  .container a.website { text-align: center; }
  .container span i { display: none; }
}