/**************************************************************
* Description: Main style sheet for Manuel Zavala Web Portfolio
* Author:   Manuel Zavala
***************************************************************/


html, body{
    background-color: #fcfcfc;
    margin: 0;
    padding: 0;
    height: 100%;
}

h1{
   font-family: 'Raleway';
   font-weight: 600;
   color: #4c4d4f;
   font-size: 32px;
}

h2{
   font-family: 'Raleway';
   font-weight: 600;
    color: #3c3d3e;
   font-size: 26px;
}

h3{
   font-family: 'Raleway';
   font-weight: 600;
   color: #4c4d4f;
   font-size: 24.5px;
}

h4{
  font-family: 'Raleway';
  font-weight: 600;
  color: #4c4d4f;
  font-size: 20px;
}

a{
   color: black;
   text-decoration: none;
}

a:hover{
    text-decoration: none;
}

a:visited{
   text-decoration: none;
}

a:active{
   text-decoration: none;
}

p{
   font-family: 'Open Sans', sans-serif;
   font-weight: 400;
   text-rendering: optimizeLegibility;
   font-size: 16px;
   color: black;
   line-height: 1.6875;
   margin-bottom: 1.333em;
}

span{
   font-family: 'Average Sans', sans-serif;
   font-size: 15px;
}

img{
  max-width: 100%;
  height: auto;
}

figure{
  margin-top: 20px;
  margin-bottom: 20px;
}

figcaption{
  font-style: italic;
  text-align: center;
  margin-top: 1%;
}

/* START PRELOADER CSS */

#preload-wrapper{
   //background-color: #191919;
    background-color: transparent;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
}

#preload-wrapper .preload-curtain{
   position: fixed;
   width: 100%;
   height: 51%;
   background-color: #222;
   z-index: 10;
}

#preload-wrapper .preload-curtain.top-curtain{
   top: 0;
}

#preload-wrapper .preload-curtain.bottom-curtain{
   bottom: 0;
}

#center-content{
    text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 11;
}

#center-content h1{
	font-size: 40px;
	color: transparent;
	animation: none;
}

#center-content h1 span {
    font-family: 'Fjalla One', sans-serif;
    font-size: 40px;
    letter-spacing: 2px;
	animation: blurFadeIn 1s ease 0.5s backwards;
	color: white;
}


.load-complete #preload-wrapper .preload-curtain.top-curtain{
   //background-color: transparent;
   -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateY(-100%); /* IE 9 */
   transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
   -webkit-transition: all 0.75s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
   transition: all 0.75s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
}

.load-complete #preload-wrapper .preload-curtain.bottom-curtain{
   //background-color: transparent;
   -webkit-transform: translateY(100%); /* Chrome, Opera 15+, Safari 3.1+ */
   -ms-transform: translateY(100%); /* IE 9 */
   transform: translateY(100%); /* Firefox 16+, IE 10+, Opera */
   -webkit-transition: all 0.75s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
   transition: all 0.75s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.load-complete #preload-wrapper{
   visibility: hidden;
   -webkit-transition: all 0.1s 0.8s ease-out; 
   transition: all 0.1s 0.8s ease-out;
}

.load-complete  #center-content{
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}

#typed{
    color: white;
    font-size: 30px;
    text-align: center;
}

.position-below{
    position: relative;
    top: -15px;
}

/* END PRELOADER CSS */

/* Override bootstrap defaults */

nav.navbar.navbar-default.navbar-static-top{
    z-index: 5;
}
#navbar{
    //z-index: 1;
}
.navbar-default {
    background-color: transparent;
    border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
    color: black;
}
.navbar-default .navbar-nav>li>a {
    color: black;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #38B8B8;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #38B8B8;
    background-color: transparent;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #38B8B8;
}


.logo{
   margin-left: 3%;
   float: left;
}

.logo h1:hover{
    color: #38B8B8;
}

#fixed-footer{
    position: fixed;
    width: 100%;
    height: 75px;
    bottom: 0;
}

#fixed-footer ul{
    list-style-type: none;
    margin: 0;
    margin-right: 85px;
}

#fixed-footer ul li{
    display: inline-block;
    margin-right: 65px;
}

#fixed-footer ul li:last-child{
    margin-left: -10px;
}

#fixed-footer ul li a:hover p{
    color: #38B8B8;
}

#footer{
    margin-top: 5%;
    height: 75px;
}

#footer ul{
    list-style-type: none;
    margin: 0;
    margin-right: 85px;
}

