body {
background-image:url('images/landing-background.png');
background-color:#fff;
margin:0px auto !important;
background-repeat:repeat;
text-align:center;
}

div#logo-holder {
text-align:center;
margin-left:-110px;
margin-top:20px;
}

div#circles {
width:700px;
margin:50px auto 150px;
text-align:center;
}

div#circle1, div#circle2 {
width:250px;
height:250px;
background-image:url('images/circle-1-dark.png');
background-size:100%;
display:inline-block;
}

div#circle1 > a, div#circle2 > a {
width:250px;
height:250px;
display:block;
}

div#circle2 {
background-image:url('images/circle-2-dark.png');
}

div#circle1:hover {
background-image:url('images/circle-1-color.png');
cursor:pointer;
}

div#circle2:hover {
background-image:url('images/circle-2-color.png');
cursor:pointer;
}

/* RESPONSIVE PART */

@media screen and (max-width:1100px) {
div#circle1, div#circle2 {
width:180px;
height:180px;
}
div#circle1 a, div#circle2 a {
width:180px;
height:180px;
}
div#circles {
margin:50px auto 130px;
}
}

@media screen and (max-width:860px) {
div#circles {
margin:60px auto 130px;
}
}

@media screen and (max-width:700px) {
div#circle1, div#circle2 {
width:150px;
height:150px;
}
div#circle1 a, div#circle2 a {
width:150px;
height:150px;
}
div#circles {
margin:130px auto 120px;
width:350px;
}
}

@media screen and (max-width:660px) {
div#circles {
margin:60px auto 140px;
}
}

@media screen and (max-width:610px) {
div#circle1, div#circle2 {
width:120px;
height:120px;
}
div#circle1 a, div#circle2 a {
width:120px;
height:120px;
}
div#circles {
margin:50px auto 100px;
width:350px;
}
}