/*
iPhone 5 - 460px, 28.75em high
iPhone 6 - 559px, 34.9375em high
*/

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*::before,
*::after {
  display: block;
}

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

i {
  font-style: italic;
}

.vcomponent {
  overflow: visible;
}

.sh-build.hide {
  display: none;
}

.sh-build.min-height,
.sh-build.click-to-link {
  min-height: 3em;
}

.sh-build.min-height::before,
.sh-build.click-to-link::before {
  content:'Click to Add';
  font-family: sans-serif;
  font-size: 0.875em;
  color: #6F6F6F;
  padding: 1em;
}

.sh-build.click-to-link::before {
  content: 'Double-click to Link';
}

/* hides the spin-button for firefox */
input[type=number] {
-moz-appearance:textfield;
}

/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Changes cursor for Sharp Actions */
img[onclick],div[onclick],a[onclick]{
cursor: pointer;
}

/* Sets Images as Block */
img {
display: block;
width: 100%;
}

/* Sets iFrames as Block */
iframe {
display: block;
}


/* Prevent font scaling in landscape while allowing user zoom */
html {
-webkit-text-size-adjust: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #F2F2F2;
}

body {
width: 100%;
max-width: 112.5em;
margin: 0 auto;
padding: 0;
background-color: white;
font-size: 100%;
color: #4D4D4D;
text-rendering: optimizelegibility;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
-webkit-font-smoothing: antialiased;
position: relative;
box-shadow: 0 0 4px rgba(0,0,0,0.75);
}

.clear {
clear: both;
}

section {
position: relative;
padding: 3em 0 3em;
}

section.full-width {
width: 100%;
}

section.grey {
background-color: #F2F2F2;
}

section.white,
div.bg-white {
  background-color: white;
}

section.transparent {
  background-color: transparent;
}

section.nopadding {
  padding: 0;
}

.container {
width: 90%;
/*max-width: 75em;*/
margin: 0 auto;
position: relative;
}

.container::after {
content: " ";
clear: both;
display: block;
height: 0;
}

.container:nth-child(n + 2) {
  margin-top: 3em;
}

.container.full-width {
max-width: none;
}

.container.no-margin {
width: 100%;
max-width: none;
margin: 0;
}

.container.margin-bottom {
  margin-bottom: 4em;
}

.container.narrow {
  width: 80%;
  max-width: 50em;
}

.inner {
width: 100%;
}

.inner::after,
.container::after,
section::after,
.clearfix::after {
  content: "";
  clear: both;
}

.shadow {
  box-shadow: 0 5px 50px 0 rgba(0,0,0,0.2);
}

.test {
border: 1px dashed grey;
text-align: center;
line-height: 1.5em;
padding: 2em 1em
}

.col {
  position: relative;
}

.col.xs-1{
width: 100%;
margin: 0 0 2em 0;
}

.col.xs-2 {
float: left;
width: 49%;
margin: 0 0 2% 2%;
}

.col.xs-2:nth-child(2n - 1),
.col.xs-2.no-margin {
margin-left: 0;
}

.col.xs-2.no-margin {
width: 50%;
}

.col.xs-3 {
float: left;
width: 32%;
margin: 0 0 2% 2%;
}

.col.xs-3:nth-child(3n - 2),
.col.xs-3.no-margin {
margin-left: 0;
}

.col.xs-3.no-margin {
width: 33.333334%;
}

.col.xs-4 {
float: left;
width: 23.5%;
margin: 0 0 2% 2%;
}

.col.xs-4:nth-child(4n - 3),
.col.xs-4.no-margin {
margin-left: 0;
}

.col.xs-4.no-margin {
width: 25%;
}

.col.xs-5 {
float: left;
width: 18.4%;
margin: 0 0 2% 2%;
}

.col.xs-5:nth-child(5n - 4),
.col.xs-5.no-margin {
margin-left: 0;
}

.col.xs-5.no-margin {
width: 20%;
}

.col.xs-6 {
float: left;
width: 15%;
margin: 0 0 2% 2%;
}

.col.xs-6:nth-child(6n - 5),
.col.xs-6.no-margin {
margin-left: 0;
}

.col.xs-6.no-margin {
width: 16.66666666666667%;
}

.col.no-margin {
  margin: 0;
}

