/* ==========================================================================
   custom styles
   ========================================================================== */



@media (min-width: 768px) and (max-width: 979px) {
    .row > [class*=span]:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }

    .row .col-lg-3 {
      width: 48.61878453038674%;
    }
  }

  .col-lg-3 h2, .col-lg-3 h4, .col-lg-4 h2, .col-lg-4 h4 {
    text-align: center;
  }

  img.headerimg {
    width: 131px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  img.workhead {
    display: inline;
    padding-left: 200px;
    padding-right: 200px;
    width:531px
  }

  .col-lg-8-center {
    margin-top: 20px;
    margin-left: 15%;
    margin-right: 15%;
  }

  a.anchor {
    display: block;
    position: relative;
    top: -130px;
    visibility: hidden;
  }

  .aboutme {
    background-color: orange;
  }

  .jumbotron {
    background: url(../img/home_top_botm_bg.jpg) bottom center repeat-x, url(../img/home_top_1_bg.jpg) repeat;
    margin-bottom: 0px;
  }

  .aboutme {
    background: url(../img/home_about_botm_bg.jpg) bottom center repeat-x, url(../img/home_about_bg.jpg) repeat;
    padding-bottom: 40px;
  }
  .coding {
    background: url(../img/portfolio_botm_bg.jpg) bottom center repeat-x, url(../img/portfolio_bg.jpg) repeat;
    padding-bottom: 40px;
  }

  .skills {
    background: url(../img/home_blog_botm_bg.jpg) bottom center repeat-x, url(../img/home_blog_bg.png) repeat;
    padding-bottom: 40px;
  }

  .contact {
    background: url(../img/home_contact_botm_bg.png) bottom center repeat-x, url(../img/contact_me_bg.png) repeat;
    color: #f6edd8;
  }

  footer {
    background: url(../img/contact_me_bg.png) repeat;
    color: #f6edd8;
  }

  li.letter {
    background: url(../img/address_bg.png) left top no-repeat;
    padding-bottom: 20px;
    padding-left: 35px;
  }
  li.phone {
    background: url(../img/phon_no_bg.png) left top no-repeat;
    padding-left: 35px;
    padding-bottom: 20px;
  }
  li.mail {
    background: url(../img/msg_bg.png) left top no-repeat;
    padding-left: 35px;
    padding-bottom: 20px;
  }

  #social_links {
    display: block;
  }
  #social_links ul {
    padding-bottom:22px;
    text-align: center;
  }
  #social_links ul li {
    width: 81px;
    height: 81px;
    margin-right: 20px;
    display: inline-block;
    position: relative;
  }
  #social_links ul li:last-child {
    margin-right: 0;
  }
  #social_links ul li a {
    width: 81px;
    height: 81px;
    float: left;
  }
  #social_links ul .social_myspace {
    background: url(../img/social_sprites.png) 0 0 no-repeat;
  }
  #social_links ul .social_flickr {
    background:url(../img/social_sprites.png) -81px 0 no-repeat;
  }
  #social_links ul .social_linkedin {
    background:url(../img/social_sprites.png) -162px 0 no-repeat;
  }
  #social_links ul .social_twitter {
    background:url(../img/social_sprites.png) -243px 0 no-repeat;
  }
  #social_links ul .social_facebook {
    background:url(../img/social_sprites.png) -324px 0 no-repeat;
  }
  #social_links ul .social_vimeo {
    background:url(../img/social_sprites.png) -405px 0 no-repeat;
  }
  #social_links ul .social_tumblr {
    background:url(../img/social_sprites.png) -486px 0 no-repeat;
  }

  #social_links p a {
    color:#f6edd8;
  }

  #map {
    width: 100%;
    height: 100%;
    -moz-box-shadow: 0px 5px 20px #ccc;
    -webkit-box-shadow: 0px 5px 20px #ccc;
    box-shadow: 0px 5px 20px #ccc;
  }

  #map.large{
    height:500px;
  }

  .overlay{
    display:block;
    text-align:center;
    color:#fff;
    font-size:60px;
    line-height:80px;
    opacity:0.8;
    background:#4477aa;
    border:solid 3px #336699;
    border-radius:4px;
    box-shadow:2px 2px 10px #333;
    text-shadow:1px 1px 1px #666;
    padding:0 4px;
  }

  .popin{
    margin: 0 auto;
    width: 100%;
    height: 300px;
    background:#fff;
    padding:15px;
    box-shadow: 0 0 20px #999;
    border-radius:2px;
  }

  .overlay_arrow{
    left:50%;
    margin-left:-16px;
    width:0;
    height:0;
    position:absolute;
  }
  .overlay_arrow.above{
    bottom:-15px;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-top:16px solid #336699;
  }
  .overlay_arrow.below{
    top:-15px;
    border-left:16px solid transparent;
    border-right:16px solid transparent;
    border-bottom:16px solid #336699;
  }