html
{
margin:0;
max-width:100%;
overflow-x:hidden;
overflow-y:auto;
}
body
{
margin:0;
display:block;
margin:0;
padding:0;
text-align:center;
color:#000;
font-family: 'Roboto', sans-serif;
font-size:35px;
max-width:100%;
overflow-x:hidden;
overflow-y:auto;
}
*
{
}
div
{
display:inline-block;
width:100%;
float:left;
position: relative;
}
div.inner-wrap
{
width:80%;
margin:0 10%
}
div.inner-wrap.wide-section
{
width:90%;
margin:0 5%
}
div.container.text-center
{
display:inline-block;
width:100%;
max-width:1268px;
margin:0 auto;
float:none;
text-align:left;
}
h1
{
font-size:4vw;
font-weight:500;
margin: 0px;
}
h2
{
font-size:36px;
font-weight:500;
}
h3
{
font-size:28px;
font-weight: 700;
}
h4
{
font-size:24px;
font-weight: 500;
}
p
{
font-size:18px;
margin:0 0 10px;
}
p.caption
{
font-size:14px;
width:100%;
font-style:italic;
opacity:0.9;
text-align: center !important;
margin-bottom: 0 !important;
position: relative;
top: -15px;
}

div.main-content-section ul
{
max-width:800px;
margin: 0 auto;
margin-bottom:60px;
}
div.main-content-section ol
{
max-width:800px;
margin: 0 auto;
margin-bottom:60px;
}
div.main-content-section ul li, div.main-content-section ol li
{
font-size:18px;
margin:0 0 10px;
text-align:left;
}
blockquote
{
display: inline-block;
margin: 0 0 60px;
padding: 30px 5%;
width: 90%;
max-width: calc( 800px - 10% );
background: #b3b3b3;
color: #fff;
}
blockquote p
{
font-style:italic;
font-weight:300;
}

