/**
 * Primary compiling styles file
 *
 * This is the only file that our compiler reads, so if you don't include something
 * in here, it won't be compiled. Make sure you include mixins and functions first
 * so the following files can use them.
 **/
/* all files in the tools folder */
/**
 * Use when a string (email) is too long for its container
 */
/**
 * Grid panels
 * Creates a grid of items that have a fixed height
 * @param $cols int = number of items per row
 * @param $col_gap percent = gap between items in each row (optional, defaults to 2%)
 * @param $row_gap percent = gap between row (optional, defaults to two times col_gap (4%))
 **/
/**
 * Ease between states
 * Use this to smooth hover/active/focus events
 **/
/**
 * [Rotate and horizontally and vertically align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[percentage]} $leftPos [Pass the horizontally position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Horizontally and vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $leftPos [Pass the horizontally position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 */
/**
 * [transition description]
 * @param  {[style]} $propertie [The style you want to animate. Defaults to 'all'.]
 * @param  {[int in seconds]} $time      [The speed at which you want the transition to take. Defaults to '0.3s'.]
 * @param  {[movement type]} $mode      [The type of movement you want eg: linear, ease, ease-in, ease-out. Defaults to 'linear'.]
 */
/**
 * [Vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will vertically center align the element.]
 */
/* all files in the global folder */
.light {
  color: #fff; }

.blue {
  color: #00afef; }

.darkBlue {
  color: #0B2936; }

.red {
  color: #ee2638; }

header {
  width: 100%;
  position: relative;
  min-height: 480px;
  background: url("/site/img/headerBackground3.jpg") no-repeat 50% 50%;
  -webkit-background-size: cover !important;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header nav {
    position: relative;
    background-color: rgba(22, 61, 75, 0.85); }
    header nav ul {
      float: right;
      margin: 0;
      padding: 55px 90px 25px 0; }
      header nav ul li {
        display: inline-block;
        padding: 5px 15px; }
        header nav ul li a {
          color: #fff;
          text-decoration: none; }
          header nav ul li a:hover {
            border-bottom: solid 2px #fff;
            cursor: pointer; }
  header #headerLogoContain {
    height: 600px;
    text-align: center;
    vertical-align: middle; }
    header #headerLogoContain:before {
      content: ' ';
      display: inline-block;
      vertical-align: middle;
      height: 100%; }
  header .svgContain {
    background: url("/site/img/beonIcons/dropLogoWhite.svg") no-repeat;
    width: 110px;
    height: 200px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 50px; }

footer {
  background-color: #0B2936;
  padding: 45px 0 15px;
  text-align: center; }
  footer .footerLogo {
    background: url("/site/img/beonIcons/dropLogoWhite.svg") no-repeat;
    width: 70px;
    height: 120px;
    margin: 0 auto; }
    footer .footerLogo:hover {
      cursor: pointer; }
  footer p {
    color: #fff;
    margin: 35px 0 0; }

.side_menu {
  padding: 15px;
  position: fixed;
  height: 20px;
  z-index: 2; }

.side_menu img {
  width: 30px; }

.pop_nav li {
  width: 100%;
  text-align: center; }

.pop_nav li a {
  color: #fff; }

.pop_nav li a:hover {
  cursor: pointer; }

.snFloat {
  float: right;
  margin-right: 20px; }

.snFixed {
  position: fixed;
  right: 20px;
  top: 40%; }

.contentContainer {
  position: relative; }

#sideNav {
  z-index: 10; }
  #sideNav nav ul {
    text-align: right; }
    #sideNav nav ul li {
      text-align: left;
      list-style-type: none;
      width: 150px;
      height: 24px;
      margin: 3px 0;
      position: relative; }
      #sideNav nav ul li p {
        display: none;
        border-radius: 2px;
        background-color: #0B2936;
        margin: 0;
        color: #fff;
        font-weight: bold;
        padding: 0 0 0 5px;
        font-family: "proxima-nova", sans-serif;
        line-height: 24px; }
        #sideNav nav ul li p:hover {
          cursor: pointer; }
      #sideNav nav ul li a {
        border-radius: 50%;
        background-color: #00afef;
        display: block;
        width: 13px;
        height: 13px;
        position: absolute;
        right: 4px;
        top: 6px; }
        #sideNav nav ul li a:hover {
          cursor: pointer; }

