/* Theme Name: Ryan Shirley 2017 
Theme URI: http://ryanshirley.ie./ 
Author: Ryan Shirley 
Author URI: http://ryanshirley.ie/ 
Description: Wordpress Theme Template 2017 by Ryan Shirley
Version: 1.0 */ 


/* ---- Theme Setup ---- */
/*-- =============================================================================  --*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:400,700');

body {
    font-family: 'Roboto', sans-serif;
    color: #3a3a3a;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    margin-top: 48px;
}

.img-centered {display: block;margin-right: auto}


/* Wordpress Admin Bar Corretions -- */
body.admin-bar .cd-auto-hide-header {margin-top: 32px;}
body.admin-bar {margin-top: 80px;}

/* ---- General ---- */
/*-- =============================================================================  --*/


img {max-width: 100%;}
img.aligncenter {margin: 0 auto;display: block;}

.padding-top {padding-top: 100px}
.img-centered {display: block;margin: auto;}


@media (min-width: 1400px) {.container {width: 1300px;}}
@media (min-width: 1600px) {.container {width: 1500px;}}




/* ---- Section ---- */
/*-- =============================================================================  --*/

section {
    padding: 100px 0;
}

.sec-heading {margin-bottom: 90px;}

.sec-heading .heading {text-transform: uppercase;}

.sec-heading hr {
    border: 2px solid #ccc;
    width: 30px;
    margin-bottom: 20px;
    margin-left: 0;
}

section.dark {
    background: #3c3a51;
    padding: 50px 0;
}