.float-right {
float: right !important;
}

.float-left {
float: left;
}

/* For Dropdowns */
.sharp-dropmenu{
position: absolute;
z-index: 20;
list-style-type: none;
padding: 10px;
background-color: white;
margin: 0px;
line-height: normal;
text-align: left;
display: none;
}

.cclass29{
cursor: pointer;
}

p {
  margin: 1em 0;
}

p:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}

.text-white,
.text-white p,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
p.text-white,
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
h5.text-white,
h6.text-white {
  color: white;
}

.bgimg {
position: relative;
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-o-background-size: cover;
}

.bgimg.bottom {
background-position: center bottom !important;
}

.bgimg.top {
background-position: center top !important;
}

.bgimg.left {
background-position: left center !important;
}

.bgimg.right {
background-position: right center !important;
}

.bgimg.up.left {
background-position: left top !important;
}

.bgimg.up.right {
background-position: right top !important;
}

.bgimg.bottom.left {
background-position: left bottom !important;
}

.bgimg.bottom.right {
background-position: right bottom !important;
}

button {
cursor: pointer;
}


/* FORM FIELDS */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* hides the spin-button for firefox */
input[type=number] {
-moz-appearance:textfield;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #7e62a7;
font-style: italic;
}

.textbox {
width: 100%;
margin: 0 0 1em;
position: relative;
z-index: 2;
}

.textbox.left,
.textbox.right {
width: calc(50% - 0.5em);
}

.textbox.left {
float: left;
}

.textbox.right {
float: right;
}

.textbox input,
.textbox select,
.textbox textarea {
width: 100%;
background-color: rgba(256,256,256,0.6);
font-family: inherit;
font-weight: 300;
font-size: 1em;
color: #4D4D4D;
line-height: 1.6em;
margin: 0;
border: none;
border-radius: 0;
-webkit-appearance: none;
padding: 0.58888888888889em;
min-height: 2.77777777777778em;
}

.textbox select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: "";
background-color: rgba(256,256,256,0.6);
background-image: url('/3/images/select_arrow.svg');
background-repeat: no-repeat;
background-position: 95% 45%;
background-size: 24px 16px;
}

.textbox textarea {
height: 8.525em;
}

.button.single {
float: right;
}

.button.single::after {
content: "";
clear: both;
}

.button input,
.ppl-ad-button,
button {
width: 100%;
font-size: 1em;
line-height: 1.2em;
-webkit-appearance: none;
cursor:pointer;
background-color: rgba(255,255,255,0.6);
border: none;
color: #4D4D4D;
padding: 1em 2em;
text-transform: uppercase;
opacity: 0.8;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
#inputusername:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px white inset;
  -moz-box-shadow: 0 0 0 100px white inset;
  box-shadow: 0 0 0 100px white inset;
  background-color: rgba(255,255,255,0.6) !important;
}


.button input:hover,
button:hover {
opacity: 1;
}

span.message.success {
padding: 0;
width: 100%;
text-align: center;
font-size: 1.25em;
color: white;
position: static;
}

span.message.success p {
margin: 0;
}


/* PAGINATION */

.sh-pagination {
float: right;
clear: both;
}

.sh-pagination-page,
.sh-pagination-prev,
.sh-pagination-next {
float: left;
padding: 0.5em;
cursor: pointer;
font-style: italic;
font-weight: 400;
opacity: 0.7;
}

.sh-pagination-page:hover,
.sh-pagination-prev:hover,
.sh-pagination-next:hover,
.sh-pagination-page.selected {
opacity: 1;
}

.sh-pagination-prev.disabled,
.sh-pagination-next.disabled {
display: none;
}

.sh-pagination::after {
content: '';
clear: both;
}


.text img {
width: 100%;
}

.text img.image-right,
.text img.image-left {
width: 100%;
margin-bottom: 1em;
}


/* iPhone 5 Horizontal */

