/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* sup, sub line-height problem fix */
sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* Global */
body {overflow-y: scroll;}
.home, .home body {height: 100%;}
body {font-family: "Open Sans", sans-serif; font-size: 12px; background: #fafbfb; color: #2f3536;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
textarea, input, button {font-family: inherit; font-size: inherit; color: inherit;}
a {color: #2f3536; text-decoration: none;}

.profile_img {width: 20px; height: 20px; border-radius: 50%; vertical-align: middle;}

/* View */
#content {width: 90%; margin: 70px 5% 20px 5%; padding: 5%; border: 10px solid #2f3536; background: #fff; position: relative; overflow: hidden; float:left;}
#content .img_placeholder {width: 45%; margin-right: 5%; float: left;}
#content .main_img {width: 100%;}
#content h1 {display: none;}
#content p {width: 50%; font-family: 'Georgia','sans-serif'; font-size: 26px; line-height: 150%; float: left;}
#content p b {background: #ffce55; padding: 0 4px;}
#content .more {margin-top: 20px; font-size: 14px;}
#content .more a {border-bottom: 1px solid #ffce55; padding-bottom: 3px;}

#bottom {width: 90%; float: left; margin: 0 5% 10% 5%;}
#top {width: 100%; height: 0px; float: left; background: #2f3536; position: relative; z-index: 2; overflow: hidden;}
#top .message {width: 100%; float: left; line-height: 45px; vertical-align: middle; text-align: center; display: none; color: #fff;}
#top .message a {color: #fff;}
#top .progress_bar {width: 100%; float: left; height: 5px;}
#top .progress_bar .progress {width: 0px; height: 5px; background: #ffce55;}

#social {float: left; }
#tips {float: right; height: 50px; line-height: 50px; vertical-align: middle; margin-right: 20px; color: #bdc3c7;}
#btn_next {float: right; display: block; width: 120px; height: 50px; line-height: 50px; vertical-align: middle; background: #ffce55; text-align: center; font-size: 22px; border-radius: 3px; border: 1px solid transparent;}
#btn_next:hover {border: 1px solid #2f3536; background: url(images/gradient.png) repeat-x #ffce55;}

.share_twitter {display: block; float: left; margin-right: 20px; padding: 0 20px; height: 50px; line-height: 50px; vertical-align: middle; background: #f0f6fa; color: #54ACEE; text-align: center; font-size: 17px; border-radius: 3px; border: 1px solid transparent;}
.share_twitter:hover {border: 1px solid #54ACEE;}
.share_facebook {display: block; float: left; margin-right: 20px; padding: 0 20px; height: 50px; line-height: 50px; vertical-align: middle; background: #f0f6fa; color: #3B5898; text-align: center; font-size: 17px; border-radius: 3px; border: 1px solid transparent;}
.share_facebook:hover {border: 1px solid #3B5898;}
.share_facebook .count {font-size: 12px; color: #3B5898; }
.btn_embed {display: block; float: left; padding: 0 20px; height: 50px; line-height: 50px; vertical-align: middle; background: #f0f0f0; border: 1px solid transparent; color: #bdc1c7; text-align: center; font-size: 17px; border-radius: 3px; }
.btn_embed:hover {border: 1px solid #bdc1c7;}
.share_twitter img, .share_facebook img, .btn_embed img {vertical-align: middle; margin-right: 5px;}
.btn_embed img {margin-top: -3px;}

.sponsored_photo {position: relative; width: 45%; margin-right: 5%; float: left;}
.sponsored_photo .img_placeholder {width: 100%!important; margin: 0!important;}
.sponsored_photo .label {width: 100%; padding: 5px; background: #FFCE54; text-align: center; position: absolute; left: 0; top: 0; opacity: 0.8; font-size: 11px; text-transform: uppercase;}
.sponsored_photo:hover .main_img {box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);}
.sponsored_photo:hover .label {opacity: 1;}

.google-ad-container {width: 100%; overflow: hidden; display: inline-block;}
ins.adsbygoogle[data-ad-status="unfilled"] {display: none!important;}


/* Subscribe */
.subscribe_box {text-align: center;}
.subscribe_box p {width: 100%!important;}
.subscribe_box input {width: 70%; padding: 15px 0; font-size: 46px; border: 1px solid #bdc3c7; text-align: center;}
.subscribe_box input:focus {border: 1px solid #2f3536;}

.subscribe_box .social {display: flex; align-items: center; justify-content: center;}
.subscribe_box .social .fb-like{line-height: normal;}
.subscribe_box .social .twitter-follow-button {margin-left: 20px;}

.valid {color: #6ac300;}
.invalid {color: #ff3131;}
.subscribed_succesfuly {display: none; }
.subscribed_succesfuly img {}


/* Splash */
#splash {width: 100%; height: 50%; display: table; margin-bottom: 100px; float: left; background: #2f3536; position: relative;}
#splash h1 {font-size: 46px; display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-weight: 100; font-family: 'Georgia','sans-serif';}
#splash .btn_start {display: block; width: 120px; height: 50px; line-height: 50px; vertical-align: middle; background: url(images/gradient.png) repeat-x #ffce55; text-align: center; position: absolute; bottom: -25px; left: 50%; margin-left: -60px; font-size: 22px; border-radius: 3px;}

#details {width: 100%; padding: 2% 10% 2% 10%; float: left; text-align: center; color: #bdc3c7;}
#details .description {}
#details a {color: #bdc3c7;}
#details a:hover {color: #7f8c8d;}

/* Inner pages */
#inner_content {width: 90%; margin: 70px 5% 0 5%; padding: 5%; border: 10px solid #2f3536; background: #fff; position: relative; overflow: hidden; float:left; font-family: 'Georgia','sans-serif';}
#inner_content h2 {font-size: 34px; font-weight: bold; margin-bottom: 5%;}
#inner_content p {margin-top: 20px; font-size: 22px; line-height: 150%;}
#inner_content a {border-bottom: 1px solid #ffce55; padding-bottom: 3px;}
#inner_content a:hover {border-bottom: 1px solid #2f3536;}

#inner_content p.seen_on a {border: none;}
#inner_content p.seen_on img {margin-right: 20px;}

/* Embed popup */

#embed-popup {display: none; width: 90%; height: 90%; position: fixed; top: 5%; left: 5%; z-index: 9; border: 1px solid #bdc3c7; background: #fff; }
#embed-popup .preview-box {width: 70%; height: 100%; float: left; position: relative; background: #bdc3c7; overflow: auto;}
#embed-popup .preview-box iframe {display: none; position: absolute; top: 50%; left: 50%;}
#embed-popup .controls-box {width: 30%; height: 100%; padding: 5%; float: left; overflow: auto;}
#embed-popup .controls-box h2 {font-size: 18px; margin-bottom: 20px;}
#embed-popup .controls-box .embed-sizes li {font-size: 14px; cursor: pointer; padding: 20px; margin-bottom: 5px; border: 1px solid #bdc3c7; color: #bdc3c7; border-radius: 3px;}
#embed-popup .controls-box .embed-sizes li:hover {border: 1px solid #2f3536;}
#embed-popup .controls-box .embed-sizes li.current {color: #2f3536; border: 1px solid #2f3536;}
#embed-popup .controls-box #embed-code {width: 100%; height: 110px; padding: 20px; resize: none; border: 1px solid #bdc3c7; background: #fff; white-space: pre-wrap;}
#embed-popup #close {position: absolute; top: 20px; right: 20px; font-size: 22px; cursor: pointer;}

#fade-page {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 8; background: #fafbfb;}

/* Blog */
#blog {width: 90%; margin: 70px 5% 5% 5%; padding: 5%; border: 10px solid #2f3536; background: #fff; position: relative; overflow: hidden; float:left; font-family: 'Georgia','sans-serif';}
#blog ul li {font-size: 22px; line-height: 200%;}
#blog ul li a {border-bottom: 1px solid #ffce55; padding-bottom: 3px;}
#blog ul li a:hover {border-bottom: 1px solid #2f3536;}
#blog ul li .date {color: #bdc3c7; font-size: 14px;}

#article {width: 90%; margin: 70px 5% 5% 5%; padding: 5%; border: 10px solid #2f3536; background: #fff; position: relative; overflow: hidden; float: left; font-family: 'Georgia','sans-serif';}
#article h1 {font-size: 34px; font-weight: bold; margin-bottom: 5%;}
#article p {width: 100%; font-size: 22px; line-height: 150%; display: inline-block; margin-bottom: 3%;}
#article p b {font-weight: bold;}
#article p a {border-bottom: 1px solid #ffce55; padding-bottom: 3px;}
#article p a:hover {border-bottom: 1px solid #2f3536;}
#article p img {width: auto; max-width: 100%;}
#article iframe {max-width: 100%;}

/* General menu */
#menu {width: 100%; height: 50px; float: left; background: #2f3536; position: absolute; z-index: 2; left: 0; top: -50px; color: #bdc3c7;}
#menu .inner {width: 90%; height: 50px; margin: 0 5%;}
#menu a.logo {float: left; background: url(images/gradient.png) repeat-x;}
#menu ul.navigation {float: left;}
#menu ul.navigation li {float: left; line-height: 50px; margin-left: 20px; position: relative;}
#menu ul.navigation li a {color: #fff; font-size: 14px;}
#menu ul.navigation li a:hover {color: #ffce55;}
#menu ul.navigation li .new {background: #ffce55; height: 12px; line-height: 12px; vertical-align: middle; color: #2f3536; font-size: 10px; font-family: 'Open Sans'; padding: 0 3px; position: absolute; right: -35px; top: 20px; border-radius: 3px;}

.button_toggle {width: 20px; height: 20px; position: absolute; left: 5%; top: 25px; background: url(images/icon-hamburger.png) center center; cursor: pointer;}

#menu .button_favorite {width: 20px; height: 20px; position: absolute; right: 5%; top: 75px; background: url(images/icon_favorite.png) no-repeat center bottom;}
/*prefetch image*/ #menu .button_favorite:before {content: url(images/icon_favorite_wait.gif); width: 0; height: 0; visibility: hidden;}
#menu .button_favorite_logged:hover {background: url(images/icon_favorite.png) no-repeat center top;}

#menu .button_favorite_wait {width: 20px; height: 20px; position: absolute; right: 5%; top: 75px; background: url(images/icon_favorite_wait.gif) no-repeat center bottom;}
#menu .button_favorited {width: 20px; height: 20px; position: absolute; right: 5%; top: 75px; background: url(images/icon_favorite.png) no-repeat center top;}
#menu .button_not_logged {width: 20px; height: 20px; position: absolute; right: 5%; top: 75px; cursor: pointer; background: url(images/icon_favorite.png) no-repeat center bottom;}
#menu .button_favorite_logged {cursor: pointer;}

#menu .button_favorite .label {font-size: 12px; color: #bdc3c7; position: absolute; right: 30px; top: 0px; white-space: nowrap; padding: 5px; font-weight: normal; text-align: center; background: #fff; border: 1px solid #bdc3c7;}

/* tooltip arrow */
#menu .button_favorite .label:after, #menu .button_favorite .label:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	/*pointer-events: none;*/
}
#menu .button_favorite .label:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 5px;
	margin-top: -5px;
}
#menu .button_favorite .label:before {
	border-color: rgba(189, 195, 199, 0);
	border-left-color: #bdc3c7;
	border-width: 6px;
	margin-top: -6px;
}
#menu .button_not_logged:hover label {display: block;}

#menu .user_panel {float: right; height: 50px; line-height: 50px; text-align: right; color: #bdc3c7;}
#menu .user_panel a {color: #fff;}
#menu .user_panel a:hover {color: #ffce55;}

#menu .social {float: right; margin-right: 20px; margin-top: 16px;}
#menu .social label {float: left; line-height: 50px;}
#menu .social .fb-like{float: left; margin-left: 20px;}
#menu .social .twitter-follow-button {float: left; margin-left: 20px;}

/* Menu on home */
.menu-home {top: 20px!important;}
.menu-home .button_toggle {display: none;}

/* Favorites */
#favorites {width: 90%; margin: 70px 5% 5% 5%; position: relative; float:left; font-family: 'Georgia','sans-serif'; font-size: 18px;}
#favorites h2 {width: 100%; float: left; font-size: 34px; font-weight: bold; margin-bottom: 30px;}
#favorites h2 .title {float: left;}
#favorites h2 .right {float: right; margin: 10px 0; font-size: 14px; color: #bdc3c7; font-weight: normal; font-family: 'Open Sans', sans-serif;}
#favorites ul {margin-left: -2%;}
#favorites ul li {float: left; margin: 0 0 20px 2%; width: 23%}
#favorites ul li .favorite_item {display: block; width: 100%; height: 350px; padding: 20px; overflow: hidden; border: 8px solid #2f3536; background: #fff; position: relative;}
#favorites ul li .favorite_item img {width: 100%; max-height: 70%; margin-bottom: 10px;}
#favorites ul li .favorite_item p {width: 100%; font-size: 18px; line-height: 150%;}
#favorites ul li .favorite_item .icon_view {visibility: hidden; width: 32px; height: 32px; display: block; position: absolute; top: 30px; right: 30px; background: url(images/widget-icon.png) no-repeat left bottom;}
#favorites ul li .favorite_item .button_remove {visibility: hidden; padding: 2px 3px; display: block; position: absolute; bottom: 10px; right: 10px; z-index: 9; background: #bdc3c7; color: #fff; font-size: 10px; font-family: 'Open Sans';}
#favorites ul li .favorite_item .button_remove:hover {background: red;}
#favorites ul li .favorite_item:hover .icon_view, #favorites ul li .favorite_item:hover .button_remove {visibility: visible;}

.please_login a {border-bottom: 1px solid #ffce55; padding-bottom: 3px;}
.please_login a:hover {border-bottom: 1px solid #2f3536;}

/* Comments on PH */
#ph-selected-comments {width: 100%; float: left; padding: 0 10%; font-size: 14px;}
#ph-selected-comments ul {text-align: center;}
#ph-selected-comments ul li {width: 33%; float: left; display: inline-block; text-align: left; line-height: 150%;}
#ph-selected-comments ul li a {display: flex; overflow: hidden; padding: 20px; margin: 10px; border: 1px solid #bdc3c7; border-radius: 3px; background: #fff; transition: all 0.3s;}
#ph-selected-comments ul li a:hover {box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1); transform: scale(110%); }
#ph-selected-comments ul li img {float: left; width: 30px; margin-right: 10px; border-radius: 50%;}
#ph-selected-comments ul li h4 {color: #2f3536; font-weight: bold; margin-bottom: 5px;}
#ph-selected-comments ul li h4 span {color: #bdc3c7; font-weight: normal; font-size: 11px;}
#ph-selected-comments ul li h3 {color: #2f3536; font-size: 18px;}

/*  Logos */
#seen-on-logos {width: 100%; float: left; text-align: center;}
#seen-on-logos img {max-width: 100%;}

#home-adsense {width: 100%; padding: 0 10%; float: left; text-align: center;}


/*  Tablet Layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {

	.sponsored_photo {width: 100%; margin-bottom: 5%;}
	#content .img_placeholder {width: 100%; margin-bottom: 5%;}
	#content p {width: 100%;}
	#tips {display: none;}
	.subscribe_box input {font-size: 22px;}
	
	#favorites ul li {width: 48%;}
	#favorites ul li .favorite_item .button_remove {visibility: visible;}
	
	
}
/*  Mobile Layout */
@media only screen and (max-width: 767px) {
	
	.sponsored_photo {width: 100%; margin-bottom: 5%;}
	#content .img_placeholder {width: 100%; margin-bottom: 5%;}
	#content p {width: 100%; font-size: 18px;}
	#tips {display: none;}
	.subscribe_box input {font-size: 22px;}
	.btn_embed {display: none;}
	.share_facebook {margin-right: 0;}
	#menu .social {display: none;}
	#inner_content h2 {font-size: 22px;}
	#inner_content p {font-size: 14px;}
	#article h1 {font-size: 22px;}
	#article p {font-size: 14px;}
	#favorites h2 {font-size: 22px;}
	#favorites ul li {width: 100%;}
	#favorites ul li .favorite_item p {font-size: 14px;}
	#favorites ul li .favorite_item .button_remove {visibility: visible;}
	
	#menu ul.navigation li a {font-size: 12px;}
	#menu .user_panel {font-size: 12px;}
	#menu .user_panel .greeting {display: none;}
	
	#favorites h2 .right {font-size: 12px; margin: 5px 0;}
	
	#ph-selected-comments ul li {width: 100%;}
	
}
/*  Mobile Layout */
@media only screen and (max-width: 440px) {
	
	body {overflow: auto;}
	#bottom {overflow: hidden; margin-bottom: 50px;}
	#social {width: 100%; margin-bottom: 20px;}
	.share_twitter, .share_facebook {width: 132px; overflow: hidden; white-space: nowrap;}
	.share_facebook {float: right;}
	#btn_next {width: 100%;}
	#menu ul.navigation li {margin-left: 10px;}
	#menu ul.navigation li a {font-size: 10px;}
	#menu ul.navigation li .new {display: none;}
	#menu .user_panel {font-size: 10px;}
	#menu .user_panel .greeting {display: none;}
	
	#favorites h2 .right {display: none;}
	
}

/* CSS Animations */

.animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;}

/*
@-webkit-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-200px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateX(5px); 
    } 
    80% { 
        -webkit-transform: translateX(-5px); 
    } 
    100% { 
        -webkit-transform: translateX(0); 
    } 
} 
*/

@keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-200px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(5px); 
    } 
    80% { 
        transform: translateX(-5px); 
    } 
    100% { 
        transform: translateX(0); 
    } 
} 

.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;}


/* Print style */
@media print { 
	#menu, #bottom, .google-ad-container { display: none; }
	#content .main_img {width: 100%; margin-right: 0; margin-bottom: 5%;}
	#content p {width: 100%;}
}