/*
Theme Name: Bassam Tayara
Theme URI: http://www.bassamtayara.com/
Author: Abdelhadi Touil
Author URI: http://www.haditouil.com
Description: Custom WordPress theme for bassamtayara.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bassamtayara
Tags:

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.

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

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Layout
# Typography
# Elements
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
/* Global */
.ar .content-area {
	direction: rtl;
	text-align: justify;
}
.ar .content-area p {
	text-align: justify !important;
}
.site {
	overflow: hidden; /* To fix blank width on small screen */
}
.site-content, .site-footer {
	background-color: #fff;
}
.site-header {
	background: #fff;
	padding-top: 15px;
	margin-top: 0.5rem;
}
.site-branding {
	padding-left: 0;
	text-shadow: 0px 0px 5px #000;
}
.site-branding .site-title {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
	padding-top: 1rem;
	margin: 0;
}
.site-branding .site-description {
	font-size: 1.2rem;
	line-height: 2rem;
}
.block-title, .widget-title, .comment-reply-title {
	font-size: 1rem;
	font-weight: bold;
	line-height: 0;
	color: #fff;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 30px;
	border-bottom: solid 3px #0086e7;
}
.block-title span, .widget-title span {
	color: #fff;
	padding: 5px 10px;
	background: #0086e7;
	border-bottom: 3px solid #414e5a;
}
.content-area .breadcrumb span {
	padding: 2px 3px;
}
.block-title a, .widget-title a {
	color: #fff;
}
.block-title a:hover, .widget-title a:hover {
	color: #000000;
}
.post-img {
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}
/* Main section */
.edito-post-item {
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.latest-post-item, .archive-post {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: solid 1px #0086e7;
	overflow: hidden;
}
.latest-post-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
.latest-grid-item {
	margin-bottom: 1rem;
	overflow: hidden;
}
.meta-info li {
	float: left;
	margin: 0 10px 10px;
	font-size: 0.6rem;
	color: #fff;
}
.meta-info li a {
	color: #fff;
}
/* Footer */
.site-footer {
	margin-bottom: 0.5rem;
}
.footer-bar {
	font-size: 0.9rem;
	color: #0086e7;
	padding: 5px 0;
	border-top: solid 1px #0086e7;
	overflow: hidden;
}
.footer-bar span {
	padding: 0;
}
.footer-bar a {
	color: #0086e7;
}
.footer-bar a:hover {
	color: #000000;
}
.footer-menu {
	padding: 0;
}
.footer-menu li a {
    padding: 5px 0;
    margin-right: 10px;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #000;
	font-family: 'Open Sans', 'Noto Kufi Arabic', Arial, sans-serif;
	
}
.button, .wysija-submit {
	color: #fff;
	text-align: justify;
	background-color: #0086e7;
}
.button:focus, .button:hover, .wysija-submit:focus, .wysija-submit:hover {
	background-color: #10cd23;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Open Sans', 'Noto Kufi Arabic', Arial, sans-serif;
	font-weight: bold;
}
h1 {
	font-size: 1.8rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.3rem;
}
h4, h5, h6 {
	font-size: 1rem;
}
dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5rem;
}
blockquote p {
	color: #454545;
}
address {
	margin: 0 0 1.5rem;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6rem;
	max-width: 100%;
	overflow: auto;
	padding: 1.6rem;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5rem;
}

ol {
	list-style: decimal;
}
dl, ol, ul {
	margin-left: 2.5rem;
}
ul ul {
	list-style: circle;
}
li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5rem;
}
dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5rem 1.5rem;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5rem;
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #0086e7;
	transition: background-color .25s ease-out, color .25s ease-out;
}
a:hover {
	color: #333;
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-menu {
	position: relative;
	margin: 0.5rem 0 1rem;
	background: #0086e7;
	border-bottom: 3px solid #414e5a;
	clear: both;
}
.main-menu .menu {
	font-size: 1rem;
}
.main-menu .menu>li:not(.menu-text)>a {
	color: #fff;
}
.main-menu .menu>li:not(.menu-text)>a:hover {
	background: #333;
}
/* Fix mobile menu title color and font */
#wprmenu_bar .menu_title a {
    position: relative;
    top: 0;
    color: #fff;
    font-size: 26px;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* 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;
	right: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: right;
	margin-left: 1.5rem;
}

.alignright {
	display: inline;
	float: left;
	margin-right: 1.5rem;
}

.aligncenter {
	clear: both;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5rem;
	overflow: hidden;
}
.widget h3 {
	font-size: 1rem;
	font-weight: normal;
}
.widget img {
	width: 100%;
}
.widget ul {
	margin: 0;
}
.ar.widget {
	direction: rtl;
}
.widget ul li {
	color: #0086e7;
	margin-bottom: 1rem;
}
.widget ul li:last-child {
	margin-bottom: 0;
}
.widget ul.side-menu li {
	padding-left: 10px;
	border-left: solid 5px #0086e7;
}
.ar.widget ul.side-menu li {
	padding-right: 10px;
	padding-left: 0;
	border-right: solid 5px #0086e7;
	border-left: 0;
}
.widget ul.side-menu li:hover {
	border-color: #414e5a;
}
/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}
.widget_bassamtayara-recent-posts .widget-title {
	margin-bottom: 10px;
}
.social-networks li a {
	display: block;
	font-size: 1.5rem;
	color: #fff;
	text-align: center;
	width: 100%;
	padding: 4px;
}
.social-networks li.facebook a {
	background: #3b5998;
	border: 2px solid #3b5998;
}
.social-networks li.facebook a:hover {
	color: #3b5998;
	background: #fff;
	border: 2px solid #3b5998;
}

