/*====================
This CSS file consists of @media queries to ensure that 
the theme looks best on all screen sizes.

[Media Queries]
======================
[Table of Content]

- Imports (SASS)
- Screen Size < 1000px
- Screen Size < 820px
- Screen Size < 768px
- Screen Size < 600px
- Screen Size < 430px
- Screen Size < 320px
- Other components
======================
Let's Begin
====================*/
/*=============
IMPORTS (SASS)
=============*/
/*=========================
SASS VARIABLES
=========================*/
/*==============
MAX-WIDTH: 1024PX
==============*/

/*========= SVG Glitch of http://codepen.io/DirkWeber/pen/ArFvk ===========*/

@import "compass/css3";

@import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);


body{
  background: #c64b4b;
}

svg{
  width: 300px;
  height: 40px;
  display: block;
  position: relative;
  overflow: hidden; 
  margin: 0 auto;
  background: #c64b4b;
}

/*========= SVG Glitch CLASS ===========*/


@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body{
 background: #fff;
 /*background: #111;*/
 font-family: "Open Sans",  Impact;
}
.area{
  text-align:center;
  font-size:1.0em;
  color:#fff;
  letter-spacing: -7px;
  font-weight:700;
  text-transform:uppercase;
  animation:blur .75s ease-out infinite;
  text-shadow:0px 0px 5px #fff,
      0px 0px 7px #fff;
}

@keyframes blur{
  from{
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;}
}


/*================
=================*/

@media screen and (max-width: 1024px) {
    #primary-nav .container {
        width: 100%;
    }
    #primary-nav .navbar-nav > li > a {
        font-size: 12pt;
    }
    #primary-nav .navbar-nav {
        margin: 0 auto;
    }
    #welcome-mat .intro-strip h1 {
        font-size: 40pt;
    }
    #whatilike .skill-container .skill-img img {
        width: 100%;
    }
    #skills .skill-set .skill-div {
        margin-bottom: 50px;
    }
    #skills .btn.btn-primary {
        width: 50%;
        font-size: 15pt;
    }
    #work .project-item {
        display: inline;
    }
    #work .project-item .project-hover-mask {
        opacity: 0;
    }
    #aboutme .aboutme-row .img-responsive {
        width: 50%;
    }
    #aboutme .poke-btn {
        width: 100%;
    }
    #contactme .contact_field {
        margin-bottom: 0px;
    }
    #testimonials .timeline-block ul li .content {
        width: 400px;
    }
    #testimonials .timeline-block ul li .content img {
        width: 150%;
        margin-right: 20px;
    }
    #testimonials .timeline-block ul li:nth-child(even) .content {
        left: -440px;
    }
}
/*==============
MAX-WIDTH: 820px
==============*/

@media screen and (max-width: 820px) {
    #primary-nav .navbar-nav li {
        margin-right: 0px;
    }
    #testimonials .timeline-block ul li .content {
        width: 350px;
    }
    #testimonials .timeline-block ul li .content img {
        width: 120%;
        height: auto;
        margin-right: 20px;
    }
    #testimonials .timeline-block ul li:nth-child(even) .content {
        left: -390px;
    }
}
/*==============
MAX-WIDTH: 768px
==============*/

@media screen and (max-width: 768px) {
    #primary-nav #logo {
        display: none;
    }
    #work .project-item {
        display: inline;
    }
    #work .project-item .project-hover-mask {
        opacity: 0;
    }
    .container {
        width: auto;
    }
    #welcome-mat .intro-strip {
        text-align: center;
    }
    #welcome-mat .intro-strip img {
        clear: both;
        margin: 0 auto;
        float: none;
    }
    #whatilike .skill-container .skill-img img {
        width: 50%;
        margin: 0 auto;
    }
    #testimonials .timeline-block ul li {
        margin-left: 28%;
    }
    #testimonials .timeline-block ul li .content {
        width: calc(110vw-10px);
    }
    #testimonials .timeline-block ul li:nth-child(even) .content {
        left: 45px;
    }
    #testimonials .timeline-block ul li:nth-child(even) .content::before {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #C64B4B transparent transparent;
    }
}
/*==============
MAX-WIDTH: 600px
==============*/

@media screen and (max-width: 600px) {
    #primary-nav .navbar-nav li {
        width: 100%;
    }
    .project-desc-modal .modal-header {
        padding: 20px;
    }
    .project-desc-modal .modal-header .modal-close {
        margin-left: 0px;
    }
    .project-desc-modal .modal-header .project-desc-side {
        padding: 10px;
    }
    .project-desc-modal .modal-cont {
        padding: 10px;
    }
    .project-desc-modal .modal-cont .projectbtn {
        width: 80%;
    }
    #aboutme .aboutme-row .poke-btn .pokeme {
        width: 80%;
    }
    #work .nav.nav-tabs li {
        width: 100%;
    }
    #work .project-item {
        margin: 0 auto;
        display: inline;
        margin-bottom: 20px;
    }
    #testimonials .timeline-block ul li .content {
        width: 400px;
    }
    #welcome-mat .intro-strip .img-responsive {
        width: 100% !important;
    }
}
/*==============
MAX-WIDTH: 430px
==============*/

@media screen and (max-width: 430px) {
    #welcome-mat .intro-strip h1 {
        font-size: 25pt;
    }
    #welcome-mat #leftDes {
        width: 100%;
    }
    #welcome-mat #leftDes p {
        text-align: left !important;
    }
    #welcome-mat #rightDes {
        width: 100%;
    }
    #whatilike .skill-container .skill-img img {
        width: 80%;
    }
    #skills .btn.btn-primary {
        width: 100%;
    }
    #skills .btn.btn-primary:hover {
        width: 90%;
    }
    #work .nav.nav-tabs li {
        margin-bottom: 25px;
    }
    #contactme #contact_submit {
        width: 80%;
    }
    #contactme #contact_submit:hover {
        width: 90%;
    }
    footer .social-buttons ul {
        text-align: center;
    }
    footer .social-buttons ul li a {
        margin-right: 8px;
    }
    footer .footer-cred {
        text-align: center;
        margin-top: 15px;
    }
    #testimonials .timeline-block ul li {
        margin-left: 10px;
    }
    #testimonials .timeline-block ul li .content {
        width: 300px;
        padding: 5px;
    }
    #testimonials .timeline-block ul li .content img {
        width: 120%;
    }
    #aboutme .aboutme-row .aboutme-para {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/*==============
MAX-WIDTH: 320PX
==============*/

@media screen and (max-width: 320px) {
    #testimonials .timeline-block ul li {
        margin-left: 0px;
    }
    #testimonials .timeline-block ul li:nth-child(odd) .content,
    #testimonials .timeline-block ul li:nth-child(even) .content {
        left: 20px;
    }
}
/*# sourceMappingURL=responsive.css.map */