*{
padding: 0px;
margin: 0px;
}
html{
width:100%;
height:100%;
}
body{
font-family: 'Lora', serif;
background-color: #FBFCFC;
width: 100%;
height: 100%;
}
/*
h1{
position: relative;
text-align: left;
margin-left: 50px;
top: -95vh;
color: white;
line-height: 30px;
}
*/
#landing{
background-image: url(images/Newtown_Landing_c3.jpg);
background-color: #494646;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-attachment: fixed;
}
#shader{
width: 100%;
height: 100%;
background-color: #636363;
opacity: .4;
position:absolute;
}
/*
#curtain {
position:fixed;
height: 100%;
width: 100%;
background-color: #C5DADD;
animation-name: raiseCurtain;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
*/
#landing-text{
width: 100%;
margin: auto;
color: white;
font-size: 32px;
text-align: center;
position: absolute;
top: 40%;
}
h1{
margin-top: 80px;
/* opacity: 0;*/
letter-spacing: 10px;
font-size: 48px;
font-weight: normal;
/*
animation-name: fadeIn;
animation-duration: .75s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
*/
}
h2 {
font-weight: normal;
font-size: 40px;
text-align: center;
color: white;
letter-spacing: 10px;
line-height: 150px;
}
#logo{
align-content: center;
position: absolute;
left: calc(50% - 64px);
/* top: calc(50% - 128px); */
top: calc(40% - 80px);
display: block;
z-index: 0;
/*
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
*/
}
button{
/* opacity: 0;*/
position: relative;
/*
animation-name: fadeIn;
animation-duration: .5s;
animation-delay: 1.75s;
animation-fill-mode: forwards;
*/
top: 150px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: white;
padding: 10px 20px;
background-color: transparent;
border-width: 2px;
border-color: white;
border-style: solid;
transition: 0.25s;
cursor: pointer;
}
button:focus{
outline: none;
}
button:hover{
background-color: whitesmoke;
color: gray;
}
h3{
font-family: 'Open Sans', sans-serif;
font-weight: normal;
text-align: center;
margin-top: 40px;
font-size: 26px;
}
h4{
font-family: 'Open Sans', sans-serif;
font-weight: normal;
text-align: center;
margin-top: 40px;
font-size: 16px;
}
#intro{
padding: 0px 40px;
margin: 0px auto;
height: 220px;
max-width: 680px;
}
#press{
width: 100%;
}
#ctcg_wrapper{
line-height: 150px;
height: 100px;
text-align: center;
width:50%;
float: left;
margin: 0px auto;
}
#neh_wrapper{
height: 100px;
line-height: 160px;
text-align: center;
width:50%;
float: left;
margin: 0px auto;
}
.project_header {
margin-top: 100px;
width: 100%;
background-color: #494646;
min-height: 150px;
}
#portfolio {
margin-top: 40px;
}
#baldPeak {
line-height: 75px;
}
/*
.project_header{
--break-height: 150px;
width: 100%;
height: var(--break-height);
background-color: #494646;
text-align: center;
color: white;
font-size: 40px;
line-height: var(--break-height);
letter-spacing: 16px;
}
*/
.project{
/* height: 1500px;*/
width: 100%;
z-index: 0;
height: auto;
overflow: hidden;
}
.project img{
object-fit: cover;
display:block;
margin: 0px auto;
width: 400px;
height: 500px;
transition: width .5s, height .5s;
}
.project img:hover{
cursor: pointer;
width: 410px;
height: 510px;
}
.left{
width: 50%;
float: left;
}
.left img{
margin-top: 100px;
margin-right: 30px;
}
.right{
width: 50%;
margin-top: 200px;
float: left;
}
.right img{
margin-top: 100px;
margin-left: 30px;
}
footer{
width: 100%;
height: 250px;
color: #626567;
background-color: whitesmoke;
}
#container{
text-align: center;
width: 90%;
margin: 0px auto;
}
footer h3{
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-top: 20px;
text-align: center;
color: #626567;
font-weight: normal;
}
footer h3::before{
content: "";
display: inline-block;
height: 1px;
width: 50px;
background-color: #626567;
vertical-align: middle;
margin-right: 10px;
}
footer h3::after{
content: "";
display: inline-block;
height: 1px;
width: 50px;
background-color: #626567;
vertical-align: middle;
margin-left: 10px;
}
#address{
padding-top: 30px;
height: 150px;
width: 33%;
float: left;
}
#email{
padding-top: 30px;
height: 150px;
width: 33%;
float: left;
}
#third{
padding-top: 30px;
height: 150px;
width: 33%;
float: left;
}
footer h4{
font-weight: normal;
margin: 10px;
}
#icons{
max-width: 400px;
margin: 0px auto;
}
#icons{
color: #626567;
font-size: 32px;
text-align: center;
position: relative;
top: -60px;
height: 64px;
}
#icons i{
color: #626567;
transition: .3s;
}
#icons i:hover{
color:orange;
}
#credit{
width: 100%;
font-family: 'Open Sans', sans-serif;
}
#credit p{
font-size: 14px;
text-align: center;
width: 100%;
color: #626567;
background-color: whitesmoke;
padding-bottom: 20px;
}
#credit a{
color: black;
text-decoration: none;
}
#credit i{
color: red;
}
#Modal{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
animation-duration: .5s;
animation-name: fadeIn;
}
#email a{
color: #626567;
}
#Modal-Image{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
max-width: 700px;
max-height: 600px;
z-index: 2;
}
.closeButton {
position: absolute;
color: white;
top: 50px;
left: 50px;
font-size: 32px;
}
.closeButton:hover {
cursor: pointer;
}
@media screen and (max-width: 800px){
.project{
height: 2200px;
}
#landing{
background-attachment: scroll;
}
.left{
width: 100%;
float: none;
}
.right{
width: 100%;
margin-top: 0px;
float: none;
}
.left img{
margin: 40px auto;
}
.right img{
margin: 40px auto;
}
footer h4{
font-size: 12px;
}
h2 {
font-size: 32px;
}
#credit p{
font-size: 10px;
}
}
@media screen and (max-width:650px){
h2{
font-size: 24px;
}
#press{
display: none;
}
button{
display: none;
}
}
/*--- MOBILE ---*/
@media screen and (max-width: 430px){
#intro{
margin-bottom: 20px;
}
.project{
height: 1660px;
}
.project_header {
height: 100px;
}
#baldPeak {
line-height: 50px;
}
h2{
font-size: 20px;
letter-spacing: 8px;
line-height: 100px;
}
.project img{
width: 300px;
height: 375px;
}
.project img:hover{
width: 300px;
height: 375px;
}
footer h4{
font-size: 12px;
margin: 10px 0px;
}
footer{
height: 300px;
}
#container{
height: 250px;
margin: 0px auto;
width: 100%;
}
#address{
padding-top: 10px;
height: 50px;
/* width: 300px; */
width: 100%;
float: none;
}
#email{
text-align: center;
padding-top: 10px;
height: 50px;
/* width: 300px; */
width: 100%;
float: none;
}
#third{
padding-top: 10px;
height: 50px;
/* width: 300px; */
width: 100%;
float: none;
}
}
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes zoomHover{
from{width:400px;
height:500px;}
to{width:410px;
height:510px;}
}
@keyframes slideOut{
from{transform: translateY(0px);
opacity: 1;}
to{transform: translateY(100px);
opacity: 0;}
}
@keyframes slideIn{
from{transform: translateY(-100px);
opacity: 0;}
to{transform: translateY(0px);
opacity: 1;}
}
@keyframes raiseCurtain {
from{transform: translateY(0);}
to{transform: translateY(-100%);}
}
@keyframes spin {
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}