.topic-block-title { display: none; }
.master-column-wrapper, .topic-block { margin: 0; }

/* top section */

.banner {
    width: 100%;
    padding: 100px 0;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

#who .banner { background-image:  -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.2))), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-image:  -o-linear-gradient(bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.2)), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-image:  linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2)), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-position: center; }
#what .banner { background-image:  -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.2))), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-image:  -o-linear-gradient(bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.2)), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-image:  linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2)), url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage.jpg); background-position: center; }
#where .banner { background-image: url(/Themes/QETTLE-IE/Content/images/aboutUs/AvilionGatewayXIIIIndustrialEstate.jpg); background-position-y: 80%; }

.banner h1 {
    color: #fff;
    font-weight: bold;
    position: relative;
    line-height: 1.5;
    text-shadow: 3px 1px 2px #554;
    font-weight: 900;
}

.banner h3 { color: #fff; max-width: 300px; margin: 0 auto; background: rgba(66,66,66,0.5);
    padding: 3px;}

.banner h1:after {
    content: "";
    display: block;
    margin: 0 auto;
    background: #fff;
    width: 200px;
    height: 1px;
}

.aboutus-menu {
    background: #fff;
    text-align: center;
    border-top: 1px solid #999;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.aboutus-menu a {
    padding: 15px 25px;
    margin: 0 10px;
    font-weight: 400;
    font-size: 15px;
    color: #0f0f0f;
}

.aboutus-menu a.active { border-bottom: 3px solid #ff6600; padding-bottom: 12px; }
.aboutus-menu a:hover { color: #ff6600; }

/* page layout */

.topic-block-body .block-wrapper:first-child { margin-top: 75px; }
.block-wrapper { width: 100%; margin: 150px 0;padding: 0 50px;}
.type-a .block { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
.type-b { background: #ffffff;}

.block {
    min-width: 100%;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0;
}

.block-content {
    width: 50%;
    position: relative;
    padding: 0 125px;
}

.block .image {
    width: 50%;
    position: relative;
}

.block .image img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* content styling */

.block-content h2 {
    font-weight: 300;
    font-size: 25px;
    margin-bottom: 30px;
}

.block-content .paragraph {
    height: 100%;
}

.block-content p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.block-content p:last-child { margin-bottom: 0; }

.block-wrapper:first-child .block-content .paragraph,
.block-wrapper:first-child .block-content h2 {
    display: block !important;
    opacity: 1 !important;
}

#who .footnote { text-align: center; padding: 0 50px; font-size: 12px; font-style: italic; }

/* SVG Youtube button */

.lightbox::before {
    content: "";
    background-image: url(../images/youtubeplay-grey.svg);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    z-index: 10;
    width: 140px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 70px);
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
}

.lightbox:hover::before {
    background-image: url(../images/youtubeplay-orange.svg);
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
}

/* TIMELINE */
 #timeline {
    margin: 3%;
} 

#timeline .year-block {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

#timeline .image {
    display: block;
    overflow: hidden;
    padding: 75px;
    width: 33.3333333%
}

#timeline .image img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 50%;
}

#timeline .content {
    padding-left: 100px;
    position: relative;
    width: 66.6666667%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-left: 2px solid #999;
}
/*
#timeline div:first-child .content:before { display: none; }
#timeline .content::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    position: absolute;
    left: -8px;
    top: -7px;
    background: #999;
    z-index: 5;
}
*/
#timeline .time {
    position: absolute;
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    width: 80px;
    left: -41px;
    border: 1px solid #999;
    background: #fff;
}

#timeline .time::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #999;
    z-index: 5;
    position: absolute;
    top: calc(50% - 7px);
    right: -40px;
    -webkit-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
    opacity: 0;
}


#timeline .time::before {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    position: absolute;
    top: calc(50% - 1px);
    background: #999;
    left: 79px;
    -webkit-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
}

#timeline .element-visible .time::before { width: 30px; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
#timeline .element-visible .time::after { opacity: 1; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }

#timeline .text p {
    margin-bottom: 15px;
}


@media all and (max-width: 1350px) {
    .block-wrapper .block-content { padding: 0 50px; }
    #who .banner { background-image: -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.3))),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-med.jpg); background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.3)),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-med.jpg); background-image: linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.3)),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-med.jpg); background-position: center; }

}


@media all and (max-width: 996px) {
    .topic-block-body .block { display: block;  }
    .topic-block-body .image,
    .topic-block-body .block-content { width: 100%; }
    .topic-block-body .block-content { padding: 30px 0 0 0; }
    .topic-block-body .block-wrapper { margin: 100px 0; }
    #who .banner { background-image: -webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,0.3)),to(rgba(0,0,0,0.4))),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-sm.jpg); background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.4)),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-sm.jpg); background-image: linear-gradient(0deg,rgba(0,0,0,0.3),rgba(0,0,0,0.4)),url(/Themes/QETTLE-IE/Content/images/aboutUs/hero-who-montage-sm.jpg); 
        background-position: center; 
    }
    #who .footnote { text-align: left; }
    #timeline .image { width: 60%; margin: 0 auto; }

}

@media all and (max-width: 620px) {
    .aboutus-menu a { font-size: 12px; margin: 0; }

    #timeline .year-block { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 15px;}
    #timeline .image { width: 75%; margin: 0 auto; }
    #timeline .content:before, #timeline .time::before, #timeline .time::after { display: none; }
    #timeline .content { border-top: 2px solid #999; border-left: none; width: 100%; padding: 30px 0 0 0; text-align: center;}
    #timeline .time { top: -21px; left: calc(50% - 41px); }

    .topic-block-body .block-wrapper { margin: 50px 0; padding: 0 15px;}
    .block-content h2 { font-size: 20px; }
    #who .footnote { padding: 0 15px; }
}

@media all and (max-width: 400px) {
    #timeline .image img {
         min-width: 75%; margin: 0 auto; 
    }
}