.main-content {
min-height: 1000px;
}

.hero {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 85vh;
overflow: hidden;
position: relative;
width: 100%;
}

@media screen and (min-width: 640px) {
.hero {
background-position: 50% 0;
}
}
.hero:after {
/*background-color: rgba(62, 92, 135, 0.5);*/
bottom: 0;
content: '';
left: -2000%;
position: absolute;
right: -2000%;
top: 0;
z-index: 1;
}

.hero-container {
background: rgba(0, 0, 0, 0.4);
box-sizing: border-box;
height: auto;
padding: 10px 20px;
position: relative;
width:49%;
max-height:250px;
top:35vh;
left:470px;
z-index: 2;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-duration: 1.2s;
}

.hero-container-news {
background: rgba(0, 0, 0, 0.4);
box-sizing: border-box;
height: auto;
padding: 10px 20px;
position: relative;
width:49%;
max-height:210px;
top:40vh;
left:450px;
z-index: 2;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-duration: 1.2s;
}


@media screen and (min-width: 414px), screen and (min-width: 375px) {
.hero-container {
height: 100%;
}
.hero-container-news {
height: 100%;
}
}
.hero-container p {
color: white;
font-size: 16px;
margin-top:7px;
margin-bottom: 12px;
line-height:20px;
opacity: 0.8;
text-align: left;
}

.hero-container-news p {
color: white;
font-size: 16px;
margin-top:7px;
margin-bottom: 12px;
line-height:20px;
opacity: 0.8;
text-align: left;
}

.hero-button {
background: rgba(255, 255, 255, 0.8);
color: #24527d;
font-size: 24px;
float: left;
margin-top: 10px;
padding-top:10px;
padding-bottom:8px;
padding-left:20px;
padding-right:20px;
text-decoration: none;
}

.hero-title {
color: #ffffff;
/*font-family: "Playfair Display", serif;*/
font-size: 150%;
font-weight: 400;
letter-spacing: 1px;
line-height: 1.1;
margin: 5px 0;
text-align: left;
width: 100%;
margin-top:10px;
margin-bottom:15px;
}
@media screen and (min-width: 414px), screen and (min-width: 375px) {
.hero-title {
font-size: 210%;
line-height: 30px;
}
}

.main-content {
height: auto;
padding: 30px 50px;
position: relative;
width: 60%;
}

.main-content p {
color: #25373D;
font-family: "Playfair Display", serif;
font-size: 18px;
line-height: 1.5;
}

@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-12px, 0, 0);
transform: translate3d(-12px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-12px, 0, 0);
transform: translate3d(-12px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

.animate {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

.delay {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}

.delay-200 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

.delay-400 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.delay-500 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.delay-600 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.delay-700 {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.delay-800 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}

.delay-1000 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}

.delay-1200 {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}


/* ------------- */
/* MOBILE STYLES */
/* ------------- */

/* ============================== */
/* Tablet styles - iPad optimised */
/* ============================== */
	
@media only screen and (max-width: 768px) and (orientation: portrait) {

.hero {
height: 85vh;
width: 769px;
}

.hero-container {
width:61%;
max-height:250px;
top:29vh;
left:250px;
}

.hero-container-news {
width:61%;
max-height:210px;
top:45vh;
left:250px;
}

}


/* ================================================ */
/* Phone styles (portrait) - iPhone 6/7/8 optimised */
/* ================================================ */
	
@media only screen and (max-width: 414px) and (orientation: portrait) {


.hero {
height: 69vh;
width: 130vw;
}

.hero-title {
font-size: 150%;
line-height:22px;
margin-top:5px;
margin-bottom:5px;

}

.hero-container {
width:370px;
max-height:230px;
top:170px;
left:22px;
}

.hero-container-news {
width:370px;
max-height:200px;
top:250px;
left:22px;
}

.phone_block {
	display: none;
}

.hero-button {
font-size: 20px;
margin-top: 7px;
padding-top:5px;
padding-bottom:5px;
padding-left:11px;
padding-right:11px;
}

.hero-container p {
color: white;
font-size: 14px;
margin-top:10px;
margin-bottom: 15px;
line-height:19px;
opacity: 0.8;
text-align: left;
}

.hero-container-news p {
color: white;
font-size: 14px;
margin-top:10px;
margin-bottom: 15px;
line-height:19px;
opacity: 0.8;
text-align: left;
}


}


/* ========================================== */
/* Phone styles (portrait) - iPhone optimised */
/* ========================================== */
	
@media only screen and (max-width: 375px) and (orientation: portrait), only screen and (max-width: 360px) and (orientation: portrait), only screen and (max-width: 320px) and (orientation: portrait){


.hero {
height: 69vh;
width: 130vw;
}

.hero-container {
width:300px;
min-height:232px;
top:200px;
left:6px;
}

.hero-container-news {
width:300px;
min-height:205px;
top:210px;
left:6px;
}

.phone_block {
	display: none;
}

.hero-button {
font-size: 20px;
margin-top: 7px;
padding-top:5px;
padding-bottom:5px;
padding-left:11px;
padding-right:11px;
}

.hero-container p {
color: white;
font-size: 14px;
margin-top:10px;
margin-bottom: 15px;
line-height:19px;
opacity: 0.8;
text-align: left;
}

.hero-container-news p {
color: white;
font-size: 14px;
margin-top:10px;
margin-bottom: 15px;
line-height:19px;
opacity: 0.8;
text-align: left;
}


}