Teira Naahi

Wednesday, December 7, 2016

Merging and Customizing Blogger and Mobirise Templates


This is a very basic outline yet is for intermediate to advanced Template Designers.

The following assumes you have a good knowledge of XML Scripted templates and Mobirise HTML Scripted blocks. It also assumes you have some form of web hosting to be able to store and serve your Mobirise CSS Scripts, Java Scripts and Template Images.

Owing to the large number of requests from Mobirise users as to how i made my Custom Blogger Template with Mobirise Blocks i believe it quicker if i provide the complete Blogger XML template file i created and used upon this site you are now visiting reading this. 

Basic steps for creating this Blogger XML template are as follows:-

1. Customize a blogger XML template to work as a bootstrap template. *you can buy these now.
2. Create a Mobirise version of your template.
3. Extract Mobirise html blocks from the created Mobirise html file and insert them into your Blogger XML template and remove any Blogger XML Sections you do not want to use.
4. Upload Mobirise CSS, Java Script and Images to your web hosting.
5.Upolad Blogger XML Template to Blogger.

Study my Blogger XML Template below to see how it is all put together. Blogger sections are highlighted in the color Aqua and Mobirise sections are highlighted in the color Yellow. Where you need to change a URL to match your own web hosted content is highlighted in the color Purple. 

****////******<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <data:blog.pageName/>
          |
          <data:blog.title/>
          <b:else/>
          Page Not Found |
          <data:blog.title/>
        </b:if>
      </b:if>
    </title>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <meta content='noindex,noarchive' name='robots'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>
      <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
   
/** CSS FILES**/
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/et-line-font-plugin/style.css' rel='stylesheet'/>
  <link href='//YOUR URL HERE /assets/bootstrap-material-design-font/css/material.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/tether/tether.min.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/bootstrap/css/bootstrap.min.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE/assets/socicon/css/socicon.min.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/animate.css/animate.min.css' rel='stylesheet'/>
<link href='//YOUR URL HERE/assets/mobirise/css/style.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/theme/css/style.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE/assets/mobirise-gallery/style.css' rel='stylesheet'/>
    <link href='//YOUR URL HERE /assets/wowslider-init/style.css' rel='stylesheet'/>
  <link href='//YOUR URL HERE/assets/mobirise/css/mbr-additional.css' rel='stylesheet' type='text/css'/>
    <link href='//YOUR URL HERE /assets/wowslider-init/absent/style.css' rel='stylesheet'/>

/**JAVA SCRIPT FILES**/
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'/>
                <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js' type='text/javascript'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js'/>
          
/*******TEMPLATE by TEIRA NAAHI ©2015-2016TNHLtd.*******/

