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

	.s-container, .s-container--narrow {
	    width: calc( 100% - 0px );
	}


	/* mobile navigation */
	.main-nav-wrapper{
		margin: 0;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0,0,0,0.4);
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		text-align: center;
		padding: 62px 0 86px;
		transition: all 0.3s;
		transform: translateY(-110%);
		-webkit-transform: translateY(-110%);
	}
	.mobile-nav-open .main-nav-wrapper{
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	.main-nav .menu-item{
 		display: inline-block;
 		float: none;
 	}
 	.mobile-nav-close{
 		background-color: #eee;
 		display: block;
 		list-style: none;
 		width: 100%;
 		height: 24px;
 		position: absolute;
 		bottom: 0px;
 		left: 0;
 	}
 	.mobile-nav-close:before{
 		content: "";
 		display: block;
 		border: solid 2px #aaa;
 		border-bottom: none;
 		border-right: none;
 		width: 16px;
 		height: 16px;
 		position: absolute;
 		left: 50%;
 		transform: rotate(45deg) translate(0%, 80%);
 	}

}

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

	/* mobile search */
	.header-search{
		margin: 0;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0,0,0,0.4);
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		text-align: center;
		padding: 62px 40px 86px;
		transition: all 0.3s;
		transform: translateY(-110%);
		-webkit-transform: translateY(-110%);
	}
	.mobile-search-open .header-search{
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}
	.header-search input[type=text] {
	    width: 100%;
	}
 	.mobile-search-close{
 		background-color: #eee;
 		display: block;
 		list-style: none;
 		width: 100%;
 		height: 24px;
 		position: absolute;
 		bottom: 0px;
 		left: 0;
 	}
 	.mobile-search-close:before{
 		content: "";
 		display: block;
 		border: solid 2px #aaa;
 		border-bottom: none;
 		border-right: none;
 		width: 16px;
 		height: 16px;
 		position: absolute;
 		left: 50%;
 		transform: rotate(45deg) translate(0%, 80%);
 	}


}


@media screen and ( min-width: 600px ){

		/* header */
	 	.header-wrapper{
	 		padding-bottom: 40px;
	 	}
	 	.home .header-wrapper{
	 		padding-bottom: 40px;
	 	}
	 	.main-header{
	 		height: 107px;
	 	}

	 	/* main nav */
	 	.main-nav-toggle{
	 		display: none;
	 	}
	 	.main-nav-wrapper{
	 		display: block;
	 	}

	 	/* header search */
	 	.header-searchtoggle{
	 		margin-top: 53px;
	 	}

	 	/* slider */
	 	.mainbanner{
	 		box-shadow: 0 74px 40px -58px rgba(0,0,0,0.6);
	 	}
 	 	.ts-wrapper{
	 		padding-bottom: 36%;
	 	}



	 	/* activites header */
	 	.home-activites__header{
	 		font-size: 26px;
	 	}

	 	/* agenda header */
	 	.home-agenda__header{
	 		font-size: 26px;
	 	}

	 	/* posts */
	 	.posts__single{
	 	}
	 	.posts__single__thumb{
	 		float: left;
	 		width: 200px;
	 		margin-right: 20px;
	 	}
	 	.posts__single__right{
	 	}
	 	.posts__single__content{
	 	}

	 	/* bottom stripe */
	 	.bottom-stripe-wrapper{
	 		padding-bottom: 100px;
	 	}




}


@media screen and ( min-width: 900px ){

		/* top: stripe */
		.top-stripe{
 			height: 52px;
	 	}
 		/* top: message */
	 	.top-stripe__msg{
	 		display: block;
	 		position: relative;
	 		top: 50%;
	 		transform: translateY(-50%);
	 	}
	 	/* top: social profile icons */
	 	.top-stripe__social{
	 		margin-right: 0;
	 	}
	 	.top-stripe__social a{
	 		float: left;
	 		width: 52px;
	 		height: 52px;
	 	}

	 	/* header search */
	 	.header-searchtoggle{
	 		display: none;
	 	}
	 	.header-search{
	 		display: block;
	 	}

	 	/* content: page title bar */
 	 	.page-header__icon{
 			float: left; 
 			margin-right: 17px;
 		}
		.page-header__title{
	 		float: left;
	 		font-size: 26px;
	 		text-align: left;
	 		margin-top: 16px;
	 		margin-bottom: 16px;
	 		line-height: 1.7;
	 		padding: 0;
	 	}
		.page-header__title:first-child{
	 		padding: 0;
	 	}
	 	.breadcrumbs{
	 		float: right;
	 		font-size: 16px;
	 		margin: 25px 0;
	 		padding: 0;
	 	}


	 	/* bottom stripe */
	 	.bottom-stripe__copyright{
	 		float: left;
	 		text-align: left;
	 		width: 35%;
	 		margin-bottom: 0;
	 	}
	 	.bottom-stripe__info{
	 		float: right;
	 		text-align: right;
	 		width: 65%;
	 	}

}


@media screen and ( min-width: 900px ){

}