/*
Theme Name: Metrilo New Copy 2 (banners)
Theme URI: http://metrilo.com
Author: Metrilo Ltd.
Author URI: http://metrilo.com/
Description: Wordpress theme of the Metrilo Blog
Version: 3.0
License: Don't copy this, assholes!
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, simple, fluid, text, blogging, content marketing
*/
/*#wpadminbar {display:none;}*/

body{
	margin: 0px;
	padding:0px;
	color: #000;
	font-size: 14px;
	text-decoration: none;
	background-color:#fff;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
}
b, strong {
	font-weight:400;
}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
div.klear {
	clear:both;
	font-size:0px;
	width:0px;
	height:0px;
}
/************/

#hdr {
    max-width: 1200px;
    margin:0px auto;
    border-bottom:1px solid #e3e3e3;
    background-clip:padding-box;
    z-index:10;
}
body.home #hdr {
    border-bottom:0px solid;
}
#hdr2 {
    padding:16px 90px;
}

#logo {
    display:block;
    float:left;
}
#logo span {
    display:block;
    float:left;
    color: #368ee0;
    font-size:39px;
}
#logo b {
    display:block;
    float:left;
    font-weight:400;
    color: black;
    font-size:19px;
    padding-left:10px;
    padding-top:6px;
}

#hdrsearch {
  clear:both;
    background-color:#f5f5f5;
    border-radius:20px;
    border:0px solid;
    outline:none;
    padding:7px 16px;
    font-size:16px;
  width:100%;
    border:1px solid #fff;
  margin-bottom:20px;
}
#hdrsearch:hover {
    background-color:#f0f0f0;
}
#hdrsearch:focus {
    background-color:#fff;
    border:1px solid #368ee0;
	box-shadow:0px 0px 3px 0px #368ee0;
}

#nav {
    float:right;
    padding-top:1px;
}
#nav a {
    float:right;
    display:block;
    padding:8px;
    margin-left:10px;
}
#nav .navdrop {
    float:right;
    position:relative;
}
#nav .navdrop div {
    float:right;
    position: absolute;
    background-color:white;
    border:1px solid rgba(0,0,0,0.1);
    background-clip: padding-box;
    border-radius: 4px;
    top:34px;
    left:7px;
    padding:5px 0px;
    display:none;
    -webkit-box-shadow: 0 3px 20px 0 rgba(0,0,0,0.1);
box-shadow: 0 3px 20px 0 rgba(0,0,0,0.1);
    z-index:10;
}
#nav .navdrop:hover div {
    display:block;
}
#nav .navdrop a span {
    color:#bbb;
    position:relative;
    top:2px;
}
#nav .navdrop a:hove span {
    color:#888;
}
#nav .navdrop div a{
    display:block;
    text-align:left;
    padding:5px 20px 5px 10px;
    white-space: nowrap;
    float:none;
    margin-left:0px;
}
#nav .navdrop div a:hover{
    background-color: #368ee0;
    color:white;
}
#nav .navdrop div a:active{
    background-color: #2475c1;
}

@media all and (max-width: 820px){
    #nav {display:none;}
    #hdrsearch {display:none;}
    #hdr2 {
        padding:8px 20px;
    }
}
/***/
#navbtn {
    color:#aaa;
    float:right;
    font-size:32px;
    display:block;
    position:relative;
    top:1px;
    width:36px;
    height:36px;
    text-align:center;
    border-radius:30px;
    display:none;
    text-decoration: none;
}
#navbtn.active {
    background-color:#eee;
}
#navbtn span {
    position:relative;
    top:-3px;
}


@media all and (max-width: 820px){
    #navbtn {
        display:block;
    }
}
#mobilenav {
    clear:Both;
    border-bottom:1px solid #eee;
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    display:none;
}
#mobilenav ul div {
    padding-bottom:5px;
 
  
}
#mobilenav ul div li a {
    padding-bottom:5px;
 	padding-left:20px;
  
}
#mobilenav ul strong {
    color:#ccc;
  	padding: 10px;
  display:block;
  
}
body.home #mobilenav {
    border-top:1px solid #e3e3e3;
    border-bottom:0px solid;
}
#mobilenav a {
    display:block;
    padding:8px 0px;
    border-bottom:1px solid #eee;
}
#mobilenav a:last-child {
    border-bottom:0px solid;
}


#mobilesearch {
    background-color:#f5f5f5;
    border-radius:20px;
    border:0px solid;
    outline:none;
    padding:7px 16px;
    font-size:16px;
    margin-bottom:5px;
    margin-top:15px;
    border:1px solid #fff;
    clear:both;
    float:none;
    width:100%;
}
#mobilesearch:hover {
    background-color:#f0f0f0;
}
#mobilesearch:focus {
    background-color:#fff;
    border:1px solid #368ee0;
	box-shadow:0px 0px 3px 0px #368ee0;
}

/****************************************/
#bigsubholder {
    max-width:1200px;
    padding:0px 50px;
    margin:0px auto;
