/*HOME*/

@media (min-width: 481px) {.bahome {padding-top: 0;}}

@media (max-width: 800px) and (min-width: 390px) {.bodyhead span {display: block;}}

/*-----------------------------------------------*/

.caption {position: absolute; color: #FFF; line-height: 1.1; text-align: center; width: auto; left: 0; right: 0;}
.caption1 {font-size: 60px; line-height: 1.2; font-weight: 600;}
.caption1 span {display: block; font-size: 100px; color: #ffdb60}
@media (max-width: 900px) {.caption1 {font-size: 6.5vw;} .caption1 span {font-size: 1.7em;}}

/*-----------------------------------------------*/

/*Service boxes*/

.blocks {table-layout: fixed; text-align: center; width: 100%; margin: auto; border-spacing: 3px; background-color: #ffdb60;}
.blocks td {/*width: 16.4%;*/ vertical-align: middle; /*display: inline-block;*/ text-align: center; margin: .25% .25% .25% 0; border-radius: 12px;}
.blocks td:last-child {margin-right: 0;}

.blocks td:nth-child(1) {background-color: #EB1500;} .blocks td:nth-child(2) {background-color: #D41300;}
.blocks td:nth-child(3) {background-color: #BA1000;} .blocks td:nth-child(4) {background-color: #A00E00;}
.blocks td:nth-child(5) {background-color: #850C00;} .blocks td:nth-child(6) {background-color: #6B0900;}

.blocks a {display: block; padding: 18px 0; text-decoration: none; box-sizing: border-box; transition: 0.2s;}
.blocks img {width: 80px; height: 80px; margin: 0 auto 12px auto; vertical-align: middle; transition: .15s;}
.blocks a:hover img {transform: scale(1.07);} .blocks a:hover h2 {color: #FFEA37;}

.blocks h2 {margin: 0 !important; font-size: 20px; line-height: 1.3; font-weight: 400; color: #FFF; text-decoration: none;}

@media (max-width: 1375px) and (min-width: 721px) {.blocks span {display: block;}}
@media (max-width: 1060px) {.blocks img {width: 80px; height: 80px;} .blocks h2 {font-size: 18px;}}
@media (max-width: 860px) {.blocks img {width: 65px; height: 65px;} .blocks h2 {font-size: 17px;} .blocks a {padding: 10px 0;}}
@media (min-width: 721px) {.blocks {white-space: nowrap;}}
@media (max-width: 720px) and (min-width: 381px) {
.blocks td {display: inline-block; width: 32.5%; margin: 1.5px;} .blocks td:nth-child(3) {margin-right: 0;}
}
@media (max-width: 555px) and (min-width: 381px) {.blocks span {display: block;} .blocks img {width: 70px; height: 70px;}}
@media (max-width: 380px) {
.blocks td {display: block; width: auto; text-align: left; margin: 2px;}
.blocks h2 {display: inline-block; padding-left: 10px; font-size: 17px;}
.blocks a {padding: 12px 0 7px 18%;} .blocks img {width: 40px; height: 40px; margin: 0 auto 5px auto;}
}
@media (max-width: 330px) {.blocks a {padding: 12px 0 7px 12%;}}

/*----------------------------------------------*/


/*How I'm Different*/

#howim {margin: auto;}
#howim th {padding: 10px; font-size: 1.1em; line-height: 1.3; font-weight: 600; color: #FFF; border-radius: 7px;}
#howim td {vertical-align: top; padding: 20px; border-radius: 7px; width: 50%;}

#howim tr td:first-child {background-color: #efccc6;} #howim tr th:first-child {background-color: #CD2327;}
#howim tr td:last-child {background-color: #C2E3AC;} #howim tr th:last-child {background-color: #0B6F00;}

#howim tr td:before {content: ""; background: url(images/thumbs.png); display: inline-block; float: left; width: 49px; height: 49px; background-repeat: no-repeat; margin: 0 15px 5px 0;}
#howim tr td:first-child:before {background-position: -49px 0;} #howim tr td:last-child:before {background-position: 0 0;}

#howim td div:nth-child(2) {position: relative; font-size: 1.1em; line-height: 1.4; font-weight: 500; display: table;}
#howim tr td:first-child div:nth-child(2) {color: #CD2327;} #howim tr td:last-child div:nth-child(2) {color: #0B6F00;}

#howim td div {display: table; font-size: .9em; line-height: 1.45;} #howim td div:last-child {margin-left: 65px;}

@media (max-width: 730px) {
#howim td div {width: 100%; text-align: center;}
#howim tr td:before {float: none; display: block; margin: 0 auto 10px auto;} #howim td div:last-child {margin: 10px 0;}
#howim td div:nth-child(2) {font-size: 1.25em; line-height: 1.3; padding-top: 5px;} #howim td div:nth-child(3) {width: 100%;}
}
@media (max-width: 540px) and (min-width: 441px) {#howim td {padding: 15px 15px 10px 15px;}}
@media (max-width: 440px) {
#howim td {display: block; padding-bottom: 10px; width: auto;} #howim th {display: none;} #howim td {position: relative;}
#howim td span:before {position: absolute; display: block; width: 100%; text-align: center; left: 0; right: 0; font-size: 1.1em; font-weight: 500; padding: 4px 0; color: #FFF;}
#howim tr td:first-child {border-radius: 7px 7px 0 0;}
#howim td:first-child span:before {content: "THEM"; top: 0; background-color: #CD2327; border-radius: 7px 7px 0 0;}
#howim td:last-child span:before {content: "T. Brooks Web Design LLC"; top: -1px; background-color: #0B6F00; white-space: nowrap;}
#howim td:last-child {margin-top: -3px !important;}
#howim tr td:before {margin-top: 40px;} #howim td div:nth-child(2) {font-size: 1.2em;}
#howim th, #howim td {border-left: 0; border-right: 0;} #howim td:last-child {margin-bottom: 20px;}
}
@media (max-width: 335px) {#howim td:last-child span:before {font-size: 1em;}}

/*-----------------------------------------------*/

/*FAQ*/

details {padding: 5px 5px 0; margin-top: 20px;}
summary {margin: -5px -5px 0; padding: 6px 20px 6px 15px; color: #FFF; border-radius: 4px; transition: .15s; list-style: none; cursor: pointer; outline: none;}
summary h4 {width: calc(100% - 25px); vertical-align: top; display: inline-block; font-size: 1em; line-height: 1.5; font-weight: 400;}
details div {padding: 3px 15px 13px 33px; font-size: .9em; background-color: #FEE9A8;}
details[open] {border-radius: 6px; margin-bottom: 20px; background-color: #FEE9A8;}
details[open] summary {margin-bottom: 10px; background-color: #EA1500; border-radius: 4px 4px 0 0;}
summary:hover {background-color: #EA1500;}
/*to hide default arrow on older browsers:*/ details summary::-webkit-details-marker {display:none;}

/*arrows*/
details summary:before {content:"\276F"; color: yellow; display: inline-block; transition:.4s; margin-right: 12px; line-height: 1;}
details[open] summary:before {transform: rotate(450deg); transition-timing-function: ease; color: #FF0;}

.faqhead {text-align: center; margin-bottom: 25px; padding: 0 25px 15px 25px; font-size: 32px; line-height: 1.35; font-weight: 600; color: #b8cf4f;}

/*-----------------------------------------------*/

/*Reviews on home page*/

.reviews-section {padding: 60px 30px !important; background-color: #DDD;}

.reviews-head {max-width: 800px; margin: 0 auto 20px auto; padding: 0 20px; text-align: center;}
.reviews-head .eyebrow {margin-bottom: 8px; font-size: 14px; letter-spacing: 4px; color: #616161; font-weight: 600;}

.reviews-head .whatsay {margin: 0 0 12px 0; font-size: 40px; line-height: 1.2; font-weight: 500; color: inherit;}
@media (max-width: 900px) {.reviews-head .whatsay {font-size: 35px;}}
@media (max-width: 600px) {.reviews-head .whatsay {font-size: 30px;}}

.reviews-head p {margin: 0; font-size: 18px; line-height: 1.5; color: #555;}

.reviews-carousel {max-width: 1400px; margin: 0 auto; position: relative; z-index: 0;}

.reviews-window {position: relative; overflow: hidden; padding: 25px 70px 35px 70px; cursor: grab; touch-action: pan-y; z-index: 1;}
.reviews-window,.reviews-window * {user-select: none; -webkit-user-select: none;}
.reviews-window.is-dragging {cursor: grabbing;} .reviews-window.is-dragging .reviews-track {transition: none;}

.reviews-track {display: flex; transition: transform .6s ease-in-out;}
.reviews-track.quick-slide {transition: transform .25s ease-out;}

.review-card {flex: 0 0 calc((100% - 40px) / 3); box-sizing: border-box; padding: 32px; background: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.10); margin-right: 20px;}
.review-card:last-child {margin-right: 0;}
/*.review-card span {display: block; margin: 0 0 8px 0; font-size: 22px; font-weight: 500; line-height: 1.2; color: #111827;}*/
.reviewer {margin: 0 0 8px 0; line-height: 1.2; color: #111827;}
.reviewer, .reviewer span {display: block;}
.reviewer span:first-child {font-size: 16px; margin-bottom: 5px;}
.reviewer span:last-child {font-size: 22px; font-weight: 500;}

.stars {margin-bottom: 22px; font-size: 24px; letter-spacing: 3px; color: #FFC506; line-height: 1;}

.review-card p {margin: 0; font-size: 15px; line-height: 1.6; color: #222;}

.review-arrow {position: absolute; top: 50%; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; transform: translateY(-50%); background: #fff; color: #111827; box-shadow: 0 8px 22px rgba(0,0,0,.14); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 34px; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; z-index: 2; border: 2px solid #CCC;} /*outline doesn't work in old Safari*/
.review-arrow.is-hidden {visibility: hidden; opacity: 0; pointer-events: none;}
.review-arrow-left {left: 10px;}
.review-arrow-right {right: 10px;}
.review-arrow:hover {background: #F2F2F2;}

.review-dots {display: flex; justify-content: center; margin-top: 5px;}
.review-dots button {display: block; margin: 0 6px; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: #9A1000; cursor: pointer; appearance: none; -webkit-appearance: none;}
.review-dots button.active {background: #EA1500;}

@media (max-width: 1270px) {.reviews-window {padding: 25px 60px 35px 60px;} .review-card {flex: 0 0 calc((100% - 20px) / 2);}}
@media (max-width: 830px) {.review-card {padding: 22px;}}
@media (max-width: 800px) {
.reviews-section {padding: 45px 15px;}
.reviews-window {padding: 25px 48px 35px 48px;}
.review-card {flex: 0 0 100%; margin-right: 20px; padding: 26px 22px;}
.review-arrow {width: 42px; height: 42px; font-size: 28px;}
.review-arrow-left {left: 8px;} .review-arrow-right {right: 8px;}
}

@media (max-width: 400px) {
.review-card {height: 360px; overflow: hidden;}
.review-card p {max-height: 210px; overflow-y: scroll; overflow-x: hidden; background-attachment: local, scroll, scroll; scrollbar-width: auto; scrollbar-color: #999 #F2F2F2;padding-right: 10px;}
}

#morervws {margin: 30px auto 0 auto; text-align: center;}
#morervws a {font-size: 20px; font-weight: 400; padding: 0 15px; color: #006B82;}


/*-----------------------------------------------*/

/*Areas Served*/

details.places {padding: 0; margin: 20px 0 10px 0;}
summary.places {margin: 0; padding: 6px 0 0 0; color: inherit; border-radius: 0;}
summary.places section {width: calc(95% - 30px); padding-left: 4px; vertical-align: top; display: inline-block; font-size: 1em; line-height: 1.5;}
details.places div {padding: 10px 0 20px 0; font-size: .75em; line-height: 1.4; background-color: inherit;}
details.places[open] {border-radius: 0; margin-bottom: 0; background-color: inherit;}
details.places[open] summary.places {margin-bottom: 10px; background-color: inherit; border-radius: 0;}
summary.places:hover {background-color: inherit;}
/*to hide default arrow on older browsers:*/ details.places summary.places::-webkit-details-marker {display:none;}

/*arrow*/
details.places summary.places:before {content: "\276F"; width: 20px; text-align: center; padding: 0 0 2px 0; font-size: 28px; transition: 0s; line-height: 1; vertical-align: middle; color: green;}
details.places[open] summary.places:before {color: inherit;}
details[open] summary.places:before {content: "\1F5D9"; color: #F00 !important; text-align: left; line-height: 1; transform: none; vertical-align: middle; padding-bottom: 6px; transition-timing-function: none;}
details[open] summary.places section u {text-decoration: none;}

/*-----------------------------------------------*/