/* ---------------------- LIBRA AUSTRALIA PROJECTS CSS ---------------------- */

/* -------- Project Title -------- */

#project-title {
	width: 100%; height: 600px; display: inline-block; background-size: cover;
    background-repeat: no-repeat; background-position: center;
	background-image: url(services01_[Brightened].jpg); position: relative;
}
#project-title::before {
	width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);
	display: inline-block; position: absolute; content: "";
}

.promo {
	width: 450px; margin: 200px 0 0; padding: 40px 150px 40px 100px;
	background: rgba(0,0,0,.5); color: white; text-align: left; transition: .5s;
}
.promo h1 {
	font-size: 28pt; transition: .5s; line-height: 130%;
}


/* ---------------------- Projects ---------------------- */

#projects {
	width: 1300px; margin: 60px calc(50% - 650px);
	position: relative; z-index: 1;
}
#projects li {
	width: calc(25% - 30px); margin: 15px; float: left;
}

#projects li a {
	font-size: 14px; padding: 15px 25px; background-color: gainsboro; display: block;
}



#projects li span {
	display: inline-block; position: relative;
}

#projects li span img {
	width: 100%;
}

#projects li span::before {
	content: ""; width: 100%; height: 100%; position: absolute; right: 0;
	bottom: 0; transition: .3s; background-color: rgba(0,0,0,0.5); opacity: 0; z-index: 2;
}
#projects li span b {
	width: 100%; text-align: center; font-family: opensans-light; font-size: 20pt;
	font-weight: 400; color: white; position: absolute; top: 50%; left: 0; 
	display: block; opacity: 0; z-index: 3; transition: .3s;
}
    
#projects li span:hover::before {
	cursor: pointer; opacity: 1;
}
#projects li span:hover b {
	opacity: 1;
}


.project-heading {
	transition: .3s;
}
#projects li span:hover ~ .project-heading {
	color: #d6ab60;
}

/* -------- Highlight Project -------- */

#highlight-project {
	width: 100%; height: 100vh; background-color: rgba(0,0,0,.7); position: fixed;
	top: 25px; left: 0; opacity: 0; z-index: 2; display: none; transition: .3s;
}


/* -------- Project Box -------- */

#project-box {
	width: 1300px; height: calc(100% - 100px); margin: 50px calc(50% - 650px);
    position: relative; background-color: white; transition: .3s; overflow-x: hidden;
}
#project-box i {
    padding: 15px; font-family: fivosans-bold; color: rgb(192,38,44); font-size: 36pt;
	font-style: normal; position: absolute; top: 10px; right: 30px; transition: .3s;
}
#project-box i:hover {
	cursor: pointer; text-shadow: 0px 0px 10px rgb(192 38 44);
}


#project-box h1 {
	padding: 25px 50px 25px 25px; position: absolute; top: 0;
	color: black; background: gainsboro;
}


/* -------- Project -------- */

.projects div {
	margin: 130px 50px 25px 50px;
}
.projects div b {
	margin: 15px 0; font-size: 16px; font-family: opensans-regular;
	font-weight: 400; display: block;
}
.projects div em {
	margin: 10px 10px 10px 0; padding: 10px 25px; font-family: opensans-regular;
	font-style: normal; background-color: gainsboro; display: inline-block;
}

.projects div h2 {
	margin: 10px 0; font-size: 16px; text-transform: uppercase;
}

.img-container {
	width: 100%; margin: 15px 0; display: inline-block; text-align: center;
}
.img-container img {
	height: 400px; padding: 15px; background-color: white;
	box-shadow: 5px 5px 15px rgb(0 0 0 / 50%);
}


.img-opts {
	width: 100%; margin: 20px 0; display: inline-block; text-align: center;
}
.img-opts img {
	width: 90px; height: 70px; margin: 0 15px; padding: 5px;
	object-fit: cover; box-shadow: 2px 2px 5px rgb(0 0 0 / 50%); transition: .3s;
}
.img-opts img:hover {
	cursor: pointer; transform: scale(1.1);
}



/* --------------------------- Medium sized screens -------------------------- */

@media screen and (max-width:1680px){
	

/* -------- Highlight -------- */


}


/* --------------------------- 1440 sized screens -------------------------- */

@media screen and (max-width:1440px){
	
}


/* --------------------------- Smaller Desktop Support (1366 x 768) -------------------------- */

@media screen and (max-width:1366px){
	

}


/* --------------------------- 1080p Laptop 150% Scale screens -------------------------- */

@media screen and (max-width:1300px){

}

/* --------------------------- Large Tablet sized screens -------------------------- */

@media screen and (max-width:1080px){


}


/* --------------------------- Smaller Tablet sized screens -------------------------- */

@media screen and (max-width:900px){

/* -------- Highlight -------- */


}


/* --------------------------- Mobile sized screens -------------------------- */

@media screen and (max-width:640px){

#project-title {
	height: 400px;
}

/* -------- Promo -------- */
.promo {
	width: calc(100vw - 65px); margin: 150px 0 0;
    padding: 15px 10px 25px 25px;
}
.promo h1 {
	margin: 0 0 20px; font-size: 22pt;
}
.promo p {
	font-size: 14pt;
}


/* -------- Projects -------- */

#projects {
	width: calc(100vw - 30px); margin: 20px 15px;
}
#projects li {
	width: calc(50% - 10px); margin: 5px;
}
#projects li a {
	height: 50px; font-size: 13px; text-align: center;
}


/* -------- Projects -------- */

#project-box {
	width: 95vw; margin: 25px 2.5vw;
}
#project-box h1 {
	max-width: 65vw; padding: 20px 15px; font-size: 18pt;
}

.projects div {
    margin: 110px 20px 25px 20px;
}

.img-container img {
	width: calc(100% - 20px); height: auto; min-height: 250px;
    padding: 10px; object-fit: cover;
}

}

/* --------------------------- Small Mobile sized screens -------------------------- */

@media screen and (max-width:360px){

}


@keyframes fade-slide {
	from {left: -10%; opacity: 0;} to {left: 0px; opacity: 1;}
}

@keyframes fade-text {
	from {opacity: 0;} to {opacity: 1;}
}

@keyframes fade-fall {
	0%{top: -50; opacity: 0;} 20%{top: -75; opacity: 1;} 40%{top: -50; opacity: 1;}
	60%{top: -75; opacity: 1;} 100%{top: 0px; opacity: 1;}
}

@keyframes expand-services {
	0%{transform: scale(1);} 15%{transform: scale(1);} 50%{transform: scale(1.1);}
	65%{transform: scale(1.1);} 100%{transform: scale(1);}
}