/* all files in the components folder */
/* all files in the pages folder */
html {
  height: 100%; }

body {
  height: 100%;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  color: #0B2936; }

article {
  padding: 125px 0; }

h2, h3 {
  font-weight: normal;
  padding-bottom: 40px; }

h4 {
  font-weight: normal; }

h1 {
  width: 100%;
  text-align: center;
  font-size: 2em; }

h1, header nav a, .pop_nav li a {
  font-family: "proxima-nova", sans-serif;
  font-weight: bold; }

hr {
  width: 120px;
  margin: 0 auto 60px;
  border: none;
  height: 3px;
  background-color: #00afef; }

.hrLight {
  background-color: #fff; }

.hrRed {
  background-color: #ee2638; }

.cf:before, .cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.right {
  float: right; }

.left {
  float: left; }

nav {
  display: block; }

.side_menu {
  display: none; }

.hidden {
  display: none; }

.sectionContain {
  margin: 0 auto;
  max-width: 1200px; }

.beonIcon {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 80px; }

.owIcon {
  background: url("/site/img/beonIcons/ourWater.svg") no-repeat; }

.osIcon {
  background: url("/site/img/beonIcons/ourSource.svg") no-repeat; }

.orIcon {
  background: url("/site/img/beonIcons/ourRange.svg") no-repeat; }

.twitter {
  background: url("/site/img/beonIcons/twitter-icon.svg") no-repeat; }

.facebook {
  background: url("/site/img/beonIcons/fb-icon.svg") no-repeat; }

.linkedin {
  background: url("/site/img/beonIcons/in-icon.svg") no-repeat; }

.bold {
  font-weight: bold; }

#sectionBeon #h1Contain {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 700px;
  padding: 0 30px; }

#sectionBeon h4 {
  text-align: center;
  margin-bottom: 26px; }

#sectionBeon #sbContentContain {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 50px; }

#sectionBeon .beonCol {
  float: left;
  max-width: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  padding: 0 15px; }
  #sectionBeon .beonCol:first-of-type {
    width: 60%; }
  #sectionBeon .beonCol:last-of-type {
    width: 40%; }

#sectionOurWater {
  background: url("/site/img/ourWater.jpg") no-repeat 50% 50%;
  -webkit-background-size: cover !important;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center; }
  #sectionOurWater #owContain {
    margin: 0 auto;
    padding: 0 100px;
    max-width: 700px; }

#sectionOurSource {
  padding: 0;
  background-color: #0B2936;
  text-align: center;
  position: relative; }
  #sectionOurSource #osContain {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 125px 100px;
    width: 60%;
    float: left; }
  #sectionOurSource #osImgContain .osImg1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    display: block;
    height: 50%;
    background: url("/site/img/ourSource3.jpg") no-repeat 50% 50%;
    -webkit-background-size: cover !important;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
  #sectionOurSource #osImgContain .osImg2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    display: block;
    height: 50%;
    background: url("/site/img/ourSource4.jpg") no-repeat 50% 50%;
    -webkit-background-size: cover !important;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }

