<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container center white-bg">
<!-- HEADER CONTAINS ONLY THE NAVBAR -->
<header class="header-navbar-parent white-bg shadow-2">
<div class="header-navbar marged flex-center-v">
<div class="logo">
<img src="http://bizi.nanoagency.co/wp-content/uploads/2017/05/logo.png" alt="">
</div>
<nav>
<ul class="flex">
<li><a href="#">HOME</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">SINGLE</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true" id="search"></i></a></li>
</ul>
</nav>
</div><!-- marged div -->
</header>
<!-- MAIN HAS ALL THE ARTICLES AT THE FIRST PAGE -->
<main class="grey-bg">
<div class="all-articles-container marged">
<section class="main-articles-cards-parent white-txt">
<div class="main-articles-row-1 flex blue-b">
<!-- Main Articles: CARD 01 (Big)-->
<article class="main-articles-cards-lg main-articles-card-1 shadow-3 white-bg blue-b">
<div class="btn-categories-main mb-20">
<span class="btn-categories-sm orange-bg white-txt">Categ.01</span>
<span class="btn-categories-sm orange-bg white-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="main-articles-title mb-20 green-b">
<h2><a href="blog-post-1.html" target="_blank">Chia Pudding with Blueberries</a></h2>
</div>
<!--DETAILS part -->
<div class="latest-articles-details purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 01 -->
<!-- MAIN Articles: CARD 02 (Small)-->
<article class="main-articles-cards-sm main-articles-card-2 shadow-3 white-bg blue-b">
<div class="btn-categories-main mb-20">
<span class="btn-categories-sm orange-bg white-txt">Categ.01</span>
<span class="btn-categories-sm orange-bg white-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h2>Lemony Spaghetti with Peas and Ricotta</h2>
</div>
<!--DETAILS part -->
<div class="latest-articles-details purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.main-article-CARDS -->
<!-- END OF CARD 02 (main articles) -->
</div><!--- END OF ROW 1 - mnain articles -->
<!-- Beggining of the Row 2 -->
<div class="main-articles-row-2 flex blue-b">
<!-- MAIN Articles: CARD 03 (Small)-->
<article class="main-articles-cards-sm main-articles-card-3 shadow-3 white-bg blue-b">
<div class="btn-categories-main mb-20">
<span class="btn-categories-sm orange-bg white-txt">Categ.01</span>
<span class="btn-categories-sm orange-bg white-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h2>Easy Lemon Pudding</h2>
</div>
<!--DETAILS part -->
<div class="latest-articles-details purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.main-article-CARDS (card 03) -->
<!-- Main Articles: CARD 04 (Big)-->
<article class="main-articles-cards-lg main-articles-card-4 shadow-3 white-bg blue-b">
<div class="btn-categories-main mb-20">
<span class="btn-categories-sm orange-bg white-txt">Categ.01</span>
<span class="btn-categories-sm orange-bg white-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="main-articles-title mb-20 green-b white-txt">
<h2>Chicken Breasts with Mustard Cream</h2>
</div>
<!--DETAILS part -->
<div class="latest-articles-details purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.main-article-CARDS (card 04)-->
<!-- END OF CARD 01 -->
<!-- END OF CARD 02 (main articles) -->
</div><!--- END OF ROW 2 - mnain articles -->
<!-- end of Row 2 -->
</section><!-- ./end of class="main-articles" -->
<!-- LATEST ARTICLES AREA -->
<section class="latest-articles-parent yellow-b">
<header class="flex-center-v mb-50">
<h2>Latest Articles</h2><br>
<div class="categories blue-b flex">
<a href="#"><div class="btn-categorie-md orange-txt white-bg shadow-1">Drinks</div></a>
<a href="#"><div class="btn-categorie-md orange-txt white-bg shadow-1">Foody</div></a>
<a href="#"><div class="btn-categorie-md orange-txt white-bg shadow-1">Health</div></a>
</div>
</header>
<!-- LATEST ARTICLES - ARTICLES CARDS -->
<div class="latest-articles-cards-parent mb-50 flex red-b">
<!-- Latest Articles: CARD 01 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-1 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 01</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 01 -->
<!-- Latest Articles: CARD 02 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-2 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 02</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 02 -->
<!-- Latest Articles: CARD 03 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-3 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 03</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 03 -->
<!-- Latest Articles: CARD 04 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-4 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 04</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 04 -->
<!-- Latest Articles: CARD 05 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-5 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 05</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 05 -->
<!-- Latest Articles: CARD 06 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-6 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article 06</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 06 -->
<!-- Latest Articles: CARD 07 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-7 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 07</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 07 -->
<!-- Latest Articles: CARD 08 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-8 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 08</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 08 -->
<!-- Latest Articles: CARD 09 -->
<article class="latest-articles-cards shadow-3 white-bg blue-b">
<!-- image and inside categorie btn -->
<div class="latest-art-img-9 latest-articles-img mb-20 yellow-b">
<span class="btn-categories-sm white-bg orange-txt">Categ.01</span>
<span class="btn-categories-sm white-bg orange-txt">Categ.02</span>
</div>
<!-- The article TITLE -->
<div class="latest-articles-title mb-20 green-b">
<h3>Title of the article - 09</h3>
</div>
<!--DETAILS part -->
<div class="latest-articles-details light-grey-txt purple-b">
<span class="post-date">April 24, 2017</span>
<span class="post-views"><i class="fa fa-eye" aria-hidden="true"></i><span class="post-views-data"> 259</span></span>
<span class="post-comments"><i class="fa fa-comment-o" aria-hidden="true"></i><span class="post-comments-data"> 4</span></span>
</div>
</article><!--end of /.latest-article-CARDS -->
<!-- END OF CARD 09 -->
</div><!--end of /.latest-articles-parent -->
<!-- LOAD MORE BTN -->
<div class="load-more black-b txt-center"><a href="#">... LOAD MORE ...</a></div>
</section>
</div><!-- end of articles parent -->
</main>
<!-- NEWSLETTER BANNER -->
<section class="newsletter-section grey-bg">
<div class="grey-bg marged">
<div class="newsletter-parent ">
<div class="newsletter-txt marged txt-center"><h3>Sign Up get a free copy</h3>
<span class="subtitle-16px light-grey-txt">Join our newsletter and get a free copy of our 7 days of smoothies ebook</span>
</div>
<div class="newsletter-form flex-center-h black-b">
<form class="flex-center-h red-b marged" action="get">
<div class="email-hp blue-b"><input class="your-email" type="text" placeholder="Your email address">
</div>
<div class="btn-newsletter flex orange-txt yellow-b">
<a href="#"><button class="orange-txt">Subscribe</button></a>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- FOLLOW INSTAGRAM (CALL TO ACTION) -->
<section>
<div class="follow-instagram center flex-col-center flex light-grey-txt black-b">
<a href="#"><i class="fa fa-instagram fa-lg mb-10" aria-hidden="true"></i></a>
<span class="font-14">Follow @Bizi Blog</span>
</div>
</section>
<!-- GALLERY -->
<section class="gallery flex red-b">
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20582560_1956001284668839_4145503645279977472_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/20634176_1893828177604784_1239268652407062528_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/c236.0.607.607/20582686_112327882760920_3492436430355955712_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/c157.0.406.406/20583259_178801652661848_8768600592948920320_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/c157.0.406.406/20582367_331443590631954_9217799411277496320_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/c236.0.607.607/20634098_493361737682398_4225775445875884032_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/c157.0.406.406/20482265_1502726186461529_4316950871356211200_n.jpg" alt=""></a></div>
<div class="gallery-item"><a href="#"><img src="https://scontent.cdninstagram.com/t51.2885-15/s150x150/e15/20589360_1969727933310800_1514814289326637056_n.jpg" alt=""></a></div>
</section>
<!-- FOOTER -->
<footer class="blue-b">
<div class="footer-area marged flex black-b">
<div class="legal blue-b"><span class="light-grey-txt">@ All Right Reserved 2017 </span><a href="#" class="bizi-hover"><strong>Bizi Theme</strong></a></div>
<div class="footer-social-media yellow-b">
<ul class="flex">
<li><a href="#"><i class="facebook fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="g-plus fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="twitter fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="instagram fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="pinterest fa fa-pinterest" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</footer>
</div><!-- end of container -->
*{
margin: 0;
padding: 0;
}
body{
background-color: grey;
color: #48494D;
font-family: 'Roboto', sans-serif;
}
/* FONT SIZES */
.subtitle-16px{
font-size: 16px;
}
.font-14{
font-size:14px;
}
/* POSITION */
.center{
margin: 0 auto;
}
.txt-center{
text-align: center;
}
.flex,
.flex-center-h,
.flex-center-v,
.flex-center,
.flex-col-center{
display: flex;
}
.flex-center-h,
.flex-center,
.flex-col-center{
justify-content: center;
}
.flex-center-v,
.flex-center,
.flex-col-center{
align-items: center;
}
.flex-col-center{
flex-direction: column;
}
.mb-10{
margin-bottom: 10px;
}
.mb-20{
margin-bottom: 20px;
}
.mb-50{
margin-bottom: 50px;
}
.mb-100{
margin-bottom: 100px;
}
.marged{
width: 75%;
max-width: 1100px;
margin: 0 auto;
}
/* COLORS */
.dark-bg{
background-color: #2C3E50;
}
.dark-txt{
color: #2C3E50;
}
.grey-bg {
background-color: #F6F7FB;
}
.grey-txt {
color:#757575;
}
.light-grey-txt{
color: #757575;
}
.white-bg{
background-color: #fff;
}
.white-txt{
color: #fff;
}
.orange-txt{
color: #f25c2c;
}
.orange-bg{
background-color: #f25c2c;
}
.shadow-1{
box-shadow: -2px 2px 5px rgba(60,60,60,0.1);
}
.shadow-2{
box-shadow: -1px 1px 1px rgba(0,0,0,0.7);
}
.shadow-3{
box-shadow: 0 0 10px rgba(80,80,80,0.1);
}
/* BORDER GUIDES ONLY - DELETE WHEN FINISHED
.blue-b{
border: 4px outset blue;
}
.red-b{
border: 4px outset red;
}
.green-b{
border: 4px outset green;
}
.yellow-b{
border: 4px outset yellow;
}
.black-b{
border: 4px outset black;
}
.purple-b{
border: 4px outset purple;
}
.orange-b{
border: 4px outset purple;
}
*/
/* GENERAL STRUCTURE */
.container{
}
/* Inherit Style Links */
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
/* NAV BAR AREA */
header{
}
.header-navbar-parent{
box-shadow: 0 1px 3px rgba(80, 80, 80, 0.2);
position: relative;
}
.header-navbar{
height: 100px;
justify-content: space-between;
}
.header-navbar ul{
color: #545454;
list-style: none;
font-weight: 500;
}
.header-navbar ul li a{
text-decoration: none;
color: inherit;
margin: 0 1.2em;
letter-spacing: 2px;
}
.header-navbar ul li a:hover{
color: #F25C2C;
}
#search{
font-weight: normal;
margin-left: 2.2em;
}
/* ARTICLES AREA */
.all-articles-container{
padding-top: 30px;
}
.main-articles-cards-parent{
justify-content: space-between;
margin: 0 -15px;
}
.main-articles-cards-lg{
width: 75%;
}
.main-articles-cards-sm{
width: 25%;
}
.main-articles-card-1{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/05/cecilia-par-102886-1.jpg");
}
.main-articles-card-2{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/pawel-rekas-26742.jpg");
}
.main-articles-card-3{
background-image:url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/erol-ahmed-214590-1.jpg");
}
.main-articles-card-4{
background-image:url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/toa-heftiba-250949-1.jpg");
}
.main-articles-cards-lg,
.main-articles-cards-sm{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 300px;
padding: 30px;
margin: 0 15px;
margin-bottom: 30px;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-shadow: 0 0 27px rgba(0,0,0,0.5);
}
/* LATEST ARTICLES AREA */
.latest-articles-parent{
padding-top: 30px;
}
.latest-articles-parent header{
justify-content: space-between;
align-items: baseline;
}
.btn-categorie-md{
padding: 5px 20px;
font-size: 14px;
margin-left: 20px;
border-radius: 15px;
}
/* CARDS - (LATEST ARTICLES ONES) */
.latest-articles-cards-parent{
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -15px;
}
.latest-articles-cards{
width: 25%;
padding: 30px;
margin: 0 15px;
margin-bottom: 30px;
border-radius: 5px;
}
/* image */
.latest-art-img-1{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/05/cecilia-par-102886-1-380x260.jpg");
}
.latest-art-img-2{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/pawel-rekas-26742.jpg");
}
.latest-art-img-3{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/erol-ahmed-214590-1.jpg");
}
.latest-art-img-4{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/toa-heftiba-250949-1-380x260.jpg");
}
.latest-art-img-5{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/nikolai-chernichenko-660801-1-380x260.jpg");
}
.latest-art-img-6{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/toa-heftiba-84804-380x260.jpg");
}
.latest-art-img-7{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/erik-lundqvist-219023-380x260.jpg");
}
.latest-art-img-8{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/elli-o-33653-380x260.jpg");
}
.latest-art-img-9{
background-image: url("http://bizi.nanoagency.co/wp-content/uploads/2017/04/carissa-gan-66379-380x260.jpg");
}
.latest-articles-img{
height: 200px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 10px;
border-radius: 5px;
}
.latest-articles-img img{
width: 100%;
height: auto;
}
.btn-categories-sm{
font-size: 9px;
font-weight: 300;
letter-spacing: .5px;
padding: 5px 10px;
border-radius: 10px;
}
.latest-articles-details{
font-size: 12px;
}
.post-date{
margin-right: 10px;
}
.post-views{
margin-right: 5px;
}
/* the "load more" btn */
.load-more{
color: #282828;
letter-spacing: 5px;
padding: 40px 0;
}
.load-more a:hover{
color: #f25c2c;
}
/* NEWSLETTER AREA */
.newsletter-section{
padding: 70px 0;
}
.newsletter-parent{
background-image: url(http://bizi.nanoagency.co/wp-content/uploads/2017/04/newletter-1.jpg?id=454);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.newsletter-parent h3{
margin: 20px 0;
}
.newsletter-form{
padding: 20px 0;
}
.newsletter-form form{
width: 500px;
}
.email-hp,
.btn-newsletter{
background-color: white;
padding: 15px 20px;
}
.email-hp input,
.btn-newsletter button{
background-color: transparent;
border: none;
}
.email-hp{
width: 80%;
border-radius: 30px 0 0 30px;
}
.btn-newsletter{
width: 20%;
border-radius: 0 30px 30px 0;
margin: 0;
}
.btn-newsletter button{
letter-spacing: 3px;
}
/* FOLLOW INSTAGRAM
CALL TO ACTION */
.follow-instagram{
height: 30px;
padding: 30px 0;
}
.follow-instagram i{
color:#f25c2c;
}
/* GALLERY AREA */
.gallery{
flex: 1;
flex-wrap: wrap;
}
.gallery-item{
flex: 1;
height: auto;
}
.gallery-item img{
width: 100%;
height: auto;
}
/* FOOTER AREA */
footer{
height: 30px;
padding: 30px 0;
}
.footer-area{
justify-content: space-between;
}
.footer-social-media ul li{
margin: 0 0 0 1.6em;
}
.facebook{
color:#3b5998;
}
.g-plus{
color:#dd4b39;
}
.twitter{
color: #00aced;
}
.instagram{
color:#D13FAE;
}
.pinterest{
color:#cb2027;
}
/* footer hovers */
.bizi-hover:hover{
color:#f25c2c;
}
.footer-social-media i:hover,
.follow-instagram i:hover{
transition: all .2s ease-in-out;
transform: scale(1.1)
}
/* MEDIA QUERIES */
@media only screen and (max-width: 1419px) {
.latest-articles-cards{
width: 40%;
}
}
@media only screen and (max-width: 1177px) {
.latest-articles-cards{
width: 100%;
}
.latest-articles-img{
height: 400px;
}
.main-articles-cards-lg,
.main-articles-cards-sm{
width: 100%;
}
.main-articles-row-1,
.main-articles-row-2{
flex-wrap: wrap
}
}
