/*
Theme Name: WDN
Author: WebdevelopersNotes
Author URI: https://www.webdevelopersnotes.com/
Description: Theme developed By Keshav Naidu.
Version: 2.1
Tags: white, orange, Responsive
Text Domain: www.webdevelopersnotes.com
*/
/* -------------------------------------------------------------- */

html {-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */}

body {font-size: 15px; color: #000; text-align: left; font-family:'Open Sans', Arial; line-height: 150%; margin: 0px; padding: 0px;}
strong {font-weight: 600;}
h1, h2, h3, h4 {padding: 7px 0px 3px 0px; margin: 0; font-weight: 300; text-align: left; line-height: 125%;}
h1 {font-size: 28px; color: #789a11; padding: 10px 0px 6px 0px;}
h1.withlink {font-size: 28px;}
h2 {font-size: 22px; color: #FF6600; padding: 10px 0px 3px 0px;}
h3 {font-size: 18px; color: #000; padding: 15px 0px 2px 0px;}
h4 {font-size: 16px;}

p {padding: 3px 0px 15px 0px; margin: 0; text-align: left; line-height: 175%;}
p.question {background: url(images/question.png) no-repeat 0px 8px; margin: 10px 0px 5px 0px; padding: 0px 15px 0px 45px; color: #666; font-style: italic;}
.v-name {font-style: normal; font-weight: bold;}
p.ms-no {padding: 10px 10px 10px 70px; margin: 0 0 12px 0; background: #f5f5f5 url(images/ms-no.png) no-repeat left;}
p.ms-yes {padding: 10px 10px 10px 70px; margin: 0 0 12px 0; background: #f5f5f5 url(images/ms-yes.png) no-repeat left;}

/* MS: DO NOT DELETE */
blockquote {background: url(images/quotes-CHANGE.png) no-repeat 0px 8px; margin: 10px 0px 5px 0px; padding: 0px 15px 0px 45px;}
/* MS: MAYBE delete */
blockquote.question {background: #990000 url(images/question-CHANGE.png) no-repeat 0px 8px; margin: 10px 0px 5px 0px; padding: 0px 15px 0px 45px;}
/* MS: DO NOT DELETE */
.codeword {background: #ccc; font-family: Courier, monospace; font-weight: 300;}
.codeword-light {background: #f0f0f0; font-family: Courier, monospace; font-weight: 300;}
.high-word {background: #f0f0f0; font-weight: 300;}
.button-eff {background: #f0f0f0; padding: 2px 10px 5px 10px; border-radius: 5px; -webkit-border-radius: 5px; display: inline-block; text-align: center; border: none; box-shadow: inset -1px -3px 0 0 rgba(0,0,0,0.2);}
/* MS: P like Figure */
p.justimage {width: 100%;text-align: center; background: #414a58; margin: 5px 0px 15px 0px; padding: 10px; border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
form {padding: 0px; margin: 0px; margin-bottom: 10px; text-align: left;}
hr {background: #f0f0f0; height: 1px; border: none; padding: 0; margin: 5px 0;}

#post-content table {width: 100%; font-size: 14px; padding: 0px; margin: 5px 0px 15px 0px; border-collapse: collapse;}
#post-content th {background: #c0c0c0; font-size: 16px; text-align: left; padding: 10px; line-height: 175%; border: 1px solid #f0f0f0; border-collapse: collapse;}
#post-content td {line-height: 175%; padding: 10px; border: 1px solid #f0f0f0; border-collapse: collapse;}
#post-content tr:nth-child(odd) {background: #f8f8f8;}

#post-content table.smalltext {font-size: 11px!important; text-align: left;}
#post-content table.smalltext th {font-size: 11px!important; text-align: left;}
#post-content table.borderless, table.borderless td {border: none!important; border-collapse: inherit;}
#post-content table.borderless th {background: none!important; border: none!important;}
#post-content table.htmltutorial, table.htmltutorial th, table.htmltutorial td {padding: 3px; margin: 5px 0px 15px 0px; border: 1px solid #000; border-collapse: collapse;}

#post-content img.size-thumbnail {width: 20%!important; height: auto;}
#post-content .size {color: #c0c0c0; line-height: 14px; border-radius: 4px; font-size: 13px;  display: inline-block;}
#post-content .getit {color: blue; line-height: 14px; border-radius: 4px; padding: 2px 10px; margin-left: 10px; font-size: 13px; border: 1px solid blue; display: inline-block;}
#post-content img.size-full {width: 100%!important; height: auto;}


.attachment-full {margin: 2px 0 10px 0; width: 100%; height: auto; padding: 0px; border-radius: 0!important; border: 0px solid #f0f0f0; -moz-box-sizing: border-box; box-sizing: border-box; }
.no-bar {display: block; white-space: nowrap;}
.fe-img-caption {font-size: 12px; color: #9f9f9f; border: 1px dotted #f0f0f0; padding: 1px 10px; margin: -15px 0px 10px 0px; -moz-box-sizing: border-box; box-sizing: border-box;}
.fe-img-caption a {color: #747474!important;}

ul {padding: 0px 0px 10px 0px; margin: 0px 0px 0px 0px; text-align: left; line-height: 150%; list-style: none;}
ol {padding: 0px 0px 10px 0px; margin: 0px 0px 0px 26px; text-align: left; line-height: 150%;}
ul li, ol li {margin: 0px; }
ol li {padding: 0px 0 0 6px;}

figure {/*display: block; width: 100%; text-align: center; background: #414a58; margin: 5px 0px 15px 0px; padding: 10px; border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box;*/}
figure img {/*border-radius: 8px;*/}

.wp-block-image {width: 100%; height: auto; padding: 10px; margin: 5px 0px 15px 0px; background: #414a58; border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
.wp-block-image img {display: block; width: 100%; height: auto; border-radius: 3px;}

.color-white {background: #fff; border: 1px solid #f0f0f0;}
figure.color-combo {display: inherit!important; width: 50%; float: left; background: none; border: 0px solid #f0f0f0; margin: 0; padding: 8px;}
figure.color-combo img {display: inherit!important; border-radius: 0px!important; width: 100%; border-radius: 0!important; border: 1px solid #f0f0f0; padding: 0px; margin: 0; font-style: italic;}
figcaption {font-size: 12px; font-weight: 400; color: #dae2ee; overflow: hidden;}
figcaption a {color: #dae2ee; text-decoration: underline;}
figcaption a:hover {color: #fff; text-decoration: underline;}
figure.plainimg figcaption {color: #333;}
figure.plainimg figcaption a {color: blue;}
figure.color-combo figcaption {color: #333;}
figure.full-width img, .full-width {display: block; width: 100%!important; height: auto!important;}
figure.full-width p {margin: 0; padding: 0;}

#post-content ul li, #post-content ol li {margin: 1px 0 3px 0;}
#post-content ol.slide-steps {list-style: none; line-height: 175%;}
#post-content ol.slide-steps li {counter-increment: item; margin-top: 2px; margin-bottom: 12px; position: relative; padding-left: 20px;}
#post-content ol.slide-steps li:before {margin-right: 10px; font-size: 18px; line-height: 28px; content: counter(item); background: #5f687a; color: #fff; width: 30px; height: 30px; text-align: center; display: inline-block; border-radius: 2px; font-weight: 300; position: absolute; top: 0px; left: -20px;}
#post-content ol.slide-steps ol, #post-content ol.slide-steps ul {margin: 0; padding: 12px 0 0 20px;}
#post-content ol.slide-steps ol li:before {content: counter(item);}
#post-content ol.slide-steps ul li:before {}


ul.withbullets {padding: 0px 0px 10px 0px; margin: 0px 0px 0px 25px; line-height: 175%; list-style: square; text-align: left;}
pre, code {padding: 10px 5px; font-family: monospace, Arial; margin: 0px 0px 10px 0px; background: #f0f0f0; border: 0px dotted #ccc; color: #000; text-align: left;}
.impred {color: #f00; font-weight: bold;}

.events-list li {font-size: 13px; line-height: 140%; margin-bottom: 12px;}
.events-list li a {font-size: 15px;}

a {
  transition:         all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
}
a {color: #00f; text-decoration: none;}
a:active {color: #f00000;}
a:visited {color: #00f;}
a:hover {color: #f00000; text-decoration: underline;}

.clr {clear: both;}
.hib-clr {clear: both;}
.left {float: left; text-align: left;}
.right {float: right; text-align: right;}

header {width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}

.head-left {float: left; width: 30%; padding: 10px 0 10px 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
.head-left img {/* Logo */ width: 166px; height: auto;}
.head-right {float: right; width: 40%; padding: 18px 0px 0 0; -moz-box-sizing: border-box; box-sizing: border-box;}

.google-search-box, .search-box {float: left; width: 65%; padding: 0;  margin: 0; -moz-box-sizing: border-box; box-sizing: border-box;}
#g-search-middle {width: 100%; margin: 10px 0; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box;}
.g-search-middle-inner {width: 100%; padding: 5px 10px; -moz-box-sizing: border-box; box-sizing: border-box;}
#g-search-middle h4 {color: #000; font-size: 22px; border: 1px solid #f0f0f0; border-left: 5px solid #9dc52c; border-right: none; padding: 4px 10px; margin: 16px 0 10px 0;}
.head-right .search-box {margin-top: 15px;}
.search-box {
	height: 28px;
	position: relative;
	background: #f0f0f0;
	padding: 0;
	-moz-box-sizing: border-box; box-sizing: border-box;
	border: 1px solid #a9a9a9;
	border-radius: 3px;
	overflow: hidden;
}
.search-box input {
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 5px;
	border: none;
	outline: none;
	-moz-box-sizing: border-box; box-sizing: border-box;
}
.search-box .search-submit {
	width: 35px;
	height: 28px;
	border: 0;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0;
	cursor: pointer;
	background: #bababa url(images/search-icon.svg) no-repeat center center;
	background-size: 20px 20px;
}
.search-box .search-submit:hover {background-color: #707070;}
.search-onpage {margin: 0; width: 100%; background: #fff; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box;}
.search-onpage input {float: left; width: 68%; border: 1px solid #efefef; font-family: 'Open Sans', Arial; font-size: 16px; font-weight: 300; padding: 6px; border: 1px solid #c0c0c0; outline: none; border-radius: 2px; -moz-box-sizing: border-box; box-sizing: border-box;}
.search-onpage input:focus {box-shadow: inset 2px 3px 0px 0px rgba(0,0,0,0.1);}
.search-onpage input.psearch {cursor: pointer; float: right; width: 30%; text-align: center; color: #fff; background: #749b11; border: none;}

.social-icons {display: block; position: absolute; right: 10px; top: 33px; padding: 0px 0 0 0;}
.social-icons a {display: inline-block; text-decoration: none; font-size: 20px; color: #333; background: #bababa; width: 35px; height: 28px; text-align: center; line-height: 16px; border-radius: 3px; overflow: hidden; padding: 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
.social-icons a img {height: 100%;}
.social-icons a:hover {color: #f0f0f0; background: #333;}
a.facebook:hover {background: #2d6196;}
a.twitter:hover {background: #24bcca;}
a.pin:hover {background: #be0e0e;}

/* @@@@@@@@@@@@@@@@@@  Navigation @@@@@@@@@@@@@@@@@@@ */
nav {width: 100%; background: #c56d05; border-bottom: 4px solid #ff9900; text-align: center;}
.nav {width: 100%; margin: 0 auto; padding: 0; font-size: 16px; line-height: 140%; font-weight: 300; text-align: center!important;}
.nav {text-align: right; margin: 0; padding: 0; position: relative;}
.nav li {display: inline-block; padding: 0px 0px;}
.nav li a {color: #fff; display: block; list-style: none; text-decoration: none; padding: 9px 14px; border-left: 1px solid #b16204;}
.nav li a.first {border-left: none;}
.nav a:hover {color: #95be28; text-decoration: none!important;}
.nav ul {min-width: 180px; margin: 0 0 0 1px; padding: 0; display: none; background: #ff9900; position: absolute; text-align: left; font-size: 15px; border: 1px solid #ff9900; box-shadow: 8px 8px 30px 0px rgba(0,0,0,0.1); z-index: 200;}
.nav li:hover ul {display: block;}
.nav ul li {display: block; margin: 0; padding: 0;}
.nav li:hover a { position:relative; color: #fff; background: #ff9900;}
.nav ul li a { color: #fff; border: none; }
.nav li:hover ul li a:hover {color: #fff; background:#e37b00; }
.nav-button {display: none;}

/* @@@@@@@@@@@@@@@@@@@ BCN @@@@@@@@@@@@@@@ */
p.bcn {margin: 0px; padding: 10px 0px 0px 5px; font-size: 11px; line-height: 140%; color: #7e7e7e;}
p.bcn a span {}
p.bcn a {color: #000; text-decoration: none;}
p.bcn img {width: 12px; margin: 0 0px -1px 0; padding: 0 2px 0 0;}

#container {width: 100%; padding: 0;}
.centerd {width: 1100px; margin: 0 auto;}
.relative {position: relative;}

#leftcolumn {width: 76%; float: left; margin: 0; padding: 0px; background: #fff; box-shadow: 5px 5px 60px 0px rgba(0,0,0,0.1); -moz-box-sizing: border-box; box-sizing: border-box;}
#col1 {float: left; width: 27%; padding: 10px 10px; border-right: 1px solid #f5f5f5; -moz-box-sizing: border-box; box-sizing: border-box;}
#col2 {float: right; width: 73%; padding: 0 20px; padding-bottom: 15px; overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box;}

#leftcolumn img {border-radius: 6px;}
#rightcolumn {width: 24%; font-size: 14px; float: right; margin: 0; padding: 10px 15px; -moz-box-sizing: border-box; box-sizing: border-box;}

#rightcolumn ul {font-size: 14px; margin: 0; padding: 0 0 8px 15px; line-height: 140%;}
#rightcolumn img {width: 100%;}
#rightcolumn ul li {margin: 1px 0 1px 0; padding: 5px 0; border-bottom: 0px dotted #ebebeb;}
.right-box, .left-box {width: 100%; margin: 0px; color: #fff; padding: 0px 12px 10px 12px; -moz-box-sizing: border-box; box-sizing: border-box; }
.right-box {margin: 0 0 10px 0;}
.right-box h3, .left-box h3 {font-size: 16px; padding: 8px 0 8px 0; margin: 10px 0 5px 0;}
.right-box h3 {padding: 5px 0 5px 10px;  border-left: 4px solid #9dc52c; border-bottom: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;}
.right-box h3 a {color: #000; text-decoration: none;}
.left-box ul {font-size: 14px; margin: 0; padding: 0 0 8px 0; line-height: 140%;}
.left-box ul li {margin: 1px 0 1px 0; padding: 3px 0;}
.left-box img {width: 100%; height: auto; border-radius: 4px!important;}
.right-box p {color: #555; margin: 0; padding: 0 0 0 15px;}

.content-box {float: left; width: 50%; padding-right: 30px; -moz-box-sizing: border-box; box-sizing: border-box;}

.pagedetails {margin: 10px 0px 10px 0px; font-size: 14px; padding: 12px 20px; background-color: #fff; border: 1px dotted #f90;}
.pagedetails p.backlink {padding: 20px; text-align: center;}

/* @@@@@@@@@@@@@@@@@@@@@@@ HUB @@@@@@@@@@@@@@@@@*/
.hub-box {width: 25%; float: left; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-padder {width: 100%; padding: 5px 12px; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-box ul, p {}
.hub-box h4 {font-size: 15px;}
.hub-box-inner {width: 100%; height: 263px; overflow: hidden; border: 1px solid #ddd; border-radius: 4px; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box;}

.gad {/*google ad*/width: 100%; text-align: center; margin: 0 auto; overflow: inherit;}
.eventline {display: block; margin: 0; padding: 0; color: #777;}

ul.event-list {margin: 0 0 0 0px!important; color: #0000ff;}
ul.event-list li {list-style: square; margin-left: 20px!important; }
.vr-middle {width: 100%; display: table; min-height: 222px; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
.hub-quiz-heading {width: 100%; position: relative; overflow: hidden;}
.title-fade {display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 100;
background: -moz-linear-gradient(left,  rgba(254,252,234,0) 0%, rgba(255,255,255,0.96) 68%, rgba(255,255,255,1) 71%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(254,252,234,0) 0%,rgba(255,255,255,0.96) 68%,rgba(255,255,255,1) 71%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(254,252,234,0) 0%,rgba(255,255,255,0.96) 68%,rgba(255,255,255,1) 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fefcea', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.full {/*hub large box like slider*/width: 50%!important;}
.hub-slider {width: 50%; float: left; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box;}

.hub-quote {width: 100%; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; clear: both;}
.hub-quote-inner {font-family: Times; font-style: italic; display: block; width: 100%; border-radius: 4px; border: 1px solid #ddd; font-size: 26px; text-align: left; padding: 0px; line-height: 150%; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-quote-inner h3 {display: none;}
.hub-quote-inner span {display: block; text-align: right; color: #878787; font-size: 13px; line-height: 140%;}
.hub-quote-inner span.quote-auth {color: #000; font-size: 16px;}

.hub-fact {font-size: 18px; line-height: 155%; display: table-cell; vertical-align: middle;}
span.fact-small {font-size: 15px!important;}
.hub-box h3, .hub-quote-inner h3, .hub-leader-inner h3 {font-size: 20px; font-family: 'Open Sans', Arial!important; font-style: normal; font-weight: 300; color: #000; margin: 0 0 4px 0; padding: 4px 10px; background: #f6f6f6;}
.hub-box h3 a {color: #000;}
.hub-box h3 a:hover {text-decoration: none;}
.hub-box h4 {margin: 0; padding: 7px 0 3px 0; font-weight: 400; line-height: 150%;}
.hub-box h4 a:hover {text-decoration: none!important; color: #001fff!important;}
.hub-box ul {margin: 0px; padding: 10px 0 0 0;}
.hub-box ul li {margin: 0 0 9px 0; line-height: 135%;}

.hub-box form {width: 100%; display: block; margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-box form textarea {width: 100%; padding: 6px 10px; height: 60px; font-size: 15px; border: 1px solid #e6e6e6; box-shadow: inset 0px 1px 0px 0 rgba(0,0,0,0.1); border-radius: 3px; font-family: 'Open Sans', Arial; outline: none; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-box form textarea:hover {border: 1px solid #cecece;}
.hub-box form textarea:focus {box-shadow: inset 0px 2px 1px 0 rgba(0,0,0,0.2);}
.ask h4 {margin: 10px 0 -6px 0; padding: 0; font-size: 14px;}
.ask ul {padding-left: 20px;}
.ask ul li {color: #0000ff; list-style: inherit!important; list-style-type: square; }
input.ask-bt {float: right; width: 60px; height: 60px; color: #fff; background: #bbd953; border-radius: 4px; font-size: 17px; display: block; margin: 0; padding: 0; border: none!important; text-transform: uppercase; cursor: pointer; text-align: center!important; box-shadow: none!important; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none;}
input.ask-bt:hover {background: #c9e568;}
input.ask-bt:active {background: #b4ce58;}
.question-button {color: #fff!important; font-size: 18px!important; text-align: center; display: block; background: #bbd953 url(images/ask.svg) no-repeat top left; background-size: 40px 40px; background-position: 20px 10px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; border-radius: 4px; padding: 10px 15px; text-decoration: none!important;}
.question-button-small img {width: 50px!important; height: auto; border: none;}
/*.question-button:hover {background: #c5e556; text-decoration: none!important;}
.question-button:active {background: #a8c150;}
*/
.ask-commented {display: block; border: 1px dotted #c0c0c0; padding: 6px 10px; margin: 0 0 15px 0; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none;}
.quizbox .size-thumbnail {width: 75px!important; height: auto; float: left; margin: 8px 10px 5px 0px; border-radius: 4px;}
.joke-box img {width: 100%!important; height: auto; margin: 0 auto; display: block; border-radius: 4px!important; border: none;}
.hub-leader {/*google ads*/width: 100%; margin: 0; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box;}
.hub-leader-inner {width: 100%; border: 1px solid #ddd; border-radius: 4px; -moz-box-sizing: border-box; box-sizing: border-box;}

#ask-page {width: 100%; margin: 0; padding: 10px 0 0 0; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
.success {width: 100%; background: #fff; position: absolute; top: 0; left: 0; height: 100%; font-size: 15px; line-height: 160%;}
#ask-page label {display: inline-block; font-size: 22px; font-weight: 200; color: #FF6600; margin: 0 3px 4px 0; padding: 0;}
#ask-page label span {color: red;}
#ask-page textarea, #ask-page input {width: 100%; font-family: 'Open Sans', Arial; color: #666; font-size: 18px; padding: 10px; margin: 0 0 15px 0; display: block; border: 1px solid #e6e6e6; box-shadow: inset 0px 2px 3px 0 rgba(0,0,0,0.1); outline: none; border-radius: 3px; -moz-box-sizing: border-box; box-sizing: border-box;}
#ask-page textarea {min-height: 110px;}
#ask-page textarea:focus, #ask-page input:focus  {border-color: #c0c0c0;}
#ask-page input.ask-bt {margin-top: 8px; color: #fff;}
#ask-page .info {color: red;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@ Related posts and ads on single @@@@@@@@@@@@@@@@@@@@@ */

.bottom-ads {/*google ads*/width: 100%; padding: 0 0 10px 0;}
.related-posts {width: 100%; margin: 0; padding: 5px 0 10px 0;}
.related-posts h4, .bottom-ads h4 {color: #000; font-size: 22px; border: 1px solid #f0f0f0; border-left: 5px solid #9dc52c; border-right: none; padding: 4px 10px; margin: 16px 0 10px 0;}
.related-box {float: left; width: 50%; margin: 0; padding: 8px 2px; -moz-box-sizing: border-box; box-sizing: border-box;}
.related-box h5 {font-size: 15px; margin: 0; padding: 0 0 0 0; font-weight: normal;}
.related-box img {float: left; width: 90px; height: auto; margin: 0 10px 0 5px;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Posts on Home / Archive @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.post {width: 100%; border-bottom: 1px solid #f0f0f0; margin: 0 0 5px 0;  padding: 12px 0;  -moz-box-sizing: border-box; box-sizing: border-box;}
.post h2 {font-weight: 400; font-size: 19px; padding: 0 0 6px 0; margin: 0;}
.post img {width: 18%; border: 1px solid #f0f0f0; height: auto; float: left; margin: 10px 15px 5px 0; padding: 0; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.post p {padding: 0; margin: 0;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Commenting @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
#commenting {width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px 0px;}
#commenting form {display: block; padding: 15px; background: #f0f0f0; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 4px;}
#commenting h5 {font-size: 50px; line-height: 120%; padding: 15px 0px 15px 0px; margin: 0; color: #f39222; border-top: 5px solid #f39222; font-weight: 400; text-transform: uppercase; font-family: 'Oswald', Arial;}
.padder {width: 33.3%; float: left;} 
#commenting input, #commenting textarea {width: 100%; font-family: "Open Sans", Arial; font-size: 14px; padding: 10px; margin: 10px 0; border: none; border-radius: 4px; box-shadow: 0 0 0 0px #dbdbdb; -moz-box-shadow: 0 0 0 0px #dbdbdb; outline: none; -moz-box-sizing: border-box; box-sizing: border-box;}
#commenting textarea {background: #fff url(images/comment-comment.png) no-repeat top left;}
#commenting input#cname {background: #fff url(images/comment-name.png) no-repeat top left;}
#commenting input#cemail {background: #fff url(images/comment-email.png) no-repeat top left;}
#commenting textarea, #commenting input {padding-left: 40px; background-position: 8px 10px!important;}
#commenting input:focus, #commenting textarea:focus {box-shadow: inset 0 1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 1px 1px 1px rgba(0,0,0,0.2);}
#commenting input.comment-submit {display: inline-block; width: auto; float: right; color: #fff; font-weight: 200; text-transform: uppercase; font-size: 15px; background: #da831c; border: none; box-shadow: none; -moz-box-shadow: none; cursor: pointer; border-radius: 2px; padding: 10px 30px; -webkit-appearance: none;}
#commenting input.comment-submit:hover {background: #9dc52c;}
#commenting ul {margin: 0; padding: 0px 0 12px 0;}
#commenting ul li {display: block; list-style: none;}
#commenting ul li:nth-child(odd) {background: #f5f5f5;}
.comment {width: 100%; margin: 0; padding: 30px 10px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 15px; border: 1px solid #f5f5f5; border-radius: 4px;}
.awaiting {background: #e3f0bd; color: #7d9b29; font-size: 12px; display: block; width: 100%; margin: 0; padding: 1px 10px;}
.comment div, .comment span, .comment p {-moz-box-sizing: border-box; box-sizing: border-box;}
.comment-left {float: left; width: 10%; padding-right: 0px;}
.comment-left img {width: 100%; height: auto; border-radius: 2px;}
.comment-right {float: right; width: 89%; padding: 0px 0px 0 12px; }
.comment-head {display: block; width: 100%; color: #c0c0c0;}
.comment-head strong {color: #000; font-weight: 400;}
.comment p {margin: 0; padding: 3px 0px 0 0px; }

.nxt-nav {width: 100%; margin: 30px 0px; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; color: #606569; text-transform: capitalize; border: 1px solid #f0f0f0;}

.wp-caption {display: block; width: 100%!important; color: #fff; margin: 2px 0 10px 0;}
.wp-caption img {width: 100%; height: auto; border-radius: 0!important; }
.wp-caption p {font-size: 12px; color: #000; background: #f0f0f0; margin: 0; padding: 1px 5px; width: auto!important; -moz-box-sizing: border-box; box-sizing: border-box; }

img.alignleft {float: left; margin: 8px 15px 5px 0px;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;}
img.alignright {float: right;  margin: 8px 0px 5px 15px; }
img.alignnone {display: inline-block; margin: 10px 0;}


.score {
	display: block;
	width: 70px;
	height: 70px;
	float: left;
	margin: 5px 10px 10px 0;
	line-height: 60px;
	font-weight: 300;
	font-size: 28px;
	text-align: center;
	border-radius: 50%;
	border: 4px solid #c0c0c0;
	position: relative;
}
.green {border-color: #76bc47;}
.red {border-color: #ef4a2f;}
.orange {border-color: #f39321;}

.score:before {
	content: 'Score';
	position: absolute;
	font-size: 12px;
	top: 20px;
	text-transform: uppercase;
}

.pagenav ul {padding: 5px 5px; margin: 20px 0px; font-size: 15px; text-align: center; line-height: 240%;}
.pagenav ul li {list-style: none; margin: 0; display: inline; }
.pagenav ul li a {padding: 5px 10px; color: #999; border-radius: 4px; border: 1px solid #ccc;  text-decoration: none; color: #999;}
.pagenav ul li a:hover, .pagenav ul li a.thispage {background: #9ec713; border: 1px solid #9ec713; color: #fff;}

.happybirthday-box {width: 100%; background: #f7564b url(images/happybirthday-box.png) no-repeat center left; background-position: 9px 8px; color: #fff; padding: 10px 10px 10px 80px; -moz-box-sizing: border-box; box-sizing: border-box;}
.happybirthday-box h3 {color: #fff; font-size: 27px; margin: 0; padding: 0;}
.happybirthday-box span {font-size: 14px; margin: 0; padding: 0;}
.quotes-onpage {font-family: Times; font-style: italic; display: block; width: 100%; font-size: 23px; padding: 0 0 0 20px; -moz-box-sizing: border-box; box-sizing: border-box;}
.quotes-onpage p {line-height: 120%;}
.quotes-onpage p:before {content: "";}
.quotes-onpage span {color: #777; font-size: 18px;}
.quick-facts-oncatpage {margin: 2px 0 20px 0; padding: 0; position: relative;}
.quick-facts-oncatpage img {width: 100%; margin: 0; padding: 0;}
.quick-facts-oncatpage p {width: 100%; margin: 0; padding: 0; text-align: right; position: absolute; bottom: 2px; right: 3px;}
.quick-facts-oncatpage p a {font-size: 12px; line-height: 130%; color: #fff; display: inline-block; padding: 2px 5px; border-radius: 2px; background: #000;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ #pagination @@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.pagination {clear:both; margin: 0 auto; padding: 10px 0; position:relative; font-size: 14px; text-align: center;}
.pagination span, .pagination a {width:auto; display:inline-block; margin: 10px 2px 2px 0; padding: 0px; text-decoration:none; color:#c0c0c0; border-radius: 3px; font-weight: 300; font-size: 15px; line-height: 37px;}
.pagination span.pagi-info {font-size: 0.7em!important; margin: 0; line-height: 100%;}
.pagination a {text-align: center; width: 38px; height: 38px; color:#606569; background: none; border: 1px solid #c0c0c0;}
.pagination a:hover{color:#fff; background: #f19100; border: 1px solid #f19100;}
.pagination .current{display:inline-block; text-align: center; padding: 0px; background: none; border: 1px solid #f19100; color:#f19100; width: 38px; height: 38px; border-radius: 3px;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Footer @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

footer {width: 100%; font-size: 12px; padding: 20px; margin: 10px 0 0 0; color: #777; background: #f0f0f0; text-align: center; border-top: 3px solid #ff9900; -moz-box-sizing: border-box; box-sizing: border-box;}
footer p {text-align: center;}
.small-text {font-size: 12px!important;}

.share-bar {display: none; width: 100%; margin: 0; padding: 0; position: fixed; bottom: 0; z-index: 900;}
.share-bar:hover {opacity: 1;}
.share-bar a {color: #fff; font-size: 19px; width: 25%; padding: 10px 0; display: block; float: left; background: #5cbe4a; text-align: center;}
.share-bar img {width: 18px; height: auto;}
.share-bar a:hover, .share-bar a:active {text-decoration: none;}
a.sb-whatsapp {background: #5cbe4a;}
a.sb-fb {background: #4d70a8;}
a.sb-twitter {background: #01baf2;}
a.sb-gplus {background: #e3401d;}
a.sb-pin {background: #bd081c;}
a.search-icon {display: none;}

#wdn-gdpr-box {
  display: none;
  z-index: 600;
  position: fixed;
  width: 100%;
  right: 0;
  bottom: 0px;
  padding: 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  background: transparent;
  text-align: center;
  -moz-box-sizing: border-box; box-sizing: border-box;
}
#wdn-gdpr-box p {line-height: 180%; margin: 0; padding: 0; padding-right: 50px;}
#wdn-gdpr-box p a {text-decoration: underline!important;}
#wdn-gdpr-box p a:hover {text-decoration: underline;}
#wdn-gdpr-box .centerd {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c26b04;
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  -moz-box-sizing: border-box; box-sizing: border-box;
}
#wdn-gdpr-close {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  font-size: 10px;
  border: none;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  background-color: #c26b04;
  text-align: center;
  border: 2px solid #fff;
  outline: none;
}
#wdn-gdpr-close:hover {background: #333;}
#wdn-gdpr-close:active {background: #000;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Responsive Starts @@@@@@@@@@@@@@@@@@@@@@@@@@@ */
@media (max-width: 1100px) {
.centerd {width: 100%; padding: 0 0px;}
}

@media (max-width: 1070px) {
.head-right {width: 50%;}
.nav {font-size: 16px;}
.nav li a {padding: 9px 12px;}
}

/* @@@ Ipad Land 1024 Screen @@@ */
@media (max-width: 1024px) {
.nav {font-size: 16px;}
.nav li a {padding: 9px 10px;}
.hub-box-inner {height: 245px; overflow: hidden;}
.hub-box-inner ul,
.hub-box-inner p {font-size: 14px;}
.hub-fact {font-size: 15px;}
.hub-box ul, .hub-box p {font-size: 13px;}
}

/* @@@ Custom NON device 980px Screen @@@ */
@media (max-width: 980px) {
.google-search-box {width: 65%;}
.nav li {width: 20%; float: left; display: block; border-top: 1px solid #b16204;}
.nav li a {color: #fff; display: block; list-style: none; text-decoration: none; background: #c26b04;}
.nav ul li {width: 100%; border-top: none;}
.nav ul li a {border-top: 1px solid #ed8f01;}
#rightcolumn {padding: 10px 8px;}
#rightcolumn ul {font-size: 13px;}
.hub-box-inner {height: 233px; overflow: hidden;}
.hub-fact {font-size: 14px;}
.hub-fact h4 {font-size: 14px;}
.hub-box ul, .hub-box p {font-size: 12.5px;}
}

/* @@@ iPad Portrait 768px Screens @@@ */
@media (max-width: 768px) {
body {font-size: 16px;}
h1 {font-size: 22px;}
h2 {font-size: 20px;}
h3 {font-size: 17px;}
h4 {font-size: 15px;}
.bcn {display: none;}
.head-left {width: 40%;}
.head-right {width: 60%;}

.google-search-box {width: 60%;}
#leftcolumn {width: 72%; }
#rightcolumn {width: 28%;}
.right-box {width: 100%;}
.hide-on-mobile {display: none;}
.hub-slider {width: 66.7%;}
.full {width: 66.7%!important;}
.hub-box {width: 33.3%;}
.factbox {width: 100%;}
.hub-box-inner {height: 245px; overflow: hidden;}
.hub-box h3, .hub-quote-inner h3 {font-size: 18px;}
.hub-quote {width: 33.3%; float: left; clear: inherit;}
.hub-quote-inner {width: 100%; font-size: 17px; height: 244px; overflow: hidden;}
.hub-quote-inner p {vertical-align: middle;}
.factbox .hub-box-inner {height: auto;}
#col1 {display: none;}
#col2 {width: 100%;}
.hub-clr {clear: both;}
span.quote-description {display: none!important;}
.nomobile {display: none;}
#wdn-gdpr-box .centerd {width: 100%;}
}
/* @@@ mobiles 667 iPhone 6 Landscape @@@ */
@media (max-width: 667px) {
h1 {font-size: 25px;}
body,
#leftcolumn ul,
#leftcolumn ol,
#leftcolumn p
 {font-size: 17px!important;}
#leftcolumn .fe-img-caption {font-size: 12px!important;}
.google-search-box {display: none;}
.head-left, .head-right, .google-search-box {width: auto; position: absolute; float: inherit; margin: 0; padding: 0px;}
.head-left {padding-top: 5px; padding-left: 10px;}
.head-left img {width: 75px;}
.head-left {margin-bottom: 6px;}
.social-icons {right: 50px; top: 8px;}
a.search-icon {display: inline-block;}
nav {border: none; background: #fff;}
.nav {display: none; background: #c26b04; text-align: left; font-size: 16px; width: 100%!important; padding: 0px 0 0px 0;}
.nav li {display: block; border-top: 1px solid #b16204; width: inherit;}
.nav li a {padding: 12px 16px; background: #c26b04;}
.nav ul {display: none; position: inherit; background: none; box-shadow: none;}
.nav li a:hover {background-color: none;}
.nav ul li {display: block; padding: 0px; text-align: center;}
.nav ul li a {display: block; padding: 2px 30px; color: #fff; font-size: 14px; }
.nav ul li a:before {content: '- '; color: #000;}
.nav li:hover { position:relative; background: none; }
.nav li:hover ul {display: none;}
.nav-button {font-size: 0px; color: #c36c04; display: block; border-bottom: 3px solid #ff9900; padding: 8px 10px 0px 0px; height: 45px; cursor: pointer; text-align: right; -moz-box-sizing: border-box; box-sizing: border-box;}
.nav-button img {width: 25px; margin: 0px 0 0px 0;}
.nav li a, .nav ul {border: none; border-top: 0px solid #b16204;}
#leftcolumn, #rightcolumn {width: 100%; float: inherit; }
#leftcolumn {padding: 0px; box-shadow: none;}
#rightcolumn {padding-top: 20px;}
#rightcolumn ul {font-size: 13px;}
.right-box {width: 100%; padding: 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
.right-box-in {width: 100%; padding: 5px; overflow: hidden; border: 1px solid #f0f0f0; border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box;}
.right-box h3 {border: none!important; background: #f0f0f0; margin: 0; padding: 5px 5px; border-radius: 3px;}
.right-box p {margin-top: 5px;}
.hub-box {width: 50%;}
.hub-box ul, p {font-size: 14px!important;}
.hub-box h4 {font-size: 16px;}
.hub-box-inner {height: 250px;}
.hub-slider, .full {width: 100%!important; float: inherit; height: auto; min-height: auto;}
.hub-quote {width: 100%}
.hub-quote-inner {width: 100%; height: auto; font-size: 26px;}
.factbox {width: 50%;}
.factbox .hub-box-inner {height: 248px;}
.hub-fact {font-size: 16px;}
.question-button {background: #bbd953;}
.search-box {
	width: 100%;
	left: 107px;
	top: -7px;
}
}

/* @@@ mobiles 568px (iPhone 5) Landscape Screens @@@ */
@media (max-width: 568px) {
h1 {font-weight: 400;}
figure img, .justimage img {width: 100%!important; height: auto!important;}
.right-box {width: 100%;}
.padder {width: 100%;}
#rightcolumn ul, #rightcolumn ol, #rightcolumn p {font-size: 15px;}
.hub-box ul, p {font-size: 15px!important;}
.hub-box h4 {font-size: 16px;}
.hub-quote-inner {font-size: 25px;}
.share-bar {display: block;}
.ask-commented, .comment {font-size: 15px;}
footer {padding-bottom: 50px;}
}

/* @@@ mobiles 450 to 212 Portrait Screens @@@ */
@media (max-width: 450px) {
#leftcolumn, #rightcolumn {width: 100%; float: inherit;}
h1 {font-size: 20px;}
footer, footer p {font-size: 12px!important;}
.right-box {width: 50%;}
.content-box {width: 100%; float: inherit;}
#commenting h5 {font-size: 30px;}
.hub-box {width: 100%; float: inherit; min-height: auto!important;}
.hub-box-inner {height: auto!important;}
.vr-middle {height: auto!important; min-height: auto!important;}
.hub-quote {min-height: inherit; float: inherit; width: 100%;}
.full {}
.right-box {width: 100%;}
.right-box-in {height: auto!important;}
.related-box {width: 100%; margin-bottom: 20px;}
.search-box {display: none;}
}
@media (max-width: 375px) {
figure.color-combo {width: 100%!important; padding: 0px; margin: 5px 0;} 
#commenting h2 {font-size: 20px;}

}