body {
font-size: 16px;
font-family: 'Roboto', sans-serif;
line-height: 160%;
}
#mobile-menu, .slicknav_menu {
display: none;
}
.slicknav_menu {
background-color: #2c3a43 !important;
}
#hero p, #navigation, nav {
float: right;
}
#hero h1 {
color: #fff;
font-weight: 500;
font-size: 42px;
margin-top: 0;
}
.blog, .page {
padding: 30px 0;
}
img {
max-width: 100%;
height: auto;
width: auto \9
}
#head-main {
background: #0F5EA9 url(//www.irishwebhq.com/wp-content/themes/iwhq_2016/images/web-design-header.jpg) no-repeat center center;
border-top: 4px solid #2c3a43;
border-bottom: 4px solid #2c3a43;
background-size: cover;
}
#top { height: 40px;
color: #fff;
}
#sub-footer .social {
text-align: left;
padding-top: 8px
}
#sub-footer .social img {
width: 20px;
height: auto;
margin: 0 2px
}
#top .contact {
padding-top: 10px;
padding-right: 20px;
font-size: 1em;
text-align: right;
font-family: 'Roboto';
}
#top .contact a {
color: #d5d8d9;
text-decoration: none;
transition: .3s;
}
#top .contact a:hover {
color: #f8921f;
}
#features .feature strong, #testimonials-page figure, .heading h3, .testimonials-link, .wp-caption {
text-align: center
}
#top .contact img {
height: auto;
margin: 0 4px 0 12px;
vertical-align: middle
}
#header-full-width { height: 150px
}
.home #header-full-width { height: 120px
}
#logo {
margin-top: 15px;
width: 260px;
}
.home #logo {
margin-top: 25px;
}
#navigation {
padding-right: 0
}
nav {
padding-top: 15px;
text-align: right;
font-family: 'Roboto';
font-weight: 600;
font-size: 14px;
}
.slicknav_btn {
background-color: transparent !important;
}
.slicknav_menu .slicknav_menutxt {
text-shadow: none !important;
}
nav li {
display: inline-block;
}
.slicknav_btn {
background-color: #2c3a43;
}
.slicknav li a {
color: #fff;
padding: .85em 1.2em;
font-size: 1.2em
}
.slicknav li a:hover {
color: #f8921f;
transition: .2s;
text-decoration: none;
}
#clients div.col-sm-12 + div.col-sm-12 {
text-align: center;
}
#clients img {
max-width: 200px;
margin: 0 30px;
}
#clients .heading h3 span, #hero p {
background-color: #fff
}
#hero { padding: 30px 0;
}
#hero h2 {
font-size: 42px;
color: #fff;
font-weight: bold;
}
#hero aside {
color: #fff;
font-size: 20px;
font-weight: 400;
font-family: 'Roboto';
line-height: 150%;
margin: 20px 0;
}
#tagline {
margin: 30px 0 40px;
text-align: center;
}
#tagline h2 {
font-size: 28px;
font-weight: 500;
margin-bottom: 30px;
}
#tagline .button, .wpcf7-submit {
margin: 0 0 20px 0;
border: 0 solid #f8921f;
background: #f8921f;
color: #fff;
font-family: 'Roboto';
font-size: 22px;
font-weight: 500;
padding: 17px 30px 17px 36px;
transition: .3s;
border-radius: 50px;
-webkit-box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.25);
-moz-box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.25);
box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.25);
}
#tagline .button:hover {
-webkit-box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.65);
-moz-box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.65);
box-shadow: 4px 4px 5px 0px rgba(5, 81, 125, 0.65);
}
#tagline span img {
width: 8px;
height: 8px;
padding: 0;
margin: 0;
margin-bottom: 3px;
margin-left: 10px;
}
#tagline h4 {
color: #fff;
margin-top: 100px;
margin-bottom: 40px;
font-size: 17px;
font-weight: 400;
}
.contact_mark img {
border: 2px solid white;
}
#chrome {
min-height: 90px;
padding: 30px 0
}
#chrome img {
margin: 0 30px 20px 0;
position: absolute;
top: 20px;
height: auto;
-webkit-filter: drop-shadow(1px 1px 5px #222);
filter: drop-shadow(1px 1px 5px #222);
}
main {
padding-top: 70px
padding-bottom: 50px
}
h1 {
font-size: 42px;
color: #454545
}
#contact h2, #features .feature strong, .heading h3, footer h3, h1 {
font-family: 'Roboto';
}
#contact h2 {
margin-top: 40px;
font-size: 32px;
}
.wp-caption {
border: none;
background-color: #eee;
padding-top: 4px;
margin: 10px;
max-width: 96%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
font-family: Tahoma, Geneva, sans-serif
}
#features, #testimonials {
background-color: #f9f9f9;
padding: 50px 0 70px;
border-bottom: 1px solid #f4f4f4
}
#features {
padding-top: 100px;
}
.heading h3 {
background: url(//www.irishwebhq.com/wp-content/themes/iwhq_2016/images/sep-mid.gif) left 16px repeat-x;
margin: 0 auto 40px 0;
padding: 0 20px !important;
width: 100%;
font-weight: 600;
white-space: nowrap
}
.heading h3 span {
background-color: #f9f9f9;
padding: 0 20px;
font-weight: 300;
font-size: 26px
}
#features .feature strong, #features article, .feature-bt {
background-color: #fff;
max-width: 370px;
display: block;
font-weight: 400
}
#contact .vfb-item-secret, .button.large {
display: inline-block
}
#contact .wpcf7-text, #contact .wpcf7-email, #content textarea, #contact .wpcf7-textarea {
color:#666 !important;
font-weight:normal;
}
#features .feature strong {
font-size: 20px;
padding: 20px 0 10px
}
#features article {
padding: 0 20px 20px
}
#testimonails div {
background-color: #fff;
padding: 20px 0
}
#contact .vfb-submit, .feature-bt, .feature-bt a:hover {
color: #fff;
text-decoration: none;
text-align: center;
font-weight: 600;
text-transform: uppercase;
padding: 8px;
font-size: 1.1em
}
.feature-bt.navy, div.testimonials-link > .standout.button.orange {
background-color: #2c3a43;
transition: .3s;
}
.feature-bt.navy:hover, div.testimonials-link > .standout.button.orange:hover {
background-color: #435865;
color: white;
text-decoration: none;
}
#contact .vfb-submit {
background: #f8921f;
padding: 11px 24px 11px 24px;
border: none;
font-weight: 500;
font-size: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 22px;
transition: .3s;
}
#contact .vfb-submit:hover {
background-color: #f7a03e;
}
#portfolio h4, .button.white, author name {
font-weight: 700
}
.feature-bt.orange {
background-color: #f8921f;
transition: .3s;
}
.feature-bt.orange:hover {
background-color: #f7a03e;
text-decoration: none;
color: white;
}
.feature-bt.green {
background-color: #7accc8;
transition: .3s;
}
.feature-bt.green:hover {
background-color: #97e5e1;
text-decoration: none;
color: white;
}
.testimonial div {
background: url(//www.irishwebhq.com/wp-content/themes/iwhq_2016/images/quotes.gif) 20px 20px no-repeat #fff;
padding: 20px 20px 20px 70px;
margin-bottom: 10px
}
.testimonial img {
float: left;
margin-right: 20px
}
.testimonials-link {
padding-top: 50px
}
#portfolio, #clients {
padding: 50px 0 40px
}
#portfolio .heading h3 span, #clients .heading h3 span {
background-color: #fff
}
.standout.button {
color: #fff;
padding: 8px 16px;
margin-top: 10px;
margin-left: 10px;
text-decoration: none
}
.standout.button.orange {
background-color: #f8921f
}
.standout.button.navy {
background-color: #2c3a43;
}
#portfolio  .flex-direction-nav a {
display: block;
width: 40px;
height: 40px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden; opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#portfolio .flexslider {
min-height: 380px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
clear: both
}
#contact {
background: #0F5EA9 url(//www.irishwebhq.com/wp-content/themes/iwhq_2016/images/web-design-header.jpg) no-repeat center center;
padding: 70px 0;
color: white;
}
#contact p {
font-size: 20px;
font-weight: 400;
}
#contact form.visual-form-builder {
margin: 0
}
#contact .visual-form-builder label, #contact label.vfb-desc {
color: white;
font-weight: 400;
font-size: 17px;
}
#contact .visual-form-builder label .vfb-required-asterisk {
color: #f8921f;
}
#contact .visual-form-builder-container fieldset {
padding: 0;
background: 0 0;
border: none;
margin: 0
}
#contact .visual-form-builder-container li {
padding: 0 1% 9px !important
}
#contact .vfb-fieldset-2 {
position: relative;
top: -16px
}
#contact input[type=text], #contact input[type=tel], #contact input[type=email] {
height: 36px;
padding: 4px 6px;
font-size: 16px;
margin-bottom: 4px;
}
#contact input[type=text]:focus, #contact input[type=tel]:focus, #contact input[type=email]:focus, #contact .visual-form-builder-container textarea.vfb-large:focus {
outline: none;
border-color: #7accc8;
box-shadow: 0 0 10px #7accc8;
}
#contact .visual-form-builder-container textarea.vfb-large {
height: 8em;
font-size: 16px;
padding: 6px
}
#contact .vfb-legend {
border: none;
margin: 0
}
#contact .vfb-left-half, #contact .vfb-right-half {
width: 49% !important
}
#contact .vfb-item-submit {
position: relative;
top: 0;
right: 0;
width: 100px
}
#contact img {
max-width: 520px;
margin-top: 20px
}
#contact h3 {
margin-top: 4px;
margin-bottom: 30px;
font-weight: 400;
}
#contact .forminator-ui#forminator-module-2384.forminator-design--default .forminator-label {
color: #fff !important;
font-size: 16px !important;
}
.forminator-ui#forminator-module-2384.forminator-design--default .forminator-button-submit {
background-color: #F8921F !important;
display: inline-block;
width: auto;
color: #FFFFFF;
border: none;
padding: 12px 24px;
border-radius: 9px;
margin-top: 12px;
}
.forminator-ui#forminator-module-2384.forminator-design--default .forminator-label {
width: 127px;
}
.forminator-hidden{ visibility:hidden;
}
footer {
background-color: #2c3a43;
padding: 40px 0;
color: #fff
}
footer ul {
list-style: none;
padding: 0
}
footer li {
padding: 4px 0;
border-bottom: 1px solid #345857
}
footer a, footer a:link {
color: #bbb
}
footer a:hover {
color: #75fff4;
text-decoration: none
}
.foot-info {
margin-top: 6px;
}
.vfb-error {
color: red !important;
}
section#policies {
background: #2c3a43;
color: #fff;
padding: 10px;
}
section#policies a {
color: #fff;
}
#sub-footer {
background-color: #1b2429;
padding: 16px 0;
color: #fff;
text-align: right
}
.button, .button:hover {
text-decoration: none;
display: inline-block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px
}
.button.large {
padding: 15px 30px;
font-size: 18px
}
.button.white {
background-color: #fff;
color: #666;
text-transform: uppercase;
text-decoration: none
}
#testimonials-page > div {
clear: both;
margin: 30px 0;
padding: 30px;
border-bottom: 1px solid #eee
}
#testimonials-page figure img {
margin-bottom: 10px;
width: 80%;
max-width: 300px
}
#testimonials-page article {
margin-bottom: 15px
}
#testimonials-page article h2 {
margin-top: 0
}
#testimonials-page article blockquote {
margin: 20px 0
}
#portfolio-page > div {
clear: both;
margin: 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 30px
}
#portfolio-page figure {
margin-top: 20px
}
#portfolio-page article {
padding-left: 30px
}
#portfolio-page h2 {
font-size: 26px
}
#portfolio-page .cta {
background-color: #7accc8;
padding: 15px 30px;
color: #343434
}
h3 .standout.button {
margin-left: 60px;
font-size: 20px;
padding: 15px 30px;
font-family: 'Open Sans'
} .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%; 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;
} .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; }
@media screen and (max-width: 1199px) {
#features .feature .feature-bt, #features .feature article, #features .feature strong {
display: inline-block;
width: 100%;
}
}
@media screen and (min-width: 1024px) and (max-width: 1024px) {
#features .feature strong {
padding: 20px 20px 10px
}
}
@media screen and (max-width: 1024px) {
#chrome img {
top: 0;
}
.slicknav li a {
font-size: 1.1em;
}
}
@media screen and (max-width: 990px) {
#header-full-width {
height: 95px
}
#logo {
margin-top: 25px;
}
nav {
padding-top: 19px
}
.slicknav li a {
padding: .5em .85em;
font-size: 1em
}
#contact img {
max-width: 300px
}
#hero #chrome {
display: none;
}
#hero {
padding: 0 20px;
}
}
@media screen and (max-width: 800px) {
nav {
display: none;
}
#mobile-menu, .slicknav_menu {
display: block;
}
.menu-button, nav ul.slicknav {
background-color: #f8921f;
text-align: left
}
#contact label, .menu-button, nav ul.slicknav {
text-align: left
}
#header-full-width {
height: 60px
}
.logo.col-sm-4, #navigation {
width: 50%
}
nav {
margin-right: 15px;
padding-top: 45px
}
nav > div {
float: right;
}
.menu-button {
color: #fff;
width: 240px;
top: -10px;
}
nav ul.slicknav { width: 100%
}
#contact, #portfolio, #sub-footer, footer {
text-align: center
}
.menu-button .touch-button .navicon {
font-size: 14px;
color: #fff
}
.feature a, .feature article, .feature img, .feature strong {
margin: 0 auto;
width: 370px;
display: block
}
.feature a, .feature-bt a:hover {
margin-bottom: 40px;
padding: 20px 0;
color: #fff;
text-decoration: none;
}
.feature-bt a:hover {
opacity: 0.9;
}
#portfolio .col-sm-6 {
width: 100%
}
.flexslider .slides img {
width: 80%;
margin: 0 auto;
max-width: 647px;
}
#portfolio .flexslider .slides img {
max-width: 700px;
}
#contact {
padding: 30px 0;
}
.testimonial div {
margin-top: 40px;
clear: both
}
author {
float: right;
clear: both;
margin-bottom: 40px;
width: 260px
}
.testimonials-link {
padding-top: 20px;
text-align: center;
clear: both
}
footer li {
border-bottom: none
}
}
@media screen and (min-width: 768px) and (max-width: 800px) {
#features .feature strong, #features article, .feature-bt {
max-width: 220px
}
#features .feature strong {
line-height: 32px
}
#features article {
height: 180px
}
h1 {
font-size: 36px
}
}
@media screen and (max-width: 768px) {
.menu-nav-menu-container {
position: relative;
top: -10px;
width: 100%;
}
#tagline {
text-align: center;
}
#features {
padding-top: 50px;
}
#features .feature {
text-align: center;
}
#testimonials .testimonial {
display: block;
width: 100%;
clear: both;
}
#portfolio-page {
text-align: center;
}
#portfolio-page article {
padding-left: 15px;
}
#clients img {
padding-bottom: 20px;
}
#sub-footer .social {
text-align: center;
margin-bottom: 10px;
}
}
@media screen and (max-width: 640px) {
#tagline {
text-align: center
}
.logo.col-xs-5 {
width: 50%
}
h1, #hero h1 {
font-size: 32px
}
}
@media screen and (max-width: 600px) {
#hero strong {
font-size: 32px
}
}
@media screen and (max-width: 480px) {
#navigation, .logo.col-xs-5, .menu-button {
width: 100%
}
#portfolio-page > div, #top .contact, .logo.col-xs-5 {
text-align: center
}
.logo.col-xs-5 {
padding: 0 0 20px 0;
}
#top .social {
display: none
}
#top .contact {
width: 100%;
white-space: nowrap;
position: relative;
right: 4px
}
#navigation {
float: left;
padding: 0
}
.menu-button {
top: 10px;
}
nav {
margin: 0;
padding: 0
}
.menu-nav-menu-container {
top: 15px;
position: relative
}
ul.slicknav, ul.slicknav li {
width: 100% !important
}
#hero {
text-align: center;
}
#hero strong {
font-size: 28px
}
#tagline {
margin: 35px 0 40px
}
#tagline .button {
font-size: 15px
}
#tagline h4 {
margin-top: 50px;
}
.heading {
background: 0 0
}
.heading h3 {
width: auto;
padding: 0;
white-space: normal
}
#contact h2 {
font-size: 24px;
font-weight: 700
}
#contact h3 {
font-size: 18px
}
author {
float: left
}
#contact .vfb-left-half, #contact .vfb-right-half {
width: 100% !important
}
#portfolio-page h3 .standout.button {
margin-left: 0;
margin-top: 10px;
top: 10px !important;
position: relative;
margin-bottom: 20px
}
}
@media screen and (max-width: 360px) {
#top .contact, .logo {
width: 100%;
text-align: center
}
#features, #testimonials {
padding: 50px 0 20px
}
#top .social {
display: none
}
.menu-button {
top: -2px
}
#tagline {
margin: 0 0 20px
}
#hero strong {
font-size: 20px
}
#portfolio .standout.button.orange {
top: 0
}
#features, #testimonials, .heading h3 {
background-color: #f5f5f5
}
#header-full-width {
height: 110px
}
#logo {
width: 85%;
margin-left: 10px
}
#navigation {
float: left;
width: 100%;
padding: 0
}
nav {
margin: 0;
padding: 0
}
.menu-button {
width: 100%
}
.menu-nav-menu-container {
top: -2px;
position: relative
}
ul.slicknav, ul.slicknav li {
width: 100% !important
}
footer h3 {
font-size: 18px;
margin-top: 40px
}
.feature a, .feature article, .feature img, .feature strong {
width: 300px;
text-align: center
}
.standout.button.orange {
position: relative;
top: -30px
}
#portfolio-page .standout.button.orange {
top: 0
}
.standout.button.navy {
margin-top: 20px;
}
footer {
padding: 20px 0 30px
}
}
@media screen and (max-width: 320px) {
#contact img {
max-width: 260px
}
.feature a, .feature article, .feature img, .feature strong {
width: 260px
}
}