/* Slab Grid v1.2.1 - do not autoformat. creative commons (cc) share-alike-attribution 2020 Slabmedia.com include this comment at top when using -- SEMI MINIFIED 2020-10-02 */
.fullwidth,.fullwi,.w12-12,.w5-5,.w7-7,.w8-8,.w9-9,.w10-10,.fullbox #mainbox{
width:100%;
margin:0 0 1em;
padding:0;
display:block;
float:none;
clear:both;
position:relative;
box-sizing:content-box;
}
.w12-12.sqbgimg{
height:0;
padding-top:100%;
}
.sqbgimg.contain{
background-position:center center;
background-color:transparent;
background-repeat:no-repeat;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
}
.sqbgimg.cover{
background-position:center center;
background-color:transparent;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.w12-12.nopadd,.w12-1.nopadd,.w12-2.nopadd,.w12-3.nopadd,.w12-4.nopadd,.w12-5.nopadd,.w12-6.nopadd,.w12-7.nopadd,.w12-8.nopadd,.w12-9.nopadd,.w12-10.nopadd,.w12-11.nopadd{padding:0;margin-bottom:0;}
.w12-12.nopaddtop{margin-top:0;
box-sizing:content-box;}
.w12-1,.w12-2,.w12-3,.w12-4,.w12-5,.w12-6,.w12-7,.w12-8,.w12-9,.w12-10,.w12-11,.w12-1-unr,.w12-2-unr,.w12-3-unr,.w12-4-unr,.w12-5-unr,.w12-6-unr,.w12-7-unr,.w12-8-unr,.w12-9-unr,.w12-10-unr,.w12-11-unr{
margin:0 1em 1em 0;
padding:0;
display:inline-block;
float:left;
clear:none;
position:relative;
}
.w12-12 input[type="text"],.w12-12 input[type="email"],.w12-12 input[type="number"],.w12-12 input[type="password"],.w12-12 input[type="date"],.w12-12 textarea,.w12-6 input[type="text"],.w12-6 input[type="email"],.w12-6 input[type="number"],.w12-6 input[type="password"],.w12-6 input[type="date"],.w12-6 textarea,.w12-4 input[type="text"],.w12-4 input[type="email"],.w12-4 input[type="number"],.w12-4 input[type="password"],.w12-4 input[type="date"],.w12-4 textarea,.w12-3 input[type="text"],.w12-3 input[type="email"],.w12-3 input[type="number"],.w12-3 input[type="password"],.w12-3 input[type="date"],.w12-3 textarea{
width:calc(100% - 2em - 2px);
color:#444;
font-family:inherit;
font-size:1em;
line-height:1.4;
font-weight:400;
padding:.5em 1em;
margin:0;
outline:none;
border:1px rgba(0,0,0,.5) solid;
-moz-border-radius:.125em;
border-radius:.125em;
box-sizing:content-box;
}
.w12-12 select{
max-width:calc(100% - 2em - 2px);
padding:.5em 1em;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
line-height:35px;
box-sizing:content-box;
border:1px rgba(0,0,0,.5) solid;
}
.w12-12 .required input,.w12-12 .required textarea,.w12-12 .required select{
border-color:#933;
}
.w12-12 .hidden{display:none;}
.w12-1-unr{
width:calc(8.33% - .92em);
}
.w12-1-unr:nth-child(12n),.w12-1-unr.end{
margin-right:0;
}
.w12-1-unr:nth-child(12n+1),.w12-1-unr.start{
clear:left;
}
.w12-1-unr.sqbgimg{
height:0;
padding-top:calc(8.33% - .92em);
}
.w12-2-unr{
width:calc(16.66% - .833em);
}
.w12-2-unr.sqbgimg{
height:0;
padding-top:calc(16.66% - .833em);
}
.w12-2-unr:nth-child(6n),.w12-2-unr.end{
margin-right:0;
}
.w12-2-unr:nth-child(6n+1),.w12-2-unr.start{
clear:left;
}
.w12-3-unr{
width:calc(25% - .75em);
}
.w12-3-unr:nth-child(4n),.w12-3-unr.end{
margin-right:0;
}
.w12-3-unr:nth-child(4n+1),.w12-3-unr.start{
clear:left;
}
.w12-3-unr.sqbgimg{
height:0;
padding-top:calc(25% - .75em);
}
.w12-4-unr{
width:calc(33.33% - .66em);
}
.w12-4-unr:nth-child(3n),.w12-4-unr.end{
margin-right:0;
}
.w12-4-unr:nth-child(3n+1),.w12-4-unr.start{
clear:left;
}
.w12-4-unr.sqbgimg{
height:0;
padding-top:calc(33.33% - .66em);
}
.w12-5-unr{
width:calc(41.66% - 1em);
margin-right:1em;
}
.w12-5-unr.sqbgimg{
height:0;
padding-top:calc(41.66% - 1em);
}
.w12-6-unr{
width:calc(50% - .5em);
}
.w12-6-unr:nth-child(2n),.w12-6-unr.end{
margin-right:0;
}
.w12-6-unr:nth-child(2n+1),.w12-6-unr.start{
clear:left;
}
.w12-6-unr.sqbgimg{
height:0;
padding-top:calc(50% - .5em);
}
.w12-7-unr{
width:calc(58.33% - .42em);
margin-right:1.5em;
}
.w12-7-unr.sqbgimg{
height:0;
padding-top:calc(58.33% - .42em);
}
.w12-8-unr{
width:calc(66.66% - .33em);
margin-right:1.5em;
}
.w12-8-unr.sqbgimg{
height:0;
padding-top:calc(66.66% - .33em);
}
.w12-9-unr{
width:calc(75% - .25em);
margin-right:2em;
}
.w12-9-unr.sqbgimg{
height:0;
padding-top:calc(75% - .25em);
}
.w12-10-unr{
width:calc(83.33% - .17em);
margin-right:2em;
}
.w12-10-unr.sqbgimg{
height:0;
padding-top:calc(83.33% - .17em);
}
.w12-11-unr{
width:calc(91.66% - .09em);
margin-right:2em;
}
.w12-11-unr.sqbgimg{
height:0;
padding-top:calc(91.66% - .09em);
}
.w12-7.end,.w12-8.end,.w12-9.end,.w12-10.end,.w12-11.end,.w12-7-unr.end,.w12-8-unr.end,.w12-9-unr.end,.w12-10-unr.end,.w12-11-unr.end{
margin-right:0;
}
.w12-7.start,.w12-8.start,.w12-9.start,.w12-10.start,.w12-11.start,.w12-7-unr.start,.w12-8-unr.start,.w12-9-unr.start,.w12-10-unr.start,.w12-11-unr.start{
clear:left;
}
/* desktop laptops - anything 1024px and above */
@media (min-width:64em){
.w12-1{
width:calc(8.33% - .92em);
}
.w12-1:nth-child(12n),.w12-1.end{
margin-right:0;
}
.w12-1:nth-child(12n+1),.w12-1.start{
clear:left;
}
.w12-1.sqbgimg{
height:0;
padding-top:calc(8.33% - .92em);
}
.w12-2{
width:calc(16.66% - .83em);
}
.w12-2.sqbgimg{
height:0;
padding-top:calc(16.66% - .83em);
}
.w12-2:nth-child(6n),.w12-2.end{
margin-right:0;
}
.w12-2:nth-child(6n+1),.w12-2.start{
clear:left;
}
.w12-2.lgmg{
width:calc(16.66% - 2em);
margin-right:2em;
}
.w12-3{
width:calc(25% - .75em);
}
.w12-3.sqbgimg{
height:0;
padding-top:calc(25% - .75em);
}
.w12-3:nth-child(4n),.w12-3.end{
margin-right:0;
}
.w12-3:nth-child(4n+1),.w12-3.start{
clear:left;
}
.w12-3.lgmg{
width:calc(25% - 2em);
margin-right:2em;
}
.w12-4{
width:calc(33.33% - .67em);
}
.w12-4:nth-child(3n),.w12-4.end{
margin-right:0;
}
.w12-4.sqbgimg{
height:0;
padding-top:calc(33.33% - .67em);
}
.w12-4:nth-child(3n+1),.w12-4.start{
clear:left;
}
.w12-4.lgmg{
width:calc(33.33% - 2em);
margin-right:2em;
}
.w12-5{
width:calc(41.66% - .58em);
}
.w12-5:nth-child(2n),.w12-5.end{
margin-right:0;
}
.w12-5:nth-child(2n+1),.w12-5.start{
clear:left;
}
.w12-6{
width:calc(50% - .5em);
}
.w12-6:nth-child(2n),.w12-6.end{
margin-right:0;
}
.w12-6:nth-child(2n+1),.w12-6.start{
clear:left;
}
.w12-6.sqbgimg{
height:0;
padding-top:50%;
}
.w12-7{
width:calc(58.33% - .42em);
}
.w12-7.lgmg{
width:calc(58.33% - 2em);
margin-right:2em;
}
.w12-7:nth-child(7n),.w12-7.end{
margin-right:0;
}
.w12-7:nth-child(7n+1),.w12-7.start{
clear:left;
}
.w12-8{
width:calc(66.66% - .33em);
}
.w12-8:nth-child(8n),.w12-8.end{
margin-right:0;
}
.w12-8.lgmg{
width:calc(66.66% - 2em);
margin-right:2em;
}
.w12-9{
width:calc(75% - .25em);
}
.w12-9.lgmg{
width:calc(75% - 2em);
margin-right:2em;
}
.w12-10{
width:calc(83.33% - .17em);
}
.w12-10.lgmg{
width:calc(83.33% - 2em);
margin-right:2em;
}
.w12-11{
width:calc(91.66% - .09em);
}
.w12-11.lgmg{
width:calc(91.66% - 2em);
margin-right:2em;
}
.floatleft{
float:left!important;
clear:left!important;
}
.floatright{
float:right!important;
clear:right!important;
}
}
/* for screens 1200 max */
@media ( max-width:80em){
.full80{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full80.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 1024 max */
@media ( max-width:64em){
.full64{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full64.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 896 max */
@media ( max-width:56em){
.full56{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full56.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 816 max */
@media ( max-width:51em){
.full51{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full51.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 672 max */
@media ( max-width:42em){
.full42{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full42.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 480 max */
@media ( max-width:30em){
.full30{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
.full30.sqbgimg{
padding-top:100%!important;
}
}
/* for screens 320 max */
@media ( max-width:20em){
.full20{
width:100%!important;
float:none!important;
clear:both!important;
margin-right:0!important;
display:block;
}
}
/* tablets min width 672px and max width 1023px or just under 1024px using em */
@media (min-width:42em) and (max-width:64em){
.w12-1{
width:calc(16.66% - .83em);
}
.w12-1:nth-child(6n),.w12-1.end{
margin-right:0;
}
.w12-1:nth-child(6n+1),.w12-1.start{
clear:left;
}
.w12-1.sqbgimg{
height:0;
padding-top:calc(16.66% - .83em);
}
.w12-2,.w12-4{
width:calc(33.33% - .67em);
}
.w12-2.sqbgimg,.w12-4.sqbgimg{
height:0;
padding-top:calc(33.33% - .67em);
}
.w12-2:nth-child(3n),.w12-2.end,.w12-4:nth-child(3n),.w12-4.end{
margin-right:0;
clear:right;
}
.w12-2:nth-child(3n+1),.w12-2.start,.w12-4:nth-child(3n+1),.w12-4.start{
clear:left;
}
.w12-3:nth-child(2n),.w12-3.end{
margin-right:0;
clear:right;
}
.w12-3:nth-child(2n+1),.w12-3.start{
clear:left;
}
.w12-3{
width:calc(50% - 1em);
}
.w12-3.sqbgimg{
height:0;
padding-top:calc(50% - 1em);
}
.w12-5,.w12-6,.w12-3.full42,.w12-7{
width:calc(50% - .5em);
}
.w12-6:nth-child(2n),.w12-6.end,.w12-3.full42:nth-child(2n),.w12-3.full42.end,.w12-4.full42:nth-child(2n),.w12-4.full42.end{
margin-right:0;
}
.w12-6:nth-child(2n+1),.w12-6.start,.w12-3.full42:nth-child(2n+1),.w12-4.full42:nth-child(3n+1),.w12-4.full42.start{
clear:left;
}
.w12-7.lgmg{
width:calc(50% - 2em);
margin-right:2em;
}
.w12-8,.w12-9,.w12-10{
width:calc(66.66% - .33em);
}
.w12-8.lgmg,.w12-9.lgmg,.w12-10.lgmg{
width:calc(66.66% - 1.67em);
margin-right:2em;
}
.w12-11{
width:calc(83.33% - .07em);
}
.w12-11.lgmg{
width:calc(83.33% - 1.83em);
margin-left:2em;
}
}
/* phones max width 671px or just under 672px using em .full42 is useful for fullwidth divs on phones */
@media (max-width:42em){
.w12-1.start,.w12-1.end,.w12-2.start,.w12-2.end,.w12-3.start,.w12-3.end,.w12-4.start,.w12-4.end,.w12-5.start,.w12-5.end,.w12-6.start,.w12-6.end,.w12-7.start,.w12-7.end,.w12-8.start,.w12-8.end,.w12-9.start,.w12-9.end,.w12-10.start,.w12-10.end,.w12-11.start,.w12-11.end{
width:100%;
margin-right:0;
float:none;
clear:both;
}
.w12-1,.w12-2,.w12-5,.w12-6,.w12-7{
width:calc(50% - .5em);
}
.w12-1.sqbgimg{
height:0;
padding-top:calc(50% - .5em);
}
.w12-1:nth-child(2n),.w12-2:nth-child(2n),.w12-5:nth-child(2n),.w12-6:nth-child(2n),.w12-7:nth-child(2n){
margin-right:0;
}
.w12-1:nth-child(2n+1),.w12-2:nth-child(2n+1),.w12-5:nth-child(2n+1),.w12-6:nth-child(2n+1),.w12-7:nth-child(2n+1){
clear:left;
}
.w12-3,.w12-4{
width:calc(50% - .5em);
}
.w12-3:nth-child(2n),.w12-3.end,.w12-4:nth-child(2n),.w12-4.end{
margin-right:0;
}
.w12-3:nth-child(2n+1),.w12-3.start,.w12-4:nth-child(2n+1),.w12-4.start{
clear:left;
}
.w12-3.sqbgimg,.w12-4.sqbgimg,.w12-8.sqbgimg,.w12-9.sqbgimg,.w12-10.sqbgimg,.w12-11.sqbgimg{
height:0;
padding-top:50%;
}
.w12-1.sqbgimg,.w12-2.sqbgimg,.w12-5.sqbgimg,.w12-6.sqbgimg,.w12-7.sqbgimg{
height:0;
padding-top:calc(50% - .5em);
}
}
/* edge exceptions - ms rounds to 2 decimal places - this will break autoformatting in editors */
@supports (-ms-ime-align:auto){
@media (min-width:64em){
.w12-1{
width:calc(8.33% - .92em);
}
.w12-1.sqbgimg{
padding-top:calc(8.33% - .92em);
}
.w12-2{
width:calc(16.65% - 0.83em);
}
.w12-2.sqbgimg{
padding-top:calc(16.65% - 0.83em);
}
.w12-4{
width:calc(33.32% - .67em);
}
.w12-4.sqbgimg{
padding-top:calc(33.32% - .67em);
}
.w12-5{
width:calc(41.66% - .58em);
}
.w12-7{
width:calc(58.32% - .42em);
}
.w12-7.lgmg{
width:calc(58.32% - 2em);
}
.w12-8{
width:calc(66.66% - .33em);
}
.w12-8.lgmg{
width:calc(66.66% - 2em);
}
.w12-10{
width:calc(83.32% - .17em);
}
.w12-10.lgmg{
width:calc(83.32% - 2em);
}
.w12-11{
width:calc(91.66% - .07em);
}
.w12-11.lgmg{
width:calc(91.66% - 2em);
}
}
@media (min-width:42em) and (max-width:64em){
.w12-1{
width:calc(16.65% - .83em);
}
.w12-1.sqbgimg{
padding-top:calc(16.65% - .83em);
}
.w12-4{
width:calc(33.32% - .67em);
}
.w12-4.sqbgimg{
padding-top:33.32%;
}
.w12-5{
width:calc(41.66% - .58em);
}
.w12-7{
width:calc(58.32% - .417em);
}
.w12-7.lgmg{
width:calc(58.32% - 2em);
}
.w12-8,.w12-9,.w12-10{
width:calc(66.66% - .33em);
}
.w12-11{
width:calc(83.32% - .07em);
}
}
}