.hero.hero-sm > .container {
    height: 190px;
}
.hero.hero-md > .container {
    height: 330px;
}
.hero.hero-lg > .container {
    height: 440px;
}
.hero > .container {
    height: 332px;
}
.hero .hero-white-border {
    width:100%;
    position:absolute;
    left:0;
    top: 50%;                        
    transform: translate(0, -75%)!important;
}
.hero h1 {
    font-size: 3rem;
    text-transform: uppercase;
}
.hero .my-auto {
    margin-right: 60px;
    padding: 30px 30px 30px 60px;    
}
.hero-lines {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    top: 60px;
    bottom: 60px;
    right: 60px;
    left: 0;
}

/* hero -MR- */
/*
	empty div.hero-lines used just for borders removed.
    CSS used for background moved from HTML to CSS where it belongs.
	Element reorganised to have min-height instead of fixed height
	so it doesn't brake in case of more content that it was planed.
	This way it looks good even when screens are smaller
*/
.page:not(.home) #hero-container,
.single-resources #hero-container {
	background-repeat: no-repeat;
	background-position: center; 
	background-size: cover;
    min-height: 150px;
	padding: 60px 60px 60px 0;
	position: relative;
}

.page:not(.home) .hero.hero-md > .container,
.single-resources  .hero.hero-md > .container {
  min-height: 150px;
}

.page:not(.home) .hero .hero-white-border,
.single-resources  .hero .hero-white-border {
    align-items: center;
		border: 1px solid #fff;
    border-width: 1px 1px 1px 0;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 60px;
    right: 60px;
    bottom: 60px;
    left: 0;
    transform: none !important;
    width: auto;
}

.page:not(.home) .hero .hero-white-border.fade-text {
    justify-content: flex-start;
		padding: 0 30px;
		text-align: left !important;
}

.blog #hero-container,
.single-post #hero-container {
  background-repeat: no-repeat;
	background-position: center; 
	background-size: cover;
	min-height: 330px;
}

.single-post .hero > .container {
    height: 330px !important;
}

.page:not(.home) .hero .my-auto {
	margin-right: 0;
	padding: 0;
}

.page:not(.home) .hero h1 {
	margin-bottom: 0;
}

/* END hero -MR- */
