body{
        /* font-family: 'Encode Sans Condensed', sans-serif;*/
        font-family: 'PT Serif', serif;
        font-size: 16px;
       /* font-size: 20px;
        line-height: 1.55em; */
}

html{
  height: 100%;
}

.contact{
  position: fixed;
  z-index: 10;
  color: #fff;
  border: 1px solid #fff;
  text-transform: uppercase;
  padding: .8em 1.2em .7em;
  right: 20px;
  top: 20px;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
  overflow: hidden;
}

.contact:before{
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background: white;
  transition: all .26s 0s ease-in-out;
  z-index: -1;
}

.contact.gracebible:hover{
  color: #c98300;
}

.contact.jopc:hover{
  color: #c7c7c7; /*#b62323; */
}

.contact.jcohair:hover{
  color: #a72734;
}

.contact.surveyprofiles:hover{
  color: #1514d7; //Blue
}
/* .contact.dane:hover{
//  color: #a40045;
//}

//.contact.fogafin:hover{
//  color: #115f9a;
//}

//.contact.viajes:hover{
//  color: #89b92d;
//}

//.contact:hover:before{
//  width: 100%;
//} */

.menu{
  width: 70px;
  height: 70px;
  background-color: #c98300; /* #e34925; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition:width .5s 1s cubic-bezier(0.01, 0.74, 0.4, 1), height .5s .5s cubic-bezier(0.01, 0.74, 0.4, 1), background .3s linear;
  z-index: 150;
}

.menu.jopc{
  background-color: #c7c7c7;/* #560e00; //#b62323; */
}

.menu.surveyprofiles{
  background-color: #1514d7;
}

.menu.open{
  width: 100%;
  height: 100%;
  transition:width .5s cubic-bezier(0.01, 0.74, 0.4, 1), height .5s .5s cubic-bezier(0.01, 0.74, 0.4, 1), background .3s linear;
}

.menu > a{
  position: absolute;
  height: 100%;
  width: 100%;
}

.menu.open > a{
  height: 70px;
  width: 70px;
  display: block;
  float: left;
  z-index: 151;
}

.menu.open > a:hover{
  background: transparent;
}

/*.menu > a:hover{
  background: rgba(0, 0, 0, 0.1);
}*/

.menu:hover span:before{
  top: 14px;
}

.menu.open:hover span:before{
  top: auto;
}

.menu:hover span:after{
  bottom: 14px;
}

.menu.open:hover span:after{
  bottom: auto;
}

.menu.open span{
  transition:all .3s cubic-bezier(0.01, 0.74, 0.4, 1);
  height: 0;
}

.menu span{
  width: 30px;
  height: 2px;
  background: white;
  display: block;
  position: absolute;
  top: 35px;
  left: 20px;
  transition:all 0.3s linear;
}

.menu.open span:before{
  transition:all .3s cubic-bezier(0.01, 0.74, 0.4, 1);
  top: auto;
  cursor: pointer;
} 

.menu.open span:after{
  bottom: auto;
}