<b:skin><![CDATA[
/*****************************************
reset.css
******************************************/
html, body {
width: 100%;
height: 100%!important;
}
body {
font-family: "Raleway",sans-serif;
font-size: 14px;
color: #222222;
-webkit-font-smoothing: antialiased;
background-color: #F5F5F5;
}
a {
color: #222222;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
}
a:hover {
color: #1ABC9C;
text-decoration:none;
}
a:focus {
outline: none;
color: #1ABC9C;
}
p {
line-height: 24px;
letter-spacing: 0px;
font-size: 14px;
color: #888;
}
.post-body p, .post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6, .post-body hr {
margin-bottom:20px;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
color:#000;
font-weight:700;
}
.post-body h1 {
font-size:30px;
}
.post-body h2 {
font-size:27px;
}
.post-body h3 {
font-size:24px;
}
.post-body h4 {
font-size:20px;
}
.post-body h5 {
font-size:18px;
}
.post-body h6 {
font-size:16px;
}
.post-body hr {
border:0;
height:0;
border-bottom:1px solid #e5e5e5;
clear:both;
}
/*****************************************
Global Links CSS
******************************************/
.clr{
clear:both;
float:none;
}
/*PAGE LOADER*/
#loader {
background: #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 9999;
}
#loaderInner {
background:#ffffff url(http://linewp.com/bold/assets/images/load.gif) center center no-repeat;
height: 60px;
left: 50%;
position: absolute;
top: 50%;
width: 60px;
}
/*****************************************
Wrappers
******************************************/
.ct-wrapper{
padding:0px 20px;
position:relative;
max-width:1230px;
margin:0 auto;
}
.main-wrapper{
width:100%;
}
/**** Layout Styling CSS *****/
body#layout #loader{
display:none;
}
body#layout #header, body#layout .header-right{
width:50%;
}
body#layout .outer-wrapper, body#layout .ct-wrapper{
margin:0;
padding:0;
}
body#layout .footer.section{
float:left;
width:33%;
}
body#layout .editlink{
z-index: 999999;
}
body#layout #footer{
position:relative;
z-index:99999999999999;
}
body#layout .introHeader{
padding-top: 0%;
min-height:0;
}
body#layout .introHeading{
z-index: 99999999999;
position: relative;
}
/*****************************************
Other
******************************************/
blockquote {
font-style: italic;
font-size: 16px;
margin: 2em 0;
padding: 2.3em 1.5em;
background: #f9f9f9;
border-left: 15px solid #1ABC9C;
border-radius: 5px;
box-shadow: 11px 10px 0px #ECECEC;
}
pre{
background: #444 no-repeat right;
color: #FFFFFF;
padding: 3.5em 3em;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
box-shadow: 11px 10px 0px #383838;
border: 0;
border-radius: 0;
}
code{
font-family:"Courier New",monospace;
font-size:12px;
background:#eee;
color:#333;
}
.post-footer{
border-top: 1px solid #ddd;
padding: 30px 30px;
margin-top: 30px;
margin-right: -30px;
margin-left: -30px;
background-color: #f9f9f9;
}
/*****************************************
Headerbar, Navigation
******************************************/
.content-wrap {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.content:: before {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
/* Menu Button */
.menu-button {
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 1000;
                padding: 0;
                width: 60px;
                height: 60px;
                font-size: 21px;
                border: 0;
                outline: 0;
                color: #ffffff;
                background: #0a0a0a;
}
/* Menu Button */
.menu-button {
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 1000;
                padding: 0;
                width: 60px;
                height: 60px;
                font-size: 21px;
                border: 0;
                outline: 0;
                color: #ffffff;
                background: #0a0a0a;
}
/* Menu */
.menu-wrap {
                position: fixed;
                z-index: 999;
                background: #0a0a0a;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                width: 240px;
                padding: 20px 20px 10px 20px;
                text-align: left;
                top:70px;
                left: 10px;
                opacity: 0;
                display: none;
}
.menu {
                height: 100%;
                opacity: 0;
                color:##fff111;
                text-align: left;
}
.menu-nav {-webkit-padding-start: 0px;-moz-padding-start:0px;}
.menu-nav li {list-style: none;}
.menu-nav li a {
                color: #ffffff;
                line-height: 40px;
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 4px;
                padding: 5px;
                text-decoration: none;
}
.menu-nav li.active a {
                border-bottom: 2px solid #fff;
                color: #fff;
}
 /* Shown menu */
.show-menu .content::before {opacity: 1;}
.show-menu .menu-wrap {opacity: 1;display: block;}
.show-menu .menu {opacity: 1;}
/* Every Section Titles
-------------------------------------------------*/
.sectionTitle {
text-align: center;
padding-top: 75px;
padding-bottom: 25px;
}
.sectionTitle h1 {
font-family: "Montserrat",sans-serif;
letter-spacing: 1px;
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
margin-bottom: 10px;
}
.sectionTitle h4 {
font-family: "Montserrat",sans-serif;
letter-spacing: 1px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
padding-bottom: 0px;
margin-bottom: 10px;
color: #444;
}
.sectionTitle .separatorlinecolor {
margin-bottom: 30px;
}
.sectionTitle hr{
width: 20px;
margin: 40px auto;
height: 1px !important;
color: #777;
background-color: #777;
}
.separatorlinecolor {
width: 75px;
height: 2px;
margin: 0 auto;
background: #1ABC9C;
}
.separatorlinewhite {
width: 100px;
height: 2px;
margin: 0 auto;
background: #ffffff;
}
a.scroll-down {
position: absolute;
bottom: 9em;
text-align: center;
margin: 0 auto;
display: inline-block;
left: 48%;
}
a.scroll-down div {
font-size: 30px;
color: #1ABC9C;
transition: .2s transform;
}
a.scroll-down div:hover {
transform: scale(1.2);
}
/*Section About
-------------------------------------------------*/
#sectionAbout {
                background: #FAFAFA;
                padding-bottom: 75px;
}

.aboutMe {
                padding: 10px 40px;
}
.sectionTitle1 {
letter-spacing: 3px;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #1a1a1a;
padding-bottom: 30px;
}
.aboutMe h1 {
                letter-spacing: 3px;
                font-size: 10px;
                font-weight: 400;
                text-transform: uppercase;
                text-align: center;
                color: #777;
                padding-bottom: 30px;
}
.textBlue {
                color: #1ABC9C;
}
.aboutProfile {
                text-align: center;
}
.profileAv {
                border-radius: 25%;
                -webkit-border-radius:25%;
                width: 140px;
                height: 140px;
}
.aboutInfo h3 {
                margin-top: 0px;
                color: #444;
                font-family: "Montserrat",sans-serif;
                text-transform: uppercase;
                font-size: 13px;
                font-weight: 400;
                margin-bottom: 15px;
                letter-spacing: 3px;
}
.profileInfo {
                padding-top: 10px;
                padding-bottom: 12px;
}
.aboutInfo h5 {
                color: #888;
                text-transform: none;
                font-size: 14px;
                letter-spacing: 0px;
                line-height: 20px;
}
.infoSocial li {
                display: inline;
                font-size: 16px;
                margin-left: 6px;
                margin-right: 6px;
                list-style: outside none none;
}
.infoSocial ul {
                padding: 0px;
}
.infoSocial a {
                color: #1ABC9C;
}
.infoSocial a:hover {
                color: #5FD0BA;
}
/*****************************************
Blog Post CSS
******************************************/
 .post{
margin:20px 0 0;
padding:0 3% 20px;
}
.post-title{
text-decoration:none;
font-size:30px;
line-height:normal;
padding:0 0 10px;
font-family: "Montserrat",sans-serif;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 10px;
margin-bottom: 10px;
}
.post-title a{
text-decoration:none;
color:#000;
}
.post-body{
font-size:16px;
font-weight:normal;
padding:0;
margin:0;
line-height:29px;
word-wrap:break-word;
}
.post-header{
color:#999999;
font-family:Verdana,Arial,Tahoma,sans-serif;
font-size:12px;
}
.rmlink a{
font-family:'Source Sans Pro',sans-serif;
background:#292929;
color:#fff;
padding-top:5px;
float:right;
padding-bottom:5px;
padding-left:10px;
/*transition*/
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
padding-right:10px;
text-decoration:none;
font-size:15px;
}
.rmlink a:hover{
background:#2aa4cf;
-decoratio-decoration:none;
}
.home-link{
display:none;
}
#blog-pager-newer-link{
float:right;
text-decoration:none;
background:#000;
font-size:16px;
font-family:sans-serif;
padding:10px;
font-weight:700;
position:relative;
left:-20px;
top:8px;
}
#blog-pager-older-link{
text-decoration:none;
font-size:16px;
font-family:sans-serif;
font-weight:700;
float:left;
background:#000;
padding:10px;
margin-left:20px;
margin-top:8px;
}
#blog-pager-newer-link a{
text-decoration:none;
color:#FFF;
}
#blog-pager-older-link a{
text-decoration:none;
color:#FFF;
}
#blog-pager{
font-size: 16px;
line-height: normal;
width: 100%;
margin: 0;
padding: 60px;
}
.showpageOf{
display:none;
}
.showpageNum a, .showpage a{
margin:0 4px;
}
.showpagePoint{
margin:0 2px 0 0;
}
/*****************************************
Custom Widget CSS
******************************************/
/***** Popular Post *****/
.PopularPosts h2{
padding-right:.4em;
padding-left:0em;
}
.popular-posts ul{
padding-left:0;
counter-reset:sj;
/*setting counter-reset*/
:;
}
.popular-posts ul li{
list-style:none outside none !important;
margin-left:0 !important;
overflow:hidden;
padding:7px 0 !important;
/*transition*/
-webkit-transition:all 0.25s linear 0s;
-moz-transition:all 0.25s linear 0s;
-o-transition:all 0.25s linear 0s;
transition:all 0.25s linear 0s;
counter-increment:sj;
/*setting counter-increment*/
:;
}
.PopularPosts ul li:before{
content:counters(sj, ".");
padding:0 .1em 0 0;
font-size:20px;
font-weight:bold;
color:#C4C4C4;
float:left;
margin-right:10px;
}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet{
display:none!important;
}
/* Hides Thumbnail and Snippet */
.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem;
font-family:sans-serif;
text-decoration:none;
}
#PopularPosts1 li{
padding-right:1em !important;
padding-left:1em !important;
}
/***** Button CSS *****/
.showpageArea a{
text-decoration:underline;
}
.showpageNum a{
background-color: #333;
color: #fff;
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
white-space: nowrap;
margin: 2px;
color: #FFF;
font-size: 14px;
font-family: "Montserrat",sans-serif;
padding: 0 12px;
font-weight: 400;
line-height: 36px;
background: #333;
border: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
}
.showpagePoint:hover , .showpageNum a:hover , .showpage a:hover{
background-color: #1ABC9C;
color: #fff;
}
.showpagePoint{
background-color: #333;
color: #fff;
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
white-space: nowrap;
margin: 2px;
color: #FFF;
font-size: 14px;
font-family: "Montserrat",sans-serif;
padding: 0 12px;
font-weight: 400;
line-height: 36px;
background: #333;
border: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
}
.showpageOf{
text-decoration:none;
padding:3px;
margin:0 3px 0 0;
font-size:15px margin: 0 3px;
}
.showpage a{
background-color: #333;
color: #fff;
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
white-space: nowrap;
margin: 2px;
color: #FFF;
font-size: 14px;
font-family: "Montserrat",sans-serif;
padding: 0 12px;
font-weight: 400;
line-height: 36px;
background: #333;
border: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
}
.showpage a:hover{
text-decoration:none;
}
.showpageNum a:link,.showpage a:link{
text-decoration:none;
}
.showpageOf{
display:none;
}
.showpageArea{
padding-bottom:20px;
}
 /*************
Section Specials
************/
#sectionSpecial {
background-color: #ffffff;
background-image: url('');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
height: auto;
width: 100%;
-webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
}
#sectionSpecial1 {
background-color: #ffffff;
background-image: url('');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
height: auto;
width: 100%;
-webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
}
#sectionSpecial2  {
text-align: center;
padding-bottom: 75px;
padding-top: 75px;
background-color: #0a0a0a;
background-image: url();
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
height: auto;
width: 100%;
-webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
}
#sectionSpecial3 {
background-color: #ffffff;
background-image: url('');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
height: auto;
width: 100%;
-webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
}
.sectionSpecial h1 {
font-family: "Montserrat",sans-serif;
color: #ffffff;
font-size: 24px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
margin-bottom: 30px;
}
 /*Section Contact
-------------------------------------------------*/
#sectionContact {
background-color: #ffffff;
background-image: url('//YOUR URL HERE');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
height: auto;
width: 100%;
-webkit-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
box-shadow: inset 0px -9px 33px -5px rgba(0,0,0,0.2);
}
.contactForm {margin: 0 0 50px 0;}
.contactForm h1 {
letter-spacing: 5px;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding-bottom: 30px;
color: #777;
}
.contactFooter {
background-color: #0a0a0a;
padding: 40px 0 30px 0;
color: #fff;
}
.footerLeft {
font-size: 13px;
font-weight: 400;
color: #fff;
padding-top: 5px;
}
.footerLeft a{
color: #1ABC9C;
}
.footerRight {
text-align: right;
font-size: 16px;
}
.footerRight a{
color: #777;
padding: 0 10px;
}
.footerRight a:hover {
color: #fff;
}
.contactRight {
padding-left: 5%;
}
.contactBox .icon {
color: #1ABC9C;
font-size: 25px;
}
.contactBox {
margin: 15px 0 30px;
}
.contactBox h3 {
margin-top: 2px;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
letter-spacing: 3px;
}
section#sectionContact .form-group {
margin-bottom: 25px;
}
section#sectionContact .form-group input,
section#sectionContact .form-group textarea {
padding: 15px;
border: 1px solid #CCCCCC;
color: #555;
border-radius: 0;
font-size: 12px;
background-color: fff;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
section#sectionContact .form-group input.form-control {
height: auto;
}
#ContactForm1_contact-form-email-message{
min-height:155px;
max-width: 540px;
}
section#sectionContact .form-control:focus {
border-color: #13B0A5;
box-shadow: none;
}
section#sectionContact::-webkit-input-placeholder {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #999;
}
section#sectionContact:-moz-placeholder {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #999;
}
section#sectionContact::-moz-placeholder {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #999;
}
section#sectionContact:-ms-input-placeholder {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #999;
}
section#sectionContact .text-danger {
color: #1ABC9C;
}
section#sectionContact ul {
padding-left: 14px;
}
section#sectionContact .form-text {
color: #BFBFBF;
margin-top: 50px;
}
section#sectionContact .form-text i {
color: #fff;
padding-right: 15px;
}
section#sectionContact .form-text h4 {
color: #fff;
border-bottom: 3px solid #13b0a5;
display: inline-block;
padding-bottom: 10px;
margin-bottom: 16px;
}
/* ====GENERAL FORM STYLES==== */
input, textarea, select {
color: #222;
background: transparent;
vertical-align: top;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
border: 0;
border: 1px solid #ccc;
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
}
input:focus, textarea:focus, select:focus {
outline: none;
position: relative;
z-index: 5;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #1ABC9C;
}
input.submit {
width: auto;
cursor: pointer;
position: relative;
background: transparent;
color: #ffffff;
border-radius: 50px;
padding: 15px 30px;
border: 0;
background: #1ABC9C;
margin: 20px 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
font-family: "Montserrat",sans-serif;
font-weight: 400;
letter-spacing: 2px;
}
input.submit:hover, .input.submit:focus, .input.submit:active {
background-color: #15967D;
}
#contactform button[type="submit"][disabled] { background:#777; cursor: default; }
#contactform div {margin: 20px 0;}
.contactForm fieldset { padding:0;border:0; }
.contactForm label {
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
.contact-form-error-message-with-border {
background: #1ABC9C;
bottom: 0;
color: #FFF;
font-size: 11px;
font-weight: bold;
border-radius: 30px;
line-height: 31px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
border: 1px solid #12A286;
box-shadow: 0 0 0;
}
/* 10. Buttons & Modals
-------------------------------------------------*/
.btn{
background: rgb(26, 188, 156);
color: #fff;
}
.button {
border:0;
outline: 0;
overflow:hidden;
z-index: 1;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.button-medium {
padding: 10px 14px;
}
.button-color {
background: #1ABC9C;
text-transform: uppercase;
font-size: 11px;
}
.button-color a {
color: #ffffff;
letter-spacing: 1px;
}
.modal-box {
max-width: 550px;
background: #fff;
position: relative;
margin: 0 auto;
}
.modal-box img {
width: 100%;
height: 100%;
}
.modal-box-content {
padding: 25px;
}
.modal-box-content h2 {
text-transform: uppercase;
font-size: 17px;
font-weight: 400;
letter-spacing: 2px;
}
.modal-box-content p {
color: #777777;
line-height: 24px;
letter-spacing: 0px;
font-size: 14px;
}
/*****************************************
Comments CSS
******************************************/
#comments{
background:#FFF;
padding:20px;
position:relative;
border-top:1px solid #ddd;
}
#comments h4{
font-size: 25px;
color: #414141;
margin: 0;
font-family: "Montserrat",sans-serif;
}
.comments ol li:before{
content:counters(sj,".");
font-size:3.5rem;
color:rgba(0,0,0,0.16);
right:.3em;
position:absolute;
text-shadow:1px 1px 1px #FFF;
padding:.2em 0 0;
}
.comments ol li{
counter-increment:sj;
}
.comments ol{
counter-reset:sj;
}
.comments .comments-content .comment-content{
text-align:justify;
border:1px solid #e1e1e1;
margin-left:-40px;
margin-top:35px;
padding:20px;
border-radius: 5px;
}
.comments .comments-content .comment-header{
width:58%;
position:relative;
margin:10px 0 0;
padding:0 25px;
}
.comments .comments-content .user{
font-style:normal;
font-weight:400;
color:#414141;
font-size:20px;
}
.comments .comments-content .user a{
color:#414141;
}
.comments .comments-content .user.blog-author a{
color:#000000;
text-decoration:none;
font-family:sans-serif;
font-weight:700;
}
span.datetime.secondary-text a{
color:#b9b9b9;
text-decoration:none;
font-variant:small-caps;
}
.comments .comments-content .datetime{
color:#616161;
fontsize:12px;
display:block;
margin:0;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;
text-align:left;
margin:0;
padding:0;
}
.comments .comment .comment-actions a{
text-decoration: none;
text-align: right;
background: #1ABC9C;
padding: 6px 10px!important;
color: #fff;
border-radius: 20px;
}
.comments .continue a{
display:none!important;
}
.comments .avatar-image-container img{
max-width:60px;
max-height:60px;
width:60px;
height:60px;
z-index:1;
float:left;
}
.comments .avatar-image-container{
float:left;
max-height:60px;
height:60px;
overflow:hidden;
width:60px;
max-width:60px;
/*border-radius*/
-webkit-border-radius:240px;
-moz-border-radius:240px;
border-radius:240px;
background:#fff;
margin:0px;
}
.comment .comment-replies .comment{
background: #f5f5f5;
padding: 10px;
border-top: 2px solid #eee;
box-shadow: 10px 10px 0px #ddd;
border-radius: 5px;
margin-bottom: 33px!important;
}
.comments .comments-content .comment-replies .comment,.comments .comments-content .comment-replies .comment:first-child,.comments .comments-content .comment-replies .comment:last-child{
margin:0;
padding:1em;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment:first-child{
padding-top:5px;
padding-bottom:5px;
list-style:none;
position:relative;
}
.comment-thread.inline-thread .comment-content{
background:#fff;
}
span.item-control.blog-admin,.comments .thread-toggle{
display:none;
}
#comments .comment-actions.secondary-text,.comments .comment .comment-actions a:hover{
text-decoration:none;
}
/*****************************************
Hiding Header Date and Feed Links
******************************************/
h2.date-header{
display:none;
}
.post-related {
overflow: hidden;
margin-top: 0px;
border-top: 1px solid #ddd;
padding: 0px 30px 15px;
margin-right: -30px;
margin-left: -30px;
}
.post-box { text-align:center; }
.post-box-title {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 42px;
font-weight: 500;
padding-bottom: 3px;
display: inline-block;
}
.item-related {
width: 263px;
float: left;
margin-right: 25px;
text-align: center;
}
.item-related:last-child { margin-right:0; }
.container.sp_sidebar .item-related{
width:204px;
margin-right:19px;
}
.item-related h3{
margin-top:0;
}
.container.sp_sidebar .item-related:last-child {
margin-right:0;
}
.item-related img {
margin-bottom:6px;
width:100%;
height:auto;
}
.item-related h3 a {
font-size:14px;
text-transform:uppercase;
letter-spacing:2px;
color:#000;
}
.item-related h3 a:hover {
}
.item-related span.date {
font-size:10px;
font-family:"Open Sans", sans-serif;
text-transform:uppercase;
font-style:italic;
color:#999;
}
/*************
Dividers
************/
.divider {
border: 0;
margin: 60px 0;
height: 4px;
border-top: #ddd 1px solid;
border-bottom: #ddd 1px solid;
text-align: center;
position: relative;
clear: both;
}
.divider.half-margins {
margin:30px 0;
}
.divider .fa {
color: #bbb;
background: #f4f5f7; /* same as background color */
text-align: center;
display: inline-block;
height: 50px; line-height: 50px;
text-align: center;
width: 50px;
font-size: 20px;
position: absolute;
top: -25px; left: 50%;
margin: 0 auto 0 -25px;
}
.divider.white .fa { /* for white background color OR white rounded icon */
background: #fff;
color: #333;
}
li.divider {
margin:6px;
}
]]></b:skin>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
        .sjps{
          width: 100%!important;
          padding: 30px;
          padding-top: 0;
          padding-bottom:0;
        }
        .content.section{
          background: #fff;
          border-right: 1px solid #ddd;
          border-left: 1px solid #ddd;
        }
        #blog-pager{display:none;}
      </style>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <style>
          #sectionWorks {
            padding-top: 25px;
            text-align: center;
            background-color: #1a1a1a;
            color: #ffffff;
          }
          #worksGrid {
            display: table;
          }
          .worksItem {
            display: none;
            padding: 0px;
            overflow: hidden;
            height: auto;
            text-align: center;
          }
          .worksItem img {
            width: 100%;
            height: 275px;
            -webkit-transition: all .25s ease-out;
            transition: all .25s ease-out;
            object-fit: cover;
          }
          .worksItem .itemCaption {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            color: #fff!important;
            background: rgba(22,22,22,0.1);
          }
          .worksItem:hover .itemCaption {
            background: rgba(22,22,22,0.9);
          }
          .itemCaption h3 {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 400;
            word-spacing: 4px;
            letter-spacing: 1px;
          }
          .capContent {
            padding-top: 15%;
            opacity: 0;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
          }
          .capPreview {
            color: #1ABC9C;
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 3px;
            border: 2px solid #1ABC9C;
            padding: 5px;
            margin-top: 10px;
          }
          .capPreview:hover {
            background: #1abc9c;
            color: #fff;
          }
          .worksItem:hover .capContent{
            opacity: 1;
            padding-top:20%;
          }
          .post-title a{
            text-decoration: none;
            color: #FFF;
            padding: 0px 18px;
            text-align: center;
          }
          .post-footer , .post-related{display:none;}
        </style>
      </b:if>
    </b:if>
    <script type='text/javascript'>
      /*<![CDATA[*/
      // JavaScript Document
      function rm(id) {
        var p = document.getElementById(id);
        imgtag = "";
        img = p.getElementsByTagName("img");
        if (img.length >= 1) imgtag = '<img src="' + img[0].src + '" />';
        else imgtag = '';
        p.innerHTML = imgtag + '<div class="itemCaption"><div class="capContent"><h3 class="post-title entry-title" itemprop="name"><a href="' + y + '">' + x + '</a></h3><a class="capPreview image-modal" href="' + y + '">Read More</a></div></div>'
      }
      jQuery(window).load(function() {
        jQuery("#loaderInner").fadeOut();
        jQuery("#loader").delay(400).fadeOut("slow");
      });
      /*]]>*/</script>
    <script>
      $(window).ready(function() { 
        $(&quot;.connect-icons a&quot;).hover(function(){
          $(&quot;.text-&quot;+ this.className).toggleClass(&quot;show&quot;);
        });
      });
    </script>
    <script>
      //<![CDATA[
      var classicMode = false ;
      var summary = 50;
      var indent = 4;
      var relatedTitles = new Array();
      var relatedTitlesNum = 0;
      var relatedUrls = new Array();
      var thumburl = new Array();
      function related_results_labels_thumbs(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          relatedTitles[relatedTitlesNum] = entry.title.$t;
          try
          {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
          catch (error){
            s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
            if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
            {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://4.bp.blogspot.com/-ZoL4BRpPhkw/U6wnup4_6gI/AAAAAAAAACA/sKpM61pmJPo/s1600/no_pic_available.jpg";}
          }
          if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++;
            }
          }
        }
      }
      function removeRelatedDuplicates_thumbs() {
        var tmp = new Array(0);
        var tmp2 = new Array(0);
        var tmp3 = new Array(0);
        for(var i = 0; i < relatedUrls.length; i++) {
          if(!contains_thumbs(tmp, relatedUrls[i]))
          {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp3.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
            tmp3[tmp3.length - 1] = thumburl[i];
          }
        }
        relatedTitles = tmp2;
        relatedUrls = tmp;
        thumburl=tmp3;
      }
      function contains_thumbs(a, e) {
        for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
        return false;
      }
      function printRelatedLabels_thumbs(current) {
        for(var i = 0; i < relatedUrls.length; i++)
        {
          if((relatedUrls[i]==current)||(!relatedTitles[i]))
          {
            relatedUrls.splice(i,1);
            relatedTitles.splice(i,1);
            thumburl.splice(i,1);
            i--;
          }
        }
        var r = Math.floor((relatedTitles.length - 1) * Math.random());
        var i = 0;
        while (i < relatedTitles.length && i < 20 && i<maxresults) {
          tmb = thumburl[r].replace('s72-c/','s300-c/');
          document.write('<div class="item-related"><a href="' + relatedUrls[r] + '"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++;
          if (r < relatedTitles.length - 1) {
            r++;
          } else {
            r = 0;
          }
        }
        relatedUrls.splice(0,relatedUrls.length);
        thumburl.splice(0,thumburl.length);
        relatedTitles.splice(0,relatedTitles.length);
      }
      function removeHtmlTag(strx,chop){
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
          if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
          }
        }
        s =  s.join("");
        s = s.substring(0,chop-1);
        return s;
      }
      //]]>&gt;</script>
  </head>
 
