/*
Theme Name: Maday Theme
Theme URL: http://MadayProductions.com
Description: This is a child theme developed for MadayProductions.com
Author: Phyllis Lee
Author URI: http://cittapartnership.com
Template: reveal
Version: 0.1.0
@import url("../maday/gray-gh-pages/css/gray.css");
*/

@import url("../reveal/style.css");


#logo h1{
/*background:url(/wp-content/uploads/logo_color_455px.gif) no-repeat;*/

background:url(/logo_color.svg) no-repeat;
background-size: 100% auto;

}
#logo h1 a img{
width: 100%;
background-color:#030303;
}
#logo h1 a img:hover{
opacity:0;
background-color:transparent;
}
@media only screen and (max-width: 900px), screen and  (max-device-width: 900px), screen and  (min-width: 600px){
	#logo
	{	margin:0 0.3%;
		max-width: 455px;
		width: 50%;
	}
}

@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px){
	#logo
	{	width: 98%; margin:0px auto;
		display:block;
		max-width: 455px;
	}
	#mainNav {
	margin: 0px auto;
	/*width: 275px;*/
width: 300px;
	min-height:60px;
	border:solid 0px red;
left:8px;
	}
	#mainNav li a {
	padding: 0 13px !important;
}
}
body {
color: #7d7d7b;
color: #bbbbb7;
min-width:320px;
}
p {
font-size: 0.95em;
}
#header{padding:0 0 0px 0;}
.home #main{padding:0 0 0 0;}
#header .inside {
max-width: 94%;
background:#000;
background:transparent;
border-bottom:solid 2px #222;
padding: 32px 0 10px;
}
#mainNav {
    font-family: Armata;

top: initial; /*NEED THIS LINE TO CLEAR ORIGINAL STYLING*/
right:3%;
right: 0.5%;
bottom: 58%;
/* left: 3%;
width:50%;
font-size:140%;*/
font-size:120%;
letter-spacing:1px;
font-weight:600;
color:#fff;
right: -0.5em;  /*needed for devices that does not use the vw unit, e.g. andriod browser*/
right:-1.5vw;
}
#mainNav li {
margin: 0 0 0 3em;
margin:0;
float:none;
}
#mainNav li a {
padding: 0 1.1em; /*needed for devices that does not use the vw unit, e.g. andriod browser*/
padding:0 2.2vw;
}
.sf-menu li:before
  {content:"|";
  font-weight:100;
  font-size:0.5em;  color:#677;  position:relative;  top:20px;left:-1px;
  }
  .sf-menu>:first-child:before
  {color:#070707;
  }
#main {
 background: #000;
background:transparent;
/*max-width: 102%;
max-width: 94%;*/
max-width:100%;
width:94%;
}

#projects {
width: 100%;
margin: 0 0 0 0.5%;
/*margin: 0 0 0 0%;*/
margin: 0 0 0 0.2%;
border-top: solid 2px #222;
width: 99.8%;
padding-top: 30px;
position: relative;
top: -31px;
}
#content .project.small {
/*width:24.8%;
margin: 0 0px 0px 0;
margin-left:-2px !important;
border:solid 1px black;*/
width:17.7%; /*use this line with 5 thumbs in a row*/

}
/*
#content .project.small img {
width: 108%
}*/
#content .project.small img {
width: 112% !important;
}

#projectBox {
background: rgba(60,160,255,1);
background: #030303;
/*background: transparent url(images/black_alpha_50.png);*/
width: 100%;
position: relative;
left: -4%;
border: solid 0px #222; /*  */
padding: 0 4%;
}


#ajaxLoading {
background: transparent url(../reveal/images/loader.gif) no-repeat;
width:25px;
height:25px;
left: 50%;
top: 40%;
}
#filterNav
{
display:none !important;/*HIDE BUTTONS FOR SKILLS*/
}
#projectHolder
{margin:0 0.5%;
}
/*5-colums no-space
#content .project.small {
width: 18%;
}*/
#content .project.small img.MADAY-thumb-ground{ 
/*extra thumbnail image needed for estaurated hack in IE6-9*/
position:absolute;
top:0px;
left:0px;
z-index:-1000;
}

#content .project.small {
/*margin: 0 0 0px 0 !important;*/
margin-bottom:0px !important;
}

.thumb{
   /* filter: url(/wp-content/themes/maday/filters.svg#grayscale);  Firefox 3.5+ */
/*  filter: gray alpha(opacity=80) !important;   IE6-9 */
  /*  -webkit-filter: grayscale(0.85);  Google Chrome, Safari 6+ & Opera 15+ */
/* filter: alpha(opacity=85) !important;  IE6-9
opacity:0.85 !important; */
}
.thumb:hover , a:hover img.thumb{
    filter: none;  
   -webkit-filter: grayscale(0);
opacity:0 !important;
filter:alpha(opacity=0)!important; /**/
}
#content .project.small .title {
width: 118%;
font-size: 0.75vw;
text-transform: uppercase;
font-weight:900;
letter-spacing:1px;
color:rgba(90,190,255,1);
text-shadow: 0px 0px 3px #000;
}
#content .project.small .title span {
padding: 0.9vw 1.25vw;
}
#MADAY-proj-link a.action { 
color:#bbb; font-style: normal;	
text-transform:lowercase;
	font-variant:small-caps;font-weight:900;
	letter-spacing:1px;
