/*
Theme Name: Otography Pro
Theme URI: https://themespiral.com/themes/otography
Author: Theme Spiral
Author URI: https://themespiral.com/
Description: Otography Pro Extension is a Plugin which is rich in features having all the Premium features that is not available in the free themes Otography. Otography Pro Extension version for your theme and get access to more features and customization settings.
Version: 1.0.3
License: GNU General Public License version 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otography
Tags: one-column, right-sidebar, flexible-header, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Otography is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.col-1 .column,
.column.col-one {
	width: 100%;
}

.col-sf .column,
.column.col-seven-five {
	width: 75%;
}

.col-2 .column,
.column.col-two {
	width: 50%;
}

.col-4 .column,
.column.col-four {
	width: 25%;
}

.col-5 .column,
.column.col-five {
	width: 20%;
}

/*--------------------------------------------------------------
# Sidebar Option
--------------------------------------------------------------*/

.left-sidebar-template #primary,
.single-left-sidebar #primary {
	float: right;
}

.left-sidebar-template #secondary,
.single-left-sidebar #secondary {
	float: left;
	padding-left: 0;
	padding-right: 30px;
}

.full-width-template #primary,
.single-full-width #primary {
	width: 100%;
}

.full-width-template #secondary,
.single-full-width #secondary {
	display: none;
}

.left-sidebar-template.full-width #primary,
.right-sidebar-template.full-width #primary,
.single-left-sidebar.full-width #primary,
.single-right-sidebar.full-width #primary  {
	width: calc(70% - 0px);
}

.left-sidebar-template.full-width #secondary,
.right-sidebar-template.full-width #secondary,
.single-left-sidebar.full-width #secondary,
.single-right-sidebar.full-width #secondary {
	display: block;
}

.right-sidebar-template.left-sidebar #primary,
.single-right-sidebar.left-sidebar #primary {
	float: left;
}

.right-sidebar-template.left-sidebar #secondary,
.single-right-sidebar.left-sidebar #secondary {
	float: right;
	padding-left: 30px;
	padding-right: 0;
}

/*--------------------------------------------------------------
# Framed Layout
--------------------------------------------------------------*/
.framed-layout #page {
	box-shadow: 0 0 16px #ccc;
	max-width: 1200px;
	margin: 40px auto;
	box-shadow: 0px 0px 19px rgba(26,26,26,0.1);
}

