.nav_navbar-nav {
       margin: 0 auto;
}
.container-fluid {
       margin: 0 auto;
}
.navbar {
       border-style: dotted;
       border-color: #444444;
       border-width: 1.5px;
       opacity: .80;
       margin: 0 auto;
       margin-top: 5px;
       text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.navbar-default {
       background-color: #444;
       box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
#bs-example-navbar-collapse-1{
       font-family: 'lobster', sans-serif;
       font-size: 18pt;
       line-height: 16pt;
       margin-top: 2px;
}
.nav a{
      color: #d7df21;
}
/*h1{
      font-family: 'lobster', sans-serif;
      color: #d7df21;
      font-size: 18pt;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 2px;
      text-shadow: 0px 2px 3px rgba(180,180,180,3);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}*/
.intro {
       background-image: url('../img/bg-geo1.png');
       background-repeat: no-repeat;
       height: 923px;
       margin: 0 auto;
       background-position: center;
       padding-top: 75px;
}
.intro img{
      opacity: .8;
}
.circles {

}
#lg-circle {
       margin-top: 151px;
       left: 50%;
       margin-left: -60px;
       position: absolute;
}
#med-circle {
       margin-top: 20%;
       left: 50%;
       margin-left: -166px;
       margin-top: 351px;
       position: absolute;
}
#sm-circle {
       margin-top: 20%;
       left: 50%;
       margin-left: -169px;
       margin-top: 234px;
       position: absolute;
}
#me {
       margin-top: 20%;
       left: 40%;
       margin-left: -211px;
       margin-top:237px;
       position: absolute;
}
#dot-line {
       margin-top: 20%;
       left: 40%;
       margin-left: -266px;
       margin-top: 202px;
       position: absolute;
}
.vertical-line{
      border-left:thin #ea3fa7 solid; 
      position:absolute; 
      left: 188px;
      height: 150px;
      top: 140px;
      }
#welcome-text1 {
       font-family: 'Lobster', sans-serif;
       font-size: 24pt;
       color: #444444;
       text-align: right;
       line-height: 35px;
       width: 182px;
       position: absolute;
       top: 128px;
}
#welcome-text2 {
       font-family: 'Open+Sans', sans-serif;
       font-size: 14pt;
       font-weight: 300;
       position: absolute;
       color: #444444;
       top: 137px;
       left: 196px;
       width: 190px;
}
#bar-skills {
      background-color: #444;
      width: 100%;
      height: 40px;
      border-style: dotted;
      border-width: 1.5px;
      border-color: #e7e7e7;
      opacity: .80;
      margin: 0 auto;
      box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
.title-skills {
      font-family: 'lobster', sans-serif;
      color: #d7df21;
      font-size: 18pt;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 2px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.skills-container {
       background-image: url('../img/bg-skills.png');
       padding-bottom:100px;
       margin: 0 auto;
}
.skills-text-container{
      max-height: 100%;
}
#infographic {
      position: relative;
      padding-top: 6%;
      margin:0 auto;
      text-align: center;
}
#infographic img {
      width: 53%;
}
.full-width-info-text {
    font-family: 'Open+Sans', sans-serif;
       font-size: 13pt;
       font-weight: 300;
       position: relative;
       color: #444444;
       width: 90%;
       max-width: 600px;  
       margin: 0 auto;
       margin-top: 7%;
}
.info-text{
      position:absolute;
      margin:0 auto;
      text-align: center;
      float: left;
      padding-top: 69px;
}
.left {
       font-family: 'Open+Sans', sans-serif;
       font-size: 13pt;
       font-weight: 300;
       position: relative;
       color: #444444;
       left: -20px;
       margin-left: 29.5%;
       width: 190px;
       text-align: right;
       padding-top:7%;
}
.right {
       font-family: 'Open+Sans', sans-serif;
       font-size: 13pt;
       font-weight: 300;
       position: relative;
       color: #444444;
       left: 60%;
       margin-left: -85px;
       width: 225px;
       text-align: left;
       margin-top: -71px;
}
.vertical-line2{
      border-left:thin #0e76bc solid; 
      position:relative; 
      left: -5px;
      margin-left: 50%;
      height: 137px;
      margin-top:7%;
}
.bar-portfolio {
      background-color: #444444;
      width: 100%;
      height: 40px;
      border-style: dotted;
      border-width: 1.5px;
      border-color: #e7e7e7;
      opacity: .80;
      margin: 0 auto;
      position: relative;
      box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
#title-portfolio {
      font-family: 'lobster', sans-serif;
      color: #d7df21;
      font-size: 18pt;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 2px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.portfolio-container {
       background-image: url('../img/bg-portfolio2.png');
       background-repeat: repeat-y;
       margin: 0 auto;
       background-position: center;
       /*padding-top: 75px;*/
       position: relative;
       width: 100%;
}
#port1 {
      padding-top:47px;
      text-align: center;
}
.dot-line-port {
      background-image: url('../img/dot-line-portfolio.png');
      background-repeat:no-repeat;
}
.web-circle {
    width: 50%;
    height:0;
    padding-bottom: 50%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #d7df23; 
}
#port2 {
      padding-top:21px;
      text-align: center;
}
.modal-dialog {
      width: 70%;
      /*background: rgba(27, 27, 27, 0.8);*/
      background: rgba(5, 5, 5, 0.7);
      border-radius: 5px;
      box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
.modal-dialog img{
      width: 100%;
}
.modal-dialog button {
      color: rgba(238, 240, 174, 0.9);
      margin-top: 5px;
      margin-right: 15px;
}
.modal-title {
      color: #6ea990;
      font-size: 14pt;
      font-family: 'open-sans', sans-serif;
      font-weight: 300;
      letter-spacing: 1px;
      padding-left: 36px;
      padding-top: 20px;
      width: 100%;
      text-shadow: 0px 18px 23px rgba(0,0,0,0.1);
      
}
#port3 {
      padding-top:21px;
      text-align: center;
}
#port4 {
      padding-top:44px;
      text-align: center;
}
.row {
      margin: 0 auto;
      /*padding-bottom: 50px;*/
}
.col-md-3 {
      padding: 20px;
      height:350px;
}
#bar-education {
      background-color: #444444;
      width: 100%;
      height: 40px;
      border-style: dotted;
      border-width: 1.5px;
      border-color: #e7e7e7;
      opacity: .80;
      margin: 0 auto;
      position: relative;
      box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