<!--<body>-->
  <body>
    <!-- Preloader -->
    <div id='loader'>
      <div id='loaderInner'/>
    </div>
<!-- Top Navigation -->
      <div class='menu-wrap'>
        <nav class='menu navigation'>
          <ul class='navbar menu-nav'>
                                                <li><a href='http:// YOUR URL HERE /'> YOU’RE TEXT HERE </a></li>
                                                <li><a class='easing' href='#header1-0'> YOU’RE TEXT HERE </a></li>
            <li><a class='easing' href='#sectionAbout'> YOU’RE TEXT HERE </a></li>
                                                <li><a class='easing' href='#features1-0'> YOU’RE TEXT HERE </a></li>
                                                <li><a class='easing' href='#sectionWorks'> YOU’RE TEXT HERE </a></li>
            <li><a class='easing' href='#sectionContact'>Contact</a></li>                       
           </ul>          
        </nav>
      </div>
      <button class='menu-button' id='open-button'><span aria-hidden='true' class='fa fa-bars'/></button>

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

 <section CLASS='mbr-section mbr-section-hero mbr-section-full mbr-parallax-background mbr-section-with-arrow' STYLE='background-image: url(//YOUR URL HERE);' id='header1-0'>
     <div CLASS='mbr-overlay' STYLE='opacity: 0.2; background-color: rgb(0, 0, 0);'/>
     <div CLASS='mbr-table-cell'>
         <div CLASS='container'>
            <div CLASS='row'>
                <div CLASS='mbr-section col-md-10 col-md-offset-1 text-xs-center'>
                     <h1 CLASS='mbr-section-title display-1'> YOU’RE TEXT HERE </h1>
                    <p CLASS='mbr-section-lead lead'> YOU’RE TEXT HERE </p>
                   
                </div>
            </div>
        </div>
    </div>
       <div CLASS='mbr-arrow mbr-arrow-floating' aria-hidden='true'><a HREF='#features1-0'><i CLASS='mbr-arrow-icon'/></a></div>
