body {
    padding-top: 60px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    background: white; /*url(../images/shattered.gif);*/
    color:rgba(0,0,0,0.8);
}

a{
  color:rgb(51, 153, 187);
  color:rgba(51, 153, 187, 0.7);
  border-bottom-width:0.07em;
  border-bottom-style: solid;
  border-bottom-color:rgb(51, 153, 187);
  border-bottom-color:rgba(51, 153, 187, 0);
  transition:all 300ms ease-in-out;
}
a:hover{
  text-decoration:none;
  color:rgb(51, 153, 187);
  border-bottom-color:rgb(51, 153, 187);
  border-bottom-color:rgba(51, 153, 187, 0.7);
}

.page-header{
  border-bottom-color:rgb(51, 153, 187);
  border-bottom-color:rgba(51, 153, 187, 0.7);
  color: rgb(51, 153, 187); 
  color: rgba(51, 153, 187, 0.7);
}

#top-bar{
  width:100%;
/*    height:73px;*/
  background-color:rgba(51, 153, 187, 0.7);
  position:fixed;
  top:0;
  left:0;
  z-index:2;
}

#logo{
  width:100%;

/*  height:80px;*/
}

#logo-holder{
  float:left;
  height:73px;
  width:580px;
  overflow:hidden;
  transition:all 300ms ease-in-out 1.6s;

}

#logo-holder:hover{
  height:80px;
  transition:all 300ms ease-in-out;

}

@media (max-width: 660px){
  #logo-holder{
    width:80%;
/*    height:12.5%;*/
/*    ratio: 0.125862069 */
  }

  #logo-holder:hover{
/*    height:13.8%;*/
/*    ratio: 0.1379310345 */
  }

}
/*  .logo_path{
  stroke-dasharray:4;
  animation:pathimation 5s linear alternate infinite;
}

*/

/*  stroke-dashoffset: 1000; */ /* just the word clipped will be visible */



@-webkit-keyframes pathimation{
  from{
    stroke-dashoffset: 1754;
  }
  to{
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dotimation{
  from{
    stroke-dasharray: 2150; /* whole clip and word */
    stroke-dashoffset: 6052;
/*    stroke-dashoffset: 4706;*/
  }
  to{
/*    stroke-dashoffset: 4296; /* word and clip */
/*    stroke-dashoffset: 3862; /* word THEN clip */
    stroke-dasharray: 1716; /* word length only */
    stroke-dashoffset: 2996; /* word only clip absorbed as word finishes */


  }
}

.logo-dot-path{
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  transition:all .3s ease-in-out;
  transition-delay:.4s;

/*  -webkit-animation-name:pathimation;*/
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:3;
  -webkit-animation-timing-function:ease-in-out;/*linear;*/
  -webkit-animation-direction:alternate;
  -webkit-animation-delay:15s;
}

.logo-path {
  stroke-dasharray: 2150; /* whole clip and word */
/*  stroke-dasharray: 1716; /* word length only */


  stroke-dashoffset: 6052; /* whole clip and word*/
/*  stroke-dashoffset: 4706; /* word length only */

  transition:all 2s ease-in-out;
/*  -webkit-animation: pathimation 20s linear alternate infinite;*/
/*  -webkit-animation-name:pathimation;*/
  -webkit-animation-duration:20s;
  -webkit-animation-iteration-count:4;
  -webkit-animation-timing-function:ease-in-out;/*linear;*/
  -webkit-animation-direction:alternate;
  -webkit-animation-delay:5s;
/*  -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;*/
}

#logo{
  cursor:pointer;
}

#logo-holder:hover .logo-path, #logo-holder:active .logo-path{
  -webkit-animation: none;
/*  stroke-dashoffset: 4296;*/
/*  stroke-dashoffset: 3862;*/
  stroke-dasharray: 1716; /* word length only */
  stroke-dashoffset: 2996;

}
#logo-holder:hover .logo-dot-path, #logo-holder:active .logo-dot-path{
  -webkit-animation: none;
  transition:all .3s ease-out;
  transition-delay:.9s;
  stroke-dashoffset: 0;
}

.nav{
  float:right;
}

.nav li{
	display:block;
	float:right;

/*  border-right:1px solid white;*/
}

.nav li:first-child{
  padding-right:30px;
/*  border-right:none;*/
}

