html {
    height: 100%
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    height: 100%;
    margin: 0;
}

hr.style1{
    border-top: 1px solid #fff;
    padding: 0px;
    margin: 0px;
}

hr.style2{
    border-top: 1px solid #fff;
    padding: 0px;
    margin: 0px;
}

#distance {
  font-size: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

#top-header {
    top: 0px;
    text-align: center;
}

#top-header ul {
    font-size: 12pt;
    text-align: center;    
    display: inline;
    font-family: 'Roboto', sans-serif;
    -webkit-padding-start: 0px;

    }


#top-header ul li{
    display: inline-block;
    margin:16px 6px 16px 6px;
    border:none;
    opacity: 1;
    -webkit-transition:opacity .2s 
    ease-in-out;-moz-transition:opacity .2s 
    ease-in-out;-ms-transition:opacity .2s 
    ease-in-out;-o-transition:opacity .2s 
    ease-in-out;transition:opacity .2s 
}

#top-header ul li a {
    display:block;
    padding:7px 15px 6px 15px;
    height:100%;
    color:#333;
    text-decoration: none;
}

#top-header ul li a.nav_active {
    text-decoration: underline;
}

#top-header ul li:hover {
    border:1px solid #333;
    text-decoration: none;

}

.container { 
    position:relative; 
    margin:0px auto; 
    padding:0px; 
    width: 600px; 
    height: 100vh; 
    overflow: auto; 
}


img,object,embed {
    max-width: 100%;
}


#name {
    padding: 0px;
    font-size: 25pt;
    font-weight: 200;
    padding-right: 5px;
    margin: 16px 2px 0px 22px;
    position: relative;
    margin: 36px auto 18px;
    text-transform: uppercase;

    float: none;
    display: inline;
    font-family: 'Poiret One', cursive;
}

#writeMe {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 50px;
    font-size: 12pt;
    font-weight: 200;
    float: none;
    display: inline;
}


#distance a:link {
                color: #4CAF50;}
          a:visited {text-decoration: none;
                color: #4CAF50;}
          a:hover {text-decoration: none;
                color: #4CAF50;}
          a:active {text-decoration: none;}


.overlay:after {
      content:"";
      position:absolute;
      width:100%; height:100%;
      top:0; left:0;
      background:rgba(255, 255, 255, .2);
}

 #background {
      z-index: 1;
      position: absolute;
      left: 0px;
      top: 0px;
      background-position-x: 0%;
      background-position-y: 0%;
      background-image: url("images/background.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;      
      width: 100vw;
      height: 100vh;
      background-size: cover;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-clip: border-box;
 }

#content-wrap {
      display: block;
      min-height: 100%;
      position: fixed;
      top: 0px;
      left: 25%;
      right: 25%;
      float: center;
      width: 50%;
      max-width: 1200px;
      height: 100%;
      background-color: #ffffff;
      margin: 0;
      padding: 0;
      overflow-y: scroll;
      z-index: 4;
      -webkit-transition: all 1s ease;
      transition:         all 1s ease;
      -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.20);
      -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.20);
      box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.20);
}

.main-content {
      display: block;
      height: 100%;
      position: relative;
      text-align: center;
      z-index: 1;
      padding: 0;
      margin: 0;
}


.profile-avatar {
      display: block;
      position: relative;
      margin: 30px auto 20px;
      float: none;
      border: 2px solid #d7d7d7;
      border-radius: 50%;
      width: 130px;
      height: 130px;
      overflow: hidden;
}


.main-content p {
      display: block;
      width: 60%;
      margin: 18px auto 0px;
      padding: 0;
      float: none;
      text-align: center;
      font-weight: 100;
      font-size: 15pt;
      letter-spacing: 0.03em;
      line-height: 27px;
}

.main-content p span {
      font-weight: normal;
      font-size: 15pt;
}

/* BUTTONS */

.button {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    border: none;
    border-radius: 4px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    width: 300px;
    min-width: 300px;
    height: 75px;
    padding-right: : 0px
}


.git {
    background-color: #4CAF50; 
}

.git:hover {
   background-color: #3DA141; 
}

.linkedin {
    background-color: #008BC2; 
}

.linkedin:hover {
   background-color: #027FB0;  
}

.beh {
    background-color: #C2445B; 
}

.beh:hover {
   background-color: #BA364E;  
}

/* RESPONSIVE */
/* Screen resolution adaptation */

@media only screen and (min-width: 1202px) {
  .main-content p { font-size: 13pt; width: 60%; }
  #content-wrap {width: 60%; left: 20%; right: 20%;}
  #name {font-size: 26pt;}
  
}

@media only screen and (min-width: 993px) and (max-width: 1198px) {
  .main-content p { font-size: 13pt; width: 60%; }
  #content-wrap {width: 70%; left: 15%; right: 15%;}
  #name {font-size: 26pt;}
}

@media only screen and (min-width: 767px) and (max-width: 992px) {
  .main-content p { font-size: 13pt; width: 70%; }
  #content-wrap {width: 80%; left: 10%; right: 10%;}
  #name {font-size: 26pt;}
  
}

/* TABLET */
@media only screen and (min-width: 481px) and (max-width: 766px) {
    #top-header {min-width: 100%}
    #top-header {font-size: 10pt}
    #top-header ul li {margin:16px 4px 16px 4px;}
    .main-content p { font-size: 13pt; width: 80%; }
    #content-wrap {width: 86%; left: 7%; right: 7%;}
    #name {font-size: 26pt;}
}
 

/* MOBILE */
@media only screen and (max-width: 480px) {
  #top-header {width: 100%; min-width: 320px;}
  #top-header {font-size: 10pt}
  #top-header ul li {margin:16px 4px 16px 4px;}
  #top-header ul li a { padding:7px 6px 6px 6px;}
  .main-content p {font-size: 14pt; min-width: 400; width: 80%; }
  .button {width: 300px;}
  #content-wrap {width: 100%; left: 0%; right: 0%; min-width: 320px;}
  #name {font-size: 24pt;}
  
}