</section>
   
</b:if>
      </b:if>
  
<section class='mbr-section mbr-section--relative mbr-section--fixed-size mbr-parallax-background' id='sectionAbout' style='background-color: rgb(0, 0, 0);'>
     <div class='mbr-section__container mbr-section__container--std-top-padding mbr-section__container--sm-bot-padding mbr-section-title container' style='padding-top: 93px;'>
        <div class='mbr-header mbr-header--center mbr-header--wysiwyg row'>
            <div class='col-sm-8 col-sm-offset-2'>
                <h2 class='mbr-header__text textBlue'>YOU’RE TEXT HERE</h2>
               
            </div>
        </div>
    </div>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <div class='mbr-header mbr-header--center mbr-header--wysiwyg row' style='visibility: visible;'>
                <p>
                  <span class='textBlue'>
                    YOU’RE TEXT HERE
                  </span>
                  <br/>
                  <br/>
                  YOU’RE TEXT HERE
                </p>
              </div> </b:if>
      </b:if> 
              <div class='mbr-section__container mbr-section__container--center mbr-section__container--middle' style='visibility: visible;'>
                <!-- Porfile Av -->
                <img alt='' class='profileAv centered' src='// YOUR URL HERE '/>
                <!-- Porfile Av End-->
              </div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <div class='mbr-header mbr-header--center mbr-header--wysiwyg row textBlue' style='visibility: visible;'>
                <h3>
                  YOU’RE TEXT HERE
                </h3>
                <div class='mbr-header mbr-header--center mbr-header--wysiwyg row textBlue'>
                  <p>
                    YOU’RE TEXT HERE
                  </p>
                </div>
                <div class='infoSocial'>
                  <ul>
                    <li>
                      <a href='https:// YOUR URL HERE '>
                        <i class='fa fa-youtube'/>
                      </a>
                    </li>
                    <li>
                      <a href='https:// YOUR URL HERE '>
                        <i class='fa fa-facebook'/>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- END section TITLE -->
            </b:if>
      </b:if>
            <!-- END container -->
          </section>
                
<div class='clr'/>

  <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <section class='mbr-cards mbr-section mbr-section-nopadding mbr-parallax-background' id='features1-0' style='background-image: url(//YOUR URL HERE);'>

        <div class='mbr-overlay' style='opacity: 0.2; background-color: rgb(34, 34, 34);'>
        </div>

    <div class='mbr-cards-row row striped'>

        <div class='mbr-cards-col col-xs-12 col-lg-3' style='padding-top: 80px; padding-bottom: 80px;'>
            <div class='container'>
                <div class='card cart-block'>
                    <div class='card-img'><img class='card-img-top' src='// YOUR URL HERE '/></div>
                    <div class='card-block'>
                        <h4 class='card-title'> YOU’RE TEXT HERE </h4>
                       
                       
                        <div class='card-btn'><a class='btn btn-primary' href='https:// YOUR URL HERE '>MORE</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mbr-cards-col col-xs-12 col-lg-3' style='padding-top: 80px; padding-bottom: 80px;'>
            <div class='container'>
                <div class='card cart-block'>
                    <div class='card-img'><img class='card-img-top' src='// YOUR URL HERE '/></div>
                    <div class='card-block'>
                        <h4 class='card-title'> YOU’RE TEXT HERE </h4>
                       
                       
                        <div class='card-btn'><a class='btn btn-primary' href='https:// YOUR URL HERE '>MORE</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mbr-cards-col col-xs-12 col-lg-3' style='padding-top: 80px; padding-bottom: 80px;'>
            <div class='container'>
                <div class='card cart-block'>
                    <div class='card-img'><img class='card-img-top' src='// YOUR URL HERE '/></div>
                    <div class='card-block'>
                        <h4 class='card-title'> YOU’RE TEXT HERE </h4>
                       
                       
                        <div class='card-btn'><a class='btn btn-primary' href='https:// YOUR URL HERE '>MORE</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mbr-cards-col col-xs-12 col-lg-3' style='padding-top: 80px; padding-bottom: 80px;'>
            <div class='container'>
                <div class='card cart-block'>
                    <div class='card-img'><img class='card-img-top' src='// YOUR URL HERE '/></div>
                    <div class='card-block'>
                        <h4 class='card-title'> YOU’RE TEXT HERE </h4>
                       
                       
                        <div class='card-btn'><a class='btn btn-primary' href='https:// YOUR URL HERE '>MORE</a></div>
                    </div>
                </div>
            </div>
        </div>
       
       
    </div>
</section>

</b:if>
      </b:if>

   <div class='clr'/>

     <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>


<section CLASS='mbr-wowslider-container mbr-section mbr-section__container carousel slide mbr-wowslider-container--absent mbr-section-nopadding' STYLE='background-color: rgb(0, 0, 0);' data-interval='false' data-keyboard='false' data-ride='carousel' data-wrap='true' id='wowslider-0'>
    <div CLASS='mbr-wowslider'>
        <div CLASS='ws_images'>
            <ul>
                <li>
                    <img ALT='title 3' SRC='// YOUR URL HERE ' title='title 3'/>
                </li><li>
                    <img ALT='title 3' SRC='// YOUR URL HERE ' title='title 3'/>
                </li><li>
                    <img ALT='title 3' SRC=' YOUR URL HERE ' title='title 3'/>
                </li><li>
                    <img ALT='title 3' SRC='// YOUR URL HERE ' title='title 3'/>
                </li><li>
                    <img ALT='title 3' SRC='// YOUR URL HERE' title='title 3'/>
                </li><li>
                    <img ALT='title 3' SRC='//YOUR URL HERE' title='title 3'/>
                </li>
            </ul>
        </div>
        </div>
        <div CLASS='ws_shadow'/>
        <div CLASS='mbr-wowslider-options'>
            <div CLASS='params' data-anim-type='kenburns' data-autoplay='true' data-captionseffect='slide' data-duration='3' data-fullscreen='true' data-height='360' data-hidecontrols='false' data-paddingbottom='0' data-paddingtop='0' data-responsive='2' data-showbullets='false' data-showcaptions='false' data-theme='absent' data-timeout='7' data-width='640'/>
        </div>
</section>

