/* ----- CSS & Overrides over Skeleton ---------------- */
/* ----- Developer: Jason Weeks ----------------------- */
/* ----- Copyright Magnetite Capital LLC 2018 ----------*/

/* --------- Mastheads ------------------- */

.masthead-index {
  background: linear-gradient(
    rgba(183,65,14, .5),
    rgba(183,65,14, .5)),
    url("../img/masthead-index.jpg");
  border-bottom: 25px solid rgb(183,65,14);
}

.masthead-about {
  background: linear-gradient(
    rgba(0,0,0, 0.5),
    rgba(0,0,0, .75)),
    url("../img/masthead-about.jpg");
  border-bottom: 25px solid #ccc;
}

.masthead-philosophy {
  background: linear-gradient(
    rgba(14,132,183, 0.5),
    rgba(14,132,183, .75)),
    url("../img/masthead-philosophy.jpg");
  border-bottom: 25px solid #000;
}

.masthead-contact {
  background: linear-gradient(
    rgba(140,140,140, 0.5),
    rgba(140,140,140, 0.75)),
    url("../img/masthead-contact.jpg");
  border-bottom: 25px solid rgb(183,65,14);
}

.masthead-privacy {
  background: linear-gradient(
    rgba(0,0,0, 0.25),
    rgba(0,0,0, 0.5)),
    url("../img/masthead-privacy.jpg");
  border-bottom: 25px solid #ccc;
}

.masthead {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 850px;
  width: 100%;
}

.callout {
  padding-top: 2.5%;
}

/* ----------- Footer ----------- */

.footer {
  background: #8c8c8c;
  color: white;
  margin: 0;
  padding: 5%;
  border-top: 5px solid #0e84b7;
}

.footer h6 {
  font-weight: 500;
  color: #fff;
}

.footer a {
  list-style: none;
  text-decoration: none;
  padding-right: 5%;
  color: white;
  font-weight: 200;
}

.footer a:hover {
  color: #000;
  font-weight: 700;
}


/* ---------- Overlays ---------- */

.transbox {
  margin: 15% 50% 5% 12.5%;
  padding: 5% 5% 7.5% 5%;
}

.mini-transbox {
  margin: 30% 10% 5% 10%;
  padding: 10% 5%;
}

.transbox, .mini-transbox {
  background-color: #fff;
  border-top: 5px solid #b7410e;
  opacity: 0.95;
  filter: alpha(opacity=95);
}

.transbox, .mini-transbox h4 {
  color: #b7410e;
  font-weight: 400;
}

.transbox, .mini-transbox p {
  color: #000;
  font-weight: 200;
}


/* ---------- Logos & Icons ---------- */

.logo {
  float: left;
  position: relative;
  width: 30%;
  margin: 2.5% 10%;
  padding: 2.5%;
}

.icon {
  font-family: "Raleway", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: white;
}

/* ---------- Alignment ---------- */

.right {
  display: inline-block;
  float: right;
}

.left {
  float: left;
  position: relative;
}

.center {
  text-align: center;
}

.margin {
  margin-top: 10%;
  margin-bottom: 10%;
}

.padding {
  padding: 5%;
}

.indent li {
  list-style: circle outside;
  margin-left: 2rem;
  padding-left: 1rem;
}

/* ---------- Typography overrides -------- */

.primary-color {
  color: #b7410e;
}

.secondary-color {
  color: #8c8c8c;
}

.alternate-color {
  color: #0e84b7;
}

.white {
  color: #fff !important;
}

.black {
  color: #ccc;
}

.light {
  font-weight: 200;
}

.strong {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.capitalise {
  text-transform: capitalize;
}

/* ---------- Navigation menu -------- */

.menu {
  width: 100%;
  position: relative;
  float: none;
  padding: 5%;
}

.menu a {
  display: inline;
  color: white;
  padding: 5px 20px;
  text-decoration: none;
  float: left;
}

.menu a:hover {
    background-color: rgba(256,256,256,0.75);
}

.menu a:active {
  font-weight: 700;
}

/* ------------------------------ */

/* Coping with mobile */
  
@media screen and (min-width: 0px) and (max-width: 600px) { 
  #menu { display: none; }
  #transbox { display: none; }
  #mini-transbox {
    float: none; 
    align-items: center;
    align-content: center;
    text-align: center;
    position: relative;
  }
  #logo { 
    padding: 20%;
    position: relative;
    height: auto;
    width: 40%;
    background-image: url("../img/mc-logo-large-transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  #masthead { min-height: 400px !important }
  #footer { 
    text-align: center; 
  }

}

@media screen and (min-width: 601px) { 
  #transbox { display: all; }
  #mini-transbox { display: none; }
  #logo {
    background-image: url("../img/mc-logo-white-large.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}