.title-education {
      font-family: 'lobster', sans-serif;
      color: #d7df21;
      font-size: 18pt;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 2px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.education {
       background-image: url('../img/bg-education.png');
       background-repeat: repeat-y;
       height: 2413px;
       margin: 0 auto;
       background-position: center;
       position: relative;
}
#elements-education{
      margin-left: 41.5%;
      margin-top: 74px;
      left: -40px;
}
.element-title{
      font-family: 'lobster', sans-serif;
      color: #444444;
      font-size: 18pt;
      letter-spacing: 1.5px;
      position:relative;
}

.head-ed {
      top: 21px;
      left: -117px;
      margin-left:42%;
      position: relative;
}
.ed-element{
      left: -125px;
      margin-left: 42%;
}
.subject-education {
      top:-7.7%;
      position: relative;
      left: -50px;
      margin-left: 51%;
      margin-top: 21px;

}

.subject-experience {
          margin-top: 58px;
}
.subject-education ul, .subject-experience ul {
      list-style: none;
      border-left: 1px dashed #E24186;
}

.subject-education ul li, .subject-experience ul li {
      margin-top:-10px;
      margin-bottom: 20px;
}

.subject-education ul li::before, .subject-experience ul li::before {
  content: "\2022";
  color: #E24186;
  font-size: 36px;
  line-height: 0px;
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.3em;
  baseline-shift: -.5em;
}