/*--------------------------------------------------------------
# Social Icon
--------------------------------------------------------------*/
.social-links-menu li a[href*="dribbble.com"]:before { content: '\f17d'; }
.social-links-menu li a[href*="dribbble.com"]:hover:before { color: #EA4C89; }
.social-links-menu li a[href*="flickr.com"]:before { content: '\f16e'; }
.social-links-menu li a[href*="flickr.com"]:hover:before { color: #FF0084; }
.social-links-menu li a[href*="github.com"]:before { content: '\f09b' ; }
.social-links-menu li a[href*="github.com"]:hover:before { color: #323131; }
.social-links-menu li a[href*="codepen.io"]:before { content: '\f1cb'; }
.social-links-menu li a[href*="codepen.io"]:hover:before { color: #000000; }
.social-links-menu li a[href*="digg.com"]:before { content: '\f1a6'; }
.social-links-menu li a[href*="digg.com"]:hover:before { color: #005BE2; }
.social-links-menu li a[href*="paypal.com"]:before { content: '\f1ed'; }
.social-links-menu li a[href*="paypal.com"]:hover:before { color: #253B80; }
.social-links-menu li a[href*="vimeo.com"]:before { content: '\f27d'; }
.social-links-menu li a[href*="vimeo.com"]:hover:before { color: #1AB7EA; }
.social-links-menu li a[href*="skype.com"]:before { content: '\f17e'; }
.social-links-menu li a[href*="skype.com"]:hover:before { color: #00AFF0; }
.social-links-menu li a[href*="reddit.com"]:before { content: '\f281'; }
.social-links-menu li a[href*="reddit.com"]:hover:before { color: #FF5700; }
.social-links-menu li a[href*="getpocket.com"]:before { content: '\f265'; }
.social-links-menu li a[href*="getpocket.com"]:hover:before { color: #F13D58; }
.social-links-menu li a[href*="tumblr.com"]:before { content: '\f173'; }
.social-links-menu li a[href*="tumblr.com"]:hover:before { color: #34465D; }
.social-links-menu li a[href*="xing.com"]:before { content: '\f168'; }
.social-links-menu li a[href*="xing.com"]:hover:before { color: #008080; }
.social-links-menu li a[href*="soundcloud.com"]:before { content: '\f1be'; }
.social-links-menu li a[href*="soundcloud.com"]:hover:before { color: #FF5500; }
.social-links-menu li a[href*="tripadvisor.com"]:before { content: '\f262'; }
.social-links-menu li a[href*="tripadvisor.com"]:hover:before { color: #00AF87; }
.social-links-menu li a[href*="vk.com"]:before { content: '\f189'; }
.social-links-menu li a[href*="vk.com"]:hover:before { color: #4C75A3; }
.social-links-menu li a[href*="viadeo.com"]:before { content: '\f2a9'; }
.social-links-menu li a[href*="viadeo.com"]:hover:before { color: #F07355; }
.social-links-menu li a[href*="spotify.com"]:before { content: '\f1bc'; }
.social-links-menu li a[href*="spotify.com"]:hover:before { color: #1ED760; }
.social-links-menu li a[href*="stumbleupon.com"]:before { content: '\f1a4'; }
.social-links-menu li a[href*="stumbleupon.com"]:hover:before { color: #EB4924; }
.social-links-menu li a[href*="twitch.tv"]:before { content: '\f1e8'; }
.social-links-menu li a[href*="twitch.tv"]:hover:before { color: #4B367C; }
.social-links-menu li a[href*="wordpress.org"]:before { content: '\f19a'; }
.social-links-menu li a[href*="wordpress.org"]:hover:before { color: #23282D; }
.social-links-menu li a[href*="wordpress.com"]:before { content: '\f19a'; }
.social-links-menu li a[href*="wordpress.com"]:hover:before { color: #21759B; }
.social-links-menu li a[href*="500px.com"]:before { content: '\f26e'; }
.social-links-menu li a[href*="500px.com"]:hover:before { color: #0099E5; }
.social-links-menu li a[href*="behance.net"]:before { content: '\f1b4'; }
.social-links-menu li a[href*="behance.net"]:hover:before { color: #131418; }
.social-links-menu li a[href*="dropbox.com"]:before { content: '\f16b'; }
.social-links-menu li a[href*="dropbox.com"]:hover:before { color: #007EE5; }
.social-links-menu li a[href*="forumbee.com"]:before { content: '\f211'; }
.social-links-menu li a[href*="forumbee.com"]:hover:before { color: #83AD13; }
.social-links-menu li a[href*="last.fm"]:before { content: '\f202'; }
.social-links-menu li a[href*="last.fm"]:hover:before { color: #BA0000; }
.social-links-menu li a[href*="mailto"]:before { content: '\f0e0'; }
.social-links-menu li a[href*="mailto"]:hover:before { color: #222222; }
.social-links-menu li a[href*="/feed"]:before { content: '\f09e'; }
.social-links-menu li a[href*="/feed"]:hover:before { color: #EB6E1D; }
.social-links-menu li a[href*="telegram.org"]:before { content: '\f2c6'; }
.social-links-menu li a[href*="telegram.org"]:hover:before { color: #0088CC; }
.social-links-menu li a[href*="whatsapp.com"]:before { content: '\f232'; }
.social-links-menu li a[href*="whatsapp.com"]:hover:before { color: #25D366; }
.social-links-menu li a[href*="android.com"]:before { content: '\f17b'; }
.social-links-menu li a[href*="android.com"]:hover:before { color: #A4C639; }
.social-links-menu li a[href*="apple.com"]:before { content: '\f179'; }
.social-links-menu li a[href*="apple.com"]:hover:before { color: #313131; }
.social-links-menu li a[href*="amazon.com"]:before { content: '\f270'; }
.social-links-menu li a[href*="amazon.com"]:hover:before { color: #FF9900; }
.social-links-menu li a[href*="vine.co"]:before { content: '\f1ca'; }
.social-links-menu li a[href*="vine.co"]:hover:before { color: #00b489; }
.social-links-menu li a[href*="slack.com"]:before { content: '\f198'; }
.social-links-menu li a[href*="slack.com"]:hover:before { color: #3AAF85; }
.social-links-menu li a[href*="wechat.com"]:before { content: '\f1d7'; }
.social-links-menu li a[href*="wechat.com"]:hover:before { color: #09B83E; }
.social-links-menu li a[href*="producthunt.com"]:before { content: '\f288'; }
.social-links-menu li a[href*="producthunt.com"]:hover:before { color: #DA552F; }
.social-links-menu li a[href*="ycombinator.com"]:before { content: '\f1d4'; }
.social-links-menu li a[href*="ycombinator.com"]:hover:before { color: #FF6600; }
.social-links-menu li a[href*="quora.com"]:before { content: '\f2c4'; }
.social-links-menu li a[href*="quora.com"]:hover:before { color: #B92B27; }

.menu-social-links-container ul > li a[href*="dribbble.com"]:before { content: '\f17d'; color: #EA4C89; }
.menu-social-links-container ul > li a[href*="dribbble.com"]:hover { background-color: #EA4C89; }
.menu-social-links-container ul > li a[href*="flickr.com"]:before { content: '\f16e'; color: #FF0084; }
.menu-social-links-container ul > li a[href*="flickr.com"]:hover { background-color: #FF0084; }
.menu-social-links-container ul > li a[href*="github.com"]:before { content: '\f09b';  color: #323131; }
.menu-social-links-container ul > li a[href*="github.com"]:hover { background-color: #323131; }
.menu-social-links-container ul > li a[href*="codepen.io"]:before { content: '\f1cb'; color: #000000; }
.menu-social-links-container ul > li a[href*="codepen.io"]:hover { background-color: #000000; }
.menu-social-links-container ul > li a[href*="digg.com"]:before { content: '\f1a6'; color: #005BE2; }
.menu-social-links-container ul > li a[href*="digg.com"]:hover { background-color: #005BE2; }
.menu-social-links-container ul > li a[href*="paypal.com"]:before { content: '\f1ed'; color: #253B80; }
.menu-social-links-container ul > li a[href*="paypal.com"]:hover { background-color: #253B80; }
.menu-social-links-container ul > li a[href*="vimeo.com"]:before { content: '\f27d'; color: #1AB7EA; }
.menu-social-links-container ul > li a[href*="vimeo.com"]:hover { background-color: #1AB7EA; }
.menu-social-links-container ul > li a[href*="skype.com"]:before { content: '\f17e'; color: #00AFF0; }
.menu-social-links-container ul > li a[href*="skype.com"]:hover { background-color: #00AFF0; }
.menu-social-links-container ul > li a[href*="reddit.com"]:before { content: '\f281'; color: #FF5700; }
.menu-social-links-container ul > li a[href*="reddit.com"]:hover { background-color: #FF5700; }
.menu-social-links-container ul > li a[href*="getpocket.com"]:before { content: '\f265'; color: #F13D58; }
.menu-social-links-container ul > li a[href*="getpocket.com"]:hover { background-color: #F13D58; }
.menu-social-links-container ul > li a[href*="tumblr.com"]:before { content: '\f173'; color: #34465D; }
.menu-social-links-container ul > li a[href*="tumblr.com"]:hover { background-color: #34465D; }
.menu-social-links-container ul > li a[href*="xing.com"]:before { content: '\f168'; color: #008080; }
.menu-social-links-container ul > li a[href*="xing.com"]:hover { background-color: #008080; }
.menu-social-links-container ul > li a[href*="soundcloud.com"]:before { content: '\f1be'; color: #FF5500; }
.menu-social-links-container ul > li a[href*="soundcloud.com"]:hover { background-color: #FF5500; }
.menu-social-links-container ul > li a[href*="tripadvisor.com"]:before { content: '\f262'; color: #00AF87; }
.menu-social-links-container ul > li a[href*="tripadvisor.com"]:hover { background-color: #00AF87; }
.menu-social-links-container ul > li a[href*="vk.com"]:before { content: '\f189'; color: #4C75A3; }
.menu-social-links-container ul > li a[href*="vk.com"]:hover { background-color: #4C75A3; }
.menu-social-links-container ul > li a[href*="viadeo.com"]:before { content: '\f2a9'; color: #F07355; }
.menu-social-links-container ul > li a[href*="viadeo.com"]:hover { background-color: #F07355; }
.menu-social-links-container ul > li a[href*="spotify.com"]:before { content: '\f1bc'; color: #1ED760; }
.menu-social-links-container ul > li a[href*="spotify.com"]:hover { background-color: #1ED760; }
.menu-social-links-container ul > li a[href*="stumbleupon.com"]:before { content: '\f1a4'; color: #EB4924; }
.menu-social-links-container ul > li a[href*="stumbleupon.com"]:hover { background-color: #EB4924; }
.menu-social-links-container ul > li a[href*="twitch.tv"]:before { content: '\f1e8'; color: #4B367C; }
.menu-social-links-container ul > li a[href*="twitch.tv"]:hover { background-color: #4B367C; }
.menu-social-links-container ul > li a[href*="wordpress.org"]:before { content: '\f19a'; color: #23282D; }
.menu-social-links-container ul > li a[href*="wordpress.org"]:hover { background-color: #23282D; }
.menu-social-links-container ul > li a[href*="wordpress.com"]:before { content: '\f19a'; color: #21759B; }
.menu-social-links-container ul > li a[href*="wordpress.com"]:hover { background-color: #21759B; }
.menu-social-links-container ul > li a[href*="500px.com"]:before { content: '\f26e'; color: #0099E5; }
.menu-social-links-container ul > li a[href*="500px.com"]:hover { background-color: #0099E5; }
.menu-social-links-container ul > li a[href*="behance.net"]:before { content: '\f1b4'; color: #131418; }
.menu-social-links-container ul > li a[href*="behance.net"]:hover { background-color: #131418; }
.menu-social-links-container ul > li a[href*="dropbox.com"]:before { content: '\f16b'; color: #007EE5;}
.menu-social-links-container ul > li a[href*="dropbox.com"]:hover { background-color: #007EE5; }
.menu-social-links-container ul > li a[href*="forumbee.com"]:before { content: '\f211'; color: #83AD13; }
.menu-social-links-container ul > li a[href*="forumbee.com"]:hover { background-color: #83AD13; }
.menu-social-links-container ul > li a[href*="last.fm"]:before { content: '\f202'; color: #BA0000; }
.menu-social-links-container ul > li a[href*="last.fm"]:hover { background-color: #BA0000; }
.menu-social-links-container ul > li a[href*="mailto"]:before { content: '\f0e0'; color: #222222; }
.menu-social-links-container ul > li a[href*="mailto"]:hover { background-color: #222222; }
.menu-social-links-container ul > li a[href*="/feed"]:before { content: '\f09e'; color: #EB6E1D; }
.menu-social-links-container ul > li a[href*="/feed"]:hover { background-color: #EB6E1D; }
.menu-social-links-container ul > li a[href*="telegram.org"]:before { content: '\f2c6'; color: #0088CC; }
.menu-social-links-container ul > li a[href*="telegram.org"]:hover { background-color: #0088CC; }
.menu-social-links-container ul > li a[href*="whatsapp.com"]:before { content: '\f232'; color: #25D366; }
.menu-social-links-container ul > li a[href*="whatsapp.com"]:hover { background-color: #25D366; }
.menu-social-links-container ul > li a[href*="android.com"]:before { content: '\f17b'; color: #A4C639; }
.menu-social-links-container ul > li a[href*="android.com"]:hover { background-color: #A4C639; }
.menu-social-links-container ul > li a[href*="apple.com"]:before { content: '\f179'; color: #313131; }
.menu-social-links-container ul > li a[href*="apple.com"]:hover { background-color: #313131; }
.menu-social-links-container ul > li a[href*="amazon.com"]:before { content: '\f270'; color: #FF9900; }
.menu-social-links-container ul > li a[href*="amazon.com"]:hover { background-color: #FF9900; }
.menu-social-links-container ul > li a[href*="vine.co"]:before { content: '\f1ca'; color: #00b489; }
.menu-social-links-container ul > li a[href*="vine.co"]:hover { background-color: #00b489; }
.menu-social-links-container ul > li a[href*="slack.com"]:before { content: '\f198'; color: #3AAF85; }
.menu-social-links-container ul > li a[href*="slack.com"]:hover { background-color: #3AAF85; }
.menu-social-links-container ul > li a[href*="wechat.com"]:before { content: '\f1d7'; color: #09B83E; }
.menu-social-links-container ul > li a[href*="wechat.com"]:hover { background-color: #09B83E; }
.menu-social-links-container ul > li a[href*="producthunt.com"]:before { content: '\f288'; color: #DA552F; }
.menu-social-links-container ul > li a[href*="producthunt.com"]:hover { background-color: #DA552F; }
.menu-social-links-container ul > li a[href*="ycombinator.com"]:before { content: '\f1d4'; color: #FF6600; }
.menu-social-links-container ul > li a[href*="ycombinator.com"]:hover { background-color: #FF6600; }
.menu-social-links-container ul > li a[href*="quora.com"]:before { content: '\f2c4'; color: #B92B27; }
.menu-social-links-container ul > li a[href*="quora.com"]:hover { background-color: #B92B27; }

.menu-social-links-container ul > li a:hover,
.menu-social-links-container ul > li a:hover:before {
	color: #fff;
}

/*--------------------------------------------------------------
# Standard Section
--------------------------------------------------------------*/
.standard-header {
	text-align: center;
	margin-bottom: 40px;
}

.standard-title:before,
.standard-title:after {
	content: no-close-quote;
	width: 20px;
	height: 3px;
	background-color: #777;
	display: inline-block;
	margin-right: 20px;
	vertical-align: middle;
}

.standard-title:after {
	margin-right: 0;
	margin-left: 20px;
}

.standard-post-wrap {
	margin-bottom: 1.25em;
}

.standard-post-thumbnail {
	position: relative;
	overflow: hidden;
	background: #111;
	cursor: pointer;
}

.standard-post-thumbnail img {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	opacity: 0.7;
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50px,0,0);
	transform: translate3d(-50px,0,0);
}

.standard-post-thumbnail:hover img {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.standard-entry-header .entry-title {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 32px;
	transform: translate(-50%, -50%);
	transition: all 0.5s ease 0s;
	width: 90%;
	text-align: center;
}

.standard-post-wrap:hover .standard-entry-header .entry-title {
	opacity: 0.1;
}

.standard-entry-header .entry-title a {
	color: #fff;
}


/*--------------------------------------------------------------
# Responsive Web Design Media Queries Pro
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) { 
	.framed-layout .wrap {
		max-width: 94%;
		margin: 0 auto;
	}

	.framed-layout #page {
		max-width: 1170px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 960px) {
	.col-4 .column, 
	.column.col-four,
	.col-5 .column,
	.column.col-five {
		width: 50%;
	}
}

@media only screen and (max-width: 500px) {
	.col-2 .column,
	.column.col-two,
	.col-4 .column, 
	.column.col-four,
	.col-5 .column,
	.column.col-five {
		width: 100%;
}