h2.ss-subtitle{ padding: 10px 10px 40px; font-size: 24px; text-transform: uppercase; color: rgba(0,0,0,0.8); position: relative; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); } h2.ss-subtitle:before{ width: 4px; height: 40px; background: rgba(17,17,22,0.8); content: ''; position: absolute; right: 75%; margin-right: -4px; bottom: -4px; -moz-border-radius: 2px 2px 0px 0px; -webkit-border-radius: 2px 2px 0px 0px; border-radius: 2px 2px 0px 0px; } h2.ss-subtitle:after{ width: 25%; height: 0px; border-bottom: 4px dotted rgba(17,17,22,0.8); content: ''; position: absolute; right: 50%; margin-right: -1px; bottom: -4px; } .ss-links{ position: fixed; left: 10px; top: 166px; width: 25%; z-index: 100; } .ss-links a{ background: rgba(0,0,0,0.2); font-size: 16px; width: 40px; height: 40px; line-height: 40px; margin: 5px; float: left; border-radius: 50%; display: block; text-align: center; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; -ms-transition: background 0.2s linear; transition: background 0.2s linear; } .ss-links a:hover{ background: rgba(0,0,0,0.4); } .ss-container{ width: 100%; position: relative; text-align: left; float: left; overflow: hidden; padding-bottom: 500px; } .ss-container h2{ font-size: 40px; text-transform: uppercase; color: rgba(78,84,123,0.2); text-shadow: 0px 1px 1px #fff; padding: 20px 0px; } .ss-container:before{ position: absolute; width: 4px; background: rgba(17,17,22,0.8); top: 0px; left: 50%; margin-left: -2px; content: ''; height: 100%; } .ss-row{ width: 100%; clear: both; float: left; position: relative; padding: 30px 0; } .ss-left, .ss-right{ float: left; width: 48%; position: relative; } .ss-right{ padding-left: 2%; } .ss-left{ text-align: right; float: left; padding-right: 2%; } .ss-circle{ border-radius: 50%; overflow: hidden; display: block; text-indent: -9000px; text-align: left; -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 12px rgba(61,64,85,0.3); -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 12px rgba(61,64,85,0.3); box-shadow: 0px 2px 5px rgba(0,0,0,0.7) inset, 0px 0px 0px 12px rgba(61,64,85,0.3); background-size: cover; background-color: #f0f0f0; background-repeat: no-repeat; background-position: center center; position: static; } .ss-small .ss-circle{ width: 100px; height: 100px; } .ss-medium .ss-circle{ width: 200px; height: 200px; } .ss-large .ss-circle{ width: 300px; height: 300px; } .ss-circle-deco:before{ width: 29%; height: 0px; border-bottom: 5px dotted #ddd; border-bottom: 5px dotted rgba(17, 17, 22, 0.3); -webkit-box-shadow: 0px 1px 1px #fff; -moz-box-shadow: 0px 1px 1px #fff; box-shadow: 0px 1px 1px #fff; position: absolute; top: 50%; content: ''; margin-top: -3px; } .ss-circle-deco:after{ width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; content: ''; position: absolute; top: 50%; margin-top: -10px; } .ss-left .ss-circle-deco:before{ right: 2%; } .ss-right .ss-circle-deco:before{ left: 2%; } .ss-left .ss-circle-deco:after{ right: 0; border-right: 10px solid rgba(17,17,22,0.8); } .ss-right .ss-circle-deco:after{ left: 0; border-left: 10px solid rgba(17,17,22,0.8); } .ss-left .ss-circle{ float: right; margin-right: 30%; } .ss-right .ss-circle{ float: left; margin-left: 30%; } .ss-container h3{ margin-top: 34px; padding: 10px 15px; background: rgba(26, 27, 33, 0.6); text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8) } .ss-container .ss-medium h3{ margin-top: 82px; } .ss-container .ss-large h3{ margin-top: 133px; } .ss-container .ss-left h3{ border-right: 5px solid rgba(164,166,181,0.8); } .ss-container .ss-right h3{ border-left: 5px solid rgba(164,166,181,0.8); } .ss-container h3 span{ color: rgba(255,255,255,0.8); font-size: 13px; display: block; padding-bottom: 5px; } .ss-container h3 a{ font-size: 20px; color: rgba(255,255,255,0.9); display: block; } .ss-container h3 a:hover{ color: rgba(255,255,255,1); } .ss-circle-1{ background-image:url(../images/check.png); } .ss-circle-2{ background-image: url(../images/2.jpg); } .ss-circle-3{ background-image: url(../images/3.jpg); } .ss-circle-4{ background-image: url(../images/4.jpg); } .ss-circle-5{ background-image: url(../images/5.jpg); } .ss-circle-6{ background-image: url(../images/6.jpg); } .ss-circle-7{ background-image: url(../images/7.jpg); } .ss-circle-8{ background-image: url(../images/8.jpg); } .ss-circle-9{ background-image: url(../images/9.jpg); } .ss-circle-10{ background-image: url(../images/10.jpg); } .ss-circle-11{ background-image: url(../images/11.jpg); } .ss-circle-12{ background-image: url(../images/12.jpg); } .ss-circle-13{ background-image: url(../images/13.jpg); } .ss-circle-14{ background-image: url(../images/14.jpg); } .ss-circle-15{ background-image: url(../images/15.jpg); } .ss-circle-16{ background-image: url(../images/16.jpg); } .ss-circle-17{ background-image: url(../images/17.jpg); } .ss-circle-18{ background-image: url(../images/18.jpg); } .ss-circle-19{ background-image: url(../images/19.jpg); } .ss-circle-20{ background-image: url(../images/20.jpg); } .ss-circle-21{ background-image: url(../images/21.jpg); } .ss-circle-22{ background-image: url(../images/22.jpg); } .ss-circle-23{ background-image: url(../images/23.jpg); } .ss-circle-24{ background-image: url(../images/24.jpg); } .ss-circle-25{ background-image: url(../images/25.jpg); } .ss-circle-26{ background-image: url(../images/26.jpg); } .ss-circle-27{ background-image: url(../images/27.jpg); } .ss-circle-28{ background-image: url(../images/28.jpg); } .ss-circle-29{ background-image: url(../images/29.jpg); } .ss-circle-30{ background-image: url(../images/30.jpg); }