callouts

- adding horizontal callouts
- fixing mobile styles for advanced callouts
- fixing basic page displays for advanced callouts

web/themes/asc_bootstrap/assets/sass/components/_paragraphs.scss

@@ -304,7 +304,27 @@
 
   @media (max-width: 768px) {
     display: block;
+
+
+    .col-xs-12.col-adv-call-mobile {
+      padding: 0;
+    }
+
   }
+
+}
+
+.adv-call-mobile-bl,
+.adv-call-mobile-bm,
+.adv-call-mobile-br {
+  background: $brand-lgray;
+}
+
+.paragraph__column .col-r.adv-call-mobile-br,
+.paragraph__column .col-m.adv-call-mobile-bm,
+.paragraph__column .col-l.adv-call-mobile-bl {
+  margin: 16px 0;
+  padding: 0;
 }
 
 .carousel.adv-callout-carousel {
@@ -356,6 +376,10 @@
     p, h2, h3, h4, h5, h6, a {
       color: $gray;
     }
+
+    @media (max-width: 768px) {
+      padding: 20px 15px 0;
+    }
   }
 
   .field--name-field-av-cb-link {
@@ -380,6 +404,7 @@
       text-align: center;
       position: relative;
       width: 100%;
+      padding: 15px;
     }
   }
 }
@@ -449,6 +474,92 @@
   background: $brand-lgray;
 }
 
