h1 {color: black;}
h2 {color: #70002e;}
h3 {font-style: italic;
font-weight: bold;
font-size: 20pt;}
* {
  box-sizing: border-box;
}
.row {
	display: flex;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
  float: left;
  padding: 15px;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
.hr1{
border-top: solid 10px #70002e; 
margin-top: 10px;
}

/**
*===========================================
Table
============================================
***/
#table1 {
border-collapse: collapse;
width: 100%;
empty-cells: show;
table-layout: auto;

}

#table1 td, #table1 th {
border: 1px solid #000;
padding: 20px;
}
#table1 th {
text-align: left;
color: #70002e;	
font-size: 18px;

}
#table1 tr:nth-child(even){
background-color: #ebf5f7;	
}
#table1 caption {
text-align: left;
}

#table1 ul {
	vertical-align: top;
}

/***
=============================================
Coaching Tip boxes
=============================================
***/
.coachbox {
	text-align: left;
	border-left: 1px solid #bbdde6;
	border-right: 1px solid #bbdde6;
	border-bottom: 1px solid #bbdde6;
	}
.coachbox h2 {
	background-color: #bbdde6;
	padding: 12px 15px 7px 15px;
	margin: 0px;
	color: #70002e;
}
.coachbox p {
	padding: 0px 15px 0px 15px;	
}
.coachbox ul {
	padding: 0px 15px;
}
.coachbox2 {
	text-align: left;
	border-left: 1px solid #ED8B00;
	border-right: 1px solid #ED8B00;
	border-bottom: 1px solid #ED8B00;
	}
.coachbox2 h2 {
	background-color: #ED8B00;
	padding: 12px 15px 7px 15px;
	margin: 0px;
	color: #ffffff;
	font-weight: bold;
}
.coachbox2 p {
	padding: 0px 15px 0px 15px;	
}
.coachbox2 ul {
	padding: 0px 15px;
}

/***
============================================
Image left, textbox
============================================
***/
.img-float {
	float:left;
	padding: 25px;
	}

/*
*
* ==========================================
Accordion
* ==========================================
*
*/
.accordion2 {
	color: #000;
	}
.accordion2 details  {
	font-size: 115%;
	border: 2px solid #70002e;
}
.accordion2 summary {
	padding: 14px;
	font-size: 115%;
	border: 2px solid #70002e:
}
.accordion2 p {
	margin-left: 10px;
}

.accordion1 {
background-color: #fff;
cursor: pointer;
padding: 15px;
width: 100%;
text-align:left;
border: 2px solid #70002e;
margin-bottom: 25px;
transition: .4s;
}
.active, .accordion:hover {
  background-color: #ccc;
}
.panel {
  padding: 0 10px;
  background-color: white;
  display: none;
  overflow: hidden;
}

/*
*
* ==========================================
Specialized Section
* ==========================================
*
*/

/*activity boxes*/
.activitybox2 {
width: 100%;
background-color: #EFE8D4;
padding: 10px 20px 10px 20px;
margin-bottom: 30px;
}
.activitybox2 h2 {
	text-align: left;
	color: #70002e;
	
}

.activitybox {
width: 100%;
background-color: #EFE8D4;
padding: 10px 20px 10px 20px;
margin-bottom: 30px;
}

/*quote*/
.quote {
background-color:#fff; 
padding: .8rem;
overflow: auto;
margin: 0 0 2.5rem 2em;
text-align: left;
	
}
.quote p {
	text-align: left;
	font-size: 15pt;
	padding: 10px;
	border-left: 10px solid #ED8B00;
	margin-bottom: 0px;
}
.quote .author {
margin-top: 0px;
	text-align: left;
	font-size: 12pt;
	}
.quote author::before {
content: "\2014 ";	
}
.quote h4 {
	margin-top: 0px;
	text-align: right;
	font-size: 12 pt;
}


/*other*/
.indent {
margin-left: 30px;
}

.important {
background-color: #BBDDE6; 
text-align: center;
color: black;
font-size:28px; 
width: 100%;
}
.important2 {
	background-color: #c6e4dc;
	color: black;
	font-size:18px;
	width: 100%;
	padding: 20px;
	tex-align: left;
}


.item1 {
box-sizing: border-box;
background-color: #EFE8D4;
padding-bottom:20px; 
padding-top:20px; 
padding-left: 20px; 
padding-right: 20px;
text-align: left;
}



.item2 {
box-sizing: border-box;
background-color: #BBDDE6;
padding-bottom:20px; 
padding-top:20px; 
padding-left: 20px; 
padding-right: 20px;
text-align: left;
 }

.item3 {
background-color: #fff;
padding-bottom:20px; 
padding-top:20px; 
padding-left: 20px; 
padding-right: 20px;
text-align: left;
 }
 
.item4 {
background-color: #1D3C34;
padding-bottom:20px; 
padding-top:20px; 
padding-left: 20px; 
padding-right: 20px;
text-align: left;
color: white;
 }