</b:if>
      </b:if>
    <div class='clr'/>
               
    <!-- Section Works-->
    <div id='sectionWorks'>
      <div class='ct-wrapper'>

        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='sectionTitle visible;'>
        <h1>BLOG</h1>
            <div class='divider styleColor'>
          </div>
        </div>
          </b:if>
        </b:if>
        <b:section class='content' id='content' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
            <b:includable id='main' var='top'>
              <b:if cond='data:mobile == &quot;false&quot;'>
                <!-- posts -->
                <div class='blog-posts hfeed'>
                  <b:include data='top' name='status-message'/>
                  <data:defaultAdStart/>
                  <b:loop values='data:posts' var='post'>
                    <b:if cond='data:post.isDateStart'>
                      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
                        &lt;/div&gt;&lt;/div&gt;
                      </b:if>
                    </b:if>
                    <b:if cond='data:post.isDateStart'>
                      &lt;div class=&quot;date-outer&quot;&gt;
                    </b:if>
                    <b:if cond='data:post.dateHeader'>
                      <h2 class='date-header'>
                        <span>
                          <data:post.dateHeader/>
                        </span>
                      </h2>
                    </b:if>
                    <b:if cond='data:post.isDateStart'>
                      &lt;div class=&quot;date-posts&quot;&gt;
                    </b:if>
                    <div class='post-outer'>
                      <b:include data='post' name='post'/>
                      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                        <b:include data='post' name='comment_picker'/>
                      </b:if>
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <b:include data='post' name='comment_picker'/>
                      </b:if>
                    </div>
                    <b:if cond='data:post.includeAd'>
                      <b:if cond='data:post.isFirstPost'>
                        <data:defaultAdEnd/>
                        <b:else/>
                        <data:adEnd/>
                      </b:if>
                      <div class='inline-ad'>
                        <data:adCode/>
                      </div>
                      <data:adStart/>
                    </b:if>
                  </b:loop>
                  <b:if cond='data:numPosts != 0'>
                    &lt;/div&gt;&lt;/div&gt;
                  </b:if>
                  <data:adEnd/>
                </div>
                <!-- navigation -->
                <b:include name='nextprev'/>
                <b:if cond='data:top.showStars'>
                  <script src='//www.google.com/jsapi' type='text/javascript'/>
                  <script type='text/javascript'>
                    google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
                    function initialize() {
                      google.annotations.setApplicationId(<data:top.blogspotReviews/>);
                      google.annotations.createAll();
                      google.annotations.fetch();
                    }
                    google.setOnLoadCallback(initialize);
                  </script>
                </b:if>
                <b:else/>
                <b:include name='mobile-main'/>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <data:top.dummyBootstrap/>
              </b:if>
            </b:includable>
            <b:includable id='backlinkDeleteIcon' var='backlink'>
              <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
                <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
                  <img src='//www.blogger.com/img/icon_delete13.gif'/>
                </a>
              </span>
            </b:includable>
            <b:includable id='backlinks' var='post'>
              <a name='links'/>
              <h4>
                <data:post.backlinksLabel/>
              </h4>
              <b:if cond='data:post.numBacklinks != 0'>
                <dl class='comments-block' id='comments-block'>
                  <b:loop values='data:post.backlinks' var='backlink'>
                    <div class='collapsed-backlink backlink-control'>
                      <dt class='comment-title'>
                        <span class='backlink-toggle-zippy'>
                          &#160;
                        </span>
                        <a expr:href='data:backlink.url' rel='nofollow'>
                          <data:backlink.title/>
                        </a>
                        <b:include data='backlink' name='backlinkDeleteIcon'/>
                      </dt>
                      <dd class='comment-body collapseable'>
                        <data:backlink.snippet/>
                      </dd>
                      <dd class='comment-footer collapseable'>
                        <span class='comment-author'>
                          <data:post.authorLabel/>
                          <data:backlink.author/>
                        </span>
                        <span class='comment-timestamp'>
                          <data:post.timestampLabel/>
                          <data:backlink.timestamp/>
                        </span>
                      </dd>
                    </div>
                  </b:loop>
                </dl>
              </b:if>
              <p class='comment-footer'>
                <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'>
                  <data:post.createLinkLabel/>
                </a>
              </p>
            </b:includable>
            <b:includable id='comment-form' var='post'>
              <div class='comment-form'>
                <a name='comment-form'/>
                <b:if cond='data:mobile'>
                  <h4 id='comment-post-message'>
                    <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'>
                      <data:postCommentMsg/>
                    </a>
                  </h4>
                  <p>
                    <data:blogCommentMessage/>
                  </p>
                  <data:blogTeamBlogMessage/>
                  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                  <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
                  <b:else/>
                  <h4 id='comment-post-message'>
                    <data:postCommentMsg/>
                  </h4>
                  <p>
                    <data:blogCommentMessage/>
                  </p>
                  <data:blogTeamBlogMessage/>
                  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                  <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
                </b:if>
                <data:post.friendConnectJs/>
                <data:post.cmtfpIframe/>
                <script type='text/javascript'>
                  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
                </script>
              </div>
            </b:includable>
            <b:includable id='commentDeleteIcon' var='comment'>
              <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
                <b:if cond='data:showCmtPopup'>
                  <div class='goog-toggle-button'>
                    <div class='goog-inline-block comment-action-icon'/>
                  </div>
                  <b:else/>
                  <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
                    <img src='//www.blogger.com/img/icon_delete13.gif'/>
                  </a>
                </b:if>
              </span>
            </b:includable>
            <b:includable id='comment_count_picker' var='post'>
              <b:if cond='data:post.commentSource == 1'>
                <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
                </span>
                <b:else/>
                <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                  <data:post.commentLabelFull/>
                  :
                </a>
              </b:if>
            </b:includable>
            <b:includable id='comment_picker' var='post'>
              <b:if cond='data:post.commentSource == 1'>
                <b:include data='post' name='iframe_comments'/>
                <b:elseif cond='data:post.showThreadedComments'/>
                <b:include data='post' name='threaded_comments'/>
                <b:else/>
                <b:include data='post' name='comments'/>
              </b:if>
            </b:includable>
            <b:includable id='comments' var='post'>
              <div class='comments' id='comments'>
                <a name='comments'/>
                <b:if cond='data:post.allowComments'>
                  <h4>
                    <b:if cond='data:post.numComments == 1'>
                      1
                      <data:commentLabel/>
                      :
                      <b:else/>
                      <data:post.numComments/>
                      <data:commentLabelPlural/>
                      :
                    </b:if>
                  </h4>
                  <b:if cond='data:post.commentPagingRequired'>
                    <span class='paging-control-container'>
                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                        <data:post.oldestLinkText/>
                      </a>
                      &#160;
                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                        <data:post.olderLinkText/>
                      </a>
                      &#160;
                      <data:post.commentRangeText/>
                      &#160;
                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                        <data:post.newerLinkText/>
                      </a>
                      &#160;
                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                        <data:post.newestLinkText/>
                      </a>
                    </span>
                  </b:if>
                  <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
                    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
                      <b:loop values='data:post.comments' var='comment'>
                        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
                          <b:if cond='data:comment.favicon'>
                            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                          </b:if>
                          <a expr:name='data:comment.anchorName'/>
                          <b:if cond='data:blog.enabledCommentProfileImages'>
                            <data:comment.authorAvatarImage/>
                          </b:if>
                          <b:if cond='data:comment.authorUrl'>
                            <a expr:href='data:comment.authorUrl' rel='nofollow'>
                              <data:comment.author/>
                            </a>
                            <b:else/>
                            <data:comment.author/>
                          </b:if>
                          <data:commentPostedByMsg/>
                        </dt>
                        <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
                          <b:if cond='data:comment.isDeleted'>
                            <span class='deleted-comment'>
                              <data:comment.body/>
                            </span>
                            <b:else/>
                            <p>
                              <data:comment.body/>
                            </p>
                          </b:if>
                        </dd>
                        <dd class='comment-footer'>
                          <span class='comment-timestamp'>
                            <a expr:href='data:comment.url' title='comment permalink'>
                              <data:comment.timestamp/>
                            </a>
                            <b:include data='comment' name='commentDeleteIcon'/>
                          </span>
                        </dd>
                      </b:loop>
                    </dl>
                  </div>
                  <b:if cond='data:post.commentPagingRequired'>
                    <span class='paging-control-container'>
                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                        <data:post.oldestLinkText/>
                      </a>
                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                        <data:post.olderLinkText/>
                      </a>
                      &#160;
                      <data:post.commentRangeText/>
                      &#160;
                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                        <data:post.newerLinkText/>
                      </a>
                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                        <data:post.newestLinkText/>
                      </a>
                    </span>
                  </b:if>
                  <p class='comment-footer'>
                    <b:if cond='data:post.embedCommentForm'>
                      <b:if cond='data:post.allowNewComments'>
                        <b:include data='post' name='comment-form'/>
                        <b:else/>
                        <data:post.noNewCommentsText/>
                      </b:if>
                      <b:else/>
                      <b:if cond='data:post.allowComments'>
                        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                          <data:postCommentMsg/>
                        </a>
                      </b:if>
                    </b:if>
                  </p>
                </b:if>
                <b:if cond='data:showCmtPopup'>
                  <div id='comment-popup'>
                    <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
                    </iframe>
                  </div>
                </b:if>
                <div id='backlinks-container'>
                  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
                    <b:if cond='data:post.showBacklinks'>
                      <b:include data='post' name='backlinks'/>
                    </b:if>
                  </div>
                </div>
              </div>
            </b:includable>
            <b:includable id='feedLinks'>
              <b:if cond='data:blog.pageType != &quot;item&quot;'>
                <!-- Blog feed links -->
                <b:if cond='data:feedLinks'>
                  <div class='blog-feeds'>
                    <b:include data='feedLinks' name='feedLinksBody'/>
                  </div>
                </b:if>
                <b:else/>
                <!--Post feed links -->
                <div class='post-feeds'>
                  <b:loop values='data:posts' var='post'>
                    <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
                  </b:loop>
                </div>
              </b:if>
            </b:includable>
            <b:includable id='feedLinksBody' var='links'>
              <div class='feed-links'>
                <data:feedLinksMsg/>
                <b:loop values='data:links' var='f'>
                  <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'>
                    <data:f.name/>
                    (
                    <data:f.feedType/>
                    )
                  </a>
                </b:loop>
              </div>
            </b:includable>
            <b:includable id='iframe_comments' var='post'>
              <b:if cond='data:post.allowIframeComments'>
                <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
                <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
                <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
                  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                    <data:postCommentMsg/>
                  </a>
                </b:if>
              </b:if>
            </b:includable>
            <b:includable id='mobile-index-post' var='post'>
              <div class='mobile-date-outer date-outer'>
                <b:if cond='data:post.dateHeader'>
                  <div class='date-header'>
                    <span>
                      <data:post.dateHeader/>
                    </span>
                  </div>
                </b:if>
                <div class='mobile-post-outer'>
                  <a expr:href='data:post.url'>
                    <h3 class='mobile-index-title entry-title' itemprop='name'>
                      <data:post.title/>
                    </h3>
                    <div class='mobile-index-arrow'>
                      &amp;rsaquo;
                    </div>
                    <div class='mobile-index-contents'>
                      <b:if cond='data:post.thumbnailUrl'>
                        <div class='mobile-index-thumbnail'>
                          <div class='Image'>
                            <img expr:src='data:post.thumbnailUrl'/>
                          </div>
                        </div>
                      </b:if>
                      <div class='post-body'>
                        <b:if cond='data:post.snippet'>
                          <data:post.snippet/>
                        </b:if>
                      </div>
                    </div>
                    <div style='clear: both;'/>
                  </a>
                  <div class='mobile-index-comment'>
                    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:if cond='data:post.allowComments'>
                        <b:if cond='data:post.numComments != 0'>
                          <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                            <b:if cond='data:post.numComments == 1'>
                              1
                              <data:top.commentLabel/>
                              <b:else/>
                              <data:post.numComments/>
                              <data:top.commentLabelPlural/>
                            </b:if>
                          </a>
                        </b:if>
                      </b:if>
                    </b:if>
                  </div>
                </div>
              </div>
            </b:includable>
            <b:includable id='mobile-main' var='top'>
              <!-- posts -->
              <div class='blog-posts hfeed'>
                <b:include data='top' name='status-message'/>
                <b:if cond='data:blog.pageType == &quot;index&quot;'>
                  <b:loop values='data:posts' var='post'>
                    <b:include data='post' name='mobile-index-post'/>
                  </b:loop>
                  <b:else/>
                  <b:loop values='data:posts' var='post'>
                    <b:include data='post' name='mobile-post'/>
                  </b:loop>
                </b:if>
              </div>
              <b:include name='mobile-nextprev'/>
            </b:includable>
            <b:includable id='mobile-nextprev'>
              <div class='blog-pager' id='blog-pager'>
                <b:if cond='data:newerPageUrl'>
                  <div class='mobile-link-button' id='blog-pager-newer-link'>
                    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
                      &amp;lsaquo;
                    </a>
                  </div>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <div class='mobile-link-button' id='blog-pager-older-link'>
                    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
                      &amp;rsaquo;
                    </a>
                  </div>
                </b:if>
                <div class='mobile-link-button' id='blog-pager-home-link'>
                  <a class='home-link' expr:href='data:blog.homepageUrl'>
                    <data:homeMsg/>
                  </a>
                </div>
                <div class='mobile-desktop-link'>
                  <a class='home-link' expr:href='data:desktopLinkUrl'>
                    <data:desktopLinkMsg/>
                  </a>
                </div>
              </div>
              <div class='clear'/>
            </b:includable>
            <b:includable id='mobile-post' var='post'>
              <div class='date-outer'>
                <b:if cond='data:post.dateHeader'>
                  <h2 class='date-header'>
                    <span>
                      <data:post.dateHeader/>
                    </span>
                  </h2>
                </b:if>
                <div class='date-posts'>
                  <div class='post-outer'>
                    <div class='post hentry uncustomized-post-template'>
                      <a expr:name='data:post.id'/>
                      <b:if cond='data:post.title'>
                        <h1 class='post-title entry-title'>
                          <b:if cond='data:post.link'>
                            <a expr:href='data:post.link'>
                              <data:post.title/>
                            </a>
                            <b:else/>
                            <b:if cond='data:post.url'>
                              <b:if cond='data:blog.url != data:post.url'>
                                <a expr:href='data:post.url'>
                                  <data:post.title/>
                                </a>
                                <b:else/>
                                <data:post.title/>
                              </b:if>
                              <b:else/>
                              <data:post.title/>
                            </b:if>
                          </b:if>
                        </h1>
                      </b:if>
                      <div class='post-header'>
                        <div class='post-header-line-1'/>
                      </div>
                      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
                        <data:post.body/>
                        <div style='clear: both;'/>
                        <!-- clear for photos floats -->
                      </div>
                      <div class='post-footer'>
                        <div class='post-footer-line post-footer-line-1'>
                          <span class='post-author vcard'>
                            <b:if cond='data:top.showAuthor'>
                              <b:if cond='data:post.authorProfileUrl'>
                                <span class='fn'>
                                  <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                                    <data:post.author/>
                                  </a>
                                </span>
                                <b:else/>
                                <span class='fn'>
                                  <data:post.author/>
                                </span>
                              </b:if>
                            </b:if>
                          </span>
                          <span class='post-timestamp'>
                            <b:if cond='data:top.showTimestamp'>
                              <data:top.timestampLabel/>
                              <b:if cond='data:post.url'>
                                <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                                  <abbr class='published' expr:title='data:post.timestampISO8601'>
                                    <data:post.timestamp/>
                                  </abbr>
                                </a>
                              </b:if>
                            </b:if>
                          </span>
                          <span class='post-comment-link'>
                            <b:if cond='data:blog.pageType != &quot;item&quot;'>
                              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                                <b:if cond='data:post.allowComments'>
                                  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                                    <b:if cond='data:post.numComments == 1'>
                                      1
                                      <data:top.commentLabel/>
                                      <b:else/>
                                      <data:post.numComments/>
                                      <data:top.commentLabelPlural/>
                                    </b:if>
                                  </a>
                                </b:if>
                              </b:if>
                            </b:if>
                          </span>
                        </div>
                        <div class='post-footer-line post-footer-line-2'>
                          <b:if cond='data:top.showMobileShare'>
                            <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                              <a href='javascript:void(0);'>
                                <data:shareMsg/>
                              </a>
                            </div>
                          </b:if>
                          <b:if cond='data:top.showDummy'>
                            <div class='goog-inline-block dummy-container'>
                              <data:post.dummyTag/>
                            </div>
                          </b:if>
                        </div>
                      </div>
                    </div>
                    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                      <b:include data='post' name='comment_picker'/>
                    </b:if>
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <b:include data='post' name='comment_picker'/>
                    </b:if>
                  </div>
                </div>
              </div>
            </b:includable>
            <b:includable id='nextprev'>
              <div class='blog-pager' id='blog-pager'>
                <b:if cond='data:newerPageUrl'>
                  <span id='blog-pager-newer-link'>
                    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
                      <data:newerPageTitle/>
                    </a>
                  </span>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <span id='blog-pager-older-link'>
                    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
                      <data:olderPageTitle/>
                    </a>
                  </span>
                </b:if>
                <a class='home-link' expr:href='data:blog.homepageUrl'>
                  <data:homeMsg/>
                </a>
                <b:if cond='data:mobileLinkUrl'>
                  <div class='blog-mobile-link'>
                    <a expr:href='data:mobileLinkUrl'>
                      <data:mobileLinkMsg/>
                    </a>
                  </div>
                </b:if>
              </div>
              <div class='clear'/>
            </b:includable>
            <b:includable id='post' var='post'>
              <div class='col-md-4 col-sm-4 col-xs-12 worksItem worksCateg1 sjps' style='display: inline-block;'>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                  <b:if cond='data:post.title'>
                    <h1 align='center' class='post-title entry-title'>
                      <b:if cond='data:post.link'>
                        <a expr:href='data:post.link'>
                          <data:post.title/>
                        </a>
                        <b:else/>
                        <b:if cond='data:post.url'>
                          <b:if cond='data:blog.url != data:post.url'>
                            <a expr:href='data:post.url'>
                              <data:post.title/>
                            </a>
                            <b:else/>
                            <data:post.title/>
                          </b:if>
                          <b:else/>
                          <data:post.title/>
                        </b:if>
                      </b:if>
                    </h1>
                  </b:if>
                </b:if>
                <div class='theme-img'>
                  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
                    <div class='entry-title'>
                      <b:if cond='data:blog.pageType != &quot;item&quot;'>
                        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                          <h3 align='center' itemprop='name' style='display:none;'>
                            <b:if cond='data:post.url'>
                              <b:if cond='data:blog.url != data:post.url'>
                                <a expr:href='data:post.url'>
                                  <data:post.title/>
                                </a>
                                <b:else/>
                                <data:post.title/>
                              </b:if>
                              <b:else/>
                              <data:post.title/>
                            </b:if>
                          </h3>
                          <b:else/>
                          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                            <h1 class='static-title'>
                              <data:post.title/>
                            </h1>
                          </b:if>
                        </b:if>
                      </b:if>
                    </div>
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <data:post.body/>
                      <b:else/>
                      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                        <data:post.body/>
                        <b:else/>
                        <div class='body-post'>
                          <b:if cond='data:blog.pageType == &quot;index&quot;'>
                            <span expr:id='&quot;p&quot; + data:post.id'>
                              <data:post.body/>
                            </span>
                            <script type='text/javascript'>
                              var x=&quot;<data:post.title/>&quot;,y=&quot;<data:post.url/>&quot;,t=&quot;<data:post.timestamp/>&quot;,u=&quot;<data:post.numComments/>&quot;;rm(&quot;p<data:post.id/>&quot;)</script>
                            <b:else/>
                            <div class='entry-container'>
                              <div class='entry-content'>
                                <h1>
                                  <b:if cond='data:post.link'>
                                    <a expr:href='data:post.link' expr:title='data:post.title'>
                                      <data:post.title/>
                                    </a>
                                    <b:else/>
                                    <data:post.title/>
                                  </b:if>
                                </h1>
                                <data:post.body/>
                              </div>
                            </div>
                          </b:if>
                        </div>
                      </b:if>
                    </b:if>
                    <div style='clear: both;'/>
                    <!-- clear for photos floats -->
                  </div>
                  <div class='post-footer'>
                    <div class='post-footer-line post-footer-line-1'>
                      <span class='post-author vcard'>
                        <b:if cond='data:top.showAuthor'>
                          <data:top.authorLabel/>
                          <b:if cond='data:post.authorProfileUrl'>
                            <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                              <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                              <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                                <span itemprop='name'>
                                  <data:post.author/>
                                </span>
                              </a>
                            </span>
                            <b:else/>
                            <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                              <span itemprop='name'>
                                <data:post.author/>
                              </span>
                            </span>
                          </b:if>
                        </b:if>
                      </span>
                      <span class='post-timestamp'>
                        <b:if cond='data:top.showTimestamp'>
                          <data:top.timestampLabel/>
                          <b:if cond='data:post.url'>
                            <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
                            <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                              <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
                                <data:post.timestamp/>
                              </abbr>
                            </a>
                          </b:if>
                        </b:if>
                      </span>
                      <span class='post-comment-link'>
                        <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
                      </span>
                      <span class='post-icons'>
                        <!-- email post links -->
                        <b:if cond='data:post.emailPostUrl'>
                          <span class='item-action'>
                            <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                              <img alt='' class='icon-action' height='13' src='//img1.blogblog.com/img/icon18_email.gif' width='18'/>
                            </a>
                          </span>
                        </b:if>
                        <!-- quickedit pencil -->
                        <b:include data='post' name='postQuickEdit'/>
                      </span>
                      <br/>
                      <span>
                        Socialize:
                      </span>
                      <div class='post-share-buttons goog-inline-block'>
                        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
                      </div>
                      <span class='post-backlinks post-comment-link'>
                        <b:if cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                      and data:post.showBacklinks'>
                          <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
                            <data:top.backlinkLabel/>
                          </a>
                        </b:if>
                      </span>
                    </div>
                    <div class='post-footer-line post-footer-line-2'>
                      <span class='post-labels'>
                        <b:if cond='data:post.labels'>
                          <data:postLabelsLabel/>
                          <b:loop values='data:post.labels' var='label'>
                            <a expr:href='data:label.url' rel='tag'>
                              <data:label.name/>
                            </a>
                            <b:if cond='not data:label.isLast'>
                              ,
                            </b:if>
                          </b:loop>
                        </b:if>
                      </span>
                    </div>
                    <div class='post-footer-line post-footer-line-3'>
                      <span class='reaction-buttons'>
                        <b:if cond='data:top.showReactions'>
                          <table border='0' cellpadding='0' cellspacing='0' width='100%'>
                            <tr>
                              <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
                                <span class='reactions-label'>
                                  <data:top.reactionsLabel/>
                                </span>
                                &#160;
                              </td>
                              <td>
                                <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
                              </td>
                            </tr>
                          </table>
                        </b:if>
                      </span>
                      <span class='post-location'>
                        <b:if cond='data:top.showLocation'>
                          <b:if cond='data:post.location'>
                            <data:postLocationLabel/>
                            <a expr:href='data:post.location.mapsUrl' target='_blank'>
                              <data:post.location.name/>
                            </a>
                          </b:if>
                        </b:if>
                      </span>
                    </div>
                    <b:if cond='data:post.authorAboutMe'>
                      <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                        <b:if cond='data:post.authorPhoto.url'>
                          <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
                        </b:if>
                        <div>
                          <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
                            <span itemprop='name'>
                              <data:post.author/>
                            </span>
                          </a>
                        </div>
                        <span itemprop='description'>
                          <data:post.authorAboutMe/>
                        </span>
                      </div>
                    </b:if>
                  </div>
                  <div class='post-related'>
                    <div class='post-box'>
                      <h4 class='post-box-title'>
                        You Might Also Like
                      </h4>
                    </div>
                    <b:loop values='data:post.labels' var='label'>
                      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
                    </b:loop>
                    <script type='text/javascript'>
                      var defaultnoimage=&quot;http://4.bp.blogspot.com/-ZoL4BRpPhkw/U6wnup4_6gI/AAAAAAAAACA/sKpM61pmJPo/s1600/no_pic_available.jpg&quot;;
                      var maxresults=4;
                      removeRelatedDuplicates_thumbs();
                      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                    </script>
                  </div>
                </div>
              </div>
            </b:includable>
            <b:includable id='postQuickEdit' var='post'>
              <b:if cond='data:post.editUrl'>
                <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
                  <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
                    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
                  </a>
                </span>
              </b:if>
            </b:includable>
            <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>
            <b:includable id='status-message'>
              <b:if cond='data:navMessage'>
                <div class='status-msg-wrap'>
                  <div class='status-msg-body'>
                    <data:navMessage/>
                  </div>
                  <div class='status-msg-border'>
                    <div class='status-msg-bg'>
                      <div class='status-msg-hidden'>
                        <data:navMessage/>
                      </div>
                    </div>
                  </div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:includable>
            <b:includable id='threaded-comment-form' var='post'>
              <div class='comment-form'>
                <a name='comment-form'/>
                <b:if cond='data:mobile'>
                  <p>
                    <data:blogCommentMessage/>
                  </p>
                  <data:blogTeamBlogMessage/>
                  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                  <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
                  <b:else/>
                  <p>
                    <data:blogCommentMessage/>
                  </p>
                  <data:blogTeamBlogMessage/>
                  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                  <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
                </b:if>
                <data:post.friendConnectJs/>
                <data:post.cmtfpIframe/>
                <script type='text/javascript'>
                  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
                </script>
              </div>
            </b:includable>
            <b:includable id='threaded_comment_css'>
              <style>
              </style>
            </b:includable>
            <b:includable id='threaded_comment_js' var='post'>
              <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
              <script type='text/javascript'>
                (function() {
                  var items = <data:post.commentJso/>;
                  var msgs = <data:post.commentMsgs/>;
                  var config = <data:post.commentConfig/>;
                  // <![CDATA[
                  var cursor = null;
                  if (items && items.length > 0) {
                    cursor = parseInt(items[items.length - 1].timestamp) + 1;
                  }
                  var bodyFromEntry = function(entry) {
                    if (entry.gd$extendedProperty) {
                      for (var k in entry.gd$extendedProperty) {
                        if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
                          return '<span class="deleted-comment">' + entry.content.$t + '</span>';
                        }
                      }
                    }
                    return entry.content.$t;
                  }
                  var parse = function(data) {
                    cursor = null;
                    var comments = [];
                    if (data && data.feed && data.feed.entry) {
                      for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
                        var comment = {};
                        // comment ID, parsed out of the original id format
                        var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
                        comment.id = id ? id[2] : null;
                        comment.body = bodyFromEntry(entry);
                        comment.timestamp = Date.parse(entry.published.$t) + '';
                        if (entry.author && entry.author.constructor === Array) {
                          var auth = entry.author[0];
                          if (auth) {
                            comment.author = {
                              name: (auth.name ? auth.name.$t : undefined),
                              profileUrl: (auth.uri ? auth.uri.$t : undefined),
                              avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                            };
                          }
                        }
                        if (entry.link) {
                          if (entry.link[2]) {
                            comment.link = comment.permalink = entry.link[2].href;
                          }
                          if (entry.link[3]) {
                            var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                            if (pid && pid[1]) {
                              comment.parentId = pid[1];
                            }
                          }
                        }
                        comment.deleteclass = 'item-control blog-admin';
                        if (entry.gd$extendedProperty) {
                          for (var k in entry.gd$extendedProperty) {
                            if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                              comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                            } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                              comment.displayTime = entry.gd$extendedProperty[k].value;
                            }
                          }
                        }
                        comments.push(comment);
                      }
                    }
                    return comments;
                  };
                  var paginator = function(callback) {
                    if (hasMore()) {
                      var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
                      if (cursor) {
                        url += '&published-min=' + new Date(cursor).toISOString();
                      }
                      window.bloggercomments = function(data) {
                        var parsed = parse(data);
                        cursor = parsed.length < 50 ? null
                        : parseInt(parsed[parsed.length - 1].timestamp) + 1
                        callback(parsed);
                        window.bloggercomments = null;
                      }
                      url += '&callback=bloggercomments';
                      var script = document.createElement('script');
                      script.type = 'text/javascript';
                      script.src = url;
                      document.getElementsByTagName('head')[0].appendChild(script);
                    }
                  };
                  var hasMore = function() {
                    return !!cursor;
                  };
                  var getMeta = function(key, comment) {
                    if ('iswriter' == key) {
                      var matches = !!comment.author
                      && comment.author.name == config.authorName
                      && comment.author.profileUrl == config.authorUrl;
                      return matches ? 'true' : '';
                    } else if ('deletelink' == key) {
                      return config.baseUri + '/delete-comment.g?blogID='
                      + config.blogId + '&postID=' + comment.id;
                    } else if ('deleteclass' == key) {
                      return comment.deleteclass;
                    }
                    return '';
                  };
                  var replybox = null;
                  var replyUrlParts = null;
                  var replyParent = undefined;
                  var onReply = function(commentId, domId) {
                    if (replybox == null) {
                      // lazily cache replybox, and adjust to suit this style:
                      replybox = document.getElementById('comment-editor');
                      if (replybox != null) {
                        replybox.height = '250px';
                        replybox.style.display = 'block';
                        replyUrlParts = replybox.src.split('#');
                      }
                    }
                    if (replybox && (commentId !== replyParent)) {
                      replybox.src = '';
                      document.getElementById(domId).insertBefore(replybox, null);
                      replybox.src = replyUrlParts[0]
                      + (commentId ? '&parentID=' + commentId : '')
                      + '#' + replyUrlParts[1];
                      replyParent = commentId;
                    }
                  };
                  var hash = (window.location.hash || '#').substring(1);
                  var startThread, targetComment;
                  if (/^comment-form_/.test(hash)) {
                    startThread = hash.substring('comment-form_'.length);
                  } else if (/^c[0-9]+$/.test(hash)) {
                    targetComment = hash.substring(1);
                  }
                  // Configure commenting API:
                  var configJso = {
                    'maxDepth': config.maxThreadDepth
                  };
                  var provider = {
                    'id': config.postId,
                    'data': items,
                    'loadNext': paginator,
                    'hasMore': hasMore,
                    'getMeta': getMeta,
                    'onReply': onReply,
                    'rendered': true,
                    'initComment': targetComment,
                    'initReplyThread': startThread,
                    'config': configJso,
                    'messages': msgs
                  };
                  var render = function() {
                    if (window.goog && window.goog.comments) {
                      var holder = document.getElementById('comment-holder');
                      window.goog.comments.render(holder, provider);
                    }
                  };
                  // render now, or queue to render when library loads:
                  if (window.goog && window.goog.comments) {
                    render();
                  } else {
                    window.goog = window.goog || {};
                    window.goog.comments = window.goog.comments || {};
                    window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
                    window.goog.comments.loadQueue.push(render);
                  }
                })();
                // ]]>
              </script>
            </b:includable>
            <b:includable id='threaded_comments' var='post'>
              <div class='comments' id='comments'>
                <a name='comments'/>
                <h4>
                  <data:post.commentLabelFull/>
                  :
                </h4>
                <div class='comments-content'>
                  <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
                  <div id='comment-holder'>
                    <data:post.commentHtml/>
                  </div>
                </div>
                <p class='comment-footer'>
                  <b:if cond='data:post.allowNewComments'>
                    <b:include data='post' name='threaded-comment-form'/>
                    <b:else/>
                    <data:post.noNewCommentsText/>
                  </b:if>
                </p>
                <b:if cond='data:showCmtPopup'>
                  <div id='comment-popup'>
                    <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
                    </iframe>
                  </div>
                </b:if>
                <div id='backlinks-container'>
                  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
                    <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
                  </div>
                </div>
              </div>
            </b:includable>
          </b:widget>
        </b:section>
      </div>
      <!-- /main-wrapper -->
      <div class='clr'/>
      <!-- /ct-wrapper -->
    </div>


    <section id='sectionSpecial2'>
      <div class='container'>
        <!-- section TITLE -->
        <div class='sectionSpecial2 wow fadeInUp animated' style='visibility: visible;'>
    <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- AD 3 -->
