/*
Theme Name: Apple Pi Robotics
Theme URI: http://underscores.me/
Author: George Wang
Author URI: http://zhihaowang.me
Description: A custom theme for Apple Pi Robotics team website, crafted by hand by George Wang
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: applepirobotics
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Apple Pi Robotics is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Theme Specific Styles
--------------------------------------------------------------*/

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

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

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*
-----------------------------
# Custom CSS
-----------------------------
*/

/* COLOR REFERENCE

White: #fefefe
Red: #e72225
Black: #292929
Grey: #919191
Light blue: #f6f9fa


/*
-----------------------------
General
-----------------------------
*/

*{
	letter-spacing: .75px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

.logged-in .navbar-fixed-top{
	top: 32px;
}

body{
	font-family: 'Sarala', sans-serif;
	font-size: 16px;
	background: #fefefe;
	padding-top: 52px;
}

a:link, a:visited, a{
	color: #919191;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	color: #e72225;
}

button:focus{
	outline: none !important;
}

h2, h3{
	font-weight: bold;
}

h1{
	font-size: 30px;
	font-weight: regular;
}

h1 span{
	font-weight: bold;
}

h2{
	font-size: 24px;
}

h3{
	font-size: 18px;
	margin-bottom: 30px;
}

p{
	font-size: 12px;
	color: #919191;
	line-height: 24px;
}

p.lead{
	font-size: 14px;
	line-height: 24px;f
}

section{
	padding: 48px 0;
	text-align: center;
}

blockquote{
	padding: 0;
	margin: 0 0 10px;
	font-size: 16px;
	border-left: none;
}

cite{
	color: #919191;
	display: block;
	margin-bottom: 60px;
}

td{
	text-align: left;
}

.section-header{
	text-align: center;
	margin-bottom: 65px;
}

.icon-bar{
	background: #292929;
}

.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
	text-align: center;
}

.quote{
	text-align: left;
}

.hide{
	display: none;
}

.affix{
	top: 50px;
}

.label{
	border-radius: 5px;
	color: #fefefe;
	font-size: 80%;
	margin-left: 5px;
}

.label-danger{
	background: #e72225;
}

#resources section ul li a span.label{
	font-weight: bold;
}

/*
-----------------------------
Video Modal
-----------------------------
*/

#video .modal-dialog{
	padding-top: 40px;
	margin-left: 10vw;
}

#video .modal-content{
	width: 80vw;
}

#video .modal-body{
	padding: 0;
	height: 500px;
}

/*
-----------------------------
Nav Styling
-----------------------------
*/

a.navbar-brand{
	padding: 6px 0;
}

.navbar.navbar-fixed-top{
	line-height: 69px;
	background: rgba(254, 254, 254, .95);
	border-bottom: 1px solid #c0c0c0;
	font-size: 12px;
	font-weight: bold;
}

.nav li{
	padding: 0 10px;
	border-bottom: 2px solid transparent;
	transition: .25s ease-in;

}

.nav li.active a{
	color: black;
	cursor: default;
}

.nav li.active:hover{
	border-bottom: 2px solid transparent;
}

.nav li:hover{
	border-bottom: 2px solid #e72225;
	transition: .25s ease-in;
}

.nav li a:hover{
	background-color: transparent;
}


button{
	border-radius: 10px;
	border: none;
	font-weight: bold;
	font-size: 14px;
}

button.btn-white{
	background: linear-gradient(to left, transparent 50%, #fefefe 50%);
    background-size: 200% 100%;
    background-position:right bottom;
	padding: 18px 75px;
	color: #fefefe;
	border: 2px solid #fefefe;
	transition: .75s ease-out;
}

button.btn-red{
	background: linear-gradient(to left, transparent 50%, #e72225 50%);
    background-size: 200% 100%;
    background-position:right bottom;
	padding: 15px 60px;
	color: #e72225;
	border: 2px solid #e72225;
	transition: .75s ease-out;
}

button.btn-red:hover{
	background-position:left bottom;
	color: #fefefe;
	transition: .75s ease-in;
	cursor: default;
}

button.btn-white:hover{
	background-position:left bottom;
	color: #e72225;
	transition: .75s ease-in;
	cursor: default;
}

@media screen and ( max-width: 767px ){
	
	.navbar-nav li:hover{
		border-bottom: 2px solid transparent;
	}

} /** END 767px MEDIA QUERY **/

/*
-----------------------------
HOME PAGE STYLING
-----------------------------
*/

/* Hero Styling */

#hero{
	background: url('/wp-content/themes/applepirobotics/assets/img/collage.png');
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #e72225;
	background-size: cover;
	padding: 213px 0;
	text-align: center;
	color: #fefefe;
	transition: 1.5s ease-in;
}

#hero h1{
	margin-bottom: 41px;
}

