news

source/css/featureSection.css

+
+.feature_grid {
+	overflow: hidden;
+	margin: 0;
+	width: 100%;
+	list-style: none;
+	text-align: center;
+	background-color: #373d41;
+}
+
+.feature_container{
+	background-color: #fff;
+}
+
+/* Common style */
+.feature_grid figure {
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	display: inline-block;
+	overflow: hidden;
+	margin: -0.135em;
+	background: #3085a3;
+	text-align: center;
+	cursor: pointer;
+}
+
+.feature_grid figure img {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	min-height: 100%;
+	height:394px;
+	opacity: 0.8;
+}
+
+.feature_grid figure figcaption {
+	box-sizing: border-box;
+	padding: 2em;
+	color: #fff;
+	font-size: 1.25em;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+
+.feature_grid figure figcaption::before,
+.feature_grid figure figcaption::after {
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.feature_grid figure figcaption,
+.feature_grid figure a {
+	box-sizing: border-box;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+/* Anchor will cover the whole item by default */
+/* For some effects it will show as a button */
+.feature_grid figure a {
+	box-sizing: border-box;
+	/*z-index: 1000;*/
+	text-indent: 200%;
+	/*white-space: nowrap;*/
+	font-size: 0;
+	opacity: 0;
+}
+
+.feature_grid figure h2 {
+	box-sizing: border-box;
+	word-spacing: -0.15em;
+	color:#fff;
+	
+	font-weight: 300;
+}
+
+.feature_grid figure h2 span {
+	box-sizing: border-box;
+	font-weight: 800;
+}
+
+.feature_grid figure h2,
+.feature_grid figure p {
+	
+	margin: 0;
+}
+
+.feature_grid figure p {
+
+	letter-spacing: 1px;
+	font-size: 68.5%;
+	color: #fff;
+}
+
+
+
+/* Individual effects */
+
+/*---------------*/
+/***** Ruby *****/
+/*---------------*/
+
+figure.effect-ruby {
+	background-color: #373d41;
+}
+
+figure.effect-ruby img {
+	opacity: 0.6;
+	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+	transition: opacity 0.35s, transform 0.35s;
+	-webkit-transform: scale(1.15);
+	transform: scale(1.15);
+}
+
+figure.effect-ruby:hover img {
+	opacity: 0.3;
+	-webkit-transform: scale(1.0);
+	transform: scale(1.0);
+}
+
+figure.effect-ruby h2 {
+	margin-top: 20%;
+	padding-bottom: 10px;
+	-webkit-transition: -webkit-transform 0.35s;
+	transition: transform 0.35s;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+
+figure.effect-ruby:hover h2 {
+	-webkit-transform: translate3d(0,-150px,0);
+	transform: translate3d(0,-150px,0);
+}
+
+figure.effect-ruby h2::after {
+	position: absolute;
+	text-align: center;
+	bottom: 0;
+	left: 0;
+	width: 50%;
+	height: 3px;
+	margin-left: 25%;
+	background: #fff;
+	content: '';
+}
+
+
+figure.effect-ruby h3 {
+	margin-top: 10%;
+	padding-bottom: 10px;
+	-webkit-transition: -webkit-transform 0.35s;
+	transition: transform 0.35s;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+figure.effect-ruby h3.feature_content {
+	font-weight: 20;
+}
+
+figure.effect-ruby:hover h3 {
+	-webkit-transform: translate3d(0,-100px,0);
+	transform: translate3d(0,-100px,0);
+}
+
+figure.effect-ruby p.checkDetail {
+	text-align: center;
+	margin: 2em 0 0 0;
+	opacity: 0;
+
+	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+	transition: opacity 0.35s, transform 0.35s;
+	-webkit-transform: translate3d(0,0,0) scale(1.1);
+	transform: translate3d(0,0,0) scale(1.1);
+} 
+
+figure.effect-ruby:hover p.checkDetail {
+	opacity: 1;
+	-webkit-transform: translate3d(0,-80px,0) scale(1);
+	transform: translate3d(0,-80px,0) scale(1);
+}
+
+.plink{
+
+	padding: 3px;
+	font-size: 130%;
+	border: 1px solid #ffffff;
+	border-radius: 3px;
+
+}
+
+/*020D31*/
\ No newline at end of file

source/css/style2.css

@@ -225,7 +225,7 @@ div.videopreview{
 	}
 
 h2.l1{
-	text-align:center;
+	text-align: center;
 	font-family: 'open_sansbold';
 	font-size:36px;
 	color:#fff;
@@ -407,7 +407,8 @@ a.button2:hover{
 
 /*============== Features Section =================*/
 .feature_section{
-	float:left;
+	/*//float:left;*/
+	margin-top: 200px;
 	width:100%;
 	background:#f8f8fa;
 	padding:80px 0 80px 0;
@@ -430,12 +431,12 @@ a.button2:hover{
 	}
 	
 .feature_section h2{
-	text-align:left;
+	text-align:center;
 	font-family: 'open_sansregular';
 	font-size:30px;
 	color:#333;
 	font-weight:normal;
-	margin:0 0 30px 0;
+	margin:30px 0 30px 0;
 	padding:0 0 0 0;
 	}
 	
@@ -499,6 +500,23 @@ a.button2:hover{
 	background:url(images/icons/i5.png) no-repeat left top;
 	}
 
+.feature_row{
+
+	background-color: #000000;
+
+}
+
+.feature_container{
+	width: 100%;
+}
+
+.feature_cart{
+	filter:blur(1px);
+	-webkit-filter:blur(1px);
+	-moz-filter:blur(1px);
+	-ms-filter:blur(1px);
+	-o-filter:blur(1px);
+}
 
 a.button3{
 	float:left;
@@ -939,7 +957,15 @@ form.hpform input[type="text"]:focus, form.hpform input[type="email"]:focus, for
 	border:1px solid #187cc2;
 	}
 
-/*============== Pricing Table =================*/
+.sectionTitle{
+	box-sizing: content-box;
+	background-color: #fff;
+/*	margin: 50px;*/
+	padding-top: 50px;
+	text-align: center;
+}
+	
+/*============== ubscribe_section Table =================*/
 .subscribe_section{
 	float:left;
 	width:100%;