html, body {
    height: 100%;
    margin: 0;
    min-width: 100%;
    background-color: #7C829D;
}


/***** NAV *****/

.nav {
   position: fixed;
    z-index: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

.logo {
    left:0;
    margin-top: 10px;
    width: 70%;
}

h1.h1Fixed {
    font-size: 1.6em;
    text-align: center;
    margin-top: 15px;
    width: 90%;
    color: #fff;
    font-weight: 200;
    line-height: 110%;
    
}

ul.navUl {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 250%;
    overflow: hidden;
    
}

li.navLi {
    font-size: 2em;
    white-space:nowrap;
}

li.navLi:hover {
    font-size: 2.2em;
    font-weight: bold;
}

li.navLi:active {
    font-size: 2.2em;
    color: #fff;
    font-weight: bold;
}

li.navLi:click {
    font-size: 2.2em;
    font-weight: bold;
}

.foot {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/***** HOME *****/
.home {
    width: 100%;
    background-color: #7C829D;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    z-index: -1000;
}


.fill { 
    min-height: 100%;
    height: 100%;
    max-width: 100%;
}

p.homeP {
    margin-top: 80px;
    background-color: #d8d8d8;
    width: 100%;
    padding: 15px;
    margin-left: 15px;
    height: 100%;
    font-size: 1.3em;
    z-index: 1001;
}

.bottom {
    margin-top: 30px;
    width: 100%;
}

h1.h1Home {
    position: absolute;
    z-index: 0;
    height: 20%;
    top: 85%;
    font-size: 7em;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
}

.top {
    margin-top: 30px;
    width: 100%;
}

#cf {
  position:relative;
  height:281px;
    top:50px;
  width:100%;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@-webkit-keyframes cfFadeInOut {
   0% {
     opacity:1;
   }
   25% {
    opacity:1;
  }
  75% {
    opacity:0;
  }
  100% {
   opacity:0;
 }
}

@-moz-keyframes cfFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@-o-keyframes cfFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@keyframes cfFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

#cf img.top {
  -webkit-animation-name: cfFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  -webkit-animation-direction: alternate;

  -moz-animation-name: cfFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 6s;
  -moz-animation-direction: alternate;

  -o-animation-name: cfFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 6s;
  -o-animation-direction: alternate;

  animation-name: cfFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-direction: alternate;
}


/***** ABOUT *****/
.about {
    width: 100%;
    background-color: #4187c7;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

.panbg {
    margin-left: 10px;
    width: 100%;
    margin-top: 80px;
    z-index: 1;
}

p.pAbout {
    position: absolute;
    color: #ff0;
    margin-left: 10px;
    margin-top: 0px;
    font-size: 1.2em;
    
}

h1.h1About {
    position: absolute;
    z-index: 0;
    height: 20%;
    top: 185%;
    font-size: 7em;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
    margin-left: 10px;
}
/***** DEV *****/
.developments {
    width: 100%;
    background: url(img/Dell-planCUT.jpg);
    height: 100%;
    min-height: 100%;
    width: 100%;
}

p.pDev {
    color: #ff0;
    float: right;
    margin-top: 80px;
    font-size: 1.1em;
}

.delImg {
    margin-left: 25px;
    max-width: 95%;
    margin-top: 15px;
}


.dell, .calibre, .entDrive, .station, .tam, .stJohn, .lion, .res {
    position: absolute;
    margin-top: 5px;
    border: 1px solid #fff;
    z-index: 1000;
    width: 90%;
}

.B68, .Wade {
    position: absolute;
	    margin-top: 5px;
    border: 1px solid #fff;
    z-index: 1000;
    width: 90%;
}

.tam, .stJohn, .lion, .res {
    margin-top: 100%;
}

.B68, .Wade {
	margin-top: 200%;
}

h1.h1Dev {
    position: absolute;
    z-index: 0;
    height: 20%;
    top: 285%;
    font-size: 7em;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
}

/***** SUST *****/
.sust {
    width: 100%;
    background-color: #489548;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

p.pSust {
    margin-left: 10px;
    color: #ff0;
    margin-top: 80px;
    font-size: 1.2em;
}

.sustImg {
    width: 100%;
    margin-top: 15px;
    margin-left: 10px;
}

h1.h1Sust {
    position: absolute;
    z-index: 0;
    height: 20%;
    top: 385%;
    font-size: 7em;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
}

/***** CONTACT *****/
.contact {
    width: 100%;
    background-color: #7C829D;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

p.contP {
    margin-top: 80px;
    width: 100%;
    padding: 10px;
    color:#393939; 
    background-color: #d8d8d8;
}

p.contP2 {
    margin-top: 30px;
    padding: 10px;
    color: #f7f7f7;
    background-color: #373C50;
}

.contImg {
    float: right;
    margin-top: 80px;
    width: 100%;
}

h1.h1Cont {
    position: absolute;
    z-index: 0;
    height: 10%;
    top: 485%;
    font-size: 7em;
    font-weight: 700;
    color: #fff;
    opacity: 0.7;
}