@import url("Layout.css");
@import url("Banner.css");
@import url("Contact.css");
@import url("Gallery.css");
@import url("Responsiveness.css");

body{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	color:black;
	margin:0;
	background-color:white;
	overflow-x: hidden;
    overflow-y: auto;
}

.PageContent{
    padding:0 10%;
    margin:30px 0 30px;
    display:grid;
}

img{
    max-width:100%;
}

.imageList, .gal-list{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content:space-between;
    align-items:center;
}
.imageList li{
    max-height: 200px;
    max-width: 300px;
    margin: 10px;
}

.imageList a{
    height:200px;
    display:flex;
}

.imageList img{
    max-height:100%;
    max-width:100%;
    margin:auto;
}

.gal-list li{
    margin: 10px;
}

.tile{
    max-height: 200px;
    max-width: 300px;
}

@media(min-width:640px){
    .burg{
        display:none;
    }
}

.burg{
    position:relative;
    height:30px;
    width:30px;
}

.bar{
    width:30px;
    height:5px;
    background:black;
    border-radius:25px;
    position:absolute;
    cursor:pointer;
    transition: opacity .25s, top .25s, transform .25s;
    transform-origin: center left;
}

.bar:nth-of-type(1){
    top:0;
}
.bar:nth-of-type(2){
    top:10px;
}
.bar:nth-of-type(3){
    top:20px;
}

.cross .bar:nth-of-type(1){
    transform: rotatez(45deg);
    width: 28px;
}
.cross .bar:nth-of-type(2){
    display:none;
}
.cross .bar:nth-of-type(3){
    transform: rotatez(-45deg);
    width: 28px;
}


.row{
    display:flex;
    justify-content:space-between;
}
.row .stage{
    width:15%;
}
.row .desc{
    padding:0 10px;
    width(calc(70% - 40px));
    text-align:center;
}
.row .duration{
    width:15%;
}

.project-info{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}
.info-item{
    height: 400px;
    width: 460px;
    background: blue;
    margin: 20px;
    max-width:100%;
    background-size: cover !important;
    position:relative;
    border: solid 1px black;
}
.info-item::after{
    color: white;
    background: #000;
    bottom: 0;
    font-weight:bold;
    height: 35px;
    padding-top: 15px;
    padding-left: 15px;
    position: absolute;
    width: calc(100% - 15px);
}


.area{
    background:url(/media/4ryg0fi2/bantry.jpg);
}
.area::after{
    content: "Project Area";
}
.env{
    background:url(/media/xfxdj103/20220331_114916.jpg);
}
.env::after{
    content: "Environmental Assessment";
}
.docs{
    background:url(/media/55ie4o4j/dsc_0476.jpg);
}
.docs::after{
    content: "Project Documents";
}
.eng{
    background:url(/media/md1gkaai/dsc_0482.jpg);
}
.eng::after{
    content: "Public and Stakeholder Engagement";
}
.time{
    background:url(/media/dkvc3gar/calendar.png);
}
.time::after{
    content: "Timeframe";
}
.bg{
    background:url(/media/4sfpb0iy/img-20201020-wa0011.jpg);
}
.bg::after{
    content: "Background Information";
}