/* BARNSTORMER DESIGN - Home */
h1 {text-align: center; color: #000;}
#lgo-tag {display: none;}

/* HERO BLOCK DEFAULTS */
#herowrap {width: 100%; display: flex; /*flex-flow: column wrap;*/ flex-flow: column nowrap; justify-content: center; position: relative;}
#hero {position:relative; width: 100%; height: 95vh;}
/* wait for DOM */
#hero, #hero-txt {visibility:hidden;}
.no-webp #hero {background-image: url(/_img/hme/bkgd2_6433955.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover;}
.webp #hero {background-image: url(/_img/hme/bkgd2_6433955-webp.webp); background-repeat: no-repeat; background-position: center top; background-size: cover;}
#hero-txt, #hero-img {width: 100%; align-self: flex-start;}
#hero-tag, h1 {width: 94%; line-height: 1.125; text-align: center; margin: 0 auto;}
#hero-tag {margin: 0 auto .25em;}
#hero-tag sup {font-size: 55%;}
p#h2-sub {margin: 1em auto 1em;}
#hero-img {max-width: 90%; padding-bottom: 20px; z-index:9;}
#btn-wrap {z-index:10; line-height: 1; text-align: center;}

@media (orientation: portrait) {#hero {height: auto !important;}}

@media only screen and (orientation: portrait) and (min-width: 0px) and (max-width: 360px) {
#bdy-hme #lgo {left: 5%; top: 15px; width: 45%; max-width: 130px;}
#hero {height: auto !important;}
#hero-txt {padding: 20vh 0 2vh;}
#hero-tag span {display: block;}
#hero-tag {font-size: 8vw; max-width: 320px;}
h1 {font-size: 6vw; max-width: 320px; padding: 0 0 1.25em;}
p#h2-sub  {font-size: 5vw;}
#hero-img {max-width: 94%; padding-top: 0px;}
}
@media only screen and (orientation: landscape) and (min-width: 0px) and (max-height: 360px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 35%; max-width: 135px;}
#hero {height: auto !important;}
#hero-txt {padding-top: 9vh;}
#hero-tag {font-size: 3.75vw;}
h1 {font-size: 3vw; padding: 0 0 1.0625em;}
p#h2-sub {font-size: 3.5vw;}
#hero-img {max-width: 75%; padding-top: 0px;}
}


@media only screen and (orientation: portrait) and (min-width: 361px) and (max-width: 480px) {
#bdy-hme #lgo {left: 5%; top: 15px; width: 45%; max-width: 130px;}
#hero {height: auto !important;}
#hero-txt {padding: 15vh 0 2vh;}
#hero-tag span {display: block;}
#hero-tag {font-size: 6.5vw; max-width: 300px;}
h1 {font-size: 5vw; max-width: 300px; padding: 0 0 1.5em;}
p#h2-sub  {font-size: 5vw;}
#hero-img {max-width: 94%; padding-top: 20px;}
}
@media only screen and (orientation: landscape) and (min-width: 361px) and (max-width: 480px){
#bdy-hme #lgo {left: 3%; top: 15px; width: 35%; max-width: 135px;}
#hero {height: auto !important;}
#hero-txt {padding-top: 10vh;}
#hero-tag {font-size: 3.75vw;}
h1 {font-size: 3vw; padding: 0 0 1.5em;}
p#h2-sub {font-size: 3.5vw;}
#hero-img {max-width: 94%; padding-top: 25px;}
}


@media only screen and (orientation: portrait) and (min-width: 481px) and (max-width: 600px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 35%; max-width: 130px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 15vh;}
#hero-tag {font-size: 5vw; max-width: 250px;}
h1 {font-size: 4vw; max-width: 350px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 3.5vw;}
}
/* landscape */
@media only screen and (orientation: landscape) and (min-width: 481px) and (max-width: 600px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 30%; max-width: 130px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 20vh;}
#hero-tag span {display: block;}
#hero-tag {font-size: 4vw;}
h1 {font-size: 4vw; max-width: 250px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 3.5vw; max-width: 350px;}
.wave-homehero svg {display: none;}
}


@media only screen and (orientation: portrait) and (min-width: 601px) and (max-width: 768px) {
#bdy-hme #lgo {left: 3%; top: 20px; width: 30%; max-width: 150px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12vh;}
#hero-tag {font-size: 4vw; max-width: 250px;}
h1 {font-size: 3.5vw; max-width: 400px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 3vw; max-width: 600px;}
}
@media only screen and (orientation: landscape) and (min-width: 601px) and (max-width: 768px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 20%; max-width: 150px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 15vh;}
#hero-tag {font-size: 4vw; max-width: 250px;}
h1 {font-size: 3vw; max-width: 350px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 3vw;}
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 20%; max-width: 160px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12vh;}
#hero-tag {font-size: 3.25vw;}
h1 {font-size: 3vw; max-width: 400px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 2.5vw;}
#hero-img {max-width: 85%;}
}
/* LANDSCAPE */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 550px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 25%; max-width: 160px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12vh;}
#hero-tag {font-size: 3vw;}
h1 {font-size: 2.5vw; padding: 0 0 1.5em;}
}


