/*
Theme Name: Fluida CSC V1
Theme URI: http://www.csectioncomics.com/
description: Fluida C-Section Comics Child Theme
Author: Idan Schneider
Author URI: http://www.csectioncomics.com
Template: fluida
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: csc-fluida-child
*/


/* make logo big, but only on wide screens*/
@media all and (min-width: 1300px)
{
	a#logo > img {
	max-height: 500%; /*previously 90%*/
	vertical-align: middle;
	}
	
	.fluida-menu-left #access {
    float: left;
    font-size: 100%;
    margin-left: 0.5em;
	}
}

@media all and (max-width: 1300px)
{
	a#logo > img {
	max-height: 200%; /*previously 90%*/
	vertical-align: middle;
	}
	
	.fluida-menu-left #access {
    float: left;
    font-size: 80%;
    margin-left: 0.5em;
	}
}

@media all and (max-width: 1000px)
{
/*also decrease logo*/
	a#logo > img {
	max-height: 100%; /*previously 90%*/
	}
}


/*make logo brighter on hover*/
a#logo > img {
	-webkit-filter: brightness(90%);
	/* the transition effects will be specified in another a#logo > img below*/
}
a#logo:hover > img {
	-webkit-filter: brightness(130%);
}

/*
a#logo > img {
	-webkit-transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	transition: 1s ease;
}
a#logo:hover > img {
	-webkit-transform: rotateZ(-10deg);
	-ms-transform: rotateZ(-10deg);
	transform: rotateZ(-10deg);
	transition: 1s ease;
}
*/

/* make header shrink on scroll*/
/* See this for transition code: https://stackoverflow.com/questions/34463920/css-transition-not-working-properly-resize-image */
a#logo.shrink > img {
	transform: scale(0.8, 0.8);  !important;
	margin-top: -10px; /*so that logo will still be aligned to top*/
	margin-left: -25px; /*Move to top left corner*/
	padding-right: 25px; /*This is needed so that menu stays in place*/
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
a#logo > img {
	 transform: scale(1.00, 1.00);  !important;
    margin-top: 0px; /*so that logo will still be aligned to top*/
     -webkit-transition: all 0.3s ease, filter 1s ease; /*we need to specify filter for the "brightness on hover" above*/
	-moz-transition: all 0.3s ease, filter 1s ease;
	-o-transition: all 0.3s ease, filter 1s ease;
	-ms-transition: all 0.3s ease, filter 1s ease;
	transition: all 0.3s ease, filter 1s ease;
}



/*Make top menu items closer to each other*/
#access a {
	display: block;
	padding: 0 0.8em; /*original 0 1.6em*/
	text-decoration: none;
	line-height: 3.5; /*3.5;*/
}


/* hide site title*/
#site-title {
	font-size: 0%; /* previously 150%*/
	font-family: Open Sans Condensed;
    font-weight: 300;
}


/*-------------
 ## COMIC NAVIGATION
 ---------------------*/

/*pretty comic navigation*/
/*Change font size by width*/
@media (min-width: 700px) {
	.comic_navi {
		padding: 2px;
		font-family: 'Luckiest Guy';
		font-size: 24px;
	}
}

@media (max-width: 700px) {
	.comic_navi {
		padding: 2px;
		font-family: 'Luckiest Guy';
		font-size: 17px;
	}
}

@media (max-width: 450px) {
	.comic_navi {
		font-size: 12px;
	}
}




.navi {
    padding: 0 6px; /*original was 0 6x*/
    display: inline-block;
}

.main table { /*this one is from fluida*/
    max-width: 100%;
    margin: 0 0 2em 0; /*was previously 0 0 2em 0*/
    border: 0;
    vertical-align: top;
}


/*change color of navigation menu*/
span.navi{
	color: gray;
}

a.navi {
	color: #222222;
	/*color: steelblue;*/
}

a.navi:hover {
	color: orange;
}

/*reduce space below comic navigation*/
/*
.comic_navi_wrapper {
    display: table;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: -4em;
}
*/


/*--------------------------------------------------------------
	# SOCIALS
--------------------------------------------------------------*/

/* ## GENERAL */
.socials {
	position: relative;
	float: initial;
}

.sidey .socials {
	display: table;
	float: none;
	margin: 0 auto 2em;
	font-size: .9em;
}
.socials a {
	display: block;
	float: left;
	position: relative;
	z-index: 99;
	overflow: hidden;
	padding: 0 .7em;
}

.socials a span {
	display: none;
}

.socials a:before {
	
	/*-webkit-transform: rotateY(0);*/
	/*-ms-transform: rotateY(0);*/
	/*transform: rotateY(0);*/
	-webkit-transition: -webkit-transform .6s ease-in-out, color .6s ease-in-out;
	-webkit-transition: color .6s ease-in-out, -webkit-transform .6s ease-in-out;
	transition: color .3 ease-in-out, -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, color .3s ease-in-out;
	transition: transform .3s ease-in-out, color .3s ease-in-out, -webkit-transform .6s ease-in-out;
}