margin-top:20px;
}
#bigsubscribe {
    background-color:#f6f6f6;
    position:relative;
    padding-right:400px;
    z-index:1;
}
#bigsubleft {
    background-color:#368ee0;
    float:left;
    color:white;
    padding:30px 40px 35px 40px;
    padding-right: 100px;
    border-radius:4px 0px 0px 4px;
    background-image:url('imgs/arrow1.svg');
    background-repeat:no-repeat;	
 	background-position: 100.5% center;
    background-size:auto;
}

#bigsubleft h4 {
    margin:0px;
    padding:0px;
    margin-bottom:20px;
    font-weight:400;
    color:white;
    font-family: Roboto Slab, sans-serif;
    font-size: 28px;
}
#bigsubleft p {
    margin:0px;
    padding:0px;
    font-size:18px;
}
#bigsubright {
    background-color:#f6f6f6;
    float:right;
    width:300px;
    position:absolute;
    top:40px;
    right:48px;
}

.subinput {
    border-radius:4px;
    border:2px solid #c2c2c2;
    font-size:20px;
    padding:8px;
    display:block;
    text-align:center;
    width:100%;
    margin-bottom:10px;
    outline: none;
}
.subinput:hover {
    border:2px solid #888;
}
.subinput:active, .subinput:focus {
    border:2px solid #368ee0;
}

.subbutton {
    width:100%;
    border:0px solid;
    padding: 10px;
    border-radius:4px;
    font-size:18px;
    background-color: #5fb870;
    color:white;
    outline: none;
}
.subbutton:hover {
    background-color: #55a965;
}
.subbutton:active {
    background-color: #2d733a;
}

.subform p {
    text-align:center;
    color: #888;
    margin-top:10px;
}

.subform_ok {
    text-align:Center;
    color:#666;
    padding:20px;
    display:none;
}
.subform_ok b{
    font-size:24px;
    margin-bottom:10px;
    color:#217331;
}

@media all and (max-width: 960px){
    #bigsubholder {
        padding:0px 0px;
	margin-top:0px;
    }
    #bigsubscribe {
        padding:0px;
    }
    #bigsubleft {
        float:none;
        background-image:url('imgs/arrow2.svg');
        background-repeat:no-repeat;
        background-position:center 101%;
        background-size:auto;
        padding:20px;
        padding-bottom:50px;
        text-align:center;
    }
    #bigsubleft h4 {
        font-size:26px;
        margin-bottom:10px;
    }
    #bigsubleft p {
        max-width:500px;
        margin:0px auto;
        font-size:16px;
    }
    #bigsubright {
        background-color:#f6f6f6;
        float:none;
        width:auto;
        position:relative;
        top:0px;
        right:0px;
        padding:20px;
        padding-bottom:10px;
    }
    #bigsubright .subform {
        max-width:400px;
        margin:0px auto;
    }

}

/**************************//**************************/
/**************************//**************************/
/**************************//**************************/
#pagebody {
    max-width:1200px;
    margin:40px auto;
    position:relative;
    align-items:stretch;
    display:flex;
}
#pagebody-left {
    padding-left:90px;
    width:70%;
}
#pagebody-right {
    overflow: hidden;
    padding-left: 40px;
    position: relative;
    left: -2px;
    box-sizing: content-box;
    padding-right:90px;
    width:30%;
  min-width:300px;
}
#sticker {
	position:relative;
    padding-top:20px;
    clear:both;
}
/*****************/

@media all and (max-width: 1200px){
    #pagebody-left {
        width:60%;
    	padding-left:60px;
    }
    #pagebody-right {
        width:40%;
    	padding-right:60px;
    }
}

@media all and (max-width: 1060px){

    #pagebody-left {
        width:55%;
    }
    #pagebody-right {
        width:45%;
    }


}
/*****************/

@media all and (max-width: 960px){

    #pagebody {
        margin:20px;
	    display:block;
    }
    #pagebody-left {
        padding-left:0px;
        margin-right:0px;
        width:100%;
        padding:0px;
		max-width:auto;
    }
    #pagebody-right {
        width:100%;
        float:none;
        width:auto;
        clear:both;
        position:relative;
        top:0px;
        left:0px;
        padding:0px;
        padding-top:20px;
    }


}
/************************************************************************/
/************************************************************************/
/************************************************************************/
/************************************************************************/
.looppost {
    border-bottom:1px solid #ededed;
    padding-bottom:30px;
    margin-bottom:30px;
}
h1, .custom1 {
    margin:0px;
    padding:0px;
    color:black;
    font-family: Roboto Slab, sans-serif;
    margin-bottom:15px;
    line-height:1.2;
    font-size:36px;
}
h2, .custom2 {
    margin:0px;
    padding:0px;
    color:black;
    font-family: Roboto Slab, sans-serif;
    margin-bottom:15px;
    line-height:1.2;
    font-size:32px;
}
h3, .custom3 {
    margin:0px;
    padding:0px;
    color:black;
    font-family: Roboto Slab, sans-serif;
    margin-bottom:15px;
    line-height:1.2;
    font-size:28px;
    margin-top: 60px;
}
h4, .custom4 {
    margin:0px;
    padding:0px;
    color:black;
    font-family: Roboto Slab, sans-serif;
    margin-bottom:15px;
    line-height:1.2;
    font-size:24px;
    font-weight: 300;
    margin-top: 40px;
}
h5, .custom5 {
    margin:0px;
    padding:0px;
    color:black;
    font-family: Roboto Slab, sans-serif;
    margin-bottom:15px;
    line-height:1.2;
    font-size:20px;
}
ul {
    margin-bottom: 35px;
}
.postmeta {
    color:#888;
    margin-bottom:20px;
    font-size:16px;
}
.postmeta a{
    color:#666;
}
.postmeta a:hover{
    color:#000;
}
.postbody {
    font-size:18px;
    line-height:1.5;
}
.postbody img{
    max-width:100%;
    height:auto;
}
.postsubmeta {
    clear:both;
    padding-top:10px;
}
.postsubmeta a{
    float:left;
    color:#888;
    padding:8px 20px;
    font-size:16px;
}
.postsubmeta a:hover{
    color:#000;
}
.postsubmeta .readmore{
    float:left;
    background-color: #368ee0;
    color:white;
    padding:8px 20px;
    border-radius:20px;
}
.postsubmeta .readmore:hover{
    color:white;
    background-color: #2979c4;
}
.postsubmeta .readmore:active{
    color:white;
    background-color: #236bad;
}

