.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-left: 20px;
padding-right: 20px;
}
.container {
max-width: 1260px;
padding-left: 20px;
padding-right: 20px;
}
.row {
margin-left: -20px;
margin-right: -20px;
} html, button, input {
font-family: 'Roboto', sans-serif;
font-size: 25px;
}
body {
background: #eee5d1;
color: #000000;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 700;
}
h1, .h1 {
font-size: 50px;
}
h2, .h2 {
font-size: 30px;
}
h3, .h3 {
font-size: 25px;
}
h4, .h4 {
font-size: 20px;
}
h5, .h5 {
font-size: 15px;
}
h6, .h6 {
font-size: 12px;
}
ol, ul {
margin-bottom: 1.5rem;
}
p {
margin-bottom: 1.5rem;
} a {
color: #125780;
}
a:focus,
a:hover {
color: #000000;
}
.feature-block {
margin-bottom: 1.5rem;
}
.feature-block p {
margin: 0;
}
.feature-block a,
.feature-block div {
display: block;
position: relative;
text-align: left;
}
.feature-block>a>br,
.feature-block>div>br {
display: none;
}
.feature-block a>figure,
.feature-block div>figure {
margin-bottom: 0;
position: relative;
z-index: 1;
}
.feature-block a>strong,
.feature-block p.caption {
background: rgba(18, 87, 128, 0.7);
bottom: 0;
color: #FFFFFF;
display: block;
font-family: 'Oswald', sans-serif;
font-size: 50px;
left: 0;
line-height: 1;
padding: 15px 32px 20px 22px;
position: absolute;
text-transform: uppercase;
width: auto;
z-index: 10;
}
.feature-block a:focus>strong,
.feature-block a:hover>strong {
background: rgba(18, 87, 128, 1);
}
footer#site-footer a {
color: #848484;
}
.header-address a {
color: #8bc540;
}
#home-features>div {
float: left;
padding: 0 20px;
width: 50%;
}
main a:focus img,
main a:hover img {
filter: brightness(110%);
-ms-filter: brightness(110%);
-webkit-filter: brightness(110%);
} .cta {
bottom: 0;
position: absolute;
width: 100%;
z-index: 200;
}
.cta h2 {
color: #FFFFFF;
font-size: 50px;
line-height: 1.2;
margin-bottom: 50px;
text-align: center;
text-shadow: 0 0 30px #000000;
}
.cta-strip {
background: rgba(18,87,128,0.7);
color: #FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: 300;
line-height: 1.2;
padding: 10px 0;
text-align: center;
width: 100%;
}
.cta-strip-main {
bottom: auto;
display: none;
position: static;
z-index: auto;
}
.footer-address ul,
.header-address ul {
list-style-type: none;
padding: 0;
}
header#site-header .site-navigation .header-address {
display: none;
}
.logo {
margin: 0 auto 1.5rem;
width: 27%;
}
.logo p {
margin-bottom: 0;
}
main {
padding: 40px 0 150px;
}
main,
.mainstage-wrapper {
background: #f5f4ec;
}
.mainstage {
margin: 0 auto;
max-width: 1600px;
position: relative;
}
.mainstage-wrapper {
position: relative;
}
.pad0 {
margin-bottom: 0;
} footer#site-footer {
border-top: 30px solid #8bc540;
color: #848484;
font-family: 'Roboto Slab', serif;
font-size: 20px;
line-height: 1.5;
padding: 30px 0 5px;
text-align: center;
}
footer#site-footer .copyright {
font-family: 'Roboto', sans-serif;
font-size: 15px;
line-height: 1.8;
}
footer#site-footer .logo {
margin: 0 auto 25px;
} .header-address {
color: #8bc540;
font-family: 'Oswald', sans-serif;
font-size: 23px;
font-weight: 500;
line-height: 1;
margin-bottom: 10px;
text-transform: uppercase;
}
.header-address ul:after {
clear: both;
}
.header-address ul>li {
float: right;
margin-left: 1rem;
}
header#page-header {
padding-bottom: 1.5rem;
text-align: center;
}
header#site-header {
background: #FFFFFF;
padding: 20px 0 10px;
position: relative;
}
header#site-header .logo {
float: left;
margin: 0;
width: 27%;
}
header#site-header .logo p {
margin-bottom: 0;
}
header#site-header .header-site-utility {
float: left;
padding-left: 35px;
width: 73%;
} footer#site-footer .site-navigation ul {
margin-bottom: 55px;
}
footer#site-footer .site-navigation ul>li {
margin: 0 40px;
}
footer#site-footer .site-navigation ul>li>a {
color: #125780;
}
.footer-social ul,
.site-navigation ul {
font-size: 0;
line-height: 0;
list-style-type: none;
padding: 0;
}
.footer-social ul>li,
ul#footer-site-menu>li,
ul#header-site-menu>li {
display: inline-block;
}
.footer-social ul>li {
margin: 0 30px;
}
.footer-social ul>li>a {
color: #125780;
display: block;
}
.footer-social ul>li>a:before {
font-size: 30px;
line-height: 1;
}
.footer-social ul>li>a:before {
display: inline-block;
font-family: 'FontAwesome';
}
.footer-social li.email>a:before {
content: '\f0e0';
}
.footer-social li.facebook>a:before {
content: '\f09a';
}
.footer-social li.googleplus>a:before {
content: '\f0d5';
}
.footer-social li.linkedin>a:before {
content: '\f0e1';
}
.footer-social li.twitter>a:before {
content: '\f099';
}
.footer-social li.yelp>a:before {
content: '\f1e9';
}
.footer-social li.youtube>a:before {
content: '\f167';
}
#header-site-menu {
margin-bottom: 0;
padding: 0;
}
#header-site-menu>li {
display: inline-block;
margin: 0 20px;
position: relative;
vertical-align: top;
}
#header-site-menu>li>a {
display: block;
padding: 10px 20px;
}
#header-site-menu>li:focus>a,
#header-site-menu>li:hover>a,
#header-site-menu li.current-menu-item>a,
#header-site-menu li.current-menu-parent>a {
color: #000000;
}
#header-site-menu>li>a:focus,
#header-site-menu>li>a:hover {
text-decoration: none;
}
#header-site-menu>li.has-children>a:after {
content: "\f0d7";
display: inline-block;
font-family: 'FontAwesome';
margin-left: 0.3em;
}
#header-site-menu>li.has-children:focus>a:after,
#header-site-menu>li.has-children:hover>a:after {
content: "\f0d8";
}
#header-site-menu>li .sub-menu {
background: #FFFFFF;
box-shadow: 0 8px 6px 0px rgba(0, 0, 0, 0.5);
display: none;
font-size: 0;
line-height: 0;
list-style-type: none;
padding: 5px 0 20px;
text-align: center;
}
#header-site-menu>li:focus>ul,
#header-site-menu>li:hover>ul {
display: block;
left: 50%;
margin-left: -135px;
position: absolute;
width: 270px;
z-index: 300;
}
#header-site-menu>li .sub-menu>li>a {
display: block;
font-weight: 400;
padding: 15px 10px;
text-align: center;
}
#header-site-menu>li .sub-menu>li>a:focus,
#header-site-menu>li .sub-menu>li>a:hover {
color: #000000;
text-decoration: none;
}
.mobile-trigger {
display: none;
}
#overlay-response {
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
text-align: center;
top: 0;
transition: opacity 0.5s ease;
width: 0;
z-index: 350;
}
.site-navigation ul>li>a {
color: #125780;
font-family: 'Roboto Slab', serif;
font-size: 20px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
} .mainstage .carousel {}
.mainstage .carousel h2 {
font-size: 50px;
line-height: 1.2;
margin-bottom: 0;
text-shadow: 0 0 30px #000000;
}
.mainstage .carousel-caption {
bottom: 85px;
left: 0;
padding-bottom: 60px;
right: 0;
}
.mainstage .carousel-control-next {
background: linear-gradient(to right, rgba(255,255,255,0), #f5f4ec);
opacity: 1;
}
.mainstage .carousel-control-prev {
background: linear-gradient(to left, rgba(255,255,255,0), #f5f4ec);
opacity: 1;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
width: 50px;
} [type=button],
[type=submit] {
background: #125780;
border: none;
color: #FFFFFF;
font-size: 18px;
text-transform: uppercase;
}
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover {
background: #000000;
}
[type=button],
[type=submit] {
cursor: pointer;
padding: 9px 12px;
}
[type=email],
[type=tel],
[type=text],
textarea {
border: 1px solid #c4e19d;
font-family: 'Roboto', sans-serif;
font-size: 0.8rem;
padding: 9px 12px;
width: 100%;
}
[type=email]:focus,
[type=email]:hover,
[type=tel]:focus,
[type=tel]:hover,
[type=text]:focus,
[type=text]:hover,
textarea:focus,
textarea:hover {
border: 1px solid #333333;
}
footer#site-footer form {
padding: 0 0 25px;
}
footer#site-footer form [type=email],
footer#site-footer form [type=submit] {
font-size: 15px;
line-height: 1;
text-align: left;
}
footer#site-footer form {
font-size: 15px;
margin: 0 auto 1.5em;
text-align: left;
width: 42%;
}
footer#site-footer form p {
margin: 0 0 5px;
text-transform: uppercase;
}
footer#site-footer .subscribe {
display: table;
width: 100%;
}
footer#site-footer .subscribe>div {
display: table-cell;
vertical-align: top;
}
footer#site-footer .subscribe input[type=email] {
border-color: #c3c2bf;
}
footer#site-footer .subscribe input[type=email]:focus,
footer#site-footer .subscribe input[type=email]:hover {
border: 1px solid #333333;
}
footer#site-footer .subscribe input[type=submit] {
padding: 11px;
width: 100%;
}
footer#site-footer .subscribe .form-input {
width: 70%;
}
footer#site-footer .subscribe .form-submit {
padding-left: 10px;
width: 30%;
}
footer#site-footer .subscribe span.wpcf7-not-valid-tip {
margin-top: 0.5em;
}
.form-container {
color: #3c3c3b;
font-size: 0.8rem;
line-height: 1.2;
margin: 0 auto;
max-width: 660px;
text-align: left;
}
.form-container [type=submit] {
text-align: left;
width: 42%;
}
.form-field {}
.form-label p {
margin-bottom: 8px;
}
div.wpcf7-response-output {
background: #FFFFFF;
margin: 2em 0;
padding: 15px;
}
span.wpcf7-list-item {
display: block;
margin-left: 0;
}
span.wpcf7-list-item.last {
margin-bottom: 1rem;
} .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 1.5rem;
}
.oswald {
font-family: 'Oswald', sans-serif;
}
.pad0 {
margin-bottom: 0;
}
.padhalf {
margin-bottom: 0.5rem;
}
.product-title {
font-size: 1.25rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
.text-large {
font-size: 1.2em;
line-height: 1.4;
margin-bottom: 2.5em;
} [type=button],
[type=submit],
.feature-block a>strong {
transition: background 0.2s;
}
.footer-social ul>li>a {
transition: color 0.2s;
}
main a img {
transition: filter 0.2s;
} .aligncenter {
margin: 0 auto 1.5rem;
}
.alignleft {
float: left;
margin-bottom: 1.5rem;
margin-right: 1.5rem;
}
.alignright {
float: right;
margin-bottom: 1.5rem;
margin-left: 1.5rem;
} @media(max-width:1270px)
{
.container {
max-width: none;
}
.cta h2 {
font-size: 45px;
line-height: 1.3;
margin-bottom: 40px;
}
.header-address {
font-size: 18px;
padding-left: 10px;
}
#header-site-menu>li {
margin-left: 0;
}
#header-site-menu>li>a {
padding: 10px;
}
}
@media(max-width: 1199px)
{
.cta h2 {
font-size: 40px;
margin-bottom: 35px;
}
footer#site-footer form {
width: 50%;
}
.feature-block a>strong {
font-size: 42px;
line-height: 1.05;
}
.header-address ul {
margin-bottom: 15px;
}
header#page-header {
padding-bottom: 1.3rem;
}
header#page-header h1 {
font-size: 46px;
}
.logo {
width: 35%;
}
main {
padding-bottom: 120px;
}
.mainstage .carousel h2 {
font-size: 46px;
}
.mainstage .carousel-caption {
bottom: 50px;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
width: 100px;
}
}
@media(max-width: 1099px) {
.cta h2 {
font-size: 35px;
margin-bottom: 30px;
}
.header-address ul {
margin-bottom: 10px;
}
header#page-header {
padding-bottom: 1.2rem;
}
header#page-header h1 {
font-size: 42px;
}
header#site-header .logo {
width: 30%;
}
header#site-header .header-site-utility {
padding-left: 20px;
width: 70%;
}
#header-site-menu>li {
margin: 0;
padding-right: 15px;
}
#header-site-menu>li>a {
padding: 5px 10px;
}
.site-navigation ul>li>a {
font-size: 18px;
line-height: 1.1;
}
main br,
main br:after {
content: ' ';
}
.mainstage .carousel h2 {
font-size: 44px;
}
}
@media(max-width: 991px)
{
.cta h2 {
font-size: 30px;
margin-bottom: 25px;
}
.cta-strip {
font-size: 24px;
line-height: 1.3em;
}
footer#site-footer form {
width: 65%;
}
footer#site-footer .site-navigation ul>li {
margin: 0 30px;
}
.feature-block a>strong {
padding: 10px 15px;
font-size: 34px;
line-height: 1.1;
}
header#page-header {
padding-bottom: 1rem;
}
header#page-header h1 {
font-size: 38px;
}
.header-address ul>li {
float: none!important;
margin-bottom: 0.25rem;
}
#header-site-menu>li {
margin: 0;
padding-right: 10px;
}
#header-site-menu>li .sub-menu>li>a {
font-size: 16px;
line-height: 1.2;
padding: 10px 5px;
}
.logo {
width: 40%;
}
main {
padding-bottom: 90px;
}
.mainstage .carousel h2 {
font-size: 40px;
}
.mainstage .carousel-caption {
bottom: 90px;
padding: 25px 20px;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
width: 80px;
}
.product-title {
font-size: 1.1rem;
}
}
@media(max-width: 880px)
{
.header-address {
padding-left: 0;
}
#header-site-menu {
margin-left: -10px;
}
#header-site-menu>li {
padding: 0;
}
}
@media(max-width: 767px)
{
html, button, input {
font-size: 22px;
}
.cta-strip {
display: none;
}
.cta h2 {
font-size: 25px;
line-height: 1.2em;
}
.cta-strip-main {
display: block;
}
footer#site-footer form {
width: 75%;
}
footer#site-footer .site-navigation ul {
margin-bottom: 40px;
}
footer#site-footer .site-navigation ul>li,
.footer-social ul>li {
margin: 0 20px;
}
.form-container [type=submit] {
max-width: 100%;
width: auto;
}
.form-container {
font-size: 1rem;
}
header#page-header {
padding-bottom: 0.75rem;
}
header#page-header h1 {
font-size: 34px;
}
header#site-header .logo {
float: none;
margin: 0 auto 10px;
width: 40%;
}
header#site-header .header-site-utility {
float: none;
padding: 0;
width: 100%;
}
.header-address {
font-size: 15px;
line-height: 1.3;
margin: 0 auto;
padding-left: 0;
text-align: center;
width: 75%;
}
#home-features.row {
padding: 0 15px;
}
#home-features.row {
padding: 0 20px;
}
#home-features.row>div {
float: none;
margin: 0 auto;
padding: 0;
width: 75%;
}
.feature-block a>strong,
.feature-block div>strong {
font-size: 42px;
line-height: 1.05;
}
.feature-block a>figure,
.feature-block div>figure {
margin-bottom: 1rem;
}
header#site-header .site-navigation {
background: #FFFFFF;
border-left: 1px solid #000000;
float: none;
height: 100%;
overflow-x: hidden;
overflow-y: scroll; position: fixed;
right: -2px;
text-align: left;
top: 0;
transition: width 0.5s;
-webkit-overflow-scrolling: touch;
width: 0;
z-index: 5000;
}
body.response header#site-header .site-navigation,
header#site-header .site-navigation>div {
width: 360px;
}
header#site-header .site-navigation>div {
padding: 20px;
}
header#site-header .site-navigation>div #header-site-menu {
margin: 0;
padding: 0;
}
header#site-header .site-navigation>div #header-site-menu>li {
display: block;
}
#header-site-menu>li .sub-menu,
#header-site-menu>li:focus>ul,
#header-site-menu>li:hover>ul {
background: transparent;
box-shadow: none;
display: block;
left: auto;
margin-left: 0;
padding: 5px 0 10px 20px;
position: relative;
text-align: left;
width: 100%;
z-index: auto;
}
.site-navigation #header-site-menu ul>li {
display: block;
}
#header-site-menu>li .sub-menu>li>a {
padding: 5px 0;
text-align: left;
}
.logo {
width: 45%;
}
main {
padding: 30px 0 60px;
}
.mainstage .carousel h2 {
font-size: 36px;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
width: 60px;
}
.mobile-trigger {
background-color: #125780;
background-image: url(//www.cabinetryspecialties.com/wp-content/themes/cspwp/img/header-menu.png);
background-position: 12px 12px;
background-repeat: no-repeat;
background-size: 16px 15px;
border-radius: 4px;
display: block;
height: 40px;
position: absolute;
right: 20px;
text-indent: -9999px;
top: 20px;
width: 40px;
z-index: 400;
}
.mobile-trigger:focus,
.mobile-trigger:hover {
background-color: #000000;
}
body.response #overlay-response {
cursor: pointer;
opacity: 1;
width: 100%;
}
body.response #header-site-navigation,
#header-site-navigation>ul {
width: 360px;
}
}
@media(max-width: 575px)
{
html, button, input {
font-size: 18px;
}
.carousel-caption {
display: none;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.cta h2 {
font-size: 22px;
}
footer#site-footer,
footer#site-footer .copyright {
font-size: 0.9rem;
line-height: 1.6;
}
footer#site-footer form {
width: 90%;
}
footer#site-footer .site-navigation ul {
margin-bottom: 20px;
}
footer#site-footer .site-navigation ul>li,
.footer-social ul>li {
margin: 0 10px;
}
.feature-block a>strong,
.feature-block p.caption {
font-size: 36px;
line-height: 1.2;
}
.feature-block a>strong br,
.feature-block a>strong br:after,
.feature-block p.caption br,
.feature-block p.caption br:after {
content: ' ';
}
header#site-header .logo {
width: 50%;
}
header#page-header {
padding-bottom: 0.5rem;
}
header#page-header h1 {
font-size: 30px;
}
.header-address {
display: none;
}
header#site-header .site-navigation .header-address {
display: block;
padding: 0 30px;
}
header#site-header .site-navigation .header-address ul {
color: #333333;
border-top: 2px solid #d8d8d8;
font-size: 1rem;
line-height: 1.2;
padding: 20px 0;
text-align: left;
}
body.response header#site-header .site-navigation,
header#site-header .site-navigation>div {
width: 320px;
}
#home-features.row>div {
width: 100%;
}
.logo {
width: 55%;
}
main {
padding: 20px 0 40px;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
width: 40px;
}
.product-title {
font-size: 1.2rem;
}
span.wpcf7-list-item.last {
margin-bottom: 0;
}
}
@media(max-width: 480px)
{
.container {
padding-left: 25px;
padding-right: 25px;
}
footer#site-footer form {
margin: 0;
width: 100%;
}
footer#site-footer .subscribe {
display: block;
}
footer#site-footer form p {
text-align: center;
}
footer#site-footer .subscribe .form-input {
display: block;
margin: 0 0 1rem;
width: 100%;
}
footer#site-footer .subscribe .form-submit {
display: block;
margin: 0 auto;
padding: 0;
width: 50%;
}
footer#site-footer .site-navigation ul>li {
display: block;
margin: 0.5rem 0;
}
.footer-social ul>li {
margin: 0.5rem;
}
.feature-block a>strong,
.feature-block p.caption {
font-size: 28px;
}
body.response header#site-header .site-navigation,
header#site-header .site-navigation>div {
width: 280px;
}
header#page-header h1 {
font-size: 26px;
}
header#site-header .logo {
width: 55%;
}
.logo {
width: 65%;
}
main {
padding: 25px 0;
}
.mainstage .carousel-control-next,
.mainstage .carousel-control-prev {
display: none;
}
}
@media(max-width: 380px)
{
html, button, input {
font-size: 100%;
}
.feature-block a>strong,
.feature-block p.caption {
font-size: 24px;
padding: 10px 20px;
}
header#page-header h1 {
font-size: 24px;
}
body.response header#site-header .site-navigation,
header#site-header .site-navigation>div {
width: 240px;
}
header#site-header .logo {
margin-left: 0;
padding-right: 60px;
width: 100%;
}
.logo {
width: 75%;
}
}
@media(max-width: 320px)
{
header#site-header .logo {
padding-right: 50px;
}
.img-fluid {
width: 100%;
}
}