@media (min-width: 567px) {

  .col.sm-1:nth-child(n),
  .col.sm-2:nth-child(n),
  .col.sm-3:nth-child(n),
  .col.sm-4:nth-child(n),
  .col.sm-5:nth-child(n),
  .col.sm-6:nth-child(n) {
    margin-left: 2%;
  }

  .col.sm-1{
  width: 100%;
  margin: 0 0 2% 0;
  }

  .col.sm-2 {
  float: left;
  width: 49%;
  margin: 0 0 2% 2%;
  }

  .col.sm-2:nth-child(2n - 1),
  .col.sm-2.no-margin {
  margin-left: 0;
  }

  .col.sm-2.no-margin {
  width: 50%;
  }

  .col.sm-3 {
  float: left;
  width: 32%;
  margin: 0 0 2% 2%;
  }

  .col.sm-3:nth-child(3n - 2),
  .col.sm-3.no-margin {
  margin-left: 0;
  }

  .col.sm-3.no-margin {
  width: 33.333334%;
  }

  .col.sm-4 {
  float: left;
  width: 23.5%;
  margin: 0 0 2% 2%;
  }

  .col.sm-4:nth-child(4n - 3),
  .col.sm-4.no-margin {
  margin-left: 0;
  }

  .col.sm-4.no-margin {
  width: 25%;
  }

  .col.sm-5 {
  float: left;
  width: 18.4%;
  margin: 0 0 2% 2%;
  }

  .col.sm-5:nth-child(5n - 4),
  .col.sm-5.no-margin {
  margin-left: 0;
  }

  .col.sm-5.no-margin {
  width: 20%;
  }

  .col.sm-6 {
  float: left;
  width: 15%;
  margin: 0 0 2% 2%;
  }

  .col.sm-6:nth-child(6n - 5),
  .col.sm-6.no-margin {
  margin-left: 0;
  }

  .col.sm-6.no-margin {
  width: 16.66666666666667%;
  }

  .col.no-margin {
    margin: 0;
  }

}


/* iPhone 6 Plus Horizontal */

@media (min-width: 735px) {

  /* .container:nth-child(n + 2) {
    margin-top: 6em;
  } */

  .container.no-margin {
  margin-left: auto;
  margin-right: auto;
  }

  .col.md-1:nth-child(n),
  .col.md-2:nth-child(n),
  .col.md-3:nth-child(n),
  .col.md-4:nth-child(n),
  .col.md-5:nth-child(n),
  .col.md-6:nth-child(n) {
    margin-left: 2%;
  }

  .col.md-1{
  width: 100%;
  margin: 0 0 2% 0;
  }

  .col.md-2 {
  float: left;
  width: 49%;
  margin: 0 0 2% 2%;
  }

  .col.md-2:nth-child(2n - 1),
  .col.md-2.no-margin {
  margin-left: 0;
  }

  .col.md-2.no-margin {
  width: 50%;
  }

  .col.md-3 {
  float: left;
  width: 32%;
  margin: 0 0 2% 2%;
  }

  .col.md-3:nth-child(3n - 2),
  .col.md-3.no-margin {
  margin-left: 0;
  }

  .col.md-3.no-margin {
  width: 33.333334%;
  }

  .col.md-4 {
  float: left;
  width: 23.5%;
  margin: 0 0 2% 2%;
  }

  .col.md-4:nth-child(4n - 3),
  .col.md-4.no-margin {
  margin-left: 0;
  }

  .col.md-4.no-margin {
  width: 25%;
  }

  .col.md-5 {
  float: left;
  width: 18.4%;
  margin: 0 0 2% 2%;
  }

  .col.md-5:nth-child(5n - 4),
  .col.md-5.no-margin {
  margin-left: 0;
  }

  .col.md-5.no-margin {
  width: 20%;
  }

  .col.md-6 {
  float: left;
  width: 15%;
  margin: 0 0 2% 2%;
  }

  .col.md-6:nth-child(6n - 5),
  .col.md-6.no-margin {
  margin-left: 0;
  }

  .col.md-6.no-margin {
  width: 16.66666666666667%;
  }

  .col.no-margin {
    margin: 0;
  }
}


/* iPad Horizontal */

