/* Google CSS */

.google-css-bg {
    background: url('../media/images/s24_start_google-css.jpg') 50% 40% no-repeat;
    height: 600px;
    background-size: cover;
}
#display h4.title {
    padding:10px 10px 10px 50px;
    font-size: 16px;
}
#css-steps {
    position: relative;
}
#css-steps .one,
#css-steps .two{
    margin: 0 0 0 65px;
}
#css-steps .steps p,
#css-steps .steps p {
    margin: 10px 0 0 65px;
}
#css-steps .one::before,
#css-steps .two::before {
    font-family: "Overpass Mono", monospace;
    color:#fff;
    border-radius:100%;
    border:1px dotted #2B2E34;
    box-shadow: 4px 0 0 #83E7FF, inset 4px 0 0 #fff;
    background: #83E7FF;
    width:40px;
    height:40px;
    line-height: 28px;
    padding: 4px 0 0 7px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 20px;
    font-style: normal;
    display:inline-block;
    float:left;
    margin: 3px 0 0 -65px;
}

#css-steps .one::before {
    content:"1.";
}
#css-steps .two::before {
    content:"2.";
}
#css-steps .setup,
#css-steps .service {
    background: #83E7FF;
    font-size: 18px;
    border-radius: 100%;
    color:#0A314C;
    font-style: italic;
    font-weight:400;
    text-align: center;
    width:200px;
    height:200px;
    line-height:200px;
    position: absolute;
}
#css-steps .setup {
    top:-50px;
    right:25%;
}
#css-steps .service {
    top:30px;
    right:3%;
}

/*Mobile*/
/* Extra extra large devices */
@media (min-width:1200px) {
    #css-steps .service {top: 30px;right: 18%;}
    #css-steps .setup {top: -50px;right: 35%;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width:1200px) {
    #css-steps .service {top: 30px;right: 3%;}
    #css-steps .setup {top: -50px;right: 30%;}
}

/* Large devices (desktops, 992px and up) */
@media (max-width:992px) {
    #css-steps .service {top: 30px;right: 3%;}
    #css-steps .setup {top: -50px;right: 28%;}
    #css-steps .setup, #css-steps .service {
        width: 160px;
        height: 160px;
        line-height: 160px;
        font-size: 15px;
    }
    #benefits ul {padding:0;}
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    #css-steps .service {top: 120px;right: 3%;}
    #css-steps .setup {top: -50px;right: 3%;}
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    #benefits ul {padding:0 20px 15px;}
    #css-steps .setup, #css-steps .service {display:none;}
}

/* Smallest devices */
@media (max-width: 400px) {

}