#footer ul li{
    display: inline-block;
    /* margin-right: 65px; */
    margin-right: 10%;
}

#footer ul li:last-child{
    margin-left: -10px;
}

#footer ul li a:hover p{
    color: #38B8B8;
}

.small-content-footer ul{
    list-style-type: none;
    margin: 0;
}

.small-content-footer ul li{
    display: inline-block;
}

.full-width-content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.full-width-content h1{
   font-family: 'Rancho';
   letter-spacing: 5px;
   font-size: 75px;
   margin: 0;
}

#page-wrapper{
   position: relative;
   width: 75%;
    min-height: 100%;
   margin: 0 auto;
    margin-top: 3%;

}

.portfolio-section{

}

.portfolio-section .web-design{
   text-align: center;
}

.portfolio-section .graphic-design{
   text-align: center;
}

.portfolio-heading{
    border: 1px solid;
    border-color: #e5e5e5 #dbdbdb #d2d2d2;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

.section-margin{
   margin-left: 7%;
}

.section-spacing{
    margin-top: 7%;
}

.project{
   display: inline-block;
   width: 300px;
   height: 150px;
   margin-bottom: 3%;
   margin-right: 2%;
   background-color: #000;
   padding: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

.project a{
   display: block;
   overflow: hidden; /* hides excess link */
   width: 100%;
   height: 100%;
   -webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
}

.project-info{
   position: relative;
   height: 100%;
   bottom: 60%;
   text-align: center;
}

.project-info .project-title{
   margin: 0;
   padding: 0;
   color: white;
   font-size: 20px;
}

.project-info .project-title::before{
   content: "Project: ";
   color: #38B8B8;
}

.hover-display{
   display: none;
   height: 100%;
}

.preview-img{
   opacity: 0.3;
}

.hover-img{
   border-radius: 5px;
}

.hover-display span{
   //position: relative; /* settings if u dont use project preview */
   //top: 40%;
   position: relative;
   bottom: 62%;
   color: white;
   font-size: 20px;
   opacity: 0;
}

.project a:hover{
   background-color: white; /* for mouse-off project blink animation */
   border-radius: 7px;
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);
}

.project a:hover .preview-img{
   display: none;
}

.project a:hover .hover-display span{
   animation: fadeIn 0.5s ease-in forwards;
}

.project a:hover .project-info{
   display: none;
}

.project a:hover .hover-display{
   display: block;
   background-color: #000;
   border-radius: 5px;
}

#collection-link{
   margin-top: -1%;
   margin-left: 7%;
   text-align: left;
}

#collection-link a:hover{
   color: #38B8B8;
}

.website-img-wrap{
   background-color: 000;
   padding: 10px;
}

.website-img-wrap img{
  height: 300px;
}

#welcome-message{
    position: fixed; /* or absolute */
    width: 55%;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    text-align: center;
}

#welcome-message a{
    color: #000;
    font-weight: bold;
}

#welcome-message a:hover{
    color: #404040;
    font-weight: normal;
}

#welcome-message p{
    font-size: 20px;
    color: #404040;
    margin: 0;
}

#welcome-message p span{
    font-family: 'Fjalla One', sans-serif;
    font-size: 45px;
    color: #000;
}

#about-stats{
    margin-top: 5%;
    margin-left: 5%;
    border: 1px solid;
    border-color: #e5e5e5 #dbdbdb #d2d2d2;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}

#about-stats ul{
    list-style-type: none;
    margin-right: 5%;
    margin-top: 3%;
}

#about-stats ul ul{
    list-style-type: disc;
    margin-right: 0;
}

#about-stats ul li{
    font-family: 'Average Sans', sans-serif;
    font-size: 20px;
    border-bottom: 1px solid black;
}

#about-stats .subcontent li{
  border-bottom: 0;
}

.about-margin{
    margin-top: 10%;
}

.portfolio-intro{

}

.portfolio-highlight{

}

/* Bootstrap progress bars */
.progress {
    height: 30px;
    margin-bottom: 25px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.progress-bar-info {
    background-color: #38B8B8;
}

.halfopacity{
  opacity: 0.5;
}

.f-left{
  float: left;
}

.f-right{
  float: right;
}

.d-block{
  display: block;
}

mark{
    background-color: transparent;
}
.white{
   color: white;
}

.black{
  color: black;
}

.blue{
   color: #38B8B8;
}

.left{
   text-align: left;
}

.center{
   text-align: center;
}

.right{
   text-align: right;
}

.entry-margin{
  margin-top: 1.333em;
}

.carousel-caption h3, .carousel-caption p{
  color: #fff;
}

.img-center{
  display: block;
  margin: 0 auto;
}

#portfolio-nav{

}

