CSS for Front Page Widgets in Business Theme

css-front-page-widgets-business-theme.css

/* Change the Position of the Header */
.site-header {
    position: inherit;
}

/* Define Width of the Site-inner */
.site-inner, .wrap {
    margin: 0 auto;
    max-width: 1280px;
}

/* Define Width of Hero Section */
.featured-background-1 .wrap {
    max-width: 1150px;
    padding-top: 100px;
}

/* Define Contents of Hero Section */
.featured-background-1, .featured-background-3 {
    background-color: #000;
    text-align: center;
}

/* Define Title of Hero Section */
.featured-background-1 .widget-title, .featured-background-3 .widget-title {
    font-size: 74px;
    font-size: 7.4rem;
    font-weight: 900;
		color: #fff;
}


/* Define Excerpt of Hero Section */
.hero-content {
    font-size: 30px;
    font-size: 3.0rem;
    font-style: italic;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
		color: #fff;
}

/* Define Button of Hero Section */
.hero-content .button {
    background: transparent;
    border: 2px solid #fff;
    font-style: initial;
    text-transform: uppercase;
    font-size: 13px;
}

.hero-content .button:hover {
    background: #c3251d;
}

/* Define Title of Pricing Section */
.featured-background-2 .widget-title, .featured-background-4 .widget-title {
    font-size: 60px;
    font-size: 6rem;
    font-weight: 900;
    text-align: center;
}

/* Define Padding of Pricing Section */
.featured-background-2 {
    padding-bottom: 90px;
    padding-top: 90px;
		background: #eee;
}

/* Define Excerpt of Pricing Section */
.blog-excerpt {
    font-size: 30px;
    font-size: 3.0rem;
    font-style: italic;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
}


/* Define Table of Pricing Section */
.basic {
    border: 1px solid #ccc;
    background: white;
    text-align: center;
    padding: 45px 0 45px 0;
    margin-bottom: 5px;
}

.classic-text-widget {
    font-size: 20px;
    font-size: 2.0rem;
    font-style: italic;
    text-align: center;
}

.basic .price {
    font-size: 90px;
    font-style: normal;
}

.basic .sign {
    font-size: 30px;
    color: #999;
    margin-right: 10px;
}

.basic li::after {
    border-bottom: 1px dotted #ddd;
    content: "";
    display: block;
    margin: 0 auto 30px;
    padding-bottom: 10px;
    width: 10%;
}

/* Define Background of Featured Servics Section */
.featured-background-3 {
	padding-top: 90px;
	
}

.team-info {
    color: #fff;
    font-style: normal;
}

/* Define Background of Featured Blog Section */
.featured-background-4 {
	padding-top: 90px;
}

.featured-content .entry-image {
    height: inherit;
    width: inherit;
}

.featured-content .entry-title {
    font-size: 23px;
    font-size: 2.3rem;
    font-weight: 900;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0 25px 25px;
}

.featured-content .entry {
    background: #fff;
}

/* Define Background of Hero Featured Image on Posts */
.post-hero {
    padding-top: 13rem;
    padding-bottom: 13rem;
    background-size: cover;
    background-position: center;
    position: relative;
}

.post-hero .entry-meta {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.post-hero .entry-title {
    width: 100%;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    font-size: 50px;
    font-size: 5.0rem;
}

.post-hero .excerpts {
    color: #fff;
    font-size: 30px;
    font-size: 3.0rem;
    font-style: italic;
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
}

/* Define Grid Styles in Blog Archives */
body {
	background-color: #eee;
}

.blog .entry, .archive .entry {
    background: #fff;
}

.blog .entry-meta, .archive .entry-meta {
    margin-bottom: 20px;
    font-size: 14px;
    font-size: 1.4rem;
}

.blog .entry-title, .archive .entry-title {
    font-size: 20px;
    line-height: 29px;
}

.blog .entry-content, .archive .entry-content {
    padding: 30px;
    padding: 3rem;
    font-size: 17px;
    font-size: 1.7rem;
}

/* -------------------- IPAD VIEW CSS -------------------- */

@media only screen and (max-width: 1023px) {

.wrap {
    padding-left: 5%;
    padding-right: 5%;
}
	
	.featured-background-1 .widget-title, 
.featured-background-3 .widget-title,
.featured-background-2 .widget-title, 
.featured-background-4 .widget-title {
    font-size: 54px;
    font-size: 5.4rem;
}

.hero-content, .blog-excerpt  {
    font-size: 26px;
    font-size: 2.6rem;
    margin-left: 150px;
    margin-right: 150px;
}


/* MOBILE REPONSVIE WIDETS CSS */

.featured-background-1 .wrap {    
    padding-top: 45px;
}
    
.featured-background-2 {
    padding-top: 45px;
    padding-bottom: 45px;
}


/* MOBILE REPONSVIE HERO IMAGE CSS */
.post-hero .wrap {
    max-width: 85%;
}

.post-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-position: inherit;
}

.post-hero .entry-meta {
    margin-top: 20px;
    font-size: 13px;
    font-size: 1.3rem;
}

.post-hero .entry-title {
    font-size: 28px;
    font-size: 2.8rem;
    padding-bottom: 20px;
}

.post-hero .excerpts {
    font-size: 20px;
    font-size: 2.0rem;
    margin-left: inherit;
    margin-right: inherit;
    line-height: 25px;
}
}

/* -------------------- PHABLET VIEW CSS -------------------- */

@media only screen and (max-width: 860px) {

.featured-background-1 .widget-title, 
.featured-background-3 .widget-title,
.featured-background-2 .widget-title, 
.featured-background-4 .widget-title {
    font-size: 29px;
    font-size: 2.9rem;
}

.hero-content, .blog-excerpt {
    font-size: 19px;
    font-size: 1.9rem;
    margin-left: inherit;
    margin-right: inherit;
}

    .basic .price {
    font-size: 45px;
}

.basic .sign {
    font-size: 15px;
}

}