/*-------------------------------------------------------------------- 
@Auth: Designer 
@Date: 24-10-2017
@Media Query for diff resolutions 
--------------------------------------------------------------------- */
/*Bootstarp container property for all template (don't change order of classes)*/
@media only screen and (max-width: 991px) and (min-width: 768px) {
	.top-navs .navbar .container {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.paragraph.paragraph--type--simple-content.paragraph--view-mode--default {
		width: 750px;
	}

	.page-social #page-social-fb {
		background: transparent url(/profiles/contrib/openy/themes/openy_themes/ymcala/img/fb-share.png) top left no-repeat !important;
	}

	.page-social {
		width: 135px !important;
		position: absolute !important;
	}
}

@media (min-width: 768px) {
	.paragraph.paragraph--type--simple-content.paragraph--view-mode--default {
		width: 750px;
	}

	.page-social #page-social-fb {
		background: transparent url(/profiles/contrib/openy/themes/openy_themes/ymcala/img/fb-share.png) top left no-repeat !important;
	}

	.page-social {
		width: 135px !important;
		position: absolute !important;
	}
}

@media (min-width: 992px) {
	.paragraph.paragraph--type--simple-content.paragraph--view-mode--default {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.paragraph.paragraph--type--simple-content.paragraph--view-mode--default {
		width: 1170px;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group {
		padding-left: 1%;
	}
}

/*Bootstrarp container property for all template (don't change order of classes)*/
@media only screen and (max-width: 1024px) {
	.field-prgf-description .bannerimage img {
		height: auto !important;
	}

	.camp-menu-wrapper .columns-gradient {
		display: none !important;
	}
}

@media only screen and (max-width: 992px) {
	.paragraph-gallery .cta-group-wrapper .cta-group .btn,
	.paragraph-gallery .cta-group-wrapper .cta-group .button {
		width: 62%;
	}

	.sidebar .row-level-3 {
		display: block;
	}

	.sidebar .row-level-3 li {
		list-style: none;
	}

	.sidebar .row-level-3 li a {
		font-size: 16px;
	}

	.sidebar .nav-level-2.open, .sidebar .row-level-2 {
		background-color: #0060af;
		width: 100%;
	}

	.dropdown-menu._nav-join, .dropdown-menu._nav-donate, .dropdown-menu._nav-programs {
		width: 100%;
		border: none !important;
	}

	.dropdown-menu._nav-programs {
		overflow: hidden;
	}

	.sidebar .navbar-nav .open .dropdown-menu > li > a,
	.sidebar .navbar-nav .open .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 23px;
	}

	.sidebar .nav-level-2.open:first-child {
		padding-bottom: 30px;
	}

	.is_class_set_schedule #pages {
		width: 100% !important;
	}

	.is_class_set_schedule #pages .schedulecls {
		width: 90% !important;
	}

	.icon-bar.mobile-icons-bar {
		display: block !important;
	}

	.dropdown-menu._nav-programs .nav-level-3 a {
		display: block;
		min-height: auto;
	}

	.dropdown-menu._nav-programs .nav-level-3 .nav-level-4 a {
		display: block;
		min-height: auto;
	}

	.sidebar .navbar-nav .open .dropdown-menu > li > a {
		margin-top: 10px;
	}

	.dropdown-menu._nav-donate .nav-level-3 a {
		font-weight: 600 !important;
	}
}