section.dark h1, section.dark h2, section.dark h3, section.dark h4, section.dark h5, section.dark p {color: #fff;}

section.dark a {color: #ccc;}
section.dark a.btn-outline-light {color: #fff;}
section.dark a.btn-outline-light:hover {color: #3c3a51;}

.title-left {
    text-transform: uppercase;
    margin-bottom: 100px;
}

.title-left h4 {color: #3c3a51;}
.title-left h4::before {content: "― ";color: #fc4740;margin-right: 15px;}
.dark .title-left h4 {color: #fff;}
.title-left p.subtext {color: #ccc; line-height: 5px;margin-left: 40px;}

/* ---- Text ---- */
/*-- =============================================================================  --*/

h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Condensed', sans-serif; font-weight: 700;color: #000; letter-spacing: 1.5px;}
h2 {font-size: 38px;}
h3 {font-size: 18px;}


.alternate-text {font-family: 'Roboto Mono', monospace;}

.red {color: #fe4641;}
.blue {color: #01b9be;}

.text-cap { text-transform: uppercase; }


a {
    color: #fc4740; 
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover, a:active, a:focus {text-decoration: none; color: #fc4740;}

b, strong {
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
}

/* ---- Buttons ---- */
/*-- =============================================================================  --*/


.btn {
    padding: 6px 30px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
}

.btn-default {
    color: #fe4641;
    background-color: #fff;
    border-color: #fff;
}

.btn-default:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #fe4641;
}

.btn-outline-light {
    border: 1px solid #fff;
    color: #fff;
}

.btn-outline-light:hover {
    color: #3c3a51;
    background: #fff;
}

.btn-outline-dark {
    border: 1px solid #000;
    color: #000;
}

.btn-outline-dark:hover {
    color: #fff;
    background: #000;
}

.btn-white {
    color: #000;
    background: #fff;
    border: 2px solid #fff;
}

.btn-white:hover {
    color: #fff;
    background: transparent;
}

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


.navbar-brand {
    font-size: 32px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e2129 !important;
    line-height: 0;
}


.navbar-default {
    background: #fff;
    border: none;
    padding: 20px 0;
    height: 55px;
}

.navbar-default .navbar-nav>li>a {
    color: #3c3a51;
    text-transform: uppercase;
    padding: 5px 25px;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #fe4641;
}

.navbar-default .navbar-nav>li>a:nth-child(2) {
    margin-top: -30px;
}

.navbar-default .navbar-nav>.current_page_item>a, .navbar-default .navbar-nav>.current_page_item>a:focus, .navbar-default .navbar-nav>.current_page_item>a:hover {
    color: #3c3a51;
    text-decoration: none;
    background: none;
    border: 1px solid #3c3a51;
    padding: 5px 25px;
}


/* -------------------------------- 

Primary style

-------------------------------- */

/* -------------------------------- 

1. Auto-Hiding Navigation - Simple

-------------------------------- */
.cd-auto-hide-header {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.1);
}

.cd-auto-hide-header::after {
    clear: both;
    content: "";
    display: block;
}

.cd-auto-hide-header.is-hidden {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

@media only screen and (min-width: 1024px) {
    .cd-auto-hide-header {
        height: 80px;
    }
}

.cd-auto-hide-header .logo,
.cd-auto-hide-header .nav-trigger {
    position: absolute;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cd-auto-hide-header .logo {
    left: 5%;
    font-size: 38px;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
}

.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo a:hover {color: #000;}

.cd-auto-hide-header .logo a,
.cd-auto-hide-header .logo img {
    display: block;
}

.cd-auto-hide-header .nav-trigger {
    /* vertically align its content */
    display: table;
    height: 100%;
    padding: 0 1em;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #3c3a51;
    font-weight: 300;
    right: 0;
    border-left: 1px solid #f2f2f2;
}

.cd-auto-hide-header .nav-trigger span {
    /* vertically align inside parent element */
    display: table-cell;
    vertical-align: middle;
}

.cd-auto-hide-header .nav-trigger em,
.cd-auto-hide-header .nav-trigger em::after,
.cd-auto-hide-header .nav-trigger em::before {
    /* this is the menu icon */
    display: block;
    position: relative;
    height: 2px;
    width: 22px;
    background-color: #25283D;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cd-auto-hide-header .nav-trigger em {
    /* this is the menu central line */
    margin: 6px auto 14px;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
}

.cd-auto-hide-header .nav-trigger em::before,
.cd-auto-hide-header .nav-trigger em::after {
    position: absolute;
    content: '';
    left: 0;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.cd-auto-hide-header .nav-trigger em::before {
    /* this is the menu icon top line */
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}

.cd-auto-hide-header .nav-trigger em::after {
    /* this is the menu icon bottom line */
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
}

@media only screen and (min-width: 1024px) {
    .cd-auto-hide-header .nav-trigger {
        display: none;
    }
}

.cd-auto-hide-header.nav-open .nav-trigger em {
    /* transform menu icon into a 'X' icon */
    background-color: rgba(255, 255, 255, 0);
}

.cd-auto-hide-header.nav-open .nav-trigger em::before {
    /* rotate top line */
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.cd-auto-hide-header.nav-open .nav-trigger em::after {
    /* rotate bottom line */
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cd-primary-nav {
    display: inline-block;
    float: right;
    height: 100%;
    padding-right: 5%;
}

.cd-primary-nav > ul {
    position: absolute;
    z-index: 2;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: none;
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}

.cd-primary-nav > ul a {
    /* target primary-nav links */
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 5%;
    padding-top: 5px;
    color: #3c3a51;
    border-top: 1px solid #f2f2f2;
    font-weight: 300;
    text-transform: uppercase;
}

.cd-primary-nav > ul a:hover,
.cd-primary-nav > ul a.active {
    color: #fc4740;
}

.cd-primary-nav > ul .current-menu-item a {
    color: #3c3a51;
    border: 1px solid #3c3a51;
    padding: 5px 25px;
}

@media only screen and (min-width: 1024px) {
    .cd-primary-nav {
        /* vertically align its content */
        display: table;
    }
    .cd-primary-nav > ul {
        /* vertically align inside parent element */
        display: table-cell;
        vertical-align: middle;
        /* reset mobile style */
        position: relative;
        width: auto;
        top: 0;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
    }
    .cd-primary-nav > ul::after {
        clear: both;
        content: "";
        display: block;
    }
    .cd-primary-nav > ul li {
        display: inline-block;
        float: left;
        margin-right: 2.5em;
    }
    .cd-primary-nav > ul li:last-of-type {
        margin-right: 0;
    }
    .cd-primary-nav > ul a {
        /* reset mobile style */
        height: auto;
        line-height: normal;
        padding: 0;
        padding-top: 5px;
        border: none;
    }
}

.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
    /* 
  	show primary nav - mobile only 
  	:target is used to show navigation on no-js devices
  */
    display: block;
}

@media only screen and (min-width: 1024px) {
    .nav-open .cd-primary-nav ul,
    .cd-primary-nav ul:target {
        display: table-cell;
    }
}

@media only screen and (max-width: 1023px) {
.cd-primary-nav > ul {
        padding: 0 62px 30px 25px;
    }
}

ul#menu-main-menu {
    list-style: none;
    padding-left: 0;
}







/*-- =============================================================================  --*/
/* ------------------------------------ Home Page ----------------------------------- */
/*-- =============================================================================  --*/




/* Updated Styles for new home page 2017 */

/* -- Services -- */

.services {margin-top: 30px;}

.services .service .icon, .services .service {text-align: center;}

.services .service, .services .service:hover {
    background: transparent;
    padding: 10px;
}

.services .service .icon i.fa {
    padding: 34px;
    border-radius: 50%;
    border: 3px solid #666;
    font-size: 35px;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -ms-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

.services .service .icon i.fa:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.services .service h3 {text-transform: uppercase;}

/* -- About Ryan Shirley -- */

.home-about {
    background: #000;
    padding: 50px 0;
    color: #fff;
    margin-bottom: 70px;
}

.home-about h2 {
    color: #fff;
    text-transform: uppercase;
}

.home-about p.about {margin: 35px 0;}

.home-about .btn {padding: 20px 55px;}

.home-about .grid {padding: 40px 20px;}

.home-about .grid .grid1, .home-about .grid .grid2, .home-about .grid .grid3, .home-about .grid .grid4 {
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
}

.home-about .grid .grid1, .home-about .grid .grid2 {border-bottom: 1px solid #666;}

.home-about .grid .grid1, .home-about .grid .grid3 {border-right: 1px solid #666;}

.home-about .grid p.info {
    color: #f84b3b;
    font-size: 38px;
    line-height: 49px;
}

.home-about .grid p.title {font-size: 18px;}

/* -- The Blog-- */

.blog .article {margin-bottom: 70px;}

.blog .article .image-container {
    height: 360px;
    width: 100%;
    overflow: hidden;
}

.blog .article .image {
    background-position: center center;
    background-size: cover;
    margin-bottom: 30px;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.blog .article .image-container:hover .image,
.blog .article .image-container:focus .image {
  transform: scale(1.15);
}

.blog .article h3 a, .blog .article a.more {
    text-transform: uppercase;
    color: #000;
}

.blog .article h3 a:hover, .blog .article a.more:hover {color: #f84b3b;}

.blog .article hr {
    border: 2px solid #ccc;
    width: 30px;
    margin: 12px 0 7px 0;
    margin-left: 0;
}

.blog .article p {margin-bottom: 25px;}

/* -- Social Media -- */

.social-media {
    background: #000;
    color: #fff;
    padding: 70px 0;
    margin-bottom: 70px;
}

.social-media h2 {
    color: #fff;
    font-size: 49px;
    line-height: 45px;
    text-transform: uppercase;
}

.social-media .icon i {
    background: #ffffff;
    border-radius: 50%;
    padding: 30px;
    width: 110px;
    height: 110px;
    font-size: 50px;
    color: #000;
    margin-bottom: 8px;
    border: 2px solid #fff;
    text-align: center;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -ms-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

.social-media .icon i:hover {
    background: #000;
    color: #fff;
}

.social-media .col-sm-2.platform {
    text-align: center;
    padding: 30px 15px;
}

.platform {text-align: center;}

/* -- Client Logos -- */

.client-logos {margin-bottom: 70px;}

.client-logos img {
    padding: 20px;
    border: 1px solid #fff;
    -o-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.client-logos img:hover {
    border: 1px solid #ccc;
    padding: 20px;
    opacity: 0.5;
}

/*-- =============================================================================  --*/
/* ------------------------------------ About Page ----------------------------------- */
/*-- =============================================================================  --*/


.hero-about {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    color: #fff;
}

.hero-about h2 {
    color: #ff4643;
    text-transform: uppercase;
    font-size: 30px;
    margin-top: 150px;
}

.hero-about h1 {
    color: #fff;
    text-transform: uppercase;
    display: table-caption;
    line-height: 70px;
    font-size: 60px;
    margin-bottom: 60px;
}

.experience .year {
    font-weight: bold;
    font-size: 17px;
}

.experience .info {
    margin-top: 30px;
}

.experience .heading {
    margin-bottom: 50px;
}

.experience .heading p.title {
    text-transform: uppercase;
    color: #ff4b44;
    font-weight: bold;
    font-size: 30px;
}

.experience .heading p.subtext {
    text-transform: uppercase;
    font-size: 60px;
    line-height: 70px;
    font-weight: bold;
}

.experience ul {
    list-style: none;
    padding-left: 0;
}

.experience ul li {
    background: #3c3a52;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
}

.experience ul li .box {
    border: 1px solid #ccc;
    padding: 10px 30px;
}


.experience ul li span.heading {
    color: #ff4b44;
    text-transform: uppercase;
    margin-right: 30px;
    font-weight: 400;
}



/*-- =============================================================================  --*/
/* ------------------------------------- Porftolio ---------------------------------- */
/*-- =============================================================================  --*/


.hero-portfolio {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px 0;
}

.hero-portfolio .heading, .hero-portfolio .heading h2 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
}



.portfolio-listing {
    background: #f0f3f2;
}

.portfolio-listing .project {
    background: #fdfdfd;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    margin-bottom: 30px;
}

.portfolio-listing .project:hover {
    background: #f4f6f7;
}

.portfolio-listing .project:hover .info {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}


.portfolio-listing .project .info {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.portfolio-listing .project ul, .portfolio-single .work {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.portfolio-listing .project ul li, .portfolio-single .work li {
    display: inline-flex;
    padding: 0px 15px 15px 0;
}


.portfolio-listing .project ul li:before, .portfolio-single .work li:before {
    content: "•"; 
    padding-right: 8px;
    color: #fc4740;
    line-height: 0px;
}

.portfolio-listing .project img {
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.portfolio-listing .project:hover img {
    opacity: 0.7;
}

.portfolio-listing .project .work h2, .portfolio-single .work h2 {
    font-size: 14px;
    line-height: 0px;
    text-transform: uppercase;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
}

.portfolio-listing .project h3, .portfolio-listing .project h2, .portfolio-single .work h2 {
    margin-top: 0;
}

.portfolio-single {
    background: #f0f3f2;
}

.portfolio-single .project-image {
    border: 1px solid #e8e8e8;
}

.portfolio-single .info {
    background: #fdfdfd;
    border: 1px solid #e8e8e8;
    padding: 40px 30px;
    margin-bottom: 30px;
}

.portfolio-single .heading {
    text-transform: uppercase;
    margin-bottom: 20px;
}

.portfolio-single .heading:before {
    content: "―"; 
    padding-right: 15px;
    color: #fc4740;
}

.portfolio-single .description {
    margin-bottom: 40px;
}

.portfolio-single .description:last-child {
    margin-bottom: 0;
}

.portfolio-single .cta {
    background: #01b9be;
    color: #fff;
    margin-top: 100px;
    padding: 5px 20px;
    text-align: left;
}

.portfolio-single .cta .row {
    border: 1px solid #fff;
    padding: 20px 30px;
}

.portfolio-single .cta h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 35px;
}

.portfolio-single .cta a {
    background: #fff;
    color: #01b9be;
    border-color: #fff;
}

.portfolio-single .cta a:hover {
    color: #fff;
    background-color: #0daaaf;
    border-color: #0daaaf;
}

.portfolio-single .cta .contact a {
    padding: 11px 40px;
    width: 100%;
    font-size: 24px;
}

.portfolio-single .next a {
    border: 1px solid #fff;
    float: right;
    padding: 7px 20px;
    font-weight: 400;
}

.portfolio-single .all {
    text-align: center;
}

.portfolio-single .previous a {
    border: 1px solid #fff;
    float: left;
    padding: 7px 20px;
    font-weight: 400;
}



/*-- =============================================================================  --*/
/* ------------------------------------- Service ------------------------------------ */
/*-- =============================================================================  --*/


.hero-services {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px 0;
}

.hero-services .heading {
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 50px;
    margin-bottom: 10px;
    letter-spacing: 5px;
}

.hero-services .sub-heading {
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 5px;
}


.service {
    background: #f0f3f2;
    margin-bottom: 50px;
    -o-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.service:hover {
    background: #e5e5e5;
}

.service img {
    -o-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.service:hover img {
    opacity: 0.7;
}

.service .info {
    padding: 20px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    -o-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.service:hover .info {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.service .info .title {
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 20px;
}

.service .info .description {
    color: #9e9e9e;
    font-weight: 300;
    line-height: 27px;
    margin-bottom: 20px;
}


.process {
    background: #ff5744;
    color: #fff;
    padding: 100px 15px 0px 15px;
}

.process .heading {
    color: #fff;
    font-size: 50px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.process .heading, .process .sub-heading {text-align: center;}

.process .dev-process .step h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
}

.process .dev-process .step {
    padding: 40px 15px;
    -o-transition: all .1s linear;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
    margin-top: 15px;
    margin-bottom: 15px;
}


.process .dev-process .step:hover {
    background: rgba(0,0,0,0.1);
}

.process .dev-process .step p {
    line-height: 25px;
}

.process .step .fa {
    font-size: 25px;
    color: #fff;
}

/*-- =============================================================================  --*/
/* ---------------------------- Portfolio - Photography ----------------------------- */
/*-- =============================================================================  --*/

.photography-listing {
	background: #222;
	padding: 0;
    color: #fff;
}

.photography-listing h2, .photography-listing h3 {color: #fff;}

.photography-listing .project img {
	max-width: 100%;
	height: 600px;
}

.photography-listing .project .image {padding: 0;}
.photography-listing .project:nth-child(odd) .image {float: left;}
.photography-listing .project:nth-child(even) .image {float: right;}

.photography-listing .project .info {padding: 50px;}

.photography-listing .project .main-image {
    background-size: cover;
    height: 600px;
    background-position: center center;
}

.photography-listing .project .info .type {
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	font-size: 14px
}

.photography-listing .project .info p {
	padding-bottom: 20px;
}

.photography-listing .project h2 {
	text-transform: uppercase;
}

.photography-listing .info hr {
    margin-top: 15px;
    margin-bottom: 60px;
    border-top: 1px solid #504f4f;
    margin-left: 0;
    width: 50px;
}

/*-- =============================================================================  --*/
/* --------------------------------------- Blog ------------------------------------- */
/*-- =============================================================================  --*/

.blog-title-heading {
    text-align: center;
    padding: 40px 15px;
}

ul.breadcrumbs {
    list-style: none;
    padding: 0;
}

ul.breadcrumbs li {
    display: inline;
    padding: 0 4px;
    text-transform: uppercase;
}

span.embed-youtube iframe {
    max-width: 100%;
}

/* -- Updated Blog -- */
article {
    margin-bottom: 40px;
}

article .content {
/*    background: #f8f8f8;*/
    min-height: 420px;
    padding: 20px 30px;
}

article .image {
    padding-right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

article .image-container {
    height: 420px;
    width: 100%;
    overflow: hidden;
}

article .image-container:hover .image,
article .image-container:focus .image {
  transform: scale(1.15);
}

article hr {
    margin-top: 70px;
    border-color: rgba(0,0,0,0.1);
}

article .meta {
    color: #767676;
    font-size: 12px;
}

article .meta strong {
    color: #535353;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

article h2.blog-title {
    text-transform: uppercase;
    font-size: 22px;
    margin-bottom: 40px;
    margin-top: 15px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

article h2.blog-title:hover, .article-small h3.blog-title:hover {
    color: #ff4b44;
}

.article-small {margin-bottom: 10px;}
.article-small h3.blog-title {
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

article p.category a {
    text-transform: uppercase;
    font-size: 12px;
}

.article-small .image-container {
    height: 200px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

.article-small .image {
    background-position: center center;
    background-size: cover;
    margin-bottom: 30px;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.article-small .image-container:hover .image,
.article-small .image-container:focus .image {
  transform: scale(1.15);
}

.article-small a.more, article a.more {
    text-transform: uppercase;
    color: #000;
}

.article-small a.more:hover, article a.more:hover {color: #f84b3b;}

.paginate {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.page-numbers {
    background: #000;
    border: 1px solid #000;
    padding: 5px 10px;
    color: #fff;
    margin: 0 0px;
}

.page-numbers:hover {
    background: transparent;
    padding: 5px 10px;
    color: #000;
    margin: 0 0px;
}

.page-numbers.current {
    background: transparent;
    color: #000;
}


/* -- Single Blog -- */
.hero-blog {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 200px 0;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}

.hero-blog h1 {
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    line-height: 60px;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.hero-blog p.meta {
    text-transform: uppercase;
}

.single-article {margin-bottom: 40px;}

.single-article h1.heading, .single-article h2.heading, .single-article h3.heading, .single-article h4.heading, .single-article h5.heading, .single-article h6.heading {
    font-weight: 100;
    margin-bottom: 40px;
}

.sharedaddy.sd-sharing-enabled {
    margin: 50px 0;
}

/* -- Sidebar -- */
.widget-area section {
    background: #3c3a51;
    padding: 100px 40px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    background-position: center center;
    background-size: cover;
}

.widget-area section a {
    margin-top: 30px;
}

.widget-area section h5 {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
}

.widget h3 {
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 2px;
    background: #f8f8f8;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.widget ul {
    list-style: none;
    padding-left: 0;
}

.widget ul li {
    line-height: 30px;
}

/*-- =============================================================================  --*/
/* -------------------------------------- Forms ------------------------------------- */
/*-- =============================================================================  --*/


section.form {
    background: #ff4b44;
}

.form .heading {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 100px;
}

.form .heading h2, .form .heading p {color: #fff;letter-spacing: 5px;}

.form .ninja-forms-cont {
    background: #fff;
    padding: 50px 30px;
    -webkit-box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
}

.form .ninja-forms-cont input[type="submit"] {
    background: #ff4b44;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 70px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.form .ninja-forms-cont input[type="submit"]:hover {
    background: #e2453e;
}

.form .ninja-forms-cont label {
    text-transform: uppercase;
    margin-top: 20px;
    font-weight: 400;
    letter-spacing: 0.7px;
}

.ninja-forms-req-symbol {
    color: #ff4b44;
}

.form .ninja-forms-cont input, .form .ninja-forms-cont textarea {
    border: none;
    border-bottom: 2px solid #ccc;
    color: #3c3a51;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    min-height: 40px;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.form .ninja-forms-cont input:active, .form .ninja-forms-cont input:focus, .ninja-forms-cont textarea:active, .ninja-forms-cont textarea:focus {
    outline: none;
    border-bottom: 6px solid #3c3a51;
}

.ninja-forms-required-items {
    display: none;
}

.form .ninja-forms-cont textarea { resize: vertical; }

.form .sidebar {
    background: #fff;
    padding: 30px 20px;
    -webkit-box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 38px -9px rgba(0,0,0,0.75);
}

.form .sidebar .heading {
    text-align: left;
    margin-bottom: 20px;
}


/*-- =============================================================================  --*/
/* -------------------------------- Land Page Elements ------------------------------ */
/*-- =============================================================================  --*/

/* 0. General Section Heading
   ========================================================================== */
.landing-heading {text-align: center; margin-bottom: 100px;}
.landing-heading h2 {text-transform: uppercase;}
.landing-heading hr {width: 100px; border-width: 3px;}
.landing-heading p {color: #777777; max-width: 600px;margin: 0 auto;}

/* 1. 3 Column Phone Middle No Icons
   ========================================================================== */
.features-no-icons .left {text-align: right;}
.features-no-icons .right {text-align: left;}


/* 2. CTA - Large Text & Button w/ background image w/gradient
   ========================================================================== */
.cta-large {text-align: center; text-transform: uppercase; color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.cta-large .content {padding: 200px 0;font-family: 'Montserrat', sans-serif;}
.cta-large .text-sub {font-size: 40px;letter-spacing: 5px;font-weight: 900;}
.cta-large .text-main {font-size: 160px;line-height: 120px;font-weight: 900;letter-spacing: 20px;}
.cta-large .btn {font-size: 30px; border-width: 3px; margin-top: 80px; letter-spacing: 10px;}

/* 3. Testimonial Simple
   ========================================================================== */
.testimonial span.quote {font-size: 80px;}
.testimonial p {color: #777777;}
.testimonial span.client-name {font-size: 17px; font-weight: bold;}
.testimonial span.business {font-size: 17px; font-weight: 100; color: #4582ff;}


/*-- =============================================================================  --*/
/* -------------------------------------- Footer ------------------------------------ */
/*-- =============================================================================  --*/

footer {
    background: #000;
    padding: 50px 0;
    color: #fff;
}

footer .heading h2 {
    font-size: 38px;
    line-height: 35px;
    color: #fff;
    text-transform: uppercase;
}

footer .heading {margin-bottom: 30px;}
footer .heading h3 {color: #fff; text-transform: uppercase;}

footer hr {border-color: #333;}

footer hr.red {
    margin-bottom: -21px;
    border-color: #fe4641;
    z-index: 2;
    width: 30px;
    margin-left: 0;
    position: relative;
}

footer ul.list {
    padding-left: 0;
    color: #fff;
    list-style: none;
    margin: 0;
}

footer ul.list li {
    padding: 5px 0;
    text-transform: uppercase;
    border-bottom: 1px dashed #333;
    line-height: 40px;
}

footer ul.list li a {
    color: #fff;
    font-weight: 400;
}

footer ul.list li a:hover {
    color: #f84b3b;
}

footer ul.list li:last-child {border-bottom: none;}

footer ul.social-media {
    list-style: none;
    padding: 0;
}

footer ul.social-media li {
    display: inline;
    font-size: 20px;
    line-height: 20px;
    color: #ccc;
    border: 3px solid #333;
    border-radius: 50%;
    padding: 10px 14px;
    width: 49px;
    height: 49px;
    margin: 0 5px 10px 0;
    text-align: center;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -ms-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

footer ul.social-media li:hover {
    color: #fff;
    border-color: #fc4740;
    background: #fc4740;
}

/* Twitter feed styles */


/*-- =============================================================================  --*/
/* --------------------------------------- 404 -------------------------------------- */
/*-- =============================================================================  --*/

.error {
background: url(assets/images/404.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.error h1, .error h2, .error {
    color: #fff;
    letter-spacing: 5px;
}

.error .title {
    font-size: 70px;
    font-weight: 600;
}

.error .sub-title {
    font-size: 24px;
    
}

.error p {
    margin-top: 40px;
}

.error ul {
    list-style: none;
    padding: 0;
}

.error ul li a {
    color: #fe4641;
    text-transform: uppercase;
    line-height: 33px;
}



/*-- =============================================================================  --*/
/* --------------------------------- Media Query's ---------------------------------- */
/*-- =============================================================================  --*/


/* --- Medium Devices */
@media (max-width: 1199px) {
    
    .blog .article .image-container {height: 290px;}
    
    .hero-about {padding: 30px 0;background-image: none !important;background: #333146;}
    .testimonial img {display: none;}
    .testimonial-home .title-left {margin-bottom: 0;}
    .testimonial .client {margin-top: 50px;margin-left: 0;}
    .dark.testimonial-home {padding-bottom: 70px;}
    .portfolio-single .project-image {margin-bottom: 30px;}
}
    
/* --- Small Devices */
@media (max-width: 1023px) {
    body {margin-top: 60px;}    
    .cd-primary-nav > ul .current-menu-item a {color: #fff;background: #333146;}
    .cd-primary-nav > ul a {height: auto;font-size: 18px;letter-spacing: 3px;}
    .cd-primary-nav > ul .current-menu-item a {padding: 0 45px;}
    
    .intro-home {background: none;}
    .intro-home .about, .intro-home .info {min-height: 350px;}
}
    

/* --- Small Devices */
@media (max-width: 991px) {
    .blog .article .image-container {height: 220px;}
    
    .experience .heading p.subtext {font-size: 30px;line-height: 40px;}
    .experience .heading p.title {font-size: 22px;line-height: 10px;}
    .experience .heading {margin-bottom: 0;}
}


/* --- Mobile --- */
@media (max-width: 767px) {
    .home-about .grid .grid1, .home-about .grid .grid2, .home-about .grid .grid1, .home-about .grid .grid3 {border: none;}
    
    .sec-heading, .home-about, .blog .article, .blog .article {margin-bottom: 30px;}
    
    .blog .article, article h2.blog-title {
        margin-bottom: 10px;
    }
    
    .platform {
        padding: 40px 0;
        text-align: center;
    }
    
    .home-about .btn {width: 100%;}
    
    article .content {min-height: auto;}
    
    footer {padding: 20px; 0}
    
    section {padding: 40px 0;}    
    .hero-services, .hero-portfolio {padding: 40px 0;} /* -- Hero Images Previous 70px; -- */
    .service {margin-bottom: 40px;}
    .process .dev-process .step {padding: 15px;}
    h2, .process .heading, .hero-services .heading {font-size: 30px} /* -- Previous 50px; -- */
    
    .portfolio-single .cta {margin: 30px 15px;}
    .portfolio-single .next a, .portfolio-single .previous a {float: none;}
    .portfolio-single .cta .next, .portfolio-single .cta .previous, .portfolio-single .cta .all {text-align: center;margin: 10px 0;}
    .portfolio-single .cta .row {text-align: center;}
    
    .photography-listing .project .main-image {height: 250px;}
    .photography-listing .project:nth-child(odd) .image, .photography-listing .project:nth-child(even) .image {float: none;}
    
    .hero-about h2 {margin-top: 60px;}
    .experience .heading p.subtext {font-size: 30px;line-height: 40px;} /* -- Previous 60px + 70px; -- */
    .experience .heading p.title {font-size: 22px;line-height: 5px;} /* -- Previous 30px; -- */
    .experience img {display: block;margin: 0 auto;margin-top: 50px;}
    .experience .heading {margin-bottom: 30px;}
    
    
    .intro-home .about {background: #fd4841;}
    .intro-home .info {background: #eff3f2;padding: 20px 30px;}
    .intro-home .about, .intro-home .info {min-height: auto;}
    .testimonial .client {margin-top: 40px;margin-left: 0;}
    .dark.testimonial-home {padding-bottom: 50px;}
    .testimonial .btn-outline-light {width:100%;}
    .client-logos img {display: block;margin: 0 auto 40px auto;}
    
    span.embed-youtube iframe {height: auto !important;}
    
}