#sectionOurRange {
  position: relative;
  padding: 0; }
  #sectionOurRange:before {
    position: absolute;
    content: '';
    height: 100%;
    background-color: #f2f7f8;
    width: 50%;
    top: 0;
    left: 0;
    display: inline-block;
    bottom: 0;
    z-index: -1; }
  #sectionOurRange:after {
    position: absolute;
    content: '';
    height: 100%;
    background-color: #e6f0f2;
    width: 50%;
    top: 0;
    right: 0;
    display: inline-block;
    bottom: 0;
    z-index: -1; }
  #sectionOurRange .full_range_image {
    text-align: center; }
    #sectionOurRange .full_range_image img {
      display: block;
      margin: 0 auto;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px 20px 100px;
      max-width: 1000px; }
  #sectionOurRange .title_wrapper {
    background-color: #fff;
    padding: 125px 0 20px; }
  #sectionOurRange .orWrapper {
    position: relative; }
  #sectionOurRange .orContain {
    text-align: right;
    width: 50%;
    position: relative;
    padding: 60px 0 120px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }
    #sectionOurRange .orContain .or_content_wrapper {
      width: 50%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box; }
    #sectionOurRange .orContain:first-of-type {
      background-color: #f2f7f8; }
    #sectionOurRange .orContain:last-of-type {
      background-color: #e6f0f2; }
  #sectionOurRange .orRelContain {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative; }
  #sectionOurRange .orRelContain img {
    width: 100%;
    max-width: 300px; }
  #sectionOurRange #orStill1 hr {
    left: 0;
    margin-left: 15px; }
  #sectionOurRange #orSpark1,
  #sectionOurRange #orStill1 {
    position: relative;
    width: 60%;
    max-width: 450px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px; }
  #sectionOurRange #orSpark2 {
    width: 40%;
    max-width: 300px; }
  #sectionOurRange #orStill2 {
    width: 40%;
    max-width: 290px; }
  #sectionOurRange #orStill1 {
    text-align: left; }
  #sectionOurRange .avalIn {
    border-bottom: solid 1px #C0CACC; }
    #sectionOurRange .avalIn:first-of-type {
      border-top: solid 1px #C0CACC; }
  #sectionOurRange #orSpark1 hr {
    position: absolute;
    right: 15px; }
  #sectionOurRange #orSpark1 > p {
    padding-top: 100px; }
  #sectionOurRange #orStill1,
  #sectionOurRange #orSpark2,
  #sectionOurRange #orStill2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px; }
    #sectionOurRange #orStill1 hr,
    #sectionOurRange #orSpark2 hr,
    #sectionOurRange #orStill2 hr {
      position: absolute;
      right: 15px; }
    #sectionOurRange #orStill1 > p,
    #sectionOurRange #orSpark2 > p,
    #sectionOurRange #orStill2 > p {
      padding-top: 100px; }

/* #sectionOurRange {
	text-align:center;
	padding-bottom:0;
	.orContain {
		@include border-box();
		padding:50px 15px 125px;
		overflow:hidden;
		 h2{
			padding:50px 0 20px 0;
		}
		h4{
			margin:15px 0;
		}
		img{
			display:none;
		}
		&:first-of-type{
			background-color:#f2f7f8;
		}
		&:last-of-type{
			background-color:#e6f0f2;
		}
		.avalIn{
			border-bottom:solid 1px #C0CACC;
			&:first-of-type{
				border-top:solid 1px #C0CACC;
			}
		}
	} */
#sectionContact {
  background: url("/site/img/contact.jpg") no-repeat 28% 50%;
  -webkit-background-size: cover !important;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center; }
  #sectionContact .cContain {
    margin: 0 auto; }
  #sectionContact h3 {
    margin: 0;
    padding: 0 15px; }
  #sectionContact .cdContain {
    margin: 0 auto 0; }
  #sectionContact .cds p {
    border-bottom: solid 1px #C0CACC;
    padding: 15px 0;
    margin: 0; }
    #sectionContact .cds p a {
      text-decoration: none;
      color: #0B2936; }
      #sectionContact .cds p a:hover {
        color: #00afef; }
    #sectionContact .cds p:first-of-type {
      font-weight: bold;
      font-size: 1.1em;
      padding: 70px 0 20px; }
  #sectionContact .cds {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding: 0 20px; }
    #sectionContact .cds div {
      width: 100%;
      max-width: 400px;
      float: right; }
    #sectionContact .cds p {
      max-width: 400px; }
    #sectionContact .cds:first-of-type {
      text-align: right; }
    #sectionContact .cds:last-of-type {
      text-align: left; }
  #sectionContact #socialIcons {
    margin: 100px 0 20px; }
    #sectionContact #socialIcons a:hover {
      cursor: pointer; }
    #sectionContact #socialIcons div {
      max-width: 60px;
      padding: 0 5px;
      display: inline-block; }

@media all and (max-width: 1250px) {
  #sectionOurRange .orContain {
    width: 100%;
    padding: 50px; }
  #sectionOurRange .orRelContain {
    display: block;
    max-width: 800px;
    position: static;
    margin: 0 auto; }
  #sectionOurRange #orSpark1,
  #sectionOurRange #orStill1 {
    max-width: none; } }