@media only screen and (max-width: 767px) {
	.client-infobox {
		padding: 20px 35px;
	}

	.client-infobox .back-location {
		padding: 10px 0;
	}

	.client-infobox .save-link {
		text-align: center;
		padding: 1px 0;
	}

	.client-infobox .save-link .openy-branch-selector {
		float: left;
	}

	.client-infobox .save-link .fa-plus-circle {
		float: left !important;
		margin-left: 0;
		margin-right: 13px;
	}

	.client-infobox .client-title {
		text-align: center;
		font-size: 26px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 32px;
	}

	.client-infobox .client-title .col-md-12 {
		padding: 15px 0;
	}

	.client-infobox .client-information .client-number {
		text-align: left;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #FFF;
	}

	.client-infobox .client-information .action_call {
		padding-left: 0px;
		margin-top: 2%;
	}

	.client-infobox .client-information .action_call .mob-btn a {
		padding: 15px 20px;
		float: left;
		text-transform: uppercase;
		text-decoration: none;
	}

	.client-infobox .client-information .client-number .field-location-phone {
		margin-left: 5px;
	}

	.client-infobox .client-information .client-address {
		text-align: left;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #FFF;
	}

	.client-infobox .client-information .client-total-hours .fa,
	.client-infobox .client-information .client-total-hours .smtxt,
	.client-infobox .client-information .client-total-hours .field-branch-hours {
		display: inline-block;
		float: none;
	}

	.branch-header .desktop .today-hours .branch-hours {
		left: 50px;
	}

	.client-infobox .client-information .client-total-hours .smtxt {
		margin-left: 9px;
	}

	.mob-btn {
		font-family: "Cachet", 'Ubuntu Condensed', sans-serif;
		display: inline-block;
		font-size: 16px;
		line-height: 17px;
		text-align: center;
		font-weight: 500;
		background: #0089D0;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
	}

	.page-social #page-social-fb {
		width: 60px;
		height: 18px;
		float: right;
		background: transparent url(/profiles/contrib/openy/themes/openy_themes/ymcala/img/fb-share.png) top left no-repeat;
		margin-top: 1px;
		font-size: 0;
		margin-left: 10px;
		display: block;
	}

	/*Accordian*/
	.accordion {
		width: 100%;
		background-color: #0089D0;
	}

	.accordion .accordion-head {
		color: #fff;
		background-color: #0089D0;
		position: relative;
		padding: 10px;
		font-size: 16px;
		line-height: 17px;
		cursor: pointer;
		overflow: hidden;
	}

	.accordion .accordion-head * {
		cursor: pointer;
	}

	.accordion .accordion-head h4 {
		float: left;
		text-transform: uppercase;
		text-decoration: none;
		margin-bottom: 0;
	}

	.accordion .accordion-head:hover {
		filter: alpha(opacity=80);
		opacity: 0.80;
	}

	.accordion .accordion-body {
		border-bottom: 1px solid #fff;
		padding: 20px;
		height: auto;
		display: none;
	}

	.accordion-body.hidecls {
		display: none;
	}

	.arrow {
		float: right;
		width: 0px;
		height: 0px;
		border: 10px solid transparent;
		margin-top: 2px;
		border-top-color: #F3F3F3;
		margin-bottom: -6px;
	}

	.up {
		margin-top: -7px;
		border-bottom-color: #F3F3F3;
		border-top-color: transparent;
	}

	.paragraph-gallery .cta-group-wrapper {
		margin-left: 135px;
		width: 30%;
	}

	.node--type-blog.node--view-mode-teaser .inner-wrapper {
		height: 280px;
	}

	.color h3.node--type-blog.node--view-mode-teaser {
		font-size: 20px;
		line-height: 25px;
	}

	.camp-menu-wrapper .camp-menu {
		height: auto;
	}

	#camps_menu_wrapper .camp-menu {
		height: auto;
		width: 100% !important;
		transform: none !important;
		transition-timing-function: ease !important;
		transition-duration: 0ms;
	}

	.camp-menu-wrapper .camp-menu li.camp-menu__item {
		float: none;
	}

	.sidebar .row-level-3 {
		display: block;
	}

	.sidebar .row-level-3 li {
		list-style: none;
	}

	.sidebar .row-level-3 li a {
		font-size: 16px;
	}

	.become-an-insider.interior {
		background: #fff;
	}

	.become-an-insider .page-social {
		display: block;
		width: 135px;
		position: absolute;
		top: 30px;
		right: 60px;
		z-index: 100;
	}

	.become-an-insider .contextual-region h1,
	.become-an-insider .contextual-region h2 {
		margin-top: 35px;
	}

	.become-an-insider #seven-signup-form .form-control.w25 {
		width: 100%;
	}

	.become-an-insider #content.inner.base a {
		margin-left: -10px;
		padding-left: 0;
	}

	.paragraph-gallery .carousel .carousel-inner > .item img,
	.paragraph-gallery .carousel .carousel-inner > .item a img {
		min-height: 250px !important;
	}

	/*@date: 06-11-2017*/
	.become-an-insider h1 {
		font-size: 2.8rem;
		margin-top: 4rem;
	}

	.banner_img {
		margin-bottom: 1rem;
	}

	.volunteer #signupheader h1,
	.volunteer #signupheader h2 {
		font-size: 2.8rem;
	}

	#signuptable {
		width: 100%;
	}

	.paragraph-gallery .cta-group-wrapper {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% -1%, 0 353%);
		clip-path: polygon(0 0, 100% 0, 100% -1%, 0 353%);
	}

	/*template image mobile view 100%*/
	.imgmobview {
		width: 100%;
		height: auto;
	}

	.list-template ul li .temp-date-range {
		width: 40%;
		margin-right: 4%;
	}

	.list-template ul li .temp-date-branch {
		width: 40%;
	}

	.camp-menu-wrapper .columns-gradient {
		display: none;
	}

	.field-prgf-description .bannerimage img {
		min-height: 100px !important;
	}
}

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

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