@media (min-width: 1023px) {

  .col.lg-1:nth-child(n),
  .col.lg-2:nth-child(n),
  .col.lg-3:nth-child(n),
  .col.lg-4:nth-child(n),
  .col.lg-5:nth-child(n),
  .col.lg-6:nth-child(n) {
    margin-left: 2%;
  }

  .col.lg-1{
  width: 100%;
  margin: 0 0 2% 0;
  }

  .col.lg-2 {
  float: left;
  width: 49%;
  margin: 0 0 2% 2%;
  }

  .col.lg-2:nth-child(2n - 1),
  .col.lg-2.no-margin {
  margin-left: 0;
  }

  .col.lg-2.no-margin {
  width: 50%;
  }

  .col.lg-3 {
  float: left;
  width: 32%;
  margin: 0 0 2% 2%;
  }

  .col.lg-3:nth-child(3n - 2),
  .col.lg-3.no-margin {
  margin-left: 0;
  }

  .col.lg-3.no-margin {
  width: 33.333334%;
  }

  .col.lg-4 {
  float: left;
  width: 23.5%;
  margin: 0 0 2% 2%;
  }

  .col.lg-4:nth-child(4n - 3),
  .col.lg-4.no-margin {
  margin-left: 0;
  }

  .col.lg-4.no-margin {
  width: 25%;
  }

  .col.lg-5 {
  float: left;
  width: 18.4%;
  margin: 0 0 2% 2%;
  }

  .col.lg-5:nth-child(5n - 4),
  .col.lg-5.no-margin {
  margin-left: 0;
  }

  .col.lg-5.no-margin {
  width: 20%;
  }

  .col.lg-6 {
  float: left;
  width: 15%;
  margin: 0 0 2% 2%;
  }

  .col.lg-6:nth-child(6n - 5),
  .col.lg-6.no-margin {
  margin-left: 0;
  }

  .col.lg-6.no-margin {
  width: 16.66666666666667%;
  }

  .col.no-margin {
    margin: 0;
  }
}

@media (min-width: 1200px) {

  /* .container:nth-child(n + 2) {
    margin-top: 8em;
  } */

  .container.no-margin {
  margin-left: auto;
  margin-right: auto;
  }

  .col.xl-1:nth-child(n),
  .col.xl-2:nth-child(n),
  .col.xl-3:nth-child(n),
  .col.xl-4:nth-child(n),
  .col.xl-5:nth-child(n),
  .col.xl-6:nth-child(n) {
    margin-left: 2%;
  }

  .col.xl-1{
  width: 100%;
  margin: 0 0 2% 0;
  }

  .col.xl-2 {
  float: left;
  width: 49%;
  margin: 0 0 2% 2%;
  }

  .col.xl-2:nth-child(2n - 1),
  .col.xl-2.no-margin {
  margin-left: 0;
  }

  .col.xl-2.no-margin {
  width: 50%;
  }

  .col.xl-3 {
  float: left;
  width: 32%;
  margin: 0 0 2% 2%;
  }

  .col.xl-3:nth-child(3n - 2),
  .col.xl-3.no-margin {
  margin-left: 0;
  }

  .col.xl-3.no-margin {
  width: 33.333334%;
  }

  .col.xl-4 {
  float: left;
  width: 23.5%;
  margin: 0 0 2% 2%;
  }

  .col.xl-4:nth-child(4n - 3),
  .col.xl-4.no-margin {
  margin-left: 0;
  }

  .col.xl-4.no-margin {
  width: 25%;
  }

  .col.xl-5 {
  float: left;
  width: 18.4%;
  margin: 0 0 2% 2%;
  }

  .col.xl-5:nth-child(5n - 4),
  .col.xl-5.no-margin {
  margin-left: 0;
  }

  .col.xl-5.no-margin {
  width: 20%;
  }

  .col.xl-6 {
  float: left;
  width: 15%;
  margin: 0 0 2% 2%;
  }

  .col.xl-6:nth-child(6n - 5),
  .col.xl-6.no-margin {
  margin-left: 0;
  }

  .col.xl-6.no-margin {
  width: 16.66666666666667%;
  }

  .col.no-margin {
    margin: 0;
  }
}




@media (min-width: 600px) {

.text img.image-right {
width: 50%;
margin: 1em 0 1.2em 1em ;
}

.text img.image-left {
width: 50%;
margin: 1em 1em 1.2em 0;
}

.text img.top {
margin-top: 0;
}

.text img.bottom {
margin-bottom: 0;
}

}

@media (min-width: 760px) {

.container.margin-bottom {
  margin-bottom: 8em;
}

}


@media (min-width: 768px) {

.container {
width: 95%;
}

}