style.css

/*
Theme Name: scientific_2016
Theme URI: http://underscores.me/
Author: ORT Israel Team
Author URI: http://dev.linux.ort.org.il/new_scientific/
Description: A theme for ORT Israel\'s Scientific American magazine
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: scientific-2016
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.

scientific_2016 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/
*/


/*font weighst:
light: font-weight: 200;
normal: font-weight: 400 - this is the default - no need to definr that.
bold: font-weight: 600;
heavyqblack: font-weight: 800*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
	## Responsive Menu
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
#header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
    font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
}

body {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2.8rem;
    /*font-size: 2em;*/
    margin: 0.67em 0;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 400;
    src: url(font/opensanshebrew-regular-webfont.eot);
    src: url(font/opensanshebrew-regular-webfont.eot?#iefix) format('embedded-opentype'),
	url(font/opensanshebrew-regular-webfont.woff) format('woff'),
	url(font/opensanshebrew-regular-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 700;
    src: url(font/opensanshebrew-bold-webfont.eot);
    src: url(font/opensanshebrew-bold-webfont.eot?#iefix) format('embedded-opentype'),
	url(font/opensanshebrew-bold-webfont.woff) format('woff'),
	url(font/opensanshebrew-bold-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 800;
    src: url(font/opensanshebrew-extrabold-webfont.eot);
    src: url(font/opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
	url(font/opensanshebrew-extrabold-webfont.woff) format('woff'),
	url(font/opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: italic;
    font-weight: 200;
    src: url(font/opensanshebrew-lightitalic-webfont.eot);
    src: url(font/opensanshebrew-lightitalic-webfont.eot?#iefix) format('embedded-opentype'),
	url(font/opensanshebrew-lightitalic-webfont.woff) format('woff'),
	url(font/opensanshebrew-lightitalic-webfont.ttf) format('truetype');
}

body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: 'Open Sans Hebrew', sans-serif;
    /*font-family: 'arial';*/
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/*font-famlily: bold*/
.block-title{
    font-size: 3.2rem;
    font-weight: 800;
}
/*font-famlily: black*/
.site-title,
.search-field{
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    /*margin-bottom: 1.5em;*/
    margin: 0 0 1.5rem 0;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

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

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. */
    overflow-y: auto; /*for strange reason this is the only solution for horizontal word stretch in iphone ios 9*/
}

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

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

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

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

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

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


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, .8);
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
    padding: .6em 1em .4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    border-color: #aaa #bbb #bbb;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
    padding: 3px;
}

textarea {
    padding-left: 3px;
    width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a,
a:visited,
a:hover,
a:focus,
a:active
{
    color: #000;
    text-decoration: none;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    /*    clear: both;
	display: block;
	float: left;*/
    /*width: 100%;*/
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    /*    float: left;
	position: relative;*/
}

.main-navigation a {
    display: block;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
	display: none;
    }
    .main-navigation ul {
	display: flex;
	/*same code with prefix - for iphone*/
	display: -webkit-flex;
	padding: 0;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
    text-align: center;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous ,
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next{
    display: inline-block;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    /*    float: left;
	width: 50%;*/
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    /*    float: right;
	text-align: right;
	width: 50%;*/
}
/*--------------------------------------------------------------
## Responsive Menu
--------------------------------------------------------------*/
body #click-menu {
    border-radius: 50%;
    padding: 1.1rem;
    right: calc(50% - 13rem)
}
#click-menu .threeLines .line{
    border-radius: 0.5rem;
}

/*--------------------------------------------------------------
# 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;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

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

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

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

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
    display: none;
}

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

.hentry {
    margin: 0 0 1.5em;
}

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

.single .byline,
.group-blog .byline {
    display: inline;
}
/*
.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}*/

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

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

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0;
}


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

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

.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;
}

/* -----------------------------------*/
/* ----------->>> Sprite  <<<---------*/
/* -----------------------------------*/

/* ------->>> icon4main.png <<<------*/
.title-articles:after,
.title-fast_science:after,
.title-columns_and_opinions:after,
.separator-element:before,
.widget_nav_menu .menu-item:last-child a::after,
.more-articles-title:after{
    background-image: url('images/icon4main.png');
    background-repeat: no-repeat;
    background-position: 0 0;
}
/* ------->>> logo-sprite.png <<<------*/
.scientific-logo,
.ort-logo,
.search-btn,
.a11y-btn{
    background-image: url('images/logo-sprite.png');
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/

.site-header{
    margin: 4rem 0 1rem;
}
.site-description{
    display: none;
}
/*ort logo & scientific logo*/
.scientific-logo,
.ort-logo,
.search-btn,
.a11y-btn{
    width: 34rem;
    height: 14rem;
    text-indent: -99999px;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    display: block;
    line-height: 0;
}
.site-header .scientific-logo{
    padding-bottom: 0;
    width: 14.5rem;
    height: 6rem;
}
.scientific-logo a{
    display: block;
    width: 100%;
    height: 100%;
}

body #responsive-menu{
    top: 10.9rem;
    box-shadow: none;
}
body .responsive-menu{
    padding-right: 0;
    font-size: 1.8rem;
}

/* -----------------------------------*/
/* --------->>> Site Footer <<<-------*/
/* -----------------------------------*/
.separator-element{
    position: relative;
    border-bottom: 0.1rem solid #000;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
.site-footer .separator-element{
    border-bottom: 0;
    border-top: 0.1rem solid #000;
}
.separator-element:before{
    content: "";
    position: absolute;
    bottom: -1.8rem;
    right: 0;
    left: 0;
    width: 6.2rem;
    height: 3.2rem;
    background-position: 0 -300px; /*using pixeles because of IE*/
    background-color: #fff;
    margin: 0 auto;
    box-shadow: 2rem 0 0 0 #fff, -2rem 0 0 0 #fff;
    display: block;
}
.site-footer .separator-element:before{
    bottom: auto;
    top: -1.8rem;
}
/*Footer - logo's (scientific & ort)'*/
.footer-logos{
    padding: 6.5rem 1.5rem 4.5rem;
}
.scientific-logo{
    width: 53%;
    height: auto;
    background-size: 100% auto;
    padding-bottom: 23%;
    margin: 0 auto;
}
.site-header .ort-logo,
.footer-logos .ort-logo {
    width: 37%;
    height: auto;
    padding-bottom: 19%;
    background-position: 0 48%;
    background-size: 182% auto;
}
@media only screen and (min-width: 500px){
    .footer-logos{
	margin: 0 10%;
    }
    .footer-logos .scientific-logo{
	width: 21rem;
	height: 9rem;
	background-size: 100% auto;
	background-position: 0 0;
	padding-bottom: 0;
    }
    .footer-logos .ort-logo {
	width: 15rem;
	height: 8rem;
	padding-bottom: 0;
    }
}

.site-footer {
    margin-top: 5rem;
}
.footer-logos .scientific-logo {
    float: right;
}
.footer-logos .ort-logo{
    float: left;
}
.footer-widgets {
    background-color: #000;
    color: #fff;
    line-height: 1.5;
    padding: 2.5rem;
}
.footer-widgets p{
    margin: 0;
}
.footer-widgets .widget {
    margin-bottom: 6rem;
}
/*contact us and facebook buttons*/
.widget_nav_menu .menu{
    display: flex;
    justify-content: space-between;
    /*same code with prefix - for iphone*/
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    list-style: none;

    margin: 0;
    padding: 0;
}
.widget_nav_menu .menu-item{
    color: #000;
    background-color: #dfdfdf;
}
.widget_nav_menu .menu a{
    color: inherit;
    display: block;
    width: 100%;
    padding: 0.7rem 1rem 0.8rem;
}
.widget_nav_menu .menu-item:last-child a{
    padding-left: 5.5rem;
    position: relative;
}
.widget_nav_menu .menu-item:last-child a::after{
    content: "";
    position: absolute;
    width: 4.3rem;
    height: 4.3rem;
    background-position: -0.7rem -35rem;
    top: 0;
    left: 0;
}
/*mailing list form*/
.gform_widget .gform_wrapper h3.gform_title{
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0;
}
.gform_widget .gform_heading{
    margin-bottom: 0;
}

.gform_widget .gform_wrapper .gform_description{
    padding-left: 0.5rem;
}
.gform_widget .gform_wrapper .top_label .gfield_label{
    display: none;
}

body.rtl .gform_widget .gform_wrapper input[type="text"],
body.rtl .gform_widget .gform_wrapper input[type="email"]{
    text-align: left !important;
    border-radius: 0;
    padding: 0.5rem;
    width: 100%;
    /*color: #d2d2d2; this is the color Keren picked but it's too bright'*/
}

.gform_widget.gform_wrapper .top_label .gfield_error .ginput_container {
    max-width: 100%;
}
.gform_widget .gform_footer input,
.gform_widget .gf_browser_ie.gform_wrapper .gform_footer input.button{
    background-color: #217772;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    text-shadow: none;
    padding: 1.5rem 2rem;
}
.gform_widget .gform_wrapper  .gform_footer{
    /*margin: 0;*/
    margin: 1rem 0 0 0rem;
    padding: 0;
    overflow: hidden; /*because it contains float element and has no "clear"*/
}
.gform_ajax_spinner{
    display: none; /*the loader causes the line to breake*/
}
/*form error*/
.gform_widget .gform_wrapper div.validation_error{
    display: none;
}
.gform_widget .gform_wrapper li.gfield.gfield_error{
    border: 0;
    background-color: transparent;
}
.gform_widget .gform_wrapper li.gfield_error input[type="text"]{
    border-color: #fff;
    width: 100%;
}
.gform_widget .gform_wrapper .top_label .gfield_error,
.gform_widget .gform_wrapper .gfield_description,
.gform_widget .gform_wrapper .top_label .gfield_error .ginput_container{
    width: 100%;
    max-width: 100%;
}
.gform_widget .gform_wrapper .validation_message{
    background-color: #e4007b;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
}
.gform_widget .gform_wrapper .top_label .gfield_description.validation_message{
    padding: 0.6rem 1rem !important;
}
/*form conformation*/
.gform_confirmation_message {
    background-color: #217772;
    font-size: 1.4rem;
    padding: 0.5rem;
}
.gform_confirmation_message h5{
    margin: 0;
}
/*credits - site info*/
.site-info{
    text-align: center;
    font-size: 1.4rem;
    color: #000;
    padding: 1.5rem;
}
.site-info a{
    color: inherit;
}
.site-info .separate{
    border-left: 1px solid;
    padding-left: 0.4rem;
}
/* -----------------------------------*/
/* ----->>> Designed Tittles <<<------*/
/* -----------------------------------*/
.title-articles,
.title-fast_science,
.title-columns_and_opinions,
.page-title,
.page h1.entry-title,
.more-articles-title{
    color: #000;
    font-size: 3.3rem;
    font-weight: 800;
    display: inline-block;
    position: relative;
    padding: 0 2rem 0 4rem;
    margin: 2rem 0 5rem;
    background-color: #fff;
}
.page-title{
    padding: 0 2rem;
}
.title-articles a,
.title-fast_science a,
.title-columns_and_opinions a{
    display: block;
    width: 100%;
}
/* title line-through*/
.title-articles:before,
.title-fast_science:before,
.title-columns_and_opinions:before,
.page-title:before,
.page h1.entry-title:before,
.more-articles-title:before{
    content: "";
    position: absolute;
    background-color: #000;
    width: 100vw;
    height: 0.1rem;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: -1;
}
.page-title:before,
.page h1.entry-title:before,
.more-articles-title:before{
    top: 50%;
}
/*title icon*/
.title-articles:after,
.title-fast_science:after,
.title-columns_and_opinions:after,
.more-articles-title:after{
    content: "";
    position: absolute;
    top: -0.3rem;
    right: 0;
    width: 16.2rem;
    height: 4.3rem;
}
/*title icon for: title-articles*/
/*in articles the icon image is big and covers the a - so this is needed*/
.title-articles{
    background-color: transparent;
    padding: 0 2rem 0 5rem;
}
.title-articles:after{
    background-color: #fff;
    z-index: -1;
    left: 1.5rem;
    right: auto;
}

/*title icon for: fast science block*/
.title-fast_science{
    padding: 0 8rem 0 2.5rem;
}
.title-fast_science:after{
    top: 0;
    right: 1rem;
    width: 5.6rem;
    height: 5.5rem;
    background-position: 0 -10rem;
}
/*block title icon for: columns_and_opinions block*/
.title-columns_and_opinions:after{
    width: 6.3rem;
    height: 7rem;
    background-position: 0 -20rem;
}


/* -----------------------------------*/
/* --------->>> Front Page <<<--------*/
/* -----------------------------------*/
/* --------->>> Block Design <<<--------*/
.block{
    text-align: center;
    padding: 2rem 10%;
    /*margin: 2rem 0;*/
    margin: 2rem auto 8rem;
}

/* --------->>> <article> class=post style Design <<<--------*/
.article-wrapper .post{
    width: 100%;
    text-align: right;
    margin-bottom: 6rem;
}
.entry-header img{
    width: 100%;
    border: 1px solid #e5e5e5;
}
.block .page-content,
.block .entry-content,
.block .entry-summary,
.block p{
    margin: 0;
}
/*post header - H2*/
/*.article-wrapper .entry-title*/
.entry-title{
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 1rem 0 0.4rem;
}
.entry-title a{
    color: #000;
}
.entry-meta a{
    color: inherit;
}
.entry-meta img{
    border: 1px solid #e5e5e5;
}
/*block footer ( ex: more articles) + archive next-previous posts*/
.block footer a,
.nav-previous a,
.nav-next a,
.reply a,
.form-submit input,
.issues-archive{
    background-color: #dfdfdf;
    padding: 1rem 1.5rem;
    color: #000;
    display: inline-block;
    position: relative;
}
.block footer a:after,
.nav-previous a:after,
.nav-next a:after,
.reply a:after,
.issues-archive:after{
    content: "»";
    position: relative;
    bottom: 0.2rem;
}

/* --------->>> Block Newest Posts <<<--------*/
.block-newest-posts{
    margin: 0 auto;
    padding: 0;
}
.block-newest-posts .post{
    margin-bottom: 0;
}
.block-newest-posts .entry-title,
.block-newest-posts .entry-meta,
.block-newest-posts .post-authors-wrapper,
.single .post-authors-wrapper{
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin: 0;
}
.block-newest-posts .entry-title a, 
.block-newest-posts .author .author-name,
.single .post-authors-wrapper .author .author-name{
    color: inherit;
}
.block-newest-posts .entry-summary{
    background-color: #e4e4e4;
    padding: 1.4rem;
    line-height: 1.6;
}
.block-newest-posts .entry-header img,
.single .entry-header img{
    border: none;
    display: block;
    width: 100%;
    height: auto;
}
.block-newest-posts .post-authors-wrapper,
.single .post-authors-wrapper{
    padding-top: 0;
}



.block-articles .post-authors-wrapper{
    margin: 1rem 0;
}
/* -----------------------------------*/
/* --------->>> Single Post <<<--------*/
/* -----------------------------------*/
/* --------->>> image and header details <<<--------*/
/*alignment ordering*/
.single .entry-summary,
.single .entry-content,
.single .entry-title,
.about-authors,
.fb-comments-wrapper,
.comments-area,
.wp_rp_wrap,
/*these 2 are strached to the ends in high resolutuins*/
.single .entry-article-summary,
.reading,
.entry-footer .tags-links{
    padding: 1rem 2rem;
}
.block-newest-posts .entry-title,
.single .entry-title{
    padding-bottom: 0.5rem;
}

/*post design*/
.single .entry-header{
    background-color: #dfdfdf;
}
.single .entry-header,
.single .entry-article-summary{
    text-align: center;
}

.single .entry-title{
    background-color: #000;
    color: #fff;
    margin: 0;
    font-size: 3rem;
}
.entry-top-wrapper .entry-meta{
    background-color: #217872;
    float: left;
    font-size: 1.6rem;
    padding: 1rem;
    display: block;
    width: 100%;
}
.single .tags-links,
.single .posted-on{
    display: inline-block;
    color: #fff;
    padding-left: 1rem;
}
.single .posted-on{
    font-size: 1.4rem;
    border-right: 1px solid;
    padding-right: 1.5rem;
    padding-left: 0;
}

.single .entry-content{
    padding-bottom: 3rem; /*for the seperator element*/
}
.single .entry-summary{
    background-color: #217872;
    color: #fff;
    margin-top: 0;
    /*box-shadow: -500px 0 0 0 #217872, 500px 0  0 0 #217872;*/
}
.single .entry-summary p{
    margin-bottom: 0;
}
.single .entry-header img ~ .entry-top-wrapper .entry-summary{
    background-color: rgba(255,255,255,0.85);
    box-shadow: none;
    color: #404040;

}
.single .entry-article-summary{
    color: #fff;
    background-color: #217872;
}

.single .entry-content{
    font-size: 2rem;
    line-height: 1.5;
    margin-top: 0.5rem;

}

.entry-content, 
.entry-summary, 
.page-content, 
.comment-content,
.reading{
    -moz-hyphens: auto;
    word-wrap: break-word;
    white-space: normal;
}
.goodtoknow,
.goodtoknow *,
.single .entry-content,
.single .entry-content *{
    word-break: break-word;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    -webkit-hyphens: manual;

}
/*post designed elements*/
/* causes problems in ff:
.single .entry-content > p:first-of-type:first-letter{
    font-size: 7rem;
    line-height: 1;
    color: #fff;
    box-shadow: 7px 0 0 0 #fff inset, 0 -14px 0 0 #fff inset, 0 -70px 0 0 #217872 inset;
    -webkit-box-shadow: 0 -14px 0 0 #fff inset, 0 -70px 0 0 #217872 inset;
    padding: 0 0.9rem ;
    margin: 0 0 0 0.5rem;
    display: block;
}
*/

.single .entry-content > p:first-of-type:first-letter{
    font-size: 7rem;
    line-height: 1;
    color: #fff;
    background-color: #217872;
    padding: 1.8rem 0.6rem ;
    margin: 0.8rem 0 0 1.6rem;
    display: block;
    float: right;
}
.single .entry-content a{
    color: #e00572;
    text-decoration: underline;
}
.single .entry-content blockquote{
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    margin: 9.5rem 0;
    position: relative;
    quotes: "“" "”";
    display: block;
}
.single .entry-content blockquote:before,
.single .entry-content blockquote:after{
    /*quotes from here: https://css-tricks.com/almanac/properties/q/quotes/*/
    content: open-quote;
    position: absolute;
    /*font-family: times new roman, sans-serif;*/
    font-family: Georgia,Times,Times New Roman,serif;
    font-size: 8rem;
    top: -4rem;
    right: 50%;
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    color: #e00572;
}

.single .entry-content blockquote:after{
    content: close-quote;
    top: auto;
    bottom: -13rem;
}
.single .entry-content h3,
.goodtoknow h3{
    color: #217772;
    font-size: 2.4rem;
    margin-bottom: 0;
}
.wp-caption{
    margin: 2rem 0;
}
.wp-caption.alignright{
    margin: 1rem 0 1rem 2rem;
}
.wp-caption.alignnone {
    margin: 2rem auto;
}
.wp-caption-text {
    text-align: right;
    background-color: #217772;
    color: #fff;
    font-size: 1.6rem;
    padding: 1rem 2rem;
}
/*Good to Know*/

.goodtoknow {
    background-color: #dfdfdf;
    box-shadow: 0 -41px 0 0 #fff inset;
    line-height: 1.6;
    margin: 5rem 2rem;
    padding: 2rem 2rem 6rem 2rem;
}
.goodtoknow h3:first-of-type {
    background-color: #0e7e74;
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #fff;
}
.goodtoknow a{
    text-decoration: underline;
    color: inherit;
}

/*more to read about*/
.single .reading {
    background-color: #dfdfdf;
    padding-bottom: 7rem;
    margin-bottom: 5rem;
}
.reading ul{
    /*direction: ltr;*/
    margin: 0;
    padding: 0;
    list-style: none;
}
.reading ul li{
    padding-right: 1.6rem;
    text-indent: -0.6rem;
}
.reading ul li[style*="text-align: left"],
.reading ul li[style*="text-align:left"]{
    padding-left: 1.6rem;
    padding-right: 0;
    direction: ltr;
}
.reading ul li::before,
.reading ul li[style*="text-align: right"]:before,
.reading ul li[style*="text-align:right"]:before{
    content: " ■ ";
    display: inline-block;
    position: relative;
    right: -1.4rem;
    color: #0e7e74;
}
.reading ul li[style*="text-align: left"]:before,
.reading ul li[style*="text-align:left"]:before{
    left: -1.4rem;
    right: auto;
}
.single .reading a{
    text-decoration: underline;
    color: inherit;
}
/*post footer tags*/
.entry-footer .tags-links,
.entry-footer .edit-link{
    display: block;
    padding-bottom: 8rem;
    margin-bottom: 10rem;
    text-align: left;
}
.entry-footer .edit-link{
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 4rem;
    border-bottom: 1px solid #dfdfdf;
}
.entry-footer .tags-links a,
.entry-footer .edit-link a{
    color: #fff;
    background-color: #217772;
    padding: 1rem;
    display: inline-block;
}
/*about our authors*/
.block-title-plain{
    background-color: #217872;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    padding: 1.5rem 2.5rem;
    margin: 0 0 3rem 0;
}
.block-title-plain a{
    color: inherit;
}
/*comments*/
.comments-title,
.comment-reply-title{
    color: #0e7e74;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}
.comment-list,
.children{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.children{
    padding-top: 2rem;
}

.comment-list > .comment{
    border-bottom: 1px solid #333;
    padding: 4rem 0;
}
.comment-list .avatar{
    float: right;
    margin: 0 0 0 1.5rem;
    max-width: 9.6rem;
    width: 100%;
}
.comment-metadata > a{
    font-size: 1.4rem;
}
.reply {
    text-align: left;
    margin-top: 2rem;
}
/*comments form*/
.comment-form .comment-notes{
    display: none;
}

.comment-form-author,
.comment-form-email,
.comment-form-url{
    position: relative;
    padding-right: 4rem;
}
.comment-form-author:before,
.comment-form-email:before,
.comment-form-url:before{
    content: "";
    background-image: url('images/icon4main.png');
    background-position: -5px -454px;
    width: 2rem;
    height: 2.4rem;
    position: absolute;
    right: 0;
    top: 1.1rem;
}
.comment-form-email:before{
    background-position: -31px -456px;
    width: 2.8rem;
    height: 2rem;
}
.comment-form-url:before{
    background-position: -62px -451px;
    width: 2.7rem;
    height: 2.7rem;
}
.comment-form .required{
    float: right;
    margin-left: 0.5rem;
    color: #e00572;
}
.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
.comment-form-comment textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #000;
    border-color: #c8c8c8;
    border-radius: 0;
    padding: 0.9rem 0.7rem;
    outline: none;
    box-shadow: 0;
    width: 22rem;
    width: calc(90vw - 5rem);
}
.comment-form-comment textarea{
    width: 26rem;
    width: calc(90vw - 1rem)
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label{
    display: inline-block;
    padding: 1rem 0.5rem 0 0;
    color: #000;
    font-size: 1.8rem;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    opacity: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s; 
    min-width: 10rem; /*because the line breaks in LG native browser*/
}
.comment-form-url label,
.comment-form-comment label{
    padding-right: 1.1rem;
}
/*the lable animation is based on: http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/*/
.comment-form-author input:focus + label,
.input--filled.comment-form-author label,
.comment-form-email input:focus + label,
.input--filled.comment-form-email label,
.comment-form-url input:focus + label,
.input--filled.comment-form-url label,
.comment-form-comment textarea :focus + label,
.input--filled.comment-form-comment label{
    opacity: 0;
}

.form-submit{
    text-align: left;
    width: calc(90vw - 1rem);
}
.form-submit input,
.form-submit input:hover{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.8rem;
    padding: 1rem 2rem;
    text-shadow: none;
}


/* --------->>> Related Posts <<<--------*/
.more-articles{
    text-align: center;
    margin-top: 9rem;
}
.more-articles .title-articles{
    background-color: #fff;
}
.more-articles .title-articles::after{
    background-color: transparent;
    z-index: 0;
}
.related_post {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.related_post  li{
    width: 100%;
    margin-bottom: 5rem;
}
.wp_rp_thumbnail img{
    width: 100%;
    border: 1px solid #e5e5e5;
}
.wp_rp_title,
.wp_rp_excerpt{
    display: block;
    text-align: right;
    color: #000;
}
.wp_rp_title{
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 1rem 0 0.4rem;
}
.wp_rp_excerpt{
    font-size: 1.8rem;
    line-height: 1.4;
}
/*edit button - just for admin but still need to look good :)*/
.wp_rp_content div.wp_rp_footer a.wp_rp_edit,
.wp_rp_content div.wp_rp_footer a.wp_rp_edit:hover{
    background-color: #217772;
}

/* --------->>> Single Sticky Share buttons <<<--------*/
.sticky-post-header{
    /*display: none;*/
    visibility: hidden;
    opacity: 0;
    position: fixed;
}
.sticky-post-header.active{
    display: flex;
    justify-content: space-between;
    /*same code with prefix - for iphone*/
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    position: fixed;
    top: 0;
    background-color: rgba(223,223,223,0.9);
    margin: 0;
    padding: 1rem 0;
    z-index: 9;
    width: 100%;
    visibility: visible;
    opacity: 1;
    transition: all 0.4s ease;
}

.sticky-post-header .scientific-logo {
    height: 6rem;
    padding-bottom: 0;
    width: 14.5rem;
    margin: 0 1rem;
}

.sticky-post-header .entry-title{
    display: none;
}
.sticky-buttons{
    display: flex;
    /*same code with prefix - for iphone*/
    display: -webkit-flex;
}
/*share buttons*/
.sticky-post-header .widget_ssba_widget{
    margin-bottom: 0;
}
.ssba img{
    display: none;
}
.ssba_print,
.ssba_email_share,
.ssba_facebook_share,
.comments-count{
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    background-color: rgba(255,255,255,.2);
    border-radius: 50%;
    border: 1px solid #fff;
    margin-left: 1rem;
    background-image: url('images/icon4main.png');
    background-position: 0 -480px;
}
.ssba_email_share{
    background-position: 0 -525px;
}
.ssba_facebook_share{
    background-position: 0 -570px;
}
.comments-count {
    background-position: -2px -616px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 4.1rem;
    text-align: center;
}
@media only screen and (min-width: 320px) and (max-width: 400px){
    .sticky-post-header .scientific-logo{
	width: 8.5rem;
	height: 3.5rem;
	margin-top: 0.5rem;
    }
    .ssba_print, 
    .ssba_email_share, 
    .ssba_facebook_share, 
    .comments-count{
	margin-left: 0.7rem;
    }
}

/* --------------------------------------------*/
/* --------->>> Tag list - Archive< <<<--------*/
/* --------------------------------------------*/
body.tag .site-content,
body.search-results .site-content,
.page .site-content{
    padding: 0 2rem;
}
.page-header,
.page .entry-header{
    text-align: center;
}
/*next-previous posts*/
.nav-previous a,
.nav-next a{
    display: block;
    width: 100%;
}
.nav-next{
    margin-right: 0.2rem;
}
.nav-next a:after{
    left: -4%;
}
.nav-previous a{
    padding: 1rem 2rem 1rem 1rem;
}
.nav-previous a:after,
.issues-archive:after{
    content: "«";
    left: 103%;
} 

.tag .site-content,
.search .site-content{
    margin-top: 3rem;
}
.tag .entry-header,
.search .entry-header,
.page .entry-header{
    position: relative;
}
.block .tags-links,
.tag .tags-links,
.search .tags-links,
.page .tags-links{
    background-color: #217772;
    color: #fff;
    font-size: 1.8rem;
    display: inline-block;
    padding: 0.5rem 1rem;
    position: absolute;
    bottom: 2.7rem;
    right: 0;
    border-right: 1px solid #e5e5e5;
}
.block .tags-links a,
.tag .tags-links a,
.search .tags-links a,
.page .tags-links a{
    color: inherit;
}
.tag .entry-content,
.search .entry-content{
    margin: 0;
    margin-top: 0.5rem;
}

.tag .post,
.search .post{
    margin-bottom: 8rem;
}

/* --------------------------------*/
/* ------->>> Authors plugin<<<----*/
/* --------------------------------*/
.post-authors-wrapper .author{
    display: inline-block;
    font-size: 1.6rem;
}
.post-authors-wrapper .author .author-name{
    color: inherit;
}
.post-authors-wrapper .author .author-img{
    border: 1px solid #dfdfdf;
    width: 100%;
    max-width: 10rem;
}
/*in columns_and_opinions posts list & in one issue & in home in block-columns_and_opinions the author pic and name need to be on the side*/
body.tag-columns_and_opinions .post-authors-wrapper,
.block-columns_and_opinions .post-authors-wrapper{
    float: right;
    max-width: 10rem;
    margin: 0.8rem 0 0 1rem;    
}
/*about the authors - in the end of the post and in home page near top 5*/
.our-authors-plugin .author{
    text-align: right;
    margin-bottom: 3rem;
}
.our-authors-plugin .author .author-img,
.page-authors-wrapper .author .author-img{
    float: right;
    border: 1px solid #dfdfdf;
    width: 100%;
    max-width: 10rem;
    margin: 0.6rem 0 0 2rem;
}
.our-authors-plugin .author .author-name,
.page-authors-wrapper .author .author-name{
    font-weight: 600;
    color: inherit;
    display: block;
}



/* --------------------------------*/
/* ------->>> Search Results<<<----*/
/* --------------------------------*/
.search-no-results .page-title {
    font-weight: 400;
}

.search-no-results .page-header{
    padding: 0 3rem;
}

.search-no-results .no-results h2,
.search-no-results .no-results .page-content{
    margin-top: 0;
}
.search-no-results .no-results h2,
.search-no-results .no-results p{
    padding: 0 8%;
    font-weight: 400;
    font-size: 2.4rem;
}
.search_query{
    color: #e4007b;
    font-weight: 600;
}
.search-no-results .no-results p span{
    font-size: 1.8rem;
    display: block;
    margin-top: 2rem;
    padding-left: 5rem;
}
.search-form{
    z-index: 1;
    padding: 4rem 0;
    width:100%;
    background-color: #217772;
    box-shadow: 400px 0 0 0 #217772, -400px 0 0 0 #217772;
    margin-top: 5rem;	
}
input.search-field[type="search"] {
    width: 85%;
    background-color: transparent;
    font-size: 5rem;
    font-weight: 400;
    border: 0;
    color: #fff;
    padding-right: 2rem;
    outline: none;
}
/*over ridding the lable opacity*/
.search-field::-webkit-input-placeholder{
    color: #bdd6d5;
    opacity: 1 !important;
}
.search-field::-moz-placeholder { /* WebKit browsers */
    color: #bdd6d5;
    opacity: 1 !important;
}
/*removing yellow background & black color text in chrome default input*/
input:-webkit-autofill,
input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0px 1000px #217772 inset;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.search-submit{
    display: none;
}
/* --------------------------------*/
/* ----->>>  ALL Isuues  <<<-------*/
/* --------------------------------*/
.category-all-issues .site-main{
    padding: 0 2rem;
    text-align: center;
}
.category-all-issues  .year-issues{
    text-align: center;
    background-color: #217772;
    color: #fff;
    font-weight: 400;
    display: inline-block;
    padding: 0.2rem 2rem;
}
.category-all-issues .entry-header{
    width: 70%;
    text-align: right;
    margin: 0 15% 7rem 15%;
}
.issues-archive{
    padding: 1rem 3rem 1rem 1rem;
}
/*single issue*/
.one-issue .site-main{
    text-align: center;
}
/* --------------------------------*/
/* ---------->>> 404 Page<<<-------*/
/* --------------------------------*/
html,
.body{
    height: 100%;
}
body.error404 {
    background-color: #000;
    background-image: url("images/404_small.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 200% 190%;
    min-height: 100%;
}
body.error404 .site-header {
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0;
    padding: 4rem 0;
}
.error-404{
    text-align: center;
    padding: 2rem 0 0 0;
}
.error-404-title {
    color: rgba(211, 233, 255, 0.4);
    font-size: 14rem;
    line-height: 1.2;
    margin: 0;
    mix-blend-mode: color-dodge;
}
.error-404 .page-content{
    color: #fff;
}
.error-404 .page-content p:first-of-type span{
    display: block;
    font-weight: 600;
    font-size: 2.6rem;

}
.error-404 .page-content a{
    color: #ffde00;
    text-decoration: underline;
}

/* --------------------------------*/
/* ----->>>  Author Page  <<<------*/
/* --------------------------------*/
.page-authors-wrapper {
    background-color: #dfdfdf;
    margin-bottom: 7rem;
    padding: 3rem 4rem;
}




/* ----------------------------------------------*/
/* ---------->>> Resolutions Specifics<<<--------*/
/* ----------------------------------------------*/

/* It is easy this way to control the differences in the image position
   and prevents from style overriding in higher resolutions*/
/* -----------------------------------*/
/* ---------->>> 320 - 600 <<<--------*/
/* -----------------------------------*/
@media only screen and (min-width: 200px) and (max-width: 599px){

    /* -----------------------------------*/
    /* --------->>> Front Page <<<--------*/
    /* -----------------------------------*/
    /* --------->>> Block Newest Posts  <<<--------*/
    .block-newest-posts .entry-header img,
    .single .entry-header img{
	width: 100vw;
	height: 50vh;
	object-fit: cover;
	overflow: hidden; // *Cuts off the parts of the image poking out*/
	/* from here: http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements
	 needs polifill: https://github.com/anselmh/object-fit/blob/master/README.md*/
    }
    /* --------->>> Block Fast Science <<<--------*/
    .block-fast_science{
	padding: 2rem 7%;
    }
    .block-fast_science .entry-header,
    body.tag-fast_science .entry-header{
	width: 43%;
	float: right;
	margin: 1.4rem 0 1rem 4%;
    }
    .block-fast_science .entry-title,
    .block-fast_science .entry-summary,
    body.tag-fast_science .entry-title,
    body.tag-fast_science .entry-content{
	display: inline;
    }
    .block-fast_science .entry-title,
    body.tag-fast_science .entry-content{
	display: inline-block;
	line-height: 1;
	width: 53%;
	margin-bottom: 0.5rem;
    }
    .home .post-authors-wrapper{
	/*display: none;*/
    }
    /* --------->>> Block Columns And Opinions <<<--------*/
    /*block title icon*/
    .title-columns_and_opinions{
	padding: 0 3rem;
	line-height: 1;
	max-width: 24rem; /*needed for breaking the line to 2 rows*/
    }
    .title-columns_and_opinions:before{
	top: 4rem;
    }
    .title-columns_and_opinions:after{
	top: -0.6rem;
	right: -1rem;
    }
    /*tag - green lable on the image - not needed in low resolutions*/
    .block .entry-meta,
    .block .tags-links{
	display: none;
    }
    /* ----------------------------------*/
    /* --------->>> Tag Page <<<--------*/
    /* ----------------------------------*/
    .tag .post {
	clear: both;
	overflow: hidden; /*needed because of the float*/
    }
    body.tag-fast_science .entry-header{
	margin-top: 0.6rem;
    }

    /*single - more articles*/
    .more-articles-title {
	line-height: 1;
	max-width: 19rem;
    }


}

/* -----------------------------------*/
/* ---------->>> 320 - 1200 <<<--------*/
/* -----------------------------------*/
/*the author image doesn't need to apear untill 1200px'*/
@media only screen and (min-width: 200px) and (max-width: 1199px){
    /*author name and image*/
    .block-fast_science .post:last-child,
    .block-columns_and_opinions .author .author-img{
	display: none;
    }
    .block-columns_and_opinions .post-authors-wrapper{
	float: none;
	width: auto;
	display: inline-block;
	margin-bottom: 1rem;
	clear: right;
    }
}

/* -----------------------------------*/
/* ---------->>> 320 - 960 <<<--------*/
/* -----------------------------------*/
/*removing the 3 parts on the bottom and footer quaots*/
@media only screen and (min-width: 200px) and (max-width: 959px){
    .block-newest-posts .tags-links,
    .block-latest-issues,
    .home .widget-area,
    .widget_quotescollection,
    .site-header .search-form,
    .left-header,
    .ssba_print{
	display: none;
    }
}
/* -----------------------------------*/
/* ---------->>> 600 - 960 <<<--------*/
/* -----------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px){
    /* -----------------------------------*/
    /* --------->>> Front Page <<<--------*/
    /* -----------------------------------*/
    /* --------->>> Block Design <<<--------*/
    .block .entry-header{
	width: 50%;
	float: right;
	margin: 0.6rem 0 0.2rem 2.5rem;
    }
    .block-newest-posts .entry-header{
	width: 100%;
	float: none;
	margin: 0;
    }
    .block-newest-posts .entry-title,
    .block-newest-posts .entry-meta,
    .block-newest-posts .entry-summary{
	padding: 1rem calc(50% - 25rem);
    }
    .block-articles .entry-title,
    .block-articles .entry-summary{
	display: inline;
    }
    /*between 600-960px fast science is the only block that needs flex*/
    .block-fast_science .article-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*same code with prefix - for ios*/
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: space-between;
	padding: 3rem;
    }
    .block-fast_science .post{
	width: 46%;
    }
    .block-fast_science .entry-header{
	float: none;
	width: 100%;
	margin: 0;
	margin-bottom: 1.5rem;
    }
    .block-fast_science .entry-title{
	display: block;
	margin-bottom: 10px;
	width: 100%;
    }
    /*columns_and_opinions*/
    .block-columns_and_opinions .entry-title,
    .block-columns_and_opinions .entry-summary{
	display: inline-block;
	width: 45%;
    }

    /*Tag list - Archive*/
    body.tag-fast_science .site-main{
	justify-content: space-around;
	-webkit-justify-content: space-aroundn;
    }
    body.tag-fast_science .site-content .post {
	margin-right: 0;
	width: 40%;
    }
    /*search*/
    .search-form{
	width: calc(100% - 5rem);
    }
}



/* ---------->>> END :Resolutions Specifics<<<--------*/
/* ---------------------------------------------------*/


/*------------------------------*/
/*--------- 600px and Up -------*/
/*------------------------------*/
@media only screen and (min-width: 600px){ 
    /* -----------------------------------*/
    /* --------->>> Site Footer <<<-------*/
    /* -----------------------------------*/
    .footer-logos .ort-logo,
    .site-header .ort-logo{
	width: 37%;
	height: auto;
	padding-bottom: 19%;
	background-position: 0 48%;
	background-size: 182% auto;
    }
    .footer-logos{
	max-width: 50rem;
	margin: 0 auto;
    }
    .footer-widgets{
	padding: 2.5rem calc( 50% - 25rem);
    }
    .widget_nav_menu .menu a {
	font-size: 2rem;
	padding: 0.9rem 1.7rem 1rem;
    }
    .widget_nav_menu .menu-item:last-child a {
	padding: 0.9rem 1.7rem 1rem 7rem;

    }
    .widget_nav_menu .menu-item:last-child a::after {
	background-position: 0 -35rem;
	height: 5rem;
	width: 5rem;
    }
    .gform_footer{
	display: inline-block;
	padding: 0;
    }
    .gform_wrapper form{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/*same code with prefix - for ios*/
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-align-items: flex-start;
    }
    .gform_heading{
	flex: 2;
	-webkit-flex:2;
	min-width: 54rem;
    }
    .gform_body{
	display: inline-block;
	width: calc(100% - 10.5rem);
    }
    body .gform_widget .gform_wrapper label.gfield_label + div.ginput_container{
	margin-top: 0;
    }
    body.rtl .gform_widget .gform_wrapper input[type="text"],
    body.rtl .gform_widget .gform_wrapper input[type="email"]{
	padding: 1.1rem 0.5rem 1.1rem;
    }
    .gform_widget .gform_wrapper  .gform_footer{
	margin: 0 1rem 0 0;
    }

    /* -----------------------------------*/
    /* ----->>> Designed Tittles <<<------*/
    /* -----------------------------------*/
    /* title line-through*/
    .title-articles:before,
    .title-fast_science:before,
    .title-columns_and_opinions:before,
    .more-articles-title:before{
	width: 36.4rem;
    }
    .page-title:before,
    .page h1.entry-title:before{
	width: 35rem;
    }
    .one-issue .page-title:before{
	width: 63rem;
    }
    .search-no-results .page-title:before{
	width: 64rem;
    }
    /*block title icon for: block-articles*/
    .title-articles{
	padding: 0 2rem 0 3rem;
    }
    .title-articles:after{
	left: 0;
    }
    /*title icon for: fast science block*/
    .title-fast_science{
	padding: 0 2rem;
    }
    .title-fast_science:after{
	right: -7rem;
    }

    /*title icon for: columns_and_opinions block*/
    .title-columns_and_opinions{
	padding: 0 2rem;
    }
    .title-columns_and_opinions:after{
	right: -6.3rem;
	top: -2.6rem;
	background-color: #fff;
    }

    /* -----------------------------------*/
    /* --------->>> Front Page <<<--------*/
    /* -----------------------------------*/

    /* --------->>> Block Design <<<--------*/
    .block:not(.block-newest-posts):not(.block-latest-issues),
    .footer-logos{
	width: 80%;
    }
    .block{
	padding: 0;
    }


    /* -------->>> Block Tag  <<<-------*/
    /*green lable on image*/
    .block .entry-header{
	position: relative;
    }

    /* -----------------------------------*/
    /*---->>> Tag list - Archive   <<<----*/
    /* -----------------------------------*/
    /*home, one issue and single has diffrant width than all the rest of the site
      home & one issue has width in the block sections
      single has diffrant width because of the length of the lines for reading*/
    body:not(.home):not(.single):not(.one-issue):not(.error404) .site-content{
	width: 80%;
	margin: 0 auto;
	padding: 0;
    }
    .tag .site-main,
    .search-results .site-main,
    .page .article-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*same code with prefix - for ios*/
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;

    }
    .page-header,
    .posts-navigation{
	flex: 0 1 100%; /*to keep them im 100% width and not in the flex-wrap flow*/
	-webkit-flex: 0 1 100%;
    }

    body.tag .post,
    body.search-results .post,
    .page .post{
	width: 49.5%;
	margin-left: 0.5%;
    }
    .tag .entry-content{
	padding-left: 3rem;
    }
    .tag .entry-title{
	padding-left: 1.5rem;
    }
    body.tag-fast_science .site-content .post{
	width: 30%;
    }
    .nav-next{
	margin-right: 0.5rem;
    }
    /* -----------------------------------*/
    /* --------->>> Single Post <<<--------*/
    /* -----------------------------------*/
    /* --------->>> Single Sticky Share buttons <<<--------*/
    .sticky-post-header .entry-title{
	display: block;
	font-size: 2rem;
	color: inherit;
	font-weight: 400;
	background-color: transparent;
	padding: 0 0 0.8rem 0;
    }
    .sticky-details{
	display: flex;
	align-items: flex-end;
	/*same code with prefix - for iphone*/
	display: -webkit-flex;
	-webkit-align-items: flex-end;
    }
    .sticky-post-header .scientific-logo{
	min-width: 14.5rem;
    }
    .sticky-details{
	max-width: 60%;
    }
    /* --------->>> Comments <<<--------*/
    .children{
	margin-right: 2rem;
    }
    /* --------->>> Related Posts <<<--------*/
    .related_post{
	display: flex;
	display: -webkit-flex;
    }
    .related_post  li{
	width: 33%;
	margin-left: 1%;
    }
    .related_post  li:last-of-type{
	margin-left: 0;
    }
    .wp_rp_title, .wp_rp_excerpt {
	padding-left: 1.5rem;
    }

    /* --------------------------------*/
    /* ------->>> Search Results<<<----*/
    /* --------------------------------*/
    .search-no-results .no-results h2,
    .search-no-results .no-results p{
	padding: 0 calc(50% - 18rem) 0;

    }
    /* --------------------------------*/
    /* ------->>>  ISSSUES  <<<--------*/
    /* --------------------------------*/
    .category-all-issues .site-main{
	/*	width: 80%;
		padding: 0;
		margin-right: 10%;
		margin-left: 10%;*/

    }
    .category-all-issues .issues-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*same code with prefix - for iphone*/
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: center;

    }
    .category-all-issues .entry-header{
	width: 30%;
	margin-left: 3.33%;
	margin-right: 0;
    }

    /* --------------------------------*/
    /* ---------->>> 404 Page<<<-------*/
    /* --------------------------------*/
    body.error404 {
	background-position: bottom center;
	background-size: cover;
    }
    .error-404 {
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-display: flex;
	-webkit-justify-content: center;
	-webkit-align-items: center;
	padding: 2rem 0 0;
	text-align: right;
    }
    .error-404-title{
	margin-left: 2rem;
    }

}