/* ------------------------------------------ */
/* ---------- CSS PIERRE-FATOUX.FR ---------- */
/* ------------------------------------------ */


/* --- PAGE ACCUEIL --- */

/*
@keyframes lights-home {
	0% { background-color: #6672b6; }
	25% { background-color: #da205f; }
	50% { background-color: #fcc538; }
	100% { background-color: #6672b6; }
}
*/

.card-triggers .button {
	padding: 22px 22px;
}

@keyframes lights-home {
	0% { background-color: #1175ba; }
	50% { background-color: #ee314e; }
	100% { background-color: #1175ba; }
}

#card .cover::after{
	opacity: 0.00;
	background-color: #1175ba;
	/* Nom | Durée | Fonction | Délai | Boucle */
	animation: lights-home 10s linear 1s infinite;
}

/* Card Image Mask Color */
.cover:after, .card-3d-right-side:after, .card-3d-bottom-side:after, .header:before { background: #1175ba; }

.site-title {
	font-weight: 100;
}

.card-info h2 {
	background-color: #1175ba;
	font-size: 12px;
	padding: 9px 12px;
	border-radius: 0;
}

.card-info h3 {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 400;
	padding: 6px 12px;
	margin: 0 0 0 -10px;
	color: #1175ba;
	background: #ffffff;
	margin-top: 10px;
}



html .fun-fact img {
	max-width: 70px;
	margin-bottom: 10px;
}

/* Footer */
.card-content {
	padding: 20px 80px 80px;
}

.card-footer h1 {
	font-size: 42px;
	color: #aaaaaa;
	padding: 60px 0 30px;
}


/* --- PAGE HELLO --- */

.logo-fade {
  position:relative;
  height:220px;
}

.logo-fade2 {
	margin:0 auto;
	margin-top: 14px;
	width:220px;
}

.logo-fade img {
    position:absolute;
    height:220px;
    width:220px;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
}
#f2 {
    -webkit-animation-delay: -12s;
}
#f3 {
    -webkit-animation-delay: -9s;
}
#f4 {
    -webkit-animation-delay: -6s;
}
#f5 {
    -webkit-animation-delay: -3s;
}

.service h4 {
	font-size: 13px;
	font-weight: 300;
}

.service i, .service img {
	width:70px;
}

.bottom-margin {
	margin-bottom: 30px;
}



/* --- PAGE CV --- */

.pf-photo {
	text-align: center;
	margin-bottom: 30px;
}

.pf-photo img {
	width: 250px;
}

.cv-mots {
	font-size: 22px !important;
	margin:0;
	text-align: center;
}

.cv-mots:last-child {
	margin-bottom: 42px;
}

.skill-unit .progress span {
	display:none;
}



/* --- PAGE PORTFOLIO --- */

.mfp-title {
	padding-top: 12px;
	line-height: 22px;
}



/* --- PAGE CONTACT --- */

.pf-map {
	text-align: center;
	margin-bottom: 30px;
}

.pf-map img {
	width: 300px;
}

.pf-social {
	text-align: center;
}

.pf-social img {
	width: 60px;
	margin-bottom: 16px;
}

/* Primary Button Color */
input[type=submit], 
input[type=button], 
button, 
.button {
	color: #1175ba; border-color: #1175ba;
	}
input[type=submit]:hover, 
input[type=button]:hover,
button:not(.button):hover,
.button:after {
	background: #1175ba;
	}

/* Secondary Button Color */
.button.secondary {
	color: black; border-color: black;
	}
.button.secondary:after {
	background: black;
	}
	
	
/* --- 404 --- */
	
.http-alert h1 {
	color:#1175ba;
}
	
.pf-404 {
	font-weight: 100;
	color:#1175ba;
}

.pf-404-page .site-description {
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/* --- MOBILE --- */

@media (max-width: 640px) {
	.logo-fade {
		height:180px;
	}
	.logo-fade2 {
		width:160px;
	}
	.logo-fade img {
		width: 160px;
		height:160px;
	}
	.card-content {
		padding: 20px 40px 40px;
	}
	.pf-photo img {
		width: 180px;
		margin-bottom:10px;
	}
	.pf-map img {
		width:250px;
		margin-bottom: 14px;
	}
	.entry-title {
		font-size: 40px;
		margin-bottom: 30px;
	}
	.card-info .card-desc {
		margin-top: 60px;
		color:#1175ba;
		font-size: 22px;
	}
	.card-footer h1 {
	font-size: 30px;
	}
	.service img {
		position:relative;
		right:10px;
	}
	.filters li {
		margin:.6em .2em;
	}
	.pf-social img {
		width: 46px;
	}
	.pf-404-page .site-title {
		font-size: 30px;
	}
}



/*  --------------------------------------------

	THEME - customize colors etc...
	
-------------------------------------------- */
body {
 	color: #345;
	}
/* Links */
a {
 	color: #1175ba;
	}
a:hover {
 	color: #1fa6ff;
	}

/* Text Selection */
::selection {
 	text-shadow: none; color: #333; background: #FFFFCF;
	}
::-moz-selection {
 	text-shadow: none; color: #333; background: #FFFFCF;
	}
	
/* COLORS
   ================================================== */
  
/* PRIMARY COLOR : #1175ba */
.pagination a:hover,
.navigation a:hover,
a.more-link:hover,
.event:nth-of-type(2):after,
.elementor-widget:nth-of-type(2) .event:after,
.portfolio-nav a:hover,
.skill-unit .bar .progress,
#nprogress .bar {
 	background-color: #1175ba;
	}
.bypostauthor > article,
.event h3,
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 
textarea:focus, 
input:focus, 
select:focus,
.tabs .tab-titles li a.active {
	border-color: #1175ba
	}
.event h3,
.entry-title a:hover {
	color: #1175ba
	}
#nprogress .spinner-icon {
  	border-top-color: #1175ba; border-left-color: #1175ba;
	}
	
	
	
/* Section Title Underline Color */
.section-title h2 i, .cat-links a, .filters li a:hover, .filters .current > a { box-shadow: inset 0 -6px 0px #ffac8b; }

/* Menu Selected Item Color */
.card-nav li.current_page_item a { color: #ffac8b; }