/* First Mission Styling */

#first-mission{
	background: #f6f9fa url('/wp-content/themes/applepirobotics/assets/img/deankamen.png') 100% 100% no-repeat fixed;
}

/* Recent Post Styling */

.row-3{
	padding: 0 15%;
}

.recent-post{
	width: 31.33333333%;
	height: 200px;
	float: left;
	margin: 0 3% 40px 0;
	border-radius: 10px;
	display: table;
}

.recent-post-info{
	border-radius: 10px;
	display: table-cell;
	vertical-align: middle;
	background: rgba(109, 109, 109, .85);
}

.recent-post-info p{
	color: #fefefe;
	font-size: 14px;
	font-weight: bold;
	padding: 0 30px;
	cursor: pointer;
}

.sponsor:nth-child(3n){
	margin-right: 0;
}

a:nth-child(3n) .recent-post{
	margin-right: 0;
}

.post-1{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-1.png') 50% 5% no-repeat;
	background-size: cover; 
}

.post-2{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-2.png') 50% 50% no-repeat;
	background-size: cover; 
}

.post-3{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-3.png') 50% 50% no-repeat;
	background-size: cover; 
}

.post-4{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-4.png') 50% 50% no-repeat;
	background-size: cover; 
}

.post-5{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-5.png') 50% 50% no-repeat;
	background-size: cover; 
}

.post-6{
	background: url('/wp-content/themes/applepirobotics/assets/img/news-6.png') 50% 50% no-repeat;
	background-size: cover; 
}

/* Affiliations */

#affiliations{
	background: #f6f9fa;
}

.sponsor{
	width: 31.33333333%;
	float: left;
	margin: 0 3% 0 0;
	height: 100px;
	display: table;
}

.sponsor-img{
	display: table-cell;
	vertical-align: middle;
}

.sponsor-img img{
	max-width: 80%;
}

.pagination{
	margin-bottom: 65px;
}

.pagination li a{
	padding: 21px 46px;
	background: transparent;
	color: #e72225;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid #e72225;
	transition: .75s ease-in;
}

.pagination li a:hover{
	background: #fe7476;
	color: #fefefe;
	transition: .75s ease-in;
	cursor: default;
}

.pagination li.active a,
.pagination li.active a:hover{
	color: #fefefe;
	background: #e72225;
	border: 1px solid #e72225;
}

/*
-----------------------------
Team Stylings
-----------------------------
*/

body.page-template-page-team,
body.resources{
	position: relative;
}

.page-template-page-team p{
	color: #292929;
	text-align: left;
	margin-bottom: 39px;
}

.page-template-page-team footer p{
	margin-bottom: 0;
}

#sidebar .nav li a{
	padding: 0;
}

#sidebar .nav li a{
	background-color: transparent;
}

#sidebar .nav li{
	border-bottom: none;
}

/*.page-template-page-team .nav li:hover{
	border-bottom: none;
}*/

.page-template-page-team .container section,
#resources .container section{
	float: right;
}

.page-template-page-team hr{
	width: 55%;
}

.page-template-page-team h3{
	text-align: left;
	font-size: 18px;
	margin-bottom: 20px;
}

/* Team Hero Styles */

#team-hero{
	padding: 145px 0;
	background: #e72225;
	color: #fefefe;
}

/* Team Sidebar styles */


#sidebar{
	padding-top: 48px;
	font-size: 12px;
	font-weight: bold;
}

#sidebar ul li{
	line-height: 35px;
	padding-left: 17px;
	border-left: 1px solid transparent;
}

#sidebar ul li:hover{
	border-left: 1px solid #e72225;
}

#sidebar ul li.active{
	border-left: 3px solid #e72225;
}

#sidebar ul li.active a{
	color: #e72225;
}

/* Team History */

#history blockquote,
#history cite{
	text-align: left;
	font-size: 14px;
	margin-bottom: 20px;
}

#history blockquote{
	font-weight: bold;
	border-left: 4px solid #e72225;
	padding-left: 10px;
}

#history cite span{
	font-weight: bold;
}

/* The Team */

#team nav{
	margin-bottom: 40px;
	font-size: 14px;
	font-weight: bold;
}

