/* General Style */
* {
  box-sizing: border-box;
}

body {
  position: relative;
  color: #222;
  font-family: 'Roboto', sans-serif;
  
}

h2 {
  font-size: 2em;
  letter-spacing: 2px;
}

h3 {
  font-size: 1.5em;
  letter-spacing: 2px;
}

p {
  font-size: 1.5em;
  
}

.centered {
  text-align: center;
}

.shadow {
  -webkit-box-shadow: 0px 10px 27px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 27px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 27px -6px rgba(0,0,0,0.75);
}

/******************
 * header style *
******************/

/* Nav Style */

.navbar {
  background-color: black;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-brand:visited {
  color: white;
}

.navbar-default .navbar-brand:hover {
  color: #DAEAFB;
  transition: 1000ms;
  text-decoration: none;
}

.navbar-default .navbar-nav > li > a {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  
}

.navbar-default .navbar-nav > li > a:visited,
.navbar-default .navbar-nav > li > a:focus {
  color: white;
  text-decoration: none;
}



.navbar-default .navbar-nav > li > a:hover {
  color: #DAEAFB;
  transition: 1000ms;
  text-decoration: none;
}

.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active a:focus,
.navbar-default .navbar-nav > li.active a:hover{
  color: white;
  background-color: #86B6E7;
  text-decoration: none;
}

/* intro section */

#intro-section {
  margin-top: 40px;
  height: 65em;
  background: linear-gradient( rgba(25, 25, 122, 0.3), rgba(25, 25, 122, 0.3) ), url("../images/portfoliobg.jpg");
  background-size: cover;
  -webkit-box-align:center;
  -webkit-box-pack:center;
  display:-webkit-box;
}

.header-text-style{
  background-color: black;
  opacity: 0.6;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 .2em white;
  letter-spacing: 1px;
  line-height: 1.5em;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
}


/******************
 * content style *
******************/

/* about section */

.about-section {
  width: 100%;
  background-color: white; 
}

.about-header {
  text-align: center;
  padding-top: 70px;
  padding-bottom: 35px;
  margin-bottom: 1em;
}

h2.center-text {
  display: inline-block;
  padding: 10px;
  font-weight: 800;
  font-size: 3em;
  color: #558BC3;
  text-transform: uppercase;
}

.about-text {
  margin-top: 30px;
}

.about-image {
  margin-left: auto;
  margin-right: auto;
  width: 24em;
  border-radius: 100%;
}

.about-image2 {
  margin-left: auto;
  margin-right: auto;
  width: 24em;
  border-radius: 100%;
  display: none;
}

.skill-container {
  margin-top: 2em;
}

.icon-span {
  display: inline-block;
  width: 15em;
  margin-left: 2em;
}

.skills-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.skills-text {
  text-align: center;
  font-weight: 800;
}

.skills-header {
  margin-bottom: 2em;
}
  

i {
  font-size: 6em;
}

.fa {
  font-size: 6em;
  margin-bottom: .2em
}

i:hover {
  color: #3498db;
  transition: 1000ms;
}

i.icon-heroku {
  padding-left: .5em;
}

i.icon-ruby-on-rails-alt {
  padding-left: .2em;
}

i.icon-java {
  padding-left: .4em;
}

i.icon-css {
  padding-left: .2em;
}

i.icon-html {
  padding-left: .2em;
}

i.icon-javascript-alt {
  padding-left: .2em;
}

/* work section */

.work-header {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 5px;
}

.work-row {
  margin-top: 2em;
}

.work-section {
  padding-bottom: 3em;
  background-color: #e9ece5;
}

.work-image {
  border: 2px solid black;
}

.divider {
  width: 1em;
}

.content-holder {
  padding: 0;
}

.content-holder h3 {
  width:100%;
  height: 100%;
  background:#000;
  opacity: 0.7;
  color: yellow;
  position:absolute;
  top: 0;
  margin:0;
  padding:30px;
  overflow: auto;
  display: none;
  -webkit-text-stroke: 1px white;
}

/*.contenthover { height: 24em; padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3 { color:#fff; }*/



/* contact section */

.contact-section {
  width: 100%;
  padding-bottom: 2em;
  background-color: #e9ece5;
}

.contact-text {
  text-align: center;
  padding-top: 1em;
}

.social-network {
  padding: 1em 0;
}

.btn {
  margin: 1em;
}

.social-images {
  margin-top: 1em;
  margin-left: 2em;
}

/* faq section */

.faq-header {
  margin-top: 10px;
  margin-bottom: 10px;
}

.faq-section {
  width: 100%;
  text-align: center;
  padding-bottom: 2em;
  background-color: white;
}

.panel-default > .panel-heading {
  background-color: #558BC3;
}

.panel {
  text-align: left;
  background-color: #DAEAFB;
}

.panel-group {
  width: 70%;
  margin-left: auto;
  margin-right: auto
}

.panel-title {
  font-weight: 700;
  color: white;
  cursor: pointer;
}

#accordion .panel-heading a {
  text-decoration: none;
}


/******************
 * footer style *
******************/

#content-footer {
  padding: 2em 0;
  background-color: #558BC3;
  text-align: center;
}

#content-footer > p {
  margin-top: 5px;
  color: white;
  font-size: 1em;
}


/* Media Query */

@media only screen and (max-width: 1024px) {
  #intro-section {
    height: 45em;
  }
  
  .skills-header {
    margin-bottom: 2em;
  }
  
  .skills-text {
    font-size: 1em;
  }
  
  .divider {
    height: 2em;
  }
  
  .icon-span {
    width: 8em;
  }
}

@media only screen and (max-width: 768px) {
  .divider {
    height: 2em;
  }
}

@media only screen and (max-width: 480px) {
  #intro-section {
    margin-top: 40px;
    height: 30em;
    background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url("../images/portfoliobg.jpg");
    background-size: cover;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
  }

  .header-text-style {
    font-size: 1.5em;
  }

  .skills-header {
    margin-bottom: 1em;
  }
  
  .icon-span {
    width: 8em;
  }
  
  i {
    font-size: 4em;
  }

  .fa {
    font-size: 4em;
    margin-bottom: .2em
  }
  
  .skills-text {
    font-size: 1em;
  }
}

@media only screen and (max-width: 786px) {
  .about-image {
    display: none;
  }
  .about-image2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 480px) {
  h2.center-text {
    display: inline-block;
    padding: 10px;
    font-weight: 800;
    font-size: 1em;
    color: #558BC3;
    text-transform: uppercase;
  }
  
  p{
    font-size: 1em;
  }
  
  .content-holder {
    margin-top: 1.5em;
  }
  
  .content-holder h3{
    font-size: 1em;
  }
}