/* Mobile - phones and tablets */
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6, .juicer-feed .j-title{
font-family: 'Fira Sans', sans-serif !important;
}
body{
	  overflow-wrap: normal !important;
	  }
.content .field-items p a {
    text-decoration: underline !important;
}
.block-search input.form-search {
    height: 30px !important;
    }
.field-item p,  .content ul li{
	    font-size: 14px;
		 line-height: 1.2;
		 padding-bottom: 0.5em;
	}
div.github:before {
	content: "\f09b";
	font-family: FontAwesome;

/*Hide news menu*/
.column--sidebar .menu li.menu-mlid-2271 .active{
display:block !important;}
.column--sidebar .menu li.menu-mlid-2271 .leaf{
display: none;}


	/* more styling for the icon, including color, font-size, positioning, etc. */
}
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/*RSS Feed Thumb */
.feed_informer_first_image{
	display: block;
	width: 100% !important;
    height: auto;
}
	 
/*Navigation*/
.navigation .block-menu-block {
    background: #434345;
    border: 0;
    border-radius: 0;
    float: left;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 100%;
}
.navigation ul.menu li.first{
	 border-left: 0px;
}

.navigation .menu li {
    border-left: 1px dotted #000;
}
.navigation ul.menu ul {
    border: 0 none !important;
}
.navigation ul.menu a {
    color: #fff;
	text-shadow: none;
}
.navigation ul.menu ul li a {
    color: #434345;
}
.navigation ul.menu ul li {
	border-bottom: 1px solid #ccc;
	border-top: 0;
	border-left:0;
	border-right:0; 
}

.container--navigation {
    padding-bottom: 0px !important;
}

.navigation ul.menu li:hover > a , .navigation ul.menu ul li:hover a, .navigation ul.menu ul li:focus a, .navigation ul.menu ul li.sfHover a {
    background: #c49a6c none repeat scroll 0 0;
	color:#fff;
}
.navigation ul.menu li .active, .navigation ul.menu li .active-trail{
    background: #fff none repeat scroll 0 0;
    cursor: pointer;
	color:#434345;
	
}
/*Header box*/
.headerbox{
    margin-bottom:5em;
    display: block;
    vertical-align: middle;
}
 .header-row{
    margin-right: -15px;
    margin-left: -15px;
    display: table;
}
.headerbox .col-md-8 {
    padding-right: 0;
}
.headerbox .col-md-4 {
    padding-left: 0;
}

	
.headertitle h1 {
    text-indent: -9999px;
    margin: auto;
    width: 100%;
	padding: 0 auto;
}
	
.titletext p { 
    font-size: 1.3em;
    padding: 20px 0 0;
}
.headertitle .titletext {
    color: white;
    padding: 7em 30px;
 }	
/*Responsive Google Calendar*/
.responsiveCal {
 
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
 
}
 
.responsiveCal iframe {
 
position: absolute; top:0; left: 0; width: 100%; height: 100%;
 
}
/*Change header box color and logo*/
#workforce .headerbox, #jointdev .headerbox {
    margin-left:-2em;
    margin-right:-2em;
}
#jointdev .headerbox {
	background: #14A085;
}
#jointdev .headertitle h1{
    background: url("http://oewd.org/sites/default/files/Joint-Dev/Joint-Dev-Images/JD-logo-banner-white.png") no-repeat;
    width:250px;
    height: 75px;
    display:block;
}
#jointdev .headertitle h1:hover{
    background: url("http://oewd.org/sites/default/files/Joint-Dev/Joint-Dev-Images/JD-logo-banner-bw.png") no-repeat;
}
	
/*Sidebar*/
.column--sidebar .menu .menu{
padding-left: 1.5em;
}
.column--sidebar .block {
	border-bottom: 3px solid #e9e9e9;
    border-top: 0px;
    padding: 30px 0;
}
.column--sidebar #block-menu-block-sfgov-elements-2 {
    margin:0 -1.5em;
}
.column--sidebar #block-menu-block-sfgov-elements-2 .block-title{
    padding-left: 1em;		
}
.column--sidebar #block-menu-block-sfgov-elements-2 li > a{
    padding-left: 1.5em !important;
}
#block-block-2{
    display:none;
}
.column--sidebar ul li:first-child {
    border-top: 0px;
}
.column--sidebar ul:first-child li {
    padding: 0px !important;
}
.column--sidebar ul:first-child li a {
    border-top: 1px dotted #ccc;
    display: block;
    padding: 0.8em 1em !important;
    text-decoration: none;
}
.column--sidebar .menu ul a {
    margin-left: 1em;
}
.column--sidebar, .column--sidebar .menu a , .block-menu .block-title, .column--sidebar .block-migrate-vision-side-nav .block-title, .column--sidebar .block-menu-block .block-title, .column--sidebar .block-title {
    color: #333;
	border-bottom: 0px;
}
.column--sidebar .block-title {
    font-size: 1.5em;
    font-weight: bolder;
    text-transform:inherit;
}
.one-sidebar .column--sidebar {
    background: #f9f3ff none repeat scroll 0 0;
    float: right;
    margin-left: 0;
    margin-right: 0;
    padding: 1.5em;
    width: 24.888%;
}
.column--sidebar ul:first-child {
    margin-top: 0;
}
.column--sidebar ul:first-child a:hover, .column--sidebar ul:first-child a:focus {
   background: #c49a6c none repeat scroll 0 0;
	color:#fff;	
	}
