/* ---------------------------------------- */
/* ----- Blue Style----- */
/* ---------------------------------------- */

body {
    background: #ffffff;
}

::selection {
    background: #cc0000;
    color: white;   
}

::-moz-selection {
    background: #cc0000;
    color: white;
}

/* ---------------------------------------- */
/* ----- Navigation ----- */
/* ---------------------------------------- */

.nav {
    background: #333333;
}

.nav a {
    color: white !important;
}

.nav li:nth-child(2) a {
    background: #cccccc;
}

.nav li:nth-child(2) a:hover, .nav li:nth-child(2).active a {
    color: #cccccc !important;
}

.nav li:nth-child(3) a {
    background: #999999;
}

.nav li:nth-child(3) a:hover, .nav li:nth-child(3).active a {
    color: #999999 !important;
}

.nav li:nth-child(4) a {
    background: #666666;
}

.nav li:nth-child(4) a:hover, .nav li:nth-child(4).active a {
    color: #666666 !important;
}

.nav li:nth-child(5) a {
    background: #333333;
}

.nav li:nth-child(5) a:hover, .nav li:nth-child(5).active a {
    color: #333333 !important;
}

/* ---------------------------------------- */
/* ----- Resume ----- */
/* ---------------------------------------- */

/* ----- Icon Color ----- */
.ro-timeline > li .ro-icon {
    color: #cc0000;
}

/* ---------------------------------------- */
/* ----- Skills ----- */
/* ---------------------------------------- */

.sidebar h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid #cc0000;
}

.skills span {
    background: #cc0000;
}

.skills li:nth-child(even) span {
    background: #999999;
}

.skills span:hover {
    background: #333333 !important;
}

.rt-spanbg {
    background: #cc0000 !important;
}

/* ---------------------------------------- */
/* ----- Profile ----- */
/* ---------------------------------------- */

.p-details a:hover {
    background: #cc0000;
    color: white;
}

/* ---------------------------------------- */
/* ----- Social Icons ----- */
/* ---------------------------------------- */

.social a:hover {
    background: #cc0000;
    color: white;
    height: 35px;
}

/* ---------------------------------------- */
/* ----- Work ----- */
/* ---------------------------------------- */

/* ----- Filter ----- */

.gridfilter li:hover {
    color: white !important;
    background: #333333;
}

.activefilter {
    background: #cc0000 !important;
    color: white;
}

/* ---------------------------------------- */
/* ----- Single Project ----- */
/* ---------------------------------------- */

.project-nav a:hover {
    background: #333333;
    color: white;
}


/* ---------------------------------------- */
/* ----- Nivo Slider ----- */
/* ---------------------------------------- */

/* ----- Control Navigation ----- */

.theme-default .nivo-controlNav a {
  background: #333333;
  border: 2px solid #333333;
  box-shadow: inset 0 0 0 4px white;
}

.theme-default .nivo-controlNav a:hover {
  background: #cc0000;
  border: 2px solid #cc0000;
  box-shadow: inset 0 0 0 3px white;
}

.theme-default .nivo-controlNav a.active {
  background: #cc0000;
  border: 2px solid #cc0000;
  box-shadow: inset 0 0 0 2px white;
}


/* ---------------------------------------- */
/* ----- Contact ----- */
/* ---------------------------------------- */

.contact form input[type="text"]:focus, 
.contact form input[type="email"]:focus, 
.contact form textarea:focus { 
    border: 2px solid #cc0000;
    color: #999;
}

.contact form input[type="text"]:required:valid, 
.contact form input[type="email"]:required:valid, 
.contact form textarea:required:valid { 
    border: 2px solid #cc0000;
    color: #cc0000;
} 

.contact form .radio:hover {
    background: #333333;
    color: white;
}

.contact form input[type="radio"]:checked + label {
    background: #cc0000;
}

.contact form .required { 
    color: #cc0000;
}

.contact form input[type="submit"]:hover { 
    color: #fff;
    background: #cc0000;
    cursor: pointer;
}

/* ---------------------------------------- */
/* ----- Media Queries ----- */
/* ---------------------------------------- */

@media screen and (max-width: 767px) {

    .nav a {
        background: #cc0000 !important;
    }
    
    .nav li:nth-child(2) a:hover, .nav li:nth-child(2).active a,
    .nav li:nth-child(3) a:hover, .nav li:nth-child(3).active a,
    .nav li:nth-child(4) a:hover, .nav li:nth-child(4).active a,
    .nav li:nth-child(5) a:hover, .nav li:nth-child(5).active a
    {
        color: #cc0000 !important;
        background: white !important;
    }

    #nav-toggle {
        background: #cc0000 url("../../img/hamburger.gif") no-repeat 50% 50%;
    }
}