/* Website font */
@font-face {
    font-family: 'OpenSans-SemiBold';
    src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('fonts/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-ExtraBoldItalic';
    src: url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'OpenSans-BoldItalic';
    src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype');
}

* {
    font-family: 'OpenSans';
}

/* General Markup */
a:hover {
    text-decoration: none;
}
a, a:hover {
    transition: 0.35s;
    -webkit-transition: 0.35s;
}

/* Vertical align middle markup */
.table-container {
    display: table;
    width: 100%;
    margin: 0 auto;
}

.row-container {
    display: table-row;
}

.cell-container {
    display: table-cell;
    vertical-align: middle;
}
.cell-container img {
    margin: 0 auto;
    display: block;
    max-width: 200px;
}

#bottom-banner {
    background: url(/images/bottom-banner.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}

#banner {
    background: url(/images/banner.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 40px 0px;
}

#banner-image-with-text {
    background: url(/images/banner-valves.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#banner-left > *, #banner-right-contact {
    border: 1px solid white;
}

#banner-image-with-text {
    padding: 30px 20px;
    margin-bottom: 10px;
}

#banner-image-with-text p {
    color: white;
    font-size: 40px;
    line-height: 60px;
    font-family: 'OpenSans-BoldItalic';
}

#banner-image-with-text span {
    font-family: 'OpenSans-BoldItalic';
    color: #f5d200;
}

.banner-cta {
    color: white;
}

.banner-cta .cell-container {
    padding: 10px;
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid white;
}

.banner-cta:nth-child(2n) {
    background: #004b72;
}

.banner-cta:nth-child(2n+1) {
    background: #002538;
}

#banner-right-contact {
    background: rgba(0, 37, 55, 0.85);
    padding: 30px 0px;
}

#banner-right-contact h3 {
    color: white;
    text-align: center;
    font-family: 'OpenSans-BoldItalic';
    font-size: 30px;
    line-height: 30px;
}

#banner-right-contact h2 {
    color: #f5d200;
    text-align: center;
    font-family: 'OpenSans-ExtraBold';
    font-size: 60px;
    line-height: 60px;
    padding-bottom: 10px;
}

input[type="text"], input[type="email"], input[type="tel"], select {
    background: transparent;
    color: #959595;
    border-radius: 5px;
    height: 45px;
    font-size: 14px;
    line-height: 14px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus {
    border: 2px solid #f5d200;
    box-shadow: 0;
    background: transparent;
}

input[type="submit"] {
    width: 100%;
    border: none;
    background: #f5d200;
    padding: 30px 0px;
    border-radius: 5px;
    font-size: 28px;
    line-height: 28px;
    color: #002537;
    font-family: 'OpenSans-BoldItalic';
}

div#banner-right-contact {
    padding: 30px 0px;
}

#disclaimer p {
    color: white;
    font-size: 12px;
    line-height: 12px;
    margin-top: 15px;
}

#disclaimer span {
    font-weight: bold;
    color: #f5d200;
}

#services {
    background: #207cca; /* Old browsers */
    background: -moz-linear-gradient(top,  #207cca 0%, #002538 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #207cca 0%,#002538 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #207cca 0%,#002538 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#002538',GradientType=0 ); /* IE6-9 */

}

h1 {
    color: #f5d200;
    font-family: 'OpenSans-ExtraBold';
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 50px;
}

.content h2 {
    margin-bottom: 50px;
    color: white;
    font-family: 'OpenSans-ExtraBold';
    font-style: italic;
    font-size: 36px;
    line-height: 36px;
}

.content h3 {
    color: #f5d200;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 20px;
} 
#service-images {
    padding: 30px 0px;
}

.banner-text-image-small h2 {
    color: white;
    font-family: 'OpenSans-ExtraBold';
    font-size: 40px;
    line-height: 57px;
    font-style: italic;
}

.banner-text-image-small h3 {
    color: #f5d200;
    font-size: 18px;
    line-height: 50px;
    font-style: italic;
}

.banner-text-image-small {
    padding: 30px;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.service-tile {
    padding: 0px 5px;
}

#service-image-1 {
    background-image: url(/images/installs-repairs.jpg);
}

#service-image-2 {
    background-image: url(/images/hot-water.jpg);
}

#service-image-3 {
    background-image: url(/images/appliances.jpg);
}

#service-image-4 {
    background-image: url(/images/metres.jpg);
}

.content p {
    color: white;
}

#content-ender {
    text-align: center;
    color: #f5d200;
    font-family: 'OpenSans-ExtraBold';
    font-style: italic;
    font-size: 30px;
    line-height: 30px;
    padding-top: 50px;
}

#blue-callout {
    background-color: #004b72;
    padding: 30px 40px;
    margin: 30px 0px;
}

#blue-callout h3 {
    font-family: 'OpenSans-ExtraBold';
    color: #f5d200;
    line-height: 25px;
    font-size: 25px;
    text-align: center;
}

#blue-callout h2 {
    font-family: 'OpenSans-ExtraBold';
    color: white;
    font-style: italic;
    text-align: center;
    font-size: 75px;
    line-height: 75px;
}

#blue-callout h4 {
    color: white;
    font-size: 20px;
    line-height: 20px;
    font-family: 'OpenSans-ExtraBold';
    text-align: center;
    margin: 30px 0px;
}

#blue-callout a {
    margin: 0 auto;
    display: block;
    text-align: center;
    max-width: 320px;
    color: #004b72;
    background: #f5d200;
    padding: 20px 0px;
    font-size: 18px;
    line-height: 18px;
    font-family: 'OpenSans-ExtraBold';
}

#blue-callout a:hover {
    background: white;
}

#aiims {
    background: #111111;
    color: white;
    padding: 10px 0px;
}

#aiims a {
    color: white;
}

#copyright span {
    color: #f5d200;
}

#copyright {
    font-size: 13px;
    line-height: 13px;
}

.policies {
    font-size: 13px;
    text-align: right;
}

#content-container {
    padding-bottom: 30px;
}

#logo-container {
    float: left;
}

#top-blue-gradiant {
    background: #207cca; /* Old browsers */
    background: -moz-linear-gradient(top,  #207cca 0%, #002538 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #207cca 0%,#002538 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #207cca 0%,#002538 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#002538',GradientType=0 ); /* IE6-9 */
    padding: 20px 0px;
}

#header-contact-container {
    text-align: right;
}

#header-contact-container a {
    color: white;
    font-size: 50px;
    font-family: 'OpenSans-ExtraBold';
    text-shadow: 2px 2px 4px black;
    font-style: italic;
    line-height: 50px;
}

#header-contact-container span {
    padding-right: 20px;
    font-style: italic;
    font-family: 'OpenSans-ExtraBold';
    color: #f5d200;
    text-shadow: 2px 2px 4px black;
}

#slogan {
    color: white;
    font-size: 30px;
    line-height: 30px;
    font-family: 'OpenSans-ExtraBold';
    text-align: center;
}

#slogan span {
    color: #f5d200;
    font-weight: bold;
    font-size: 40px;
    line-height: 30px;
    font-style: italic;
    font-family: 'OpenSans-ExtraBoldItalic';
    padding: 0px 10px;
    text-shadow: 2px 2px 3px black;
}
#green-ctas-row {
    background-color: #39b54a;
    color: white;
    font-family: 'OpenSans-ExtraBold';
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 30px;
}

#banner-right-container {
    background-image: url(/images/plumber-background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#service-image-5 {
    background-image: url(/images/gas-leak-banner.jpg);
}

#service-image-5 h2 {
    line-height: 114px;
}