position:relative;
top:-4px;
}
#MADAY-proj-link a:hover.action { 
color:#ddd;
 }

.MADAY-txt-value a { 
font-style: normal;	
text-transform:lowercase;
	font-variant:small-caps;font-weight:900;
	letter-spacing:1px;
position:relative;
top:-4px;
}
.MADAY-txt-value a:hover { 
 }
#projectHolder p {
	color:#222220;
	color:#999;
}


@media only screen and  (max-width: 1024px)
{.projectHeader {min-width: 22%;}
}
@media only screen and (min-width : 767px) {
	.projectHeader {
	position:absolute;
	top:initial;
	bottom:2.4%;
	right:4.5%;
	width:17.5%;
	}
	#projectHolder div.details{
	margin-top:15%;
	width: 25%;
	}
	.project .visuals { width:71%; border:solid 0px red; float:left;}
.project .details {float: right;
width: 22%;
padding: 0px 0 0 0;
}
	#projectHolder div.details p.MADAY-txt-value {
	font-size:1.1vw;
	}
	p.MADAY-txt-value{
	color:#222220;
	color:#eee;
	display:table-cell;
	line-height:1.1em;
	}
	#projectHolder div.details p strong{
	font-size:1.2vw;
	}
	.MADAY-txt-label{
	color:#fff;
	color:#444;
	line-height:1.1em;
	font-size:1.1vw;
	font-variant:small-caps;
	text-transform:uppercase;
	line-height:1.5em;
	font-size:0.8vw;
	font-weight:900;
	letter-spacing:1px;
	display:inline;
	width:22%;
	float:left;
	clear:both;
	padding-top:1px;
	}
	
	#MADAY-proj-link {padding-left:0; min-height:20px;height:25px;}
	#MADAY-proj-link a.action {font-size:1vw;	}
	.projectNav { right: 0px; }
	.project .visuals .column-grid { width: 115%;	}
	.column-grid .column.MADAY_clientlist p {line-height: 18px;}
	.column-grid .column p br {	display: block;	}
	.column-grid .column.MADAY_clientlist br {line-height: 28px;margin:7px;}
	.column-grid .column .MADAY-txt {min-height:6.0vw; padding-bottom:1.8vw; border-bottom:solid 0px #111;}
	.column-grid .column .MADAY-txt-label {font-size:0.65vw;line-height:1.05em;}
	.column-grid .column .MADAY-txt-value {line-height:1em;}
}
@media only screen and (max-width : 767px) {
	#mainNav {
/*height:100px;*/
	right:-0.65em; /*needed for devices that does not use the vw unit, e.g. andriod browser*/
	right:-1.5vw;
	}
	.projectHeader {
/*	top:5px;
	left: 0px;
	width: 99%; 
	padding:20px 0;*/
	margin-top:25px;
	margin-bottom:15px;

	}
	#projectHolder div.details{
	margin-top:2%;
	width: 100%;
	}
	/*#projectHolder div.details */
	p.MADAY-txt-value {
	display:table-cell;
	line-height:1.1em;
	color:#eee;
	}
	.MADAY-txt-label{
	font-variant:small-caps;
	font-weight:900;
	letter-spacing:1px;
	display:inline;
	width:22%;
	/*max-width:90px;*/
	float:left;
	clear:both;
	color:#444;
	}
	#MADAY-proj-link { padding-left:22%;min-height:20px; height:25px;max-width:60%;}
	#MADAY-proj-link a.action {	}
	.project .visuals .column-grid { width: 100%;	}
	.column-grid .column.MADAY_clientlist p {
		line-height: 2.7vw;
		font-size:2.3vw;
		}
	.column-grid .column.MADAY_clientlist br {
		line-height: 4vw;
		margin:1vw; /*FIREFOX NEED THIS*/
	}
	.column-grid .column p.MADAY-txt-value { font-size:0.70em;}
	.column-grid .column .MADAY-txt-label { font-size:0.60em;}
	.column-grid .column .MADAY-txt {min-height:15vw; padding-bottom:18px; border-bottom:solid 0px #111;}
}
@media only screen and (max-width : 600px) {
#mainNav {
/*height:100px;*/
	right:0;
	}
	.column-grid .column p.MADAY-txt-value { font-size:0.6em;}
}

/* STYLEs FOR PAGES */
#pageHead {
    border-bottom: 0px solid #E4E4E4;
    margin: 0 0.5%;
    padding: 10px 0 15px;
    position: relative;
}
#pageHead h1 {
line-height:1.1em;
margin-bottom:0.7em;
}
#content.full {
margin: 0 0 20px 0.5%;
padding: 0 0 0 0 !important;
width: 99%;
}
p:empty, div.space-holder {display:none;}
/*.column p.space-holder:first-of-type:before{
content:'p';
}*/

.page .column div.space-holder:first-of-type{
display:block;
height:16px;
    border-top: solid 1px #444;
}
.post-password-form input[type="password"]{
border: 0px solid #777;
line-height: 1.7em;
background-color: #666;
}
.nocomments {display:none;}
#footer .inside {
max-width: 99%;
}
#footer .inside .right {
font-size:11px;
}

i.fa {
width:1.5em;
}