/*
Theme Name: Abe Keller Theme
Author: Alycia Cahill, Thadius Hukari, Tatiana Zaccara, Russell Schneider
Author URI: www.alyciacahill.com
Description: Theme for Abe Keller Peace Education FUNd
Text Domain: Abe Keller Theme
Version: 1.1
*/

/*Custom CSS fixes*/ 

.slideshow_container img{
  border-radius: 0 !important; 
}

.size-medium, .size-large, .size-full{
  border-radius: 0 !important; 
}

/*Resets*/
* {
	margin: 0;
	padding: 0;
}
a img{
	border: 0;
}
ul{
	list-style:none;
}

/*General style*/
html{
	font-family: 'Source Sans Pro', sans-serif;
	margin-top:0.5em;
	font-size:1em;
	color: #333;
	line-height:1.5;
}

body{
	max-width:960px;
	margin:0 auto;
	padding: 0.5em;
    background-color: whitesmoke;
}

#background{
    position:absolute; 
    z-index: -1; 
    bottom: 0px;
    display: block;
    /*percents on left and width solve overflow issue */
    left: 15%; 
    width: 85%; 
}


p{
	margin-bottom:0.5em;
    font-weight: 400; 
}

#content{
	float:left;
	width:81.25%;
	margin-bottom: 4em;
    margin-right: 1.041%;
    padding-top: 10px; /*added space between title and breadcrumbs*/
	margin-top:0.5em;
}

#content ul, {
	list-style:inside;
	margin-left:2em;
	padding-bottom: 1em;
}

#content ol{
    margin-left:2em;
	padding-bottom: 1em;
}

/*headings styles*/
h1{
	margin-top:0.5em;
	font-size:1.875em;
	color: #1a5b72;
    font-weight: 400; 
}

h2{
	color: #1a5b72;
	font-size:2.2em;
	margin-bottom:1em;
    font-weight: 400; 
	line-height: 1;
}


h3{
	font-size:1.2em;
	margin-bottom:0.5em;
	line-height: 1;
}

/*links styles*/
a:link, a:visited {
    color: #db5959;
	text-decoration:underline;
}

a:hover, a:focus {
    font-weight: bold;
}


/*Header*/

#header{
    height: auto; 
    margin-top: 25px;
    margin-bottom: 0; 
}

#logo{
	float: left;
	margin-right:0.5em;
    margin-top: -20px; /*sets positioning of logo to off center*/
}

/*Utilities*/

#header h1{
    display: inline; 
    line-height: 40px; 
    /*2 lines below adjust alignment of title so title and utilites align at top*/
    position: relative; 
    top: -7px; 
    
}

#utilities{
    float: right; /*keeps #utilities at the edge of the header*/
    padding-right: 0;
    margin-bottom: 0;
    padding-bottom: 0; 
    display: inline-block;
    max-height: 40px;
    width: 34%; /*resolves #utltyrgt issue with floating under*/
}


.utility{
    float: left; /*float needed to keep alignment*/
    display: inline-block;  
    max-height: 40px; 
}

.utility img{
    float: left; /*float needed to keep alignment*/
    display: inline-block;
    /*max-width: 38px;*/
    /*width: 22%; does not work or resize correctly*/
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: text-bottom;
    padding-bottom: 1em;
}

.utility a{
    display: inline-block; 
    text-decoration: none; 
    color: #1a5b72;
    padding-left: .3%;
    font-weight: 300;  
    vertical-align: bottom;
}

.utility img ::after{
    clear: both; 
}

.utility ::after{
    clear: both; 
}

.utility a p{
    display: inline; 
}


#utltylft{
    width:48%; 

}

#utltyrgt{
    width:35%; 
    display: inline-block; 
}

#utltyrgt p{
    display: inline; 
}

#utilities:after{
    clear: both; 
}

/*Primary Navigation*/
#navigation{
	margin-bottom:3em;
	line-height:1.5em;
	background-color:#1a5b72;
	border-radius: 50px 0 0 50px;
}


