/**
 * ==============================================
 *  RESPONIVE-MAIN.CSS
 * ==============================================
 * (a)n Foundation responsive style sheet
 *
 *
 * @since        0.1
 * @author        chriscarvache
 */



/**
 * ==============================================
 *  SMALL SCREENS
 * ==============================================
 */

/* Define mobile styles */
@media only screen {
	.hero-slider .wrap {
		padding: 2em 0;
	}
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
	.hero-slider .inner:first-child {
		margin-bottom: 2em;
	}
    .grid-sizer,
    .grid-item {
        width: 100%;
    }

    .fp-video {
    	display: none;
    }
}

@media only screen and (max-width: 782px) {
	.admin-bar .stuck {
		top: 46px;
	}
}

@media only screen and (min-width: 782px) {
	.admin-bar .stuck {
        top: 32px;
    }
}

/*-- END SMALL SCREENS --*/



/**
 * ==============================================
 *  MEDIUM SCREENS
 * ==============================================
 */

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
    #more-footer .sidebar li.widget:last-child,
    #main-footer .sidebar li.widget:last-child,
    #topbar .sidebar li.widget:last-child{
        margin-bottom: 0;
    }

    .hero-slider .wrap {
		padding: 3.5em 0;
	}

    .vertical-center {
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		position: relative;
    }

	.swiper-slide.vertical-center .wrap,
	.columns.vertical-center .inner{
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.dual-slider .background {
		height: 30em!important;
	}
	.dual-slider .slider-left,
	.dual-slider .slider-right {
		width: 50%!important;
		float: left;
	}

	.dual-slider:after {
		clear: both;
		content: '.';
		display: block;
		visibility: hidden;

	}

}



/* 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) {
    #header .medium-12 {
        text-align: center;
    }

    #header .medium-12 .top-bar-section ul.top-bar-menu {
        display: table;
        margin: 0 auto;
        background: transparent;
        padding: 0;
    }
    #header .medium-12 .top-bar-section ul.top-bar-menu li {
        display: table-cell;
        border: 0;
    }
    #header .medium-12 .top-bar.right {
        float: none!important;
    }

    .grid-sizer,
    .grid-item {
        width: 50%;
    }
}

/*-- END MEDIUM SCREENS --*/



/**
 * ==============================================
 *  LARGE SCREENS
 * ==============================================
 */

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {

    .hero-slider .wrap {
		padding: 5em 0;
	}

	.dual-slider .background {
		height: 50em!important;
	}

	.dual-slider .wrap {
		background: rgba(0,0,0, .5);
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
	}

	.dual-slider .wrap .inner {
		padding: 5em;
	}

	.dual-slider .wrap:hover {
		background: rgba(0,0,0, .1);
	}

	.dual-slider .content-wrap,
	.dual-slider .button-wrap {
		opacity: 0;
		max-height: 0;
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
	}

	.dual-slider .wrap:hover .content-wrap,
	.dual-slider .wrap:hover .button-wrap {
		max-height: 2em;
		opacity: 1;
	}

	.dual-slider .slider-left,
	.dual-slider .slider-right {
		position: relative!important;
	}
	.dual-slider .slider-left .background {
		width: 107%;
		-webkit-clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
		clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
	}

	.dual-slider .slider-right .background {
		left: -6%;
		width: 106%;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
	}
}

/* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {

}

/*-- END LARGE SCREENS --*/



/**
 * ==============================================
 *  XL SCREENS
 * ==============================================
 */

/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) {

}

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {

}

/*-- END XL SCREENS --*/



/**
 * ==============================================
 *  XXL SCREENS
 * ==============================================
 */

/* min-width 1921px, xlarge screens */
@media only screen and (min-width: 120.063em) {

}

/*-- END XXL SCREENS --*/