.social-networks li.twitter a {
	background: #55acee;
	border: 2px solid #55acee;
}
.social-networks li.twitter a:hover {
	color: #55acee;
	background: #fff;
	border: 2px solid #55acee;
}

.social-networks li.googleplus a {
	background: #dd4b39;
	border: 2px solid #dd4b39;
}
.social-networks li.googleplus a:hover {
	color: #dd4b39;
	background: #fff;
	border: 2px solid #dd4b39;
}

.social-networks li.youtube a {
	background: #e52d27;
	border: 2px solid #e52d27;
}
.social-networks li.youtube a:hover {
	color: #e52d27;
	background: #fff;
	border: 2px solid #e52d27;
}

.social-networks li.linkedin a {
	background: #0976b4;
	border: 2px solid #0976b4;
}
.social-networks li.linkedin a:hover {
	color: #0976b4;
	background: #fff;
	border: 2px solid #0976b4;
}

.social-networks li.rss a {
	background: #f26522;
	border: 2px solid #f26522;
}
.social-networks li.rss a:hover {
	color: #f26522;
	background: #fff;
	border: 2px solid #f26522;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}
.single p, .page p {
	font-size: 1.2rem;
	line-height: 2rem;
}
.entry-content ol, .entry-content ul {
	font-size: 1.2rem;
	line-height: 2rem;
}
.entry-meta {
	font-size: 0.8rem;
	margin: 0.5rem 0;
}
span.posted-on, span.cat-links {
	margin-right: 1rem;
}
.post-views {
    display: inline-block;
}
.page-links {
	clear: both;
	margin: 0 0 1.5rem;
}
/*--------------------------------------------------------------
## Posts Archive
--------------------------------------------------------------*/
.archive h2, .category h2, .search h2 {
	font-size: 1.4rem;
	font-weight: bold;
}
.grid-archive {
	margin-bottom: 1rem;
}
.posts-navigation {
	clear: both;
	margin-bottom: 1rem;
}
.pagination a, .pagination span {
	float: left;
	margin-right: 5px;
	border-radius: 0;
}
.pagination a {
	color: #fff;
}
.pagination .current, .pagination a:hover, .pagination button:hover {
    background: #333;
    color: #fff;
}
.pagination a, .pagination button {
	background: #0086e7;
}
/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comments-area {
	margin-top: 2rem;
}
.comment-form, .comment-form label {
	font-size: 1rem;
}
.comment-content a {
	word-wrap: break-word;
}
.comment-list {
	list-style: none;
	margin: 0;
}
.comment-list ul {
	list-style: none;
	margin-left: 2.5rem;
}
.comment-author {
	font-size: 0.9rem;
}
.comment-metadata {
    font-size: 0.7rem;
	margin-bottom: 10px;
}
.reply {
    float: right;
    font-size: 0.9rem;
    position: relative;
    bottom: 25px;
}
.comment-reply-title {
	position: relative;
	color: #0086e7;
}
.comment-reply-title small {
	font-size: 0.8rem;
}
.comment-reply-title small a {
	position: absolute;
	right: 0;
	bottom: 0x;
	color: #fff;
	line-height: 1rem;
	padding: 5px 10px;
	background: #0086e7;
}
.comment-body {
	margin-bottom: 15px;
	border-bottom: 1px dashed #ccc;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
figure {
	margin: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	position: relative;
	margin-bottom: 1.5rem;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.wp-caption .wp-caption-text {
	font-size: 0.8rem;
	text-align: center;
	padding: 5px;
	margin: 0;
	background: #e8eaed;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5rem;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
	margin-bottom: 1em;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}
/* Custom CSS */
.content-area .column:last-child:not(:first-child) {
	float: left;
}

/*--------------------------------------------------------------
## Colors classes
--------------------------------------------------------------*/
.red {
	background-color: #e9573f;
}
.yellow {
	background-color: #fab005;
}
.green {
	background-color: #8bc151;
}
.blue {
	background-color: #4a89dc;
}
.purple {
	background-color: #967adc;
}
.yellow-green {
    background-color: #8bc151;
}
.main-menu .menu>li.yellow-green a {
    color: #ffeb3b;
}
.red-white {
    background-color: #fff;
    border: solid 1px #e9573f;
    height: 38px;
}
.main-menu .menu>li.red-white a {
    color: #e9573f;
}

.white-black {
    background-color: #414e5a;
}
.main-menu .menu>li.white-black a {
    color: #fab005;
}

/*--------------------------------------------------------------
## Newsletter
--------------------------------------------------------------*/
.wysija-submit {
    vertical-align: middle;
    margin: 0 auto;
    padding: .85em 1em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: background-color .25s ease-out,color .25s ease-out;
    font-size: .9rem;
    line-height: 1;
}

/*--------------------------------------------------------------
## RTL styles
--------------------------------------------------------------*/
.latest-posts .category-1, .archive .category-1,
.latest-posts .category-arabic, .archive .category-arabic {
	direction: rtl;
}
.latest-posts .category-1 .column, .archive .category-1 .column,
.latest-posts .category-arabic .column, .archive .category-arabic .column {
	float: right;
	text-align: justify;
}
.category-1 span, .category-arabic span {
    margin-right: 0;
	 margin-left: 1rem;
}

/*--------------------------------------------------------------
## Custom Media Queries
--------------------------------------------------------------*/
@media screen and (max-width: 64em) {
	.site-header {
		margin-top: 0;
	}
	.site-header div.row {
		margin-bottom: 1rem;
	}
}