@-webkit-keyframes circleleft {
  0%   { -webkit-transform: translatex(150px); transform: translatex(150px); }
}

@keyframes circleleft {
  0%   { -webkit-transform: translatex(150px); transform: translatex(150px); }
}

@-webkit-keyframes circleright {
  0%   { -webkit-transform: translatex(-150px); transform: translatex(-150px); }
}

@keyframes circleright {
  0%   { -webkit-transform: translatex(-150px); transform: translatex(-150px); }
}

body:after {
    -webkit-filter: blur(10px);
    filter: blur(10px) background-position:center;
}

.circle-container {
    max-width: 500px;
}

.circles {
    width: 425px;
    margin-top: 50px;
}

.circle {
    border-radius: 200px;
    background: #000;
    border: 4px solid #FFF;
    display: block;
    float: left;
}

.circles>img {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    width: 175px;
    margin: 0 auto;
}

.circle.small {
    background: #e60016;
    height: 125px;
    width: 125px;
    margin-top: 20px;
    position: absolute;
    z-index: 100;
}

.circle.small.left {
    left: 60px;
    -webkit-animation: circleleft 1.5s ease-in-out;
            animation: circleleft 1.5s ease-in-out;
}

.circle.small.right {
    right: 60px;
    -webkit-animation: circleright 1.5s ease-in-out;
            animation: circleright 1.5s ease-in-out;
}

.circle.large {
    height: 175px;
    width: 175px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 200;
    position: absolute;
    background-size: cover;
    background-color: #fff;
}

span.first,span.sub {
    display: block;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
}

span.first {
    font-size: 40px;
    color: #FFF;
    line-height: 49px;
    text-align: center;
    margin-top: 15px;
}

span.sub {
    font-size: 18px;
    color: #FFF;
    line-height: 23px;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
    opacity: .7;
    text-align: center;
}

.main-body {
    background-color: #fff;
    margin-top: 80px;
    padding: 100px 15px 15px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.29);
    text-align: center;
}

.secondary {
	margin-top: 15px;
	padding: 15px;
}

.secondary ul {
	text-align: left;
	margin-bottom: 0px;
	color: #4a4a4a;
}

.secondary h2 {
	padding: 0px;
}

h1 {
    font-size: 30px;
    color: #4a4a4a;
}

h2 {
    font-size: 24px;
    color: #e80018;
    padding: 10px 0;
}

p {
    color: #9b9b9b;
    font-weight: 400;
}

a {
    color: #e80018;
    text-decoration: underline;
}

p,a {
    font-size: 18px;
}

a.white {
    color: #fff;
    text-align: center;
    width: 100%;
    display: block;
}

.download {
    display: block;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    width: 45%;
    margin: 2.5%;
    padding: 20px;
    float: left;
    text-decoration: none;
    font-weight: 400;
    text-align: right;
}

.download.ios {
    background: #FFF;
    background-image: url(/arc/blood/img/ios-icon.png),linear-gradient(-179deg,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
    background-position: left center;
    background-repeat: no-repeat;
}

.download.android {
    background: #FFF;
    background-image: url(/arc/blood/img/android-icon.png),linear-gradient(-179deg,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
    background-position: left center;
    background-repeat: no-repeat;
}

.name {
    width: 240px;
    color: #fff;
    padding: 20px;
}

.app-name {
    display: block;
    font-size: 24px;
    font-weight: 200;
    line-height: 30px;
}

.sub-name {
    display: block;
    font-size: 18px;
}

@media all and (max-width: 600px) {

        /* Animations */

    @-webkit-keyframes circleleft {
      0%   { -webkit-transform: translatex(100px); transform: translatex(100px); }
    }

    @keyframes circleleft {
      0%   { -webkit-transform: translatex(100px); transform: translatex(100px); }
    }

    @-webkit-keyframes circleright {
      0%   { -webkit-transform: translatex(-100px); transform: translatex(-100px); }
    }

    @keyframes circleright {
      0%   { -webkit-transform: translatex(-100px); transform: translatex(-100px); }
    }


    .name {
        text-align: center;
        margin:0 auto;
    }

    .circles {
        margin-top:10px;
        zoom: 0.8;
    }

    .circle.small.left {
        left:20px;
        margin-top: 25px;
    }

    .circle.small.right {
        right: 20px;
        margin-top: 25px;
    }


    .circle-container {
        max-width: 350px;
    }

    .download {
        width:96%;
        text-align: center;
    }

    .download:first-child {
        margin-top:20px;
    }

    .white {
        margin-top:20px;
        float: left;
        padding-bottom: 20px;
    }

    .main-body {
        margin: 80px 2.5% 0px 2.5%;
        width: 95%;
    }
}