img
{
width:100%;
max-width:100%;
height:auto;
margin:0 0 30px;
}
a
{
text-decoration:underline;
}
a:visited
{
}
a:hover
{
opacity:0.6;
}
div.main-content-section a
{
color:#6f6f6f;
}
div.main-content-section a.callout-button
{
color:#fff;
}
.white
{
color:#fff;
}
.hidden-title
{
display:none;
}
div.header-section
{
width:100vw;
height:150px;
position:fixed;
top:0;
left:0;
z-index:100000;
}
div.header-left
{
text-align:left;
width:50%;
}
div.header-left a
{
max-width: 200px;
display: inline-block;
padding-top: 30px;
transition: 0.8s;
transition-timing-function: ease-out;
}
div.header-left img
{
min-width:200px;
width:200px;
height:auto;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
div.header-right
{
text-align:right;
width:50%;
}
div.header-right div.menu-button
{
max-width:40px;
cursor:pointer;
float:right;
padding-top:32px;
}
div.header-right div.menu-button:hover
{
opacity:0.6;
}
ul.main-menu
{
margin-left:0;
padding-left:0;
list-style-type:none;
display:inline-block;
width:100%;
}
div.main-menu-wrap ul
{
display:inline-block;
margin:0;
padding:0;
}
div.main-menu-wrap ul li
{
width:100%;
display:inline-block;
padding-bottom: 10px;
}
div.main-menu-wrap ul li a
{
color:#fff;
text-decoration:none;
font-size:24px
}
div.main-menu-wrap ul li ul
{
display:none;
}
div.main-menu-wrap ul li a:hover
{
text-decoration:underline;
}
div.header-left img
{
width:100%;
height:auto;
}
div.header-section.navigation-overlay
{
display:none;
}
div.navigation-toggle.mobile-menu-active div.header-section.navigation-overlay
{
display:inline-block !important;
}
div.header-navigation.tight div.header-section
{
height: 80px;
background:#fff;
transition-timing-function: ease-in;
}
div.header-navigation.tight div.header-section.main-navigation 
{
transition-timing-function: ease-in;
-moz-box-shadow: 0px 0px 12px 0px #e6e6e6;
-webkit-box-shadow: 0px 0px 13px 0px #e6e6e6;
box-shadow: 0px 0px 12px 0px #e6e6e6;
}
div.header-navigation.tight div.header-left a
{
padding-top: 16px;
transition: 0.8s;
transition-timing-function: ease-in;
}
div.header-navigation.tight div.header-right div.menu-button
{
padding-top:24px;
transition: 0.8s;
transition-timing-function: ease-in;
}
div.header-navigation.mobile-menu-active div.header-section.navigation-overlay
{
display: inline-block;
background: url(../images/backgroundtrans.png) repeat;
height: 100vh;
width: 100vw;
}
div.header-navigation.mobile-menu-active  div.header-section.main-navigation div.header-right div.menu-button
{
opacity:0;
transition: 0.2s;
transition-timing-function: ease-in;
}
/*************************************************************************
Banner Section
*************************************************************************/
div.banner-section
{
width:100vw;
height:100vh;
background:url(../images/Growtop-Cover.png) no-repeat;
background-position:50% 50%;
background-size:cover;
}
body.lifecycle div.banner-section
{
width:100vw;
height:100vh;
background:url(../images/LifeCycle-Banner.jpg) no-repeat;
background-position:50% 50%;
background-size:cover;
}
body.watertable a.growtop-logo, body.itemid-106 a.growtop-logo
{
background:url(../images/Logo-White.svg) no-repeat;
background-position:0px 44%;
background-size:contain;
}
body.watertable a.growtop-logo img, body.itemid-106 a.growtop-logo img
{
opacity:0;
}
body.watertable div.header-navigation.tight a.growtop-logo, body.itemid-106 div.header-navigation.tight a.growtop-logo
{
background:transparent
}
body.watertable div.header-navigation.tight a.growtop-logo img, body.itemid-106 div.header-navigation.tight a.growtop-logo img
{
opacity:1;
}
body.watertable div.growtop-menu, body.itemid-106 div.growtop-menu
{
background:url(../images/Menu-Icon-White2.svg) no-repeat;
background-position:0px 44%;
background-size:contain;
}
body.watertable div.growtop-menu img, body.itemid-106 div.growtop-menu img
{
opacity:0;
}
body.watertable div.header-navigation.tight div.growtop-menu, body.itemid-106 div.header-navigation.tight div.growtop-menu
{
background:transparent
}
body.watertable div.header-navigation.tight div.growtop-menu img, body.itemid-106 div.header-navigation.tight div.growtop-menu img
{
opacity:1;
}
body.watertable div.banner-section h1
{
color: #fff;
-webkit-text-shadow: 1px 1px 6px #000;
-moz-text-shadow: 1px 1px 6px #000;
text-shadow: 1px 1px 6px #000;
}
body.watertable div.banner-section
{
width:100vw;
height:100vh;
background:url(../images/Water-Table-Promo-2021.png) no-repeat;
background-position:50% 50%;
background-size:cover;
}
body.big-idea div.banner-section
{
width:100vw;
height:100vh;
background:url(../images/Growtop-Big-Idea-Cover.png) no-repeat;
background-position:50% 50%;
background-size:cover;
}
div.banner-section div.inner-wrap
{
height:90%;
width:90%;
display:inline-table;
padding: 0;
margin: 0 5%;
}
div.banner-section div.banner-wrap
{
display: table-cell;
vertical-align: bottom;
float: none;
text-align: right;
}
div.banner-left
{
text-align:left;
width:50%;
}
div.banner-right
{
text-align:left;
width:50%;
}
div.social-media-section
{
}
div.social-media-icon
{
display:inline-block;
width:auto;
float:left;
padding-top:80px;
}
/*************************************************************************
Main Section
*************************************************************************/
div.main-content-section
{
display:inline-block;
width:100%;
float:left;
margin:60px 0 0;
}
body.home div.main-content-section
{
margin: 60px 0 30px;
}
div.main-content-section div.inner-wrap
{
text-align:center;
}
div.main-content-section div.inner-wrap h1
{
text-align:left;
max-width:800px;
margin:0 auto;
margin-bottom:30px;
text-align:center;
}
div.main-content-section div.inner-wrap h2
{
text-align:left;
max-width:800px;
margin:0 auto;
margin-bottom:30px;
text-align:center;
}
div.main-content-section div.inner-wrap h3
{
text-align:left;
max-width:800px;
margin:0 auto;
margin-bottom:30px;
text-align:center;
}
div.main-content-section div.inner-wrap h4
{
text-align:left;
max-width:800px;
margin:0 auto;
margin-bottom:30px;
text-align:center;
}
div.main-content-section div.inner-wrap p
{
text-align:left;
max-width:800px;
margin:0 auto;
margin-bottom:30px;
line-height:1.5em;
}
div.image-wrap
{
max-width:800px;
float:none;
margin:30px 0;
}
div.lifecycle-illustration-wrap
{
max-width:820px !important;
margin: 0 auto !important;
margin-top:30px !important;
margin-bottom:40px !important;
float: none !important; 
}
div.how-it-works
{
max-width:600px;
margin: 0 auto;
float: none;
}
body.big-idea div.how-it-works
{
max-width:800px;
}
body.big-idea div.image-wrap.how-it-works-lifecycle
{
max-width:810px !important;
}
body.big-idea div.how-it-works.rough-sketch
{
max-width:600px;
}
/********************************
About Us Section
********************************/

div.content-block.intro-block div.image-wrap
{
max-width:1068px;
float:none; 
margin:30px 0;
}
div.image-box.kitchen-view-1
{
height:540px;
width:33.333%;
float:left;
}
div.image-box.kitchen-view-2
{
height:540px;
width:33.333%;
float:left;
}
div.image-box.kitchen-view-3
{
height:540px;
width:33.333%;
float:left;
}
div.image-box.kitchen-view-1 img, div.kitchen-view-2 img, div.kitchen-view-3 img
{
height:100%;
width:auto !important;
max-width:initial !important;
}
/********************************
How It Works Section
********************************/
/********************************
Documentation - Blog View
********************************/
body.view-category div.banner-section
{
background: url(../images/Dark-Stones.png) no-repeat;
background-position: 50% 100%;
height: 300px;
background-size: cover;
}
body.view-category div.banner-section h1
{
color:#fff;	
}
body.view-category div.page-header h2
{
margin-bottom:0px;
width:90%;
padding-right:10%;	
}
body.view-category div.tab-title
{
cursor:pointer;
background:url(../images/Down-Arrow-Dark.svg) no-repeat;
background-size:2vw;
background-position:100% 16px;
}
body.view-category div.tab-title.open-tab
{
background:url(../images/Up-Arrow-Dark.svg) no-repeat;
background-size:2vw;
background-position:100% 16px;
}
body.view-category div.tab-title:hover
{
color:#797979;
}
div.main-content-section div.com-content-category-blog dl
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
width:100%;
}
div.main-content-section div.com-content-category-blog dd
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
}
 div.main-content-section div.com-content-category-blog dt
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
}
div.main-content-section div.com-content-category-blog dl.article-info
{
display:inline-block;
float:left;
text-align:left;
}
div.main-content-section div.com-content-category-blog h2
{
display:inline-block;
float:left;
text-align:left;
}
div.com-content-category-blog div.tab-content
{
display:none;
margin-bottom:1vw;
padding-bottom:2vw;
border-bottom:solid 1px #eaeae1;
}
div.com-content-category-blog div.tab-sub-title
{
padding-bottom:1vw;
margin-bottom:1vw;
border-bottom:solid 1px #eaeae1;
}
div.com-content-category-blog p
{
margin-left:0px !important;
}
/********************************
Documentation - Full Page Article 
********************************/
#default-article-layout
{
}
#default-article-layout figure.item-image
{
display:inline-block;
margin:0 auto;
max-width:1024px;
margin-top:30px;
width:100%;
}
#default-article-layout h1
{
font-size: 3.5vw;
}
div.com-content-article.item-page
{
text-align:left;
}
div.com-content-article.item-page div.heading-section
{
font-size: 3.5vw;
}
div.com-content-article.item-page figure
{
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 10px;
}
div.com-content-article.item-page div.heading-section
{
text-align:left;
}
div.com-content-article.item-page div.main-content-section
{
text-align:left;
}
div.com-content-article.item-page div.main-content-section dl
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
}
div.com-content-article.item-page div.main-content-section dd
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
}
div.com-content-article.item-page div.main-content-section dt
{
display:inline-block;
float:left;
text-align:left;
font-size:12px;
margin-left:0;
margin-right:2vw;
}
div.com-content-article.item-page div.main-content-section dl.article-info
{
display:inline-block;
float:left;
text-align:left;
width: 100%;
}
div.com-content-article.item-page h1
{
margin-top:200px;
}
div.com-content-article.item-page div.main-content-section
{
margin-top:0px;
}
nav.pagenavigation
{
display:inline-block;
float:left;
width:100%;
margin:0;
padding:0;
}
#default-article-layout nav.pagenavigation
{
padding-top: 30px;
border-top: solid 1px;
margin-top: 30px;
}
nav.pagenavigation ul
{
display: inline-block;
float: left;
min-width: 100%;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
margin-bottom: 90px;
margin-top: 30px;
}
nav.pagenavigation ul li
{
display:inline-block;
width:calc( 50% - 30px );
margin:0;
padding:0;
list-style-type:none;
}
nav.pagenavigation ul li.previous.page-item
{
text-align:left;
padding:0;
margin:0;
padding-left:30px;
float:left;
background:url(../images/Left-Arrow-Dark.svg) no-repeat;
background-size:10px;
background-position:0% 50%;
}
nav.pagenavigation ul li.next.page-item
{
text-align:right;
padding:0;
margin:0;
padding-right:30px;
float:right;
background:url(../images/Right-Arrow-Dark.svg) no-repeat;
background-size:10px;
background-position:100% 50%;
}
/********************************
Growbeds Section
********************************/
div.content-block.growbed-block div.image-wrap
{
max-width:1000px;
float:none;
margin:30px 0;
}
body.home div.content-block.growbed-block div.image-wrap
{
max-width:900px;
}
div.image-box.growbed-view-1
{
height:350px;
width:50%;
float:left;
}
div.image-box.growbed-view-2
{
height:350px;
width:50%;
float:left;
}
div.image-box.lifecycle-view-1 img, div.image-box.lifecycle-view-2 img
{
}
div.watertable-wrap
{
margin-bottom:60px;
}
div.lifecycle-wrap
{
margin-bottom:60px !important;
}
/********************************
Lifecycle Section
********************************/
div.lifecycle-block div.image-wrap
{
margin-bottom:40px;
}
div.lifecycle-block div.text-wrap
{
margin-top:20px;
margin-bottom:30px;
}
div.image-box.lifecycle-view-1
{
height:300px;
width:70%;
float:left;
text-align: left;
}
div.image-box.lifecycle-view-2
{
height:300px;
width:30%;
float:left;
}
div.image-box.lifecycle-view-1 img, div.image-box.lifecycle-view-2 img
{
height:100%;
width:auto !important;
max-width:initial !important;
}
div.video-box
{
padding-bottom: 56.25%;
margin-bottom:30px;
}
video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/********************************
Callout Section
********************************/
a.callout-button, a.btn.btn-secondary
{
font-size: 18px;
line-height: 20px;
padding: 12px 24px;
background: #131b37;
border: 1px solid #131b37;
color: #fff;
display: inline-block;
text-decoration:none;
}
div.callout-section a.callout-button
{
background: #fff;
border: 1px solid #131b37;
color: #131b37;
display: inline-block;
text-decoration: none;
padding: 12px 36px;
}
div.callout-section
{
background:url(../images/Stainless.png) no-repeat;
background-position:50% 50%;
background-size:1920px; 
padding:60px 0 90px;
border-top:solid 6px #8d8d8d;
}
div.callout-section h2
{
color:#fff;
}
div.callout-section p
{
color:#fff;
padding-bottom:30px;
}
/*************************************************************************
Footer Section
*************************************************************************/
div.footer-section
{
display:inline-block;
width:100%;
float:left;
background:url(../images/Carbon-Fiber.png) no-repeat;
background-position: 50% 50%;
background-size:1920px;
padding:90px 0 120px;
border-top:solid 6px #000;
}
div.footer-section a.logo
{
width: 200px;
disply:inline-block;
float:left;
}
p.fine-print
{
font-size: 0.5em;
margin:20px 0;
color:#fff;
display:inline-block;
width:100%;
float:left;
text-align:left;
}

