body {
  background-color: #FFF;
}
h1{
  font-size: 64px;
  font-weight: bold;
}
h2, h3{
  font-weight: bold;
}
img {
  max-width: 100%;
}
.display-lg {
  font-size: 32px;
  font-weight: inherit;
  text-transform: italic;
}
.scroll-to-more a {
  font-weight:bold;
  display: block;
  position: absolute;
  top: 0px;
  left: 100px;
  text-decoration: none;
  color: #df278c;
}

.scroll-to-more .fa {
  display: block;
  font-size: 64px;
  margin-top:20px;
  border: solid 2px;
  border-radius: 50%;
  width:115px;
  height:115px;
  padding:24px;
  
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: all 400ms  cubic-bezier(1,-1, 0, 1.81);
  transition: all 400ms  cubic-bezier(1,-1, 0, 1.81);
}
.scroll-to-more {
  -webkit-transform: translateY(12px);
  -ms-transform: translateY(12px);
  transform: translateY(12px);
  -webkit-transition: all 400ms  cubic-bezier(1,-1, 0, 1.81);
  transition: all 400ms  cubic-bezier(1,-1, 0, 1.81);
}
.line {
  position: relative;
  display: block;
  width: 125px;
  height:2px;
  background-color: #df278c;
  margin: 40px 0;
}
.container {
  background-color: #FFF;
}
.container-fluid {
  background-color: #1FB6FF;
}
.row {
  background-color: #FFF;
}
.content-small {
  padding-left: 80px;
}
.content-sm-space {
  padding: 80px;
}
.portfolio-grid{
 padding: 0;
}
.portfolio-item {
  padding: 0;
}
.btn {
  border-radius: 0;
}
#btn-dribbble {
  color: #ea4c89;
  border: solid 2px #ea4c89;
}
#btn-dribbble:hover {
  color: #FFF;
  background-color: #ea4c89;
}
#btn-email {
  color: #008eef;
  border: solid 2px #008eef;
}
#btn-email:hover {
  color: #FFF;
  background-color: #008eef;
}
#btn-linkedin {
  color: #0077b5;
  border: solid 2px #0077b5;
}
#btn-linkedin:hover {
  color: #FFF;
  background-color: #0077b5;
}


/* Hover effect */
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  cursor: default;
  
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(10, 150, 275, 0.05);
  webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.hovereffect:hover .overlay:hover {
  background-color: rgba(10, 150, 275, 0.8);
}
.hovereffect img {
  display: block;
  position: relative;
}
.hovereffect h2 {
  color: #FFF;
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(85px);
  -ms-transform: translateY(85px);
  transform: translateY(85px);
  -webkit-transition: all 400ms  cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 400ms  cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover h2 {
  opacity: 1;
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px);
}
.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  color: #FFF;
  border: solid 4px #FFF;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 600ms  cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
  margin: 65px 0 0 0;
  padding: 20px 40px;
}
.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.hovereffect a.info:hover {
  color: inherit;
  background-color: #FFF;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #008eef;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  z-index: 10000;
}
#overlay p {
  font-size:84px;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  top:45%;
  left: 40%;
  transform: skew(0deg, 6deg);
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
}

/* CSS for screens smaller than 600px */
@media only screen and (max-width: 600px) {
  h1 {
    font-size: 1em;
  }
}