/* change social icon rotation to X instead of Y, and to 360 degrees insteaad of 180*/
/* I changed it to 1 deg so that it won't flip*/
.socials a:hover:before {
	-webkit-transform: rotateX(1deg);
	-ms-transform: rotateX(1eg);
	transform: rotateX(1deg);
	
}

/* ## HEADER SOCIALS */
#sheader {
	float: right;
	margin-left: .5em;
}

@media all and (min-width: 900px)
{
	/*apply for both header and footer social icons*/
	#sheader, #sfooter {
		font-size: 180%; /*larger social icons on top menu*/
		letter-spacing: -0.5em; /*make icons closer*/
	}
}

@media all and (max-width: 900px)
{
	/*apply for both header and footer social icons*/
	#sheader, #sfooter {
		font-size: 120%; /*larger social icons on top menu*/
		letter-spacing: -0.6em; /*make icons closer*/
	}
}


/*TODO: Make social icons in header white*/
/* see https://www.cryoutcreations.eu/forums/t/change-social-icons-in-header-only */

#sheader.socials a::before {
	color: #eebb33;
}


/*hover color is white*/
#sheader.socials a:hover:before {
	color: white;
}



#sright {
	font-size: 150%; /*larger social icons on sidebar*/
	letter-spacing: -0.5em; /*make icons closer*/
}

#sheader a:before {
	font-size: .8em;
}

/* ## SIDEBAR SOCIALS */
#socials-left .socials,
#socials-right .socials{
	display: table;
	margin: 0 auto;
}

/* ## FOOTER SOCIALS */
#sfooter {
	display: block;
	float: right;
	clear: right;
}

#sfooter.socials a::before {
	color: #eebb33;
}

/*hover color is white*/
#sfooter.socials a:hover:before {
	color: white;
}




/*--------------------------------------------------------------
	## MAIN MENU
--------------------------------------------------------------*/

/* change background and foregound colors of menu - see https://www.cryoutcreations.eu/forums/t/menu-fluida */
body #access > div > ul > li:hover a {
	background: inherit;
	color: white; 
}

/* main menu effects (e.g. color transition speed)*/
#access li,
#access ul li a,
#access ul li.menu-main-search > i {
	-webkit-transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
	transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
}



/* Idan - change link color change speed*/
a:link:hover {
	transition: color .2s;
}


/*---------------------------------------------------
 ## BONUS PANEL
 ---------------------------------------------------*/
 /*bonus panel title style*/
#extracomicblock .bonuscomic h2, .bonuscomic-h2 a {
    font-size: 36px;
    font-family: 'Luckiest Guy',Georgia,serif;
    font-weight: normal;
    color: #e2a600;
    letter-spacing: normal;
}

@media (min-width: 700px) {
	#extracomicblock .bonuscomic h2, .bonuscomic-h2 a {
			font-size: 36px;
	}
}

@media (max-width: 700px) {
	#extracomicblock .bonuscomic h2, .bonuscomic-h2 a {
			font-size: 22px;
	}
}


#extracomicblock{
	padding-bottom: 50px;
}

/*change color of bonus comic title*/
a#extracomic.bonus-panel-title {
	color: steelblue;
	transition: color .2s;
}

a#extracomic.bonus-panel-title:hover {
	color: orange;
	/*text-decoration: underline;*/
	transition: color .2s;
}




/*---------------------------------------------------
 ## Blog posts
 ---------------------------------------------------*/
 /*Remove spacing between blog posts*/
 #content-masonry article.hentry {
    display: block;
    overflow: hidden;
    margin: 0;
    margin-right: 1%;
    margin-bottom: 0em; /* was 2em*/
	margin-left: 1%;
	/* remove shadow from blog post*/
	box-shadow: 0 0 0em 0em rgba(0, 0, 0, 0);/*was box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.03);*/
}

/* remove shadow from blog post (pt2, see also above)*/
.fluida-elementshadow article.hentry{
	box-shadow: 0 0 0em 0em rgba(0, 0, 0, 0);/*was box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.03);*/
}


#comic-wrap{
	 margin-bottom: -1.0em; /* was 0em*/
	  margin-top: 0em; /* was 0em*/
}



/**------------------------------------------------
 ## Header - ad area
 ----------------------------------------------*/
 
 /*Centralize ad area*/
#header-widget-area {
    padding-top: 1.4em;
}

/* make header ad responsive*/
#header-widget-area {
    width: 90%;
    left: -webkit-calc(100% - 350px);
    left: -moz-calc(100% - 350px);
    left: calc(80% - 1100px);
    top: calc(60% - 90px);
}

/*TODO:  test this, see if it works. 
See also https://support.google.com/adsense/answer/6307124#hide */

@media (max-width: 800px) {
	.csc_responsive_top:before{
		display: none;
	}
}
@media (min-width:800px) {
	.csc_responsive_top:before{
		display:block;
	}
	
}


