#myname {
    font-family: 'Roboto', 'sans-serif';
    font-weight: 500;
    color: white;
    text-align: center;
    font-size: 50px;
    margin-bottom: 0;
    margin-top: 10px;
    letter-spacing: 12px;
    
}

@-webkit-keyframes color {
  0% { background-color: rgba(255, 255, 255, 0); }
  50% { background-color: rgba(255, 255, 255, .2); }
100% { background-color: rgba(255, 255, 255, 0); }
}

@keyframes color {
  0% { background-color: rgba(255, 255, 255, 0); }
  50% { background-color: rgba(255, 255, 255, .2); }
100% { background-color: rgba(255, 255, 255, 0); }
}

#name.animation {
/* border-style: solid;*/
 border-width: 3px;
    transition: all .5s;
    box-sizing: border-box;
  margin-left: auto;
    margin-right: auto;
    width: 80%;
    
    
border: 1px solid rgba(255, 255, 255, 0);
border-radius:3px;

    
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
/*  outline: 1px solid;*/
  outline-color: rgba(0, 0, 0, 1);
  outline-offset: 0px;
  text-shadow: none;
  transition: all .5s;
  -webkit-animation-name: color;
  -webkit-animation-duration: 2s;
   -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-name: color;
  animation-duration: 2s;
 animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    
    
}




/*
#name:hover {
 border-style: solid;
 border-width: 3px;
    transition: all .5s;
    box-sizing: border-box;
  margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 85%;
    background-color: rgba(255, 255, 255, .3);

  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  
    
}
*/


#name.up {
 transition: all .5s;
    border-color: transparent;
    margin-bottom: 20px;
    outline-color: rgba(0, 0, 0, 0);
    -webkit-animation-name: none;
    -webkit-animation-duration: 0s;
   }

nav a{
    text-decoration: none; 
    color: black;
    
border: 1px solid rgba(255, 255, 255, 0);
border-radius:3px;

    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
    font-size: 40px;
    margin: auto;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 35px;
    padding-right: 35px;
    background-color: rgba(255, 255, 255, .3);
    transition: .5s;
    
}

nav a:hover{
    text-decoration: none; 
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
    font-size: 40px;
    margin: auto;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 35px;
    padding-right: 35px;
    background-color: rgba(255, 255, 255, .5);
    transition: .5s;
    
}

#activepage{
 font-weight: 500;   
}

nav{
   
    list-style:none;
    width: 100%;
    text-align:center;
    margin-bottom: 20px;
    
}


nav li{
    display: inline-block;
    width: 33%;
    
}

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#name.up:hover {
 transition: all .5s;
    border-color: transparent;
    margin-bottom: 20px;
    outline-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0);
}

#maininfo{
  
    margin-top: 300px;
    transition: all .5s;
    
   
}

#maininfo a{
  
   
    text-decoration: none;
    
}

@-webkit-keyframes none {
  0% { background-color: rgba(255, 255, 255, 0); }
  
100% { background-color: rgba(255, 255, 255, 0); }
}

@keyframes none {
  0% { background-color: rgba(255, 255, 255, 0); }
  
100% { background-color: rgba(255, 255, 255, 0); }
}

#maininfo.up{
  
    margin-top: inherit;
    transition: all .5s;
    animation-name: none;
    animation-duration: 0s;
    
}



#maintitle{
 cursor: pointer; 
 }

#contact{
 cursor: pointer;   
}

#profession {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: white;
    text-align: center;
    font-size: 25px;
    margin-top: 0;
    margin-bottom: 30px;
}

#contact {
    text-align: center;
    margin-top: 0;
    padding-top: 0;
    font-weight: 500;
}

.contactinfo {
 margin-top: 0;
  
}

main {
 background-color: rgba(255, 255, 255, .7); 
    padding: 30px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: -10px 10px 10px 2px rgba(0,0,0,.5);
    
border: 1px solid rgba(255, 255, 255, 0);
border-radius:3px;

    
}

.toggle-target {
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all .5s;
}

.toggle-target-main {
    opacity: 0;
    transition: all .5s;
}

.toggle-target.open {
    opacity: 1;
    max-height: 1500px;
}

.toggle-target-main.open {
    opacity: 1;
    margin-bottom: 50px;
}

body {
 font-family: 'Roboto', sans-serif;
    padding: 40px; 
    background-color: black
}

#unused{
    background-color: #2676c8;
    background: #3275bb; /* Old browsers */