#nav-main{
    padding-left: 20px; 
    padding-top: 5px;
    /*keeps the naviation from peeking out behind the logo*/
}

#navigation-items > li {
    display: inline-block;
	color: #d7dee3;
    position: relative;
	z-index:999;
	width:15.5%;    
}

#navigation-items > li a {
	color: #d7dee3;
	font-size:1.1875em;
    text-decoration: none;
	display:block;
	padding-top: 12px; 
    padding-bottom: 12px; 
    padding-right: 0; 
    padding-left: 5%; 
	text-transform:lowercase;
    font-weight: 400; 
}

#navigation-items > li a:hover,
#navigation-items > li a:active,
#navigation-items ul li:hover > a{
	color: #db5959;
    font-size:1.1875em;
	background-color:#d7dee3;
}

#nav-main ul li:hover > a{
	color: #3b3b3b;
    font-size:1.1875em;
	background-color:#d7dee3;
}

#navigation-items > li > ul {
    display: none;
    position: absolute;
    background-color: #1a5b72;
    min-width: 160px;
	color: #d7dee3;
	margin-left: 0;
}

#navigation ul li ul.sub-menu{
    background: rgba(215, 222, 227, .7);  
}

#navigation ul li ul.sub-menu a{  
    color: #3b3b3b;
}

#navigation ul li ul.sub-menu a:hover{
    color: #db5959;
}

#navigation-items > li:hover > ul {
    display: block;
}

/* primary sidebar - right column */
#sidebar {
    float: right;
    width: 14.58%; /*adjusted size to fit in grid better*/
	background-color:#d7dee3;
	line-height:2em; 
	border-radius: 0 25px 0 25px;
	padding: 0.5em;
    margin-bottom: 1.0416%; 
}

#sidebar a{
	color: #333;
	text-decoration:none;
}

#sidebar a:hover{
	color: #db5959;	
}

#sidebar a:hover, a:focus {
    font-weight: normal;
}

#sidebar h3{
	text-align:center;
	color: #1a5b72;
}

#sidebar li.current_page_item a{
	font-weight:600;
}

#sidebar:after{
    clear: both; 
}


#ctas {
    
}

#ctas .widget {
    /*display: inline-block;*/
    float: left;
    margin-right: 20px;
}

#ctas .widget:last-child {
    margin-right: 0px;
}

/*footer*/
footer{
	clear: both;
	background-color: #1a5b72;;
    min-height: 176px;
    line-height: 60px;
	position: relative;
    margin-top: 50px;
}

#logo-footer{
	max-width: 80px;
	position:absolute;
	left: calc(50% - 40px);
	top: -40px;
}

#footer-nav{
	padding-top: 1.5em;
   	text-align: center;
}

#footer-nav > li {
    display: inline-block; 
	width:17%;	  
}

#footer-nav > li a {
	color: #d7dee3;
	font-size:1.375em;
    text-decoration: none;
	display:block;
}

#footer-nav > li a:hover,
#footer-nav > li a:active {
	color: #db5959;
}

footer p{
	text-align:center;
	color: #d7dee3;
	font-size:1.125em;
}

/* Home specific */

.slideshow_container{
    width: 99%; 
}

.herobox{
    z-index: 2;
    position: relative;
    top: -150px;
    left: 40%;
    height: auto;  
    background-color: rgba(215, 222, 227, 0.7);
    font-size: 1.6em;
    padding-left: 1em; 
    padding-right: 1em; 
    padding-top: .5em; 
    padding-bottom:.5em; 
    text-align: right; 
    font-weight: 200; 
    font-size: 1.75em; 
    max-width: 460px; 
    width: 48%; 
    line-height: 1em; 
}

.herobox span{
    font-weight: 400;
    color: #1a5b72;
}

#content.seo{
    max-width: 620px;
    margin: 0 auto;
	padding: 0 0 45px ;
	float: none;
	font-size:1.2em;
}

.ctacontainer{
	max-width:960px;
	margin:32px auto 4em;
	float: left;
	position:relative;
}