.btn  {
border-style: none;
text-decoration: none;
}
.label1 {
border-top-style: solid;
border-bottom-style: solid;
border-top-color:  #ED8B00;
border-bottom-color:  #ED8B00;
border-top-width: 1px;
border-bottom-width: 1px;
background-color: #fff;
color: #ED8B00;
text-align: center;
font-size: 18px;
font-weight: bold;
padding-bottom:20px; 
padding-top:20px; 
padding-left: 20px; 
padding-right: 20px;
}
.row1 {
vertical-align: middle;
}
@media only screen and (min-width : 481px) {
   .flex-row.row {
	 display: flex;
	 flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
	 display: flex;
  }
  }
  
  /*
*
* ==========================================
* Timelines
* ==========================================
*
*/
.timeline1 {
  background-color: #474e5d;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline1::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: -25%;
}

/* Place the container to the right */
.right {
  left: 25%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}

/*
*
* ==========================================
* Columns
* ==========================================
*
*/

/* This is a 3 column container.  Each column will be no smaller than 200px. */


.col3 {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #2275C8;
}
/*
*
* ==========================================
* Meet the Instructors Page
* ==========================================
*
*/
/* Image with Header Two */

.imghead {
    display: flex;
    overflow: hidden;
}

.imghead grid-row {
    width: 100%;
}

.imghead col-xs-12 {
    margin-bottom: 10px;
}

.imghead col-xs-12 {
    background-color: #70002e;
    padding: 15px;
    border-bottom: 0px solid #ffffff;
}

.imghead h2 {
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

/* Instructor Row1 */
.instructor {
    margin-top: -10px;

    display: flex;
    overflow: hidden;
}
.instructor grid-row {
    width: 100%;
}
.instructor col-xs-12 col-md-12 col-lg-6 {
    margin-bottom: 10px;
    background-color: #dfd1a7;

    text-align: left;
    font-size: 14pt;
    padding: 20px;
color: #000000;
    font-weight: bold;
}
.instructor p{
    padding: 20px 30px;
    background-color: #f7f7f7;
    flex: auto;
}
.instructor img {
    float: left;
    padding: 10px;
}

.meetteam {
    display: flex;
    overflow: hidden;
}
.meetteam grid-row {
    width: 100%;
}
.meetteam col-xs-12 {
    margin-bottom: 10px;
background-color: #70002e;
    padding: 15px;
    border-bottom: 0px solid #ffffff;
}
.meetteam col-xs-12 h2 {
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 600px;
  height: 600px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/*
*
* ==========================================
* BUTTON HOVER EFFECTS
* ==========================================
*
*/

/* Fade */
.hover-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
  background-color: #008EE2;
  color: white;
}

/* Fade Red*/
.hover-fade-red {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade-red:hover, .hover-fade-red:focus, .hover-fade-red:active {
  background-color: #A63446;
  color: white;
}


/* Border Fade */
.hover-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px   rgb(255, 255, 255, 0.0), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
  box-shadow: inset 0 0 0 4px #008EE2, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Glow */
.hover-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


/* Shadow */
.hover-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
/*
* ==========================================
* PARALLAX
* ==========================================
*/

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }

/*
* ==========================================
* TEXT OVERLAY
* ==========================================
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
    text-align: center;
    position: relative;
}

/* Use this div to lighten an image and put dark text overlayed */
.overlay-lighten {
    opacity: 0.3;
  }
  
/* Use this div to darken an image and put light text overlayed */
    .overlay-darken {
    filter: brightness(50%);
  }

/* Use this class in a div, h2, or p to center the overlayed text */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.overlay-content {
  text-align: center;
  position: relative;
}

.overlay-lighten {
  opacity: 0.3;
  }
  
.overlay-darken {
filter: brightness(50%);
  }

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* SHADOWS */

/* List of shadows
*
* Basic Drop Shadow
* Offset Drop Shadow
* Drop Shadow Spread 5px
* One Edge Shadow
* Multi-box Color Shadows
*
*/

/* Basic Drop Shadow */
.shadow1 {
-moz-box-shadow: 0 0 10px;
-webkit-box-shadow: 0 0 10px;
box-shadow: 0 0 10px;
}

/* Offset Drop Shadow */
.shadow2 {
-moz-box-shadow: 5px 5px 10px;
-webkit-box-shadow: 5px 5px 10px;
box-shadow: 5px 5px 10px;
}

/* Video reponsive if needed */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Snapshot Casestudy Responsive box */
 .flex-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      align-items: flex-start;
      margin-bottom: 2rem;
    }

    .left-content {
      flex: 2;
      min-width: 300px;
      order: 2;
    }

    .right-content {
      flex: 1;
      min-width: 280px;
      max-width: 500px;
      order: 1;
    }

    @media (min-width: 768px) {
      .left-content {
        order: 1;
      }

      .right-content {
        order: 2;
      }
    }

    .card {
      background-color: #fff;
      border: 1px solid #dee2e6;
      border-radius: 0.375rem;
      overflow: hidden;
    }

    .card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .card-body {
      padding: 1.25rem;
    }

    .card-body h2 {
      margin: 0 0 0.75rem 0;
      font-size: 1.25rem;
      color: #70002e;
    }