/*
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
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800;900&display=swap');



/* ================ GENERAL RULES ======================= */
body {
font-size:14px;
font-family:'Inter', sans-serif;
}

/* Headings
================================================== */
h1, h2, h3, h4, h5, h6{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
}
h1 { font-size: 42px; font-weight: 900; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 21px; }

h2{
    font-weight:900;
    color:#314252;
}

h2 strong{
    font-weight:900;
    color:#FE2324;
}

/* ================ RESPONSIVE IMAGES ======================= */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* ================ LINKS ======================= */
a{
	outline: 0;
}

/* ================ HEADER ======================= */
#top{
    background-color:#4C4C4C;
    height:44px;
    color:#fff;
    font-weight:600;

}

#top .social{
   float:right;
    padding-top:8px;
}

#top .contact{
    padding-top:10px;
}

#top .contact img{
    margin: 0 6px 0 12px;
    vertical-align: middle;
}

#top a{
    color:#fff;
    text-decoration: none;
}

header{
}



/* Logo
================================================== */


/* Navigation
================================================== */
nav {
    float: right;
    margin-right: 0;
    padding-top: 25px;
    position: relative;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    position: relative;
    float: left;
}

nav > ul > li > a {
    padding: 10px 15px;
    text-decoration: none;
}

nav > ul > li > a:hover, nav li a:active {
    background-color: transparent;
    text-decoration: none;
}

nav ul li {
    display: inline-block;
}

nav ul > li a {
    display: block;
    padding: 5px 10px;
}

.menu-item-has-children {
    padding-right: 24px;
    background: url(images/arrow-down.png) no-repeat right 12px center;
}

nav ul.sub-menu {
    position: absolute;
    padding: 8px;
    left: 0;
    width: 200px;
    background: #000;
    display: none;
    z-index: 300;
}

nav ul.sub-menu > li {
    text-align: left;
    vertical-align: top;
    display: block;
}

nav ul.sub-menu > li a {
    padding: 3px 9px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #777;
}

nav ul.sub-menu > li:last-child a {
    border: none;
}

nav ul > li:hover ul.sub-menu {
    display: inline-block;
}

nav ul > li a:hover {
    background-color: transparent;
}

/* Top menu overrides */
.menu-top-menu-container .iwhqnav > li > a,
.menu-top-menu-container .iwhqnav > li > a:visited,
.menu-top-menu-container .iwhqnav > li > a:hover,
.menu-top-menu-container .iwhqnav > li > a:focus,
.menu-top-menu-container .iwhqnav > li > a:active {
    color: #000;
    text-decoration: none;
}

.menu-top-menu-container .iwhqnav > li.button {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
}

.menu-top-menu-container .iwhqnav > li.button > a,
.menu-top-menu-container .iwhqnav > li.button > a:visited,
.menu-top-menu-container .iwhqnav > li.button > a:active {
    background-color: #FE2324;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-top-menu-container .iwhqnav > li.button > a:hover,
.menu-top-menu-container .iwhqnav > li.button > a:focus {
    background-color: #D91D1E;
    color: #fff;
    text-decoration: none;
}

/* ================ CONTENT ======================= */

#about-us{
    padding:40px 0;
}

#home-vacancy-search{
    padding:60px 0 90px;
    position:relative;
    overflow:hidden;
}

#home-vacancy-search::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: url(images/the-phone-stores-hero-bg.jpg) no-repeat center center;
    background-size: cover;
    transform: scaleX(-1);
    transform-origin: center;
    z-index:0;
}

#home-vacancy-search .container{
    position:relative;
    z-index:1;
}

#home-vacancy-search h2{
    color:#fff;
    font-weight:900;
    margin-bottom:8px;
    border-bottom:none;
    padding-bottom:0;
    text-align:center;
}

#home-vacancy-search .vacancy-search-tagline{
    color:#fff;
    margin-bottom:20px;
    text-align:center;
}

#home-vacancy-search .vacancy-cv-cta{
    color:#fff;
    text-align:center;
    margin:8px 0 0;
}

#home-vacancy-search .vacancy-cv-cta a{
    color:#fff;
    text-decoration:underline;
    font-weight:600;
}

#home-vacancy-search .vacancies-filters .button{
    width:auto;
    height:44px;
    margin-top:0;
    background:#000;
    color:#fff;
    border:1px solid #000;
}

#home-vacancy-search .vacancies-filters .button:hover,
#home-vacancy-search .vacancies-filters .button:focus{
    background:#000;
    color:#fff;
    border:1px solid #000;
}