@media all and (max-width: 660px){
    .looppost h1 {
        font-size:28px;
    }
}
@media all and (max-width: 460px){
    .looppost h1 {
        font-size:22px;
    }
    .postbody {
        font-size:16px;
    }
}

/*****************/
.poplink {
    margin-bottom:20px;
    display:block;
}
.poplink b {
    color:#333;
    font-family: Roboto Slab, sans-serif;
    font-size:20px;
    line-height:1.2;
}
.poplink:hover b {
    color:#000;
}
.poplink div img {
    display:none;
}
.poplink div {
    height:120px;
    width:100%;
    margin-bottom:8px;
    background-color:#f5f5f5;
    background-size:cover;
    border-radius:3px;
}

    .poplink:nth-child(3) {
        clear:both;
    }


@media all and (max-width: 960px){

    .poplink {
        width:50%;
        float:left;
    }
    .poplink:nth-child(2n) {
        padding-left:10px;
    }
    .poplink:nth-child(2n+1) {
        padding-right:10px;
    }

}
@media all and (max-width: 460px){

    .poplink {
        width:100%;
        float:none;
        clear:both;
    }
    .poplink:nth-child(2n) {
        padding-left:0px;
    }
    .poplink:nth-child(2n+1) {
        padding-right:0px;
    }

}
#pagebody-right h6 {
    font-size:18px !important;
    color:#888;
    font-weight:300;
    padding-bottom:5px;
}
/*********/
#socials {
    margin-bottom:20px;
}
#socials a {
    display:block;
    float:left;
    width:50%;
    background-color:#f6f6f6;
    text-align:center;
    color:#888;
    text-transform: uppercase;
    font-size:12px;
    padding:20px 0px;
}

#socials a span {
    display:block;
    margin:0px auto;
    font-size:22px;
    float:none;
}
#socials a b {
    display:block;
    font-size:16px;
    font-weight:300;
    color:black;
    margin-top:10px;
}

#facebooklink span{
    color: #3d5a99;
}
#twitterlink span{
    color: #55acee;
}
#googlepluslink span{
    color: #c33d32;
}

#facebooklink{
    border-radius:3px 0px 0px 3px;
}
#twitterlink{
    border-radius:0px 3px 3px 0px;
}


#facebooklink:hover{
    color: #fff;
    background-color: #3d5a99;
}
#twitterlink:hover{
    color: #fff;
    background-color: #55acee;
}
#twitterlink:hover div{
    border:0px solid;
}
#googlepluslink:hover{
    color: #fff;
    background-color: #c33d32;
}

#socials a:hover b,#socials a:hover span {
    color:white;
}
/********************************************************/
#paging {
    margin-bottom:20px;
}
#paging a {
    display:block;
    float:left;
    margin-right:5px;
    border:1px solid #aaa;
    padding:6px 20px;
    font-size:16px;
    min-width:36px;
    text-align:center;
    border-radius:30px;
}
#paging a:hover {
    border:1px solid #666;
}
#paging a.on {
    border:1px solid #368ee0;
    background-color: #368ee0;
    color:white;
}
/*************************/
#cats div {
    margin-bottom:5px;
}
#cats div span{
    color:#aaa;
}
#cats div a{
    font-size:18px;
    font-weight:400;
}
#cats div small{
    background-color:#eee;
    color:#888;
    padding:4px 8px;
    border-radius:20px;
    margin-left:5px;
}

#cats {
    margin-bottom:20px;
}