#team nav ul li{
	padding: 0 20px;
	cursor: pointer;
}

#team ul li.active a{
	color: #e72225;
	border-bottom: 1px solid #e72225;
}

.mentor{
	width: 25%;
	height: auto;
	display: inline-block;
	margin: 0 3% 40px 0;
}

.mentor p{
	text-align: center !important;
}

.mentor img {
	width: 100%;
}

.modal img{
	width: 100%;
	margin-bottom: 40px;
}

.outreach-img{
	display: inline-block;
	margin: 0 3% 40px 0;
}

.page-template-page-team footer p{
	color: #fefefe;
}

/*
-----------------------------
Resources
-----------------------------
*/

#resources i{
	font-size: 24px;
}

#resources h2{
	margin-top: 10px;
}

#resources section h3{
	text-align: left;
	color: #e72225;
	margin: 30px 0 10px;
}

#resources section h2{
	margin-bottom: 55px;
}

#resources ul{
	text-align: left;
}

#resources section li{
	line-height: 45px;
	font-size: 14px;
}

#resources section ul li a{
	color: #292929;
	font-weight: bold;
}

#resources section ul li a span{
	font-weight: normal;
}

#resources section ul li a:hover{
	color: #e72225;
}

#first-banner{
	background: #f6f9fa;
}

#first-banner .banner-image{
	width: 100%;
	height: 325px;
	background: url('/wp-content/themes/applepirobotics/assets/img/first-banner.png') 50% 50% no-repeat;
	background-size: cover;
	border-radius: 10px;
	margin-bottom: 50px;
}

#first-banner h2,
#first-banner p{
	margin-bottom: 35px;
}


/*
-----------------------------
News
-----------------------------
*/

section.post{
	text-align: left;
	padding-bottom: 0;

}

section.post h2{
	margin-bottom: 5px;
}

section.post time{
	color: #919191;
	font-size: 14px;
}

section.post a{
	font-size: 14px;
	color: #292929;
	font-weight: bold;
	transition: .25s ease-out;
	margin-bottom: 48px;
}

section.post a:hover{
	color: #e72225;
	transition: .25s ease-in;
}

section.post a p{
	color: #292929;
	margin-top: 28px;
	cursor: pointer;
}

section.post hr{
	width: 50%;
	margin: 48px auto;
}

section.post .post-header .post-image{
	background: url('/wp-content/themes/applepirobotics//img/postpic1.jpg') no-repeat 50% 50%;
	background-size: cover;
	border-radius: 10px;
	height: 180px;
	width: 100%;
}

section.post a .post-header{
	cursor: pointer;
	color: initial;
}

section.post a .post-header:hover{
	color: initial;
}

section.post:last-child{
	padding-bottom: 48px;
}

section.post:last-child hr{
	display: none;
}

/*
-----------------------------
Footer
-----------------------------
*/

footer{
	background: #292929;
	font-size: 12px;
	padding: 30px 0;
}

footer li a, footer p{
	color: #fefefe;
	line-height: 24px;
}

footer img{
	position: relative;
	top: -10px;
}

/*
-----------------------------
Media Queries
-----------------------------
*/

@media screen and ( max-width: 1199px ){
	
	aside#sidebar{
		display: none;
	}

	.page-template-page-team section{
		width: 100%;
	}

} /** END 1199px MEDIA QUERY **/

@media screen and ( max-width: 991px ){
	
	.post-row{
		padding: 0;
	}

	.recent-post{
		width: 100%;
		margin-right: 0;
	}

	.mentor{
		width: 30%;
	}

	footer nav{
		display: none;
	}

} /** END 991px MEDIA QUERY **/


@media screen and ( max-width: 767px ){
	
	#intro p{
		margin-bottom: 60px;
		padding: 0 20%;
	}

	#intro p.lead{
		padding: 0 10%;
	}

	a.navbar-brand{
		padding: 6px 15px;
	}

	footer{
		text-align: center;
	}

} /** END 767px MEDIA QUERY **/

@media screen and ( max-width: 699px ){
	
	.mentor{
		width: 100%;
	}

} /** END 699px MEDIA QUERY **/


@media screen and ( max-width: 624px ){
	
	.pagination li a{
		padding: 21px 26px;
	}

	.sponsor{
		width: 50%;
		margin-right: 0;
	}

} /** END 624px MEDIA QUERY **/

@media screen and ( max-width: 464px ){
	
	.pagination li a{
		padding: 21px 15px;
	}

} /** END 464px MEDIA QUERY **/