/*************************************************************************
Callout Button
*************************************************************************/

/*************************************************************************
Top of Page Button
*************************************************************************/
div.scroll-to-top
{
position: fixed;
right: 0;
max-width: 70px;
bottom: 10px;
}
div.scroll-to-top a
{
opacity:0;
transition: 0.8s;
transition-timing-function: ease-out;
}
div.scroll-to-top a.visible
{
opacity:1;
transition: 0.8s;
transition-timing-function: ease-out;
}
/***********************************************************************************************************
Screen Responsiveness
***********************************************************************************************************/

/*************************************************************************
max-width:1366px
*************************************************************************/

@media(max-width:1366px){
body
{
}

}

/*************************************************************************
max-width:1206px
*************************************************************************/

@media(max-width:1206px){

div.banner-section div.inner-wrap
{
height:100%;
}
div.banner-section div.banner-wrap
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
h1
{
font-size:40px;
}

}

/*************************************************************************
max-width:960px
*************************************************************************/

@media(max-width:960px){

/********************************
About Us Section
********************************/

div.content-block.intro-block div.image-wrap
{
max-width:1068px;
float:none; 
margin:30px 0;
}
div.image-box.kitchen-view-1
{
height:540px;
width:50%;
float:left;
}
div.image-box.kitchen-view-2
{
height:540px;
width:50%;
float:left;
}
div.image-box.kitchen-view-3
{
height:540px;
width:50%;
float:left;
}
/********************************
How It Works Section
********************************/

/********************************
Growbeds Section
********************************/

div.image-box.growbed-view-1
{
height:300px;
width:100%;
float:left;
}
div.image-box.growbed-view-2
{
height:300px;
width:100%;
float:left;
}
div.image-box.growbed-view-1 img, div.image-box.growbed-view-2 img
{
height:100%;
width:auto;
}

/********************************
Lifecycle Section
********************************/

div.image-box.lifecycle-view-1
{
height:300px;
width:100%;
text-align: center;
}
div.image-box.lifecycle-view-2
{
height:300px;
width:100%;
float:left;
}


}

