html {
height:100%;
font-size:18px;
}
body {
margin: 0em auto 0em auto;
height:100%;
background-color: #F8F7E1;
}
a:link {
color:#303030;
}
a:visited {
color:#303030;
}
a.black:link {
color:#333;
text-decoration:none;
}
a.black:visited {
color:#333;
text-decoration:none;
}
a.redlink:link {
color:#E00000;
}
a.redlink:visited {
color:#E00000;
}
a.button {
background: #222;
padding: 1rem;
margin: 2rem 0;
color: #5ac1ff;
display: block;
width: fit-content;
}
#main {
width:100%;
}
#topnav {
width:100%;
height:130px;
background-color:#666;
box-sizing:border-box;
}
#about {
margin:8rem auto 4rem;
max-width: 1000px;
padding: 0 5%;
}
.projectType {
margin:0 auto;
max-width: 1000px;
}
.block:nth-of-type(even) {
background:#F8F7E1;
}
h1, h3, h4 {
font-family: "quatro-slab", serif;
color:#333;
font-weight:300;
line-height: 1;
}
h1 {
margin-bottom:2rem;
line-height: 1.5;
}
h3, h4 {
font-size:4rem;
width:100%;
text-align: center;
font-family: "bistro-script-web";
text-transform: lowercase;
padding-top:3rem;
margin:0;
padding-bottom: 2rem;
}
.block:nth-child(5) h3 {
padding-bottom: 0;
}
h4 {
font-size:2rem;
padding:0;
padding-bottom:2rem;
}
p {
font-size:1.2rem;
color:#333;
font-family: "museo-sans", serif;
line-height:1.5;
}
ul {
margin:0;
padding:0 10%;
}
li {
font-size:1.2rem;
color:#333;
font-family: "museo-sans", serif;
line-height:1.5;
}
#about li {
margin-bottom:0.8rem;
}
.topnavLink {
position:absolute;
top:0%;
left:0%;
width:180px;
height:150px;
}
.topnavLinkLong{
position:absolute;
top:0;
right:-1.5rem;
width:220px;
text-align:center;
color: #fff !important;
}
.wireframe {
position: absolute;
right:2%;
bottom:0;
display:none;
}
#topnav {
padding-left:5%;
display: flex;
align-items: center;
}
#topnav a{
color:#f4edd3;
margin-right:3rem;
line-height:1;
background:none;
font-size:3.5rem;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
transition: transform 0.2s;
display:inline-block;
}
.block {
position: relative
}
#topnav a:hover{
color:#33BAE8;
transform: scale(1.25);
}
#topnav a:first-of-type:hover {
color:#FBCE3C;
}
.link2{
color:#f4edd3;
left:14rem;
padding-left:1.5rem;
text-align:left;
font-size:40px;
text-decoration:none;
line-height:2em;
text-shadow: 1px 1px 1px #000;
}
.link3{
padding-top:25px;
color:#303030;
font-size:20px;
text-decoration:none;
}
/*
.link2:hover{
background:#33BAE8;
color:#fff ;
text-shadow: none;
cursor:pointer;
}
*/
.large{
font-size:40px;
}
.lower {
position:absolute;
right: 0%;
width:400%;
min-height:28%;
float:left;
height:100%;
/* W3C */
transition-property:right;
transition-duration:2s;
/* Firefox 4 */
-moz-transition-property:right;
-moz-transition-duration:2s;
/* Safari and Chrome */
-webkit-transition-property:right;
-webkit-transition-duration:2s;
/* Opera */
-o-transition-property:right;
-o-transition-duration:2s;
}
.panel1 {
right: 0%;
height:186px;
}
.panel2 {
right: -100%;
height:100%;
}
.panel3 {
right: -200%;
height:186px;
}
.panel4 {
right: -300%;
height:186px;
}
#panel2 {
position:relative;
width:25%;
height:100%;
float:right;
border-top:8px solid #FBCE3C;
margin-top:10px;
}
#panel3 {
position:relative;
width:25%;
height:100%;
float:right;
border-top:8px solid #33BAE8;
margin-top:10px;
}
#panel4 {
width:25%;
height:100%;
float:right;
}
.flex {
display: flex;
justify-content: space-around;
}
.flex div {
flex: 1;
}
.thumbnailContainer {
white-space: wrap;
letter-spacing: 0em;
position:relative;
vertical-align:bottom;
background: #5ac1ff;
/* background:#f3f1cf; */
/* padding:6rem 3rem; */
/* border-bottom:1px solid #333; */
}
.thumbnailContainer p{
padding:0 5%;
}
.thumbnailContainerInner {
padding:2rem 5% 5rem 5%;
display:flex;
justify-content: center;
flex-wrap: wrap;
}
.bottomBorder {
border-bottom:3px solid #F8F7E1;
}
.bottomBorder:after {
background:#ddd;
content:"";
height:2vw;
position:absolute;
top:100%;
left:0;
right:0;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
.thumbnail {
position:relative;
margin:0.25rem;
width: 100%;
max-width:300px;
background-color:#CCC;
display: inline-block;
letter-spacing: normal;
text-align: normal;
vertical-align: middle;
border:20px solid #222 ;
/* clip-path: circle(20.0% at 50% 50%);
transition: clip-path 2s; */
}
.bigthumbnail {
position:relative;
margin:0.25rem;
width: 100%;
max-width: 1200px;
background-color:#CCC;
display: inline-block;
letter-spacing: normal;
text-align: normal;
vertical-align: middle;
border:20px solid #222 ;
}
.animation-element {
opacity: 0;
position: relative;
}
/*
.thumbnail:hover {
clip-path: circle(100.0% at 50% 50%);
} */
.thumbnail img {
width:100%;
}
h2 {
display: none;
width:max-content;
background-color:#FBCE3C;
font-size:3em;
font-family:"bistro-script-web";
padding:0 3rem 0.5rem 1rem;
margin:0 0 3rem 0;
text-align:left;
color:#333;
border-bottom-right-radius: 50px;
}
.divider {
/* border-top:8px solid #FBCE3C; */
width:100%;
display: block;
}
.expandBtn2 {
}
.expand2 {
overflow:hidden;
height:95vh;
}
.expand {
overflow:hidden;
height:95vh;
}
.contract {
overflow:hidden;
height:100%;
}
.tools {
position:absolute;
right:0%;
top:-18%;
z-index:5;
display: none;
}
.yellowBG{
background-color:#FBCE3C;
}
.blueBG{
background-color:#33BAE8;
}
.redBG{
background-color:#FF4D4D;
}
.red {
color:#FF4D4D;
}
.blueLine {
border-top:8px solid #33BAE8;
}
#form {
position: relative;
margin-left:35%;
margin-top:2%;
float:left;
visibility:hidden;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
input {
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px;
border: 0 none;
box-shadow: 5px #999999 inset;
display: block;
float: left;
font-size: 13px;
height: 27px;
margin: 0;
padding: 3px 3px 3px 20px;
width: 270px;
background-color:#e9e9e9;
}
textarea {
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px;
border: 0 none;
box-shadow: 5px #999999 inset;
display: block;
float: left;
font-size: 13px;
height: 80px;
margin: 0;
padding: 3px 3px 3px 20px;
width: 270px;
background-color:#e9e9e9;
}
.form_label {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
}
.form_btn {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#fff;
background-color:#6e6e6e;
width:140px;
margin:2px 5px 0px 2px;
padding:0;
}
.form_btn:hover {
background-color:#8a8a8a;
cursor:pointer;
}
@media screen and (max-device-width: 700px) {
/*
.thumbnailContainerInner {
padding:0 10%;
}
*/
#about {
margin: 3rem auto 4rem
}
h1 { line-height: 1.5 }
.flex {
flex-direction: column
}
#topnav a {
margin-right: 1rem;
font-size:2.5rem;
}
}