@media only screen and (min-width: 768px) {
	.client-infobox .client-information .client-number {
		display: flex;
	}
}

@media only screen and (max-width: 735px) {
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_1_33 {
		width: 100% !important;
	}

	.filterCriteria h2,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_1_33 {
		width: 100% !important;
	}

	#location_div .k-dropdown,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_2_34,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_2_34 > div {
		width: 100% !important;
	}

	span.k-datepicker,
	span.k-numerictextbox,
	span.k-combobox,
	span.k-dropdown,
	span.k-timepicker,
	span.k-datetimepicker {
		width: 100%;
	}

	.k-grid table.schedulesTable td {
		min-height: 2.5rem;
	}

	table.schedulesTable tr {
		padding: 15px 10px;
	}

	.base .print-schedule li {
		padding: 10px;
	}
}

@media only screen and (max-width: 480px) {
	.k-pager-input,
	.k-pager-sizes {
		padding: 6px 17px;
		display: block;
		margin: 50px 0 15px 0;
		text-align: center;
		clear: both
	}

	.k-pager-info {
		display: block;
		text-align: center;
		float: none !important;
	}
}

@media only screen and (max-width: 735px) {
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_1_33 {
		width: 100% !important;
	}

	.filterCriteria h2,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_1_33 {
		width: 100% !important;
	}

	#location_div .k-dropdown,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_2_34,
	.sf_cols.filterCriteria .sf_colsOut.sf_3cols_2_34 > div {
		width: 100% !important;
	}

	span.k-datepicker,
	span.k-numerictextbox,
	span.k-combobox,
	span.k-dropdown,
	span.k-timepicker,
	span.k-datetimepicker {
		width: 100%;
	}

	.k-grid table.schedulesTable td {
		min-height: 2.5rem;
	}

	table.schedulesTable tr {
		padding: 15px 10px;
	}
}

@media only screen and (max-width: 480px) {
	.k-pager-input,
	.k-pager-sizes {
		padding: 6px 17px;
		display: block;
		margin: 50px 0 15px 0;
		text-align: center;
		clear: both
	}

	.k-pager-info {
		display: block;
		text-align: center;
		float: none !important;
	}

	.path-frontpage h2 {
		font-size: 35px;
	}
}


/*Search Page*/
.path-search .layout-content #block-ymcala-content {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

@media (max-width: 767px) {
	.path-search .layout-content #block-ymcala-content {
		width: 100% !important;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 768px) {
	.path-search .layout-content #block-ymcala-content {
		width: 750px !important;
	}

	.path-search .layout-content .js-form-type-textfield {
		width: 80%;
		margin-right: 10%;
	}
}

