body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/*Navbar Styles*/
.w3-navbar { color: #fff; }
.w3-navbar.w3-animate-top { color: #444; }
.w3-navbar li a:hover { background-color: rgba(0,0,0,0.2); color: #fff; }

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('https://c2.staticflickr.com/6/5208/5308016251_3eaa8dc84d_b.jpg');
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("https://cdn.fstoppers.com/styles/full/s3/media/2014/12/1_fstoppers_davidgeffin_importanceofblackandwhite_light_shape_pattern.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("http://unsplash.com/photos/TV2gg2kZD1o/download");
    min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

#googleMap {
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* Turn off parallax scrolling for tablets and mobiles */
@media only screen and (max-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}

/* About Section */
#about {
  font-size: 1.4em;
}

/* Heart Icon */
.heart-icon {
  color: #f77;
}


/* Clearfix Hack */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* Social Media Icons */
.w3-half > a {
  text-decoration: none;
}

i.fa {
  padding-top: .2em;
  padding-left: .5em;
  padding-right: .5em;
  taransition: color 1s;
}

.fa-fire:hover {
  color: #4a4;
}

.fa-github:hover {
  color: #d6d6c2;
}

.fa-codepen:hover {
  color: #4af;
}
.fa-linkedin-square:hover
{
  color:#6cf;
}


#profile { vertical-align: middle; }