@charset 'UTF-8';

html, body {
  height: 100vh; 
  height: 100%;
}

body {
  margin: 0; 
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #333333; 
  background: #000000;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: cover;
}
.bodygallery-imagediv {
	-webkit-box-shadow: inset 0px 0px 300px 86px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 0px 300px 86px rgba(0,0,0,0.5);
	box-shadow: inset 0px 0px 300px 86px rgba(0,0,0,0.5);
}
a {
  text-decoration: none;
  color: #00ade0; 
}
a:hover { color: #c35691; }

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  min-height: 100%;
  margin: 0 auto; 


  position: relative;  
}
  #container #main {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 15px; 
    position: relative;
  }
    #container #main #content {
      background-color: rgba(255,255,255,0.95);
      border-radius: 10px;
      margin: 0 auto;
      padding-bottom: 15px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -ms-flex-line-pack: center;
          align-content: center; 
			-webkit-box-shadow: 0px 0px 200px -26px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 0px 200px -26px rgba(0,0,0,0.5);
			box-shadow: 0px 0px 200px -26px rgba(0,0,0,0.5);
    }
      #container #main #content #avatar {
        width: 160px;
        height: 160px;
        margin: 10px auto 0 auto;
        background-position: center center;
        background-size: cover;
        position: relative;
        top: -130px;        
     	}
      #container #main #content #info {
        text-align: center;
        margin: 0;
        padding: 10px auto; 
        margin-top: -130px;
      }
				#container #main #content #info h1 {
					margin: 0;
					font-weight: 400;
					font-size: 28px;
					padding: 0 20px;
				}
				#container #main #content #info #primaryInfo {
					display: none;
	      }
					#container #main #content #info #primaryInfo p {
						margin: 3px;
						font-size: 13px;
						font-weight: 700;
					}
	      #container #main #content #smallBio {
		      margin: 7px 5px 8px 5px;
	        padding: 10px 15px; 
					border-radius: 10px;
					box-sizing: border-box;
					font-size: 12px !important;
					line-height: 16px;
					display: none;
	      }
				#container #main #content #info .contactTitle {
					font-size: 14px;
					margin: 15px 0 0 0;
					color: #454545;
					font-weight: 700;
				}
        #container #main #content #info .linkArea {
          margin: 2px auto;
          padding: 0;
          list-style: none;
          max-width: 400px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; 
        }
        	#professionalContact {
	        	display: none;
	        }
        	#personalContact {
	        	display: none;
	        }
          #container #main #content #info .linkArea li {
            margin: 5px;
            border-radius: 12px;
            display: inline; 
          }
            #container #main #content #info .linkArea li .link-icon {
              background-color: #00ade0;
              padding: 6px 4px;
              box-shadow: 0 2px 5px #cccccc;
              border-radius: 10px; 
            }
              #container #main #content #info .linkArea li .link-icon:hover {
                background-color: #c35691; 
              }
            #container #main #content #info .linkArea li a .description {
              display: none;
              font-size: 0.8em; 
              vertical-align: text-top;
            }
            #container #main #content #info .linkArea li.primary {
              border: 1px solid #00ade0;
              padding-right: 15px;
              box-shadow: 0 2px 5px #cccccc; 
            }
              #container #main #content #info .linkArea li.primary .link-icon {
                box-shadow: none; 
              }
              #container #main #content #info .linkArea li.primary:hover {
                border-color: #c35691;
              }
                #container #main #content #info .linkArea li.primary:hover .link-icon {
                  background-color: #c35691; 
                }
              #container #main #content #info .linkArea li.primary a .description {
                color: #333;
                padding-left: 5px;
                padding-right: 2px; 
              }
              #container #main #content #info .linkArea li.primary .description {
                display: inline; 
              }
            #container #main #content #info .linkAreaPersonal a {
              color: #666 !important;
            }
	            #container #main #content #info .linkAreaPersonal a:hover {
		            color: #c35691 !important;
		          }
footer {
  text-align: center;
  font-size: 0.8em;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.5);
}




@media (min-height:480px) {
  #container #main #content #smallBio {
	  display: block !important;
  }
}

@media (min-height:355px) {
	#container #main #content #info #primaryInfo {
	  display: block !important;
	}
}
@media (min-height:290px) {
	#personalContact {
	  display: block !important;
	}
}
@media (min-height:230px) {
	#professionalContact {
	  display: block !important;
	}
}