#portfolio-nav-list{
  list-style-type: none;
  text-align: center;
}

#portfolio-nav-list li{
  display: inline-block;
  margin-right: 2%;
}

#portfolio-nav-list li:last-child{
  margin-right: 0;
}

/* START ANIMATION KEYFRAMES */
/* SRC - https://coveloping.com/tools/css-animation-generator */
.typed-cursor{
    color: white;
    font-size: 30px;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulseAnimation { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}

.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(0.9);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		//text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}

@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}

/* END ANIMATION KEYFRAMES */

.footer-adjustment{
    margin-right: -80px;
}

.footer-adjustment-alt{
    margin-right: -60px;
}

.footer-adjustment-last{
    margin-right: -200px;
}

/*     SPRITES FROM http://azmind.com/2012/11/06/social-icons-sprites-35-ready-to-use-icons-psd-png-html-css/         */

.icons a {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.icons a.twitter { background: url(../images/social-icons/twitter.png) left top no-repeat; }
.icons a.dribbble { background: url(../images/social-icons/dribbble.png) left top no-repeat; }
.icons a.rss { background: url(../images/social-icons/rss.png) left top no-repeat; }
.icons a.pinterest { background: url(../images/social-icons/pinterest.png) left top no-repeat; }
.icons a.digg { background: url(../images/social-icons/digg.png) left top no-repeat; }
.icons a.flickr { background: url(../images/social-icons/flickr.png) left top no-repeat; }
.icons a.forrst { background: url(../images/social-icons/forrst.png) left top no-repeat; }
.icons a.vimeo { background: url(../images/social-icons/vimeo.png) left top no-repeat; }
.icons a.reddit { background: url(../images/social-icons/reddit.png) left top no-repeat; }
.icons a.linkedin { background: url(../images/social-icons/linkedin.png) left top no-repeat; }
.icons a.facebook { background: url(../images/social-icons/facebook.png) left top no-repeat; }
.icons a.paypal { background: url(../images/social-icons/paypal.png) left top no-repeat; }
.icons a.stumbleupon { background: url(../images/social-icons/stumbleupon.png) left top no-repeat; }
.icons a.email { background: url(../images/social-icons/email.png) left top no-repeat; }
.icons a.deviantart { background: url(../images/social-icons/deviantart.png) left top no-repeat; }
.icons a.netvibes { background: url(../images/social-icons/netvibes.png) left top no-repeat; }
.icons a.yahoo { background: url(../images/social-icons/yahoo.png) left top no-repeat; }
.icons a.github { background: url(../images/social-icons/github.png) left top no-repeat; }
.icons a.addthis { background: url(../images/social-icons/addthis.png) left top no-repeat; }
.icons a.behance { background: url(../images/social-icons/behance.png) left top no-repeat; }
.icons a.blogger { background: url(../images/social-icons/blogger.png) left top no-repeat; }
.icons a.slashdot { background: url(../images/social-icons/slashdot.png) left top no-repeat; }
.icons a.technorati { background: url(../images/social-icons/technorati.png) left top no-repeat; }
.icons a.googleplus { background: url(../images/social-icons/googleplus.png) left top no-repeat; }
.icons a.apple { background: url(../images/social-icons/apple.png) left top no-repeat; }
.icons a.myspace { background: url(../images/social-icons/myspace.png) left top no-repeat; }
.icons a.sharethis { background: url(../images/social-icons/sharethis.png) left top no-repeat; }
.icons a.yelp { background: url(../images/social-icons/yelp.png) left top no-repeat; }
.icons a.delicious { background: url(../images/social-icons/delicious.png) left top no-repeat; }
.icons a.lastfm { background: url(../images/social-icons/lastfm.png) left top no-repeat; }
.icons a.youtube { background: url(../images/social-icons/youtube.png) left top no-repeat; }
.icons a.skype { background: url(../images/social-icons/skype.png) left top no-repeat; }
.icons a.tumblr { background: url(../images/social-icons/tumblr.png) left top no-repeat; }
.icons a.aim { background: url(../images/social-icons/aim.png) left top no-repeat; }
.icons a.google { background: url(../images/social-icons/google.png) left top no-repeat; }

.icons a:hover { background-position: left -34px; }