YOUR AD SCRIPT HERE
</script>
          <div class='divider styleColor'>
          </div>
  <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- AD 2 -->
YOUR AD SCRIPT HERE
</script>
         <div class='divider styleColor'>
          </div>
  <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- AD 1 -->
YOUR AD SCRIPT HERE
</script>        
         </div>
</div>
      <!-- END container -->
    </section>

<div class='clr'/>

<section class='mbr-section mbr-section-md-padding' id='social-buttons1-0' style='background-color: rgb(255, 255, 255); padding-top: 90px; padding-bottom: 90px;'>
       <div class='container'>
        <div class='row'>
            <div class='col-md-8 col-md-offset-2 text-xs-center'>
                <h3 class='mbr-section-title display-2'>SHARE THIS PAGE!</h3>
                <div>
                   <div class='mbr-social-likes' data-counters='false'>
                    <span class='btn btn-social facebook' title='Share link on Facebook'>
                        <i class='fa fa-facebook'/>
                    </span>
                    <span class='btn btn-social twitter' title='Share link on Twitter'>
                        <i class='fa fa-twitter'/>
                    </span>
                    <span class='btn btn-social plusone' title='Share link on Google+'>
                        <i class='fa fa-google-plus'/>
                    </span>
                  </div>
                 </div>
            </div>
        </div>
    </div>
