/*
Theme Name: IWHQ Vanilla
Theme URI: http://www.irishwebsitehq.com
Description: IWHQ Vanilla
Version: 1
Author: Mark O'Leary
Author URI: http://www.irishwebsitehq.com
*/



/* ================ GENERAL RULES ======================= */
body {
    background: #6e6e6e;
    background-size: cover;
font-size:16px;
font-family: Roboto, sans-serif;
    font-weight:400;
    color:#fff;
}

/* Headings
================================================== */
h1, h2, h3{
    font-weight:600;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

/* ================ RESPONSIVE IMAGES ======================= */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* ================ LINKS ======================= */
a{
	outline: 0;
}

a.button:hover{
    text-decoration: none;
}

/* ================ HEADER ======================= */
#top{
    background: #6e6e6e;
    height:44px;
    color:#fff;
    font-weight:400;

}

#top .social{
    padding-top:8px;
}

#top .contact{
    padding-top:8px;
}

#top .contact img{
    margin: 0 6px;
    vertical-align: middle;
}

#top a{
    color:#fff;
    text-decoration: none;
}
#top .right {
    text-align: right;
    padding-top: 10px;
}

#top .right img{
    margin: 0 6px 0 18px;
}

header{
    background: rgba(110,110,110,0.9);
    background-size: cover;
    padding: 16px 0;
    position: fixed;
    top: 0;
    height: 110px;
    z-index: 9;
    width: 100%;
}



/* Logo
================================================== */
.logo-nav{
    /*align-items: center;
    display: flex;
    justify-content: space-between;*/
}

#logo {
    height: 75px;
    width: auto;
}


/* Navigation
================================================== */
nav {
    float: right;
    margin-right: -15px;
    padding-top: 15px;
	position:relative;
}

nav ul{
    margin:0;
    padding:0;
    list-style:none;
}

nav > ul > li{
	position:relative;
	float:left;
    padding:10px 15px;
}

nav > ul > li > a {
    color:#4c4c4c;
    text-transform: uppercase;

    text-decoration: none;
}

nav > ul > li > a:hover, nav li a:active {
    text-decoration: none;
}

nav ul {
        text-align:center;
    }
    nav ul li {
        display:inline-block;
    }
    nav ul > li a {
        display:block;
        letter-spacing:1px;
        color:#fff;
        text-transform:uppercase;
    }
     nav ul.sub-menu {
        position:absolute;
        padding:0px;
        left:0px;
        width:100%;
        background:#000;
        display:none;
        z-index:300;
     }
      nav ul.sub-menu > li  {
        text-align:left;
        vertical-align:top;
        display:inline-block;
        text-transform:uppercase;
          padding:5px 15px;
       }
     nav ul.sub-menu > li a  {

         color:#fff;
         text-decoration:none;
     }

        nav ul > li:hover ul.sub-menu {
            display:inline-block;
       }

         nav ul > li a:hover, nav ul > li.current_page_item a {
            border-bottom:2px solid #d90000;
             color:#fff;
             padding-bottom: 4px;
        }

/* ================ CONTENT ======================= */
.features {
    background-color: #46434e;
    color: #fff;
    margin:80px auto;
    padding: 0 30px;
}

.features .col-sm-4{
    padding: 80px 40px;
    text-align:center;
}
#content{
    padding: 20px 0px 40px;
}

.projects article{
    display: block;
    clear: both;
}

#home-content aside{
    padding: 20px 40px;
    font-size: 20px;
    font-weight: 400;
}

#home-content aside h2{
    font-size:48px;
    padding: 0;
    text-transform: uppercase;
}

#home-content aside a.button, footer a.button, input.wpcf7-submit{
    background-color: #d90000;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 24px;
    margin: 12px 0;
    display: inline-block;
    border:0;
}



main#projects{
    background-color:#f5f6f7;
    padding:40px 0;
}


#projects h2, #clients h2, #content h1, #content h2, #testimonials h2, #news-press h2, footer h2{
    color:#fff;
    font-size: 24px;
    border-bottom: 3px solid #d90000;
    text-transform: uppercase;
    display: inline-block;
    padding-bottom: 9px;
    margin-bottom: 20px;
    margin-top: 40px;
}

#content h1{
    font-size:32px;
}

#projects .pic, #projects section {
    padding: 0;
    height: 242px;
}

#projects section {
    padding:20px 30px 40px;
    background: url(images/project-bg.jpg) repeat-x top left;
    color:#fff;
    font-weight:400;
}

#projects h3 {
    font-size: 24px;
    border-bottom:1px solid #FFB03B;
    padding-bottom: 8px;
}

#projects strong {
    padding:12px 0;
}

#projects a.arrow{
    color:#FFB03B;
    background: url(images/arrow-right.png) no-repeat center right;
    padding-right: 24px;
    position: absolute;
    bottom:30px;
}

.expertise {
    background-color: #fff;
    min-height: 484px;
    position: relative;
    left: -15px;
    padding: 20px 30px;
}

.expertise ul, .expertise li {
    margin: 0;
    padding: 0;
    list-style: none;
}


