/* //////////////////////////////// */
/* GENERAL */
/* //////////////////////////////// */

body, header, footer, main, nav, section, article, aside, div, table, tr, th, thead, tfoot, tbody, caption, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, a, img, form, input, legend, fieldset, textarea, label {
  padding: 0;
  margin: 0;
  border: 0;
  color: #162732;
  vertical-align: middle;
  text-align: center;
}



/* //////////////////////////////// */
/* LAYOUT */
/* //////////////////////////////// */

html, body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body {
  background: #7d8d98 url('http://images.becoachinggroup.com/bcg-bg-body_gradient01.png') repeat-x center top fixed;
  overflow: hidden;
}
/*
body:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 20px solid #162732;
  display: block;
}
*/
header, main, footer {
  position: relative;
  top: 0;
  left: 30%;
  width: 70%;
  min-width: 660px;
  margin-left: -60px;
  transition: margin-left .5s;
}

header {
  height: 130px;
}

main {
  display: block;
}

footer {
  padding: 20px 0;
  clear: both;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 30%;
  height: 191px;
  text-align: right;
  overflow: hidden;
  transition: height .5s, min-height .5s, margin-left .5s;
}

nav:hover {
  height: 480px;
}

article {
  margin-bottom: 40px;
}

article.third {
  width: 220px;
  background: transparent url('http://images.becoachinggroup.com/bcg-bg-fader01.png') repeat-x center 480px;
  /*
  border-radius: 15px;
  */
  float: left;
  transition: background-position .5s;
}

article.third:hover {
  background-position: center bottom;
}

nav > div {
  position: absolute;
  top: 0;
  right: 80px;
  bottom: 0;
  width: 160px;
  margin: 0 auto;
  background: transparent url('http://images.becoachinggroup.com/bcg-bg-nav01.png');
}

main > section,
footer > p {
  width: 660px;
  margin: 0 auto;
}

header h1 {
  width: 640px;
  margin: 0 auto;
  color: #887e6f;
  text-align: right;
  opacity: .5;
  transition: width .5s, margin .5s, margin-top .5s, font-size .5s, opacity .5s;
}

header h1:first-child {
  height: 90px;
  margin-top: 60px;
  text-align: left;
  opacity: 1;
  transition: width .5s, height .5s, margin-top .5s, font-size .5s, opacity .5s;
}

h2 {
  padding: 40px 0;
  margin: 20px 0;
}

h3 {
  padding: 20px 0 0;
  margin: 20px 0 10px;
}

h2:after,
h3:after,
hr:after {
  content: '. . .';
  height: 20px;
  color: #887e6f;
  text-align: center;
  display: block;
}

h2 {
  height: 20px;
  margin: 0 15px -11px;
  border-top: 1px dotted #887e6f;
}

blockquote {
  padding: 20px 80px;
  margin: 0 15px 9px;
  background: transparent url('http://images.becoachinggroup.com/bcg-bg-arrow-small01.png') no-repeat center -15px;
  border-top: 1px dotted #887e6f;
  text-align: right;
}

blockquote q {
  margin-top: 20px;
  text-align: left;
  display: block;
}

blockquote q:before {
  content: '“';
  content: open-quote;
}

blockquote q:after {
  content: '”'; content:
  close-quote;
}

article p,
hr {
  width: 420px;
  margin: 0 auto 20px;
  text-align: left;
}

article.third p {
  width: auto;
  margin: 0 15px 20px;
  min-height: 220px;
}

ul, ol {
  list-style-type: none;
}

nav ul {
  margin-top: 200px;
}

hr {
  /*
  height: 20px;
  margin: 0 auto;
  background: transparent url('http://images.becoachinggroup.com/bcg-bg-arrow-small01.png') no-repeat center -15px;
  border: 0;
  border-top: 1px dotted #887e6f;
  */
  height: 0;
  margin-bottom: 40px;
  border: 0;
  display: none;
}

a {
  text-decoration: none;
}

a:hover {
  color: #e31837;
}

nav li a {
  height: 30px;
  margin: 110px 0 -90px;
  text-transform: uppercase;
  display: block;
}

nav li a:hover {
  color: #e31837;
}

article div a {
  padding: 10px 0;
  margin: 15px;
  background: transparent url('http://images.becoachinggroup.com/bcg-bg-arrow-small01.png') no-repeat center -15px;
  border-top: 1px dotted #887e6f;
  color: #e31837;
  text-align: center;
  display: block;
}

article:hover div a {
  background-color: #e31837;
  color: #c5b8b1;
}



/* //////////////////////////////// */
/* IMAGES */
/* //////////////////////////////// */

h3 img {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

#logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 180px;
  display: block;
}

#logo img.medium {
  height: 90px;
  display: none;
}

footer img {
  width: 32px;
  height: 32px;
}

.slide img {
  width: 100%;
}

#gradient img {
  width: 100%;
}

#social img {
  width: 30px;
  height: 30px;
  margin: 25px 5px;
}



