html,
body {
height: 100%; background:#fff;
}

h1, h2, h3 ,h4, h5 {font-family: 'Noto Sans', sans-serif;}

body, p, td, li a, .form-control {font-family: 'Josefin Sans', sans-serif;font-weight: 300; font-size: 22px; color: #5a6258;}
.table td {border: none !important;}
a, a:hover, img, .fa, button {outline: none; text-decoration: none !important;}
h1 {font-weight: 700; color: #de354c; text-align: center;}
h2 {}
h3, h4 {font-size: 24px;}

#title h1, #title p a {}
#title h1 {color: #fff; font-size: 70px; text-shadow: 2px 2px #5a6258;}
#title p {font-size: 30px; color: #fff;}
#title p a {display: block; width: 120px;margin: 30px auto 0 auto;}
#title p a:hover {background: #4d6c43; text-decoration: none;}
#default, #two-col, .footer, #contact {clear: both; float: left;display: block; width: 100%; background: #fff;}
.full-width, .footer {clear: both; display: block;width: 100%;}
/*COLOURS
Fushia  #de354c
Sage  #b2c085
Leaf #4d6c43*/

a, .footer span {outline: 0 !important; color:#de354c;} 
a:hover {color:#4d6c43;}
.menu {display: block; }
#intro {position: relative;text-align: center;}

#title {position: absolute;min-width: 360px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#banner img, #two-col-left img {width: 100%;}
.full-width {}
#page-title {width: 900px; margin: 0 auto;}
.full-width {margin: 0 0 0 0; padding:0 200px 0 200px;}

#two-col {clear: both; float: left; background: #b2c085; margin-top: 70px;}
#two-col-left, #two-col-right {width: 50%; float: left;}
#two-col-left p {margin: 0 0 0 0;}
#two-col-right {}
#contact-details {margin-top: 80px;text-align: center;}
#contact form {padding:80px 60px 0 60px;}
#contact form input {height:50px;}
#contact form textarea {min-height: 200px;}
#contact button {display: block;width: 100px; margin: 0 auto;}
#contact button:hover {background: #4d6c43;}
.footer {padding: 10px 10px 0 10px; text-align: center; border-top: solid 1px #b2c085;}
.footer br {display: none;}
.panel-group, .panel-default, .panel-heading, .panel-body, .form-control {border-radius: 0; border: none;}
#title p a, #contact button {padding: 8px 16px;border-radius: 10px; background:#de354c; border: none; color: #fff;}

@media(max-width:1600px) {

.full-width {margin: 0 0 0 0; padding:0 100px 0 100px;}
}
@media(max-width:1500px) {
#contact-details {margin-top: 50px;}
#contact form {padding:50px 60px 0 60px;}
}
@media(max-width:1400px) {
.full-width {margin: 0 0 0 0; padding:0 40px 0 40px;}
#contact-details {margin-top: 40px;}
#contact form {padding:20px 40px 0 40px;}
}
@media(max-width:1280px) {
.full-width {margin: 0 0 0 0; padding:0 20px 0 20px;}
body, p, td, li a, .form-control {font-size: 20px;}
#title h1 {font-size: 60px;}
#title p {font-size: 22px;}
#title p a {padding: 8px 16px; margin-top: 20px;border-radius: 10px;}
#contact-details {margin-top: 20px;}
#contact form {padding:0 30px 0 30px;}
#contact form input {height:40px;}
#contact form textarea {min-height: 110px;}
}

@media(max-width:1023px) {
h1 {font-size:30px;}
#title h1 {font-size: 50px;}
#page-title {width: 700px;}
#two-col {margin-top: 60px;}
#two-col-left, #two-col-right {width: 100%; display: block;}
#two-col-left img {}
}

@media(max-width:992px) {
#title h1 {font-size: 40px;}
}

@media(max-width:767px) {
#title {position:absolute; top: 50%; left: 50%;}
#title h1 {font-size: 30px;}
#page-title, .full-width {width: 100%; margin: 0 0 0 0;padding:0 20px 0 20px;}
h1 {font-size:26px;}
h2, h3, h4 {font-size: 20px;}
#two-col {margin-top: 50px;}
}

@media(max-width:580px) {
.full-width {margin: 0 0 0 0; padding:0 0 0 0;}
#two-col {margin-top: 40px;}
}

@media(max-width:480px) {
#title h1 {font-size: 30px;}
.footer span {display: none;}
.footer br {display: block;}
}

@media(max-width:420px) {
#page-title {margin: 0 0 0 0; padding:0 20px 0 20px; }
}