/*Service Option 1*/ #service_1{ margin-top: 70px; margin-bottom: 115px; } #service_1 .section_header h3 span, #service_2 .section_header h3 span{ font-size: 18px; line-height: 20px; } #service_1 .service_wrapper .feature{ margin-right: 0px; } #service_1 .service_wrapper .last{ margin-right: 0; } #service_1 .service_wrapper .feature .text{ margin: 23px auto 0; width: 92%; } #service_1 .service_wrapper .feature .text h6{ color: #3F3F3F; margin: 0 0 14px 0; font-size: 20px; } #service_1 .service_wrapper .feature .text p{ margin: 0; font-size: 14px; line-height: 22px; } #service_1 .service_wrapper .feature .img_box{ position: relative; border-radius: 5px; } #service_1 .service_wrapper .feature .img_box img { border-radius: 6px; position: relative; } #service_1 .service_wrapper .feature .img_box span.circle{ background: rgba(17, 137, 217, 0.8); width: 48px; height: 48px; display: none; text-align: center; position: absolute; top: 37%; left: 43%; border-radius: 100%; } #service_1 .service_wrapper .feature .img_box span.circle span.plus{ display: inline-block; margin-top: 13px; font-weight: bold; color: white; font-size: 32px; } #service_1 .service_wrapper .feature:hover span.circle{ display: block; } #service_1 .service_wrapper .feature:hover .img_box{ box-shadow: 0px 0px 1px 100px black inset; } #service_1 .service_wrapper .feature:hover img{ box-shadow: 1px 1px 6px 0px #888; border-radius: 5px; opacity: 0.9; filter:alpha(opacity=90); } /*Service Option 2*/ #service_2{ margin: 40px 0 115px; } #service_2 .perk{ margin-bottom: 82px; margin-left: 0; } #service_2 .circle{ background: #1189D9; text-align: center; border-radius: 100%; margin: 14px 0 0 0; width: 136px; height: 136px; box-shadow: 1px 1px 2px 0px #E0E0E0; } #service_2 .circle img{ margin-top: 42px; } #service_2 .circle1 img{ margin-top:49px; } #service_2 .description_wrapper{ float: right; } #service_2 .description_wrapper h5{ font-size: 20px; margin: 5px 0 10px 0; } #service_2 .description_wrapper p{ font-size: 14px; line-height: 24px; color: #3F3F3F; margin-bottom: 0; } #service_2 .last{ margin-bottom: 0; } /*Service Option 3*/ #process{ min-height: 350px; } #process .section_header h3{ margin:0; } #process .description{ position: relative; } #process .description .text{ position: absolute; display: none; } #process .description .text.active { display: block; } #process .description h4{ font-size: 32px; line-height: 35px; font-weight: normal; margin-bottom: 20px; } #process .description p{ font-size: 15px; color: #3F3F3F; line-height: 26px; } #process .areas{ margin-left: 0; float: right; } #process .areas .circle{ height: 210px; cursor: pointer; float: left; margin-right: -45px; text-align: center; width: 210px; background: rgba(37, 37, 40, 0.9); border-radius: 100%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } #process .areas .first{ margin-left: 0; } #process .areas .circle img{ margin-top: 56px; } #process .areas .circle span{ font-weight: 700; font-size: 22px; color: #fff; display: block; margin-top: 21px; } #process .areas .circle:hover, #process .areas .circle.active { background: rgba(17, 137, 217, 1); } /* Responsive -------------------------------------------------- */ /* Large desktop */ @media (min-width: 1200px) { } @media (min-width: 980px) { } @media (max-width: 979px) { } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { #service_2 .description_wrapper{ width: 77%; } #process .areas{ text-align: center; } #team .people .bio_box .info{ margin: 0; float: none; } #process .areas .last_circle{ float: none; display: inline-block; margin-left: -75px; margin-top: -54px; } } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { #service_1 .service_wrapper .feature .img_box{ text-align: center; } #service_1 .service_wrapper .feature:hover .img_box{ box-shadow: none; } #service_1 .service_wrapper .feature{ text-align: center; margin-bottom: 60px; } #service_2 .perk{ text-align: center; margin-bottom: 70px; } #service_2 .circle{ float: none; margin-bottom: 20px; display: inline-block; } #service_2 .description_wrapper h5{ margin-bottom: 15px; } #process .areas{ margin-top: 193px; margin-bottom: 0px; text-align: center; } #process .areas .circle{ float: none; display: inline-block; margin: 0; } #process .areas .last_circle{ margin-top: -23px; } } /* Landscape phones and down */ @media (max-width: 480px) { #service_1 .service_wrapper .feature .img_box{ width: 100%; } #service_1 .service_wrapper .feature .text p{ text-align: left; } #process .areas{ margin-top: 250px; } #process .areas .circle{ width: 100px; height: 100px; } #process .areas .last_circle{ margin-top: 0; } #process .areas .circle img{ margin-top: 22px; } #process .areas .circle span{ display: none; } }