/*-- Tipography --*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
@import url('https://fonts.googleapis.com/css?family=Oswald');
/*-- Tipography --*/
body {
  box-sizing: border-box;
  width:100%;
  padding: 0;
  margin:0;
}

.section-title {
  font-size:4em;
  font-family: 'Oswald', sans-serif;
  color:#666666;
}

.back-nav-space {
  height: 40px;
  width: 100%;
}

/*-- Navigation menu styles --*/

header .navbar-default {
  color: #6a3093;
  background:rgba(0, 0, 0, 0.5);
  border:none;
}

.navbar-default .navbar-nav>li>a {
  font-size: 1.5em;
  font-family: 'Oswald', sans-serif;
  color: white;  /* fallback for old browsers */
}

.navbar-default .navbar-nav>li>a:hover {
  border-bottom: 2px solid;
  color: #a044ff;
}
.image-about {
  width:100%;
  height: 40vh;
}

.column-direction {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}

.row-direction {
  display:flex;
  justify-content: space-between;
  padding:20px;
}

.thumbnail {
  margin-top:20px;
}
/*-- Navigation menu styles fin--*/

/*-- Animation typing styles --*/
.relative {
  position:relative;
}
.absolute {
  position:absolute;
  top: 30%;
  left:0%;
}
.text-js{
  background: linear-gradient(135deg,#00C4FF,#9D1BB2);
  opacity: 0;
}
.cursor{
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  right: -5px;
  width: 2px;
  background-color: white;
  z-index: 1;
  animation: flash 0.5s none infinite alternate;
}
@keyframes flash{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.headline{
  font-family: "Open Sans", sans-serif;
  margin: 20px;
  color: white;
  font-size: 52px;
  text-align: center;
  h1{
    letter-spacing: 1.6px;
    font-weight: 300;
  }
}

/*-- About me styles --*/

.container-col-about {
  font-size: 1.5em;
  height: 100vh;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center;
}

/*-- Projects styles --*/
.thumbnail {
  border:none;
}
h3 {
  font-family: 'Oswald', sans-serif;
  color:#666666;
  font-size: 3em;
}
.container-link-view {
  width:100%;
  display:flex;
  justify-content: space-around;
  border-bottom: 2px solid #666666;
  padding-bottom: 10px;

}
.icon-color-git {
  color: #00C4FF;
}

.icon-color-eye {
  color: #6a3093;
}

.icon-color-download {
  color: #6a3093;
}

.icon-color-mail {
  color: #666666;
}

/*-- Contact styles --*/

.container-contact-view {
  width:100%;
  display:flex;
  justify-content: space-around;
  font-size: 1.5em;
}

.contact-mail {
  font-size: 1em;
}

.contact-description {
  font-size: 2em;
}

.button-download {
  font-size: 1.5em;
  color:#6a3093;
  cursor:auto;
}

footer {
  margin-top: 30px;
  padding-top: 15px;
  color:white;
  background-color:#666666;
}

/*-- Responsive menu --*/
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

@media screen and (max-width: 768px) {
  .nav>li>a {
    text-align: center;
  }
  .navbar-default .navbar-nav>li>a:hover {

    border-bottom: none;
  }
  #collapsible-menu{
    background:rgba(0, 0, 0, 0.5);
  }
}
/*-- Modals styles--*/
button {
  background:none;
  border:none;
}
.button-container {
  display:flex;
  justify-content: flex-end;
}
.btn-modal {
  color: #6a3093;
  background-color: none;
}
.btn-modal:focus {
  outline:none;
}
.modal-title {
  font-size:2em;
  font-family: 'Oswald', sans-serif;
  color:#666666;
}
.modal-header{
  border-bottom: none;
}
.modal-body{
  width: 100%;
  height: 100vh;
}
.modal-body>img {
  width: 100%;
}
.modal-text{
  padding:20px;
}
.modal-image{
  margin-bottom: 20px;
}