/*************************************************
  This file is contains standard/default
   CSS classes for landing pages
*************************************************/
h1
{
   font-size: 4em;
   font-family: 'Teko-Bold', sans-serif;
   word-wrap: normal;
}
h2
{
   font-size: 3em;
   font-family: 'Teko-Medium', sans-serif;
   word-wrap: normal;
}
h3
{
   font-size: 2em;
   font-family: 'Teko-Medium', sans-serif;
   word-wrap: normal;
}

/* Green hyperlinks */
.style-anchor-green a:link, .style-anchor-green a:visited {
    color: #86c232;
	text-decoration: underline;
}
.style-anchor-green a:hover, .style-anchor-green a:focus {
    text-decoration: none;
}
/* White hyperlinks */
.style-anchor-white a:link, .style-anchor-white a:visited {
    color: #ffffff;
	text-decoration: underline;
}
.style-anchor-white a:hover, .style-anchor-white a:focus {
    text-decoration: none;
}

.style-white-text
{
  color: #ffffff;
}
.style-blue-text
{
  color: #3d5760;
}
.style-darkblue-text
{
  color: #122635;
}
.style-header-light
{
	font-family: 'Roboto-Light', sans-serif;
}

/* Style buttons */
.animate
{
  display: flex;
  justify-content: center;
}
.animate .btn
{
  background-color: #262626;
  border-radius: 1px;
  border: 1px solid #86C232;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Teko-Regular', sans-serif;
  font-size: 2rem;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 5px;
  padding-bottom: 2px;
  text-transform: uppercase;
}

.animate .btn:hover {
 background-color: #86C232; 
 color:#262626;
}

.sections
{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width:100%;
}

/* Boxes! */
.boxes{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  min-height:350px;
}

.boxes-text{
  margin-bottom: 20px;
  height: 100%;
}

.inner-item{
  display:flex;
  flex-direction:column;
  flex-basis: 456px;
  margin: 36px;
  padding: 56px;
  background-color: #F5F5F5;
}
.inner-item-narrow {
    flex-basis: 280px;
    padding: 36px;
}
.inner-item-blue
{
  background-color: #122635;
  opacity: .75;
}
/* End Boxes! */

/* Vertically align flex element */
.vertical-alignment
{
  align-items: center;
}

.body-txt-med
{
  font-size: 1.35em !important;
  line-height: 32px;
}

.body-txt-lrg
{
  font-size: 1.65em !important;
  line-height: 40px;
}

/* Reverse the left/right order of image and text */
.sort-order-2
{
  order: 2;
}
.sort-order-1
{
  order: 1;
}
.leftside-margin
{
  margin-left: 72px;
}
.rightside-margin
{
  margin-right: 72px;
}

/* Wrapper for boxes containing text above/below */
.wrapper-boxes-text
{
   margin-top: 100px;
   margin-bottom: 100px;
}
/*-------- Top Banner --------*/
.wrapper-hero
{
  padding: 120px 32px;
}

.main-hero-banner
{
  color: #ffffff;
  align-items: center;
}

.main-hero-banner h1
{
   font-family: 'Teko-Bold', sans-serif;
   text-align:center;
   margin: 30px 0px;
}

.main-hero-banner h2, .main-hero-banner h3
{
   font-family: 'Teko-Medium', sans-serif;
   text-align:center;
}
/* Class for the p elements */
.hero-tagline
{
   font-size: 1.35em !important;
   font-family: 'Roboto-Thin', sans-serif;
}

.main-hero-banner .leftbox
{
    max-width: 194px;
}

.main-hero-banner .rightbox
{
    width: 65%;
}
/* Verticle align title */
.inner-title-section
{
   display: flex;
   align-items: center;
}

/* Left justifies the title */
.innertitle
{
   display: flex;
}

/*------- Layout containg full width content -------*/
.wrapper-text-body
{
   margin-top: 100px;
   margin-bottom: 100px;
}

.content-text-body
{
   width: 78.75%;
}

/*------- Layout containg 1/3 and 2/3 content -------*/
.wrapper-imagetext
{
  margin-top: 100px;
  margin-bottom: 100px;
}
.wrapper-sections
{
  margin-top: 100px;
  margin-bottom: 100px;
}
/* Padding when using the module setting background color */
.wrapper-imagetext-inset
{
  padding-top: 100px;
  padding-bottom: 100px;
}
.wrapper-sections-inset
{
  padding-top: 100px;
  padding-bottom: 100px;
}

.imagetext-section .leftbox
{
  width: 27.75%;
  margin-left: 0px;
}

.imagetext-section .rightbox
{
  width: 51%;
}

.imagetext-section-small .rightbox
{
  width: 60%;
}

.imagetext-section-small .leftbox
{
  width: 18.75%;
  margin-left: 0px;
  min-width: 250px;
}

/* Default position of the image (left side of the text) */
.section-image
{
  margin-right: 72px;
}
/* Used when image is flipped to the right side of the text */
.section-image-flip
{
  margin-left: 72px;
}

/*------- Layout containg 1/2 and 1/2 content -------*/
.half-section .leftbox
{
  width: 39.375%;
}
.half-section .rightbox
{
  width: 39.375%;
}
.section-right-half
{
  margin-left: 36px;
}
.section-left-half
{
  margin-right: 36px;
}

/*========= Reverse/flip the order of section content =========*/
.section-reverse
{
	flex-direction: row-reverse;
}
/* Adjust margin when image is flipped to the right side */
.section-reverse .section-image
{
	margin-left: 36px;
	margin-right: 0px;
}
/* Adjust margin when text is flipped to the left side */
.section-reverse .section-imagetext-txt
{
	margin-left: 0px;
	margin-right: 36px;
}

.section-reverse .section-left-half
{
	margin-left: 36px;
	margin-right: 0px;
}
.section-reverse .section-right-half
{
	margin-left: 0px;
	margin-right: 36px;	
}

/*-------- Large call-to-action banner with button --------*/
.cta-banner
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 38px 0;
}

.inner-cta-text
{
  /*width: 69.56%;*/
  width: 68.623%;
  margin: 18px 0 18px 0;
}

.cta-banner h3
{
  font-family: 'Roboto-Thin', sans-serif;
  font-size: 1.8em;
  line-height: 40px;
  color: #ffffff;
  margin: 0px;
}

.inner-cta-btn
{
  /*display: flex;*/
  /*width: 8%;*/
  margin: 18px 18px 18px 18px;
}
/* Change color of button for CTA */
.inner-cta-btn .btn
{
  background-color: #A61E30;
  border: 1px solid #BF3B33;
}

.quote-section .animate
{
  margin: 32px 0;
}

/*-------- FAQ --------*/
.faq-q
{
  margin-left: 40px;
  margin-right: 40px;
}


/*************************
   Media Break Points
*************************/

@media (max-width: 1000px){
.imagetext-section .rightbox, .imagetext-section-small .rightbox, .main-hero-banner .rightbox, .half-section .rightbox, .half-section .leftbox
{
  width: 100%;
  margin: 18px 36px;
}

.imagetext-section .leftbox, .imagetext-section-small .leftbox
{
  width: 50%;
  margin: 18px 36px;
}
.content-text-body
{
  width: 100%;
  margin-left: 36px;
  margin-right: 36px;
}
.sort-order-2
{
  order: 1;
}
.sort-order-1
{
  order: 2;
}
.cta-banner
{
  flex-direction: column;
  align-items: center;
}
.section-image, .section-image-flip, .section-right-half, .section-left-half
{
  margin-left: 0px;
  margin-right: 0px;
}
.imagetext-txt
{
  margin: 32px 0px;
}


}
