html {background:url("bg.jpg"); width:100%;}

body {
    margin: 0;
    padding: 0;
    width:100%;
    font-size:16px;
}
container {position:relative; top:170px;}
span.focus {background:#E17676; color:#000; height:50px; padding:0px 10px;}
h2 {font-family: 'Playfair Display', serif; margin-left:31%; margin-right:10%; line-height:1.5em; z-index:2; font-weight:400; font-size: 1.3em;}
a {font-family: 'Open Sans', sans-serif; color:#414041; text-decoration:none; font-size:0.8em;}
ul {margin-left:30%; margin-right:14%; line-height:1.5em; text-align:right; list-style:none;}
img {
    position: absolute;
    left: 150px;
    top: -130px;
    z-index: -1;
}

.circle img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

/* Icon Forward */
.hvr-icon-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward:before {
  content: "\f138";
  position: absolute;
  right: 1em;
  padding: 0 1px;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

@media only screen and (max-width: 500px) {
    img {display:none;}
    h2   {margin-left: 5%;
        margin-right: 5%;}
    container {top:20px;}
    span.focus {padding:0px;}
    ul {margin-left:0%; margin-right:0%; text-indent:-10px; line-height:1.5em; text-align:left; list-style:none;}
}

@media only screen
    and (min-device-width: 500px) 
    and (max-device-width : 1024px) {
        h2 {margin-left:4%; width:80%;}
        ul {margin-right:19%;}
        img {    left: 330px;
    top: -210px; width:500px;}
}