/* Data organized into columns in pages, responsive layouts */

/* ONE COLUMN */

.onecolumn-nomargin {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.onecolumn {
  width: 100%;
  max-width: 960px;
  margin: 50px auto !important;
}


.onecolumncenter {
  width: 100%;
  margin: 0 auto;
  float: left;
}

.onecolumn h1 {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}

.onecolumn h2 {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 2.3em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.onecolumn h3 {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}


.onecolumn p {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.onecolumn-nomargin h1 {
    font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}

.onecolumn-nomargin h2 {
    font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif;
    font-size: 2.3em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.onecolumn-nomargin h3 {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}


.onecolumn-nomargin p {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

                  /* Phones ----------- */
@media screen and (max-width: 320px){ .onecolumn { width: 98%; margin: 50px auto; } }
@media screen and (min-width: 321px) and (max-width: 480px){ .onecolumn { width: 98%; margin: 50px auto; } }
@media screen and (min-width: 481px) and (max-width: 650px){ .onecolumn { width: 98%; margin: 50px auto; } }
@media screen and (min-width: 651px) and (max-width: 768px){ .onecolumn { width: 98%; margin: 50px auto; } }
                  /* iPads ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .onecolumn { width: 98%; margin: 50px auto;} }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { }
                  /* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px){ }
                  /* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){ }
                  /* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){ }
                  /* Large screens ----------- */
@media screen and (min-width: 1500px){ }
@media screen and (min-width: 1600px){ }
@media screen and (min-width: 1700px){ }


/* TWO COLUMN */

.twocolumn {
  width: 100%;
  margin: 0 auto !important;
}

.twocolumn1 {
  width: 50%;
  float: left;
  margin: 0 auto !important;
  padding: 0;
}

.twocolumn2 {
  width: 50%;
  float: left;
  margin: 0 auto !important;
  padding: 0;
}

.twocolumntext {
  width: 100%;
  padding: 0 5%;
}

.twocolumn1 h1 {
   font-family: 'Quicksand',Helvetica, Arial, sans-serif;
   font-size: 1.8em;
   line-height: 1.2em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.twocolumn1 p {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.twocolumn2 h1 {
   font-family: 'Quicksand',Helvetica, Arial, sans-serif;
   font-size: 1.8em;
   line-height: 1.2em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.twocolumn2 p {
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.twocolumntext h2 {
    color: #3b4863;
    font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif;
    font-size: 2.3em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.twocolumntext h3 {
    color: #3b4863;
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
  
                  /* Phones ----------- */
@media screen and (max-width: 320px){ .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 100%; padding: 0 0 0 10px;} .twocolumn2 { width: 100%; padding: 0 0 0 10px;} }
@media screen and (min-width: 321px) and (max-width: 480px){ .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 100%; padding: 0;} .twocolumn2 { width: 100%; padding: 0;} }
@media screen and (min-width: 481px) and (max-width: 650px){ .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 100%; padding: 0;} .twocolumn2 { width: 100%; padding: 0;} }
@media screen and (min-width: 651px) and (max-width: 768px){ .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 100%; padding: 0;} .twocolumn2 { width: 100%; padding: 0;} }
                  /* iPads ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 50%;} .twocolumn2 { width: 50%;} }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 50%;} .twocolumn2 { width: 50%;} }
                  /* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px) { .twocolumn { width: 100%; float: left; margin: 0 auto;} .twocolumn1 { width: 50%;} .twocolumn2 { width: 50%;} }
                  /* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){ }
                  /* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){ }
                  /* Large screens ----------- */
@media screen and (min-width: 1500px){ }
@media screen and (min-width: 1600px){ }
@media screen and (min-width: 1700px){ }




/* THREE COLUMN */

.threecolumn {
  width: 100%;
  max-width: 960px;
  float: left;
  margin: 0 auto;
}

.threecolumn1 {
  width: 33%;
  float: left;
  margin: 0 auto;
}

.threecolumn2 {
  width: 33%;
  float: left;
  margin: 0 auto;
}

.threecolumn3 {
  width: 33%;
  float: left;
  margin: 0 auto;
}
                  /* Phones ----------- */
@media screen and (max-width: 320px){ .threecolumn { width: 95%; float: left; margin: 0 auto;} .threecolumn1 { width: 98%; margin: 25px auto;} .threecolumn2 { width: 98%; margin: 25px auto;} .threecolumn3 { width: 98%; margin: 25px auto;} }
@media screen and (min-width: 321px) and (max-width: 480px){ .threecolumn { width: 95%; float: left; margin: 25px auto;} .threecolumn1 { width: 98%; margin: 25px 0; } .threecolumn2 { width: 98%; margin: 25px 0; } .threecolumn3 { width: 98%; margin: 25px 0; } }
@media screen and (min-width: 481px) and (max-width: 650px){ .threecolumn { width: 95%; float: left; margin: 25px auto;} .threecolumn1 { width: 98%; margin: 25px 0; } .threecolumn2 { width: 98%; margin: 25px 0; } .threecolumn3 { width: 98%; margin: 25px 0; } }
@media screen and (min-width: 651px) and (max-width: 768px){ .threecolumn { width: 95%; float: left; margin: 25px auto;} .threecolumn1 { width: 98%; margin: 25px 0; } .threecolumn2 { width: 98%; margin: 25px 0; } .threecolumn3 { width: 98%; margin: 25px 0; } }
                  /* iPads ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .threecolumn { width: 95%; float: left; margin: 0 auto;} .threecolumn1 { width: 98%;} .threecolumn2 { width: 98%;} .threecolumn3 { width: 98%;} }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
                  /* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px){ }
                  /* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){ }
                  /* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){ }
                  /* Large screens ----------- */
@media screen and (min-width: 1500px){ }
@media screen and (min-width: 1600px){ }
@media screen and (min-width: 1700px){ }



/* FOUR COLUMN */

.fourcolumn {
  width: 100%;
  float: left;
  margin: 0 auto;
}

.fourcolumn h2 {
    color: #3b4863;
    font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif;
    font-size: 2.3em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.fourcolumn h3 {
    color: #3b4863;
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.fourcolumncenter {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.fourcolumn1 {
  width: 25%;
  float: left;
  margin: 0 auto;
}

.fourcolumn2 {
  width: 25%;
  float: left;
  margin: 0 auto;
}

.fourcolumn3 {
  width: 25%;
  float: left;
  margin: 0 auto;
}

.fourcolumn4 {
  width: 25%;
  float: left;
  margin: 0 auto;
}
                  /* Phones ----------- */
@media screen and (max-width: 320px){ .fourcolumn { width: 95%; float: left; margin: 0 auto;} .fourcolumn1 { width: 98%;} .fourcolumn2 { width: 98%;} .fourcolumn3 { width: 98%;} .fourcolumn4 { width: 98%;} }
@media screen and (min-width: 321px) and (max-width: 480px){ .fourcolumn { width: 95%; float: left; margin: 0 auto;} .fourcolumn1 { width: 98%;} .fourcolumn2 { width: 98%;} .fourcolumn3 { width: 98%;} .fourcolumn4 { width: 98%;} }
@media screen and (min-width: 481px) and (max-width: 650px){ .fourcolumn { width: 95%; float: left; margin: 0 auto;} .fourcolumn1 { width: 98%;} .fourcolumn2 { width: 98%;} .fourcolumn3 { width: 98%;} .fourcolumn4 { width: 98%;} }
@media screen and (min-width: 651px) and (max-width: 768px){ .fourcolumn { width: 95%; float: left; margin: 0 auto;} .fourcolumn1 { width: 98%;} .fourcolumn2 { width: 98%;} .fourcolumn3 { width: 98%;} .fourcolumn4 { width: 98%;} }
                  /* iPads ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .fourcolumn { width: 100%; float: left; margin: 0 auto;} .fourcolumn1 { width: 48%;} .fourcolumn2 { width: 48%;} .fourcolumn3 { width: 48%; clear: left;} .fourcolumn4 { width: 48%;} }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .fourcolumn { width: 100%; float: left; margin: 0 auto;} .fourcolumn1 { width: 48%;} .fourcolumn2 { width: 48%;} .fourcolumn3 { width: 48%; clear: left;} .fourcolumn4 { width: 48%;} }
                  /* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px){ }
                  /* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){ }
                  /* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){ }
                  /* Large screens ----------- */
@media screen and (min-width: 1500px){ }
@media screen and (min-width: 1600px){ }
@media screen and (min-width: 1700px){ }





/* FIVE COLUMN */

.fivecolumn {
  width: 100%;
}

.fivecolumn h2 {
    color: #3b4863;
    font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif;
    font-size: 2.3em;
    text-transform: uppercase;
    margin: 0;
    padding: 0 0 20px 0;
}


.fivecolumn h3 {
    color: #3b4863;
    font-family: 'Quicksand',Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.fivecolumn1 {
  width: 20%;
  float: left;
  height: 150px;
}

.fivecolumn2 {
  width: 20%;
  margin: 0 auto;
}

.fivecolumn3 {
  width: 20%;
  margin: 0 auto;
}

.fivecolumn4 {
  width: 20%;
  margin: 0 auto;
}

.fivecolumn5 {
  width: 20%;
  margin: 0 auto;
}
                  /* Phones ----------- */
@media screen and (max-width: 320px){ .fivecolumn { width: 100%; float: left; margin: 0 auto;} .fivecolumn1 { width: 50%;} }
@media screen and (min-width: 321px) and (max-width: 480px){ .fivecolumn { width: 100%; float: left; margin: 0 auto;} .fivecolumn1 { width: 50%;} }
@media screen and (min-width: 481px) and (max-width: 650px){ .fivecolumn { width: 100%; float: left; margin: 0 auto;} .fivecolumn1 { width: 50%;} }
@media screen and (min-width: 651px) and (max-width: 768px){ .fivecolumn { width: 100%; float: left; margin: 0 auto;} .fivecolumn1 { width: 20%;} }
                  /* iPads ----------- */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .fivecolumn { width: 100%; float: left; margin: 0 auto;} .fivecolumn1 { width: 20%;} }
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
                  /* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px){ }
                  /* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){ }
                  /* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){ }
                  /* Large screens ----------- */
@media screen and (min-width: 1500px){ }
@media screen and (min-width: 1600px){ }
@media screen and (min-width: 1700px){ }