/***/
#newposts {
    display:block;
    clear:both;
}
#newposts a.newpostlink {
    clear:both;
    position:relative;
    min-height:50px;
    margin-bottom:10px;
    min-height:50px;
    padding-left:95px;
    display:block;
}
#newposts a.newpostlink div {
    width:80px;
    height:50px;
    background-size:cover;
    position:absolute;
    top:3px;
    left:0px;
    border-radius:3px;
}
#newposts a.newpostlink b{
    color:#333;
    font-size:16px;
    font-weight:300;
    display:block;
}
#newposts a.newpostlink div img{
    display:none;
}
/***/
#sidesubscribe {
    background-color:#f6f6f6;
    position:relative;
    z-index:1;
    margin-bottom:20px;
}
#sidesubtop {
    background-color:#368ee0;
    color:white;
    border-radius:4px 4px 0px 0px;
    padding:30px 40px 35px 40px;
    padding-right: 100px;
    background-image:url('imgs/arrow2.svg');
    background-repeat:no-repeat;
    background-position:center 101%;
    background-size:auto;
    padding:20px;
    padding-bottom:40px;
    text-align:center;
}

#sidesubtop h4 {
    margin:0px;
    padding:0px;
    margin-bottom:10px;
    font-weight:400;
    font-family: Roboto Slab, sans-serif;
    font-size:24px;
    color:white;
}
#sidesubtop p {
    margin:0px;
    padding:0px;
    font-size:16px;
    max-width:400px;
    margin:0px auto;
}
#sidesubbottom {
    background-color:#f6f6f6;
    padding:20px;
    padding-bottom:10px;
    border-radius:0px 0px 4px 4px;
}
#sidesubbottom .subform {
    max-width:400px;
    margin:0px auto;
}

/***********/
.posttags {
    padding-top:10px;
    clear:Both;
    padding-bottom:5px;
}
.posttags a {
    display:block;
    float:left;
    margin-right:10px;
    border:1px solid #bbb;
    padding:6px 20px;
    font-size:14px;
    min-width:36px;
    text-align:center;
    border-radius:30px;
    margin-bottom:10px;
}
.posttags a:hover {
    border:1px solid #368ee0;
    background-color: #368ee0;
    color:white;
}

/***/
#sharing {
    position:absolute;
    padding-left:10px;
    padding-top:10px;
}
#mobilesharing {
    display: none;
}


@media all and (max-width: 960px){

    #sharing {
        display:none;
    }
    #mobilesharing {
        display: block;
    }

}


.post-edit-link {
    color:black !important;
    font-weight:400;
}
/****/
#archivettl {
    padding-bottom:15px;
    margin-bottom:20px;
    border-bottom:1px solid #eee;
}
#archivettl h2 {
    margin-top:0px;
}
#archivettl p {
    font-size:18px;
}
body.single p.intro {
    font-size: 20px;
    font-weight:400;
}

/***/
/* =WordPress Core
-------------------------------------------------------------- */
li {
    margin-bottom:10px;
}
p {
    margin-bottom:20px;
}
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 20px auto 20px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 14px;
    line-height: 17px;
    margin: 0;
    color:#666;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
/***********************************/

