body { background: #efefef; padding: 0; margin: 0; font-family: 'PT Sans', sans-serif; }

h1, h2, h3, h4, p { padding: 0; margin: 0; }

.wrapper { margin: 0 auto; max-width: 1400px; }
.wrapper-narrow { margin: 0 auto; max-width: 800px; }

.text-center { text-align: center; }

.flex-center { display: -ms-flexbox; -ms-flex-align: center; display: flex; align-items: center; justify-content: center; }

.site-header-bar { position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 10; }
.site-header-bar .wrapper { display: flex; padding: 0 40px; }
.site-header-bar .site-contact { margin-left: auto; flex-wrap: nowrap; display: flex; height: 50px; }
.site-header-bar .site-contact a:not(:last-child) { margin-right: 20px; }
.site-header-bar .site-contact a { text-decoration: none; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 20px; line-height: 22px;}
.site-header-bar .site-contact a svg { height: 26px; width: 26px; margin-right: 8px; }

	@media screen and (max-width: 800px){
        .site-header-bar .wrapper { padding: 0 20px; }
        .site-contact { width: 100%; }
        .site-contact a:last-child { margin-left: auto; }
	}

.header-bar-background { background: linear-gradient(#8B0A0A, #BC0D0D); opacity:0.8; height: 50px; position: fixed; top: 0; left: 0; right: 0; z-index: 8; }

.site-header { position: relative; z-index: 9; display: flex; width: 100%; height: 450px; position: relative; background: linear-gradient(#3e3e3e, #BC0D0D); }
.site-header .header { position: relative; z-index: 2; text-align: center; }
.site-header h1 { font-size: 60px; line-height: 50px; position: relative; z-index: 2;  color: #ffffff; text-align: center; text-transform: uppercase; }
.site-header h1 strong { display: block; }
.site-header h1 small { font-size: 30px; line-height: 30px; border-top: 3px solid #ffffff; padding-top: 5px; }
.site-header .site-logo { display: block; width: 150px; margin: 0 auto 20px auto; }
.site-header .site-logo img { display: block; width: 100%; }

	@media screen and (max-width: 800px){
        .site-header { height: 350px; }
        .site-header h1 { font-size: 36px; line-height: 36px; }
        .site-header h1 small { font-size: 24px; line-height: 24px; padding-top: 3px; }
        .site-header .site-logo { width: 120px; margin-bottom: 10px; }
	}

.site-header .slider { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; opacity:0.6; }
.site-header .slider img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

	@media screen and (max-width: 1400px){
        .site-header .slider img { width: auto; height:100%; }
	}

.site-header .slider img {
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 30s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

.site-header .slider img:nth-child(1) {
    background-color: lightblue;
}
.site-header .slider img:nth-child(2) {
    animation-delay: -20s;
    background-color: yellow;
}
.site-header .slider img:nth-child(3) {
    animation-delay: -10s;
    background-color: lightgreen;
}

.part-content >*:not(:last-child) { margin-bottom: 16px; }
.part-content h2 { font-size: 40px; line-height: 46px; }
.part-content h3 { font-size: 40px; line-height: 46px; text-transform: uppercase; }
.part-content h4 { font-size: 20px; line-height: 26px; text-transform: uppercase; }
.part-content p { font-size: 28px; line-height: 34px; }
.part-content .contact-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 8px 18px 8px 14px; border-radius:5px; }
.part-content .contact-button svg { height: 26px; width: 26px; margin-right: 8px; }
.part-content .contact-button strong { display: block;font-size: 20px; line-height: 22px; }
.part-content .icon-group { display: block; padding: 20px 0 10px 40px; position: relative; }
.part-content .icon-group svg { position: absolute; top: 20px; left: 0; width: 26px; }
.part-content .copyright { font-size: 18px; line-height: 24px; }

	@media screen and (max-width: 800px){
        .part-content >*:not(:last-child) { margin-bottom: 6px; }
        .part-content h2 { font-size: 20px; line-height: 36px; }
        .part-content h3 { font-size: 20px; line-height: 36px; }
        .part-content h4 { font-size: 14px; line-height: 18px; }
        .part-content p { font-size: 18px; line-height: 24px; }
        .part-content .contact-button { padding: 6px 14px 6px 10px; margin-top: 10px; }
        .part-content .contact-button svg { height: 24px; margin-right: 6px; }
        .part-content .contact-button strong { display: block;font-size: 18px; line-height: 22px; }
	}

.section-white { padding: 40px; }
.section-grey { padding: 40px; }
.section-red { padding: 40px; }
.section-white + .section-white { padding-top: 0; }
.section-grey + .section-grey { padding-top: 0; }
.section-red + .section-red { padding-top: 0; }

	@media screen and (max-width: 800px){
        .section-white { padding: 20px; }
        .section-grey { padding: 20px; }
        .section-red { padding: 20px; }
	}

/* content */

.section-white { background: #ffffff; }
.section-white .part-content h2,
.section-white .part-content h3,
.section-white .part-content h4 { color: #BC0D0D; }
.section-white .part-content p { color: #3E3E3E; }
.section-white .part-content .contact-button { color: #BC0D0D; border:2px solid #BC0D0D; }
.section-white .part-content .icon-group svg { color: #BC0D0D; }

.section-grey .part-content h2,
.section-grey .part-content h3,
.section-grey .part-content h4 { color: #BC0D0D; }
.section-grey .part-content p { color: #3E3E3E; }
.section-grey .part-content .contact-button { color: #BC0D0D; border:2px solid #BC0D0D; }
.section-grey .part-content .icon-group svg { color: #BC0D0D; }

.section-red { background: #BC0D0D; }
.section-red .part-content h2,
.section-red .part-content h3,
.section-red .part-content h4 { color: #ffffff; }
.section-red .part-content p { color: #ffffff; }
.section-red .part-content p a { color: #ffffff; text-decoration: none; }
.section-red .part-content p a:hover { text-decoration: underline; }
.section-red .part-content .contact-button { background: #ffffff; color: #BC0D0D; border:2px solid #BC0D0D; }
.section-red .part-content .icon-group svg { color: #ffffff; }

/* parts */

.part-services { display: flex; }
.part-services .item { width: calc(33.33% - 15px); text-align: center; color: #BC0D0D; }
.part-services .item:not(:last-child) { margin-right: 30px; }
.part-services .item img { display: block; width: 100%; margin-bottom: 20px; }
.part-services .item strong { font-size: 30px; margin-bottom: 0; display: block; }
.part-services .item small { font-size: 20px; font-weight: bold; display: block; }

	@media screen and (max-width: 800px){
        .part-services { display: block; }
        .part-services .item { width: 100%; text-align: left; display: flex; }
        .part-services .item:not(:last-child) { margin-right: 0; margin-bottom: 20px; }
        .part-services .item .item-image { width: 50%; margin-right: 20px; }
        .part-services .item img { margin-bottom: 0; }
        .part-services .item strong { font-size: 20px; margin-bottom: 0; display: block; }
        .part-services .item small { font-size: 18px; font-weight: bold; display: block; }
	}

.part-photos .photo { min-height: 100px; }
.part-photos .photo img { width: 100%; display: block; float: left; }

/* For IE Remember it counts the gaps as a column - They have to be DIV not SPAN to work */

.part-photos .photo:nth-child(1) { grid-area: photo1; -ms-grid-row:1; -ms-grid-column:1; -ms-grid-row-span:3; }
.part-photos .photo:nth-child(2) { grid-area: photo2; -ms-grid-row:5; -ms-grid-column:5;  -ms-grid-row-span:3; }

.part-photos .photo:nth-child(3) { grid-area: photo3; -ms-grid-row:3; -ms-grid-column:3; -ms-grid-column-span:3; }
.part-photos .photo:nth-child(4) { grid-area: photo4; -ms-grid-row:7; -ms-grid-column:1; -ms-grid-column-span:3; }

.part-photos .photo:nth-child(5) { grid-area: photo5; -ms-grid-row:1; -ms-grid-column:3; }
.part-photos .photo:nth-child(6) { grid-area: photo6; -ms-grid-row:1; -ms-grid-column:5; }
.part-photos .photo:nth-child(7) { grid-area: photo7; -ms-grid-row:5; -ms-grid-column:1; }
.part-photos .photo:nth-child(8) { grid-area: photo8; -ms-grid-row:5; -ms-grid-column:3; }

.part-photos {
    display: -ms-grid;
    display: grid;
    width: 100%;
    grid-gap: 40px;
    -ms-grid-rows: auto 40px auto 40px auto 40px auto;
    -ms-grid-columns: 1fr 40px 1fr 40px 1fr ;
}

	@media screen and (min-width: 799px){
        .part-photos {
          grid-template-areas:
            'photo1 photo5 photo6'
            'photo1 photo3 photo3'
            'photo7 photo8 photo2'
            'photo4 photo4 photo2';
          grid-gap: 40px;
        }
    }

	@media screen and (max-width: 800px){
        .part-photos {
          grid-template-areas:
            'photo1 photo5'
            'photo1 photo6'
            'photo3 photo3'
            'photo7 photo2'
            'photo8 photo2'
            'photo4 photo4';
          grid-gap: 20px;
        }
	}

.section-columns { display: flex; width: 100%; }
.section-columns > * { width: calc(50% - 80px); display: flex; }
.section-columns > *:first-child { order: 2; }
.section-columns > *:first-child .column-wrapper { margin-right: auto; }
.section-columns > *:last-child .column-wrapper { margin-left: auto; }
.section-columns > * .column-wrapper { width: 660px; max-width: 660px; }

	@media screen and (max-width: 800px){
        .section-columns { display: block; }
        .section-columns > * { width: calc(100% - 40px); }
	}

img { opacity:0; }