.navbar-dark .navbar-nav .nav-link {
	color : #B0E0E6;
}

.navbar-dark .navbar-nav .nav-link:hover {
	color : #FFFFFF;
}



.jumbotron {
	padding-top : 80px;
	background-color : #e2edff;
}

.foto {
	/*-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;*/
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.foto:hover {
	/*-webkit-transition-duration: scale(1.2);
	-moz-transition-duration: scale(1.2);
	-o-transition-duration: scale(1.2);
	opacity: 1;
	z-index: 2;*/
	/*transform : translateY(10px);
	box-shadow : 2px 2px 6px 0px rgba(0,0,0,0.3);*/
	-webkit-transform: scale(1.2) rotate(1080deg);
	-moz-transform: scale(1.2) rotate(1080deg);
	-o-transform: scale(1.2) rotate(1080deg);
	-ms-transform: scale(1.2) rotate(1080deg);
	transform: scale(1.2) rotate(1080deg);
}

.jumbotron h1 {
	margin-top :10px;
	font-size : 33px;
	font-family :Stencil Std;
}

h2 {
	font-family :Stencil Std;
}

#skill {
	background-color : #e2edff;
}

#contact {
	background-color : #e2edff;
}

section {
	padding-top : 5rem;
}

.bold {
	font-weight:800;
}

/* Small devices (landscape phones, less than 576px)*/
@media (max-width: 768px) { 
	.card{
	  background-color: transparent;
	  width: 100%;
	  min-height: 800vh;
	  perspective: 1000px;
	  margin: 0 auto;
	}
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}

	.card:hover .flip-card-inner {
	  transform: rotateY(180deg);
	}
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.flip-card-front {
	  /*background-color: #bbb;*/
	  color: black;
	}

	.flip-card-back {
	  background-color: #2980b9;
	  color: white;
	  transform: rotateY(180deg);
	  font-size : 1rem;
	}
	h3 {
		font-size : 2rem;
	}
 }



/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) { 
	.card {
	  background-color: transparent;
	  width: 100%;
	  min-height: 50vh;
	  perspective: 1000px;
	}

	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  min-height: 50vh;
	  text-align: center;
	  transition: transform 0.6s;
	  transform-style: preserve-3d;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	}

	.card:hover .flip-card-inner {
	  transform: rotateY(180deg);
	}

	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  min-height: 50vh;
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	}

	.flip-card-front {
	  /*background-color: #bbb;*/
	  color: black;
	}

	.flip-card-back {
	  background-color: #2980b9;
	  color: white;
	  transform: rotateY(180deg);
	}
 }



.grid {
	margin :10px;
	display : grid;
	grid-template-columns :repeat(4, auto);
	grid-template-rows : repeat(auto, auto);
	grid-gap : 30px;
	align-items : center;
}

.grid > article {
	background : #eee5e9;
	border : none;
	box-shadow : 2px 2px 6px 0px rgba(0,0,0,0.3);
	border-radius : 20px;
	text-align : center;
	width :250px;
	min-height : 650px;
	transition : transform .3s;
}

.grid > article:hover {
	transform : translateY(10px);
	box-shadow : 2px 2px 6px 0px rgba(0,0,0,0.3);
}

.grid > article img {
	width : 100%;
	border-top-left-radius : 20px;
	border-top-right-radius : 20px;
}

.text {
	padding : 10px 20px 20px;
}

.text h4 {
	font-size : 20px;
	font-family :Stencil Std;
	color : blue;
}

.footer {
	position : relative;
	grid-area : footer;
}

.footer button {
	background : #ef6f6c;
	border-radius : 20px;
	border : none;
	color : #fff;
	padding : 10px;
	width : 100%;
	font-weight : 600;
	text-transform : uppercase;
	cursor : pointer;
	bottom : -80px;
	
}

.footer button:hover {
	background : red;
}

@media (max-width: 1000px) {
	.grid {
		margin : 0px;
		grid-template-columns : repeat(3, 1fr);
		grid-template-rows : repeat(auto, auto);
		align-items : center;
	}
	
	.grid > article {
		text-align : center;
	}
	
	.grid2 {
		margin : 0px;
		grid-template-columns : repeat(3, 1fr) !important;
		grid-template-rows : repeat(auto, auto);
		align-items : center;
	}
	
	.grid2 > article {
		text-align : center;
	}
}

@media (max-width: 768px) {
	.grid {
		grid-template-columns : repeat(2, 1fr);
	}
	
	.grid > article {
		text-align : center;
	}
	
	.grid2 {
		grid-template-columns : repeat(2, 1fr) !important;
	}
	
	.grid2 > article {
		text-align : center;
	}
}

@media (max-width: 500px) {
	.grid {
		grid-template-columns : repeat(1, 1fr);
	}
	
	.grid > article {
		text-align : center;
		width :100%;
		left : 50%;
	}
	
	.grid2 {
		grid-template-columns : repeat(1, 1fr) !important;
	}
	
	.grid2 > article {
		text-align : center;
		width :100%;
		left : 50%;
	}
}


.grid2 {
	margin :10px;
	display : grid;
	grid-template-columns :repeat(4, auto);
	grid-template-rows : repeat(auto, auto);
	grid-gap : 30px;
	align-items : center;
}

.grid2 > article {
	background : #eee5e9;
	border : none;
	box-shadow : 2px 2px 6px 0px rgba(0,0,0,0.3);
	border-radius : 20px;
	text-align : center;
	width :250px;
	height : 280px;
	transition : transform .3s;
}

.grid2 > article:hover {
	transform : translateY(10px);
	box-shadow : 2px 2px 6px 0px rgba(0,0,0,0.3);
}

.grid2 > article img {
	vertical-align :bottom;
	width : 100%;
	border-top-left-radius : 20px;
	border-top-right-radius : 20px;
}