.ctacontainer img{
	max-width: 100%;
	position: relative;
    left: 50%;
    transform: translate(-50%, 0);
	padding-bottom:25px;
	
}

.ctacontainer h2{
	margin-top:1em;
}

.home .ctas{
	width: 32%;
	float:left;
	margin: 0 2% 0 0;
}

.home .ctas:nth-of-type(3){
	margin-right:0;
}

.home .ctas a{
	text-decoration:none;
	display:block;
	color: #333;
}

.home .ctas a h2{
	padding-bottom: 16px;
	color: #1a5b72;
	font-size: 2.1875em;
	margin: 0;
}

.home .ctas p{
	margin:8px 8px 8px 0;
}

.flex-caption {
  width: 96%;
  padding: 2%;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  font-size: 14px;
  line-height: 18px;
}


/*Gateway page*/
.page-excerpt{
	clear:left;
	padding-top:1em;
}

.gateway{
	float: left;
	margin-right:1.5em;
	border-radius:50%;
}

.childTitle a{
	color: #1a5b72;
	text-decoration:none;
}

/*Destination and single pages*/
article.page-content img,
article.post img{
	float: right;
	margin-left:1.5em;
	border-radius:50%;
	max-width:220px;
}

article.post h2{
	margin-bottom:0.5em;
}

article.post p{
	margin-top:1em;
}


/*Index*/

#content a:hover, 
#content a:focus {
    font-weight: normal;
}
.post-excerpt{
	width:28%;
	float: left;
	margin: 0.5em;
	height:400px;
	position:relative;
	border: 1px solid #eee;
    padding: .5em;
}

.post-excerpt h2{
	margin-bottom:0;
}

.post-excerpt a:hover,
.post-excerpt a:focus{
	font-weight: normal;
}
.post-excerpt img{
	border-radius:50%;
	max-width:220px;
	position: relative;
    left: 50%;
    transform: translate(-50%, 0);
	margin: 1em 0;
}
.post-nav {
	padding-top: 3.5em;	
}

.post-nav .alignleft {	
	float: left;
	margin: 0; 
	width: 48%;
}
	
.post-nav .alignright { 	
	float: right;
	margin: 0;
	width: 48%;
	text-align:right;
}


/*Apply form*/

.wpcf7{
	margin-top:1.5em;
}

.wpcf7 label{
	font-size:0.8em;
}

.wpcf7 input, .wpcf7 textarea{
	padding: 0.5em;
	width: 80%;
}

.wpcf7 input[type="submit"]{
	width: auto;
}

span.wpcf7-list-item {
    margin: 0 4em 0 0;
}

.checkbox-760{
	width: auto;
}

/*button styles*/
.button {
    max-width: 140px; 
    width: 14.58%; 
    background-color: #1a5b72;
    border: 3px; 
    border-color: #1a5b72;
    border-style: solid;
    float: right;
    margin-bottom: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-radius: 14px; 
    text-decoration: none; 
    font-weight: 600; 
    text-align: center;
    display: inline-block; 
    text-decoration: none !important; 
    color: #d7dee3 !important;
    text-align: center; 
    font-size: 1.2em; 
    vertical-align: center; 
    padding-top: 5px; 
    padding-bottom:5px; 
}

.button:hover{
    background-color: white; 
    color: #1a5b72 !important;
    font-weight: 600;  
    -webkit-transition-duration: .5s; /* Safari */
    transition-duration: .5s;
}

.buttons:after{
    clear: both; 
}


/*Mobile Stuff to hide*/
#menubtn{
    display: none; 
}

#mobiledove{
    display: none; 
}

#mobilehero{
    display: none; 
}



/*Mobile Styles*/

/*
@media only screen and (max-width: 965px){
    #header h1{
        font-size: 1.75em; 
    }
    #utilities img{
        max-width: 32px; 
        height: auto; 
    }
} */