.expertise li{
    padding: 17px 0;
    border-bottom:1px solid #e2e5e7;

}

.expertise li a{
    color:#193441;
    text-indent:10px;
    display: inline-block;
}

.expertise li a:hover{
    color:#193441;
    text-decoration: none;
    text-indent:7px;
    border-left:3px solid #FFB03B;
}

#clients{
    padding:40px 0;
}

/*.testimonials article{
    background-color: #46434e;
}

.testimonials.row > [class*='col-sm-4'] {
    width:30%;
    margin-right: 2%;
    margin-bottom:20px;
    min-height:480px;
    padding:30px;
}*/

/** TESTIMONIALS **/
.testimonial {
    width: 30%;
    float: left;
    margin-right: 3%;
    color:#666;
}

.testimonial .testimonial-content{
    padding: 35px 25px 35px 50px;
    margin-bottom: 35px;
    background: #fff;
    border: 1px solid #f0f0f0;
    position: relative;
}
.testimonial .testimonial-content:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    bottom: -10px;
    left: 22px;
    transform: rotate(45deg);
}
.testimonial-content .testimonial-icon{
    width: 50px;
    height: 45px;
    background: #ff4242;
    text-align: center;
    font-size: 22px;
    color: #fff;
    line-height: 42px;
    position: absolute;
    top: 37px;
    left: -19px;
}
.testimonial-content .testimonial-icon:before{
    content: "";
    border-bottom: 16px solid #e41212;
    border-left: 18px solid transparent;
    position: absolute;
    top: -16px;
    left: 1px;

}
.testimonial img{
    text-align:center;
}

.testimonial img.letter{
    width:200px;
    height:auto;
    margin:0 auto;
}

.testimonial img.letter:hover{
    -webkit-box-shadow: 4px 4px 12px 0px rgba(170,170,170,1);
    -moz-box-shadow: 4px 4px 12px 0px rgba(170,170,170,1);
    box-shadow: 4px 4px 12px 0px rgba(170,170,170,1);
}


ul#expertise{
    margin:30px 0 0 0;
}
ul#expertise li {
    list-style: none;
    display: inline-block;
    margin:0 4px;
}

ul#expertise li a{
    color:#193441;
}

/*input.wpcf7-submit {
    color:#193441;
    background-color:#fff;
}*/

input[type=text], input[type=email], textarea{
    border:1px solid #bbb;
    padding:4px;
    width:100%;
    max-width:410px;
}
#news-press{
    background: rgba(25, 52, 65, 0.3);

}

#news-press a.arrow{
    color:#FFB03B;
    background: url(images/arrow-right.png) no-repeat center right;
    padding-right: 24px;
}

#news-press .post_thumbnail.wp-post-image {
    border: 3px solid #fff;
    height: 220px;
    object-fit: cover;
}


.banner {
    background: #000 url("/wp-content/uploads/2019/08/main-photo-3.jpg") no-repeat center center;
    background-size: auto;
    opacity: 0.9;
    height: 200px;
}

.banner-inner {
    padding: 10px 20px;
    color: #fff;
    padding: 40px 0;
}

.banner-inner a{
    color:#fff;
}

.banner-inner menu{
    margin:0;
    padding:0;
}

.banner-inner h1{
    text-transform: uppercase;
}

#gallery.services img{
    width:170px;
    height:170px;
    object-fit: cover;
    object-position: center center;
    margin:0 0 3px;
}
/*
main .intro{
    text-align:center;
    padding-bottom:30px;
}

.intro h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    font-size: 26px;
}

main .feature{
    background-color:#fff;
}

main .feature.threes{
    text-align:center;
    padding:20px 0;
}

.feature h3{
    border-bottom: 2px solid #eee;
    display: inline-block;
    padding-bottom: 8px;
    font-size: 20px;
}

main .feature.twos{
    padding:20px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

main .feature.twos img{
    float:left;
    margin-right:30px;
}*/

.people .bio-pic{
    border: 4px solid #fff;
    width: 100%;
}

.people strong.name{
    font-weight: 700;
    font-size: 21px;
    padding: 8px 0;
    display: inline-block;
}

.services section{
    padding:40px 0 80px 0;
}
.services section:nth-child(odd) {
    background-color: #858585;
}


#content .projects article h2{
    margin-top: 12px;
}


#clients article{
    background-color: #fff;
    padding: 10px 10px 0;
    text-align: center;
}

#clients article img {
    height: 60px !important;
    width: auto;
    margin: 0 40px;
}

#content a, #content a:visited, #content a:hover, #content a:active, footer a, footer a:hover{
    color: #fff;
}


.contact .phone, .contact .email {
    width: 16px;
    height: auto;
}

/* ================ Slideshow text ======================= */
.flexslider aside h1{
    font-size:32px;
     -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
     animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
 }

.flexslider aside h3{
    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s both;
}

.flexslider aside h2{
    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 6s both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 6s both;
}

.flexslider aside h2 + h2{
    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 7s both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 7s both;
}