@media only screen and (min-width: 1025px) and (max-width: 1440px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 25%; max-width: 200px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12vh;}
#hero-tag {font-size: 3.25vw;}
h1 {font-size: 2.25vw; max-width: 600px; padding: 0 0 1.5em;}
p#h2-sub {font-size: 2vw;}
}
/* LANDSCAPE */
@media only screen and (min-width: 1025px) and (max-width: 1440px) and (max-height: 550px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 25%; max-width: 200px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 14.5vh;}
#hero-tag {font-size: 2.5vw;}
h1 {font-size: 2vw; padding: 0 0 1.5em;}
p#h2-sub {font-size: 1.75vw;}
#hero-img {max-width: 70%;}
}


@media only screen and (min-width: 1441px) and (max-width: 1680px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 25%; max-width: 220px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12vh;}
#hero-tag {font-size: 2.5vw;}
h1 {font-size: 2vw; padding: 0 0 1.5em;}
p#h2-sub {font-size: 1.75vw;}
}
/* LANDSCAPE */
@media only screen and (min-width: 1441px) and (max-width: 1680px) and (max-height: 550px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 25%; max-width: 220px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12.5vh;}
#hero-tag {font-size: 2.25vw;}
h1 {font-size: 1.75vw; padding: 0 0 1.5em;}
p#h2-sub {font-size: 1.75vw;}
}


@media only screen and (min-width: 1681px) and (max-width: 2560px) {
#bdy-hme #lgo {left: 5%; top: 30px; width: 20%; max-width: 250px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 12.5vh;}
#hero-tag {font-size: 2.25vw;}
h1 {font-size: 1.75vw; padding: 0 0 1.5em;}
h2.h2-std, h3.h3-std  {font-size: 2em;}
p#h2-sub {font-size: 1.25vw;}
p#h2-sub2 {font-size: 1.1111rem;}
}
/* LANDSCAPE */
@media only screen and (min-width: 1681px) and (max-width: 2560px) and (max-height: 640px) {
#bdy-hme #lgo {left: 3%; top: 15px; width: 20%; max-width: 200px;}
#hero-txt, #hero-img {align-self: flex-end;}
#hero-txt {padding-top: 14vh;}
#hero-tag {font-size: 2vw;}
h1 {font-size: 1.5vw; padding: 0 0 1.5em;}
h2.h2-std, h3.h3-std  {font-size: 2em;}
p#h2-sub {font-size: 1.25vw;}
p#h2-sub2 {font-size: 1.1111rem;}
}

/* circle arrow down */
@media only screen and (max-height: 720px), (max-width: 768px) {#btn-wrap {display: none;}}
#btn-to-content {display: block; width: 60px; height: 60px; margin: 0 auto; text-decoration: none; color: #b11116;}
#btn-to-content:hover {color: #1457a3;}
/*#btn-to-content:focus {outline: 3px solid #0ea5e9; text-decoration: none;}*/
#btn-to-content .fa-circle-arrow-down {width: 45px; height: 45px; }
#btn-to-content .icn {width: 45px; height: 45px;}

/* ************* SECTION #2 *************  */
#content {padding-bottom: 40px;}
@media only screen and (min-width: 0px) and (max-width: 768px) {#content {padding-top: 20px;}}
@media only screen and (min-width: 769px) and (max-width: 1299px) {#content {padding: 45px 25px;}}
@media only screen and (min-width: 1300px) and (max-width: 3000px) {#content {padding: 45px 30px 65px;}}

#intro .col-50-pad20 {flex-basis: 480px;}

@media only screen and (min-width: 1025px) {#featured {margin-top: 35px;}}

@media only screen and (max-width: 468px){
#featured .col-25 {width: 50%;}
#ftrd-col-3, #ftrd-col-4, #ftrd-col-5 {display: none;}
}
@media only screen and (min-width: 469px) and (max-width: 810px){
#featured .col-25 {width: 33.333%;}
#ftrd-col-4, #ftrd-col-5 {display: none;}
}
#featured figure {margin: 0 auto;}

#ftrd-col-1 {z-index: 105; margin-right: -2%;}
#ftrd-col-2 {z-index: 104; margin-right: -2%; margin-top: 5px;}
#ftrd-col-3 {z-index: 103; margin-top: 10px;}
#ftrd-col-4 {z-index: 102; margin-left: -2%; margin-top: 15px;}
#ftrd-col-5 {z-index: 101; margin-left: -2%; margin-top: 20px;}

#work img {width: 100%; height: auto; border: 1px solid #ccc; transform: rotate(-3deg); 
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1), 2px 4px 4px rgba(0, 0, 0, 0.1), 4px 8px 8px rgba(0, 0, 0, 0.1);}

@media screen and (min-width:0px) and (max-width:768px) {
#intro.row-flx-wrap {-ms-flex-wrap: wrap; flex-wrap: wrap;}
#intro .col-50 {width: 100% !important; }
}

@media print {
.wave {display: none !important;}
.wdemax-700 {max-width: 6in;}
#bdy-hme #lgo {left: .5in; top: .25in; width: 25% !important; max-width: 1.5in !important;}
#hero-tag {font-size: 30pt; margin-top: .75in; max-width: 5.5in;}
h1 {font-size: 22pt; max-width: 5.5in;}
h2 {margin-top: .25in;}
h2, h3 {font-size: 20pt;}
p#h2-sub  {font-size: 18pt;}
#h2-txt, #h3-txt {font-size: 16pt;}
#hero-img {max-width: 6.5in;}
#hero-txt {padding-top: .75in;}
}