* {
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    background-color: #C1C8E4;
}

/*header > nav {
    display: inline-block;
    height: 100px;
    width:1080px;
    overflow: hidden;
}*/
header img {  
    float: left;
    margin: 0px;
    height: 50px;
}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: black;
    padding-left: 20px;
}

h2 {
    font-size: 20px;
}

header h1 {
    float: left;
    line-height: 60px;
    height: 60px;
    font-size: 35px;
}

header ul {
    display: inline-block;
    height: 40px;
    line-height: 60px;
    margin: auto 0;
    margin-right: 10px;
    overflow: hidden;
    position: absolute; 
    top: 0;
    right: 0;
    /* box-shadow: 0 0 15px 10px rgb(170, 194, 206); */
}

header ul > li {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    float:left;
    margin: auto 0;
    Line-height: 60px;
    height: 60px;
    font-size: 15px;
    border-right: 1px solid black
}

header a {
    display:inline-block;
    padding: 0 10px;
    height:60px;
}

.stickyHeader + .scroll{
    padding-top: 80px;
}

.stickyHeader{
    position:fixed;
    width: 100%;
    height:50px;
    margin: 0; 
    margin-top: 0;
    background-color: rgb(170, 194, 206);
    box-shadow: 0 0 10px 5px #67AAF9;
}

#canvas {
    box-shadow: 0 0 20px 5px#67AAF9;
}

#flex-grid {
    box-shadow: 0 0 20px 5px #67AAF9;
}

main {
    margin-top:0px;
    margin-bottom:20px; 
    margin-left: auto;
    margin-right: auto;
    width:960px;
    align-content: center;
}

main.scroll {
    margin-top:0px;
    margin-bottom:0px; 
    margin-left: auto;
    margin-right: auto;
    width:960px;
    align-content: center;
}

#img1 {
    width: 200px;
}

a {
    background-color: rgb(170, 194, 206);
    box-shadow: 5px rgb(170, 194, 206);
    color: black;
    position: relative;
    text-decoration: none;
}

a:hover {
    background-color: rgb(170, 194, 206);
}
main a{
    margin-top:0px
}

article img{
    float: right;
    margin-right:20px;
    margin-left:20px;
    margin-top:20px;
    margin-bottom:20px;  
} 

#about{
    /* margin-left: 10px; */
    width: 960px;
    font-family: "Palatino"
}

p {
    margin:20px;
} 

.bio {
    float: left;
    margin-top: 75px;
    margin-bottom: auto;
    font-family: "Palatino"
}

.box{
    display: flex;

} 

#images{
    float: right;
}

#JohnBavendam{
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 15px solid #67AAF9;
    padding: 10px;
}

#JerodRubalcava{
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 15px solid #67AAF9;
    padding: 10px;
}

#JessieVanVolkinburg{
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 15px solid #67AAF9;
    padding: 10px;
}

#JessicaZuchowski{
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 15px solid #67AAF9;
    padding: 10px;
}

#flex-grid{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.col1{
    flex:1; 
}

.col2{
    flex:2; 
}

.col3{
    flex:3; 
}

#reset_button{
    -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#67AAF9;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #67AAF9;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
    text-decoration:none;
    margin: 5px;
}

#save_button{
     -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#67AAF9;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #67AAF9;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
    text-decoration:none;
    margin: 5px;
    margin-top: 0;
    margin-bottom: 20px;
}

 .button {
    /* -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    background-color: #904C77;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px; */

    -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color:#67AAF9;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #67AAF9;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
    text-decoration:none;
    margin: 0px 5px;
 }

.btn {
    /* background-color: #904C77;
    border: none;
    color :white;
    padding: 2px 9px;
    cursor: pointer;
    font-size: 20px;
    margin-top:20px;
    margin-right:30px;
    margin-bottom: 20px;
    text-align: center;
    width: 100px;
    height: 26px;
    overflow: hidden; */
    -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c));
	background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0);
	background-color: #67AAF9;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #67AAF9;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:11px 23px;
    text-decoration:none;
    margin: 0px;
    margin-bottom: 20px;
}

footer {
    width: 960px;
    height:60px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    height: 40px;
    background-color: rgb(170, 194, 206);
    box-shadow: 0 0 10px 5px #67AAF9
}

footer img {
    float: right;
    margin-top: 5px;
    margin-right: 5px;
    margin: 0px;
    height: 40px;
}

#flex-grid canvas{
    width: 320px;
    height: 320px;
    padding: 15px;
    padding-bottom: 0;
}

#JohnBavendam {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#JohnBavendam img {
    border: 5px solid #f8f8f8;
    display: block;
}
#JohnBavendam:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
#JohnBavendam:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}



#JerodRubalcava {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#JerodRubalcava img {
    border: 5px solid #f8f8f8;
    display: block;
}
.JerodRubalcava:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.JerodRubalcava:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}


#JessieVanVolkinburg {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#JessieVanVolkinburg img {
    border: 5px solid #f8f8f8;
    display: block;
}
#JessieVanVolkinburg:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
#JessieVanVolkinburg:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}


#JessicaZuchowski {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#JessicaZuchowski img {
    border: 5px solid #f8f8f8;
    display: block;
}
#JessicaZuchowski:after{
    content: '';
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.JessicaZuchowski:before{
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

.preload {
    visibility: hidden;
    width: 0px;
    height: 0px;
}