@media only screen and (max-width: 925px){
	.post-excerpt{
		width:45%;
		border: 1px solid #eee;
	}
    #header h1{
        font-size: 1.5em; 
    }
    #utilities img{
        max-width: 100%; 
        height: auto; 
    }
}

@media only screen and (max-width: 852px){
	.post-excerpt{
		width:40%;
	}
}

@media only screen and (max-width: 845px){
	.buttons{
		display:none;
	}
}

@media only screen and (max-width: 815px){
    
    #utilities{
        width: 60%; 
        /*width matches h1 kindaish. fixes issue with facebook float*/ 
        float: none;
        /*reverses previous float right so items are now under the header*/
    }
    
    #utltyrgt{
        width: 50%; /*fixes issue with facebook float*/
    }
    
    #utltylft{
        width: 50%; /*fixes issue with facebook float*/
    }
    
    #header h1{
        display: none;
    }
    
    #logo{
        margin-bottom: 10px; 
		margin-top: 2px;
    }
	#header{
		margin-top: 0;
	}
	
	#header h1{
		display:none;
	}
	
	#nav-main{
		margin-top:0;
	}

    .breadcrumbs{
        padding-top: 10px; 
        padding-bottom: 10px; 
    }
    
    .herobox{
        top:-110px; 
        font-size: 1.45em; 
    }
}


@media only screen and (max-width: 775px){
    

	.home .ctas{
		width: 100%;
		float:none;
		margin: 0.5em;
		height: 240px;
	}
	
	.ctacontainer img{
		float: left;
		margin-right:1em;
		left: 0;
		transform:none;
		padding-bottom:0;
	}
	
	#sidebar{
		display:none;
	}
	
	#content{
		width:100%;
	}
}

@media only screen and (max-width: 740px){
	/* Nav Styles*/

    .button{
        display: none; 
    }
    
    #navigation{
        border-radius: 0px;  
        position: static;
        background-color: #1a5b72; 
    }
    
    #menubtn{
        display: block;
        background-color: #1a5b72; 
        color: white; 
        width: 99.99%; /*to match the hero img*/ 
        border: none; 
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 400px; 
        padding-top: 12px;
        padding-bottom: 12px; 
        padding-right: 65%; 
        padding-left: 2.5%; 
        font-size:1.1875em;
        margin-left: 1px; 
        margin-top: 5px; 
        position: relative; 
        z-index: 1; 
    }
    
    #nav-main{
        padding-left: 0px; 
        display: none; 
        overflow: hidden; 
        margin-left: 1px; 
    }
    
    #navigation ul li ul.sub-menu{
        display: block; 
        position: relative;
        padding-left: 16px; 
        background-color: #1a5b72; 
    }
    
    #navigation ul li ul.sub-menu a{
        color: white; 
        background-color: #1a5b72;
    }
    
    #navigation-items > li {
	    width:100%;   
        position:relative;
    }
    
    #navigation-items > li a{
	    color: white; 
        background-color: #1a5b72;
    }
	#logo{
        float: none;
        display:block;
        margin:auto; 
		margin-top: 0;
        padding-top: 6px; 
        z-index:1; 
    }
    #utilities{
        margin: 0; 
        z-index: 1; 
        width: 100%; 
    }
    
    .utility img{
        padding-left: 1%; 
    }
    
    #utltylft{
        width:auto; 
		float: left;
    }

    #utltyrgt{
        width:auto; 
		float: right;
    }
}
@media only screen and (max-width: 600px){
	.post-excerpt{
		width:99%;
		height:auto;
		margin: 1em 0;
	}
	
	.post-excerpt img{
		position: relative;
		left: 0;
		transform: none;
		margin: 1em 1em 1em 0;
		float:left;
	}
	
	.post-excerpt p{
		margin-top: 1em;
	}

}

@media only screen and (max-width: 503px){
	article.page-content h2,
	article.post h2{
		margin-top:0.5em;
	}
}