.column--sidebar .menu a.active, .column--sidebar .menu a.active-trail {
    background: #fff none repeat scroll 0 0;
	font-weight: 900;
}
/*Footer*/
.container--footer-site {
    border-radius: 0 !important;
}
/*logo Branding*/
h1.branding--name{
   background: rgba(0, 0, 0, 0) url("http://oewd.org/sites/default/files/Images/OEWD-Logo-white.png") no-repeat scroll 0 0;
    height: 55px;
    text-indent: -9999px;
}
.branding--name a{
    text-indent: -9999px;
}
h1.branding--name:hover{
    background: rgba(0, 0, 0, 0) url("http://oewd.org/sites/default/files/Images/OEWD-Logo-blk.png") no-repeat;
}
.branding--logo .seal-svg * {
    fill: rgba(255, 255, 255, 1);
    stroke: rgba(255, 255, 255, 1);
}
.branding--logo:hover .seal-svg * {
    fill: rgba(0, 0, 0, 1);
    stroke: rgba(0, 0, 0, 1);
}
.branding--logo .seal-svg:hover {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 5em;
    height: 55px;
    width: 55px;
}
/* JointDev-pages */
#jointdev{
	}
.col-sm-6 .text-center, .sidecolumn a.text-center {
    color: #333;
    font-weight: bold;
    display:block;
}
ol.breadcrumb li:last-child {
	display:none;
}
.maincolumn h2 {
	padding-top: 1em;
}
.sidecolumn{
	font-size: 1.5em;
	border-left:1px solid #e5e5e5;
}
#jointdev .sidecolumn h3{
    text-indent: -9999px;
    margin: auto;
    width: 100%;
	padding:1em 0;
}
#jointdev .sidecolumn h3 a {
    background: url("http://oewd.org/sites/default/files/Joint-Dev/Joint-Dev-Images/JD-logo-green.png") no-repeat;
    width:200px;
    height: 66px;
    display:block;
}
#jointdev .sidecolumn h3 a:hover{
   background: url("http://oewd.org/sites/default/files/Joint-Dev/Joint-Dev-Images/JD-logo-bw.png") no-repeat;
}
/*Regular*/
h2.subtitle {
    font-size: 45px;
    text-align: left;
    border-bottom:1px solid #ccc;
}
.flex {
    display: flex;
    margin-bottom:3em !important;
}
.col-sm-6 .text-center{
	font-size:25px;
}
.stats {
    border-bottom: #8ed5be 5px solid;
    border-top: #8ed5be 5px solid;
    padding: 2em 0;
    margin-bottom:2em !important;
}
.stats .number span {
    font-size:35px;
}
.stats .number .subject{
	clear:both;
	font-size:15px;
	font-weight:bold;
}
.stats .number {
	text-align:center;
	font-size:55px;
    line-height:1;
}
 .highlights{
	border: #8ed5be 5px solid;
    padding: 1em;
}
.scalebgimg {
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}
.projecthighlights{
    line-height:2em;
    font-size: 14px;
    padding-bottom: 0.5em;
}
.projecthighlights ul li {
    list-style-type: none;
}
	