@media all and (max-width: 1200px) {
  #sectionOurSource #osContain {
    padding: 125px 75px; } }

@media all and (max-width: 1000px) {
  #sectionOurSource #osContain {
    float: none;
    width: 100%;
    margin-bottom: 275px; }
  #sectionOurSource #osImgContain .osImg1 {
    bottom: 0;
    top: auto;
    left: 0;
    width: 50%;
    height: 50%;
    max-height: 300px; }
  #sectionOurSource #osImgContain .osImg2 {
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    max-height: 300px; }
  #sectionBeon #firstBottle {
    display: block;
    margin: 0 auto;
    padding-left: 0;
    width: 150px; }
  #sectionBeon #sbContentContain {
    padding-left: 0; }
  #sectionBeon .beonCol {
    float: none;
    max-width: 700px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto; }
    #sectionBeon .beonCol:first-of-type {
      width: 100%; }
    #sectionBeon .beonCol:last-of-type {
      width: 100%; } }

@media all and (max-width: 767px) {
  nav {
    display: none; } }

@media all and (max-width: 650px) {
  #sectionOurRange {
    text-align: center;
    padding-bottom: 0; }
    #sectionOurRange .orContain {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      padding: 50px 15px 125px;
      overflow: hidden; }
      #sectionOurRange .orContain h2 {
        padding: 50px 0 20px 0; }
      #sectionOurRange .orContain h4 {
        margin: 15px 0; }
      #sectionOurRange .orContain img {
        display: none; }
      #sectionOurRange .orContain:first-of-type {
        background-color: #f2f7f8; }
      #sectionOurRange .orContain:last-of-type {
        background-color: #e6f0f2; }
      #sectionOurRange .orContain .avalIn {
        border-bottom: solid 1px #C0CACC; }
        #sectionOurRange .orContain .avalIn:first-of-type {
          border-top: solid 1px #C0CACC; }
    #sectionOurRange #orStill1 > p,
    #sectionOurRange #orSpark2 > p,
    #sectionOurRange #orStill2 > p {
      padding-top: 75px; }
    #sectionOurRange #orSpark1,
    #sectionOurRange #orStill1 {
      text-align: center;
      max-width: none;
      width: 100%; }
      #sectionOurRange #orSpark1 hr,
      #sectionOurRange #orStill1 hr {
        right: unset;
        margin-left: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
    #sectionOurRange .orRelContain {
      margin: 0 auto; }
  #sectionContact .cContain {
    max-width: 400px; }
  #sectionContact h3 {
    max-width: 700px;
    margin: 0 auto; }
  #sectionContact .cds {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    float: none;
    width: 100%;
    padding: 0 20px; }
    #sectionContact .cds div {
      width: 100%;
      max-width: 400px;
      float: right; }
    #sectionContact .cds p {
      max-width: 400px; }
    #sectionContact .cds:first-of-type {
      text-align: center; }
    #sectionContact .cds:last-of-type {
      text-align: center; } }

@media all and (max-width: 550px) {
  hr {
    margin-bottom: 50px; }
  article {
    padding: 75px 0; }
  #sectionBeon .beonCol {
    margin: 0 auto;
    max-width: 520px; }
  #sectionOurWater #owContain {
    padding: 0 50px; }
  #sectionOurSource #osContain {
    padding: 80px 50px;
    margin-bottom: 150px; }
  #sectionOurSource #osImgContain .osImg1 {
    max-height: 175px; }
  #sectionOurSource #osImgContain .osImg2 {
    max-height: 175px; }
  #sectionContact {
    padding-left: 50px;
    padding-right: 50px; }
  #sectionOurRange .title_wrapper {
    padding: 75px 0 20px; }
  #sectionOurRange .full_range_image {
    text-align: center; }
    #sectionOurRange .full_range_image img {
      display: block;
      margin: 0 auto;
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px 20px 50px;
      max-width: 1000px; } }

@media all and (max-width: 475px) {
  #sectionOurWater #owContain {
    padding: 0 25px; }
  #sectionOurSource #osContain {
    padding: 80px 22px; } }