/**
 * ==========================================================================================
 * ==========================================================================================
 *
 * 								RESPONSIVE.CSS
 *
 * ==========================================================================================
 * ==========================================================================================
 *
 * @since		0.1
 * @author		chriscarvache
 */


/**
 * ==============================================
 *  SMALL SCREENS
 * ==============================================
 */

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
	#utility,
	#text-6,
	.hero-variety-3 .swiper-container {
		display: none;
	}
    
    #header {
        border-bottom: 2px solid #2183c8;
    }

	.logo {
		margin-right: 40px;
		max-width: 140px;
		margin: 0 auto!important;
		float: none!important;
	}
	
	#main-footer .widget {
		text-align: center;
	}

	.hero-variety-2 .feature-content ul {
		list-style: none;
		margin: 0 0 1em;
	}

	.woocommerce .cart table,
	.woocommerce .cart tr,
	.woocommerce .cart td,
	.woocommerce .cart th {
		display: block;
	}

	.woocommerce .cart thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.woocommerce .cart tr td img {
		width: 100%;
	}

	.woocommerce .cart .cart_item td:nth-child(1) {
		position: absolute;
		background: rgba(200,0,0, 1);
		margin-top: 3px;
		margin-left: 3px;
		width: 36px;
		text-align: center;
		-webkit-border-radius: 999px;
		-moz-border-radius: 999px;
		-o-border-radius: 999px;
		border-radius: 999px;
	}

	.woocommerce .cart .cart_item td:nth-child(1) a {
		color: #fff;
		font-weight: bold;
	}


	.woocommerce .cart .cart_item td:nth-child(3) {
		font-weight: bold;
		font-size: 1.4em;
	}

	.woocommerce .cart .cart_item td:nth-child(4):before {
		content: 'Product Price: ';
		font-weight: bold;
		width: 120px;
		display: inline-block;
		float: left;
	}

	.woocommerce .cart .cart_item td:nth-child(5):before {
		margin-top: .56em;
		content: 'Quantity: ';
		font-weight: bold;
		width: 120px;
		display: inline-block;
		float: left;
	}

	.woocommerce .cart .cart_item td:nth-child(5) input {
		width: 60px;
		margin: 0;
	}

	.woocommerce .cart .cart_item td:nth-child(6):before {
		content: 'Sub Total: ';
		font-weight: bold;
		width: 120px;
		display: inline-block;
		float: left;
	}

	.woocommerce .cart .variation {
		padding: 1em 0 0;
	}

	.about img {
		width: 100%;
		margin: 0 auto;
	}
    
    .shop_table.cart .button {
        padding: 0.7em 1.5em;
        float: none;
        margin: 10px 0 0 0;
    }

}

/*-- END SMALL SCREENS --*/