#main-nav{
	position:absolute;
  top:0;
  right:0;

	font-family:"FontSite Sans UltraLight", "Helvetica Neue UltraLight", Helvetica, sans-serif;
	color:white;
}

.nav>li>a{
  padding:16px 20px 16px 20px;
/*  padding-top:21px;*/
  display:block;
  font-size:2em;
  color:white;
  text-decoration:none;
  text-shadow: 0 2px 5px rgba(0,0,0,0.2);
  outline:none;
  -webkit-transition:all 400ms ease-in-out ;
     -moz-transition:all 400ms ease-in-out ;
       -o-transition:all 400ms ease-in-out ;
          transition:all 400ms ease-in-out ;
}

.nav>li>a:focus, .nav>li>a:hover{
/*  opacity:0.8;*/
  background:rgba(255, 255, 255,0.25);
	text-decoration:none;
	outline:none;
}


.portfolio-item {
    margin-bottom: 2em;
}

@media (max-width: 800px){
  #top-bar .nav{
    -webkit-transition:all .5s ease-in-out ;
       -moz-transition:all .5s ease-in-out ;
         -o-transition:all .5s ease-in-out ;
            transition:all .5s ease-in-out ;
    -webkit-transition-delay:1s;
       -moz-transition-delay:1s;
         -o-transition-delay:1s;
            transition-delay:1s;
  
  }
  #top-bar:hover .nav{
    opacity:0;
    -webkit-transition-delay:0s;
       -moz-transition-delay:0s;
         -o-transition-delay:0s;
            transition-delay:0s;
  }
  .nav:hover{
    opacity:1 !important;

  }

  #top-bar:hover .logo-path, #top-bar:active .logo-path{
    -webkit-animation: none;
    stroke-dasharray: 2150;
    stroke-dashoffset: 6052;

  }
 figure:hover>h3>a{
   
   
} #top-bar:hover .logo-dot-path, #top-bar:active .logo-dot-path{
    -webkit-animation: none;
    transition:all .3s ease-out;
    transition-delay:.9s;
    stroke-dashoffset: 13;
  }

  #logo:hover .logo-path, #logo:active .logo-path{
    -webkit-animation: none;
  /*  stroke-dashoffset: 4296;*/
  /*  stroke-dashoffset: 3862;*/
    stroke-dasharray: 1716; /* word length only */
    stroke-dashoffset: 2996;

  }
  #logo:hover .logo-dot-path, #logo:active .logo-dot-path{
    -webkit-animation: none;
    transition:all .3s ease-out;
    transition-delay:.9s;
    stroke-dashoffset: 0;
  }

}

@media (max-width: 767px){
  .nav{
    /*display:none;*/
  }
}

.my-gallery figure, .my-gallery figcaption{
  display:none;
}
.my-gallery figure:first-child{
  display:block;
}

.portfolio-item>a{
  position:relative;
  display:block;
}

.portfolio-item{
  cursor:pointer;
  
}
.portfolio-item:hover>h3>a{
  color:rgb(51, 153, 187);
  border-bottom-color:rgba(51, 153, 187, 0.7);
}

.portfolio-item>a>img, .portfolio-item>a>video{
  border: 3px solid white;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  -webkit-transition:all 400ms ease-in-out ;    
     -moz-transition:all 400ms ease-in-out ;
       -o-transition:all 400ms ease-in-out ;
          transition:all 400ms ease-in-out ; 
}

.portfolio-item>a>.thumb-over{
  opacity:0;
  position:absolute;
  display:none;
/*  width:700px; height:400px;*/
  top:0; left:0;
  box-shadow:none;
}

.portfolio-item:hover>a>img{
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  /*-webkit-transform:scale3d(1.01, 1.01, 1.01);
   -moz-transform:scale3d(1.01, 1.01, 1.01);
     -o-transform:scale3d(1.01, 1.01, 1.01);
        transform:scale3d(1.01, 1.01, 1.01);*/
}
.portfolio-item:hover>a>.thumb-over, .portfolio-item:hover>a>.thumb-up{
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  /*-webkit-transform:none;
   -moz-transform:none;
     -o-transform:none;
        transform:none;*/
}

.portfolio-item:hover>a>.thumb-over{
  background:white;
  box-shadow:none;
  display:block;
  opacity:1;
}

.portfolio-item>a>video.img-responsive{
  width:calc(100% - 14px);
  height:100%;
  /*  height:57.143%; /* for 700x400 videos */
}