@font-face {
  font-family: 'Pacifico';
  src: url('../vendor/fonts/Pacifico-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'ptsans';
  src: url('../vendor/fonts/ptsans.ttf')  format('truetype'); /* Safari, Android, iOS */
}

html, body{
	font-family: 'ptsans', sans-serif !important;
	color: #00171F !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a{
	color: #00171F !important;
}

.color-yellow{
	color: #FFC857;
}

.fw7{
	font-weight: 700;
}

.fw5{
	font-weight: 500;
}

.flexcolcen{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.flexrowcen{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

@media only screen 
and (min-width : 1224px) {
	.flexrowcen{
		flex-direction: row;
	}
}

.cover{
	justify-content: center;
	/*background-image: url(../images/cover-2.jpg);*/
	/*background-size: cover;*/
	height: 500px;
	width: 100%;
	color: #fbffff;
	background-color: #00171f;
}

.cover *, .about-us .flexcolcen *{
	max-width: 1000px;
}

.about-us{
	justify-content: center;
	text-align: center;
	padding: 50px;
}

.about-us .feature{
	padding-bottom: 30px;
}

.about-container{
	padding: 20px;
}

.about-container h4{
	font-weight: 700;
	padding: 10px;
	padding-bottom: 8px;
}

.about-container .img{
	justify-content: center;
	margin: auto;
	width: 100px;
	height: 100px;
	background-color: #fff;
    border: 2px solid #DE9151;
    color: #DE9151;
	font-size: 40px;
	position: relative;
}

.about-container .img:hvoer{
	background-color: #fff;
	color: #DE9151;
	width: 1000px;
}

.about-container .img:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 20px solid transparent;
	border-left: 50px solid #fff;
	border-right: 50px solid #fff;
	width: 42px;
	height: 0;
}

.about-container .img:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 20px solid transparent;
	border-left: 50px solid #fff;
	border-right: 50px solid #fff;
	width: 42px;
	height: 0;
}

.work{
	background-color: #f4f5f7;
	padding: 50px;
}

.work .about-container .img{
	width: 200px;
	height: 200px;
	cursor: pointer;
}

.work .about-container p,
.work .about-container h4,
.work .about-container hr{
	display: none;
	margin-bottom: 0;
}

.work .about-container p{
	font-size: 14px;
}

.work .about-container .project:hover p,
.work .about-container .project:hover h4,
.work .about-container .project:hover hr{
	display: block;
	background-color: #000000;
}

.work:hover a{
	text-decoration: none !important;
}

.project{
	width: 200px;
	height: 200px;
	cursor: pointer;
	background-color: #fff;
    border: 2px solid #DE9151;
    color: #DE9151;
    justify-content: center;
	margin: auto;
}

.work .project hr{
	width: 100px;
	margin: 0;
}

.diamond-hr{
	border-color: #d1d1d1;
    width: 100%;
    max-width: 579px !important;
    position: relative;
}

.diamond-hr:before{
	content: "";
	position: absolute;
	transform: rotate(45deg);
	top: -5px;
	width: 10px;
	height: 10px;
	background-color: #00171F;
}

.btn-hollow{
	background-color: #00171f;
	border: 2px solid #ffffff;
	color: #fff;
	margin: 20px;
	padding: 12px 30px;
	transition: all 0.3s ease-in-out;
}

.btn-hollow:hover, .btn-hollow:focus, .btn-hollow:active{
	background-color: #ffffff;
	border: 2px solid #ffffff;
	color: #00171f;
}


footer{
	background-color: #e3e3e3;
	/*background-color: #79C376;*/
	padding: 30px 0;
	justify-content: center;
}

footer div{
	display: inline;
}

footer a{
	margin: auto 15px;
	color: #979797;
}

footer .flexrowcen{
	justify-content: center;
}

footer a:hover{
	color: #79C376;
	text-decoration: none;
}

.made-with-love{
	margin: 0;
	padding-top: 20px;
}

.fa-heart{
	color: #a83f39;
}

.fa-coffee{
	color: #593C1F;
}

.fa-heart:hover{
	cursor: pointer;
	animation: beat 1.2s ease-in-out infinite;
}

.fa-coffee:hover{
	cursor: pointer;
	transform: scale(1.5);
	animation: spin 1.2s ease-in-out infinite;
}

/* CSS ANIMATIONS */


@keyframes beat {
  0%{
	transform: scale(1.1);
  }
  30% {
	transform: scale(1.3);
  }
  50% {
	transform: scale(1.5);
  }
  70% {
	transform: scale(1.4);
  }
  75% {
	transform: scale(1.2);
  }
  100% {
	transform: scale(1);
  }
}

@keyframes spin {
  0%{
	transform: rotateY(0deg);
  }
  30% {
	transform: rotateY(60deg);
  }
  50% {
	transform: rotateY(120deg);
  }
  70% {
	transform: rotateY(180deg);
  }
  75% {
	transform: rotateY(120deg);
  }
  100% {
	transform: rotateY(0deg);
  }
}

.navbar-default{
	margin-bottom: 0;
}

/* CONTACT */
.social-links i {
  padding-left:10px;
  padding-right:10px;
	font-size: 2em;
}

@media only screen 
and (min-width : 768px) {
	.social-links i {
    padding-left:25px;
    padding-right:25px;
    font-size: 4em;
	}
}

a {
  color: #474e5d;
}

a:hover {
  color: #bb0000;
}

.fa-twitter:hover {
  color: #0084b4;
}

.fa-codepen:hover {
  color: black;
}

.fa-facebook:hover {
  color: #3b5998;
}

.fa-linkedin:hover {
  color: #007bb5;
}

.fa-instagram:hover {
  color: #e95950;
}

.fa-github-alt:hover {
  color: #333333;
}

.fa-free-code-camp:hover {
  color: #006400;
}