#wrapper {
	padding-top: 100px;
    width: 100vw;
    overflow: hidden;
}
.wrap {
	max-width: 1200px;
	margin: 0 auto;
}
.wrap-first {
	padding: 0 0 30px;
}
.wrap-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
}
.wrap-block {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
}

.content {

}

.ani {
	/*transform: translate3d(0, 100px, 0);*/
	transform: translate3d(0, 50px, 0);
	/*transition: transform 1s ease-in-out;*/
	transition: transform 0.7s ease-in-out;
}

.ani-left {
	/*transform: translate3d(-100px, 50px, 0);*/
	transform: translate3d(-50px, 25px, 0);
}

.ani-right {
	/*transform: translate3d(100px, 50px, 0);*/
	transform: translate3d(50px, 25px, 0);
}

.ani-3d {
	transform: rotate3d(1,1,1,90deg);
}

.ani.visible {
	transform: translate3d(0, 0, 0);
}

.ani.d1 {
	transition-delay: 0.2s;
}

.ani.d2 {
	transition-delay: 0.4s;
}

.brochure {
	margin-top: 15px;
	display: block;
	font-size: 1.4em;
    line-height: 1.4em;
}

.brochure:first-of-type {
	margin-top: 50px;
}

.brochure i {
	margin-left: 5px;
    font-size: 20px;
}

.brochure a {
	background-color: #000;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	/*padding: 10px 30px;*/
	white-space: nowrap;
	display: inline-block;
	transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.brochure a:hover {
	background-color: #fff;
	color: #000;
	/*padding: 9px 29px;*/
	padding: 9px;
	border: #000 1px solid;
}

.brochure:nth-of-type(3n+2) a {
	background-color: #7DC9DE;
}

.brochure:nth-of-type(3n+2) a:hover {
	background-color: #fff;
	color: #7DC9DE;
	/*padding: 9px 29px;*/
	padding: 9px;
	border: #7DC9DE 1px solid;
}

.brochure:nth-of-type(3n+3) a {
	background-color: #BEAC83;
}

.brochure:nth-of-type(3n+3) a:hover {
	background-color: #fff;
	color: #BEAC83;
	/*padding: 9px 29px;*/
	padding: 9px;
	border: #BEAC83 1px solid;
}


#single-page-container {
	display: flex;
	justify-content: space-between;
	padding: 80px 0;
}

#single-page-title {
    padding: 15px 30px 30px;
    width: 60%;
    background-color: #7DC9DE;
    margin-right: -110px;
    margin-bottom: 277px;
    z-index: 1;
}

#single-page-title h1 {
    color: #fff;
    font-size: 5em;
    margin: 0;
}

#single-page-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 350px;
    width: 80%;
    margin-top: 60px;
    flex-shrink: 0;
    flex-grow: 0;
}

.page-anchor {
    position: absolute;
    margin-top: -110px;
}

.pageheader {
	display: flex;
	align-items: flex-start;
	padding-top: 60px;
}

.pageheader-title {
    padding: 15px 30px 30px;
    width: 60%;
    background-color: #7DC9DE;
    margin-right: -190px;
    z-index: 1;
    margin-top: 100px;
}

.pageheader-title h1 {
    color: #fff;
    font-size: 5em;
    margin: 0;
}

.pageheader-slides {
    height: 480px;
    width: 80%;
    margin-top: 0;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
}

.pageheader-slides.full {
    width: 100%;
}

.pageheader-slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.pageheader-slide:nth-of-type(1){
    transform: translateX(100%);
}

.pageheader-slide:nth-of-type(2){
    transform: translateX(0%);
}

.pageheader-slide:nth-of-type(3){
    transform: translateX(-100%);
}

.pageheader-slide:first-of-type:last-of-type{
    transform: translateX(0%);
}

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

	.wrap-content {
		padding: 0 30px;
	}
	.content {
		padding: 30px 0;
	}
	.wrap-block {
		padding: 0;
	}

	.h1-class {
		margin-left: 15px;
	}

}

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

	.wrap-content {
		padding: 0;
	}

	.content {
		padding: 0;
		margin: 30px;
	}

	.wrap {
		padding: 0;
	}

	.ani, .ani-left, .ani-right, .ani-3d, .ani.visible, .ani.d1, .ani.d2 {
		transform: translate3d(0, 0, 0);
	}



}

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



	.pageheader {
		flex-wrap: wrap;
		padding: 0;
	}
	.pageheader, .pageheader-slides{
		margin: 0!important;
		width: 100%!important;
	}

	.pageheader-title {
    	width: 100%;
	}

	.pageheader-title h1 {
	    font-size: 3em;
	}

    #single-page-container {
		padding-top: 0;
		padding-bottom: 15px;
		flex-wrap: wrap;
	}

	#single-page-img, #single-page-title {
		margin: 0;
		width: 100%;
	}

	#single-page-title h1 {
	    font-size: 3em;
	}
}

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

	#wrapper {
		padding-top: 100px;
		background-image: url("../img/pattern800x686.png");
		background-attachment: fixed;
		background-size: 400px 343px;
	}

	.pageheader-slides {
    	height: 300px;
	}
}

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

	.content {
		margin: 15px;
	}

	.ani.d1 {
		transition-delay: 0s;
	}

	.ani.d2 {
		transition-delay: 0s;
	}

}

#sbi_images {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0!important;
}

#sbi_images .sbi_item {
    position: relative;
    margin: 0;
    width: calc(100% / 3);
    flex-grow: 1;
}
#sbi_images .sbi_item:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

#sbi_images .sbi_item .sbi_photo {
    width: 100%!important;
    background-size: cover!important;
}

#sbi_images .sbi_photo_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
}

#sbi_images .sbi_photo_wrap a {
    display: block;
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
}

#sbi_images .sbi_photo_wrap a span,
#sbi_images .sbi_item a img,
#sbi_images svg {
    display: none;
}


@media screen and (max-width: 800px) {
	#sbi_images .sbi_item {
		width: 50%;
	}
}

@media screen and (max-width: 500px) {
	#sbi_images .sbi_item {
		width: 100%;
	}
}