/*
body::after { pointer-events:none; content: url(/theme/images/layout.jpg); position: absolute; top: 0; left: 50%; transform: translate(-50%); z-index: 1; opacity: .15; font-family:Roboto; }
    */
.btn, a.btn { border: 2px solid #fff; border-radius: 25px; padding:12px 24px; font-size: 16.25px; text-transform:uppercase; }
a.btn:hover { border: 2px solid #fff; }
.end-0 {  position: absolute; right: 0; }
.t24 .btn, 
.t24 a.btn { min-width: 224px; }

.t24 .scroller { overflow: hidden; position: relative; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.t24 .scroller::-webkit-scrollbar { display: none; }
.t24 .scroller.user-control { overflow: auto; }
.t24 .scroller .scroll-content { white-space:nowrap; min-height:320px; }
.t24 .scroller .scroll-content .content { position:absolute; top:0; min-height:200px; transition:opacity 1s linear; }
.t24 .scroller .scroll-content .content:not(.active) { opacity:0; }

.t24 .stat { font-size:4.3vw; padding: 2.5vw 2.5vw 3vw 4.5vw; margin:1vw 0 1vw; border-left:solid 2px #CCCCCC; color:#53575A; font-family:'urw-din-condensed'; font-weight:500; letter-spacing:.05em; }
.t24 .stat.left { border-left:solid 0 #CCCCCC; }
.t24 .stat strong { font-weight:900; }
 
.t24 .video-img-container { width:50vw; margin-bottom: 4vw; position:relative; }
.t24 .video-img-container:first-of-type { margin-top:4vw; }
.t24 .video-img-container img{ position:relative; left:0; display:block;}

.t24 .step { text-align: center; color: #fff; margin-top: 15px; padding: 28px 0; position: relative; font-size: 25px; letter-spacing: 3px }
.t24 .step:not(.no-arrow)::after { content: " "; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 24px solid transparent; border-right: 24px solid transparent; border-top: 16px solid #fff; }
.t24 .step h4 { font-size: 24px; padding: 28px 0 14px; letter-spacing: 1px; margin-bottom: 0; }
.t24 .step h4 strong { margin: 8px; }
.t24 .step p { text-transform: uppercase; margin-bottom: 0px; }
.t24 .step .watch-vid { height: 100%; max-height:13vw;  }

.t24 .step.step1 { background-color: #FF8300; }
.t24 .step.step1 h4 { color: #9A3D15; }
.t24 .step.step2 { background-color: #C36BCB; }
.t24 .step.step2 h4 { color: #65386B; }
.t24 .step.step3 { background-color: #00A0DF; padding-bottom:37px; }
.t24 .step.step3 h4 { color: #005477; }
.t24 .step.step3 .btn { margin: 8px 12px; background-color: #005477; color: #40ccff; }
.t24 .step.step3 .btn:hover { color: #fff; }
.t24 .step.learn { background-color: #93D500; }
.t24 .step.learn h4 { color: #4B7132; }

.t24 .step.learn .arrow-divider { max-width:100%; }

.t24 .reviews { background: #fff; margin-top: 15px; color: #999999; }

.t24 .reviews .portrait { display:inline-block; width:100px; vertical-align:top;}
.t24 .reviews .portrait img { width: 100px; height: 100px; }
.t24 .reviews .info { display: inline-block; max-width: calc(100% - 120px);  font-size:20px; text-align:left; letter-spacing:0; }
.t24 .reviews .info .rating { text-align:left; }
.t24 .reviews .info .rating img { display: inline; width: 20px; height: 20px; }
.t24 .reviews .info .text { text-transform:none; }

.t24 .create-account { background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(18,159,218,1) 100%); }
.t24 .create-account .btn { margin: 8px 12px; background-color: #005477; color: #40ccff; }
.t24 .create-account .btn:hover { color: #fff; }

.t24 .disclaimer { color:#999999; letter-spacing:0; font-style:italic; }

.t24 .bg-row { margin-top:9vw;     font-family: roboto, arial; }
.t24 .bg-row.right{ margin-left:5vw; }
.t24 .bg-row.left{ margin-right:5vw; }
.t24 .headline-bg h3 { font-size: 6.75vw; padding: 5vw 0 5vw 10vw; letter-spacing:.07em; font-family:'urw-din-condensed'; color:white; font-weight:500; line-height:1.2; }
.t24 .bg-row.left .headline-bg h3 { padding: 5vw 0 5vw 15vw; }
.t24 .blue-bg { background-color:#40B8E7; padding:6vw 10vw; z-index:-1; color:white; font-size:4.5vw; line-height:10vw; }        
.t24 .blue.headline-bg { background-color:#1180AF; min-height:19vw; width:100%; }
.t24 .row .blue.headline-bg { border-top-left-radius:15px; }
.t24 .row .blue-bg { border-bottom-left-radius:15px; }
.t24 .orange-bg { background-color:#FF8300;  padding:6vw 15vw; z-index:-1; color:white; font-size:4.5vw; line-height:10vw; }
.t24 .orange.headline-bg { background-color:#E05F29; min-height:19vw; width:100%; }
.t24 .row .orange.headline-bg { border-top-right-radius:15px; }
.t24 .row .orange-bg { border-bottom-right-radius:15px; }
.t24 .green-bg { background-color:#7FD500;  padding:6vw 10vw; z-index:-1; color:white; font-size:4.5vw; line-height:10vw; }
.t24 .green.headline-bg { background-color:#6DA442; min-height:19vw; width:100%; }
.t24 .row .green.headline-bg { border-top-left-radius:15px; }
.t24 .row .green-bg { border-bottom-left-radius:15px; }
.t24 .purple-bg { background-color:#A25EB5;  padding:6vw 15vw; z-index:-1; color:white; font-size:4.5vw; line-height:10vw; }
.t24 .purple.headline-bg { background-color:#7F4A86; min-height:19vw; width:100%; }
.t24 .row .purple.headline-bg { border-top-right-radius:15px; }
.t24 .row .purple-bg { border-bottom-right-radius:15px; }

p.copy { margin:10vw 3vw; font-size:5vw; line-height:44px; font-family:Roboto; }
.benefits { max-height: 36vw; margin:2vw; }

@media only screen and (min-width: 576px) {
    .t24 .stat { font-size:24px; padding: 10px 15px 10px 25px; border-left:solid 2px #CCCCCC; margin:30px 0 15px; }
    .t24 .stat.left { border-left:solid 2px #CCCCCC; }

    .t24 .video-img-container { width:325px; margin-bottom: 30px; }
    .t24 .video-img-container:first-of-type { margin-top:30px; }
    

    .t24 .step h4 { font-size: 50px; padding: 24px 0 24px; line-height: 1em; }
    .t24 .step .watch-vid { max-height: 68px; }

    .t24 .bg-row { margin-top:40px; }
    .t24 .bg-row.right{ margin-left:20px; }
    .t24 .bg-row.left{ margin-right:20px; }
    .t24 .headline-bg h3 { font-size:35px; padding:20px 60px; }
    .t24 .bg-row.left .headline-bg h3 { padding:20px 80px; }
    .t24 .blue-bg { padding:40px 60px; font-size:22px; line-height:44px; }        
    .t24 .blue.headline-bg { min-height:82px; }
    .t24 .orange-bg { padding:40px 80px; font-size:22px; line-height:44px; }
    .t24 .orange.headline-bg { min-height:82px; }
    .t24 .green-bg { padding:40px 60px; font-size:22px; line-height:44px; }
    .t24 .green.headline-bg { min-height:82px; }
    .t24 .purple-bg { padding:40px 80px; font-size:22px; line-height:44px; }
    .t24 .purple.headline-bg { min-height:82px; }

    p.copy { margin:40px 0; font-size:24px; line-height:44px; }
    .benefits { max-height:160px;  }

}

@media only screen and (min-width: 768px) {
    .t24 .scroller .scroll-content { min-height:204.8px; }
    .t24 .scroller .scroll-content .content img { height:204.8px; }

    .btn, a.btn { padding:7.68px 15.36px; font-size: 10.4px; }

    .t24 .btn, 
    .t24 a.btn { min-width: 144px; }

    .t24 .stat { font-size:16px; padding: 6.4px 9.6px 6.4px 16px; margin:19.2px 0 9.6px; }

    .t24 .step { padding: 22.4px; font-size: 33.2px; }
    .t24 .step h4 { font-size: 33.28px; padding: 15.36px 0 15.36px; letter-spacing: 1px; }
    .t24 .step h4.difference { font-size:29px;}
    .t24 .step.learn .arrow-divider { margin:12.8px 0 25.6px; }
    .t24 .step .watch-vid { max-height: 43.52px; }
    .t24 .step.step1 .vert-divider { width:2px; background-color:#9A3D15; height:64px; margin-top: 12.8px; }
    .t24 .step.step2 .vert-divider { width:2px; background-color:#592F5D; height:64px; margin-top: 12.8px; }

    .t24 .video-img-container { width:208px; text-align:center; margin-bottom: 0; }
    .t24 .video-img-container:first-of-type { margin-top:0; }
    .t24 .video-img-container img{ left:auto;  display:inline; }

    .t24 .bg-row { margin-top: 25.6px; }
    .t24 .bg-row.right{ margin-left:0; }
    .t24 .bg-row.left{ margin-right:0; }
    .t24 .headline-bg h3 { font-size: 25.6px; padding: 12.8px 38.4px; }
    .t24 .bg-row.left .headline-bg h3 { padding: 12.8px 38.4px; }
    .t24 .blue-bg { padding: 25.6px 38.4px; font-size: 14.08px; line-height: 28.16px; }
    .t24 .blue.headline-bg { min-height: 56.32px; }
    .t24 .orange-bg { padding: 25.6px 38.4px; font-size: 14.08px; line-height: 28.16px; }
    .t24 .orange.headline-bg { min-height: 56.32px; }
    .t24 .green-bg { padding: 25.6px 38.4px; font-size: 14.08px; line-height: 28.16px; }
    .t24 .green.headline-bg { min-height: 56.32px; }
    .t24 .purple-bg { padding: 25.6px 38.4px; font-size: 14.08px; line-height: 28.16px; }
    .t24 .purple.headline-bg { min-height: 56.32px; }

    p.copy { margin: 25.6px 0; font-size: 15.36px; line-height: 28.16px; }
     .benefits { max-height: 102.4px; margin: 25.6px 0; }
}

@media only screen and (max-width: 767px) {
    .t24 .scroller { height: 188px; }
    .t24 .scroller img { height: 188px; }   
}


@media only screen and (min-width: 992px) {
    .t24 .scroller .scroll-content { min-height:268.8px; }
    .t24 .scroller .scroll-content .content img { height:268.8px; }

    .btn, a.btn { padding:10.08px 20.16px; font-size: 13.65px; }
    .t24 .btn, 
    .t24 a.btn { min-width: 189px; }

    .t24 .stat { font-size:21px; padding: 8.4px 12.6px 8.4px 16px; margin:25.2px 0 12.6px; }

    .t24 .step { padding: 29.4px; font-size: 43.68px; }
    .t24 .step h4 { font-size: 43.68px; padding: 20.16px 0 20.16px; }
    .t24 .step h4.difference { font-size:38px;}
    .t24 .step.learn .arrow-divider { margin:16.8px 0 33.6px; }
    .t24 .step .watch-vid { width: 100%; max-height: 57.12px; }
    .t24 .step.step1 .vert-divider { height:84px; margin-top: 16.8px; }
    .t24 .step.step2 .vert-divider { height:84px; margin-top: 16.8px; }

    .t24 .video-img-container { width:273px; }

    .t24 .bg-row { margin-top: 33.6px; }
    .t24 .headline-bg h3 { font-size: 33.6px; padding: 16.8px 50.4px; }
    .t24 .bg-row.left .headline-bg h3 { padding: 16.8px 50.4px; }
    .t24 .blue-bg { padding: 33.6px 50.4px; font-size: 18.48px; line-height: 36.96px; }
    .t24 .blue.headline-bg { min-height: 73.92px; }
    .t24 .orange-bg { padding: 33.6px 50.4px; font-size: 18.48px; line-height: 36.96px; }
    .t24 .orange.headline-bg { min-height: 73.92px; }
    .t24 .green-bg { padding: 33.6px 50.4px; font-size: 18.48px; line-height: 36.96px; }
    .t24 .green.headline-bg { min-height: 73.92px; }
    .t24 .purple-bg { padding: 33.6px 50.4px; font-size: 18.48px; line-height: 36.96px; }
    .t24 .purple.headline-bg { min-height: 73.92px; }

    p.copy { margin: 33.6px 0; font-size: 20.16px; line-height: 36.96px; }
    .benefits { max-height: 134.4px; margin: 33.6px 0; }
}

@media only screen and (min-width: 1200px) {
    .t24 .scroller .scroll-content { min-height:320px; }
    .t24 .scroller .scroll-content .content img { height:320px; }

    .btn, a.btn { padding:12px 24px; font-size: 16.25px; }
    .t24 .btn, 
    .t24  a.btn { min-width: 224px; }

    .t24 .stat { font-size:25px; padding: 10px 15px 10px 25px; margin:30px 0 15px; }

    .t24 .step { padding: 35px; font-size: 52px; }
    .t24 .step h4 { font-size: 52px; padding: 24px 0 24px; }
    .t24 .step h4.difference { font-size:46px;}
    .t24 .step.learn .arrow-divider { margin:20px 0 40px; }
    .t24 .step .watch-vid { max-height: 68px; }
    .t24 .step.step1 .vert-divider { height:100px; margin-top: 20px; }
    .t24 .step.step2 .vert-divider { height:100px; margin-top: 20px; }
    .t24 .video-img-container { width:325px; }

    .t24 .bg-row { margin-top:40px; }
    .t24 .headline-bg h3 { font-size:40px; padding:20px 60px; }
    .t24 .bg-row.left .headline-bg h3 { padding:20px 60px; }
    .t24 .blue-bg { padding:40px 60px; font-size:22px; line-height:44px; }        
    .t24 .blue.headline-bg { min-height:88px; }
    .t24 .orange-bg { padding:40px 60px; font-size:22px; line-height:44px; }
    .t24 .orange.headline-bg { min-height:88px; }
    .t24 .green-bg { padding:40px 60px; font-size:22px; line-height:44px; }
    .t24 .green.headline-bg { min-height:88px; }
    .t24 .purple-bg { padding:40px 60px; font-size:22px; line-height:44px; }
    .t24 .purple.headline-bg { min-height:88px; }

    p.copy { margin:40px 0; font-size:24px; line-height:44px; }
    .benefits { max-height: 160px; margin:40px 0; }
    .benefits.md-top-margin { margin:20px 0 40px; }
}