/*========================================================
	Main Style CSS for Shelly & Andy Page 2022
=========================================================*/
/*========================================================
										Fonts Declaration
=========================================================*/
@font-face { font-family: avenirlight; src: url('../fonts/FontsFree-Net-Avenir-Light.ttf'); }
@font-face { font-family: avenirroman; src: url('../fonts/AvenirLTStd-Roman.otf'); }
@font-face { font-family: avenirmedium; src: url('../fonts/Avenir Medium.ttf'); }
@font-face { font-family: avenirheavy; src: url('../fonts/Avenir Heavy.ttf'); }
@font-face { font-family: avenirblack; src: url('../fonts/AvenirLTStd-Black.ttf'); }

/* colors declaration */
:root{
  --top-brown: #483729;
  --white: #fff;
  --dark-title: #483729;
  --light-title: #c8a978;
  --main-text: #000;
  --grey-btn: #999;
  --err-red: #d73524;
  --err-green: #1e4fa9;
}


/*========================================================
										RESET
=========================================================*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, address, em, img, sub, sup, dl, dt, dd, ol, ul, li, form, label, legend, caption, article, aside, figcaption, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

ol, ul {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
}

*:focus {outline: none;}
* {box-sizing: border-box;}

input[type='submit']
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

/*========================================================
                      Main Styles
=========================================================*/
body {
   background: #fff;
   font-family: avenirmedium, sans-serif,arial;
	 font-weight: 400;
	 color: #000;
	 font-size: 18px;
}

li {
   list-style-type: none;
}

a {
   text-decoration: none;
}

.clear {
   clear: both;
}
/*=======================================================
                       Main Layout
=========================================================*/

/*========================================================
	NAVIGATION
=========================================================*/
.menu ul li.mlogo,
.menu ul li.mphone,
.menu ul li.maddress,
.menu ul li.mhours,
.menu ul li.msocial,
.menu ul li.extrlinks,
.darktelMob,
.darklocMob,
.bannerImgMob {
	display: none;
}
.navTopMob,
.smobitrigger,
.mnuclose {
    display: none;
}