background: -moz-linear-gradient(top,  #3275bb 0%, #0f67aa 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3275bb), color-stop(99%,#0f67aa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3275bb 0%,#0f67aa 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3275bb 0%,#0f67aa 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3275bb 0%,#0f67aa 99%); /* IE10+ */
background: linear-gradient(to bottom,  #3275bb 0%,#0f67aa 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3275bb', endColorstr='#0f67aa',GradientType=0 ); /* IE6-9 */
}

body, html{
    min-height: 100%;
    
   cursor: default;


 }

.school {
    margin-bottom: 0; 
}

.schoolfact {
    margin-top: 0;
    margin-bottom: 0;
}

.topictitle {
    font-size: 30px;
    font-weight: 900; 
    margin-bottom: 40px;
    cursor: pointer;
    transition: .5s;
    
}

.topictitle:hover {
    transition: .5s;
    font-size: 40px;
    
}


.jobtitle {
    margin-bottom: 0;
    font-size: 18px;
}

.timeframe {
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 300;
    font-style: italic;
}

.responsibilities {
    margin-top: 0;
    margin-bottom: 0;
}

.responsibilitieslist {
    margin-top: 0;
}

#mainscroll{
    height: 520px;
/*    background-color: rgba(255, 255, 255, .2);*/
    overflow-y: scroll;
    
}

.portfolioitem{
    margin: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    
}

@media only screen and (max-width: 1150px) {
 nav li{
    display: inline-block;
    width: 32%;
    
}
}

@media only screen and (max-width: 900px) {
	#myname {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 500;
  text-align: center;
  font-size: 60px;
  margin-bottom: 0;
  margin-top: 10px;
}
    
    #profession {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
    nav a {
        font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
    nav li{
    display: inline-block;
    width: 32%;
    
}
    
}

@media only screen and (max-width: 680px) {
	#myname {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 500;
  text-align: center;
  font-size: 50px;
  margin-bottom: 0;
  margin-top: 10px;
}
    
    #profession {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
     
    nav a{
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
}

@media only screen and (max-width: 580px) {
	#myname {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 500;
  text-align: center;
  font-size: 40px;
  margin-bottom: 0;
  margin-top: 10px;
}
    
    #profession {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
    nav a {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 25px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
}

@media only screen and (max-width: 470px) {
	#myname {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 500;
  text-align: center;
  font-size: 30px;
  margin-bottom: 0;
  margin-top: 10px;
}
    
    #profession {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
    nav a{
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
}

@media only screen and (max-width: 350px) {
	#myname {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 500;
  text-align: center;
  font-size: 20px;
  margin-bottom: 0;
  margin-top: 10px;
}
    
    #profession {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
     nav a {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  text-align: center;
  font-size: 13px;
  margin-top: 0;
  margin-bottom: 0;
    }
    
}

@media only screen and (max-width: 390px) {
 nav li{
    display: inline-block;
    width: 30%;
    
}
}

@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
/*#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
}
#form{
border-radius:2px;
padding:20px 30px;
box-shadow:0 0 15px;
font-size:14px;
font-weight:bold;
width:350px;
margin:20px 250px 0 35px;
float:left;*/

}
h3{
text-align:center;
font-size:20px;
}
input{
width:100%;
height:35px;
margin-top:5px;
border: 1px solid rgba(255, 255, 255, 0);
border-radius:3px;
padding:5px;
}
input[type=button]{
background-color: rgba(255, 255, 255, .2);
/*border:1px solid white;*/
font-family: 'Roboto', serif;
font-Weight:300;
font-size:18px;
color:#000000;
        transition: .5s;
}

input[type=button]:hover{
background-color: rgba(255, 255, 255, .5);
/*border:1px solid white;*/
font-family: 'Roboto', serif;
font-Weight:300;
font-size:18px;
color:#000000;
    transition: .5s;
}
textarea{
width:100%;
height:80px;
margin-top:5px;
border-radius:3px;
padding:5px;
resize:none;
}
span{
color:white;
    background-color: black;

}

.star{
color: red;
    background-color: rgba(255, 255, 255, 0);
}
#note{
color:black;
font-Weight:400;
}
#returnmessage{
font-size:20px;
color:#000000;
text-align:center;
}

.contacttext{
 font-family: 'Roboto', sans-serif;  
    font-size: 24px;
    font-weight: 500;
}

input, textarea {
 box-sizing: border-box;  
    margin-bottom: 10px;
}