.background1 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("rubybeach.jpg");
	background-position: center top;
	background-attachment:fixed;
}

.background2 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("lake.jpg");
	background-position: center top;
	background-attachment:fixed;
}

.background3 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("hamershlag.jpg");
	background-position: center top;
	background-attachment:fixed;
}

.background4 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("seattle.jpg");
	background-position: center top;
	background-attachment:fixed;
}

.background5 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("sf.jpg");
	background-position: center top;
	background-attachment:fixed;
}

.background6 {
	background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("cmu.jpg");
	background-position: center top;
	background-attachment:fixed;
}

#overlay {
    margin: 0 auto;
    text-align:center;
    float: none;
    padding-top:30vh;
}


a:hover {
    color: #DCDCDC;

}

a {
    text-decoration:none;
    color: #000;
    /*transition-property: color;
  transition-duration: 0.5s;
  transition-timing-function: linear;*/

    
}

a.active{
  color: #DCDCDC;
}
/*
#portfolio li {
    text-align:center;
    text-decoration: none;
        padding-bottom:30px;
    list-style:none;
    width:70%;
    margin: 0 auto;
    text-justify:auto;
}

*/
img {
    margin-top: 5vh;
    margin-bottom:5vh;
}

.bodywrapper a {
    animation: pulse 3s infinite;
}
/* 
div.navbar {
    position: fixed;
    width:100%;
    top: 0;
}

div.navbar ul {

    list-style-type: none;
    text-align: center;
    margin: 0;
    min-height:50px;
    padding: 10px 0 10px 0;
    overflow: hidden;
    background-color: #f3f3f3;
} */

/* div.navbar li {
    float: none;
    display: inline-block;
}

div.navbar li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

div.navbar li a:hover:not(.active) {
    background-color: #ddd;
}

div.navbar li a.active {
    color: white;
    background-color: #4CAF50;
} */

body{
    font-family: 'Lato', 'Gill Sans', 'Gill Sans MT', sans-serif;
    color:#fff;
    font-size: 15px;
    font-weight: normal;
    padding: 0;
    margin: 0 auto;
}

.bodywrapper {
    margin: 0 auto;
    max-width: 60%;
}

.webheader {
    /* padding:60vh; */
    min-height: 100vh;
    text-align:center;
}

.webheader div {
    /* bottom:0; */
    position:absolute;
    text-align:center;
    margin:0 auto;
    left:0;
    right:0;
    top:40vh;
}

.webheader p {
    /* padding:2vh; */
    bottom:10vh;
}

li {
    text-align: left;
}

h1 {
    /* margin:0px; */
    text-align: center;
    font-weight: normal;
    font-size: 40px;
}

h2{
    /* margin:0px; */
    text-align: center;
    font-size:25px;
        font-weight: normal;
}

h3 {
  /* margin:0px; */
  padding:20px 0px;
  text-align: center;
  font-size: 18px;
  padding-bottom: 20px;
  font-weight: normal;
}

#experience h3, #about h3 {
  padding-bottom:0px;
  font-size:16px;
  /*font-weight:normal;*/
}

#portfolio h3 {
  font-size:18px;
  padding-bottom:0px;
}

div.reglist2 h3 {
    margin:8px;
}

div.reglist2 h4 {
    margin:8px;
}

div.reglist2 h5 {
    margin:8px;
}

div.reglist li {
    padding-bottom:10px;
    display:block;
}

div.reglist2 li {
    list-style: none;
    margin:40px;
}

div.description{
    text-align:center;
    display:none;
}


/*div.reglist h3, div.reglist h4, div.reglist h5 {
  text-align:left;
}*/

h4 {
  /*margin-top:4px;*/
  font-size:14px;
  font-weight:normal;
  text-align:center;
  color: #DCDCDC;
  text-transform: uppercase;
 /* margin-bottom:3px;
  padding-bottom:2px;*/
}

h5 {
  margin-top:5px;
  font-weight:normal;
  text-align:center;
  font-size:16px;
}