/*******/
  .sharrre{

  }
  .sharrre .count {
    color:#aaa;
    display:block;
    font-size:16px;
    font-weight:300;
    line-height:38px;
    height:38px;
    position:relative;
    text-align:center;
    width:55px;
	-webkit-border-radius: 4px 4px 0 0 ;
    border-radius: 4px 4px 0 0 ;
    border:1px solid #ddd;
	border-bottom:0px;
    background: #ffffff;
  }
  .sharrre .share {
    color:#FFFFFF;
    display:block;
    font-size:14px;
    font-weight:300;
    line-height:28px;
    padding:0;
	padding-bottom:1px;
    text-align:center;
    text-decoration:none;
    width:55px;
    border-radius:4px;
	margin-bottom:10px;
	-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	background-color:#ddd;
  }

	 .sharepost .sharrre{
		float:left;
		margin-left:12px;
		margin-top:4px;
		color:#666;
	 }
	 .sharepost .sharrre .share{
		float:left;
		width:auto;
		padding:0px 12px;
		padding-bottom:2px;
		-webkit-border-radius: 0 4px 4px 0;
		border-radius: 0 4px 4px 0;
		margin-bottom:0px;
	 }
	 .sharepost .sharrre .count{
		float:left;
		width:auto;
		height:auto;
		padding:0px 12px;
		border:1px solid #ddd;
		border-RIGHT:0px;
		line-height:21px;
		-webkit-border-radius: 4px 0 0 4px;
		border-radius:  4px 0 0 4px;
	 }

	  #viewpostshare  .sharrre .count, .sharepost:hover .sharrre .count{
		color:#666;
	 }
	  .sharebuttons{
		display:none;
	 }
	.showsharing {
		margin-top:10px;
		color:#888;
		display:block;
	}
	.showsharing:hover {
		color:#222;
	}

  .share-twitter .share {
    background: rgb(85,172,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(85,172,238,1) 0%, rgba(34,136,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,172,238,1)), color-stop(100%,rgba(34,136,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(85,172,238,1) 0%,rgba(34,136,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(85,172,238,1) 0%,rgba(34,136,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(85,172,238,1) 0%,rgba(34,136,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(85,172,238,1) 0%,rgba(34,136,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#2288d5',GradientType=0 ); /* IE6-9 */

  }
  .share-facebook .share{
    background: #5582c9; /* Old browsers */
    background: -moz-linear-gradient(top, #5582c9 0%, #33539a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5582c9), color-stop(100%,#33539a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5582c9 0%,#33539a 100%); /* IE10+ */
    background: linear-gradient(top, #5582c9 0%,#33539a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5582c9', endColorstr='#33539a',GradientType=0 ); /* IE6-9 */
  }
  .share-googleplus .share{
  background: rgb(222,77,56); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(222,77,56,1) 0%, rgba(159,4,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,77,56,1)), color-stop(100%,rgba(159,4,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(222,77,56,1) 0%,rgba(159,4,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(222,77,56,1) 0%,rgba(159,4,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(222,77,56,1) 0%,rgba(159,4,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(222,77,56,1) 0%,rgba(159,4,2,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4d38', endColorstr='#9f0402',GradientType=0 ); /* IE6-9 */

  }
#mobilesharing {
    margin-bottom:10px;
}
#mobilesharing .box {
    float:left;
    margin-right:10px;
}

 #mobilesharing  .sharrre .count {
    width:auto;
	-webkit-border-radius:  4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border:1px solid #ddd;
	border-right:0px;
     float:left;
     padding:0px 10px;
  }
 #mobilesharing  .sharrre .share {
    line-height:38px;
    height:38px;
	padding-bottom:1px;
    text-align:center;
    text-decoration:none;
    width:auto;
    border-radius:4px;
	margin-bottom:10px;
	-webkit-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
     float:left;
     padding:0px 10px;
  }

/*********************/
.redalert {
    display:none;
    color:#7b0000;
    background-color: #f8c8c8;
    text-align:center;
    padding:7px;
    margin-bottom:5px;
    position:absolute;
    top:-44px;
    right:0px;
    width:300px;
    border-radius:3px;
    font-size: 12px;
}
#sidesubbottom .redalert {
    position:relative;
    top:0px;
    width:auto;
    margin-bottom:10px;
}
/******/
#footer {
    padding:20px 90px;
    border-top:1px solid #eee;
    clear:both;
    max-width: 1200px;
    margin:0px auto;
    margin-top:20px;
}
#footer a {
    margin-right:20px;
    color:#888;
}
#footer a:hover {
    color:#000;
}

/****/
#authorbox {
    clear:both;
    background-color:#f6f6f6;
    padding:20px;
    border-radius:4px;
    position:relative;
    font-size:16px;
    padding-left:100px;
    margin-bottom:15px;
}
#authorbox-image {
    width:60px;
    height:60px;
    background-size:cover;
    border-radius:120px;
    float:left;
    position:absolute;
    top:20px;
    left:20px;
}
#authorbox h3 {
    font-size:18px;
    margin-bottom:5px;
    margin-top: 0;
}

@media all and (max-width: 960px){
    #footer {
        padding:20px;
    }

}
img.shadow {
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);
    border-radius:3px;
}

/**************/
/**************/
/**************/

.bundleitem {
    background-color:#f5f5f5;
    padding:20px;
padding-bottom:1px;
    border-radius:6px;
    margin-bottom:15px;
}
.bundleitemtitle {
    font-size:28px;
margin:0px !important;
padding:0px !important;
margin-bottom:15px !important;
}
.bundleitemtitle a {
    color:black;
text-decoration:none;
}
.bundleitemcta {
    display:inline-block;
    clear:both;
    padding:6px 16px;
    color:black;
    border:2px solid #ccc;
    border-radius:26px;
}
.bundleitemcta span {
    color: #368EE0;
    position:relative;
    top:2px;
    left:4px;
}
.bundleitemcta:hover {
    color:white;
    background-color:#307ec7;
    border: 2px solid #307ec7;
}
.bundleitemcta:hover span{
    color:white;
}
.bundleitem img {
    margin-bottom:10px;
border-radius:6px;
}
/****/
.bundlelist {
    color:#888;
    font-size:14px;
    padding-left:20px;
margin-bottom:15px;
}
.bundlelist li{
    margin-bottom:5px;
}
.bundlelist a{
    font-size:18px;
}
/********************/
/********************/
/********************/

/******/
.block {
    padding:25px 30px;
    border-radius:6px;
    background-color:#eee;
    margin-top:20px;
    margin-bottom:20px;
}
.block.bigtext {
    font-size:22px;
    font-family: Roboto Slab, sans-serif;
}
.block.green {
    color:#12522a;
    background-color: #b4e3c8;
}
.block.blue {
    color:#133c57;
    background-color: #b4d3e7;
}

.block.yellow {
    color:#734d12;
    background-color: #fbdfb3;
}

.block.red {
    color:#5e1d16;
    background-color: #f0c9c5;
}

.block.purple {
    background-color:#d8bee2;
    color: #432051;
}

.block.center {
    text-align:center;
}

.cta {
    padding:7px 18px;
    border-radius:5px;
    color:white;
    background-color:#555;
    display:inline-block;
    margin-bottom:10px;
}
.cta:hover {
    background-color:#333;
    color:white;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
}
.cta:focus {
    color:white;
    text-decoration:none;
}

.cta.green {
    background-color:#25a45a;
}
.cta.green:hover {
    background-color:#208d4e;
}
.cta.green:active {
    background-color:#1e8549;
}

.cta.blue {
    background-color:#3a89bd;
}
.cta.blue:hover {
    background-color:#216896;
}
.cta.blue:active {
    background-color:#1f628d;
}