@media only screen and (max-width: 425px){
    
    html{
        margin-top:0; 
    }
    
        
    h2{
        text-align: center; 
        font-size: 1.5em; 
    }
    
    
    h3{
        font-size: 1.5em; 
        text-align: center; 
        font-weight: 600; 
    }
    
    #mobiledove{
        padding-top: .25%; 
        display:block; 
        position:absolute;
        width: 99.9%; 
        overflow: hidden; 
        z-index: -2; 
    }
    
    #header{
        position: relative; 
        margin:0; 
        z-index: 1; 
        height: auto; 
    }
    
    body{
        margin: 0; 
    }
    
    #middle{
        margin: 0; 
        overflow: hidden; 
        position: relative;
        height: auto; 
        /*prevents mobile issues? maybe.*/
    }
    
    #content{
        float: none; 
        display: block; 
        width: 100%;
        margin-bottom: 1em;
    }
    
    #content p{
        font-size: 1em;
        padding-left: 6%; 
        padding-right: 6%; 
        margin: 8px; 
    }
	
	#content.seo{
    	margin: 1.5em auto 0;
		padding:0;	
	}
    
    #background{
        display: none; 
    }
    
    div.breadcrumbs {
        display: none;
    }
    
 
    .home .ctas{
        display: block;
        width: 100%; 
        height: auto; 
    }
    
    #ctaTwo{
        display: none; 
    }
    
    .slideshow_container{
        display: none; 
    }
    
    .herobox{
        display: none; 
    }
    
    #mobilehero{
        display: block; 
        position: relative; 
        margin: 1px;
		margin-bottom: 2em; 
        padding: 0; 
        width: 100%; 
        z-index: 1; 
        
    }
    
    #mobilehero img{
        width: 99.99%; 
    }
    
    #mobilehero h1{
        display: block; 
        text-align: left; 
        font-weight: 200; 
        color: white; 
        z-index: 2;
        width: 90%;
        margin-top: -80px; 
        margin-left: 3%; 
        line-height: 1em; 
        font-size: 1.5em; 
    }
    
    #mobilehero h1 span{
        font-weight: 400;
    }
    
    .gateway{
        float: none; 
    }
    
        
    .page-excerpt img{
        max-width: 220px; 
        max-height: 220px; 
        width: 60%; 
        height: 60%; 
        display: block;
        position: relative; 
        padding-left: 20%; 
        padding-right: 20%; 
        padding-bottom: 5px; 
    }
    
    .page-excerpt {
        display: block; 
        position: relative;
    }
     
    .home .ctas{
        display: block; 
		height: auto;
        position: relative; 
        padding-bottom: 50px; 
        margin-right: 0px; /*previous margin created issue*/
    }
    
    .home .ctas img{
        max-height: 220px; 
        max-width: 220px; 
        height: 56%;
        width: 56%;
        padding-left: 22%; 
        padding-right: 22%; 
        padding-bottom: 5px; 
    }
    
    .home .ctas a h2{
        font-size:  1.5em; 
        font-weight: 600; /*semibold*/
        text-align: center; 
        line-height: 1.5em; 
        padding-bottom: 0; 
    }
    
    .home .ctas p{
        font-size: 1em;
        padding-left: 6%; 
        padding-right: 6%; 
    }
	
	article.page-content img,
	article.post img,
	article.page-content img.alignright,
	article.post img.alignright,
	article.page-content img.alignleft,
	article.post img.alignleft{
		float:none;
		display:block;
		margin: 5px auto;
	}
    
    footer{
        height: auto; 
        background-color: #1a5b72;
        padding-bottom: 1em; 
    }
    
    #footer-nav > li {
       display: block; 
	   width:100%; 
    }

    #footer-nav > li a {
	color: #d7dee3;
	font-size:1em;
    text-decoration: none;
	display:block;
    line-height: 2em; 
    }
    
    footer p{
        display: none; 
    }

}



/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

article.page-content .alignright,
article.post .alignright{
    float:right;
    margin: 5px 0 20px 20px;
}

article.page-content .alignleft,
article.post .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.leftalign {
    float: left;
    margin: 15px 20px 20px 0;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* 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. */
}