.flexslider aside h2 + h2 + h2{
    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s both;
}

.flexslider aside a.button{
    -webkit-animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 9s both;
    animation: slide-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 9s both;
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}




/* ================ BLOG ======================= */
.posts article, .projects article{
    padding: 20px;
    background-color: #46434e;
    margin-bottom: 20px;
    border: 1px solid #3e3b45;
}

.posts article h2{
    margin-top:5px;
}

/* Footer
================================================== */
footer{
    padding:80px 0;
    color: #fff;
    background-color:#46434e;
}

footer .logo{
    max-height:80px;
    width:auto;
    margin-bottom:20px;
}



/*footer a.button{
    color: #fff;
    display: inline-block;
    margin-top: 12px;
    border: 0;
    background-color: #9ea6ae;
    border-radius: 30px;
}*/

footer .contact img {
    margin: 1px 6px 0 0;
    vertical-align: middle;
    width:auto;
}

footer .contact img.phone{
    height:14px;
}

footer .contact img.email{
    height:16px;
}

footer .social{
    padding-top: 20px;
}

footer #mc_embed_signup{clear:left; font-size:14px; }

footer h2, footer h3{
    border-bottom:2px solid #747474;
    padding-bottom:8px;
    font-size: 20px;
    color: #fff;
}

footer ul{
    margin:0;
    padding:0;
}

footer li{
    padding: 7px 2px;
    border-bottom: 1px solid #747474;
    list-style: url(images/list-arrow.png) inside;
}

footer a{
    color:#fff;
    text-decoration: none;
}

footer a:hover{
    color:#193441;
    text-decoration: none;
}

#credits{
    background-color:#3E3B45;
    color:#fff;
    padding:16px 0;
    font-size:13px;
}

#credits a{
    color:#fff;
}


/* Buttons
================================================== */
.button, a:hover.button, #maillist #mc-embedded-subscribe .button{
    /*padding:8px 16px;
    text-decoration:none;
    display: inline-block;
    margin-top: 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight:normal;
    font-size:15px;
    background-color:#eee;*/
}

/*.flexslider .button{
     background-color:#eee;
 }

.feature .button{
    background-color:#eee;
}

#maillist #mc-embedded-subscribe .button{
    background-color:#eee;
    color:#666;
}*/
/* Flexslider
================================================== */
.flexslider{
    border:none;
    margin:0;
}

.flexslider li.slide{
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.flexslider aside{
    display:inline-block;
    color:#fff;
    max-width:710px;
    position:absolute;
}

.flex-direction-nav a {
    height:50px;
}

.flex-control-nav {
    bottom: 10px;
    z-index: 10;
}

.flexslider .flex-next {opacity: 0.2; right: 5px;} .flexslider .flex-prev {opacity: 0.2; left: 5px;}

.flexslider .slides img {
    opacity: 0.7;
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}



/* Slick Nav
-------------------------------------------------------------- */
#mobile-menu{
    display:none;
}


/* ======================== MEDIA QUERIES ========================= */
/* ======================== OVER 1280 ========================= */
@media screen and (min-width:1281px){

}

/* ======================== 1280 ========================= */
@media screen and (max-width:1280px){

}

/* ======================== 1024 ========================= */
@media screen and (max-width:1024px){

}

/* ======================== 980 ========================= */
@media screen and (max-width:980px){
    .slicknav_menu {
        background: transparent;
    }

    .slicknav_btn, .slicknav_nav {
        background-color: #46434e;
        width: 300px;
        float: right;
    }

}

/* ======================== 800 ========================= */
@media screen and (max-width:800px){
    nav{
        display:none;
    }
    #mobile-menu{
        display: block;
        position: fixed;
        z-index: 10;
        width: 100%;
    }

    #top{
        height: auto;
        position: relative;
        padding-top: 3.375em;
    }
}

/* ======================== 768 ========================= */
@media screen and (max-width:768px){

}

/* ======================== 640 ========================= */
@media screen and  (max-width:640px){
    .contact.left {
        display: none;
    }

    #top .right .email, #top .right .phone {
        text-align: center;
        display: block;
        position: relative;
        bottom:15px;
    }

    .logo-nav {
        text-align: center;
    }
}

/* ======================== 480 ========================= */
@media screen and  (max-width:480px) {
    .flexslider .slides img{
        height: 280px;
        object-fit: cover;
    }

    .flexslider aside {
        bottom: 0;
        left:0;
        height:280px;
        padding: 22px 30px;
    }

    #home-content aside h2 {
        font-size: 24px;
    }

    #home-content aside {
        font-size: 16px;
    }

    #home-content aside a.button {
        font-size: 16px;
        padding: 8px 12px;
        margin: 4px 0;
    }

    #projects .pic, #projects section {
        height: 227px;
    }

    #testimonials a.button{
        position: relative;
        top: 30px;
    }

    #news-press article{
        padding-bottom:30px;
    }
}

/* ======================== 360 ========================= */
@media screen and  (max-width:360px) {

}

/* ======================== 320 ========================= */
@media screen and  (max-width:320px) {

}