.cta.yellow {
    background-color:#e69a24;
}
.cta.yellow:hover {
    background-color:#c6851f;
}
.cta.yellow:active {
    background-color:#ba7d1d;
}

.cta.red {
    background-color:#bc392c;
}
.cta.red:hover {
    background-color:#a23226;
}
.cta.red:active {
    background-color:#982f24;
}

.cta.purple {
    background-color:#8640a3;
}
.cta.purple:hover {
    background-color:#73378c;
}
.cta.purple:active {
    background-color:#6c3484;
}

.block .cta {
    padding:7px 28px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    display:inline-block;
    margin:0px auto;
    width:auto;
    margin-top:0px;
	margin-bottom:0px;
}
/***HEADER CHANGE*******************************************************************/
body {
	padding-top:72px;
}

@media all and (max-width: 960px){
	
body {
	padding-top:60px;
}

}
.navigation {
    top:0px;
    left:0px;
    position:fixed;
    width:100%;
    overflow:visible;
   z-index:1300;
background-color:white;
box-shadow:0px 1px 3px rgba(0,0,0,0.13);
}
.navigation2 {
    position:relative;
    margin:0px auto;
    background-color:white;
    border-radius:0px 0px 4px 4px;
    max-width:1040px;
    padding-right:0px;
}
.navigation1 {
    margin:0px 50px;
}

.navlinks,
.navlinks li{
    list-style:none;
    margin:0px;
    padding:0px;
    float:left;
}
.navlinks li a{
    padding:20px 0px;
    margin-right:25px;
    display:block;
    float:left;
    color:#777;
    font-size:16px;
}
.navlinks li a span,
.navlinks li a b,
.navlinks li a strong{
  font-weight:300;
    display:inline;
}

.navlinks li a strong {
    display:none;
}

@media (max-width: 1160px) {
    .navlinks li a strong { display:inline; }
    .navlinks li a span { display:none; }
    .navigation1 {
        margin:0px 20px;
    }
}

.navlinks li a:hover{
    color:#000;
    padding-bottom:17px;
    border-bottom:3px solid #bbb;
}

.navlinks li a.on{
    color:#000;
    font-weight:400;
    padding-bottom:17px;
    border-bottom:3px solid #0095FF;
}

.navlinksright,
.navlinksright li{
    list-style:none;
    margin:0px;
    padding:0px;
    float:right;
}
.navlinksright li a{
    padding:20px 0px;
    margin-right:25px;
    display:block;
    float:right;
    color:#bbb;
}
.navlinksright li:first-child a{
    margin-right:0px;
}

.navlinksright li a:hover{
    color:#000;
}
#showmobilemenu {
    float:left;
    position:relative;
    height:56px;
    text-align:center;
    margin-right:0px;
    display:none;
}
#showmobilemenu span.icon-menu{
    font-size:40px;
    margin-top:10px;
    display:block;
    color:#bbb;
    float:left;
    margin-left:20px;
}
#showmobilemenu span.icon-x{
    font-size:22px;
    margin-top:17px;
    display:block;
    color:#bbb;
    float:left;
    margin-left:20px;
    display:none;
}
#showmobilemenu.showx span.icon-x {
    display:block;
}
#showmobilemenu.showx span.icon-menu {
    display:none;
}

@media (max-width: 860px) {
    .navigation1 {margin:0px 0px; }
    .navigation2 {border-radius:0px;}
    .navlinks {display:none;}
    .navlinksright {display:none;}
    #showmobilemenu {display:block;}
}
/*******************/
.logoholder {
    height:56px;
    margin-left:0px;
    float:left;
    margin-right:10px;
	position:relative;
	left:-3px;
}
.logoholder2 {
    width:59px;
    height:56px;
    margin:0px auto;
    text-align:Center;
}
.logoholder2 a{
    display:block;
    width:59px;
    height:56px;
}
.logoholder2 a span.icon-m-logo{
    width:29px;
    color:#007BD9;
    font-size:38px;
    margin-top:12px;
    display:inline-block;
}

@media (max-width: 860px) {
    .logoholder {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:0px;
    }
}
/*****************/
#navlinksCTA,
#navlinksCTA li{
    float:right;
    margin:0px;
    padding:0px;
    list-style:none;
    padding:10px;
    padding-right: 8px;
}

#hdr-signuplink {
    background-color:#eee;
    padding:7px 18px;
    color:#222;
    font-weight:400;
    border-radius:20px;
    margin-right: 0px;
    transition:background 0.4s, color 0.4s;
}
#hdr-signuplink.enable {
    background-color:#42A726;
    color:#fff;
    transition:background 0.4s, color 0.4s;
}
#hdr-signuplink.enable:hover {
    background-color:#56BE3B;
    color:#fff;
    transition:background 0.1s, color 0.1s;
}
#hdr-signuplink b{
    font-weight:400;
}
#hdr-signuplink span{
    font-weight:400;
    display:none;
}
@media (max-width: 780px) {
    
    #hdr-signuplink b{
        display:none;
    }
    #hdr-signuplink span{
        display:inline;
    }
}
#hdr-signuplink:hover {
    background-color:#56BE3B;
    color:#fff;
    transition:background 0.1s, color 0.1s;
}
#hdr-signuplink:active,
#hdr-signuplink.enable:active{
    background-color:#46A12D;
}
#hdr-loginlink {
    padding:5px 0px;
    color:#666;
    font-weight:300;
    border-radius:20px;
    margin-right: 0px;
}
#hdr-loginlink:hover {
    color:black;
}

