/* ==========================================================================
GLOBAL STUFF
========================================================================== */
body {
  font-family:'Open Sans',Optima,Segoe,Segoe UI,Arial,Helvetica,sans-serif;
  font-size:1em;
  color:#444444;
  background-color: #fff;
  line-height:1.5;
}
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
ul, ol {
  margin:0;
  padding:0;
}
img {
  max-width:100%;
  height:auto;
}
p {
  margin:0 0 1em 0;
}
/* ==========================================================================
HEADINGS
========================================================================== */
h1 {
  font-size:1.8em;
  font-weight:600;
  margin:0.3em 0;
}
h2 {
  font-size:1.6em;
  font-weight:600;
  margin:0.3em 0;
}
h3 {
  font-size:1.4em;
  font-weight:600;
  margin:0.3em 0;
}
h4 {
  font-size:1.2em;
  font-weight:700;
  margin:0.3em 0;
}
/* ==========================================================================
LINKS GLOBAL
========================================================================== */
a, a:link, a:visited, a:hover, a:active {
  background:transparent;
  text-decoration:none;
  outline:none;
  cursor:pointer;
}
  a:link {
  color:#007ea8;
  outline:none;
}
a:visited {
  color:#007ea8;
  outline:none;
}
a:hover, a:active {
  color:#007ea8;
  text-decoration:underline;
  outline:none;
}
/* ==========================================================================
INPUT ELEMENTS GLOBAL
========================================================================== */
input {
  border:1px solid #d3d3d3;
  padding:0.2em;
}
textarea {
  border:1px solid #d3d3d3;
  padding:10px;
}
select {
  border:1px solid #d3d3d3;
}
input[name=products_qty] {
  min-width:100%;
  width:100%;
  text-align:center;
  border:1px solid #D3D3D3;
  border-radius:3px;
  height:3em;
  line-height:3em;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; 
}
input[type=number] {
  -moz-appearance:textfield;
}
/* ==========================================================================
GRID
========================================================================== */
#site-wrapper {
  margin:0 0.5em;
}
.container {
  max-width:90em; /* 1080px : 1em : 0.9em*/
  margin:0 auto;
}
.row {
  width:100%;
  float:left;
}
.columns {
  float:left;
  padding:0.33068783% 0.462962963% 0.33068783% 0.462962963%;
}
#content {
  width:100%;
  float:left;
  margin:0 0 5em 0;
}
/* ==========================================================================
MEDIA QUERIES
Overrides primary ('mobile first') styles.
========================================================================== */
/* X-Small: 2 COLUMNS - Mobile small */
@media screen and (max-width:23.75em) { /* 380px */
  .xs-1 {width:8.333333333%;}
  .xs-2 {width:16.66666667%;}
  .xs-3 {width:25%;}
  .xs-4 {width:33.33333333%;}
  .xs-6 {width:50%;}
  .xs-9 {width:75%;}
  .xs-12 {width:100%;}
}
/* Small: 2 COLUMNS - Mobile */
@media screen and (min-width:23.8125em) and (max-width:34.9375em) { /* 381px - 559px */
  .sm-1 {width:8.333333333%;}
  .sm-2 {width:16.66666667%;}
  .sm-3 {width:25%;}
  .sm-4 {width:33.33333333%;}
  .sm-6 {width:50%;}
  .sm-9 {width:75%;}
  .sm-12 {width:100%;}
}
/* Medium: 12 COLUMNS - Tablet */
@media screen and (min-width:35em) and (max-width:44.0625em) { /* 560px - 705px */
  body {
    font-size:0.9em;
  }
  .md-1 {width:8.333333333%;}
  .md-2 {width:16.66666667%;}
  .md-3 {width:25%;}
  .md-4 {width:33.33333333%;}
  .md-6 {width:50%;}
  .md-9 {width:75%;}
  .md-12 {width:100%;}
}
/* Large: 12 COLUMNS - Tablet */
@media screen and (min-width:44.125em) and (max-width:56.25em) { /* 706px - 900px */
  .lg-1 {width:8.333333333%;}
  .lg-2 {width:16.66666667%;}
  .lg-3 {width:25%;}
  .lg-4 {width:33.33333333%;}
  .lg-6 {width:50%;}
  .lg-9 {width:75%;}
  .lg-12 {width:100%;}
}
/* X-Large: 12 COLUMNS - Desktop */
@media screen and (min-width:56.313em) { /* 901px */
  .xl-1 {width:8.333333333%;}
  .xl-2 {width:16.66666667%;}
  .xl-3 {width:25%;}
  .xl-4 {width:33.33333333%;}
  .xl-6 {width:50%;}
  .xl-9 {width:75%;}
  .xl-12 {width:100%;}
}
/* ==========================================================================
GENERAL STYLING
========================================================================== */
.header {
  float: left;
  width: 100%;  
}
.header .logo {
  background: url(images/ecommerce_eder2.jpg) 100% no-repeat;
  background-size: contain;
  background-position: center; 
  height:200px;
}
.header .logo-text {
  font-size: 3em;
  margin-top: 1em;
}
.header .logo-slogan {
  font-weight: 600;
}
.header a {
  text-decoration:none;
  color: #444444;
}
.header a:link, .header a:visited, .header a:hover, .header a:active {
  background:transparent;
  text-decoration:none;
  outline:none;
  cursor:pointer;
}
.description {
  margin: 5em 0 5em 0;
  float: left;
  width: 100%;  
}
.description.partner {
  margin: 5em 0 2em 0;
}
.description.banner {
  margin: 0 0 2em 0;
  font-size: 1.6em;
  background: #000000;
}
.banner p {
  color: #fff;
  margin: 1em;
}
.copyright {
  margin: 5em 0 3em 0;
  float: left;
  width: 100%;  
}
.partner-wrapper,
.brand-wrapper {
  float: left;
  width: 100%;  
}
img {
  max-width: 100%;
  height: auto;
}
.frameit {
  border:1px solid #D3D3D3;
  line-height: 0;
  display: block;
  position:relative;
}
/* ==========================================================================
IMAGES STARTPAGE
========================================================================== */
.indexrows {
  position: relative;
}
.indexrows a {
  color:#444;
  text-decoration:none;
  position: relative;
}
.indeximages_content {
  background-color: #fff;
  padding: 0.5em;
  width: 100%;
}
.indeximages_content .indeximages_heading {
  font-size: 1em;
  font-weight:600;
  height: 1.3em;
  line-height: 1.3em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.indeximages_content .indeximages_desc {
  font-size: 0.9em;
  line-height: 1.4em;
}
.indeximages_content .indeximages_desc p {
  margin:0;
}
/* ==========================================================================
BRANDS
========================================================================== */
.brandrows {
  position: relative;
  padding: 2em 0;
}
.brandrows a {
  color:#444;
  text-decoration:none;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.brandrows img {
  margin: 0 auto;
}
.brand_content {
  background-color: #fff;
  padding: 0.5em;
  flex-grow: 1;
}
.brand_content .brand_heading {
  font-size: 1.6em;
  font-weight:600;
  line-height: 1.3em;
}
.brand_content .brand_desc {
  font-size: 0.9em;
  line-height: 1.4em;
  padding: 2em 0 0 0;
}
.brand_content .brand_desc p {
  margin:0 0 2em 0;
}
.brand_content .brand_desc_button {
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 2em;
}
.brand_content .brand_desc_button .clickit {
  background: #444;
  color: #fff;
  padding: 1em;
  border-radius: 999px;
}
@media screen and (max-width:559px) {
  .indexrows {
    padding: 0 0 2em 0 !important;
  }
}
@media screen and (min-width:560px) {
  .indeximages_content {
    height: 6em;
  }
}
@media screen and (min-width:768px) {
  .brandrows a {
    flex-direction: row;
  }
  .brandrows img {
    max-width: 50%;
    margin: 0;
  }
  .brand_content {
    max-width: 50%;
    padding: 1.5em;
  }
  .order_one {
    order: 1;
  }
  .order_two {
    order: 2;
  }
}
@media screen and (min-width:901px) and (max-width:1140px) {
  .indeximages_content {
    height: 7em;
  }
}
@media screen and (min-width:1360px) {
  .brandrows img {
    max-width: 50%;
    max-width: 40%;
    margin: 0;
  }
  .brand_content {
    max-width: 50%;
    max-width: 60%;
    padding: 2.5em;
  }
}
/* ==========================================================================
JOBS
========================================================================== */
.jobs-wrapper {
  float: left;
  width: 100%;
}
.jobs-wrapper .container {
  max-width:60em; /* 1080px : 1em : 0.9em*/
}
.jobs-wrapper ul li {
  margin: 0.6em 0 0 2.4em;
}
.jobs .position {
  color:#007ea8;
  font-weight:bold;
}
/* ==========================================================================
HELPERS
========================================================================== */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.breakup-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: auto;
}
.strong {
  font-weight:700;
}
.flexwrap {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
}
.buttons_wrap {
  margin: 1.5em 0 0 0;
  display: inline-block;
  width: 100%;
}
.button_back {
  float:left;
}
.button_continue {
  float:right;
}
.margintop {
  margin:1.6em 0 0 0;
}
.marginbottom {
  margin:0 0 5.5em 0;
}
.marginzero {
  margin: 0;
}
.indextext-margin {
  margin:2em 0;
}
.nofloat {
  float:none;
}
.width-100 {
  width: 100%;
}
.centered {
  text-align:center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.right-100 {
  width: 100%;
  float: left;
}
.framedcontent {
  border:1px solid #d3d3d3;
  display:inline-block;
  padding:1em;
}
.color_ot_total {
  color:#13cf00;
}
/* styles for popup content */
.popup-cont {
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
background:#fff;
margin:0px;
}
.blocky {
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
@media screen and (min-width:35em) { /* 560px */
  .blocky {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    -o-hyphens: manual;
    hyphens: manual;
  }
}
.hideaway {
  display:none;
}
.personal_quote {
  margin: 0;
  padding: 0.5em 0 1em 2.4em;
  position: relative;
}
.personal_quote h4 {
  font-size: 1em;
}
.personal_quote:before {
  font-family: Georgia, serif;
  display: block;
  content: "\201C";
  font-size: 4em;
  position: absolute;
  left: 0.1em;
  top: -0.2em;
  color: #969696;
}
.imgLeft {
  float:left;
  margin:1em 2em 1em 0;
}
.imgRight {
  float:right;
  margin:0 0 1em 2em;
}