/* Mobile - phones and tablets */
@media (min-width: 1000px) {
	#main .content{
        padding: 0 1em;
    }
	#block-sfgov-dept-dept-footer {
        font-size: 10px !important;
    }
    .container--footer-site .content img[alt="311 City Customer Service Agency"] {
        vertical-align:middle;
    }
    .navigation ul.menu li{
        max-width:none;
    }
	.headertitle{
        padding-left:0px;
	}
	ol.breadcrumb { 
        list-style: none; 
        overflow: hidden; 
        margin: 1em 0 !important;
        padding:0 !important; 
    }
    ol.breadcrumb li { 
        float: left; 
        height: 3.3em;
	}
    ol.breadcrumb li:last-child {
        width:50%;
        }
	ol.breadcrumb li:last-child .breadcrumb--current {
        display: inline-block;
        float: left;
        letter-spacing: 0.5px;
    }
    ol.breadcrumb li a, ol.breadcrumb li .breadcrumb--current {
        color: #000;
        text-decoration: none; 
        padding: 10px 0 10px 40px;
        background: brown;                   /* fallback color */
        background: #A7A7A7; 
        position: relative; 
        display: block;
        float: left;
    }

    ol.breadcrumb li a:after { 
        content: " "; 
        display: block; 
        width: 0; 
        height: 0;
        border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
        border-bottom: 50px solid transparent;
        border-left: 30px solid #A7A7A7;
        position: absolute;
        top: 50%;
        margin-top: -50px; 
        left: 100%;
        z-index: 2; 
    }	
    ol.breadcrumb li a:before, ol.breadcrumb li .breadcrumb--current:before { 
        content: " "; 
        display: block; 
        width: 0; 
        height: 0;
        border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
        border-bottom: 50px solid transparent;
        border-left: 30px solid white;
        position: absolute;
        top: 50%;
        margin-top: -50px; 
        margin-left: 1px;
        left: 100%;
        z-index: 1; 
    }	
    ol.breadcrumb li:first-child a {
        padding-left: 10px;
    }
    ol.breadcrumb li:nth-child(2) a       { background: #B7B7B7; }
    ol.breadcrumb li:nth-child(2) a:after { border-left-color: #B7B7B7; }
    ol.breadcrumb li:nth-child(3) a       { background:#C7C7C7; }
    ol.breadcrumb li:nth-child(3) a:after { border-left-color:#C7C7C7; }
    ol.breadcrumb li:nth-child(4) a       { background:       #D7D7D7; }
    ol.breadcrumb li:nth-child(4) a:after { border-left-color: #D7D7D7; }
    ol.breadcrumb li:nth-child(5) a       { background:        #E7E7E7; }
    ol.breadcrumb li:nth-child(5) a:after { border-left-color: #E7E7E7; }
    ol.breadcrumb li:last-child a, ol.breadcrumb li .breadcrumb--current {
        background: white !important;
        color: black;
        pointer-events: none;
        cursor: default;
    }
    ol.breadcrumb li:last-child a:after, ol.breadcrumb li .breadcrumb--current:after { border: 0; }
    ol.breadcrumb li a:hover { background: #c49a6c; }
    ol.breadcrumb li a:hover:after { border-left-color: #c49a6c !important; }
    ol.breadcrumb li:nth-child(4), ol.breadcrumb li:nth-child(5) , ol.breadcrumb li:nth-child(6) , ol.breadcrumb li:nth-child(7){
        display:none;
        height:0px;
    }
}
@media (max-width: 1000px) {
    .headertitle .titletext{
        padding-top: 2em ;
    }	
    .highlights {
	    padding:1em !important;
	}
	.container--footer-site {
        display: block;
	}
	.scalebgimg {
		min-height:150px !important;
	}
	.sidecolumn{
	    border-left:0px none #fff;
	}
	.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	    padding-left: 0px !important; 
        padding-right: 0px !important; }
	.flex {
        display: block;
    }
	h1.branding--name{
        background-position:center 0 !important;
    }
	#main{
		padding: 0 1em;
	}
    .one-sidebar .column--main {
        float: left;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .breadcrumbs {
        display: table;
        padding:0 1em;
    }
    #page-title, .title {
        display: block;
        padding: 0 .5em;
        margin:0;
    }
    .header-site .block-search {
        display: block;
        position: relative;
        top: 13em;
        bottom: 0;
    }
    .header {
        margin-bottom: 5em;
    }
}
@media (max-width: 600px) {

	img{
		 clear: both;
    float: none;
		max-width: 100%;
        height: auto;
	}
	.header-site .block-search {
        display: table;
        position: relative;
        top: 13em;
        bottom: 0;
    }
}

/* Mobile phones (if needed) */
@media screen and (max-width: 767px){
    .page-node-203 .field-item.even iframe, .page-node-229 .field-item.even iframe, .page-node-218 .field-item.even iframe, .page-node-335 .field-item.even iframe, [title="Highways to Boulevards: Affordable Housing Strategies"]{    margin: auto;
    display: block;
        width: 100%;
    } 
    .one-sidebar {
width:100% !important;
}
}