/*************************************************************************
max-width:768px
*************************************************************************/

@media(max-width:768px){

body.lifecycle div.banner-section
{
width: 100vw;
height: 100vh;
background: url(../images/LifeCycle-Banner-Mobile.jpg) no-repeat;
background-position: 50% 50%;
background-size: 110vw;
}
body.watertable div.banner-section
{
width:100vw;
height:100vh;
background:url(../images/Water-Table-Promo-2021-2.png) no-repeat;
background-position:0% 50%;
background-size:cover;
}
body.watertable div.banner-section h1
{
color:#fff !important;
}
div.video-box
{
padding-bottom: 74.25%;
}

}

/*************************************************************************
max-width:540px
*************************************************************************/

@media(max-width:540px){

div.image-box.lifecycle-view-1 img
{
width:100% !important;
height:auto !important;
margin-bottom:30px;
}
div.image-box.lifecycle-view-2 img
{
width:80% !important;
margin:0 10%;
height:auto !important;
}
div.image-box.kitchen-view-1 img, div.kitchen-view-2 img, div.kitchen-view-3 img
{
height: 70vh;
width: auto !important;
margin:0 auto !important;
margin-bottom:30px !important;
max-width: initial !important;
}
div.image-box.kitchen-view-1, div.image-box.kitchen-view-2, div.image-box.kitchen-view-3
{
height:auto;
width:100%;
}
div.image-box.growbed-view-1 img, div.image-box.growbed-view-2 img
{
width: 100%;
height: auto;
}

nav.pagenavigation ul li
{
display:inline-block;
width:calc( 100% - 30px );
}
nav.pagenavigation ul li.previous.page-item
{
margin-bottom:30px;
}
nav.pagenavigation ul li.next.page-item
{
}

}

/*************************************************************************
max-width:500px
*************************************************************************/

@media(max-width:500px){
div.header-left a
{
max-width: 150px;
}
div.header-left img
{
min-width:150px;
width:150px;
}

}


/*************************************************************************
max-width:380px
*************************************************************************/

@media(max-width:380px){

}