/***/
#mobilenav {
    background-color:#333;
    border-bottom:1px solid #111;
    display:none;
    z-index:20;
    position:relative;
}
#mobilenav ul,
#mobilenav ul li {
	list-style:none;
  padding:0px;
  margin:0px;
}
#mobilenav ul li a {
    display:block;
    padding:10px 10px;
    color:white;
    background-color:#444;
    margin-bottom:1px;
    font-size:18px;
}
#mobilenav ul li a:hover {
    background-color:#484848;
}
#mobilenav ul li a.on {
    border-left:3px solid #888;
    background-color:#414141;
    padding-left:17px;
}
#mobilenav ul.secondarylinks li a {
    color:#ccc;
    font-size:16px;
}
#mobilenav ul.secondarylinks {
    display:flex;
}
#mobilenav ul.secondarylinks li{
    flex-grow:1;
    
}
#mobilenav ul.secondarylinks li a{
    margin-right:1px;
    
}
#mobilenav ul.secondarylinks li:last-child a{
    margin-right:0px;
    
}
#mobilenav ul.secondarylinks li a{
    text-align:center;
}

@media (min-width: 860px) {
    #mobilenavholder {display:none;}
    #blackoverlayholder {display:none;}
}
#blackoverlay {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    display:none;
    z-index:1000;
}
/******************************/
/********/
.stickybanner {
	background-image:url('https://www.metrilo.com/blog/wp-content/uploads/2017/08/stickybanner-girl-dark2.jpg');
	background-size:cover;
  	display:block;
	background-position:center right;
  border-radius:2px;
  }

.stickybanner2 {
	padding:30px;
	background-image: linear-gradient(-1deg, rgba(0,0,0,0.70) 0%, rgba(216,216,216,0.00) 100%);
	padding-top:90px;
  }

.stickybanner:hover .stickybanner2 {
background-image: linear-gradient(-1deg, rgba(0,0,0,0.39) 0%, rgba(216,216,216,0.00) 100%);
  }

.stickybanner b{
    color:white;
	display:block;
	font-weight:400;
	font-size:22px;
	padding:4px;
  text-shadow:0px 2px 3px rgba(0,0,0,0.5);
  }
.stickybanner:hover .stickybanner b{
  text-shadow:0px 2px 3px rgba(0,0,0,0.7);
  }
.stickybanner span{
    color:black;
	display:inline-block;
	background-color:#FFFDAD;
	padding:6px 16px;
	border-radius:20px;
	margin-top:10px;
	color:black;
  }
 
.stickybanner:hover .stickybanner span{
	background-color:#FFFED2;
  }
 
@media all and (max-width: 960px){
  .stickybanner {
	  background-position:top right;
	}
  .stickybanner2 {
	padding-top:160px;
  }


}
@media all and (max-width: 680px){
  .stickybanner {
	  background-position:top right;
	}
  .stickybanner2 {
	padding-top:120px;
  }


}

/********************************/
.quotebanner .quotebanner_portrait{
	height:120px;
	  background-color:#eee;
  margin-top:10px;
  position:relative;
	  border-radius:4px 4px 0px 0px;
  background-image:url('https://www.metrilo.com/blog/wp-content/uploads/2017/08/petngo1.jpg');
  background-image:url('https://www.metrilo.com/blog/wp-content/uploads/2017/08/petngo-alex.jpg');
  background-size:cover;
}
.quotebanner .quotebanner_quote{
  padding:20px;
	  background-color:#0084F2;
  text-align:center;
}
.quotebanner .quotebanner_quote p{
  color:white;
	  font-style:italic;
	  font-size:20px;
  margin-bottom:5px;
}
.quotebanner .quotebanner_quote span{
  color:white;
	opacity:0.7;
}

.quotebanner .quotebanner_cta{
  background-color: #1B6CAF;
	  padding:12px;
	  border-radius:0px 0px 4px 4px;
  text-align:center;
}

.quotebanner .quotebanner_cta b{
  background-color: #FFEB74;
	  padding:6px 25px;
	  border-radius:4px;
	  color:black;
	  display:inline-block;
}

.quotebanner:hover .quotebanner_cta b{
	  background-color: #F9EDA8;

}
	.qb_chofkaholder {
  position:absolute;
		bottom:0px;
		left:0px;
		width:100%;
		text-align:center;
  height:6px;
}
	.qb_chofkaholder div{    
  position: relative;
    top: -9px;
	  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #0084F2 transparent;
}
/********/
.img-responsive{
    border-radius: 3px;
    margin-bottom: 13px;
}


/****/
#resourcebuttons {
  margin-bottom:40px;
}
#resourcebuttons a {
  background-color:#CC33F0;
  border-radius:3px;
  padding:15px;
  position:relative;
  padding-right:15px;
  display:block;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