#vacancies-page{
    padding:40px 0 60px;
}

.vacancies-filters{
    margin-bottom:30px;
}

.vacancies-filters label{
    display:block;
    margin-bottom:6px;
    font-weight:400;
    color:#fff;
    font-size:13px;
}

.vacancies-filters select,
.vacancies-filters input[type="text"]{
    width:100%;
    padding:10px 12px;
    border:1px solid #ddd;
    border-radius:9px;
}

.vacancy-card{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}

.vacancy-card h3{
    margin-top:0;
}

.vacancy-description{
    margin:12px 0;
}

.vacancy-files{
    margin:0 0 14px;
    padding-left:20px;
}

#about-us img{
    width:100%;
    height:auto;
    display:block;
}

#content{
    padding: 20px 0px 40px;
}
main{
    padding:40px 0 50px;
    background-color:#f5f5f5;
}

main .intro{
    text-align:center;
    padding-bottom:30px;
}

.intro h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    font-size: 32px;
}

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;
}

/* ================ BLOG ======================= */
.posts article{
    padding:20px;
    background-color:#f9f9f9;
    margin-bottom:20px;
    border:1px solid #ededed;
}

.posts article h2{
    margin-top:5px;
}

/* Footer
================================================== */
footer{
    background-color:#4e4e4e;
    background-image:url(images/footer-bg.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    padding:30px 0;
    color:#fff;
    text-align:center;
}

footer .logo{
    max-height:80px;
    width:auto;
}

footer .slogan{
    max-width:640px;
    margin:0 auto;
}

footer .footer-nav{
    float:none;
    padding-top:0;
    margin:0;
}

footer .footer-nav .footer-nav-menu{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 20px;
}

footer .footer-nav .footer-nav-menu > li{
    float:none;
}

footer .footer-nav .footer-nav-menu > li > a{
    padding:0;
    color:#fff;
    text-decoration:none;
}

footer .footer-nav .footer-nav-menu > li > a:visited,
footer .footer-nav .footer-nav-menu > li > a:hover,
footer .footer-nav .footer-nav-menu > li > a:focus,
footer .footer-nav .footer-nav-menu > li > a:active{
    text-decoration:none;
}

footer .footer-nav .footer-nav-menu > li.button,
footer .footer-nav .footer-nav-menu > li.button > a{
    background:transparent;
    border:none;
    border-radius:0;
    color:#fff;
    margin:0;
    padding:0;
}

footer .footer-nav-social{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

footer .contact img {
    margin: 3px 6px 0 0;
    vertical-align: middle;
    width:auto;
}

footer .contact img.phone{
    height:14px;
}

footer .contact img.email{
    height:12px;
}

footer .social{
    padding-top:0;
}

footer #mc_embed_signup{clear:left; font-size:14px; }

footer h3{
    border-bottom:2px solid #747474;
    padding-bottom:8px;
    font-size: 20px;
    color: #eee;
}

footer ul{
    margin:0;
    padding:0;
}

footer li{
    padding: 7px 2px;
    list-style: url(images/list-arrow.png) inside;
}

footer a{
    color:#eee;
    text-decoration: none;
}

footer a:hover{
    color:#fff;
    text-decoration: none;
}

#credits{
    background-color:#2e2e2e;
    color:#aaa;
    padding:8px 0;
    font-size:13px;
}


/* Buttons
================================================== */
.button, a:hover.button, #maillist #mc-embedded-subscribe .button{
    padding:8px 16px;
    text-decoration:none;
    display: inline-block;
    margin-top: 0;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    font-weight:normal;
    font-size:15px;
    background-color:#FE2324;
    color:#fff;
    border:1px solid #FE2324;
}

.button:hover,
.button:focus{
    background-color:#D91D1E;
    color:#fff;
    text-decoration:none;
}

.flexslider .button{
    background-color:#fff;
    border:1px solid #fff;
    color:#000;
    min-width:154px;
    text-align:center;
}

.flexslider .button:hover,
.flexslider .button:focus{
    background-color:#fff;
    border:1px solid #fff;
    color:#000;
}

.flexslider .button.outline{
    background-color:transparent;
    border:1px solid #fff;
    color:#fff;
}

.flexslider .button.outline:hover,
.flexslider .button.outline:focus{
    background-color:transparent;
    border:1px solid #fff;
    color:#fff;
}

.feature .button{
    background-color:#FE2324;
    color:#fff;
    border:1px solid #FE2324;
}