/*
.adslot_1 {
	display:inline-block; width: 728px; height: 90px;
}
@media (max-width: 800px) {
	.adslot_1 { display: none; }
}
@media (min-width:800px) {
	.adslot_1 { width: 728px; height: 90px; }
}
*/



/*------------------------------------
 ## Mobile Menu
 -------------------------------------*/
nav#mobile-menu ul li {
	position: relative;
	display: block;
	float: none;
	clear: both;
	white-space: normal;
	line-height: 3;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-bottom: 1px solid rgba(0,0,0,.05);
	font-family: 'Luckiest Guy'; /*Changed font*/
} 

/*permalink style*/
/*textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"]*/
input#permalink {
	max-width: 80%;
	width: 40%;
	padding: .7em 1em;
	border: 1px solid lightgray;
	background: transparent;
	font-size: inherit;
	font-family: inherit;
	-webkit-transition: border-top-color .3s .1s, border-bottom-color .3s .3s, border-left-color .3s 0s, border-right-color .3s .2s;
	transition: border-top-color .3s .1s, border-bottom-color .3s .3s, border-left-color .3s 0s, border-right-color .3s .2s;
}

/*label, .form-label {*/
label#permalinklabel {
	font-family: 'Verdana';
    font-size: 0.7em;
    color: #4d4d4d;
    cursor: pointer;
    /*display: block;*/
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 0;
}

/*social share buttons - resize font awesome stack according to width*/
@media all and (min-width: 700px)
{
	span.fa-stack.fa-lg{
		font-size: 1.2em;
	}
	
	span#sharelabel{
		font-size: 1.2em;
	}
}


@media all and (max-width: 700px)
{
	span.fa-stack.fa-lg{
		font-size: 22px;
	}
	
	span#sharelabel{
		font-size: 22px;
	}
	
}

@media all and (max-width: 500px)
{
	span.fa-stack.fa-lg{
		font-size: 14px;
	}
	
	span#sharelabel{
		font-size: 15px;
	}
	
}


.social-buttons-share
{
	display:block;
}


.social-buttons-share a
{
	-webkit-transition: -webkit-transform .3s ease-in-out, color .3s ease-in-out;
	-webkit-transition: color .3s ease-in-out, -webkit-transform .3s ease-in-out;
	transition: color .3 ease-in-out, -webkit-transform .3s ease-in-out;
	color: #222222;
}

.social-buttons-share a:hover
{
	-webkit-transition: -webkit-transform .3s ease-in-out, color .3s ease-in-out;
	-webkit-transition: color .3s ease-in-out, -webkit-transform .3s ease-in-out;
	transition: color .3 ease-in-out, -webkit-transform .3s ease-in-out;
	/*color: #e2a600;*/
	color: goldenrod;
}

.social-buttons-share
{
	font-family: 'Luckiest Guy';
	font-size: 25px;
	color: gray;
	display:block;
	/*border-top: 4px solid lightgray;*/
	padding-top: 20px;
		
}


/*change color of post titles*/
.entry-title{
	color: #222222;
}

.entry-title a:hover{
	color: orange;
}

.entry-title a:active,
.entry-title a:hover {
	border-bottom: none; /*remove underline from post title*/
}
.entry-title a {
	border-bottom: none; /*remove underline from post title*/
}



/*------------------------------------
 ## Footer
-------------------------------------*/
.footermenu
{
	font-weight: bold;
	font-style: normal;
	font-family: 'Futura', sans-serif;
	text-transform: uppercase;
}

#footermenuid.footermenu a
{
	-webkit-transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
	transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
	color: #eebb33;
}

#footermenuid.footermenu a:hover
{
	-webkit-transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
	transition: background .2s ease-in-out, color .3s ease-in-out, .25s line-height ease-in-out, .25s height ease-in-out;
	color: white;
}


.idancopyright
{
	color:gray;
	font-size: smaller;
	font-style: normal;
	display: block;
	/*border-top: 1px solid darkgray;*/
}


/*-----------------------------------
/* ## SIDEBAR SEARCH */
/*---------------------------------*/
/*
.searchform input[type="search"] {
	display: block;
	float: left;
	position: relative;
	z-index: 7;
	height: 3em;
	width: 100%;
	padding: 0 3.5em 0 .5em;
	border: 0;
	font-size: 1em;
	font-weight: 300;
	background: transparent;
	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}

searchform:hover::after {
	width: 100%;
}

.searchform::after {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	width: 3em;
	height: 100%;
	content: "";
	-webkit-transition: width .3s ease;
	transition: width .3s ease;
}
*/



/*---------------------------------*/
/* ## Poem 	*/
/*---------------------------------*/
div.poem
{
	font-style: italic;
}


/*---------------------------------*/
/* ## Blog Posts 	*/
/*---------------------------------*/

/*reduce size of caption under images in blog posts*/
.main .wp-caption .wp-caption-text {
    font-size: 0.7em;
}