/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,
button,
input,
select,
textarea {
  color: #222;
}

html {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

audio,
canvas,
img,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

img {
  max-width: 100%;
}

/* ==========================================================================
   BeBold
   ========================================================================== */
.blockColorPrimary, #contactBox .contactItem .square {
  background: #f29400;
}

.blockColorSecondary {
  background: #24150c;
}

html, .gdpr {
  font-family: 'Open Sans', sans-serif;
}

.condensedBlack, h1, h2, h3, #contactBox .contactItem .square .letter, #contentContainer #triangleArtBox #menuBox .menuText {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700;
}

.condensedLight, #contactBox .contactItem, #contactBox2, #contentContainer #triangleArtBox #menuBox #howTo {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
}

h1, h2, h3 {
  font-size: 1.5em;
}

.primary, #contactBox .contactItem a:hover, #contentContainer #content article strong {
  color: #f29400;
}

.secondary, h1, h2, h3, #contentContainer #triangleArtBox #menuBox menu a:hover {
  color: #24150c;
}

.white {
  color: #ffffff;
}
.white a {
  color: #ffffff;
}

.inset, #contentContainer #triangleArtBox #menuBox menu a:hover {
  text-shadow: #e0e0e0 1px 1px 0px;
}

.threedee {
  color: white;
  text-shadow: #cccccc 0px 1px 0px, #c9c9c9 0px 2px 0px, #bbbbbb 0px 3px 0px, #b9b9b9 0px 4px 0px, #aaaaaa 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.15) 0px 3px 5px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.1) 0px 20px 20px;
}

.emboss, #contactBox .contactItem a:hover, #contactBox2, #contentContainer #triangleArtBox #menuBox menu a {
  text-shadow: rgba(0, 0, 0, 0.2) 2px 6px 5px, rgba(255, 255, 255, 0.4) 0px -4px 30px;
}

.neon {
  text-shadow: white 0px 0px 5px, white 0px 0px 10px, white 0px 0px 15px, #ff2d95 0px 0px 20px, #ff2d95 0px 0px 30px, #ff2d95 0px 0px 40px, #ff2d95 0px 0px 50px, #ff2d95 0px 0px 75px;
}

#wrapper, #container {
  width: 100%;
  height: 100%;
}

.inline {
  display: inline-block;
}

#barBox {
  width: 100%;
  height: 120px;
  position: absolute;
  top: 20px;
  z-index: 50;
}

#logoArtBox {
  width: 250px;
  height: 145px;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 100;
  background-image: url("../img/BeBold_logo.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

#contactBox {
  position: absolute;
  top: 85px;
  right: 5%;
  z-index: 100;
}
@media screen and (max-width: 400px) {
  #contactBox {
    display: none;
  }
}
#contactBox .contactItem {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 150px;
  float: left;
}
#contactBox .contactItem:nth-last-child(n+2) {
  margin-right: -100px;
}
#contactBox .contactItem a {
  text-decoration: none;
}
#contactBox .contactItem .square {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  float: left;
  border: 1px solid white;
}
#contactBox .contactItem .square .letter {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
}

#contactBox2 {
  width: 110%;
  margin-left: -5%;
  clear: both;
  background: #f29400;
  color: #ffffff;
  display: none;
}
#contactBox2 a {
  color: #ffffff;
  text-decoration: none;
}
#contactBox2 a:hover {
  color: #24150c;
}
#contactBox2 .details {
  padding-left: 5%;
  padding-top: 5px;
  padding-bottom: 5px;
}
@media screen and (max-width: 400px) {
  #contactBox2 {
    display: block;
  }
}

#contentContainer {
  display: inline-block;
  width: 100%;
  min-width: 810px;
  height: 100%;
  position: relative;
}

@media screen and (orientation: portrait) {
  #contentContainer {
    min-width: 100%;
  }
}
#contentContainer #triangleArtBox {
  width: 40%;
  min-width: 400px;
  height: 100%;
  float: left;
  background-image: url("../img/square.png");
  background-position: right center;
  background-repeat: no-repeat;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox {
    background-image: url("../img/squareblock.png");
    height: 300px;
    width: 100%;
    min-width: 100%;
    background-position: center bottom;
  }
}
@media screen and (max-width: 400px) {
  #contentContainer #triangleArtBox {
    background-image: none;
    background-color: #f29400;
    height: 250px;
    margin-bottom: 30px;
  }
}
#contentContainer #triangleArtBox #menuBox {
  position: relative;
  top: 50%;
  height: 150px;
  margin-top: -75px;
  float: right;
  margin-right: 150px;
  display: inline-block;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox {
    float: none;
    height: auto;
    margin-top: -20px;
    margin-left: 5%;
    top: 200px;
    margin-right: 0px;
  }
}
#contentContainer #triangleArtBox #menuBox .menuText {
  font-size: 1.5em;
  color: #ffffff;
  text-align: right;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox .menuText {
    text-align: left;
  }
}
#contentContainer #triangleArtBox #menuBox #howTo {
  position: relative;
  top: 50%;
  height: 60px;
  margin-top: -30px;
  float: right;
  margin-right: 50px;
  font-size: 2em;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox #howTo {
    float: left;
    height: auto;
    margin: 0px 20px 0px 0px;
  }
}
@media screen and (max-width: 400px) {
  #contentContainer #triangleArtBox #menuBox #howTo {
    display: none;
  }
}
#contentContainer #triangleArtBox #menuBox menu {
  padding: 0px;
  margin: 0px;
  z-index: 150;
  float: right;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox menu {
    float: right;
    margin-top: 10px;
  }
}
#contentContainer #triangleArtBox #menuBox menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox menu ul li {
    display: inline;
  }
}
#contentContainer #triangleArtBox #menuBox menu a {
  color: #ffffff;
  text-decoration: none;
}
@media screen and (orientation: portrait) {
  #contentContainer #triangleArtBox #menuBox menu a:hover {
    color: #111111;
  }
}
#contentContainer #content {
  width: 50%;
  min-width: 400px;
  padding-left: 0px;
  height: 100%;
  float: left;
}
@media screen and (orientation: portrait) {
  #contentContainer #content {
    margin-left: 5%;
    min-width: 90%;
    width: 90%;
    height: auto;
  }
}
#contentContainer #content article {
  margin-top: 210px;
  margin-left: 40px;
}
@media screen and (orientation: portrait) {
  #contentContainer #content article {
    margin-left: 0px;
    margin-top: 10px;
  }
}
#contentContainer #content article section {
  font-size: 0.9em;
  margin-bottom: 60px;
}

.inactiveSection {
  display: none !important;
  visibility: hidden;
}

.hideItem {
  display: none !important;
  visibility: hidden;
}

.gdpr {
  position: absolute;
  bottom: -100px;
  color: #ffffff;
  font-size: 12px;
  padding: 12px;
}

.gdpr a {
  color: #f29400;
}

.gdpr-button {
  float: right;
  margin: auto 10px 20px 20px; 
}

.gdpr-button button{
  padding: 8px 15px;
}


.privacy {
  bottom: 20px;
  left: 0px;
  padding-left: 15%;
  width: 100%;
  position: fixed;
}

@media screen and (max-width: 800px) {
  .privacy {
    bottom: 0px;
    padding-bottom: 20px;
    padding-left: 40px;
    background: #ffffff;
  }
}

.privacy div {
  text-align: left;
  color: #999999;
  display: inline;
}

.privacy div a {
  color: #999999;
  font-size: small;
}