#maillist #mc-embedded-subscribe .button{
    background-color:#FE2324;
    color:#fff;
    border:1px solid #FE2324;
}
/* Flexslider
================================================== */
.flexslider{
    border:none;
    margin:0;
    max-height:620px;
    overflow:hidden;
}

.flexslider .slides > li {
    background: url(images/the-phone-stores-hero-bg.jpg) no-repeat center center;
    background-size: cover;
    max-height:620px;
}

.flexslider .slide-content{
    height: clamp(360px, 62vh, 620px);
    display:flex;
    align-items:center;
}

.flexslider .slide-description,
.flexslider .slide-image{
    width:50%;
}

.flexslider .slide-description{
    color:#fff;
    padding:20px 40px 20px 0;
}

.flexslider .slide-image{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 0 20px 20px;
}

.flexslider .slide-image img{
    width:100%;
    height:auto;
    max-height:580px;
    object-fit:contain;
    border-radius:30px;
    border:1px solid #fff;
}

.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;}

/* Locations slider */
.locations-slider{
    max-height:none;
    overflow:visible;
    margin-top:20px;
}

#locations .flexslider{
    background:transparent;
}

.locations-slider .slides > li{
    background:none;
    max-height:none;
}

.locations-slider .location-slide-content{
    display:flex;
    align-items:center;
}

.locations-slider .location-text,
.locations-slider .location-image{
    width:50%;
}

.locations-slider .location-text{
    padding:20px 40px 20px 0;
    color:#314252;
}

.locations-slider .button{
    background-color:#FE2324;
    color:#fff;
    border:1px solid #FE2324;
}

.locations-slider .button:hover,
.locations-slider .button:focus{
    background-color:#D91D1E;
    color:#fff;
    border:1px solid #D91D1E;
}

.locations-slider .location-image{
    padding:20px 0 20px 20px;
    display:flex;
    justify-content:center;
}

.locations-slider .location-image img{
    width:720px;
    max-width:100%;
    height:480px;
    object-fit:cover;
    border-radius:30px;
    border:none;
}

/* =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. */
}




/* ======================== MEDIA QUERIES ========================= */
/* ======================== OVER 1280 ========================= */
@media screen and (min-width:1281px){

}

/* ======================== 1280 ========================= */
@media screen and (max-width:1280px){
    .iwhq_nav_btn {
        display: block;
    }
}

/* ======================== 1024 ========================= */
@media screen and (max-width:1024px){

}

/* ======================== 992-580 LOGO FIX ========================= */
@media screen and (min-width:580px) and (max-width:992px){
    header .logo-nav{
        flex: 0 0 100%;
        max-width: 100%;
    }

    header .logo{
        width:70%;
        min-width:70%;
        max-width:100%;
        height:auto;
    }
}

/* ======================== 992 ========================= */
@media screen and (max-width:992px){
    .iwhq_nav_btn {
        display: block;
    }

    nav {
        display: none;
    }


}

/* ======================== 800 ========================= */
@media screen and (max-width:800px){


    #top{
        height: auto;
        position: relative;
    }
}

/* ======================== 768 ========================= */
@media screen and (max-width:768px){
    #about-us .row{
        display:flex;
        flex-direction:column-reverse;
    }

    #about-us .col-sm-6{
        width:100%;
        max-width:100%;
    }

    header .logo{
        width:70%;
        min-width:70%;
        max-width:100%;
        height:auto;
    }

    .flexslider .slide-content{
        flex-direction:column;
        justify-content:center;
        height:auto;
        min-height:0;
        padding:30px 0;
    }

    .flexslider .slide-description,
    .flexslider .slide-image{
        width:100%;
    }

    .flexslider .slide-description{
        padding:20px;
        text-align:center;
    }

    .vacancies-filters .col-sm-2 label{
        display:none;
    }

    .vacancies-filters .col-sm-2 .button{
        width:100%;
    }

    .locations-slider .location-slide-content{
        flex-direction:column;
    }

    .locations-slider .location-text,
    .locations-slider .location-image{
        width:100%;
    }

    .locations-slider .location-text{
        padding:20px;
        text-align:center;
    }

    .locations-slider .location-image{
        padding:10px 20px 20px;
    }

    .locations-slider .location-image img{
        width:100%;
        height:auto;
        max-height:480px;
    }
}

/* ======================== 640 ========================= */
@media screen and  (max-width:640px){

}

/* ======================== 480 ========================= */
@media screen and  (max-width:480px) {

}

/* ======================== 360 ========================= */
@media screen and  (max-width:360px) {

}

/* ======================== 320 ========================= */
@media screen and  (max-width:320px) {

}