@media (min-width: 992px) {
	.path-search .layout-content #block-ymcala-content {
		width: 970px !important;
	}

	.path-search .layout-content .js-form-type-textfield {
		width: 68%;
		margin-right: 10%;
	}
}

@media (min-width: 1200px) {
	.path-search .layout-content #block-ymcala-content {
		width: 1170px !important;
	}
}

@media only screen and (max-width: 480px) and (orientation: landscape) {
	.paragraph-gallery .cta-group-wrapper {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% -1%, 0 353%);
		clip-path: polygon(0 0, 100% 0, 100% -1%, 0 353%);
	}

}

/*over-ride for footer landscap view */
@media (max-width: 62em) and (min-width: 0) {
	.footer .footer__social {
		width: 100%;
	}
}

/*mobile view location page*/
@media (max-width: 30em) and (min-width: 0) {
	.form__locations .zip-code, .form__locations .distance {
		display: block;
	}
}

@media (max-width: 992px) {
	.paragraph-gallery .cta-group-wrapper {
		background: #fff;
	}
}

@media (min-width: 1600px) {
	.paragraph-gallery .cta-group-wrapper .cta-group {
		width: 34%;
		float: right;
		margin-right: 48%;
	}
}

@media (min-width: 1441px) and (max-width: 1600px) {
	.paragraph-gallery .cta-group-wrapper .cta-group {
		width: 34%;
		float: right;
		margin-right: 48%;
	}
}

@media (min-width: 767px) and (max-width: 1440px) {
	.paragraph-gallery .cta-group-wrapper .cta-group {
		width: 35%;
		float: right;
		margin-right: 55%;
	}

	.paragraph-gallery #carousel .item .cta-group-wrapper h1 {
		font-size: 40px;
	}

	.paragraph-gallery #carousel .item .cta-group-wrapper .text {
		font-size: 18px;
	}

	.paragraph-gallery #carousel .item .cta-group-wrapper .btn {
		font-size: 18px;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group .btn a,
	.paragraph-gallery .cta-group-wrapper .cta-group .button a {
		padding: 10px;
	}

	.paragraph-gallery .carousel .carousel-inner > .item img,
	.paragraph-gallery .carousel .carousel-inner > .item a img {
		min-height: 350px !important;
	}
}

@media (max-width: 992px) {
	.paragraph-gallery .carousel {
		margin: 0;
	}

	.paragraph-gallery .cta-group-wrapper {
		position: relative;
		-webkit-clip-path: none;
		clip-path: none;
		width: 100%;
		height: auto;
		margin-left: 0px;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group {
		width: 90%;
		background-color: #FFF;
		margin: 0 auto;
		min-height: 200px;
		max-width: 100%;
		float: none;
	}

	.paragraph-gallery .media-image {
		width: 100%;
	}

	.paragraph-gallery .carousel .carousel-inner > .item img,
	.paragraph-gallery .carousel .carousel-inner > .item a img {
		min-height: auto !important;
		padding-left: 0;
		width: 100%;
		height: auto;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group h1 {
		font-size: 32px;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group .text {
		font-size: 16px;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group .btn,
	.paragraph-gallery .cta-group-wrapper .cta-group .button {
		font-size: 16px;
		width: 170px;
		margin-top: 1%;
	}

	.paragraph-gallery .cta-group-wrapper .cta-group .btn a,
	.paragraph-gallery .cta-group-wrapper .cta-group .button a {
		padding: 10px;
	}

	.paragraph-gallery .carousel .carousel-control.left {
		top: 105px;
		left: 0px;
	}

	.paragraph-gallery .carousel .carousel-control.right {
		top: 105px;
		right: 0px;
	}

	.paragraph-gallery .carousel .carousel-control .fa {
		font-size: 40px;
	}

	@media (max-width: 767px) {
		.paragraph-gallery .cta-group-wrapper .cta-group {
			width: 75%;
		}
	}
}