/*
** FILE:        edg.css
** UPDATED:     03/28/2015
** DESCRIPTION: EDG stylesheet
** CREDITS:     Nathan Harris aka Derjyn
*/


/******************************************************************************/
/*** HELPERS ******************************************************************/
/***
/*** box-shadow: horizontal vertical blur spread color;
/***
/*** COLOR SCHEME:
/*** ALPHA    - rgb(220,220,189)
/*** BETA     - rgb(248,245,223)
/*** CAPPA    - rgb(201,197,175)
/*** DELTA    - rgb(122,120,108)
/*** EPSILON  - rgb(14,99,100)
/***
/******************************************************************************/

body {
  background-color: rgb(220,220,189);
}

/*** OUR WRAPPERS, AT DIFFERENT Z-INDEXES ***/
#wrapperIntro, #wrapperMain, #wrapperBase {
  height: 100%;
  left: 0;
  overflow: hidden !important;
  position: absolute;
  width: 100%;
  top: 0;
}
#wrapperIntro {
  z-index: 2;
}
#wrapperMain {
  z-index: 1;
}
#wrapperBase {
  background: rgb(205,205,205) no-repeat center center;
  z-index: 0;
}

/*** HEADINGS ***/
h1 { display: none; }
h2 {
  color: rgb(65,65,65);
  font-family: "Sarpanch";
  text-align: center;
}

/*** NAVIGATION ***/
nav {
  position: absolute;
  left: calc(50% - 190px);
  opacity: 0;
  top: 32px;
  visibility: hidden;
}
nav ul {
  font-weight: 800;
  list-style: none;
  text-transform: uppercase;
}
nav ul li { float: left; }
nav ul li a { display: block; }

/*** NAVIGATION ICONS ***/
.icon {
  background-repeat: no-repeat;
  background-size: 56px;
  height: 56px;
  width: 56px;
  -webkit-filter: invert(100%) brightness(1.4);
  filter: invert(100%) brightness(1.4);
  transition: all 500ms;
}
.icon:hover {
  -webkit-filter: invert(100%) brightness(3);
  filter: invert(100%) brightness(3);
}

#link-main { background-image: url("icon-main.png"); }
#link-portfolio { background-image: url("icon-portfolio.png"); }
#link-services { background-image: url("icon-services.png"); }
#link-team { background-image: url("icon-team.png"); }

/*** MAIN CONTENT ***/
main {
  margin: 0 auto;
  opacity: 0;
  position: relative;
  top: 128px;
  width: 512px;
}
main h2 {
  color: rgb(122,120,108);
  font-size: 2.5em;
  font-weight: 400;
  margin: 8px auto;
  text-transform: uppercase;
}
main p {
  font-family: "Raleway";
  font-weight: 400;
  text-align: justify;
  color: rgb(65,65,65);
  margin: 8px;
  padding: 8px;
}

.content {
  height: 400px;
}

/*** INTRO PANEL ***/
#panelLeft,
#panelRight {
  background-color: rgb(65,65,65);
  height: 100% !important;
  position: absolute;
  width: 50%;
  top: 0;
}
#panelLeft 	{ left: 0; }
#panelRight {	right: 0; }

#seal-left,
#seal-right {
  background-color: rgb(205,205,205);
  height: 0;
  position: absolute;
  top: 50%;
  width: 2px;
}
#seal-left { right: 0; }
#seal-right { left: 0; }

/*** BASE ***/
#baseLeft, #baseRight {
  height: 100% !important;
  position: absolute;
  width: 50%;
  top: -88px;
}
#baseLeft { left: 0; }
#baseRight { right: 0; }

/*** CORE LOGO STUFF ***/
.logo-left,
.logo-left-inner,
.logo-left-outer {
  position: absolute;
  right: 0;
}
.logo-right,
.logo-right-inner,
.logo-right-outer {
  left: 0;
  position: absolute;
}

.logo-left,
.logo-right {
  height: 512px;
  top: calc(50% - 256px);
  width: 256px;
}
.logo-left-inner,
.logo-right-inner {
  height: 192px;
  top: calc(50% - 96px);
  width: 96px;
}
.logo-left-inner { background-image: url("logo-left-inner.png"); }
.logo-right-inner {	background-image: url("logo-right-inner.png"); }

.logo-left-outer,
.logo-right-outer {
  height: 384px;
  top: calc(50% - 192px);
  width: 192px;
}
.logo-left-outer { background-image: url("logo-left-outer.png"); }
.logo-right-outer {	background-image: url("logo-right-outer.png"); }

/*** BASE LOGO MODS ***/
#baseLeft .logo-left,
#baseRight .logo-right {
  height: 512px;
  top: calc(50% - 192px);
  width: 256px;
}

#baseLeft .logo-left-outer,
#baseLeft .logo-left-inner,
#baseRight .logo-right-outer,
#baseRight .logo-right-inner {
  -webkit-filter: invert(100%) opacity(5%);
  filter: invert(100%) opacity(5%);
}
#baseLeft .logo-left-outer,
#baseLeft .logo-left-inner { right: 32px; }
#baseRight .logo-right-outer,
#baseRight .logo-right-inner { left: 32px; }

/*****************************************************************************/
/*** EOF *********************************************************************/
                                           or
            pursues or desires to obtain pain of itself, because it is
            pain, but because  occasionally circumstances occur in which
            toil and pain can procure him some great pleasure.
          </p>
        </div>
        <div id="content-portfolio" class="content">
          <h2>Portfolio</h2>
          <p>
            But I must explain to you how all this mistaken idea of
            denouncing pleasure and praising pain was born and I will
            give you a complete  account of the system, and expound the
            actual teachings of the great explorer of  the truth, the
            master-builder of human happiness.
          </p>
          <p>
            No one rejects, dislikes, or avoids pleasure i