</section>

<section class='mbr-section mbr-section-md-padding' id='social-buttons4-0' style='background-color: rgb(255, 255, 255); padding-top: 90px; padding-bottom: 90px;'>
      <div class='container'>
        <div class='row'>
            <div class='col-md-8 col-md-offset-2 text-xs-center'>
                <h3 class='mbr-section-title display-2'>FOLLOW</h3>
                <div><a class='btn btn-social' href='https:// YOUR URL HERE  ' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a> <a class='btn btn-social' href='https:// YOUR URL HERE ' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a> <a class='btn btn-social' href='https:// Your User ID Here /posts' target='_blank' title='Google+'><i class='fa fa-google-plus'/></a> <a class='btn btn-social' href='https:// YOUR URL HERE' target='_blank' title='YouTube'><i class='fa fa-youtube'/></a>       </div>
            </div>
        </div>
    </div>
</section>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   
<section id='sectionContact'>
      <div class='container'>
        <!-- section TITLE -->
        <div class='col-md-6 contactLeft sectionTitle' style='visibility: visible;'>
          <h1>Contact</h1>
          <!-- END section TITLE -->
          <!-- contact FORM-->
          <div class='contactForm'>
            <!--MAIN FORM-->
            <b:section class='contact-form' id='contact-form' preferred='yes'>
              <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' version='1' visible='true'>
                <b:includable id='main'>
                  <form id='contactForm' name='contact-form'>
                    <div class='form-group'>
                      <input class='form-control' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' placeholder='Name* :' required='' type='text'/>
                    </div>
                    <div class='form-group'>
                      <input class='form-control' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' placeholder='E-mail* :' required='' type='email'/>
                    </div>
                    <div class='form-group'>
                      <textarea class='form-control' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' placeholder='Message* :' required='' type='tel'/>
                    </div>
                    <input class='submit wow bounceIn animated' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' style='visibility: visible;' type='submit'/>
                    <div style='text-align: center; max-width: 222px; width: 100%'>
                      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                    </div>
                  </form>
                  <b:include name='quickedit'/>
                </b:includable>
              </b:widget>
              <b:widget id='HTML1' locked='false' title='Whakataki' type='HTML' visible='true'>
                <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
   <b:include name='quickedit'/>