/**
 * ==============================================
 *  MEDIUM SCREENS
 * ==============================================
 */

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
	#header {
		margin-top: -30px;
	}

	#utility {
		z-index: 9999;
		display: block;
		position: relative;
		margin-right: 5em;
	}
	.component {
		padding: 3em 0;
	}
	.component.image-cta,
	.component.hero-vertical-ctas {
		padding 0;
	}

	.component.has-titles {
		padding-top: 0;
	}

	.title-wrap {
		padding: 3em 0 1em;
	}

	#utility-2 {
		text-align: right;
	}
	
	#hpslider .background{
		background-position: center center!important;
	}
	
	#hpslider .transparent {
		margin: 0 3em;
	}
	
	.widget_sp_image {
		text-align: right;
	}
	
	#main-footer .medium-6:first-child {
		width: 60%;
	}
	
	#main-footer .medium-6:last-child{
		width: 40%;
	}

	.title-section {
		padding: 6em 0;
	}

	.image-grid {
		padding: 2em 0;
	}

	.image-grid .title + .sub-header {
		margin-bottom: 2em;
	}

	.parallax-section {
		padding: 2em 0;
	}

	.parallax-section .content {
		font-size: 1.2em;
	}

	.image-content-section {
		padding: 3em 0;
	}

	.image-content-section img {
		margin-bottom: 1em;
	}
	.image-content-section > .row > .columns:first-child {
		border-right: 1px solid #d4d4d4;
	}

	.image-content-section > .row > .columns {
		padding : 2em;
	}

	.image-content-section > .row > .columns:first-child:after, .image-content-section .columns:first-child:before {
		left: 100%;
		top: 40%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.image-content-section  > .row > .columns:first-child:after {
		border-color: rgba(255, 255, 255, 0);
		border-left-color: #ffffff;
		border-width: 20px;
		margin-top: -60px;
	}
	.image-content-section  > .row > .columns:first-child:before {
		border-color: rgba(212, 212, 212, 0);
		border-left-color: #d4d4d4;
		border-width: 21px;
		margin-top: -61px;
	}


	.component.map .cta {
		padding: 3em 0;
	}

	.component.map .content {
		font-size: 1.2em;
	}

	.dual-cta {
		padding: 3em 0;
	}

	.dual-cta .content {
		font-size: 1.1em;
	}

	.value-proposition {
		padding: 3em 0;
	}

	.image-carousel .swiper-slide {
		width: 33.3%;
	}

	.hero-variety-1 {
		padding: 3em 0;
	}
	
	.hero-variety-2 {
		padding: 0;
	}

	.hero-variety-2 .main-content .inner {
		padding: 2em;
	}

	.single-cta p {
		font-size: 1.6em;
	}

	.product-carousel .swiper-slide{
		width: 33.3%;
	}

	.parallax-background {
		padding: 3em 0;
	}

	.woocommerce .shop_table .product-remove {
		width: 30px;
	}
	.woocommerce .shop_table .product-thumbnail {
		width: 80px;
	}

	.woocommerce .shop_table .product-price {
		width: 110px;
	}

	.woocommerce .shop_table .product-quantity {
		width: 30px;
	}

	.woocommerce .shop_table .product-subtotal {
		width: 110px;
	}

	.image-carousel .swiper-slide {
		width: -webkit-calc(100% / 3 - 10px);
		width: calc(100% / 3 - 10px);
	}

	.recent-content {
		padding: 3em 0;
	}

	.recent-content .swiper-container .swiper-slide {
		width: -webkit-calc(100% / 2 - 20px);
		width: calc(100% / 2 - 20px);
	}

	.services-slider .swiper-container {
		padding: 4em 0 3em;
	}

	.hero-post-area .inner {
		margin-top: 16em;
		padding: 2em;
	}

	.category-title {
		position: absolute;
		z-index: 9;
		left: 10px;
	}

	.category-feed .swiper-container .swiper-slide {
		width: -webkit-calc(100% / 2 - 20px);
		width: calc(100% / 2 - 20px);
	}

	.category-parallax .swiper-container .swiper-slide {
		width: -webkit-calc(100% / 3 - 20px);
		width: calc(100% / 3 - 20px);
	}

	.category-parallax .wrap {
		min-height: 100px;
		position: relative;
	}

	.category-parallax .inner {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.upcoming-events .wrap {
		min-height: 230px;
		padding: 2em;
		position: relative;
	}

	.upcoming-events .inner {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.hero-vertical-ctas .wrap {
		position: relative;
		padding: 14em 3em;
	}


	.hero-vertical-ctas .inner {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.hero-vertical-ctas .content {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0 4em;
	}

	.hero-vertical-ctas .wrap:hover .content {
		opacity: 1;
		max-height: 300px;
	}

	.hero-variety-3 {
		padding-bottom: 1em;
	}

	.hero-variety-3 .title-wrap {
		padding-bottom: 1em;
	}

	.about h2 {
		margin-top: 1em;
	}

	#main-footer .widget {
		display: inline-block;
	}
	#main-footer-2,
	#main-footer .columns:last-child .widget {
		text-align: right;
	}

	#main-footer-2 img {
		width: 120px;
		margin-left: 1em;
	}

}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	.off-canvas-button {
		margin-top: .4em;
	}

	.mobile-button-container.right {
		display: none;
	}
}

/*-- END MEDIUM SCREENS --*/



/**
 * ==============================================
 *  LARGE SCREENS
 * ==============================================
 */

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
	.component {
		padding: 4em 0;
	}

	.component.image-cta,
	.component.hero-vertical-ctas {
		padding 0;
	}

	.component.has-titles{
		padding-top: 0;
	}

	.title-wrap {
		padding: 4em 0 2em;
	}

	.title-section {
		padding: 10em 0;
	}

	.title-section .sub-header {
		font-size: 2em;
	}

	.title-section .title {
		font-size: 5em;
		font-weight: 900!important;
	}

	.title-section.has-lines .wrap {
		padding: 3em 0;
	}

	.title-section.has-video .wrap {
		padding: 5em 0;
	}

	.image-grid {
		padding: 3em 0;
	}

	.parallax-section {
		padding: 4em 0;
	}

	.parallax-section .content {
		font-size: 1.5em;
	}

	.image-content-section > .row > .columns:last-child {
		padding-left: 3em;
		padding-right: 3em;
	}


	.dual-cta .content {
		font-size: 1.5em;
	}

	.entry > .row .content-wrap {
		margin-top: -32em;
	}

	.hero-slider .inner {
		padding: 8em 0;
	}

	.image-carousel .swiper-slide {
		width: 33%;
	}

	.parallax-background {
		padding: 3em 0;
	}

	#middle {
		padding: 3em 0;
	}

	.hero-variety-2 {
		padding: 0;
	}

	.product-carousel .swiper-slide{
		width: 25%;
	}

	.parallax-background {
		padding: 5em 0;
	}

	.category-parallax .swiper-container .swiper-slide {
		width: -webkit-calc(100% / 4 - 20px);
		width: calc(100% / 4 - 20px);
	}

	.image-cta .inner {
		max-width: 430px;
	}

	.hero-variety-3 {
		padding-bottom: 0;
	}

	#more-footer {
		padding: 3em 0;
	}

	#more-footer .big {
		display: inline-block;
		margin-right: 1em;
		line-height: 1;
		font-size: 1.2em;
	}

	.logo:after {
		content: 'Resources for a diverse world';
		color: #2183c8;
		font-family: permanentmarker;
		font-size: 1.4em;
		width: 180px;
		display: block;
		float: right;
		margin-top: 1em;
		margin-left: .5em;
	}

}
/*-- END LARGE SCREENS --*/