.menu span:after, .menu span:before{
  content: "";
  background: white;
  position: absolute;
  width: 30px;
  height: 2px;
  transition:all .3s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu span:before{
  top: 9px;
  left: 0;
}

.menu span:after{
  bottom: 9px;
  left: 0;
}

.menu.open span:after{
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

.menu.open span:before{
  -webkit-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.menu .hidden-menu{
  opacity: 0;
  pointer-events: none;
  transition:all .3s 3s cubic-bezier(0.01, 0.74, 0.4, 1);
  width: 100%;
  position: fixed;
}

.menu .hidden-menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu .hidden-menu h6{
  font-size: 0.875em;
  text-transform: uppercase;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.2em;
}

.menu .hidden-menu ul a{
  font-size: 2em;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.menu.open .hidden-menu{
  opacity: 1;
  pointer-events:auto;
  transition:all .3s .3s cubic-bezier(0.01, 0.74, 0.4, 1);
}

/* MENU ITEM ANIMATIONS */

/* close */

.menu .hidden-menu .first h6{
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .65s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .first ul li{
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .60s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .second h6{
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .55s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .second ul li:nth-child(1){
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .50s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .second ul li:nth-child(2){
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .45s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .second ul li:nth-child(3){
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .40s cubic-bezier(0.01, 0.74, 0.4, 1);
}

 .menu .hidden-menu .second ul li:nth-child(4){
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .35s cubic-bezier(0.01, 0.74, 0.4, 1);
}

//.menu .hidden-menu .second ul li:nth-child(5){
//  opacity: 0;
//  -webkit-transform:translate(0px, -30px) scale(.9, .9);
//  -ms-transform:translate(0px, -30px) scale(.9, .9);
//  transform:translate(0px, -30px) scale(.9, .9);
//  transition:all .5s .30s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu .hidden-menu .second ul li:nth-child(6){
//  opacity: 0;
//  -webkit-transform:translate(0px, -30px) scale(.9, .9);
//  -ms-transform:translate(0px, -30px) scale(.9, .9);
//  transform:translate(0px, -30px) scale(.9, .9);
//  transition:all .5s .25s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu .hidden-menu .second ul li:nth-child(7){
//  opacity: 0;
//  -webkit-transform:translate(0px, -30px) scale(.9, .9);
//  -ms-transform:translate(0px, -30px) scale(.9, .9);
//  transform:translate(0px, -30px) scale(.9, .9);
//  transition:all .5s .20s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu .hidden-menu .second ul li:nth-child(8){
//  opacity: 0;
//  -webkit-transform:translate(0px, -30px) scale(.9, .9);
//  -ms-transform:translate(0px, -30px) scale(.9, .9);
//  transform:translate(0px, -30px) scale(.9, .9);
//  transition:all .5s .15s cubic-bezier(0.01, 0.74, 0.4, 1);
//} */

.menu .hidden-menu .third h6{
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .10s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu .hidden-menu .third ul li{
  opacity: 0;
  -webkit-transform:translate(0px, -30px) scale(.9, .9);
  -ms-transform:translate(0px, -30px) scale(.9, .9);
  transform:translate(0px, -30px) scale(.9, .9);
  transition:all .5s .05s cubic-bezier(0.01, 0.74, 0.4, 1);
}

/* open */

.menu.open .hidden-menu .first h6{
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .55s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu.open .hidden-menu .first ul li{
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .60s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu.open .hidden-menu .second h6{
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .65s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu.open .hidden-menu .second ul li:nth-child(1){
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .70s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu.open .hidden-menu .second ul li:nth-child(2){
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .75s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.menu.open .hidden-menu .second ul li:nth-child(3){
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .80s cubic-bezier(0.01, 0.74, 0.4, 1);
}

 .menu.open .hidden-menu .second ul li:nth-child(4){
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s .85s cubic-bezier(0.01, 0.74, 0.4, 1);
}

//.menu.open .hidden-menu .second ul li:nth-child(5){
//  opacity: 1;
//  -webkit-transform:translate(0px, 0px) scale(1, 1);
//  -ms-transform:translate(0px, 0px) scale(1, 1);
//  transform:translate(0px, 0px) scale(1, 1);
//  transition:all .5s .90s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu.open .hidden-menu .second ul li:nth-child(6){
//  opacity: 1;
//  -webkit-transform:translate(0px, 0px) scale(1, 1);
//  -ms-transform:translate(0px, 0px) scale(1, 1);
//  transform:translate(0px, 0px) scale(1, 1);
//  transition:all .5s .95s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu.open .hidden-menu .second ul li:nth-child(7){
//  opacity: 1;
//  -webkit-transform:translate(0px, 0px) scale(1, 1);
//  -ms-transform:translate(0px, 0px) scale(1, 1);
//  transform:translate(0px, 0px) scale(1, 1);
//  transition:all .5s 1s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

//.menu.open .hidden-menu .second ul li:nth-child(8){
//  opacity: 1;
//  -webkit-transform:translate(0px, 0px) scale(1, 1);
//  -ms-transform:translate(0px, 0px) scale(1, 1);
//  transform:translate(0px, 0px) scale(1, 1);
//  transition:all .5s 1.05s cubic-bezier(0.01, 0.74, 0.4, 1);
//}

.menu.open .hidden-menu .third h6{
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
  transition:all .5s 1.10s cubic-bezier(0.01, 0.74, 0.4, 1);
}

//.menu.open .hidden-menu .third ul li{ not me
//  opacity: 1;
//  -webkit-transform:translate(0px, 0px) scale(1, 1);
//  -ms-transform:translate(0px, 0px) scale(1, 1);
//  transform:translate(0px, 0px) scale(1, 1);
//  transition:all .5s 1.15s cubic-bezier(0.01, 0.74, 0.4, 1);
//} */

/* fin menu item animations */


.hidden-menu h6{
  margin-top: 2em;
  margin-bottom: 0;
}

#fp-nav h6{
  color: #fff;
  position: absolute;
  left: 20px;
  width: 400px;
  top: -3px;
}

#fp-nav a h6{
  opacity: 0;
  -webkit-transform:translate(10px, 0);
  -ms-transform:translate(10px, 0);
  transform:translate(10px, 0);
  pointer-events:none;
  font-size: .9rem;
}

#fp-nav a.active h6{
  opacity: 1;
  transition: all 0.3s ease-in-out 0.2s;
  pointer-events:auto;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
}

#fp-nav a:hover h6{
  opacity: .6;
  pointer-events:auto;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
  transition: all 0.3s ease-in-out;
}

.loader{
  position: fixed;
  z-index: 200;
  transition: all .4s cubic-bezier(0.63,1, 0.3, 1);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.loader:before, .loader:after{
  position: absolute;
  width: 100%;
  height: 50%;
  content: "";
  /* background-image:url(../img/pat-dark.jpg); */
  background-color: #222;  
  transition: all .4s cubic-bezier(0.63,1, 0.3, 1) .4s;
  background-attachment: fixed;
}

.loader:after{
  top: 50%;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
}

.loader.no-visible{
  top: 29px;
  bottom: 29px;
  left: 29px;
  right: 29px;
  pointer-events:none;
}

.loader.no-visible.exit{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
}

.loader.no-visible.exit:before{
  width: 100%;
}

.loader.no-visible.exit:after{
  -webkit-transform:scale(1, 1);
  -ms-transform:scale(1, 1);
  transform:scale(1, 1);
}

.loader.no-visible:before{
  width: 0%;
}

.loader.no-visible:after{
  -webkit-transform:scale(0, 1);
  -ms-transform:scale(0, 1);
  transform:scale(0, 1);
}

.logo h1 a{
  color: white;
  opacity: .8;
  transition: all .2s linear;
}

.logo h1{
  font-size: .75rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: initial;
  color: white;
  position: absolute;
  top: 30px;
  left: 90px;
  letter-spacing: .4em;
  text-transform: uppercase;
  z-index: 10;
  opacity: .85;
}

.logo h1 span{
  text-transform: none;
  /*font-style: italic;*/
  letter-spacing: .2em;
  opacity: .7;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

.logo a:hover{
  opacity: 1;
  text-shadow:0px 0px 3px rgba(255, 255, 255, .4);
}

.relative{
  position: relative;
}




@-webkit-keyframes colorWow{
  0%{
    background-color: #181818; /* black */
  }
  7%{
    background-color: #fe8507; /* orange */
    opacity: 1;
  }
  15%{
    background-color: #b62323; /*red */
  }
  30%{
    background-color: #11619C; /* blue */
  }
  45%{
    background-color: #994aca; /* purple */
  }
  60%{
    background-color: #a43644; /* dark moderate red */
  }
  75%{
    background-color: orange;
  }
  90%{
    background-color: #3a9fd9; /* light blue */
    opacity: 1;
  }
  100%{
    background-color: #fe8507; /* orange */
  }
}

@keyframes colorWow{
  0%{
    background-color: #181818;
  }
  7%{
    background-color: #fe8507;
    opacity: 1;
  }
  15%{
    background-color: #b62323;
  }
  30%{
    background-color: #11619C;
  }
  45%{
    background-color: #994aca;
  }
  60%{
    background-color: #a43644;
  }
  75%{
    background-color: orange;
  }
  90%{
    background-color: #3a9fd9;
    opacity: 1;
  }
  100%{
    background-color: #fe8507;
  }
}

.logo-load{
  width: 100%;
  height: 27px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  transition: all .2s ease-in-out;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
  opacity: 1;
  text-align: center;
  letter-spacing: .7em;
  -webkit-transform-origin:bottom;
  -ms-transform-origin:bottom;
  transform-origin:bottom;
  z-index: 10;
  perspective:1000;
}

.loader.no-visible .logo-load{
  opacity: 0;
  -webkit-transform:translate(0px, -10px);
  -ms-transform:translate(0px, -10px);
  transform:translate(0px, -10px);
}

@-webkit-keyframes bg-mov{
  0%{
    background-position: left;
  }
  100%{
    background-position: right;
  }
}

@keyframes bg-mov{
  0%{
    background-position: left;
  }
  100%{
    background-position: right;
  }
}


@-webkit-keyframes colorWowclip{
  0%{
    color: #181818;
  }
  7%{
    color: #fe8507;
    opacity: 1;
  }
  15%{
    color: #b62323;
  }
  30%{
    color: #11619C;
  }
  45%{
    color: #994aca;
  }
  60%{
    color: #a43644;
  }
  75%{
    color: orange;
  }
  90%{
    color: #3a9fd9;
    opacity: 1;
  }
  100%{
    color: #fe8507;
  }
}

@keyframes colorWowclip{
  0%{
    color: #181818;
  }
  7%{
    color: #fe8507;
    opacity: 1;
  }
  15%{
    color: #b62323;
  }
  30%{
    color: #11619C;
  }
  45%{
    color: #994aca;
  }
  60%{
    color: #a43644;
  }
  75%{
    color: orange;
  }
  90%{
    color: #3a9fd9;
    opacity: 1;
  }
  100%{
    color: #fe8507;
  }
}



.no-backgroundcliptext .gradient{
  background: none;
  color: white;
  -webkit-animation-name: colorWowclip;
  animation-name: colorWowclip;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-counts: infinite;
  animation-iteration-counts: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.gradient{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe8507+0,b62323+16,11619c+32,994aca+50,a43644+67,ffa500+85,3a9fd9+100 */
  background: rgb(254,133,7); /* Old browsers */
  background: -moz-linear-gradient(-45deg,  rgba(254,133,7,1) 0%, rgba(182,35,35,1) 16%, rgba(17,97,156,1) 32%, rgba(153,74,202,1) 50%, rgba(164,54,68,1) 67%, rgba(255,165,0,1) 85%, rgba(58,159,217,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(254,133,7,1) 0%,rgba(182,35,35,1) 16%,rgba(17,97,156,1) 32%,rgba(153,74,202,1) 50%,rgba(164,54,68,1) 67%,rgba(255,165,0,1) 85%,rgba(58,159,217,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(254,133,7,1) 0%,rgba(182,35,35,1) 16%,rgba(17,97,156,1) 32%,rgba(153,74,202,1) 50%,rgba(164,54,68,1) 67%,rgba(255,165,0,1) 85%,rgba(58,159,217,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe8507', endColorstr='#3a9fd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-size: 700%;
  -webkit-animation-name: bg-mov;
  animation-name: bg-mov;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-counts: infinite;
  animation-iteration-counts: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding:5px; 
  -webkit-background-clip: text;
  color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  margin:auto;
}

.gradient.first{
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-transition: -webkit-transform .4s linear;
  -ms-transition: -ms-transform .4s linear;
  transition: transform .4s linear;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gradient.first.active{
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.gradient.second{
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s linear;
  -ms-transition: -ms-transform .4s linear;
  transition: transform .4s linear;
}

.gradient.second.active{
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}


@-webkit-keyframes expand{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

@keyframes expand{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

.logo-load:after{
  position: absolute;
  content: "";
  bottom: 11px;
  width: 100%;
  left: 0;
  height: 1px;
  background-color: #333;
  -webkit-animation-name: expand;
  animation-name: expand;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-counts: infinite;
  animation-iteration-counts: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: -1;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,333333+100 */
  background: rgb(17,17,17); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(17,17,17,1) 0%, rgba(51,51,51,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(17,17,17,1) 0%,rgba(51,51,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(17,17,17,1) 0%,rgba(51,51,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#333333',GradientType=1 ); /* IE6-9 */

}

#fullpage{
  opacity: 0;
}

#fullpage.visible{
  opacity: 1;
}

body #fp-nav{
  opacity: 0;
}

body #fp-nav.visible{
  opacity: 1;
}

body{
  background-color: #222; /* me main body */
}


.intro-project{
  color: white;
}

.intro-project h2{
  font-size: 3.3em;
  position: relative;
  margin-top: .2em;
  margin-bottom: 1em;
  line-height: 100%;
}

.intro-project h2:after{
  content: "";
  width: 0px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -13px;
  background: white;
  height: 2px;
  transition: all .6s cubic-bezier(0.63,-2, 0.3, 2) 1s;
}

.intro-project.active h2:after{
  width: 35px;
}

.intro-project h6{
  letter-spacing: 0.2em; 
  opacity: 0;
  -webkit-transform:translate(0px, 10px);
  -ms-transform:translate(0px, 10px);
  transform:translate(0px, 10px);
  transition: all .6s cubic-bezier(0.19, 1, 0.22, 1);
  font-size: 0.875em;
  margin: 0;
}

.intro-project.active h6{
  transition: all .6s cubic-bezier(0.19, 1, 0.22, 1) 1s;
  -moz-osx-font-smoothing: initial;
  opacity: 1;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
}

.intro-project .large-4{
  opacity: 0;
  -webkit-transform:translate(0px, 10px);
  -ms-transform:translate(0px, 10px);
  transform:translate(0px, 10px);
}

.intro-project .large-4:nth-child(1){
  transition: all .6s 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.intro-project .large-4:nth-child(2){
  transition: all .6s 1.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.intro-project .large-4:nth-child(3){
  transition: all .6s 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.intro-project .large-4:nth-child(4){
  transition: all .6s 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.intro-project.active .large-4{
  opacity: 1;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
}

.intro-box{
  opacity: 0;
  -webkit-transform:translate(0px, -10px);
  -ms-transform:translate(0px, -10px);
  transform:translate(0px, -10px);
  transition: all .6s 2s cubic-bezier(0.19, 1, 0.22, 1);
  margin-top: 3em;
  padding: 3em;
  position: relative;
}

.intro-box h5{
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.intro-box span{
  background: white;
  width: 1px;
  height: 70px;
  margin: auto;
  position: absolute;
  bottom: -35px;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transform:translate(0px, -10px);
  -ms-transform:translate(0px, -10px);
  transform:translate(0px, -10px);
  transition: all .6s 2.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.intro-box span:before, .intro-box span:after{
  content: "";
  position: absolute;
  width: 1px;
  height: 15px;
  background: white;
  bottom: -2px;
}

.intro-box span:before{
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  transform:rotate(-45deg);
  left: -6px;
}

.intro-box span:after{
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
  right: -6px;
}

.intro-project.active .intro-box{
  opacity: 1;
  -webkit-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate(0px, 0px);
}

.intro-project.active .intro-box span{
	opacity: 1;
  	-webkit-transform:translate(0px, 0px);
  	-ms-transform:translate(0px, 0px);
  	transform:translate(0px, 0px);
}

.first-look{
  color: white;
  margin-top: 5em;
}

h6.subtitle{
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  margin-bottom: 3.5rem;
  position: relative;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

h6.subtitle:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 30px;
  height: 1px;
  margin: auto;
  bottom: -15px;
  background: white;
}

.main-container{
  padding: 6px;
  position: relative;
}

.main-container:before, .main-container:after{
  height: 100%;
  content: "";
  position: absolute;
  width: 1px;
  top: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.2+0,0+100 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.main-container:before{
  left: 0px;
}

.main-container:after{
  right: 0px;
}

.browser-header{
  border: rgba(255, 255, 255, 0.2) solid 1px;
  border-radius: 5px 5px 0px 0px;
  height: 38px;
  width: 100%;
  position: relative;
}

.browser-header:before{
  content: "";
  position: absolute;
  width: 299px;
  height: 26px;
  //* background: url(../img/projects/unit-victims/browser-1.png);
  bottom: 0;
  left: 15px;  
}

.browser-header:after{
  content: "";
  position: absolute;
  right: 15px;
  width: 18px;
  height: 18px;  
 //* background: url(../img/projects/unit-victims/browser-2.png);
  bottom: 7px;
}

.responsive-show{
  position: relative;
  margin-top: -8em;
  text-align: right;
}

.responsive-show img.smph{
  position: absolute;
  left: 1em;
  z-index: 10;
  bottom: -3em;
}

.smph.fadeRight{
  transition: all 1.5s .3s cubic-bezier(0.19, 1, 0.22, 1);
}

.font-color{
  padding: 10em 0 5em;
  color: white;
  margin-top: -5.5em;
}

.color-t{
  background: white;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  color: #353535;
  margin-bottom: 1em;
  padding:8em 1em .6em;
  position: relative;
  text-transform: uppercase;
}

.color-t:after{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 45px;
  content: "";
}

.font-color .font-name{
  font-size: 1.75rem;
}

.font-color .abc{
  letter-spacing: 0.33em;
}

h6 span{
  font-family: 'Goudy Old Style', serif;
  text-transform: uppercase;
  font-style: italic;
  font-size: 2em;
}

.ui-elements{
  color: white;
  padding: 5em 0;
}

.ui-elements img{
  margin-bottom: 1.5em;
  max-width: 95%;
}

.ui-elements img.left{
  margin-top: 3em;
}

.ui-elements img.right{
  margin-top: 2em;
}

.responsive-layout img{
  width: 1090px;
}

.responsive-layout h6.subtitle:after{
  left: 0;
  margin: initial;
}

.editorial, .character{
  background: #f8f8f8;
  color: #555;
  padding-top: 6em;
  position: relative;
}

.editorial p{
  margin-bottom: 2em;
}

.editorial h6.subtitle:after{
  background: #555;
}

.character h6.subtitle:after{
  background: #555;
}

.editorial img{
  position: absolute;
  bottom: 0;
}

.editorial img.e-1{
  position: relative;
  z-index: 3;
}

.editorial .e-2{
  right: 15%;
  z-index: 2;
}

.editorial .e-3{
  right: 5%;
  z-index: 1;
}

.editorial .e-4{
  left: 15%;
  z-index: 2;
}

.editorial .e-5{
  left: 5%;
  z-index: 1;
}

.browser-down img{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.browser-down img:nth-child(1){
  left: 0;
  z-index: 1;
}

.browser-down img:nth-child(2){
  margin: auto;
  z-index: 3;
  position: relative;
}

.browser-down img:nth-child(3){
  right: 0;
  z-index: 1;
}

.browser-down img:nth-child(4){
  right: 0;
  z-index: 1;
}

.thanks{
  padding: 10em 0 14em;
}

.thanks h6{
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875em;
  color: #6c6b6a;
  margin-bottom: 1em;
}

.thanks h6 a{
  color: #333;
  text-decoration: underline;
}

.thanks h2{
  color: #353535;
  font-size: 2rem;
}

.next-project{
  color: white;
  padding: 7em 0em 6em;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  position: relative;
  transition: all 1.5s linear;
  background-size: cover;
}


.next-project h2{
  padding-bottom: .6em;
  display:inline-block;
  border-bottom: 1px solid white; 
  position: relative;
  transition: all .4s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.next-project:hover h2{
  -webkit-transform:translate(15px, 0);
  -ms-transform:translate(15px, 0);
  transform:translate(15px, 0);
}

.next-project:after{
  content: "";
  height: 4px;
  width: 0%;
  position: absolute;
  bottom: 0;
  transition: all .4s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.next-project:hover:after{
  width: 100%;
}

.next-project a{
  color: white;
}

.next-project h2:before, .next-project h2:after{
  height: 1px;
  width: 25px;
  background: white;
  content: "";
  position: absolute;
  right: -6px;
}

.next-project h2:before{
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
  bottom: 7px;
}

.next-project h2:after{
  -webkit-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
  bottom: -9px;
}

.next-project h6{
  text-transform: uppercase;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.875em;
}


.s-magic{
  opacity: 0;
}

.s-animate.fadeInDown{
  opacity: 0;
  -webkit-transform:translate(0px, 50px) scale(.9, .9);
  -ms-transform:translate(0px, 50px) scale(.9, .9);
  transform:translate(0px, 50px) scale(.9, .9);
}

.fadeInDown{
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
}

.s-animate.fadeLeft{
  opacity: 0;
  -webkit-transform:translate(50px, 0px) scale(.9, .9);
  -ms-transform:translate(50px, 0px) scale(.9, .9);
  transform:translate(50px, 0px) scale(.9, .9);
}

.fadeLeft{
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 1;
  -webkit-transform:translate(0px, 0px) scale(1, 1);
  -ms-transform:translate(0px, 0px) scale(1, 1);
  transform:translate(0px, 0px) scale(1, 1);
}

.s-animate.fadeRight{
  opacity: 0;
  -webkit-transform:translate(-50px, 0px) scale(.9, .9);
  -ms-transform:translate(-50px, 0px) scale(.9, .9);
  transform:translate(-50px, 0px) scale(.9, .9);
}

.e-2.fadeRight{
  transition: all 1.5s .35s cubic-bezier(0.19, 1, 0.22, 1);
}

.e-3.fadeRight{
  transition: all 1.5s .7s cubic-bezier(0.19, 1, 0.22, 1);
}

.e-4.fadeLeft{
  transition: all 1.5s .35s cubic-bezier(0.19, 1, 0.22, 1);
}

.e-5.fadeLeft{
  transition: all 1.5s .7s cubic-bezier(0.19, 1, 0.22, 1);
}

.fadeRight{
	transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 1;
	-webkit-transform:translate(0px, 0px) scale(1, 1);
  	-ms-transform:translate(0px, 0px) scale(1, 1);
  	transform:translate(0px, 0px) scale(1, 1);
}

.s-animate.flipY{
	opacity: 0;
	-webkit-transform:rotateY(90deg);
	-ms-transform:rotateY(90deg);
	transform:rotateY(90deg);
}

.flipY{
	transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 1;
	-webkit-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

/* SHARE STYLES */

.thanks .share-button.sharer-0 label{
    display: none;
}

.thanks .share-button.sharer-0 .social.networks-5.center{
    margin-left: auto;
    margin-right: auto;
}

.thanks .share-button.sharer-0 .social.top {
    margin-top: 0em;
    margin-bottom: 1em;
}

.thanks .share-button.sharer-0{
    width: auto;
}

.thanks .share-button.sharer-0 .social ul li{
    border-radius: 100%;
    line-height: 0;
    height: auto;
    width: 50px;
    padding: 25px 0;
    margin: 0 10px;
    position: relative;
}

.thanks .share-button.sharer-0 .social{
  visibility: visible;
  opacity: 1;
}

.thanks .share-button.sharer-0 .social li[class*=pinterest]{
  border:1px solid #ce2020;
  background: transparent;
}

.thanks .entypo-pinterest:before{
  color: #ce2020;
}

.thanks .share-button.sharer-0 .social.networks-5, .share-button.sharer-0 .social.networks-5 ul{
  width: 285px;
}

.thanks .share-button.sharer-0 .social li[class*=twitter]{
  border:1px solid #1da1f2;
  background: transparent;
}

.thanks .share-button.sharer-0 .social li:after{
  position: absolute;
  content: "";
  top: -3px;
  right: -3px;
  left: -3px;
  bottom: -3px;
  margin: auto;
  border-radius: 100%;
  -webkit-transform:scale(0, 0);
  -ms-transform:scale(0, 0);
  transform:scale(0, 0);
  transition: all .4s cubic-bezier(0.01, 0.74, 0.4, 1);
}

.thanks .share-button.sharer-0 .social li:hover:after{
  -webkit-transform:scale(1, 1);
  -ms-transform:scale(1, 1);
  transform:scale(1, 1);
}

.thanks .share-button.sharer-0 .social li:before{
  z-index: 10;
  position: relative;
}

.thanks .share-button.sharer-0 .social li:hover:before{
  color: white;
}

.thanks .share-button.sharer-0 .social li[class*=twitter]:after{
  background: #1da1f2;
}

.thanks .share-button.sharer-0 .social li[class*=pinterest]:after{
  background: #ce2020;
}

.thanks .share-button.sharer-0 .social li[class*=facebook]:after{
  background: #3b5998;
}

.thanks .share-button.sharer-0 .social li[class*=paper-plane]:after{
  background: #42c5b0;
}

.thanks .entypo-twitter:before{
  color: #1da1f2;
}

.thanks .share-button.sharer-0 .social li[class*=facebook]{
  border:1px solid #3b5998;
  background: transparent;
}

.thanks .entypo-facebook:before{
  color: #3b5998;
}

.thanks .share-button.sharer-0 .social li[class*=gplus]{
  display: none;
}

.thanks .share-button.sharer-0 .social li[class*=paper-plane]{
  border:1px solid #42c5b0;
  background: transparent;
}

.thanks .entypo-paper-plane:before{
  color: #42c5b0;
}

/* me.about-link{
//  color: white;
//  position: fixed;
//  bottom: 20px;
//  left: 20px;
//  z-index: 100;
//} */

.show-small-landscape{
  display: none;
}

.show-small-portrait{
  display: none;
}

.menu .hidden-menu ul a.active{
  text-decoration: line-through;
}

.img gbcSeats {
    float: right;
}

/* #img vick {
//  border: 5px solid red; 
//  background-color: red;
//  float: right;
//  width: 190px;
//  height: 190px;
//  box-sizing: border-box;
//  border-radius: 90.5px;
//  -moz-border-radius: 90.5px; //firefox
//  -webkit-border-radius: 90.5px; //safari
  
//} */

#pike {
/*     width: 190px;
//    border-radius: 50%; */
  border: 5px solid red; 
  background-color: red;
/*   float: right; */
  width: 190px;
  height: 190px;
  box-sizing: border-box;
  border-radius: 90.5px;
  -moz-border-radius: 90.5px; /* firefox */
  -webkit-border-radius: 90.5px; /* safari */
}

#halsted {
    width:190px;
    border-radius: 90.5px;
}

@media screen and (max-width: 500px) and (orientation:portrait){
  .editorial img{
    position: relative;
  }

  .browser-down img{
    position: relative;
  }

  .logo h1{
    letter-spacing: .2em;
  }

  .logo h1 span{
    letter-spacing: .1em;
    display: inline-block;
    width: 100px;
    vertical-align: top;
  }

  .contact{
    background: rgba(0, 0, 0, 0.3);
    right: 10px;
  }

  .responsive-show img.smph{
    width: 100px;
  }

  .responsive-show img.tbl{
    width: 250px;
  }

  .font-color{
    padding-left: 1em;
    padding-right: 1em;
  }

  .ui-elements img.right{
    margin-top: 0;
  }

  .gray.jopcinc img{
    margin-bottom: 1.5em;
  }

  .browser-down img{
     margin-bottom: 1.5em;
  }

  .browser-down img:nth-child(2){
     margin-bottom: 1.5em;
  }

  .menu .hidden-menu ul a{
    font-size: 1.5em;
  }

  .intro-box{
    padding:2em;
  }

  .editorial .e-2, .editorial .e-4{
    right: auto;
    left: auto;
    width: 49%;
    display: inline-block;
  }

  .hide-small-portrait{
    display: none;
  }

  .show-small-portrait{
    display: block;
  }

  .editorial img{
    margin-bottom: 1em;
  }

  .gray.jopcinc, .browser-down, .editorial{
    overflow-x: hidden;
    width: 100%;
  }

  .responsive-show{
    padding-right: 24px; 
  }


}

@media screen and (max-width:750px) and (orientation:landscape){
  .hide-small-landscape{
    display: none;
  }

  .show-small-landscape{
    display: block;
  }

  .browser-down.jopcinc img:nth-child(1), .browser-down.jopcinc img:nth-child(3){
    width: 300px;
  }

  .contact{
    background: rgba(0, 0, 0, 0.3);
    right: 10px;
  }

  img.tbl{
    width: 400px;
  }

  .responsive-show{
    text-align: center;
  }

  .responsive-show img.smph{
    width: 100px;
    left: 8em;
  }

  .ui-elements img{
    max-width: 100%;
  }

  .gray.jopcinc{
    overflow-x: hidden;
    width: 100%;
  }

  .editorial{
    overflow: hidden;
  }

  .editorial .e-2{
    right: 0;
    bottom: -70px;
  }

  .editorial .e-4{
    left: 0;
    bottom: -70px;
  }

  .menu .hidden-menu ul a{
    font-size: 1.4em;
  }

  .menu .hidden-menu ul {
    width: 70%;
    margin: auto;
  }

  .menu .hidden-menu ul li{
    width: 49%;
    display: inline-block;
  }

  .hidden-menu h6{
    margin-top: 1em;
  }
}