</b:includable>
              </b:widget>
              <b:widget id='Header1' locked='true' title='SBPA (Header)' type='Header' visible='true'>
                <b:includable id='main'>
   <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
        <div id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      <b:else/>
        <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
                <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
                <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
              </b:widget>
              <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
                <b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
     <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
     <b:include name='quickedit'/>
  </b:includable>
              </b:widget>
              <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar' visible='true'>
                <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
      gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
        if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: &#39;https://www.blogger.com/navbar.g?targetBlogID\x3d3480340600617779825\x26blogName\x3dSBPA\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dLIGHT\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://divtemp.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttps://divtemp.blogspot.com/\x26readAccessMode\x3dCUSTOM\x26vt\x3d3428694262866532977&#39;,
              where: document.getElementById(&quot;navbar-iframe-container&quot;),
              id: &quot;navbar-iframe&quot;
          });
        }
      });
    &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
              </b:widget>
            </b:section>
            <!--END Main form-->
          </div>
          <!-- END contact FORM-->
        </div>
        <!-- Contact Adress -->
        <div class='container'>
          <div class='col-md-6 contactRight sectionTitle wow fadeInUp animated' style='visibility: visible;'>
            <!-- section TITLE -->
           <h1>YOUR TEXT HERE <h1/>
           <h4>YOUR TEXT HERE <h4/>
            <!-- END section TITLE -->
            <b:section class='footer' id='footer2' preferred='yes'>
              <b:widget id='PlusFollowers1' locked='true' title='Circles' type='PlusFollowers' version='1' visible='true'>
                <b:includable id='main'>
                  <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                    <b:if cond='data:profileUrl != &quot;&quot;'>
                      <div class='g-plus' data-action='followers' data-source='blogger:blog:followers' expr:data-height='data:height' expr:data-href='data:profileUrl' expr:data-theme='data:theme' expr:data-width='data:width'/>
                      <script type='text/javascript'>
                        window.___gcfg = {&#39;lang&#39;: &#39;<data:language/>&#39;};
                      </script>
                    </b:if>
                  </div>
                </b:includable>
              </b:widget>
              <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats' visible='true'>
                <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
      </span>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
              </b:widget>
            </b:section>
<p style='margin-top:50px; margin-bottom:0; padding-bottom:0; text-align:center; line-height:0'><a href='http://feeds.feedburner.com/~r/Your User ID Here/~6/2' target='_blank'><img alt=' Your User ID Here'src='http://feeds.feedburner.com/ Your User ID Here.gif' style='border:0'/></a></p><p style='margin-top:5px; padding-top:0; font-size:x-small; text-align:center'><a href='https://feedburner.google.com/fb/a/headlineanimator/install?id=q1fk13cc8sp7hkmtsa4thrk0ko&amp;w=2' onclick='window.open(this.href, &apos;haHowto&apos;, &apos;width=520,height=600,toolbar=no,address=no,resizable=yes,scrollbars&apos;); return false' target='_blank'>Grab this Headline Animator</a></p>
          </div>
</div>
      </div>
</section>

</b:if>
      </b:if>

<section id='footercontact'>
         <footer class='contactFooter'>
        <div class='container'>
         <div class='col-md-6 col-sm-6 col-xs-12 footerLeft'>
            Copyright &#169; 2009-2016 <data:blog.title/>.|...|Site Design By <a href='http:// your.com here /'>CUZZNZ.</a>|...|<a href='http:// your.com here /privacy-policy.html'>PRIVACY POLICY.</a></div>
             <div class='col-md-6 col-sm-6 col-xs-12 footerRight'>
            <a class=' easing' href='#sectionAbout'><i class='fa fa-arrow-up'/></a>
          </div>
        </div>
        <!-- END container-->
      </footer>
      <!-- END footer CONTACT-->
    </section>

<script type='text/javascript'>
/*<![CDATA[*/
/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {
                 var bodyEl = document.body,
                                content = document.querySelector( '.content-wrap' ),
                                openbtn = document.getElementById( 'open-button' ),
                                closebtn = document.getElementById( 'close-button' ),
                                isOpen = false;
                 function init() {
                                initEvents();
                }
                 function initEvents() {
                                openbtn.addEventListener( 'click', toggleMenu );
                                if( closebtn ) {
                                                closebtn.addEventListener( 'click', toggleMenu );
                                }
                                 // close the menu element if the target it´s not the menu element or one of its descendants..
                                content.addEventListener( 'click', function(ev) {
                                                var target = ev.target;
                                                if( isOpen && target !== openbtn ) {
                                                                toggleMenu();
                                                }
                                } );
                }
                 function toggleMenu() {
                                if( isOpen ) {
                                                classie.remove( bodyEl, 'show-menu' );
                                }
                                else {
                                                classie.add( bodyEl, 'show-menu' );
                                }
                                isOpen = !isOpen;
                }
                 init();
})();
+function ($) {
  'use strict';
  // SCROLLSPY CLASS DEFINITION
  // ==========================
   function ScrollSpy(element, options) {
    var href
    var process  = $.proxy(this.process, this)

    this.$element       = $(element).is('body') ? $(window) : $(element)
    this.$body          = $('body')
    this.$scrollElement = this.$element.on('scroll.bs.scroll-spy.data-api', process)
    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector       = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .navbar li > a'
    this.offsets        = $([])
    this.targets        = $([])
    this.activeTarget   = null
     this.refresh()
    this.process()
  }
  ScrollSpy.DEFAULTS = {
    offset: 10
  }
   ScrollSpy.prototype.refresh = function () {
    var offsetMethod = this.$element[0] == window ? 'offset' : 'position'
     this.offsets = $([])
    this.targets = $([])
     var self     = this
    var $targets = this.$body
      .find(this.selector)
      .map(function () {
        var $el   = $(this)
        var href  = $el.data('target') || $el.attr('href')
        var $href = /^#./.test(href) && $(href)
         return ($href
          && $href.length
          && $href.is(':visible')
          && [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
      })
      .sort(function (a, b) { return a[0] - b[0] })
      .each(function () {
        self.offsets.push(this[0])
        self.targets.push(this[1])
      })
  }
   ScrollSpy.prototype.process = function () {
    var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
    var scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
    var maxScroll    = scrollHeight - this.$scrollElement.height()
    var offsets      = this.offsets
    var targets      = this.targets
    var activeTarget = this.activeTarget
    var i
     if (scrollTop >= maxScroll) {
      return activeTarget != (i = targets.last()[0]) && this.activate(i)
    }
     if (activeTarget && scrollTop <= offsets[0]) {
      return activeTarget != (i = targets[0]) && this.activate(i)
    }
     for (i = offsets.length; i--;) {
      activeTarget != targets[i]
        && scrollTop >= offsets[i]
        && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
        && this.activate( targets[i] )
    }
  }
   ScrollSpy.prototype.activate = function (target) {
    this.activeTarget = target
     $(this.selector)
      .parentsUntil(this.options.target, '.active')
      .removeClass('active')
     var selector = this.selector +
        '[data-target="' + target + '"],' +
        this.selector + '[href="' + target + '"]'
     var active = $(selector)
      .parents('li')
      .addClass('active')
     if (active.parent('.dropdown-menu').length) {
      active = active
        .closest('li.dropdown')
        .addClass('active')
    }
     active.trigger('activate.bs.scrollspy')
  }
   // SCROLLSPY PLUGIN DEFINITION
  // ===========================
   var old = $.fn.scrollspy
   $.fn.scrollspy = function (option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.scrollspy')
      var options = typeof option == 'object' && option
       if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
   $.fn.scrollspy.Constructor = ScrollSpy
   // SCROLLSPY NO CONFLICT
  // =====================
   $.fn.scrollspy.noConflict = function () {
    $.fn.scrollspy = old
    return this
  }
    // SCROLLSPY DATA-API
  // ==================
   $(window).on('load', function () {
    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this)
      $spy.scrollspy($spy.data())
    })
  })
 }(jQuery);
/*]]>*/</script>
                  
*** //MOBIRISE JAVA SCRIPT FILES//***
  <script src='// YOUR URL HERE /assets/tether/tether.min.js'/>
  <script src='// YOUR URL HERE /assets/smooth-scroll/SmoothScroll.js'/>
  <script src='//YOUR URL HERE/assets/viewportChecker/jquery.viewportchecker.js'/>
  <script src='// YOUR URL HERE /assets/jarallax/jarallax.js'/>
  <script src='// YOUR URL HERE /assets/masonry/masonry.pkgd.min.js'/>
  <script src='// YOUR URL HERE /assets/imagesloaded/imagesloaded.pkgd.min.js'/>
  <script src='// YOUR URL HERE /assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js'/>
  <script src='// YOUR URL HERE/assets/wowslider-plugin/wowslider.js'/>
  <script src='// YOUR URL HERE /assets/social-likes/social-likes.js'/>
  <script src='// YOUR URL HERE/assets/theme/js/script.js'/>
  <script src='// YOUR URL HERE /assets/wowslider-effect/effects.js'/>
  <script src='// YOUR URL HERE /assets/mobirise-gallery/script.js'/>
  <script src='//YOUR URL HERE/assets/wowslider-init/script.js'/>

  <script type='text/javascript'>
      /*<![CDATA[*/
      var postperpage=6;
      var numshowpage=2;
      var upPageWord ='Previous';
      var downPageWord ='Next';
      var urlactivepage=location.href;
      var home_page="/";
      /*]]>*/
    </script>

<script async='async' src='//yourjavascript.com/00911305131/pagenavigation.txt.js' type='text/javascript'/>
      
                  <input TYPE='hidden' name='animation'/>
  </body>
</html>*****\\ 

You Might Also Like

0 comments :

Post a Comment