/*========================================================
	CONTENT
=========================================================*/
.pageFull {
   width: 100%;
   margin: 0 auto;
}
.pageSize {
    width: 1300px;
    margin: 0 auto;
}
.mainPage {
    width: 70%;
    margin: 0 auto;
}
.pageSub {
    width: 90%;
    margin: 0 auto;
}
@media only screen and (min-width: 1024px)  and (max-width: 1919px){
    .pageSize {
        width: 85%;
    }
    .mainPage {
        width: 80%;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .pageSize {
        width: 90%;
    }
    .mainPage {
        width: 80%;
    }
}
@media only screen and (max-width: 767px){
    .pageSize {
        width: 90%;
    }
    .mainPage {
        width: 80%;
    }
}
/*========================================================
	BUTTONS
=========================================================*/
.bannerBtn {
    display: inline-block;
    background: rgba(255,255,255,.9);
    padding: 20px 40px;
    text-align: center;
    font-size: 30px;
    text-transform: capitalize;
    cursor: pointer;
    font-family: avenirheavy,arial,sans-serif;
}
.learnBtn {
    display: inline-block;
    padding: 20px 50px;
    text-align: center;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    font-weight: 500;
    background: #f2eadf;
    background: -moz-linear-gradient(-45deg, #f2eadf 0%, #b8b1ab 100%);
    background: -webkit-linear-gradient(-45deg, #f2eadf 0%,#b8b1ab 100%);
    background: linear-gradient(135deg, #f2eadf 0%,#b8b1ab 100%);
    font-family: avenirheavy,arial,sans-serif;
}
.lrnBtnMin,
.watchBtn{
  min-width: 263px;
}
.lrnBtnCatMin,
.watchBtnCat{
  min-width: 320px;
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .bannerBtn {
        font-size: 28px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .bannerBtn {
        font-size: 21px;
        padding: 15px 45px;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .bannerBtn {
        font-size: 21px;
        padding: 15px 45px;
    }
    .learnBtn {
        font-size: 24px;
    }
    .lrnBtnMin,
    .watchBtn{
      min-width: 240px;
    }
}
@media only screen and (max-width: 767px){
    .bannerBtn {
        font-size: 21px;
        padding: 10px 30px;
    }
}
/*============================================
	TOP Navigation
=========================================================*/
.smallTop {
    width: 100%;
    margin: 0 auto;
    background: var(--top-brown);
    height: 30px;
    display: flex;
    align-items: center;
}
.darkTop {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.darkLeft,
.darkRight {
    width: 50%;
}
.darkLeft {
    justify-content: flex-start;
}
.darkRight {
    justify-content: flex-end;
    text-align: right;
}
.darkLeft p,
.darkRight a {
    display: inline-block;
    font-size: 15px;
    color: var(--white);
    font-weight: 300;
    line-height: 1;
}
.darkLeft p {
    text-transform: capitalize;
}
.darkRight a {
    text-align: right;
}
header {
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    height: 110px;
    display: block;
}
.navbar-fixed-top {
    background-color: rgba(255,255,255,1);
}
.navbar-fixed-top.scrolled {
  background-color: #fff!important;
  transition: background-color 200ms linear;
}
.navWrap {
    width: 100%;
    margin: 0 auto;
}
.navInside {
    width: 1300px;
    margin: 0 auto;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.logoDesk {
    width: 20%;
    position: relative;
}
.navItems {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.logoDesk img {
  position: absolute;
  left: 0;
  top: -40px;
    width: 220px;
    z-index: 1;
    border-radius: 2px;
}
.navMenuItems {
    width: 80%;
    text-align: left;
}
.menu ul li {
    display: inline-block;
    padding: 20px 0;
    vertical-align: middle;
}
.menu ul li a:hover, a:focus, a:active {
    color: var(--main-text);
    text-decoration: none;
    font-weight: 700;
}
.menu ul li a {
    font-family: avenirheavy,arial, sans-serif;
    text-decoration: none;
    transition: color 0.1s, background-color 0.1s;
}
.menu ul li a {
    position: relative;
    display: block;
    padding: 16px 0;
    margin: 0 15px;
    letter-spacing: 1px;
    font-size: 17px;
    line-height: 16px;
    font-weight: 600;
    text-transform: capitalize;
    transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
    color: #000;
    font-family: avenirmedium,arial,sans-serif;
}
.menu ul li a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--light-title);
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}
.menu ul li a:active::before {
    background-color: #000;

}
.menu ul li a:hover::before, a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}
.topConnec {
    width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-left: 30px;
}
.topConnec img {
    width: 100%;
}
.topSocial {
    width: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.topSocial a {
    display: inline-block;
    margin-left: 20px;
}
.fatop {
    color: #3f4245;
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .darkTop,
    .navInside,
    .bannerInsWrap {
        width: 95%;
    }
    .navMenuItems {
        width: 90%;
        text-align: center;
    }
    .topSocial {
        width: 10%;
    }
    .menu ul li a {
        margin: 0 15px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .darkTop,
    .navInside,
    .bannerInsWrap {
        width: 90%;
    }
    .logoDesk {
        width: 25%;
    }
    .navItems {
        width: 75%;
    }
    .topSocial {
        width: 10%;
    }
    .navMenuItems {
        width: 90%;
        text-align: center;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .darkTop,
    .navInside,
    .bannerInsWrap {
        width: 90%;
    }
    .logoDesk {
        width: 25%;
    }
    .navItems {
        width: 75%;
    }
    .topSocial {
        width: 10%;
    }
    .navMenuItems {
        width: 90%;
        text-align: center;
    }
}
@media only screen and (max-width: 767px){
    .darkTop {
        width: 95%;
    }
    .darkLeft,
    .darkRight {
        line-height: 15px;
    }
    .darkLeft {
        width: 60%;
    }
    .darkRight {
        width: 40%;
    }
    .navInside,
    .bannerInsWrap {
        width: 90%;
    }
    .logoDesk {
        width: 25%;
    }
    .navItems {
        width: 75%;
    }
    .topSocial {
        width: 10%;
    }
    .navMenuItems {
        width: 90%;
        text-align: center;
    }
    .smallTop {
        height: 30px;
    }

    .darktelMob {
        margin-right: 25px;
    }
    .topfa {
        font-size: 21px;
        color: var(--white);
    }
}
@media only screen and (max-width: 479px){
    .darkLeft p,
    .darkRight a {
        font-size: 12px;
    }
    .darkLeft {
        width: 70%;
    }
    .darkRight {
        width: 30%;
    }
}
/*========================================================
	INDEX banner
=========================================================*/
.bannerMain {
    background: url('../images/index/bannerbg.webp') center center no-repeat;
    background-size: cover;
    height: 1200px;
    width: 100%;
    position: relative;
}
.bannerInsWrap {
    width: 1300px;
    margin: 0 auto;
    padding-top: 420px;
    text-align: center;
}
.bannerArr {
    width: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
h1.bannerH1 {
    font-size: 100px;
    color: var(--white);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 70px;
    letter-spacing: 2px;
}
h1.bannerH1 span {
    display: block;
}
.bannerArr img {
    max-width: 50px;
}
.twoBtnsWrap{
  display: flex;
  justify-content: center;
}
.scndBtn{
  margin-left: 20px;
}

@media only screen and (min-width: 1920px)  and (max-width: 2559px){
    .bannerMain {
        height: 980px;
    }
    .bannerInsWrap {
        padding-top: 260px;
    }
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .bannerMain {
        height: 640px;
    }
    .bannerInsWrap {
        padding-top: 140px;
    }
    h1.bannerH1 {
        font-size: 80px;
    }
    h1.shadowH1 {
        font-size: 60px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .bannerInsWrap {
        width: 90%;
        padding-top: 140px;
    }
    .bannerMain {
        height: 540px;
    }
    h1.bannerH1 {
        font-size: 64px;
        margin-bottom: 35px;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .bannerInsWrap {
        width: 90%;
        padding-top: 80px;
    }
    .bannerMain {
        height: 540px;
    }
    h1.bannerH1 {
        font-size: 64px;
        margin-bottom: 35px;
    }
}
@media only screen and (max-width: 767px){
    .bannerInsWrap {
        width: 90%;
        padding-top: 70px;
    }
    .bannerMain {
        height: 540px;
    }
    h1.bannerH1 {
        font-size: 43px;
        margin-bottom: 35px;
    }
    .twoBtnsWrap{
      flex-direction: column;
      align-items: center;
    }
    .twoBtnsWrap a{
      min-width: 196px;
      max-width: 196px;
    }
    .scndBtn{
      margin: 20px 0 0 0;
    }
}
@media only screen and (max-width: 479px){
    h1.bannerH1 {
        font-size: 42px;
        line-height: 1.1;
    }
}
/*========================================================
	INDEX boxes
=========================================================*/
.indexBoxWrap {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 90px 0;
}
.indexBoxLeft,
.indexBoxRight {
    width: 50%;
}
.indexBoxRight img {
    width: 100%;
}
.indexBoxLeft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
}
.indexBoxLeft h3 {
    text-transform: capitalize;
    color: var(--dark-title);
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.2;
}
.lighterH3 {
    color: var(--light-title);
}
.lighterbH3 {
    color: var(--light-title);
    display: block;
}
.indexBoxLeft p {
    text-align: center;
    font-size: 20px;
    line-height: 1.7;
}
.learnBtnWrap {
    margin-top: 30px;
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .indexBoxLeft h3 {
        font-size: 38px;
    }
    .indexBoxLeft {
        padding: 0 40px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .indexBoxWrap {
        width: 100%;
        padding: 75px 0 0;
    }
    .indexBoxLeft {
        padding: 0 40px 0 0;
    }
    .indexBoxLeft h3 {
        font-size: 32px;
    }
    .indexBoxLeft p {
        font-size: 18px;
    }
    .boxbg {
        padding-bottom: 90px;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .indexBoxWrap {
        width: 100%;
        padding: 75px 0 0;
    }
    .indexBoxLeft {
        padding: 0 60px 0 0;
    }
    .indexBoxLeft h3 {
        font-size: 32px;
    }
    .indexBoxLeft p {
        font-size: 16px;
    }
    .boxbg {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .indexBoxWrap {
        width: 100%;
        padding: 35px 0 0;
        flex-direction: column-reverse;
    }
    .indexBoxLeft, .indexBoxRight {
        width: 100%;
    }
    .indexBoxLeft {
        padding: 35px 0 40px 0;
    }
    .indexBoxLeft h3 {
        font-size: 34px;
    }
    .indexBoxLeft p {
        font-size: 18px;
    }
    .boxbg {
        padding-bottom: 40px;
    }
    .learnBtnWrap {
    	margin-top: 35px;
    }
    .learnBtnWrapReviews {
      margin-top: 72px;
    }
}
@media only screen and (max-width: 479px){
    .boxbg {
        padding-bottom: 0;
    }
}
/*=======================================================
    FOOTER
=========================================================*/
.fooMenu ul li.mlogo,
.fooMenu ul li.mphone,
.fooMenu ul li.maddress,
.fooMenu ul li.msocial,
.fooMenu ul li.mhours,
.fooMenu span.undeli,
.fooMenu ul li.blinks,
.fooMenu ul li.extrlinks {
    display: none;
}
.foobg {
    background: #fff;
}
.fLine {
    border-top: 2px dotted var(--main-text);
}
.fooCols {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.fcol1 {
    width: 35%;
    padding: 50px 0;
}
.fcol1 img {
    width: 100%;
}
.fooColsRest {
    width: 65%;
    display: flex;
    flex-direction: column;
    padding-left: 60px;
}
.fooColTit h5 {
    font-size: 36px;
    font-family: avenirheavy,arial,sans-serif;
    margin-top: 50px;
}
.fooColRestWrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.fcol2,
.fcol3,
.fcol4 {
    width: 33%;
    display: flex;
    flex-direction: column;
    padding: 25px 0 50px;
}
.memberOf{
  padding: 10px 0 0;
  text-align: center;
}
.fooCol .memberOf p{

  padding-bottom: 0;
}
.memberOf img{
  width: 70%;
  margin: 0 auto;
}
.bbbLink{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.fooSocials{
  margin: 27px 0 0;
}
.fooSocials img{
  width: 45px;
  margin-right: 8px;
}
.fooCol h6 {
    font-size: 23px;
    text-transform: capitalize;
    padding-bottom: 20px;
    font-weight: 400;
}
.fooCol p {
    font-size: 20px;
    line-height: 1.3;
    padding-bottom: 15px;
}
.fooCol p span {
    display: block;
}
.fooLink,
.fooLinkRights {
    color: var(--light-title);
    text-decoration: underline;
}
.fooLink {
    font-size: 20px;
    font-family: avenirroman,arial,sans-serif;
}
.fooLinkRights {
    font-size: 16px;
}
.fooRights {
    padding: 10px 0 35px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.fooRightsL,
.fooRightsR {
    width: 50%;
    font-size: 16px;
}
.fooRightsR {
    text-align: right;
}
.phoneFoot{
  margin-top: 40px;
}
.fooMenu {
    width: 100%;
    margin: 0 auto 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 2px dotted var(--main-text);
    padding-top: 20px;
}
.fooMenu ul li {
    font-size: 17px;
    text-transform: capitalize;
    display: inline-block;
    margin: 0 10px;
}
.warTop {
    width: 1300px;
    margin: 90px auto 50px;
    text-align: center;
}
.tipsTop {
    margin-top: 0;
}
.tipsTop2 {
    margin: 0 auto;
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .warTop {
        margin: 20px auto 0;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .fooCol h6 {
        font-size: 18px;
    }
    .fooCol p {
        font-size: 16px;
    }
    .fcol2,
    .fcol3,
    .fcol4 {
        padding: 25px 0;
    }
    .fooRightsL,
    .fooLinkRights {
        font-size: 14px;
    }
    .fooColTit h5 {
        font-size: 30px;
    }
    .fooColsRest {
        padding-left: 35px;
    }
    .warTop {
        margin: 0 auto 50px;
    }
    .warTop {
        margin: 0 auto;
        width: 100%;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .fooCol h6 {
        font-size: 18px;
    }
    .fooCol p {
        font-size: 16px;
    }
    .fcol2,
    .fcol3,
    .fcol4 {
        padding: 25px 0;
    }
    .fooRightsL,
    .fooLinkRights {
        font-size: 14px;
    }
    .fooRightsL span {
        display: block;
    }
    .fooCols {
        flex-direction: column;
        align-items: flex-start;
    }
    .fcol1 {
        width: 50%;
        padding: 35px 0 15px;
    }
    .fooColsRest {
        padding-left: 0;
        width: 100%;
    }
    .fcol2,
    .fcol3,
    .fcol4 {
        width: 33%;
    }
    .fooRights {
        padding: 35px 0;
    }
    .fooColTit h5 {
        margin-top: 0;
    }
    .warTop {
        margin: 0 auto;
        width: 100%;
    }
    .fooMenu ul li {
        font-size: 15px;
    }
}
@media only screen and (max-width: 767px){
    .fooCol h6 {
        font-size: 18px;
    }
    .fooCol p {
        font-size: 16px;
    }
    .fcol2,
    .fcol3,
    .fcol4 {
        padding: 0 0 35px;
    }
    .fooSocials img{
      width: 45px;
    }
    .fooRightsL,
    .fooLinkRights {
        font-size: 14px;
    }
    .fooCols {
        flex-direction: column;
        align-items: flex-start;
    }
    .fcol1 {
        width: 100%;
        padding: 35px 0 15px;
    }
    .fooColsRest {
        padding-left: 0;
        width: 100%;
    }
    .fcol2,
    .fcol3,
    .fcol4 {
        width: 100%;
    }
    .fooRights {
        padding: 35px 0;
        flex-direction: column;
    }
    .fooColTit h5 {
        font-size: 30px;
        margin-top: 0;
    }
    .fooColRestWrap {
        padding-top: 35px;
    }
    .fooColRestWrap {
        flex-direction: column;
    }
    .fooRightsL, .fooRightsR {
        width: 100%;
        text-align: center;
    }
     .fcol4 img {
        max-width: 288px;
        margin: 0 auto;
    }
    .warTop {
        margin: 0 auto;
        width: 100%;
    }
    .fooMenu ul li {
        display: block;
        text-align: center;
        padding: 4px 0;
    }
}
@media only screen and (max-width: 479px){
    .fooRightsL span,
    .fooColTit span {
        display: block;
    }


}
/*========================================================
	WARRANTY & OTHER pages
=========================================================*/
.hardPdf {
    display: none;
}
.warTit {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    background: var(--dark-title);
    color: var(--white);
    font-size: 42px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
}
.warWrap {
    width: 100%;
    padding: 35px 0;
    margin-bottom: 50px;
}
.warWrap h3 {
    font-size: 28px;
    text-transform: uppercase;
    padding-top: 20px;
}
.warWrap p {
    font-size: 21px;
    line-height: 1.3;
}
.renovWrap {
    padding: 20px 0;
}
.renovWrap p {
    padding-bottom: 20px;
    font-size: 21px;
    line-height: 1.3;
}
.renovWrap ol {
    list-style: decimal;
    margin: initial;
    padding: 0 0 20px 40px;
    text-align: left;
}
.renovWrap ol li {
    display: list-item;
    list-style-type: decimal;
    list-style-position: inside;
    font-size: 21px;
    padding-bottom: 15px;
}
.hardWrap p {
    padding: 35px 0 50px;
    font-size: 21px;
    line-height: 1.3;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .renovWrap {
        padding: 35px 0;
    }
    .renovWrap p,
    .renovWrap ol li {
        font-size: 18px;
    }
    .hardWrap img {
        width: 100%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
        .renovWrap {
        padding: 35px 0;
    }
    .renovWrap p,
    .renovWrap ol li,
    .hardWrap p {
        font-size: 16px;
    }
    .hardWrap img {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1919px) {
    .warTit {
        font-size: 30px;
    }
    .warWrap h3 {
        font-size: 21px;
    }
    .warWrap p {
        font-size: 16px;
    }
    .warWrap {
        margin-bottom: 10px;
    }
       .renovWrap {
        padding: 35px 0;
    }
    .renovWrap p,
    .renovWrap ol li {
        font-size: 16px;
    }
    .hardWrap img {
        width: 100%;
    }

}
@media only screen and (max-width: 767px) {
   .warTit {
        font-size: 30px;
    }
    .warWrap h3 {
        font-size: 21px;
    }
    .warWrap p {
        font-size: 18px;
    }
    .warWrap {
        margin-bottom: 10px;
        padding: 0 0 20px;
    }
     .renovWrap p,
    .renovWrap ol li {
        font-size: 18px;
    }
    .hardImg {
        display: none;
    }
    .hardWrap p {
        padding: 35px 0 0;
        font-size: 18px;
    }
    .hardPdf {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 15px auto;
    }
    .hardPdf img {
        width: 80px;
    }
}
@media only screen and (max-width: 479px) {
    .renovWrap ol {
        padding-left: 0;
    }
}
/*========================================================
	WHY US page
=========================================================*/

.bannerWhyUs {
    background: url(../images/why-us/bannerWhyus-1.jpg) center center no-repeat;
    background-size: cover;
    height: 760px;
    width: 100%;
    position: relative;
}
.bannerReview{
  background-image: url(../images/reviews/reviewsbg.jpg);
}
.gallerybg{
  background-image: url(../images/gallery/gallerybg-kitchen-drawers.jpg);
}
.catalogbg{
  background-image: url(../images/catalog/catalogbg.jpg);
}
.whyusWrap {
    width: 100%;
    margin: 0 auto;
    padding: 90px 0 35px;
}
.whyusWrap h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    color: var(--main-text);
}
.whyusWrap h2 a {
    color: var(--light-title);
    text-decoration: underline;
}
.bannerWhyUsWrap,
.bannerReviewsWrap,
.bannerGalleryWrap,
.bannerCatalogWrap {
    width: 1300px;
    margin: 0 auto;
    padding-top: 230px;
    text-align: center;
}
.bannerCatalogWrap {
    padding-top: 160px;
}
.whyusBoxes {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0 50px;
}
.whyusBox {
    width: 18%;
}
.whyusCircle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whyusLight {
    background: var(--light-title);
}
.whyusDark {
    background: var(--dark-title);
}
.whyusCircle p {
    font-size: 24px;
    color: var(--white);
    padding: 0 30px;
    text-align: center;
    font-family: avenirlight,arial,sans-serif;
}
.titSub1 h3 {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 110px;
}
.titSub1 span {
    text-transform: uppercase;
    font-size: 24px;
    display: block;
    letter-spacing: 2px;
    font-family: avenirblack,arial,sans-serif;
}
.colsWhyusWrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}
.dottedArrow {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}
.dottedArrow img {
    width: 440px;
}
.colWhyusLeft,
.colWhyusRight {
    width: 47%;
    position: relative;
}
.beforeP,
.afterP {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 80px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.beforeP {
    background: var(--dark-title);
}
.afterP {
    background: var(--light-title);
}
.beforeP p,
.afterP p {
    text-align: center;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--white);
    line-height: 80px;
    letter-spacing: 2px;
}
.colWhyusLeft img,
.colWhyusRight img {
    width: 100%;
}
.befafterbg {
    padding: 0 0 50px;
}
.gallePadd {
    padding: 90px 0 0;
}
.borderWrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border: 2px solid var(--light-title);
    padding: 50px 0;
}
.quotemark {
    width: 40px;
    margin-bottom: 20px;
}
.borderWrap p {
    width: 80%;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 20px;
    font-weight: 500;
}
.borderWrap p span {
    display: block;
}
.stars {
    width: 170px;
    margin-top: 10px;
}
.dottedLine {
    width: 100%;
    height: 6px;
    padding-bottom: 3px;
    margin: 50px auto 52px;
    border-bottom: 2px dotted var(--main-text);
}
.line2{
  padding-bottom: 50px;
}
.reasonsbg {
    padding: 90px 0 50px;
}
.reasonsTit {
    text-align: center;
}
.reasonsTit h3 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 90px;
}
.reasonsTit h3 span {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: avenirblack,arial,sans-serif;
}
.reasonSMbtmPadd h3{
  padding-bottom: 40px;
}
.reasonSMbtmPadd .dropdown-container{
  margin: 0 0 80px;
}
.reasonSMbtmPadd select {
    padding: 10px;
    font-size: 16px;
    width: 250px;
}
.reasonsCol {
    padding-bottom: 50px;
    text-align: center;
}
.reasonsCol2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 50px;
  max-width: 960px;
  margin: 0 auto;
}
.reasonGroup{
  max-width: 788px;
  text-align: left;
}
.reasonCircle {
    width: 100px;
    height: 100px;
    background: var(--dark-title);
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 8px;
}
.reasonCircle2 {
    width: 100px;
    height: 100px;
    background: var(--dark-title);
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 30px 0 0;
    padding: 8px;
}
.lightCircle{
    background: var(--light-title);
}
.circleNum {
    font-size: 42px;
    color: var(--white);
    line-height: 1;
    font-weight: 700;
}
.reasonsCol h4 {
    padding: 5px 0 10px;
    font-size: 21px;
    font-family: avenirblack,arial,sans-serif;
}
.reasonsCol2 h4 {
    padding: 5px 0 10px;
    font-size: 21px;
    font-family: avenirblack,arial,sans-serif;
}
.reasonPar {
    font-size: 21px;
    line-height: 1.5;
}
.reasonPar span {
    font-weight: 900;
}
.rlink {
    color: var(--light-title);
    text-decoration: underline;
    font-family: avenirroman,arial,sans-serif;
}
.norwalkdir,
.norwalkdir:active,
.norwalkdir:hover {
    text-decoration: underline;
    color: var(--white);
}
.revLast {
    padding-bottom: 60px;
}
.gallWrap {
    padding-top: 240px;
}
.reviewsbg {
    padding: 90px 0;
}
.reviewsWrap {
    width: 100%;
    margin: 0 auto;
}
.cabinetbg {
    background: url('../images/cabinet/bannerCabinet.jpg') center center no-repeat;
    background-size: cover;
}
.cabinetBan {
    padding-top: 400px!important;
}
.cabiWrap {
    padding: 120px 0;
}
.cabiBox {
    padding-bottom: 50px;
}
.cabiBox h2 {
    text-transform: capitalize;
    color: var(--dark-title);
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 70px;
    text-align: center;
    line-height: 1.2;
}
.cabiBox h2 span {
    color: var(--light-title);
}
.cabiBox p {
    font-size: 30px;
    text-align: center;
    line-height: 1.5;
    padding-bottom: 35px;
}
.cabipadtop {
    padding-top: 50px;
}
@media only screen and (min-width: 2561px){
    .bannerWhyUs {
        height: 1250px;
    }
    .bannerWhyUsWrap, .bannerReviewsWrap, .bannerGalleryWrap, .bannerCatalogWrap {
        padding-top: 450px;
    }
}

@media only screen and (min-width: 1920px)  and (max-width: 2560px){
    .cabiWrap {
        padding: 120px 0 50px;
    }
    .cabinetBan {
        padding-top: 180px!important;
    }
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .cabinetBan {
        padding-top: 130px!important;
    }
    .bannerWhyUs {
        height: 600px;
    }
    .whyusWrap h2 {
        font-size: 19px;
    }
    .whyusCircle p {
        font-size: 21px;
    }
    .titSub1 h3 {
        font-size: 42px;
        padding-bottom: 90px;
    }
    .titSub1 span {
        font-size: 20px;
    }
    .beforeP p, .afterP p {
        font-size: 22px;
    }
    .beforeP, .afterP {
        height: 70px;
    }
    .beforeP p, .afterP p {
        line-height: 70px;
    }
    .dottedArrow img {
        width: 360px;
    }
    .colsWhyusWrap {
        width: 1106px;
    }
    .borderWrap,
    .reasonCircle {
        border-width: 1px;
    }
    .borderWrap,
    .dottedLine {
        width: 1106px;
    }
    .quotemark {
        width: 30px;
    }
    .borderWrap p {
        font-size: 18px;
    }
    .stars {
        width: 150px;
    }
    .reasonsTit h3 {
        font-size: 42px;
    }
    .reasonsTit h3 span {
        font-size: 24px;
    }
    .reasonsCol h4,
    .reasonsCol2 h4 {
        font-size: 18px;
        font-weight: 900;
    }
    .reasonPar {
        font-size: 18px;
    }
    .circleNum {
        font-size: 40px;
    }
    .gallePadd {
        padding: 60px 0 0;
    }
    .bannerWhyUsWrap {
        padding-top: 210px;
    }
    .bannerReviewsWrap {
        padding-top: 180px;
    }
    .bannerGalleryWrap {
        padding-top: 180px;
    }
    .bannerCatalogWrap {
        padding-top: 130px;
    }
    .cabiWrap {
        padding: 90px 0 70px;
        width: 1024px;
        margin: 0 auto;
    }
    .cabiBox p {
        font-size: 24px;
    }
    .cabiBox {
        padding-bottom: 0;
    }
    .cabipadtop {
        padding-top: 20px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
     .cabinetBan {
        padding-top: 130px!important;
    }
    .bannerWhyUsWrap {
        width: 90%;
        padding-top: 150px;
    }
    .bannerWhyUs {
        height: 500px;
    }
    .whyusWrap {
        padding: 70px 0 35px;
    }
    .whyusWrap h2 {
        font-size: 19px;
    }
    .whyusCircle {
        width: 170px;
        height: 170px;
    }
    .whyusCircle p {
        font-size: 21px;
    }
    .titSub1 h3 {
        font-size: 42px;
        padding-bottom: 90px;
    }
    .titSub1 span {
        font-size: 21px;
    }
    .beforeP p, .afterP p {
        font-size: 21px;
    }
    .beforeP, .afterP {
        height: 60px;
        width: 160px;
    }
    .beforeP p, .afterP p {
        line-height: 60px;
    }
    .dottedArrow img {
        width: 280px;
    }
    .colsWhyusWrap {
        width: 870px;
    }
    .borderWrap,
    .reasonCircle {
        border-width: 1px;
    }
    .borderWrap {
        padding: 35px 0;
    }
    .quotemark {
        width: 30px;
    }
    .borderWrap p {
        font-size: 16px;
        width: 90%;
    }
    .stars {
        width: 130px;
    }
    .reasonsbg {
        padding: 50px 0 25px;
    }
    .reasonsTit h3 {
        font-size: 32px;
    }
    .reasonsTit h3 span {
        font-size: 21px;
    }
    .reasonCircle {
        padding: 5px 0;
        width: 80px;
        height: 80px;

    }
    .reasonsCol h4,
    .reasonsCol2 h4 {
        font-size: 18px;
    }
    .circleNum {
        font-size: 40px;
    }
    .reasonPar {
        font-size: 16px;
    }
    .gallePadd {
        padding: 50px 0 0;
    }
    .reasonGroup {
    	max-width: 730px;
    }
    .reasonCircle2 {
        width: 80px;
        height: 80px;
    }
    .bannerWhyUsWrap, .bannerReviewsWrap, .bannerGalleryWrap, .bannerCatalogWrap {
        width: 90%;
    }
    .bannerReviewsWrap,
    .bannerGalleryWrap  {
        padding-top: 150px;
    }
    .bannerCatalogWrap {
        padding-top: 100px;
    }
    .cabiWrap {
        padding: 70px 0 50px;
        width: 760px;
        margin: 0 auto;
    }
    .cabiBox p {
        font-size: 21px;
    }
    .cabiBox {
        padding-bottom: 0;
    }
    .cabipadtop {
        padding-top: 20px;
    }
    .reviewsbg {
        padding: 50px 0;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
     .cabinetBan {
        padding-top: 130px!important;
    }
    .bannerWhyUsWrap {
        width: 90%;
        padding-top: 150px;
    }
    .bannerWhyUsWrap, .bannerReviewsWrap, .bannerGalleryWrap, .bannerCatalogWrap {
        width: 90%;
    }
    .bannerReviewsWrap,
    .bannerGalleryWrap  {
        padding-top: 150px;
    }
    .bannerCatalogWrap {
        padding-top: 100px;
    }
    .bannerWhyUs {
        height: 500px;
    }
    .whyusWrap {
        padding: 70px 0 35px;
    }
    .whyusWrap h2 {
        font-size: 19px;
    }
    .whyusCircle {
        width: 140px;
        height: 140px;
    }
    .whyusCircle p {
        font-size: 16px;
    }
    .whyusBoxes {
        padding: 15px 0 50px;
    }
    .titSub1 h3 {
        font-size: 36px;
        padding-bottom: 60px;
    }
    .titSub1 span {
        font-size: 18px;
    }
    .beforeP p, .afterP p {
        font-size: 18px;
    }
    .beforeP, .afterP {
        height: 50px;
        width: 140px;
    }
    .beforeP p, .afterP p {
        line-height: 50px;
    }
    .dottedArrow {
        top: 10px;
    }
    .dottedArrow img {
        width: 200px;
    }
    .colsWhyusWrap {
        width: 691px;
    }
    .borderWrap,
    .reasonCircle {
        border-width: 1px;
    }
    .borderWrap {
        padding: 35px 0;
    }
    .quotemark {
        width: 30px;
    }
    .borderWrap p {
        font-size: 16px;
        width: 95%;
    }
    .borderWrap p span {
        padding-top: 10px;
    }
    .stars {
        width: 130px;
    }
    .reasonsbg {
        padding: 0;
    }
    .reasonsTit h3 {
        font-size: 28px;
        padding-bottom: 50px;
    }
    .reasonsTit h3 span {
        font-size: 18px;
    }
    .reasonCircle {
        padding: 5px 0;
        width: 80px;
        height: 80px;
    }
    .reasonsCol h4,
    .reasonsCol2 h4 {
        font-size: 18px;
    }
    .circleNum {
        font-size: 40px;
    }
    .reasonPar {
        font-size: 16px;
    }
    .gallePadd {
        padding: 50px 0 0;
    }
    .reasonGroup {
    	max-width: 540px;
    }
    .reasonCircle2 {
        width: 70px!important;
        height: 70px;
    }
    .cabiWrap {
        padding: 50px 0 40px;
        width: 90%;
        margin: 0 auto;
    }
    .cabiBox p {
        font-size: 21px;
    }
    .cabiBox {
        padding-bottom: 0;
    }
    .cabipadtop {
        padding-top: 20px;
    }
    .cabiBox h2 {
        font-size: 38px;
        margin-bottom: 50px;
    }
    .reviewsbg {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 767px){
    .cabinetbg {
        background: url('../images/cabinet/bannerCabinetMob.jpg') center center no-repeat;
        background-size: cover;
    }
    .cabinetBan {
        padding-top: 150px!important;
    }
    .bannerWhyUsWrap {
        width: 90%;
        padding-top: 100px;
    }
     .bannerWhyUsWrap, .bannerReviewsWrap, .bannerGalleryWrap, .bannerCatalogWrap {
        width: 90%;
    }
    .bannerWhyUs {
        height: 450px;
    }
    .bannerReviewsWrap {
        padding-top: 150px;
    }
    .bannerGalleryWrap {
        padding-top: 140px;
    }
    .bannerCatalogWrap {
        padding-top: 120px;
    }
    .whyusWrap {
        padding: 65px 0 0;
    }
    .whyusWrap h2 {
        font-size: 19px;
    }
    .whyusCircle {
        width: 180px;
        height: 180px;
        margin: 25px auto 0;
    }
    .whyusCircle p {
        font-size: 21px;
    }
    .whyusBoxes {
        padding: 15px 0 35px;
        flex-direction: column;
    }
    .titSub1 h3 {
        font-size: 36px;
        padding-bottom: 60px;
    }
    .titSub1 span {
        font-size: 16px;
    }
    .beforeP p, .afterP p {
        font-size: 18px;
    }
    .beforeP, .afterP {
        height: 50px;
        width: 140px;
    }
    .beforeP p, .afterP p {
        line-height: 50px;
    }
    .dottedArrow {
        display: none;
    }
    .dottedArrow img {
        width: 200px;
    }
    .colWhyusLeft, .colWhyusRight {
        width: 100%;
    }
    .colWhyusLeft {
        margin-bottom: 20px;
    }
    .colsWhyusWrap {
        width: 100%;
        flex-direction: column;
    }
    .befafterbg {
            padding: 0 0 25px;
    }
    .gallePadd {
        padding: 50px 0 0;
    }
    .dottedLine {
            margin: 25px auto 27px;
    }
    .line2{
      padding-bottom: 20px;
    }
    .borderWrap,
    .reasonCircle {
        border-width: 1px;
    }
    .borderWrap {
        padding: 35px 0;
    }
    .quotemark {
        width: 30px;
    }
    .borderWrap p {
        font-size: 16px;
        width: 95%;
    }
    .borderWrap p span {
        padding-top: 10px;
    }
    .stars {
        width: 130px;
    }
    .reasonsbg {
        padding: 0;
    }
    .reasonsTit h3 {
        font-size: 28px;
        padding-bottom: 50px;
        line-height: 1.3;
    }
    .reasonsTit h3 span {
        font-size: 16px;
    }
    .reasonSMbtmPadd h3{
      padding-bottom: 20px;
    }
    .reasonCircle {
        padding: 5px 0;
        width: 80px;
        height: 80px;
    }
    .reasonsCol h4,
    .reasonsCol2 h4 {
        font-size: 18px;
        text-align: center;
    }
    .circleNum {
        font-size: 40px;
    }
    .reasonPar {
        font-size: 18px;
    }
    .reasonsCol2 {
        flex-direction: column;
    }
    .reasonCircle2 {
        width: 70px!important;
        height: 70px;
    }
    .revLast {
        padding-bottom: 30px;
    }
    .cabiWrap {
        padding: 50px 0 40px;
        width: 100%;
        margin: 0 auto;
    }
    .cabiBox p {
        font-size: 21px;
    }
    .cabiBox {
        padding-bottom: 0;
    }
    .cabipadtop {
        padding-top: 20px;
    }
    .cabiBox h2 {
        font-size: 38px;
        margin-bottom: 35px;
    }
    .ccabinets {
        width: 320px;
        margin: 0 auto;
    }
    .reviewsbg {
        padding: 60px 0 20px;
    }
}
@media only screen  and (min-width: 480px) and (max-width: 767px) {
  .reasonGroup {
    max-width: 440px;
      padding-top: 20px;
      text-align: center;
  }
    .bannerCatalogWrap h1 {
        font-size: 38px;
        width: 432px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 479px){
    .bannerWhyUs {
        height: 400px;
    }
    .bannerWhyUsWrap {
        padding-top: 80px;
    }
     .bannerCatalogWrap {
        padding-top: 40px;
    }
    .bannerCatalogWrap h1 {
        width: 288px;
        margin: 0 auto;
    }
    .whyusBoxes {
        padding: 15px 0 50px;
    }
    .titSub1 h3 {
        padding-bottom: 35px;
    }
    .borderWrap p {
        font-size: 18px;
    }
    .whyusCircle {
        width: 200px;
        height: 200px;
    }
    .whyusCircle p {
        font-size: 24px;
    }
    .reasonsTit h3 {
        font-size: 30px;
    }
    .reasonsTit h3 span {
        padding-bottom: 10px;
    }
    .reasonPar {
        font-size: 18px;
        text-align: center;
    }
    .reasonsCol2{
      flex-direction: column;
      align-items: flex-start;
    }
    .reasonCircle2 {
    	margin: 0 auto 25px;
    }
    .reasonGroup {
        width: 100%;
    }
    .bannerGalleryWrap h1 {
        font-size: 36px!important;
    }
    .cabiWrap {
        padding: 35px 0 20px;
    }
    .ccabinets {
        width: 100%;
    }
    .cabiBox h2 span {
        display: block;
    }
}
/*========================================================
        DESIGN page
=========================================================*/
.bannerDesign {
    background: url(../images/design/designBanner.jpg) center center no-repeat;
    background-size: cover;
    height: 760px;
    width: 100%;
    position: relative;
}
.bannerDesignWrap {
    width: 1300px;
    margin: 0 auto;
    padding-top: 160px;
    text-align: center;
}
.smallkWrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 60px;
    border-bottom: 2px dotted var(--main-text);
}
.smallkBox {
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.smallkBox h3 {
    padding: 20px 0 10px;
    font-size: 21px;
    font-weight: 900;
    padding-bottom: 20px;
    font-family: avenirblack,arial,sans-serif;
}
.designbg {
    padding: 90px 0 50px;
}
.smallkPad {
    padding-bottom: 20px;
}
@media only screen and (min-width: 2561px) {
    .bannerDesign {
        height: 1250px;
    }
    .bannerDesignWrap {
        padding-top: 450px;
    }
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .bannerDesignWrap {
        padding-top: 120px;
    }
    .bannerDesign {
        height: 600px;
    }
    .smallkBox h3 {
        font-size: 18px;
    }
    .designbg {
            padding: 20px 0 90px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .bannerDesign {
        height: 500px;
    }
    .bannerDesignWrap {
        width: 90%;
    padding-top: 100px;
    }
    .smallkBox h3 {
        font-size: 18px;
    }
    .designbg {
            padding: 20px 0 30px;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .bannerDesign {
        height: 500px;
    }
    .bannerDesignWrap {
        width: 90%;
        padding-top: 100px;
    }
    .designbg {
            padding: 0 0 20px;
    }
    .smallkWrap {
        flex-wrap: wrap;
        padding-bottom: 20px;
    }
    .smallkBox {
        width: 48%;
        margin-bottom: 35px;
    }
}
@media only screen and (max-width: 767px){
    .bannerDesign {
        height: 450px;
    }
    .bannerDesignWrap {
        width: 90%;
        padding-top: 100px;
    }
    .designbg {
        padding: 0;
    }
    .smallkWrap {
       flex-direction: column;
        padding-bottom: 0;
    }
    .smallkBox {
        width: 100%;
        margin-bottom: 35px;
    }
    .smallkBox h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 479px){
  .bannerDesign {
      height: 400px;
  }
  .bannerDesignWrap {
      padding-top: 70px;
  }
}
/*========================================================
        PROTIPS page
=========================================================*/
.bannerProtips {
    background: url(../images/protips/protipsbg.jpg) center center no-repeat;
    background-size: cover;
    height: 760px;
    width: 100%;
    position: relative;
}
.bannerProtipsWrap {
    width: 1300px;
    margin: 0 auto;
    padding-top: 160px;
    text-align: center;
}
.protipsbg {
    padding: 90px 0 0;
}
.tipsBoxesWrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tipsBox {
    width: 30%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 50px;
}
.tipsBox img {
    width: 300px;
    margin: 0 auto;
}
.tipsBox h3 {
    padding: 20px 0 10px;
    font-size: 21px;
    font-weight: 900;
    padding-bottom: 20px;
    font-family: avenirblack,arial,sans-serif;
}
.tipsBox p {
    font-size: 21px;
    line-height: 1.5;
    color: var(--main-text);
}
.getlookbg {
    padding: 50px 0 120px;
}
.getLookWrap {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.getLookHalf {
    width: 50%;
    display: flex;
    flex-direction: column;
}
.getLookHalf h3 {
    font-size: 36px;
    font-family: avenirblack,arial,sans-serif;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.getLookHalf h3 span {
    display: block;
    font-family: avenirmedium,arial,sans-serif;
    font-size: 24px;
}
.getLookHalf p {
    font-size: 20px;
    line-height: 1.3;
}
.getLookHalf p span {
    display: block;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.getLookHalf ul li {
    background: url('../images/catalog/dot.png') left top 10px no-repeat;
    background-size: 8px 8px;
    font-size: 20px;
    padding-left: 20px;
}
.getLookpad {
    padding-bottom: 30px;
}
.getLookpadd {
    padding-top: 30px;
}
.getLookLeft {
    padding-right: 60px;
    border-right: 2px dotted var(--main-text);
}
.getLookRight {
    padding-left: 60px;
}
.getLookWpad {
    margin-top: 120px;
}
@media only screen and (min-width: 2561px){
    .bannerProtips {
        height: 1250px;
    }
    .bannerProtipsWrap {
        padding-top: 450px;
    }
}
@media only screen and (min-width: 1920px)  and (max-width: 2559px){
    .tipsBox img {
        width: 260px;
    }
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .tipsBox img {
        width: 200px;
    }
    .tipsBox h3 {
        font-size: 18px;
    }
    .tipsBox p {
        font-size: 18px;
    }
    .bannerProtips {
        height: 600px;
    }
    .bannerProtipsWrap {
        padding-top: 120px;
    }
    .getlookbg {
            padding: 0 0 90px;
    }
    .getLookHalf h3 span {
        font-size: 20px;
    }
    .getLookHalf p,
    .getLookHalf ul li {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .tipsBox img {
        width: 200px;
    }
    .tipsBox h3 {
        font-size: 18px;
    }
    .tipsBox p {
        font-size: 16px;
    }
    .bannerProtips {
        height: 500px;
    }
    .bannerProtipsWrap {
        width: 90%;
        padding-top: 100px;
    }
    .protipsbg {
        padding: 70px 0 0;
    }
    .getlookbg {
            padding: 50px 0 90px;
    }
    .getLookHalf h3 {
        font-size: 28px;
    }
    .getLookHalf h3 span {
        font-size: 16px;
    }
    .getLookHalf p,
    .getLookHalf ul li {
        font-size: 16px;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .tipsBox img {
        width: 200px;
    }
    .tipsBox h3 {
        font-size: 18px;
    }
    .tipsBox p {
        font-size: 16px;
    }
    .bannerProtips {
        height: 500px;
    }
    .bannerProtipsWrap {
        width: 90%;
        padding-top: 100px;
    }
    .protipsbg {
        padding: 70px 0 0;
    }
    .tipsBox {
        width: 48%;
    }
    .getlookbg {
            padding: 50px 0 90px;
    }
    .getLookHalf h3 {
        font-size: 24px;
    }
    .getLookHalf h3 span {
        font-size: 14px;
    }
    .getLookHalf p,
    .getLookHalf ul li {
        font-size: 16px;
    }
    .getLookRight {
        padding-left: 30px;
    }
    .getLookLeft {
        padding-right: 30px;
    }
    .getLookWpad {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px){
    .tipsBox img {
        width: 200px;
    }
    .tipsBox h3 {
        font-size: 18px;
    }
    .tipsBox p {
        font-size: 18px;
    }
    .bannerProtips {
        height: 500px;
    }
    .bannerProtipsWrap {
        width: 90%;
        padding-top: 120px;
    }
    .protipsbg {
        padding: 70px 0 0;
    }
    .tipsBoxesWrap {
        flex-direction: column;
    }
    .tipsBox {
        width: 100%;
    }
    .getLookWrap {
        flex-direction: column;
    }
    .getLookHalf {
        width: 100%;
        margin-bottom: 50px;
    }
    .getLookRight {
        padding-left: 0;
    }
    .getLookLeft {
        padding-right: 0;
        border: none;
    }
    .getLookHalf h3 {
        font-size: 28px;
    }
    .getLookHalf h3 span {
        font-size: 16px;
    }
    .getLookHalf p,
    .getLookHalf ul li {
        font-size: 18px;
    }
    .getLookWpad {
        margin-top: 0;
    }
    .getlookbg {
        padding: 50px 0 0;
    }
}
@media only screen and (max-width: 479px){
    .bannerProtips {
        height: 380px;
    }
    .bannerProtipsWrap {
        padding-top: 60px;
    }
    .protipsbg {
        padding: 50px 0 0;
    }
    .getlookbg {
        padding: 50px 0 0;
    }
}
/*========================================================
        BENJAMIN MOORE page
=========================================================*/
.bannerBMoore {
    background: url(../images/colors/benjamin-moore/bannerBMoore.jpg) center bottom no-repeat;
    background-size: cover;
    height: 800px;
    width: 100%;
    position: relative;
}
.bannerBMooreWrap {
    width: 1300px;
    margin: 0 auto;
    padding-top: 220px;
    text-align: center;
}
.bmooreH1 {
    text-transform: capitalize;
    margin-bottom: 35px!important;
    line-height: 1!important;
}
.bmoorep {
    font-size: 60px;
    color: var(--white);
    font-family: avenirlight,arial,sans-serif;
    text-align: center;
    text-transform: capitalize;
}
.bmooreWrap {
    padding-bottom: 90px;
}
.bmooreBoxesWrap {
    padding-bottom: 0;
}
.bmooreWrap h2 {
    font-size: 30px;
}
.bmooreWrap p {
    font-size: 26px;
    text-align: center;
    padding: 60px 0;
    width: 70%;
    margin: 0 auto;
}
.bmooreWrap img {
    width: 100%;
}
.bmoorepad h3 {
    font-size: 30px;
}
.bmoorepad p {
    padding-bottom: 15px;
    font-size: 18px;
}
.bmoorepad ul {
    list-style: initial;
    margin: initial;
    padding: 0 0 15px 40px;
    text-align: left;
}
.bmoorepad ul li {
    display: list-item;
    list-style-type: circle;
    list-style-position: inside;
    font-size: 18px;
}
.bmooreright {
    text-align: center;
}
.bmooreright img {
    max-width: 453px;
    margin: 0 auto;
}
.bmooreBelow {
    padding: 70px 0 70px;
    width: 80%;
    margin: 0 auto;
}
.bmooreBelow p {
    font-size: 20px;
    text-align: center;
}
.bmooreBelow ul {
    list-style: initial;
    margin: initial;
    padding: 15px 0 15px 40px;
    text-align: left;
}
.bmooreBelow ul li {
    display: list-item;
    list-style-type: circle;
    list-style-position: inside;
    font-size: 20px;
}
.bmooreColWrap {
    width: 1920px;
    margin: 50px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.bmooreColTit {
    width: 1300px;
    margin: 0 auto;
}
.bmooreColTit h3  {
    font-size: 32px;
    font-family: avenirmedium,arial,sans-serif;
    text-align: center;
    text-transform: capitalize;
    color: var(--dark-title);
    padding-bottom: 35px;
}
.bmooreColTit p {
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
    width: 70%;
    margin: 0 auto;
}
.bmooreColBox {
    width: 16.66%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
}
.bmooreColBox img {
    width: 90px;
    margin: 0 auto;
    transition: width .35s ease-in-out;
}
.bmooreColBox img:hover {
    width: 120px;
}
.bmooreColBox p {
    font-size: 21px;
    color: var(--dark-title);
    text-align: center;
    padding: 15px 0;
}
.bmooreColBox p span {
    display: block;
    color: var(--light-title);
}
@media only screen and (min-width: 2561px) {
    .bannerBMoore {
        height: 1250px;
    }
    .bannerBMooreWrap {
        padding-top: 450px;
    }
}
@media only screen and (min-width: 1301px)  and (max-width: 1919px){
    .bannerBMoore {
        height: 600px;
    }
    .bmoorepad h3 {
        font-size: 26px;
    }
    .bmoorepad p,
    .bmoorepad ul li {
        font-size: 16px;
    }
    .bmooreH1 {
        margin-bottom: 20px!important;
    }
    .bmooreColWrap,
    .bmooreBelow {
        width: 90%;
    }
    .bmooreColTit p {
        font-size: 21px;
    }
    .bmooreColTit h3 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .bmooreColBox p,
    .bmooreBelow p,
    .bmooreBelow ul li {
        font-size: 18px;
    }
}
@media only screen and (max-width: 1300px){
    .bannerBMooreWrap {
        width: 90%;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .bannerBMoore {
        height: 500px;
    }
    .bannerBMooreWrap {
        padding-top: 150px;
    }
    .bmoorepad h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .bmoorepad p,
    .bmoorepad ul li {
        font-size: 16px;
    }
    .bmooreWrap h2 {
        font-size: 24px;
    }
    .bmooreWrap p {
        font-size: 21px;
    }
    .bmooreWrap {
        padding: 50px 0 0;
    }
    .bmooreH1 {
        margin-bottom: 20px!important;
    }
    .bmooreColWrap,
    .bmooreBelow {
        width: 90%;
    }
    .bmooreColTit {
        padding-top: 50px;
        width: 90%;
    }
    .bmooreColTit p {
        font-size: 21px;
        width: 90%;
    }
    .bmooreColBox {
        width: 20%;
    }
    .bmooreColWrap {
        margin-bottom: 0;
    }
    .bmooreColTit h3 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .bmooreColBox p,
    .bmooreBelow p,
    .bmooreBelow ul li {
        font-size: 18px;
    }
    .bmooreLast {
        padding-bottom: 0;
    }
    .bmooreBelow {
        width: 100%;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .bannerBMoore {
        height: 540px;
    }
    .bmoorep {
        font-size: 54px;
    }
    .bannerBMooreWrap {
        padding-top: 180px;
    }
    .bmoorepad p,
    .bmoorepad ul li {
        font-size: 18px;
    }
    .bmooreWrap h2 {
        font-size: 24px;
    }
    .bmooreWrap p {
        font-size: 18px;
        padding: 30px 0;
        width: 100%;
    }
    .bmooreWrap {
        padding: 50px 0 0;
    }
    .bmooreBoxesWrap {
        flex-direction: column-reverse;
        padding: 30px 0;
    }
    .bmoorepad {
        width: 90%;
        margin: 0 auto;
        padding-right: 0;
    }
    .bmooreright img {
        margin-bottom: 35px;
    }
    .bmooreLast {
        padding-bottom: 0;
    }
    .bmooreH1 {
        margin-bottom: 20px!important;
    }
    .bmooreColWrap,
    .bmooreBelow,
    .bmooreColTit {
        width: 90%;
    }
    .bmooreBelow {
        width: 100%;
    }
    .bmooreColTit {
        padding-top: 50px;
    }
    .bmooreColTit p {
        font-size: 21px;
        width: 100%;
    }
    .bmooreColBox {
        width: 25%;
    }
    .bmooreColWrap {
        margin-bottom: 0;
    }
    .bmooreColTit h3 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .bmooreColBox p,
    .bmooreBelow p,
    .bmooreBelow ul li {
        font-size: 18px;
    }
    .bmooreLast {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 767px){
    .bannerBMoore {
        height: 480px;
    }
    .bmoorep {
        font-size: 38px;
    }
    .bannerBMooreWrap {
        padding-top: 130px;
    }
    .bmoorepad p,
    .bmoorepad ul li {
        font-size: 18px;
    }
    .bmooreWrap h2 {
        font-size: 24px;
    }
    .bmooreWrap p {
        font-size: 18px;
        padding: 30px 0;
        width: 100%;
    }
    .bmooreWrap {
        padding: 50px 0 0;
    }
    .bmooreBoxesWrap {
        flex-direction: column-reverse;
        padding: 30px 0;
    }
    .bmoorepad {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }
    .bmooreright img {
        margin-bottom: 35px;
        max-width: 400px;
    }
    .bmooreLast {
        padding-bottom: 0;
    }
    .bmooreH1 {
        font-size: 50px!important;
        line-height: 1.2!important;
        margin-bottom: 0!important;
    }
    .bmooreColWrap,
    .bmooreBelow,
    .bmooreColTit {
        width: 90%;
    }
    .bmooreBelow {
        width: 100%;
    }
    .bmooreColTit {
        padding-top: 50px;
    }
    .bmooreColTit p {
        font-size: 18px;
        width: 100%;
    }
    .bmooreColBox {
        width: 33.33%;
    }
    .bmooreColWrap {
        margin-bottom: 0;
    }
    .bmooreColTit h3 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .bmooreColBox p {
        font-size: 16px;
    }
    .bmooreBelow p,
    .bmooreBelow ul li {
        font-size: 18px;
    }
    .bmooreLast {
        padding-bottom: 0;
    }
    .bmoorepad h3 {
        font-size: 34px;
    }
    .bmooreBelow {
        padding: 70px 0 35px;
    }
}
@media only screen and (max-width: 479px){
    .bmoorepad {
        width: 100%;
    }
    .bmooreWrap h2 {
        font-size: 20px;
    }
    .bannerBMoore {
        height: 380px;
    }
    .bannerBMooreWrap {
        padding-top: 100px;
    }
    .bmoorep {
        font-size: 30px;
    }
    .bmooreWrap {
        padding: 35px 0 0;
    }
    .bmoorepad ul {
        padding: 0 0 15px 20px;
    }
    .bmooreH1 {
        width: 95%;
        font-size: 36px!important;
        margin-bottom: 5px!important;
    }
    .bmooreColTit {
        padding-top: 20px;
    }
    .bmooreColBox {
        width: 50%;
    }
    .bmooreBoxesWrap {
        padding: 0 0 20px;
    }
    .bmoorepad h3 {
        font-size: 32px;
    }
    .bmooreBelow ul {
        padding: 15px 0 15px 10px;
    }
    .bmooreBelow {
        padding: 70px 0 30px;
    }
}
/*========================================================
        CONTACT page
=========================================================*/
.contLogo {
    width: 100%;
    margin: 90px auto 50px;
    text-align: center;
}
.contLogo img {
    width: 450px;
    margin: 0 auto;
}
.contWrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 50px auto 70px;
    justify-content: center;
    width: 100%;
}
.contLeft,
.contRight {
    width: 50%;
    display: flex;
    flex-direction: column;
}
.contRow {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 50px;
}
.contIco {
    width: 10%;
}
.contItem {
    width: 90%;
}
.contItem p,
.contItem a {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    color: var(--dark-title);
}
.contItem p span,
.contItem a span {
    display: block;
}
.contfa {
    color: #c8aa78;
    font-size: 30px;
}
.contRWrap {
    padding: 50px 70px 70px;
}
.contRight h2 {
    font-family: avenirheavy,arial,sans-serif;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 50px;
    text-transform: capitalize;
    color: var(--dark-title);
}
.contRight h2 span {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--grey-btn);
    padding-top: 10px;
    font-family: avenirmedium, sans-serif,arial;
    text-transform: none;
}
.callformEr {
    font-size: 21px;
    font-weight: 600;
    padding-bottom: 20px;
    text-align: left;
    font-family: avenirheavy,arial,sans-serif;
}
.doorsForm {
    width: 100%;
    margin: 0 auto;
}
.doorsForm input[type="text"] {
    margin: 0 auto 15px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--light-title);
    cursor: pointer;
    color: var(--grey-btn);
    padding: 10px 10px 10px 25px;
    display: block;
    width: 100%;
    height: 60px;
    font-size: 16px;
    outline: none;
    font-family: avenirmedium,arial,sans-serif;
}
.doorsForm textarea {
    margin: 30px auto;
    border: none;
    border-bottom: 1px solid var(--light-title);
    padding: 10px 10px 10px 25px;
    color: var(--grey-btn);
    font-size: 16px;
    width: 100%;
    height: 90px;
    outline: none;
    background-color: transparent;
    font-family: avenirmedium,arial,sans-serif;
}
.doorsForm textarea::placeholder {
    color: var(--grey-btn);
}
.doorsForm input[type="submit"], .contactFormFull input[type="submit"] {
    display: inline-block;
    background: var(--light-title) !important;
    color: var(--white) !important;
    text-align: center;
    padding: 17px 38px;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    border: none;
    cursor: pointer;
    outline: none;
    font-family: avenirheavy,arial,sans-serif;
}
.erRed {
    color: var(--err-red);
}
.erGreen {
    color: var(--err-green);
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .contLeft {
        width: 55%;
    }
    .contRight {
  	width: 45%;
  }
    .contRWrap {
        padding-right: 0;
    }
}
@media only screen and (min-width: 1024px)  and (max-width: 1300px){
    .contRWrap {
        padding: 50px 0 70px 20px;
    }
    .contLeft, .contRight {
    	width: 45%;
    }
}
@media only screen and (min-width: 768px)  and (max-width: 1023px){
    .contWrap {
        flex-direction: column;
    }
    .contLeft, .contRight {
        width: 460px;
        margin: 0 auto;
    }
    .contRWrap {
        padding: 50px 0 0;
    }
    .contLogo {
        margin: 50px auto 70px;
    }
    .contRow {
        padding-bottom: 35px;
    }
}
@media only screen and (max-width: 767px){
    .contWrap {
        flex-direction: column;
    }
    .contLeft, .contRight {
        width: 400px;
        margin: 0 auto;
    }
    .contRWrap {
        padding: 50px 0 0;
    }
    .contLogo {
        margin: 50px auto 70px;
    }
    .contRow {
        padding-bottom: 35px;
    }
    .contLogo img {
        width: 420px;
    }
}
@media only screen and (max-width: 479px){
    .contWrap {
        flex-direction: column;
        margin: 50px auto 35px;
    }
    .contLeft, .contRight {
        width: 90%;
        margin: 0 auto;
    }
    .contRWrap {
        padding: 50px 0 0;
    }
    .contLogo {
        margin: 50px auto 70px;
    }
    .contRow {
        padding-bottom: 35px;
    }
    .contLogo img {
        width: 90%;
    }
    .contItem p, .contItem a {
        font-size: 18px;
    }
    .contIco {
        width: 15%;
    }
    .contItem {
        width: 85%;
    }
    .contfa {
        font-size: 24px;
    }
}

/*========================================================
        Door Styles page
=========================================================*/
.topBorder{
  border-top: 1px solid #222;
}
.pageSubTit {
    padding: 90px 0;
}
h1.subH1 {
    font-size: 50px;
    text-transform: capitalize;
    font-weight: 700;
    text-align: center;
}
h2.subH2 {
    font-size: 50px;
    text-transform: capitalize;
    font-weight: 700;
    text-align: center;
}
.colCatWrap2 {
    width: 100%;
    margin: 0 auto 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.colCatBox2 {
    width: 24%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 20px 80px rgba(192,198,211,.25);
    margin: 0 10px 20px 10px;
}
.colCatBox2 img{
  width: 100%;
}
.colCatWrap2 .colCatBox2.addPaddi img{
  padding: 20px 20px 0 20px;
}
.colCatBox2 h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    padding: 30px;
    text-transform: capitalize;
}
.colCatBox2 h3 span {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    padding: 10px 0 15px;
    font-family: 'Roboto', sans-serif;
}
.colCatBox2 a:hover {
    color: #a8977b;
}
.colCatBoxEmpty2{
  width: 24%;
}
.visitMessage{
  font-size: 20px;
  padding: 40px 0 0;
  text-align: center;
  width: 100%;
}
.extrPadBottom{
  padding-bottom: 40px;
}
@media only screen and (min-width: 1301px) and (max-width: 1493px) {
  h1.subH1,
  .maintTit h1 {
      font-size: 38px;
  }
  .maintTit h1 span {
      font-size: 19px;
  }
  h2.subH2,
  .maintTit h2 {
      font-size: 38px;
  }
  .maintTit h2 span {
      font-size: 19px;
  }
  .subTit,
  .subbTit h3 {
      font-size: 26px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .colCatBox2 h3 {
      font-size: 16px;
  }
  h1.subH1,
  .maintTit h1 {
      font-size: 30px;
  }
  .maintTit h1 span {
      font-size: 18px;
  }
  h2.subH2,
  .maintTit h2 {
      font-size: 30px;
  }
  .maintTit h2 span {
      font-size: 18px;
  }
    .colCatBox2 {
        width: 45%;
    }
  .visitMessage{
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  h1.subH1,
  .maintTit h1,
  .colorsNewPage h2 {
      font-size: 30px;
  }
  .maintTit h1 span {
      font-size: 18px;
  }
  h2.subH2,
  .maintTit h2 {
      font-size: 30px;
  }
  .maintTit h2 span {
      font-size: 18px;
  }
  .pageSubTit,
  .maintTit {
      padding: 50px 0;
  }
  .colCatWrap2 {
      flex-wrap: wrap;
  }
  .colCatBox2 {
      width: 49%;
      margin-bottom: 25px;
  }
  .visitMessage{
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  h1.subH1,
  .maintTit h1,
  .colorsNewPage h2 {
      font-size: 30px;
  }
  .maintTit h1 span {
      font-size: 18px;
  }
  h2.subH2,
  .maintTit h2 {
      font-size: 30px;
  }
  .maintTit h2 span {
      font-size: 18px;
  }
  .pageSubTit,
  .maintTit {
      padding: 50px 0;
  }
  .colCatWrap2 {
      flex-wrap: wrap;
      flex-direction: column;
      margin-bottom: 25px;
  }
  .colCatBox2 {
      width: 100%;
      max-width: 380px;
      margin: 0 auto 25px;
  }
  .colCatBox2 img {
      width: 100%;
  }
  .visitMessage{
    font-size: 18px;
    padding: 40px 0 20px;
  }
}
@media only screen and (max-width: 479px) {
  .colCatBox2 {
      max-width: 280px;
  }
}

/*=======================================================
    Colors Categories
=========================================================*/
.colCatWrap {
    width: 100%;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.colCatBoxWrap {
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.colCatBox {
    background: #fff;
    box-shadow: 0 20px 80px rgba(192,198,211,.25);
    margin-bottom: 20px;
}
.addMarg {
    margin-right: 17px;
}
.colCatBox img{
  height: 100%;
}
.colCatBox h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding: 30px;
    text-transform: capitalize;
    max-width: 230px;
}
.colCatBox h3 span {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    padding: 10px 0 15px;
    font-family: 'Roboto', sans-serif;
}
.colCatBox a:hover {
    color: #a8977b;
}
.colCatBoxEmpty{
  width: 24%;
}
@media only screen and (min-width: 1301px) and (max-width: 1493px) {
    .colCatBox img {
        height: 350px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .colCatBox h3 {
      font-size: 16px;
  }
    .addPaddBox {
        width: 700px;
    }
    .colCatBox {
        margin-bottom: 50px;
    }
    .catColrs img {
        height: 260px;
    }
    .addPaddi img {
        height: 400px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .colCatBox {
      margin-bottom: 25px;
  }
    .addPaddi img {
        height: 400px;
    }
    .catColrs img {
        height: 220px;
    }
    .colCatBox h3 {
        padding: 15px 10px 20px;
    }
}
@media only screen and (max-width: 767px) {
  .colCatWrap {
      flex-wrap: wrap;
      flex-direction: column;
      margin-bottom: 25px;
  }
  .colCatBox {
      width: 100%;
      max-width: 380px;
      margin: 0 auto 25px;
  }
  .colCatBox img {
      width: 100%;
  }
}
@media only screen and (max-width: 479px) {
  .colCatBox {
      max-width: 280px;
  }
}

/*=======================================================
    DOOR STYLES page
=========================================================*/
.doorWrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 110px;
}
.doorBox {
    width: 48%;
    box-shadow: 0px 10px 30px rgb(0 0 0 / 5%);
    padding: 30px;
    margin: 0 auto 50px;
}
.doorBox img {
    width: 100%;
}
.doorBox p {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 0 30px;
    text-align: left;
    text-transform: capitalize;
}
.doorscWrap {
     width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.doorStyle {
    width: 38%;
}
.doorColor {
    width: 60%;
}
.door2Wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 auto 110px;
}
.door2BoxEmpty{
  width: 27%;
  padding: 30px;
  margin: 0 auto 50px;
}
.door2Box {
    box-shadow: 0px 10px 30px rgb(0 0 0 / 5%);
    padding: 30px;
    margin: 0 auto 50px;
}
.door2Box img {
    width: 100%;
}
.door2Box p {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    padding: 30px 0 0;
    text-align: center;
    text-transform: capitalize;
}
.colorsNewPage h2 {
	font-size: 50px;
	text-transform: capitalize;
	font-weight: 700;
	text-align: center;
  margin-bottom: 30px;
}
.colorsWrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 110px;
}
.colorBox {
    width: 19%;
    box-shadow: 0px 10px 30px rgb(0 0 0 / 5%);
    padding: 15px;
    margin: 0 auto 50px;
}
.colorBoxEmpty{
  width: 19%;
  margin: 0 auto 50px;
}
.colorBox img {
    width: 100%;
}
.colorBox p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding: 30px 0 0;
    text-align: center;
    text-transform: capitalize;
}
.frame iframe {
  width: 100%;
  height: 1500px;
  border: 0;
  display: block;
}
.frame2 iframe {
  width: 100%;
  height: 100vh;
  border: 0;
  display: block;
}
.hero .hero-header{
  display: none!important;
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .door2Wrap,
  .colorsWrap {
      margin: 0 auto 70px;
  }
  .colorsNewPage h2{
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .doorBox {
      width: 32%;
  }
  .door2BoxEmpty{
    width: 48%;
  }
  .door2Wrap,
  .colorsWrap {
      margin: 0 auto 70px;
  }
  .colorBox {
      width: 32%;
  }
  .colorBoxEmpty{
    width: 32%;
  }
  .colorsNewPage h2{
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .doorBox {
  width: 48.4%;
  }
  .doorWrap {
      margin-bottom: 70px;
  }
  .door2BoxEmpty{
    width: 100%;
    max-width: 380px;
      margin-bottom: 0;
  }
  .door2Box {
      width: 100%;
      max-width: 380px;
  }
  .door2Wrap,
  .colorsWrap {
      margin: 0 auto 20px;
  }
  .colorBox {
      width: 48%;
  }
  .colorBoxEmpty{
    width: 48%;
      margin-bottom: 0;
  }
  .colorsNewPage h2{
    font-size: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .doorBox {
   width: 100%;
        margin: 0 auto;
        max-width: 280px;
   }
   .doorWrap {
       margin-bottom: 50px;
   }
   .door2Box {
       max-width: 280px;
   }
   .door2BoxEmpty{
     max-width: 280px;
   }
   .colorBox {
       width: 100%;
       max-width: 280px;
   }
   .colorBoxEmpty{
     width: 100%;
     max-width: 280px;
   }
}


/*========================================================
    REVIEW US & DISCLAIMER page
=========================================================*/
.reviewbg {
    padding: 130px 0;
}
.wrapBoxes {
    width: 1260px;
    margin: 70px auto 0;
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}
.revBox {
    width: 23%;
}
.inRevBox {
    background: #131313;
    padding: 10px 15px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.reviewbg h1{
  font-size: 34px;
  text-align: center;
}
.centerDisclaimer {
    padding-top: 70px;
}
article {
    margin-bottom: 35px;
}
.centerDisclaimer h2,
.centerDisclaimer h3 {
    font-size: 36px;
    font-weight: 300;
    text-transform: capitalize;
}
.centerDisclaimer h2 {
    padding-bottom: 15px;
}
.centerDisclaimer p {
    font-family: avenirlight,arial,sans-serif;
    font-size: 19px;
    line-height: 1.5;
}
.centerDisclaimer h3 {
    padding: 20px 0 15px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .reviewbg {
        padding: 70px 0;
    }
    .wrapBoxes {
        width: 1024px;
    }
    .centerDisclaimer h2, .centerDisclaimer h3 {
        font-size: 30px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .reviewbg {
        padding: 50px 0;
    }
    .wrapBoxes {
        width: 90%;
    }
    .inRevBox img {
        width: 100%;
    }
    .centerDisclaimer h2, .centerDisclaimer h3 {
        font-size: 24px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .reviewbg {
        padding: 50px 0;
    }
    .wrapBoxes {
        width: 90%;
        grid-row-gap: 10px;
    grid-column-gap: 10px;
    }
    .inRevBox img {
        width: 100%;
    }
    .centerDisclaimer h2, .centerDisclaimer h3 {
        font-size: 24px;
    }
    .revBox {
        width: 32%;

    }
}
@media only screen and (max-width: 767px) {
    .reviewbg {
        padding: 35px 0 20px;
    }
    .reviewbg h1{
      font-size: 30px;
    }
    .wrapBoxes {
        width: 90%;
        grid-row-gap: 0;
    grid-column-gap: 0;
        margin: 35px auto 0;
    }
    .inRevBox img {
        width: 100%;
    }
    .centerDisclaimer h2,
    .centerDisclaimer h3 {
        font-size: 24px;
    }
    .revBox {
        width: 350px;
        margin: 0 auto 20px;

    }
    .centerDisclaimer {
        padding-top: 15px;
    }
}

/*========================================================
    howSelec page
=========================================================*/
.howSelec{
  padding: 0 0 90px;
}
.howLine {
	border-top: 2px dotted var(--main-text);
  padding-bottom: 90px;
}
.howSelecWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.howSelecBox{
  width: 30%;
  text-align: center;
}
.howSelecBox img{
  width: 90%;
  height: auto;
  margin-bottom: 20px;
}
.howSelecBox p{
	font-size: 21px;
	line-height: 1.5;
}
.howSelecBox .circleNum{
  font-size: 42px;
}
.howTitle {
	padding: 20px 0 10px;
	font-size: 21px;
	font-weight: 900;
	padding-bottom: 20px;
	font-family: avenirblack,arial,sans-serif;
}
.dark{
  font-family: avenirblack,arial,sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .howTitle,
  .howSelecBox p {
  	font-size: 18px;
  }
  .howSelecBox .circleNum{
    font-size: 40px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .howTitle{
    font-size: 18px;
  }
  .howSelecBox p {
    font-size: 16px;
  }
  .howSelecBox .circleNum{
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .howSelec {
  	padding: 0 0 50px;
  }
  .howSelecBox{
    width: 48%;
  }
  .howSelecBox:nth-child(3){
    margin-top: 30px;
  }
  .howSelecBox p {
    font-size: 16px;
  }
  .howTitle{
    font-size: 21px!important;
  }
  .howSelecBox .circleNum{
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .howSelec {
  	padding: 0 0 50px;
  }
  .howLine{
    padding-bottom: 60px;
  }
  .howSelecBox{
    width: 100%;
  }
  .howSelecBox:nth-child(1),
  .howSelecBox:nth-child(2){
    margin-bottom: 40px;
  }
  .howSelecBox p {
    font-size: 18px;
  }
  .howTitle{
    font-size: 21px!important;
  }
  .howSelecBox .circleNum{
    font-size: 40px;
  }
}

/*========================================================
    howColors page
=========================================================*/
.undTitle{
  font-size: 21px;
  text-align: center;
  margin-bottom: 50px;
}
.howColorsWrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
.howColorBox{
  width: 16%;
  padding: 5px;
  margin: 10px 2px;
}
.howColorBox img{
  width: 100%;
  height: auto;
}
.howColorBox p{
  font-family: avenirblack,arial,sans-serif;
  font-size: 18px;
}
.howColorBox p span{
  display: block;
  font-weight: 800;
}
.howColorsBottom{
  padding-bottom: 90px;
}
.howColorBtnPlace{
  text-align: center;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .undTitle{
    font-size: 18px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .howColorBox {
  	width: 24%;
  }
  .undTitle{
    font-size: 18px;
  }
  .howColorBox p {
  	font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .howColorBox {
    width: 24%;
  }
  .undTitle{
    font-size: 18px;
  }
  .howColorBox p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .undTitle{
    font-size: 18px;
  }
  .howColorsWrap{
    max-width: 310px;
    margin: 0 auto 60px;
  }
  .howColorBox{
    width: 100%;
  }
}

/*========================================================
		Review Us page
=========================================================*/
.reviewsWrap {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 90px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
}
.reviewsBox {
    width: 24%;
    border: 1px solid var(--main-text);
    background: #e5e5e7;
    padding: 10px 15px;
    margin-bottom: 15px;
}
.reviewsBoxEmpty {
    width: 24%;
}
.reviewsBox img {
    width: 100%;
    display: block;
    max-width: 200px;
    margin: 0 auto;
}
.reviewsBox p {
    font-size: 16px;
    line-height: 1.3;
    color: var(--main-text);
    text-align: center;
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .reviewsWrap {
        padding: 50px 0;
    }
    .reviewsBox p {
        font-size: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .reviewsWrap {
        padding: 50px 0;
    }
    .reviewsBox p {
        font-size: 16px;
    }
    .reviewsBox,
    .reviewsBoxEmpty {
        width: 49%;
    }
}

@media only screen and (max-width: 767px) {
  .reviewsWrap {
  	padding: 0 0 50px;
  }
    .reviewsWrapMob {
        display: block !important;
        padding: 35px 0;
    }
    .reviewsBox p {
        font-size: 16px;
    }
    .reviewsBox {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 15px;
    }
    .reviewsBoxEmpty {
        width: 100%;
    }
}

@media only screen and (max-width: 479px) {
    .reviewsBox,
    .reviewsBoxEmpty {
        max-width: 280px;
    }
}


/*========================================================
	ALL Quartz Manufacturers logos - Quartz page
=========================================================*/
.alldesMobile {
    display: none!important;
}
.alldesWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 35px auto 90px;
}
.alldesBox {
    width: 26%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}
.alldesBox img{
  width: 100%;
}
.alldesBoxEmpty{
  width: 26%;
}
.swipearrows {
    display: none;
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .alldesBox  {
        width: 42%;
    }
    .alldesBoxEmpty{
      width: 42%;
    }
}

@media only screen and (max-width: 1023px) {
    .swipearrows {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0px;
    padding-top: 60px;
}
.swipestleft {
        margin-right: 5px;
    }
.swipestright {
        margin-left: 5px;
    }
    .alldesDesktop {
        display: none;
    }
    .alldesMobile {
        display: inline-block!important;
    }
    .alldesBox {
        width: 100%;
        margin-bottom: 30px;
    }
    .alldesBoxEmpty{
      display: none!important;
      width: 100%;
    }
    .alldesBox img {
        max-width: 400px!important;
    }
    .alldesWrap {
        margin: 0 auto 35px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .alldesWrap {
  	margin: 0px auto 40px;
  }
}

/*========================================================
        Mobile Menu
=========================================================*/
@media only screen  and (max-width: 1300px){
    .navWrap {
        display: none;
    }
    .navTopMobWrap {
        background: #fff;
        border-bottom: 1px solid #7c7c7c;
    }
    .navTopMob {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        height: 80px;

    }
    .navtopMobLogo,
    .navtopMobMenu {
        width: 50%;
    }
    .navtopMobMenu {
        text-align: right;
    }
    .logoMob {
        display: inline-block;
        position: relative;
    }
    .logoMob img {
        width: 200px;
        position: absolute;
        left: 0;
        top: -40px;
        z-index: 1;
    }
    .menu {
        float: right;
    }
    .smobitrigger,
	.mnuclose {
		display: inline-block;
	}
	.smobitrigger {
	color: transparent;
	width: 30%;
		margin: 0 auto;
	}
	.smobitrigger {
		background: url("../images/menuopen.png") center center no-repeat;
        background-size: 40px 40px;
		width: 40px;
		height: 40px;
	}
	.mnuclose {
		background: url('../images/menuclose.png') right top no-repeat;
        background-size: 35px 35px;
		color: transparent;
		height: 35px;
		margin: 10px 0;
		width: 100%;
		text-align: right;
		display: inline-block;
	}
    		.mobimenu {
			padding: 0;
			margin: 0px;
			width: 17.9375em;
			position: fixed;
			height: 100%!important;
			top: 0px;
			left: -24.625em;
	 }
	.mnuopn {
		left: 0px !important;
	}
	.ovrActv {
		position: fixed;
		background: rgba(0, 0, 0, 0.79);
		width: 100%;
		height: 100%;
		z-index: 9998;
			-webkit-transition: 0.5s;
			-moz-transition: 0.5s;
			-ms-transition: 0.5s;
			-o-transition: 0.5s;
		transition: 0.5s;
	}

    /********* menu **********/
    .menu ul li.mlogo,
    .menu ul li.mphone,
    .menu ul li.msocial,
    .menu ul li.maddress,
    .menu ul li.mhours,
    .menu ul li.mmlinks {
        display: inline-block;
        text-align: center;
    }
    .menu  ul {
		padding: 0 20px 10px 20px;
		overflow-y: auto;
		margin: 0 auto;
        display: inline-block;
	}
    .menu ul li {
        display: block;
    }
    .menu ul li a {
        margin: 0 auto;
        text-align: center;
    }
    .menu ul li.mlinks,
    .menu ul li.extrlinks {
        padding: 0;
    }
    .menu ul li.extrlinks{
      display: block;
    }
	.menu ul li.flinks,
    .menu ul li.blinks {
		margin: 2px 0;
		display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;

	}
	.menu ul li.flinks a,
    .menu ul li.blinks a {
		font-size: 21px;
        font-weight: 700;
		text-transform: capitalize;
		display: inline-block;
        padding: 20px 0 10px;
        width: 100%;
        color: #d7cdba!important;
	}
    .menu ul li.mlogo {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0 0;
    }
    .menu ul li.mlogo img {
        width: 240px;
    }
    .menu ul li.mphone {
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding: 0 0 30px;
    }
    .menu ul li.mphone a {
        font-size: 28px;
        font-weight: 600;
        color: #463629!important;
    }
    .menu ul li.maddress,
    .menu ul li.mhours {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }
    .menu ul li.maddress {
        padding: 50px 0 0;
    }
    .menu ul li.maddress a span,
    .menu ul li.mhours span {
        display: block;
    }
    .menu ul li.maddress a,
    .menu ul li.mhours {
        font-size: 15px;
        color: #3f4245!important;
        font-weight: 600;
    }
    .menu ul li.mhours {
        padding-bottom: 20px;
    }
    .menu ul li.msocial {
        width: 100%;
        padding: 0 0 25px;
    }
    .menu ul li.msocial a {
        display: inline-block;
        margin: 0 10px;
    }
    .famob {
        color: #d7cdba;
        font-size: 24px;
        margin: 0 8px;
    }
    .fatop {
        font-size: 32px;
    }
}
@media only screen and (max-width: 767px){
    .navTopMob {
        width: 90%;
    }
    .logoMob img{
      width: 160px;
    }
}
@media only screen and (max-width: 479px){

}

/*========================================================
                     BACK TO TOP
=========================================================*/
.to-top {
  display: inline-block;
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 80px;
  right: 20px;
	border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  font-family: 'Arial Narrow',arial,sans-serif;
    font-size: 13px;
    text-align: center;
    padding-top: 28px;
   text-indent: 0;
   text-decoration: none;
   color: #fff;
  white-space: nowrap;
  background: rgba(202, 172, 122, 0.9) url(../images/to-top-arrow.svg) no-repeat center top 13px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
    z-index: 9999;
}
.to-top.cd-is-visible, .to-top.to-fade-out, .no-touch .to-top:hover {
  transition: opacity .3s 0s, visibility 0s 0s;
}
.to-top.to-is-visible {
  visibility: visible;
  opacity: 1;
}
.to-top.to-fade-out {
  opacity: .5;
}
.no-touch .to-top:hover {
  background-color: #ee514a;
  opacity: 1;
}


/*========================================================
                     visually hidden
=========================================================*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}