/* //////////////////////////////// */
/* CLASSES */
/* //////////////////////////////// */

.slide {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 1280px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0;
  overflow: hidden;
}

.start {
  opacity: 1;
}
/*
#slideshow .one   { background-image: url('http://images.becoachinggroup.com/bcg-img-body06.jpg'); }
#slideshow .two   { background-image: url('http://images.becoachinggroup.com/bcg-img-body04.jpg'); }
#slideshow .three { background-image: url('http://images.becoachinggroup.com/bcg-img-body03.jpg'); }
#slideshow .four  { background-image: url('http://images.becoachinggroup.com/bcg-img-body07.jpg'); }
*/

.square {
  width: 180px;
  height: 180px;
}



/* //////////////////////////////// */
/* ID SELECTORS */
/* //////////////////////////////// */

#container, #gradient, #slideshow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#gradient {
  background-color: #7d8d98;
  z-index: -1;
}

#container {
  overflow: auto;
}

#social {
  position: absolute;
  bottom: 0;
  width: 160px;
  height: 80px;
  background-color: #e31837;
  border-bottom: 1px dotted #887e6f;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}



/* //////////////////////////////// */
/* MEDIA QUERIES */
/* //////////////////////////////// */

@media all and (max-width: 720px) {

  /* SMARTPHONE */
  html, body		{ position: static; overflow: auto; }
  body			{ background: #ffffff none; }

  header,
  main,
  footer		{ left: 0; width: 100%; min-width: 300px; margin: 0; }
  header		{ height: 100px; }
  nav			{ position: absolute; left: 50%; width: 160px; height: 100px; margin-left: -80px; z-index: 1; }
  nav:hover, nav:active	{ height: 100%; }

  nav > div		{ left: 50%; margin-left: -80px; background: #ffffff none; }

  main > section,
  footer > p		{ width: auto; padding: 0 15px; margin: 0 auto; }

  header h1		{ display: none; }
  h2, h3		{ margin-top: 20px; }
  h3			{ min-width: 120px; margin-bottom: 100px; float: left; vertical-align: middle; outline: }
  h3:after		{ content: none; display: none; }

  article.third,
  article.third:hover	{ width: 300px; height: auto; padding: 15px 0; margin: 0 auto 20px; background-position: center 15px; float: none; }

  nav ul		{ margin-top: 110px; }

  main > section,
  footer > p		{ width: auto; max-width: 480px; margin: 0 auto; }

  blockquote		{ display: none; }

  article p, hr		{ width: 270px; }
  article.third p	{ width: auto; height: 240px; }

  nav li a		{ margin: 5px auto; }
  article div a		{ margin: 0 15px; }

  h3 img		{ width: 80px; height: 80px; }
  #gradient img		{ height: 100%; }
  #logo img.large	{ display: none; }
  #logo img.medium	{ left: 50%; margin-left: -80px; display: block; }

  #gradient		{ position: fixed; top: 100px; }
  #slideshow		{ display: none; }
  #container		{ position: static; }
  #social		{ background-color: transparent; border: 0; }

}

/* TABLET */
@media all and (max-width: 960px) and (min-width: 721px) {

  header,
  main,
  footer		{ min-width: 480px; margin-left: -30px; }
  nav			{ height: 101px; }
  nav:hover		{ height: 100%; }

  nav > div		{ left: 15%; }

  header h1, hr		{ width: 460px; margin-top: -20px; }
  header h1:first-child	{ margin-top: 20px; }
  h3			{ min-width: 180px; margin: -20px; float: left; vertical-align: middle; outline: }
  h3:after		{ content: none; display: none; }

  article.third,
  article.third:hover	{ width: auto; padding: 15px 0 0; margin: 0 0 20px; background-position: center top; }

  nav ul		{ margin-top: 110px; }

  main > section,
  footer > p		{ width: 480px; margin: 0 auto; }

  blockquote		{ padding: 20px 45px; }

  article p		{ width: auto; margin: 0 60px 20px; }
  article.third p	{ min-height: 180px; }

  article div a		{ margin-top: -40px; }

  #logo img.large	{ display: none; }
  #logo img.medium	{ display: block; }

}

/* WIDESCREEN */
@media all and (min-width: 1440px) {

  header, main, footer	{ margin-left: -60px; }

  nav			{ margin-left: -60px; }

  main > section,
  footer > p		{ width: 960px; margin: 0 auto; }

  article		{ column-count: 3; column-gap: 0; orphans: 3; }
  article.third		{ width: 320px; column-count: 1; }

  header h1, hr		{ width: 800px; }

  article p		{ width: auto; margin: 0 15px 20px; }
  article.third p	{ min-height: 150px; }

}



/* //////////////////////////////// */
/* TEMPORARY */
/* //////////////////////////////// */

#container { background: url('http://images.becoachinggroup.com/bcg-bg-shader03.png'); }
p a { padding: 0 !important; margin: 0 !important; line-height: 0; vertical-align: baseline; }