#elements-experience{
      margin-left: 41.5%;
      margin-top: 5%;
      left: -40px;
}
.head-ex {
      top: -155px;
      left: -117px;
      margin-left: 42%;
      position: relative;
}
.ex-element{
      left: -9.3px;
      margin-left: 43%;
      top:-176px;
      position: relative;
}
.subject-experience {
      width: 312px;
      top:-36%;
      position: relative;
      left: -50px;
      margin-left: 51%;
}
.knowledge{
      height: 1100px;
}
.head-knowledge {
      margin-left: 43%;
      margin-top: -39px;
      left: -63px;
      position: relative;
      font-family: 'lobster', sans-serif;
      color: #444444;
      font-size: 18pt;
      letter-spacing: 1.5px;
}
.text{
      font-family: 'Open+Sans', sans-serif;
      font-size: 12pt;
      font-weight: 300;
      position: relative;
      color: #444444;
      /*left: -130px;*/
      text-align: left;
      line-height:23px;
     /* margin-left: 50%*/
}
.tri-circles{
      position: relative;
      left: -102px;
      margin-left: 42%;
      margin-top: -963px;
}
.print-timeline img, .web-timeline img, .motion-timeline img{
      width: 56%;
      max-width: 610px;
}
.print-timeline {
      position: relative;
     /* margin-left: 40%;
      left: -315px;*/
      top: 51px;
      margin: 0 auto;
      text-align: center;
}
.web-timeline {
      position: relative;
      /*margin-left: 40%;
      left: -315px;*/
      top: 121px;
      margin: 0 auto;
      text-align: center;
}
.motion-timeline {
      position: relative;
      /*margin-left: 40%;
      left: -315px;*/
      top: 180px;
      margin: 0 auto;
      text-align: center;
}
.contact{
      margin-top: -138px;
}
.bar-contact {
      background-color: #444444;
      width: 100%;
      height: 40px;
      border-style: dotted;
      border-width: 1.5px;
      border-color: #e7e7e7;
      opacity: .80;
      margin: 0 auto;
      position: relative;
      box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
#title-contact {
      font-family: 'lobster', sans-serif;
      color: #d7df21;
      font-size: 18pt;
      letter-spacing: 1.5px;
      text-align: center;
      margin-top: 2px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.contact-container {
       background-image: url('../img/bg-contact.png');
       background-repeat: repeat-y;
       margin: 0 auto;
       background-position: center;
       position: relative;
       width: 100%;
       height: 600px;
}
#lg-circle-contact {
       margin-top: 10%;
       left: 50%;
       margin-left: -60px;
       position: absolute;
}
#med-circle-contact {
       margin-top: 20%;
       left: 50%;
       margin-left: -166px;
       margin-top: 210px;
       position: absolute;
}
#sm-circle-contact {
       margin-top: 20%;
       left: 40%;
       margin-left: 22px;
       margin-top: 142px;
       position: absolute;
}
#pink {
       margin-top: 20%;
       left: 40%;
       margin-left: -95px;
       margin-top:80px;
       position: absolute;
       opacity:   .3;
}
#q-c {
       font-family: 'Lobster', sans-serif;
       font-size: 22pt;
       color: #444444;
       text-align: left;
       line-height: 30px;
       width: 182px;
       position: absolute;
       top: 41px;
       left: 11%;
       margin-left: 21px;
}
#email {
       font-family: 'Open+Sans', sans-serif;
       font-size: 14pt;
       font-weight: 300;
       position: relative;
       color: #444444;
       top: -79px;
       left: 8%;
       margin-left: 30px;
       width: 190px;
}
#ty {
       font-family: 'Lobster', sans-serif;
       font-size: 22pt;
       font-weight: 300;
       position: absolute;
       color: #444444;
       top: 68px;
       left: -3%;
       margin-left: -265px;
}
#dot-line-contact {
       left: 11%;
       margin-left: 21px;
       position: absolute;
       top: 105px;
}
.circles-wrapper {
   /*   left: 40%;*/
      margin-top: 4%;
}
.bottom-bar {
      background-color: #444444;
      /*width: 100%;*/
      height: 79px;
      border-style: dotted;
      border-width: 1.5px;
      border-color: #e7e7e7;
      opacity: .80;
      margin: 0 auto;
      position: relative;
}
.bottom-bar li a{
      font-family: 'Lobster', sans-serif;
      color: #98bfb1;
      font-size: 12pt;
      letter-spacing: 1.5px;
      /*text-align: center;*/
      margin-top: 10px; 
      margin-bottom: 10px; 
     /* width: 50%;*/
}
.nav>li>a:hover, .nav>li>a:focus {
      background-color: transparent;
}
@media screen and (max-width: 470px) {
      .intro {
            padding-bottom: 150%;
            height: auto;
      }
      .bigScreen {
            display: none;
      }
}
@media screen and (min-width:565px) {
      .intro {
            padding-bottom: 700px;
            height: auto;
      }
}
@media screen and (min-width:700px) {
      .smallScreen {
            display: none;
      }
     
}
@media screen and (max-width: 700px){
      .subject-experience {
            top: 0px;
            margin-left: 23%;
      }
      .subject-education{
            top: 0px;
            margin-left: 23%;

      }
      .head-ex, .head-ed {
            display: none;
      }
      .bigScreen{
            display: none;
      }
       .ed-element {
            display: none;
      }
      .ex-element {
            display: none;
      }
      .knowledge{
            display: none;
      }
      .education {
            height: auto;
            padding-bottom: 170px;
      }
      #ty {
            display: none;
      }
      #lg-circle {
            left: 17%;
      }
      #lg-circle img{
            display: none;
      }
      #lg-circle-contact {
            left: 30%;
      }
      #dot-line{
            display: none;
      }
      li.bigScreen {
            display: none;
      }
  }
@media screen and (max-width: 768px){
      .bottom-bar {
            display:none;
      }
      .modal-dialog {
            width: 97%;
      }
      
}