#header-logo {
  -webkit-animation: fadeIn .3s ease-in-out;
  -moz-transition: fadeIn .3s ease-in-out;
  -o-transition: fadeIn .3s ease-in-out;
  transition: fadeIn .3s ease-in-out;
  border-radius: 60px;
  overflow: hidden;
  width: 355px;
  height: 300px;
  min-width: 155px;
  position: relative;
  margin: 0;
  padding: 0;
  animation: fadeIn .3s ease-in-out;
}
.bgcolor-purple{
  background-color: #f189c2;
  /*background: linear-gradient(0deg, rgba(255,151,209,1) 0%, rgba(255,75,175,1) 50%, rgba(147,13,88,1) 100%);*/
  padding-top: 20px;
  
}

.head-nav{color:white;margin: auto;}


.nav-list li{display: inline;}

.certs li a{color:#540260; text-decoration: underline;}
.certs li a:hover{color: pink;}

.image-text {
  background-position: 0 0;
  background-repeat: no-repeat;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  text-indent: -9999px;
}

.image-text a {
  display: block;
  height: 100%;
  width: 100%;
}
a {
  color: #e0ebe8;
  text-decoration: none;
}
#header-logo .mask {
  background-image: url(../img/Bio-Face-300px-new.png);
  position: absolute;
  height: 300px;
  width: 355px;
  z-index: 1000;
}
#header-logo span {
  display: block;
}
#header-logo .behind {
  position: absolute;
  height: 300px;
  width: 355px;
  z-index: 800;
}
#header-logo i {
  position: absolute;
  left: 7px;
  top: 11px;
  width: 355px;
  height: 200px;
  background: url(../img/) no-repeat;
  z-index: 900;
}

#head-img-wrap{
  width:100%;
}

header .nav-list {
  padding-top: 1.5em;
  padding-left: 0;
  position: relative;
  float: right;
}
.transistion {
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
}
.nav-list li:first-child a {
  margin-left: 0;
}
.nav-list li a.active {
  color: #9B216A;
  text-decoration: underline;
}
.nav-list li a:hover {
  color: #ff00d4 !important;
  text-decoration: underline;
}
.nav-list li a {
  margin: 0 0 0 1em;
  font-size: 120%;
  text-decoration: underline;
}

.center{
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.vert{
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}

.EXicon{
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-bottom: 25px;
}

#intro{
  margin-top:20px;
}
#outro{
  float: right;
  border-bottom: 1px solid black;
  margin-bottom: 40px;
}
.PCB{
  float: right;
  margin-bottom: 40px;
  background-color: #F189C2;
  border-radius: 50px;
  padding: 30px;
  box-shadow: 5px 10px 10px 0px #757474;
  border-style: solid;

}
#footer{
  background-color: #F189C2;
}

#top{border-bottom: 1px solid black;}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #4A0548; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

footer{
  color: white;
  text-align: center;
  margin: 20px;
}

.article-head{
  color: #9B216A;
  text-align: center;
}
.sub-head-img{
  background-image: url(../img/country-flat-purp-long.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-y: bottom;
  background-clip: border-box;
  width: 100%;
  float: left;
  clear: both;
  margin: 0;
}
.center-wrap{
  text-align: center;
}
.SMCenter{
  text-align: center;
}
.skills li{
  list-style-type: none;
  padding: 5px;
}
.skills p{
  font-weight: bold;
  margin-top: 20px;
  background-image: linear-gradient(to right, #9b216a , #ffdbf400);
  color: white;
  padding-left: 25px;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4A0548;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #a600a1;
}

@media (min-width: 768px) {

  .EXicon{
    max-width: 75%;
  }
  .SMCenter{
    text-align: left;
  }
  
}