@import "nivo-slider.css";
@import "wireframe_01.css";
@charset "UTF-8";

 /*---------------------------------------------------------------------------------

Master Stylesheet

	Template:	 International Day for Disaster Reduction 2015
	Author:		 charlesbukingjr
	URL:		 http://charlesph.com/
	Version:	 1.0	

---------------------------------------------------------------------------------*/
/* ===== Begin Header ===== */
.showcase {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:fixed;
	background:transparent;
	padding:0px;
	/* min-height:500px; set this to visible if using parallax */	
	position:relative;
	overflow: hidden;
}
.showcase .container {
	padding:0px !important;	
	/* min-height: 500px !important; set minimum height if using parallax */
	text-align: center;
	max-width: 100% !important;

}
#home.header {
	background:#ff651d;
	padding: 15px;
	width: 300px;
}
#home.main-left {
	background:white;
	padding: 10px;
	float: left;
	width: 270px;
}
#home.header.container {
	float: left;
}

#content.main-right {
	float:left;
	width: 860px;
	background: white;
	margin-left: 10px;
	margin-top: 10px;
}
.logo { 
	display: block; 
	position: absolute;
	z-index: 999;
	margin-top: -114px;
}
.navigation { 
	display: block;
}

.menu {
	position:relative;
    display: block;
    text-align: right;
}
.menu li a { 
	font-family: "Raleway",sans-serif !important;
	color:white;
	background: #f56e1c; 
	text-decoration:none; 
	font-weight:700; 
	font-size:20px;  
	letter-spacing:.8px; 
	padding:5px 25px 5px 50px;
	margin: 10px 0;
	display: inline-block;
	line-height: 2.5em;
	text-transform: uppercase;
	box-shadow: #d7d7d7 -8px 5px 0 0px;
}
.menu a.active  { color:#df3600 !important;}
.menu li a:hover {
	background:#df3600; 
	transform:scale(1.1);
	transition:ease .5s; ;
}
#home.main-left .container {
	padding-right: 0px;
	padding-left: 0px;
}

.left-banner {
	margin-top: 20px;
}
.social-feed {
	width: 270px;
	height: 340px;
	background: #01b6ad;
	margin-top: 20px;
}

.disqus-feed {
	width: 270px;
	height: 400px;
	margin-top: 20px;
}

.divider {
	background: url('../images/devider.png') no-repeat scroll center center transparent;
	width: 100%;
	height: 23px;
	margin: 15px 0;
	display: block;
}
/* content -------------------------- */
.assets {
	border-top: #f56e1c solid 4px;
	padding-top: 10px;
}
.assets-item {
	max-width: 160px;
	max-height: 100px;
	width: 160px;
	height: 100px;
	overflow: hidden;
	display: block;
	margin-top: 10px;
	float: left;
	margin-right: 10px;
}
#champions {
	width: 800px;
	height: auto;
	display: block;
}
#champions .iddr-title {
	padding-left: 0px;
}
.champion-image {
	width: 133px;
	height: 340px;
	float: left;
	display: block;
	margin: 0px;
}
.slider {
	margin-top: 20px;
}
.yt-playlist {
	display: block;
	height: 450px;
	width: 800px;
	float: none; /* use float if playlist is inline with slider */
}
.yt-playlist .iddr-title {
	padding-left: 0px;
}
.content {
	padding:120px 0px 50px 0;	
}


/* banner -------------------------- */
.banner {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom center;
	background-attachment:fixed;
	background:transparent;
	padding:0px;
	min-height:500px;	
	position:relative;
	overflow: hidden;
}
.container.slider {
	max-width:100% !important;
	padding:0px !important;	
	min-height: 500px !important;
}

/* map-showcase -------------------------- */
.map {margin: 15px 0;}
	#map_canvas {
		background-image: url('../images/map-bg.jpg') transparent;
		height: 340px;
		width: 800px;
		margin: 0 auto;
		border-top: #df3600 solid 4px;
	}
	.map .iddr-title {
		padding-left: 0px;
	}
/* panel title ---------------------- */
.iddr-title{
	font-weight: 700;
	font-size: 22px;
	color: #df3600;
	letter-spacing: 0.8px;
	padding: 7px 20px;
	margin-bottom: 0px;
	display: inline-block;
	line-height: 28px;
	font-family: "Raleway",sans-serif !important;
}


/* stories -------------------------- */
	.stories {
	    float: left;
	    width: 48%;
	    font-size: 14px;
	    line-height: 21px;
	    padding: 10px 10px;
	    margin: 20px 0 0px;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
		color:#444;
	}
	.stories-title{
		font-weight: 500;
		font-size: 18px;
		color: #FFF;
		letter-spacing: 1px;
		padding: 7px 20px;
		margin-bottom: 0px;
		background: none repeat scroll 0% 0% #f56e1c;
		display: inline-block;
		font-family: "Raleway",sans-serif !important;	
	}
	.stories ul, .stories-content {
		border-top: #f56e1c solid 4px;
		padding-top: 10px;
		margin-top: 0px;
	}
	.stories ul li {
		padding: 7px 0;
		border-bottom: #ccc dashed 1px;
		font-size: 15px;
	}
	.stories ul li a {
		text-decoration: none;
		color:#777;
	}
	.stories ul li a:hover {
		text-decoration: none;
		color:#df3600;
	}	
	.stories h4:after, .feature img:after {
	    position: absolute;
	    bottom: -22px;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    width: 22px;
	    height: 2px;
	    background-color: #cbcfd1;
	    content: "";
	    -moz-transition: all 0.15s linear;
	    -o-transition: all 0.15s linear;
	    -webkit-transition: all 0.15s linear;
	    transition: all 0.15s linear;
	}
	.stories:hover h4:after, .stories:hover img:after  {
	    background-color: #f32595;
	}

/* About */ 
.about {
	font-size: 14px;
	line-height: 21px;
	padding: 10px 10px;
	margin: 20px 0 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color:#444;
}
	.about .iddr-title {
		font-size: 30px;
		padding-left: 0px;
	}


/* footer -------------------------- */
footer {
    padding: 20px 0 50px 0;
	background:#df3600;
	border-top:#df3600 solid 3px;
}

	.footermenu {
	    float: right;
	    padding: 2px 0;
	}
	.footermenu li {
	    float: left;
	    margin: 0 0 0 22px;
	}
	.footermenu li a {
	    display: block;
	    color: #fff;
		font-size:14px;
		text-decoration:none;
		letter-spacing:.5px;
	}
	.footermenu li a.footermenu-link {
	    background-position: 0 0;
	}
	.footermenu li a.footermenu-link:hover {
	    color: #edc605;
	}
	.footermenu li a.footermenu-link:active {
	    color: #edc605;
	}
	.copy {
	    float: left;
	    font-size: 14px;
	    line-height: 36px;
		color:#fff;
		letter-spacing:.5px;
	}
	.copy a {
	    color: #edc605;
	    font-weight: normal;
		text-decoration:none;
	}
	.copy a:hover {
	    color: #f56e1c;
	}