#resourcebuttons a:nth-child(1) {
  background-image: linear-gradient(180deg, #009BFF 0%, #2C85FC 100%);
}
#resourcebuttons a:nth-child(2) {
  background-image: linear-gradient(180deg, #377FFB 0%, #5F6BF8 100%);
}
#resourcebuttons a:nth-child(3) {
  background-image: linear-gradient(180deg, #6C65F7 0%, #9450F4 100%);
}
#resourcebuttons a:nth-child(4) {
  background-image: linear-gradient(180deg, #A04AF4 0%, #CC33F0 100%);
}
#resourcebuttons a span {
  color:white;
  font-weight:400;
  float:left;
  text-align:left;
  padding-right:15px;
  font-size:16px;
  
}
  
#resourcebuttons a b {
  font-weight:400;
  background-color:#FFF400;
  float:right;
  background-image: linear-gradient(180deg, #FFF400 0%, #FFCB00 100%);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.27);
  border-radius: 2px;
  color:#710404;
  padding:6px 8px;
}
#resourcebuttons a:hover b {
  background-image: linear-gradient(180deg, #FFF97F 10%, #FFCC06 99%);
  color:#990000;

}
#resourcebuttons a img {
  width:48px;
  margin-right:15px;
}


@media (max-width:1100px) {
	#resourcebuttons a span {
	  font-size:14px;
	}
  #resourcebuttons a b {
	font-size:12px;
  }
}
@media (max-width:900px) {
	#resourcebuttons a span {
	  font-size:18px;
	}
}
/**********************************/

/*****/

.newnavlinks {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 60%;
    list-style: none;
    display: flex;
    justify-content: center;

}
@media (max-width:860px) {
	.newnavlinks {display:none};
}
.newnavlinks li {
    font-size: 15px;
    position: relative;
}

.newnavlinks li a {
    display: block;
    line-height: 56px;
    transition: color 0.3s;
    color: #000;
    padding: 0px 15px 4px 15px;
    position: relative;
}

.newnavlinks li a strong {
    position: absolute;
    bottom: 0px;
    left: 15px;
    width: calc(100% - 30px);
    height: 3px;
    background-color: #aaa;
    display: none;
}

.newnavlinks li b strong {
    position: absolute;
    bottom: 0px;
    left: 15px;
    width: calc(100% - 30px);
    height: 3px;
    background-color: #aaa;
    display: none;
}

.newnavlinks li a.on strong {
    display: block;
}

.newnavlinks li b.on strong {
    display: block;
}

/*
.newnavlinks:hover li a {
    color: #888;
    transition: color 0.3s;
}

.newnavlinks:hover li b {
    transition: color 0.3s;
    color: #888;
}
*/


.newnavlinks li a:hover {
    color: #000 !important;
    background-color: #f3f3f3;
}

.newnavlinks li a:active {
    color: #000 !important;
    background-color: #eee;
}

.newnavlinks li b {
    display: block;
    line-height: 56px;
    color: #000;
    font-weight: 300;
    transition: color 0.3s;
    padding: 0px 13px 4px 15px;
    position: relative;
}

.newnavlinks li b span {
    font-size: 22px;
    position: relative;
    top: 6px;
    transition: color 0.3s;
    color: #ccc;
    display: inline-block;
}

.newnavlinks li b:hover span {
    color: #888;
    transition: color 0.3s;
}

.newnavlinks li:hover b span {
    color: #444;
    transition: color 0.3s;
}

.newnavlinks b:hover {
    color: #000 !important;
    cursor: default;
    background-color: #fefefe !importnant;
}

.newnavlinks b.dropped {
    color: #000 !important;
    cursor: default;
    background-color: #eee;
}

.newnavlinks li b.dropped span {
    color: #888;
    transition: color 0.3s;
}




.newnavlinks li .nv3-subnav {
    position: absolute;
    top: 40px;
    left: -10px;
    background-color: white;
    border-radius: 5px;
    padding: 10px 0px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1), 0px 2px 3px rgba(0, 0, 0, 0.1);

}

.newnavlinks li .nv3-subnav a {
    display: flex block;
    padding: 10px 20px;
    line-height: 1;
    white-space: nowrap;
    line-height: 30px;
    height: 50px;
    width: 250px;
    position: relative;
}


.newnavlinks li .nv3-subnav a.on::after {
    content: "";
    width: 3px;
    height: 20px;
    background-color: #aaa;
    position: absolute;
    display: block;
    top: 15px;
    left: 0px;
}

.newnavlinks li .nv3-subnav a span {
    line-height: 30px;
    height: 30px;
    display: block;
    float: left;

}

.newnavlinks li .nv3-subnav a i {
    color: #007BD9;
    font-size: 30px;
    display: block;
    float: left;
    margin-right: 15px;
}

.newnavlinks li .nv3-subnav a i.lnr-launch {
    margin-left: 10px;
    font-size: 16px;
    color: #aaa;
    position: relative;
    top: 7px;
}

.newnavlinks li:hover .nv3-subnav {
    top: 50px;
    visibility: visible;
    opacity: 1;
}