+
+
+// ---------------------------------------------------
+
+//## Call Out Boxes - Horizontal
+
+.cb-h {
+  background: #EFF1F2;
+  float: left;
+  display: flex;
+  width: 100%;
+
+  .cb-h-l {
+    padding: 0;
+    flex:1;
+  }
+
+  .cb-h-r {
+    flex:1;
+
+    .field--name-field-cb-h-text {
+      padding: 25px 40px 25px 10px;
+
+      @media (max-width: 768px) {
+        padding: 0 0 20px;
+      }
+    }
+
+    .field--name-field-cb-h-button {
+      text-align: right;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      padding: 6px 0;
+
+      a {
+        color: $white;
+        background: $red-base;
+        padding: 10px;
+
+        @media (max-width: 768px) {
+          width: 100%;
+          display: block;
+        }
+      }
+
+      @media (max-width: 768px) {
+        text-align: center;
+        position: relative;
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+}
+
+.hor-arrows {
+
+  .control-l,
+  .control-r {
+    background: rgba(0,0,0,0.5);
+  }
+
+  @media (max-width: 768px) {
+    text-align: center;
+    margin-top: 10px;
+  }
+}
+
+.landing-page .carousel.hor-callout-carousel {
+  max-height: none;
+
+  @media (max-width: 768px) {
+    .carousel-inner {
+
+      .item {
+        flex-shrink: 1;
+      }
+    }
+  }
+}
+
+
 // ---------------------------------------------------
 
 //## Media

web/themes/asc_bootstrap/css/style.css

@@ -13213,62 +13213,87 @@ article.news-story {
   .carousel.adv-callout-mobile {
     display: block;
   }
+  /* line 309, ../assets/sass/components/_paragraphs.scss */
+  .carousel.adv-callout-mobile .col-xs-12.col-adv-call-mobile {
+    padding: 0;
+  }
+}
+
+/* line 317, ../assets/sass/components/_paragraphs.scss */
+.adv-call-mobile-bl,
+.adv-call-mobile-bm,
+.adv-call-mobile-br {
+  background: #F5F5F5;
+}
+
+/* line 323, ../assets/sass/components/_paragraphs.scss */
+.paragraph__column .col-r.adv-call-mobile-br,
+.paragraph__column .col-m.adv-call-mobile-bm,
+.paragraph__column .col-l.adv-call-mobile-bl {
+  margin: 16px 0;
+  padding: 0;
 }
 
-/* line 310, ../assets/sass/components/_paragraphs.scss */
+/* line 330, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel {
   margin: 30px 0;
   overflow: visible;
 }
-/* line 314, ../assets/sass/components/_paragraphs.scss */
+/* line 334, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel .row {
   display: flex;
 }
-/* line 317, ../assets/sass/components/_paragraphs.scss */
+/* line 337, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel .row .col-l {
   flex: 1;
   background: #F5F5F5;
   margin: 0 12px;
   padding: 0 0 30px;
 }
-/* line 324, ../assets/sass/components/_paragraphs.scss */
+/* line 344, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel .row .col-m {
   flex: 1;
   background: #F5F5F5;
   margin: 0 12px;
   padding: 0 0 30px;
 }
-/* line 331, ../assets/sass/components/_paragraphs.scss */
+/* line 351, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel .row .col-r {
   flex: 1;
   background: #F5F5F5;
   margin: 0 12px;
   padding: 0 0 30px;
 }
-/* line 339, ../assets/sass/components/_paragraphs.scss */
+/* line 359, ../assets/sass/components/_paragraphs.scss */
 .carousel.adv-callout-carousel .last-row {
   display: block;
 }
 @media (max-width: 768px) {
-  /* line 343, ../assets/sass/components/_paragraphs.scss */
+  /* line 363, ../assets/sass/components/_paragraphs.scss */
   .carousel.adv-callout-carousel .container {
     margin-bottom: 20px;
   }
 }
 
-/* line 350, ../assets/sass/components/_paragraphs.scss */
+/* line 370, ../assets/sass/components/_paragraphs.scss */
 .call-out-adv-container {
   padding-bottom: 9.5px;
 }
-/* line 353, ../assets/sass/components/_paragraphs.scss */
+/* line 373, ../assets/sass/components/_paragraphs.scss */
 .call-out-adv-container .field--name-field-av-cb-text {
   padding: 20px;
 }
-/* line 356, ../assets/sass/components/_paragraphs.scss */
+/* line 376, ../assets/sass/components/_paragraphs.scss */
 .call-out-adv-container .field--name-field-av-cb-text p, .call-out-adv-container .field--name-field-av-cb-text h2, .call-out-adv-container .field--name-field-av-cb-text h3, .call-out-adv-container .field--name-field-av-cb-text h4, .call-out-adv-container .field--name-field-av-cb-text h5, .call-out-adv-container .field--name-field-av-cb-text h6, .call-out-adv-container .field--name-field-av-cb-text a {
   color: #555555;
 }
-/* line 361, ../assets/sass/components/_paragraphs.scss */
+@media (max-width: 768px) {
+  /* line 373, ../assets/sass/components/_paragraphs.scss */
+  .call-out-adv-container .field--name-field-av-cb-text {
+    padding: 20px 15px 0;
+  }
+}
+/* line 385, ../assets/sass/components/_paragraphs.scss */
 .call-out-adv-container .field--name-field-av-cb-link {
   text-align: right;
   position: absolute;
@@ -13276,29 +13301,30 @@ article.news-story {
   bottom: 0;
   padding: 6px 0;
 }
-/* line 368, ../assets/sass/components/_paragraphs.scss */
+/* line 392, ../assets/sass/components/_paragraphs.scss */
 .call-out-adv-container .field--name-field-av-cb-link a {
   color: #ffffff;
   background: #bb0000;
   padding: 10px;
 }
 @media (max-width: 768px) {
-  /* line 368, ../assets/sass/components/_paragraphs.scss */
+  /* line 392, ../assets/sass/components/_paragraphs.scss */
   .call-out-adv-container .field--name-field-av-cb-link a {
     width: 100%;
     display: block;
   }
 }
 @media (max-width: 768px) {
-  /* line 361, ../assets/sass/components/_paragraphs.scss */
+  /* line 385, ../assets/sass/components/_paragraphs.scss */
   .call-out-adv-container .field--name-field-av-cb-link {
     text-align: center;
     position: relative;
     width: 100%;
+    padding: 15px;
   }
 }
 
-/* line 387, ../assets/sass/components/_paragraphs.scss */
+/* line 412, ../assets/sass/components/_paragraphs.scss */
 .control-l {
   position: absolute;
   left: 0;
@@ -13309,14 +13335,14 @@ article.news-story {
   width: 50px;
   border-radius: 0;
 }
-/* line 397, ../assets/sass/components/_paragraphs.scss */
+/* line 422, ../assets/sass/components/_paragraphs.scss */
 .control-l i {
   text-align: center;
   line-height: 75px;
   font-size: 2em;
 }
 @media (max-width: 768px) {
-  /* line 387, ../assets/sass/components/_paragraphs.scss */
+  /* line 412, ../assets/sass/components/_paragraphs.scss */
   .control-l {
     position: relative;
     bottom: 0;
@@ -13324,7 +13350,7 @@ article.news-story {
   }
 }
 
-/* line 410, ../assets/sass/components/_paragraphs.scss */
+/* line 435, ../assets/sass/components/_paragraphs.scss */
 .control-l.btn:hover,
 .control-l.btn:active,
 .control-l.btn:focus,
@@ -13332,7 +13358,7 @@ article.news-story {
   background: #999;
 }
 
-/* line 417, ../assets/sass/components/_paragraphs.scss */
+/* line 442, ../assets/sass/components/_paragraphs.scss */
 .control-r {
   position: absolute;
   right: 0;
@@ -13343,14 +13369,14 @@ article.news-story {
   width: 50px;
   border-radius: 0;
 }
-/* line 427, ../assets/sass/components/_paragraphs.scss */
+/* line 452, ../assets/sass/components/_paragraphs.scss */
 .control-r i {
   text-align: center;
   line-height: 75px;
   font-size: 2em;
 }
 @media (max-width: 768px) {
-  /* line 417, ../assets/sass/components/_paragraphs.scss */
+  /* line 442, ../assets/sass/components/_paragraphs.scss */
   .control-r {
     position: relative;
     bottom: 0;
@@ -13358,7 +13384,7 @@ article.news-story {
   }
 }
 
-/* line 440, ../assets/sass/components/_paragraphs.scss */
+/* line 465, ../assets/sass/components/_paragraphs.scss */
 .control-r.btn:hover,
 .control-r.btn:active,
 .control-r.btn:focus,
@@ -13366,26 +13392,112 @@ article.news-story {
   background: #999;
 }
 
-/* line 447, ../assets/sass/components/_paragraphs.scss */
+/* line 472, ../assets/sass/components/_paragraphs.scss */
 .landing-page .carousel .carousel-inner.adv-call-mob-inner {
   display: block;
   background: #F5F5F5;
 }
 
-/* line 459, ../assets/sass/components/_paragraphs.scss */
+/* line 483, ../assets/sass/components/_paragraphs.scss */
+.cb-h {
+  background: #EFF1F2;
+  float: left;
+  display: flex;
+  width: 100%;
+}
+/* line 489, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-l {
+  padding: 0;
+  flex: 1;
+}
+/* line 494, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r {
+  flex: 1;
+}
+/* line 497, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-text {
+  padding: 25px 40px 25px 10px;
+}
+@media (max-width: 768px) {
+  /* line 497, ../assets/sass/components/_paragraphs.scss */
+  .cb-h .cb-h-r .field--name-field-cb-h-text {
+    padding: 0 0 20px;
+  }
+}
+/* line 505, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-button {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 6px 0;
+}
+/* line 512, ../assets/sass/components/_paragraphs.scss */
+.cb-h .cb-h-r .field--name-field-cb-h-button a {
+  color: #ffffff;
+  background: #bb0000;
+  padding: 10px;
+}
+@media (max-width: 768px) {
+  /* line 512, ../assets/sass/components/_paragraphs.scss */
+  .cb-h .cb-h-r .field--name-field-cb-h-button a {
+    width: 100%;
+    display: block;
+  }
+}
+@media (max-width: 768px) {
+  /* line 505, ../assets/sass/components/_paragraphs.scss */
+  .cb-h .cb-h-r .field--name-field-cb-h-button {
+    text-align: center;
+    position: relative;
+    width: 100%;
+  }
+}
+@media (max-width: 768px) {
+  /* line 483, ../assets/sass/components/_paragraphs.scss */
+  .cb-h {
+    display: block;
+  }
+}
+
+/* line 538, ../assets/sass/components/_paragraphs.scss */
+.hor-arrows .control-l,
+.hor-arrows .control-r {
+  background: rgba(0, 0, 0, 0.5);
+}
+@media (max-width: 768px) {
+  /* line 536, ../assets/sass/components/_paragraphs.scss */
+  .hor-arrows {
+    text-align: center;
+    margin-top: 10px;
+  }
+}
+
+/* line 549, ../assets/sass/components/_paragraphs.scss */
+.landing-page .carousel.hor-callout-carousel {
+  max-height: none;
+}
+@media (max-width: 768px) {
+  /* line 555, ../assets/sass/components/_paragraphs.scss */
+  .landing-page .carousel.hor-callout-carousel .carousel-inner .item {
+    flex-shrink: 1;
+  }
+}
+
+/* line 570, ../assets/sass/components/_paragraphs.scss */
 .file .file-icon span {
   color: #bb0000;
 }
-/* line 466, ../assets/sass/components/_paragraphs.scss */
+/* line 577, ../assets/sass/components/_paragraphs.scss */
 .file .file-link a {
   color: #bb0000;
 }
-/* line 471, ../assets/sass/components/_paragraphs.scss */
+/* line 582, ../assets/sass/components/_paragraphs.scss */
 .file .file-size {
   color: #bb0000;
 }
 
-/* line 481, ../assets/sass/components/_paragraphs.scss */
+/* line 592, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container {
   width: 100%;
   position: absolute;
@@ -13396,12 +13508,12 @@ article.news-story {
   max-height: 550px;
 }
 @media (max-width: 768px) {
-  /* line 481, ../assets/sass/components/_paragraphs.scss */
+  /* line 592, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container {
     max-height: 100%;
   }
 }
-/* line 494, ../assets/sass/components/_paragraphs.scss */
+/* line 605, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt {
   background-color: rgba(255, 255, 255, 0.9);
   padding: 20px;
@@ -13413,7 +13525,7 @@ article.news-story {
   transform: perspective(1px) translateY(-50%);
 }
 @media (max-width: 768px) {
-  /* line 494, ../assets/sass/components/_paragraphs.scss */
+  /* line 605, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt {
     height: 100%;
     display: flex;
@@ -13421,11 +13533,11 @@ article.news-story {
     justify-content: center;
   }
 }
-/* line 511, ../assets/sass/components/_paragraphs.scss */
+/* line 622, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper {
   width: 100%;
 }
-/* line 514, ../assets/sass/components/_paragraphs.scss */
+/* line 625, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper h2 {
   font-size: 36px;
   text-transform: uppercase;
@@ -13434,36 +13546,36 @@ article.news-story {
   line-height: 1.1;
 }
 @media (max-width: 768px) {
-  /* line 514, ../assets/sass/components/_paragraphs.scss */
+  /* line 625, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt .slide-txt-wrapper h2 {
     font-size: 15px;
     margin-top: 0;
   }
 }
-/* line 527, ../assets/sass/components/_paragraphs.scss */
+/* line 638, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper p {
   font-size: 18px;
   margin: 25px 0;
   color: #333333;
 }
 @media (max-width: 768px) {
-  /* line 527, ../assets/sass/components/_paragraphs.scss */
+  /* line 638, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt .slide-txt-wrapper p {
     font-size: 14px;
     margin-top: 0;
   }
 }
-/* line 538, ../assets/sass/components/_paragraphs.scss */
+/* line 649, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn {
   white-space: normal;
 }
-/* line 542, ../assets/sass/components/_paragraphs.scss */
+/* line 653, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 {
   width: 100%;
   margin: 0 auto;
   font-size: 18px;
 }
-/* line 547, ../assets/sass/components/_paragraphs.scss */
+/* line 658, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
   min-width: 25%;
   margin: 10px;
@@ -13473,23 +13585,23 @@ article.news-story {
   text-transform: uppercase;
   padding: 5px;
 }
-/* line 556, ../assets/sass/components/_paragraphs.scss */
+/* line 667, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper .btn-primary {
   background-color: transparent;
   border-color: transparent;
   border: 0;
   border-radius: 0;
 }
-/* line 563, ../assets/sass/components/_paragraphs.scss */
+/* line 674, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper i {
   padding-top: 1px;
 }
-/* line 567, ../assets/sass/components/_paragraphs.scss */
+/* line 678, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper:hover {
   background: #8E0101;
 }
 @media (max-width: 768px) {
-  /* line 547, ../assets/sass/components/_paragraphs.scss */
+  /* line 658, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-wrapper {
     display: block;
     width: 100%;
@@ -13497,22 +13609,22 @@ article.news-story {
     font-weight: 700;
   }
 }
-/* line 579, ../assets/sass/components/_paragraphs.scss */
+/* line 690, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper {
   background: transparent;
   color: #4A4A4A;
 }
-/* line 583, ../assets/sass/components/_paragraphs.scss */
+/* line 694, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-20 .btn-fullw-wrapper:hover {
   background: transparent;
 }
-/* line 589, ../assets/sass/components/_paragraphs.scss */
+/* line 700, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 {
   width: 100%;
   margin: 0 auto;
   font-size: 18px;
 }
-/* line 594, ../assets/sass/components/_paragraphs.scss */
+/* line 705, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
   min-width: 40%;
   margin: 10px;
@@ -13522,23 +13634,23 @@ article.news-story {
   text-transform: uppercase;
   padding: 5px;
 }
-/* line 603, ../assets/sass/components/_paragraphs.scss */
+/* line 714, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper .btn-primary {
   background-color: transparent;
   border-color: transparent;
   border: 0;
   border-radius: 0;
 }
-/* line 610, ../assets/sass/components/_paragraphs.scss */
+/* line 721, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper i {
   padding-top: 1px;
 }
-/* line 614, ../assets/sass/components/_paragraphs.scss */
+/* line 725, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper:hover {
   background: #8E0101;
 }
 @media (max-width: 768px) {
-  /* line 594, ../assets/sass/components/_paragraphs.scss */
+  /* line 705, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-wrapper {
     display: block;
     width: 100%;
@@ -13546,22 +13658,22 @@ article.news-story {
     font-weight: 700;
   }
 }
-/* line 626, ../assets/sass/components/_paragraphs.scss */
+/* line 737, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper {
   background: transparent;
   color: #4A4A4A;
 }
-/* line 630, ../assets/sass/components/_paragraphs.scss */
+/* line 741, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-19 .btn-fullw-wrapper:hover {
   background: transparent;
 }
-/* line 636, ../assets/sass/components/_paragraphs.scss */
+/* line 747, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 {
   width: 100%;
   margin: 0 auto;
   font-size: 18px;
 }
-/* line 641, ../assets/sass/components/_paragraphs.scss */
+/* line 752, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
   min-width: 50%;
   margin: 10px;
@@ -13571,23 +13683,23 @@ article.news-story {
   text-transform: uppercase;
   padding: 5px;
 }
-/* line 650, ../assets/sass/components/_paragraphs.scss */
+/* line 761, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper .btn-primary {
   background-color: transparent;
   border-color: transparent;
   border: 0;
   border-radius: 0;
 }
-/* line 657, ../assets/sass/components/_paragraphs.scss */
+/* line 768, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper svg, .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper i {
   padding-top: 1px;
 }
-/* line 661, ../assets/sass/components/_paragraphs.scss */
+/* line 772, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper:hover {
   background: #8E0101;
 }
 @media (max-width: 768px) {
-  /* line 641, ../assets/sass/components/_paragraphs.scss */
+  /* line 752, ../assets/sass/components/_paragraphs.scss */
   .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-wrapper {
     display: block;
     width: 100%;
@@ -13595,46 +13707,46 @@ article.news-story {
     font-weight: 700;
   }
 }
-/* line 673, ../assets/sass/components/_paragraphs.scss */
+/* line 784, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper {
   background: transparent;
   color: #4A4A4A;
 }
-/* line 677, ../assets/sass/components/_paragraphs.scss */
+/* line 788, ../assets/sass/components/_paragraphs.scss */
 .slide-txt-container .slide-txt .slide-txt-wrapper .btn-links-18 .btn-fullw-wrapper:hover {
   background: transparent;
 }
 
-/* line 694, ../assets/sass/components/_paragraphs.scss */
+/* line 805, ../assets/sass/components/_paragraphs.scss */
 .paragraph--type--tagline {
   margin: 20px 0;
   float: left;
 }
 
-/* line 705, ../assets/sass/components/_paragraphs.scss */
+/* line 816, ../assets/sass/components/_paragraphs.scss */
 .paragraph--type--tabs .field {
   padding: 20px;
 }
-/* line 709, ../assets/sass/components/_paragraphs.scss */
+/* line 820, ../assets/sass/components/_paragraphs.scss */
 .paragraph--type--tabs .field--name-field-media-file {
   padding: 0;
 }
-/* line 713, ../assets/sass/components/_paragraphs.scss */
+/* line 824, ../assets/sass/components/_paragraphs.scss */
 .paragraph--type--tabs .field--name-field-media-image {
   padding: 20px 0;
 }
 
-/* line 724, ../assets/sass/components/_paragraphs.scss */
+/* line 835, ../assets/sass/components/_paragraphs.scss */
 .para_1_col .field--name-field-media-twitter {
   margin: 0 auto;
   width: 60%;
 }
-/* line 728, ../assets/sass/components/_paragraphs.scss */
+/* line 839, ../assets/sass/components/_paragraphs.scss */
 .para_1_col .field--name-field-media-twitter .col-xs-12 {
   padding: 0;
 }
 
-/* line 738, ../assets/sass/components/_paragraphs.scss */
+/* line 849, ../assets/sass/components/_paragraphs.scss */
 .paragraph--type--video iframe {
   width: 100% !important;
 }

web/themes/asc_bootstrap/templates/field/field--paragraph--field-cb-h-button--callout-box-horizontal.html.twig

+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @ingroup templates
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+{%
+  set title_classes = [
+    'field--label',
+    label_display == 'visually_hidden' ? 'sr-only',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field--items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field--item') }}>
+        <a href="{{ item.content['#url'] }}" title="{{ item.content['#options'].attributes.title }}">
+          {{ item.content['#title'] }} <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </a></div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field--items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field--item') }}>
+        <a href="{{ item.content['#url'] }}" title="{{ item.content['#options'].attributes.title }}">
+          {{ item.content['#title'] }} <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </a></div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/asc_bootstrap/templates/paragraph/paragraph--callout-box-horizontal.html.twig

+{#
+/**
+ * @file
+ * Custom Paragraph template for displaying a Horizontal Callout Box.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   - id: The paragraph ID.
+ *   - bundle: The type of the paragraph, for example, "image" or "text".
+ *   - authorid: The user ID of the paragraph author.
+ *   - createdtime: Formatted creation date. Preprocess functions can
+ *     reformat it by calling format_date() with the desired parameters on
+ *     $variables['paragraph']->getCreatedTime().
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ */
+#}
+
+<div class="cb-h">
+  <div class="col-xs-12 col-md-6 cb-h-l">
+    {{ content.field_cb_h_image }}
+  </div>
+  <div class="col-xs-12 col-md-6 cb-h-r">
+    {{ content.field_cb_h_text }}
+    {{ content.field_cb_h_button }}
+  </div>
+</div>

web/themes/asc_bootstrap/templates/paragraph/paragraph--column_one.html.twig

@@ -51,13 +51,53 @@
     {% if page_content_type == 'landing_page' %}
         <div class="container">
     {% endif %}
+
     {% set thecont = [] %}
+    {% set rand = random(56748) %}
+
       {% for item in content|without('field_column_style_2')|without('field_background_color') %}
         {% set thecont = thecont|merge(item) %}
       {% endfor %}
-    <div class="col-xs-12 col-f">
-      {{ thecont[0] }}
-    </div>
+
+      {% if thecont[0]['#paragraph'].type.target_id == 'callout_box_horizontal' %}
+
+        {% set contcount = thecont|length - 17 %}
+
+        <div id="carousel-{{ rand }}" class="carousel slide adv-callout-carousel hor-callout-carousel" data-ride="false" data-interval="0">
+          <div class="carousel-inner{% if contcount > 2 %} controls-spacing{% endif %}" role="listbox">
+
+          {% for item in thecont|slice(0, contcount) %}
+
+            <div class="item {% if loop.first %}active{% endif %}">
+              {{ thecont[loop.index0] }}
+            </div>
+
+          {% endfor %}
+
+          </div>
+
+          {% if contcount > 1 %}
+
+           <!-- Controls -->
+          <div class="col-6 text-right hor-arrows">
+            <a class="btn btn-primary mb-3 mr-1 control-l" href="#carousel-{{ rand }}" role="button" data-slide="prev">
+                <i class="fa fa-angle-left" aria-hidden="true"></i>
+            </a>
+            <a class="btn btn-primary mb-3 control-r" href="#carousel-{{ rand }}" role="button" data-slide="next">
+                <i class="fa fa-angle-right" aria-hidden="true"></i>
+            </a>
+          </div>
+
+        {% endif %}
+
+        </div>
+
+      {% else %}
+        <div class="col-xs-12 col-f">
+          {{ thecont[0] }}
+        </div>
+      {% endif %}
+
     {% if page_content_type == 'landing_page' %}
         </div>
     {% endif %}

web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_four.html.twig

@@ -76,17 +76,14 @@
   {% set contcount = thecont|length - 17 %}
 
   <div id="carousel-mobile-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-mobile" data-ride="false" data-interval="0">
-
 {% if page_content_type == 'landing_page' %}
     <div class="container">
-{% endif %}
-
       <div class="carousel-inner adv-call-mob-inner" role="listbox">
 
       {% for item in thecont|slice(0, contcount) %}
           <div class="item {% if loop.first %}active{% endif %}">
 
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-adv-call-mobile">
               <div class="card">
                 {{ thecont[loop.index0] }}
               </div>
@@ -94,12 +91,28 @@
 
           </div>
         {% endfor %}
+{% endif %}
+{% if page_content_type == 'page' %}
+  <div class="{{ leftwidth }} col-l adv-call-mobile-bl">
+      {{ thecont[0] }}
+    </div>
 
-      </div>
+    <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+      {{ thecont[1] }}
+    </div>
 
-{% if page_content_type == 'landing_page' %}
+    <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+      {{ thecont[2] }}
+    </div>
+
+    <div class="{{ rightwidth }} col-r adv-call-mobile-br">
+      {{ thecont[3] }}
     </div>
 {% endif %}
+{% if page_content_type == 'landing_page' %}
+      </div>
+{% endif %}
+    </div>
 
 {% if page_content_type != 'page' %}
       <!-- Controls -->

web/themes/asc_bootstrap/templates/paragraph/paragraph--columns_three.html.twig

@@ -98,17 +98,14 @@
   {% set contcount = thecont|length - 17 %}
 
   <div id="carousel-mobile-{{ rand }}" class="carousel slide adv-callout-carousel adv-callout-mobile" data-ride="false" data-interval="0">
-
 {% if page_content_type == 'landing_page' %}
     <div class="container">
-{% endif %}
-
       <div class="carousel-inner adv-call-mob-inner" role="listbox">
 
       {% for item in thecont|slice(0, contcount) %}
           <div class="item {% if loop.first %}active{% endif %}">
 
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-adv-call-mobile">
               <div class="card">
                 {{ thecont[loop.index0] }}
               </div>
@@ -116,12 +113,24 @@
 
           </div>
         {% endfor %}
+{% endif %}
+{% if page_content_type == 'page' %}
+  <div class="{{ leftwidth }} col-l adv-call-mobile-bl">
+      {{ thecont[0] }}
+    </div>
 
-      </div>
+    <div class="{{ middlewidth }} col-m adv-call-mobile-bm">
+      {{ thecont[1] }}
+    </div>
 
-{% if page_content_type == 'landing_page' %}
+    <div class="{{ rightwidth }} col-r adv-call-mobile-br">
+      {{ thecont[2] }}
     </div>
 {% endif %}
+{% if page_content_type == 'landing_page' %}
+      </div>
+{% endif %}
+    </div>
 
 {% if page_content_type != 'page' %}
       <!-- Controls -->