.img-circle {
      transition-property: background;
  transition-duration: 0.5s;
  transition-timing-function: linear;
    border-radius: 50%;
}

.img-norm {
      transition-property: background!important;
  transition-duration: 0.5s!important;
  transition-timing-function: linear!important;
    /*border-radius: 50%;*/
}



div.circlist img {
    float: none;
    margin: auto;
    border-radius: 50%;
    width: 70%;
    height:70%;
        border: 5px solid #f3f3f3;
        transition-property: border;
  transition-duration: 0.5s;
  transition-timing-function: linear;

}


.choice {
    text-align:center;
}

.choice h2 a{
    
}

.choice a:hover{
    -webkit-animation: none;
    animation: none;    
}

div.circlist img:hover{
    border: 5px solid #b3b3b3;

}

div.circlist {
    padding-left: 1%;

}
div.circlist li {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 23%;
    vertical-align:top;
    padding-left:3%;
    padding-right: 3%;
    padding-bottom: 5%;
    padding-top: 5%;
}

div.circlist2 li {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 32%;
    vertical-align:top;
    padding-left:0.5%;
    padding-right: 0.5%;
    padding-bottom: 5%;
    padding-top: 5%;
}


div.reglist {
    list-style: none;
}

footer {
    background-color: rgba(39, 39, 39, 0.4);
    text-align: center;
    padding: 20px;
    font-size: 15px;
    margin: 0 auto;

}

@media screen and (max-width:520px) {
    .bodywrapper {
        max-width:80%;
    }

    .background1:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("rubybeach.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position:  center center;
        z-index: -20;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .background2:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("lake.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        z-index: -20;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .background3:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("hamershlag.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        z-index: -20;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .background4:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("seattle.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        z-index: -20;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .background5:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("sf.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        z-index: -10;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .background6:before {
        background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("cmu.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
        z-index: -20;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    body{
        font-size: 10px;
        font-weight: lighter;
        padding: 0;
        margin: 0 auto;
    }

    h1 {
        font-size:30px;
    }

    h2 {
        font-size:20px;
    }

    h3 {
        font-size:15px;
    }

    div.circlist li {
        display: inline-block;
        text-align: center;
        margin: 0 auto;
        width: 80%;
        padding-bottom: 5%;
        padding-top: 5%;
    }
        div.circlist {
        padding-left: 0%;
        width:80%;
        text-align:center;
        margin: 0 auto;
    }
    div.webheader img {
        width:70%;
    }

    img {
        max-width:80%;
    }

    #overlay img {
        width: 30%;
        height:30%;
        margin-left:15%;
    }

    .webheader div 
    {
        top:30vh;
    }
    
}

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

    body{
        font-size: 10px;
        font-weight: normal;
        padding: 0;
        margin: 0 auto;
    }

    h1 {
        font-size:30px;
    }

    h2 {
        font-size:20px;
    }

    h3 {
        font-size:15px;
    }

    div.circlist li {
        display: inline-block;
        text-align: center;
        margin: 0 auto;
        width: 70%;
        padding-bottom: 5%;
        padding-top: 5%;
    }
        div.circlist {
        padding-left: 0%;
        width:65%;
        text-align:center;
        margin: 0 auto;
    }
    div.webheader img {
        width:60%;
    }

}


@keyframes pulse {
    0%,100%{
        color: #fff;
    }
    50% {
        color: #666666;
    }

}

@keyframes pulse1 {
    0%,100%{
        color: #666666;
    }
    15% {
        color: #fff;
    }
    75%{
        color: #fff;
    }

}

@keyframes pulse2 {
    0%,100%{
        color: #666666;
    }
    40% {
        color: #fff;
    }
    75%{
        color: #fff;
    }

}

@keyframes pulse3 {
    0%,100%{
        color: #666666;
    }
    65% {
        color: #fff;
    }
    75%{
        color: #fff;
    }

}