/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* main styles /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

html, body                                      { margin:0; padding:0; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility; }
body                                            { color:#808080; background-color:#f6f8f8; background-image: url('../images/agsquare.png') }
div                                             { margin:0; padding:0; display:block; }
#form1                                          { margin:0; padding:0; display:block; }
input, select, button                           { outline:0; }
img                                             { max-width:100%; outline:0; margin:0; padding:0; vertical-align:bottom; border:0; }
ul                                              { margin:0; padding:0 0 0 20px; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* typography //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

html                                            { font-size: 62.5%!important;}
body                                            { line-height: 2em; font-size: 1.4em;}/* =14px */

h1, h2, h3, h4, p                               { }
h1, h2, h3, h4                                  { color: #2E2C2C; text-transform: uppercase; font-weight:300; }

h1, h2                                          { font-size:2.2rem; line-height:2.2rem; margin:0; padding:0 0 20px 0; }
h1 small, h2 small                              { }

h3                                              { font-size:1.8rem; line-height:1.8rem; margin:0; padding:0; margin-top:20px; }
p                                               { }

a                                               { color:inherit; text-decoration:none; outline:0; }
a:hover                                         { text-decoration:underline; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* main ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.wrapper                                        { margin:0 auto; width:100%;} 
.content                                        { overflow:hidden; max-width:1200px; margin:0 auto; }

.area20                                         { float:left; width:20%;    }
.area25                                         { float:left; width:25%;    }
.area33                                         { float:left; width:33.3%;  }
.area40                                         { float:left; width:40%;    }
.area50                                         { float:left; width:50%;    }
.area60                                         { float:left; width:60%;    }
.area66                                         { float:left; width:66.6%;  }
.area75                                         { float:left; width:75%;    }
.area80                                         { float:left; width:80%;    }
.area90                                         { float:left; width:90%;    }
.area100                                        { float:left; width:100%;   }

.multi_Column_Layout                            { margin:0 -15px; padding: 80px 0;  }
.column_Inner_Padding                           { margin:0 15px;    }

.area20, .area25, .area33, .area40, .area50, .area60, .area66, .area75, .area80, .area90, .area100  { margin: 40px 0; }

/*
@media all and (max-width: 800px) {
    .area20, .area25, .area33, .area40, .area50, .area60, .area66, .area75, .area80, .area90 {width: 100%;}
}
*/

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* helpers /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

iframe                                          { width:100%; height:auto; min-height:220px; }

.text-yellow                                    { color:#FFBE3C; }
.text-center                                    {  }
hr                                              { border:0; height: 1px; margin: 0 15px; background-color:#ddd; }

.spacebreak                                     { height:40px; }
.padding40                                      { padding:0 40px; }
.padding20                                      { padding:20px; }

.left                                           { float:left;}
.right                                          { float:right;}
.shadow                                         { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }

.clear                                          { clear:both; }
small                                           { display:block; font-size: 80%; }
.bg-snow                                        { background:#fff; }
.bg-grey                                        { background:#ddd !important; }

.text-center                                    { text-align:center; }
.text-charcoal                                  { color: #2E2C2C; }

.button                                         { line-height:inherit; outline: none; text-decoration: none; border:0; display: block; overflow:hidden; padding:12px 62px; max-width:228px; margin:0 auto; text-align:center; text-transform:uppercase; -webkit-appearance:none; -moz-appearance:none; }
.button-round                                   { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.button:hover                                   { text-decoration:none; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; }
.button:hover                                   { -moz-box-shadow: inset 0 0 10px #2E2C2C; -webkit-box-shadow: inset 0 0 10px #2E2C2C;  box-shadow: inset 0 0 10px #2E2C2C; }

.button-charcoal                                { background-color:#2E2C2C; color:#fff }
.button-yellow                                  { background-color: #FFBE3C; color:#2E2C2C; font-weight:bold; cursor:pointer; }

.border-top                                     { border-top:1px solid #ddd; }

/* back-top */
.back-top                                       { /*width:25px; height:25px;*/ padding:10px; position:fixed; bottom:0; right:5px; display:none; opacity:0.8; cursor:pointer; z-index:10; }
.back-top:hover                                 { opacity:1; }
/*
.bounce                                         { position:absolute; bottom:0; margin-top:-25px; margin-left:-32px;height:64px;width:64px;background: #003360 url(../images/icons/arrow-up-sml-white.png) no-repeat center;
                                                -webkit-animation:bounce 1s infinite; -moz-animation:bounce 1s infinite; -o-animation:bounce 1s infinite; animation:bounce 1s infinite; }

@-webkit-keyframes bounce {
  0%       { bottom:5px; }
  25%, 75% { bottom:15px; }
  50%      { bottom:20px; }
  100%     {bottom:0;}
}
*/

/* quote */
q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right:10px;
    font-size:1.6rem;
    color:#2E2C2C;
}
q:after {
    content: close-quote;
    margin-left:10px;
    font-size:1.6rem;
    color:#2E2C2C;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* breadcrumb //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.breadcrumb                                     { border-bottom:1px solid #ddd; font-size:1.2rem; line-height:1.2rem; background:#fcfcfc; text-transform:capitalize;}
.breadcrumb .content                            { background:#fcfcfc; }
.breadcrumb p                                   { padding:0 40px; color:#666; }
.breadcrumb p:before                            { content:"You are here:"; padding-right:10px; }
.breadcrumb p a                                 { text-decoration:none; }
.breadcrumb p a:after                           { content:">"; padding:0 10px; }
.breadcrumb p a:last-child:after                { content:"";}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* header //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

header                                          { background-color: #003360; z-index:999; position:relative; /*min-height:160px;*/ }
.header-content                                 { max-width: 1200px; margin:0 auto; position: relative; padding:0 20px;  }

.header-content .contact-details                { position:relative; color:#fff; padding-bottom:40px; float:right; }
.header-content .contact-details ul             { list-style:none; margin:0; padding:0;  background:#2E2C2C; text-align:right; float:right; margin-bottom:10px; }
.header-content .contact-details ul li          { display:block; border-right:1px solid #222; float:left;}
.header-content .contact-details ul:after       { content: ""; display:table; clear:both; box-sizing: inherit; }
.header-content .contact-details ul li:last-child { border-right:0;}
.header-content .contact-details ul li:hover    { background:#222; }
.header-content .contact-details ul li a        { padding: 10px 12px; display:block; text-decoration:none;}
.header-content .contact-details ul li a:hover  { background:#222; }
.header-content .contact-details img            { max-width:18px; vertical-align:middle; max-height:18px; margin:0 10px; }

.header-content .contact-details .btn           { color:#fff; background:#2E2C2C; outline: none; text-decoration: none; border:0; display: block; overflow:hidden; padding:12px 20px; margin:0 auto; text-align:center; text-transform:uppercase; }
.header-content .contact-details .btn:hover     { background:#222; }
.header-content .contact-details option:first-child { display:none; }

/* header > .contact-details > social media links */
.header-content .contact-details ul li.facebook a { background-color:#3b5998 }
	.header-content .contact-details ul li.instagram a {
		background: #515bd4;
		background: -moz-linear-gradient(-45deg, #515bd4 0%, #8134af 25%, #dd2a7b 50%, #feda77 75%, #f58529 100%);
		background: -webkit-linear-gradient(-45deg, #515bd4 0%,#8134af 25%,#dd2a7b 50%,#feda77 75%,#f58529 100%);
		background: linear-gradient(135deg, #515bd4 0%,#8134af 25%,#dd2a7b 50%,#feda77 75%,#f58529 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515bd4', endColorstr='#f58529',GradientType=1 );
	}

.header-content .contact-details ul li.facebook:hover a { background-color:#222; }
.header-content .contact-details ul li.instagram:hover a { background:#222; }


/* eof: header > .contact-details > social media links */

.header-content .logo                           { margin-top:55px; max-width:220px; z-index:0; float:left; }

header nav                                      { background-color: #003360; position:relative; float:right; }
header nav ul                                   { list-style:none; padding:0; color:#fff; text-align:right; max-width:1200px; margin:0 auto; }
header nav ul li                                { display:inline-block; }
header nav ul li a                              { padding: 20px 10px; display:block; }
header nav ul li a:hover                        { background:#fff; color:#003360; text-decoration:none; }
header nav ul li:hover                          { background:#fff; color:#003360; }

/* header > nav > sub menu */
header nav ul > li:hover > ul                   { display:block; }
.nav-submenu                                    { display: none; position:absolute; left:0; color:#808080; margin-right:-2px;}
.nav-submenu li                                 { display:block; float:left; width: 33.33%; text-align:left;}
.nav-submenu li a                               { padding: 10px 10px; background:#fff; border-bottom:1px solid #ddd; border-left:1px solid #ddd; }
.nav-submenu li:nth-child(3n) > a               { border-right:1px solid #ddd; }
.nav-submenu li a:hover                         { background:#ddd; color: #2E2C2C; }

.sml-logo a                                     { display:none; }
.header-fixed .sml-logo                         { text-align:left; float:left; }
.header-fixed .sml-logo a                       { display:block; }
.header-fixed .sml-logo a:hover                 { background:none; }
.header-fixed .sml-logo:hover                   { background:none; }
.header-fixed .sml-logo img                     { max-height:40px; margin-top:-11px }

nav .menu                                       { display:none; }

header nav > ul > li > ul                       { z-index:1; position:relative; background-color:#003360; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* footer //////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

footer                                          { background-color: #001C35;/*2E2C2C*/ border-top: 6px solid #003360; }
footer .content                                 { background-color: #001C35; /**/ color:#fff; }

footer ul                                       { list-style: none; margin:0; padding:0; }
footer ul li                                    { display:block; padding:0; margin:0; float:left;  }
footer ul > li                                  { width:33.33%; }
footer ul > li > ul                             { display:block; float:none; }
footer ul > li > ul > li                        { display:block; float:none; width:100%; }

.footerNav                                      { }
ul.footerNav > li > a                           { color:#FFBE3C; font-size:1.8rem; }

.footer-end                                     { padding:20px 0; border-top:1px solid #808080; margin-top:20px; }
.footer-end ul                                  { margin:0; padding:0; }
.footer-end ul li                               { display:inline-block; float:none; width:auto; padding-right:20px; }

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* content /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.content                                        { background-color:#fff; }

/* content > banner */
.slider                                         { border-top:3px solid #fff; text-transform:uppercase; color:#fff; }
.slider .content                                { padding-bottom:20px; }

.slider h1, .slider h2                          { font-size:4.4rem; line-height:4.4rem; padding-bottom:0; margin-bottom:10px; color:#fff; font-weight:bold; /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); */ }
.slider h3                                      { font-size:3rem; line-height:3rem; padding:0; margin:0; color:#fff; }

.slider .button                                 { margin-top: 20px; max-width:120px; }

/* content > products */

.products                                       {  }
.product-list .area25                           { margin:0; margin-bottom:30px; }
.product-list .area33                           { margin:0; margin-bottom:30px; }

.products .product-image                        { line-height:0; font-size:0; }
.products .product-image img                    { display:block; margin:0 auto; }

.products .product-title                        { position:relative; background:#2E2C2C; text-align:center; text-transform:capitalize; min-height:60px; max-height:60px; color:#fff; margin:0; padding:0; }
.products .product-title:hover                  { background:#222; }
.products .product-title span                   { position: absolute; top: 50%; left:0; right:0;
                                                  transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

/* content > side-meu*/
.side-menu                                      { text-transform:capitalize; font-size:1.4rem; }
.side-menu ul                                   { list-style:none; margin:0; padding:0; }
.side-menu ul li a                              { display:block; color:#808080; border-bottom:1px solid #ddd; padding:4px 15px; }

.side-menu > ul                                 { display:block; }
.side-menu > ul > li                            { outline:0; position:relative; }
.side-menu > ul > li > a                        { background-color: #fff; color:#2E2C2C; border-color:#ddd; padding: 8px 0px;/*pointer-events: none;*/ }

.side-menu > ul > li > ul                       { display:none; background: #fafafa; width:100%; }
.side-menu > ul > li > ul li a:hover            { background: #ddd url(../images/concrete_seamless.png); }

.side-menu > ul > li.hasdropdown::after         {}

.hasdropdown > a:after                          { content:"_"; float:right; background: url(../images/icons/arrow-down-sml.png) no-repeat right; width:25px; background-size: 14px; color:#fff; }
.hasdropdown > a.arrow-down:after               { content:"_"; float:right; background: url(../images/icons/arrow-up-sml.png) no-repeat right; width:25px; background-size: 14px; color:#fff; }

/* side-menu adjustments */
.side-menu > ul > li                            { position:relative; }
.side-menu > ul > li > a                        { position:relative; z-index:1; }
.side-menu > ul > li > span                     { position:absolute; z-index:2; top:0; right:0; height:44px; width:44px; cursor: crosshair; }

.hasdropdown.active > ul                        { display: block; }
.hasdropdown.active > a:after                   { content:"_"; float:right; background: url(../images/icons/arrow-up-sml.png) no-repeat right; width:25px; background-size: 14px; color:#fff; }
.hasdropdown.active > a.arrow-down:after        { content:"_"; float:right; background: url(../images/icons/arrow-down-sml.png) no-repeat right; width:25px; background-size: 14px; color:#fff; }

/* content > contact-us */
.contact-us                                     { }
.contact-us fieldset                            { border:0; background: none; padding:0; margin:0 0 20px 0; }
.contact-us fieldset legend                     {  }
.contact-us fieldset input,
.contact-us fieldset select,
.contact-us fieldset textarea                   { margin:0; outline:0; padding:4px 2%; border: 1px solid #ddd; width:96%; font:inherit; font-size:14px; -webkit-appearance:none; -moz-appearance:none; }

.contact-us .lblResult                          { display:block; float:left; padding:12px 20px; }

#ContentPlaceHolder1_chklstProductOfInterest input { -webkit-appearance:checkbox; -moz-appearance:checkbox; width:auto; }
#ContentPlaceHolder1_chklstProductOfInterest label { padding-left:10px; }
#ContentPlaceHolder1_chklstProductOfInterest tr    { width:33.33%; display:block; float:left; }

.contact-us fieldset                            { margin-bottom:0; }
.contact-us fieldset legend                     { display:none; }
.contact-us fieldset span                       { width:48%; float:left; padding-bottom:10px; }
.contact-us fieldset span:nth-child(even)       { padding-right:4%; }
.contact-us fieldset span span                  { width:auto; float:none; color:#D0332C; }


/* content > case-study */
.case-study                                     {  }
.case-study h3                                  {}

/* content > homepage > applications-menu */
.applications-menu                              {}
.applications-menu ul                           { margin:0; padding:0; list-style:none; width:100%; }
.applications-menu ul li                        { width:100%; display:block; }
.applications-menu ul li a                      { background-color: #fff; color:#2E2C2C; display:block; }
.applications-menu ul li a:hover                { text-decoration:underline; }

/* content > gallery */
.gallery img                                    { opacity:0.8; }
.gallery img:hover                              { opacity:1; }

/* content > gallery > showControl */
#showControl .area25                            { display:none;}
#showMore                                       { margin-right:20px; }

/* content > gallery > sorting */
.sorting-nav,
.sorting-nav a,
.sorting-nav ul,
.sorting-nav li,
.sorting-nav div,
.sorting-nav form,
.sorting-nav input                              { margin: 0; padding: 0; border: none; outline: none; }
.sorting-nav                                    { border-top:1px solid #ddd; border-bottom:3px solid #ddd; overflow:hidden; margin-bottom:20px; }
  
.sorting-nav ul                                 { margin: 10px 0; overflow:hidden; } 
.sorting-nav li                                 { display: inline-block; float:left; margin:10px 10px 10px 0;  }
.sorting-nav a                                  { text-decoration: none; }
.sorting-nav li a                               { padding: 8px 20px; list-style: none; display: block; background: #fff; border:1px solid #ddd;}
.sorting-nav li a:hover                         { background: #ddd url(../images/concrete_seamless.png); color: #808080; }

.sorting-nav .current                           { background: #003360; color:#fff; }
.sorting-nav span                               { display:none; color:#fff; }

.sorting-gallery                                {  }
.sorting-gallery .area25                        { margin:0 0 30px 0 ; overflow:hidden;}
.sorting-gallery .area25 .column_Inner_Padding  { }

.sorting-gallery img                            { opacity:0.8; }
.sorting-gallery img:hover                      { opacity:1; }

/* content > applications > gallery */
.applications .sorting-gallery                  { min-height: 0; }
.applications .sorting-gallery .area25          { max-height:254px;}

/* content > site-map */
.site-map ul > li a                             { /* background:#fafafa;   */ font-size:2.2rem; }
.site-map ul > li > ul > li a                   { /* background:#f7f7f7;   */ font-size:1.8rem; }
.site-map ul > li > ul > li > ul > li a         { /* background:#ddd;      */ font-size:1.4rem; }

.site-map ul                                    { width:100%; border-left:1px dashed #ddd; }
.site-map ul > li > ul                          { margin-left:30px; }
.site-map ul > li > ul > li > ul                { width:50%; }


.site-map ul li a                               { padding: 10px; display:block; }
.site-map ul                                    { list-style-type:none; margin:0; padding:0; position:relative; }
.site-map ul li:before                          { border-bottom:1px dashed #ddd; content:'.'; position:absolute; left:-31px; width:30px; height:1px; color:#fff; }

/* content > testimonials */
.testimonials                                   {  }

.testimonials .testimonial-item                 {  }
.testimonials .testimonial-item p:first-child:before          { }
.testimonials .date, 
.testimonials .name, 
.testimonials .location                         { display:inline-block; margin-right:20px; margin-top:20px;}
.testimonials .date                             { border-right:1px solid #ddd; padding-right:20px; }
.testimonials .date:before                      { content:'Date:'; margin-right:10px; color:#2E2C2C;  }
.testimonials .name                             { border-right:1px solid #ddd; padding-right:20px; }
.testimonials .name:before                      { content:'Name:'; margin-right:10px; color:#2E2C2C; }
.testimonials .location:before                  { content:'Location:'; margin-right:10px; color:#2E2C2C;  }

/* content > homepage */
.threeColsList                                  { display:block; overflow:hidden; clear:both; }
.threeColsList li                               { width:33%; float:left; }


.g-recaptcha iframe {
    height:76px;
    min-height:76px;
}

.woodgrain-swatch-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.woodgrain-swatch-list > div { 
    justify-content: center; 
}

.swatch-list ul:not(last-of-type) {
    display: grid; 
    grid-template-columns: repeat(6, 1fr);
    column-gap: 15px
}
.swatch-list ul { 
    padding-left: 0; 
}
.swatch-list li { 
    list-style: none; 
    margin-bottom: 1rem; 
    text-align: center; 
}
.swatch-list img { 
    margin-left: 15%; 
}
.swatch-list small { 
    line-height: initial; 
/*    text-align: center; */
}

/* flex */
.d-flex {
    display: flex;
}
.align-items-center {
    align-items: center;
}
.w-100 {
    width: 100px;
}


.announcement {
    text-align: center;
    background-color: #d4351c;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    display: block;
}

    .announcement p {
        text-align: center;
        margin: 0;
        color: white;
        font-size: 120%;
        padding: 1rem;
    }

    .announcement a {
        color: white;
        text-decoration: underline;
    }