@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'kiona';
	src: url('../fonts/Kiona-Regular.ttf') format('truetype'),
		 url('../fonts/Kiona-Light.ttf') format('truetype'),
		 url('../fonts/Kiona-Itallic.ttf') format('truetype');
	font-display: auto;
}

@font-face {
	font-family: 'kionabold';
	src: url('../fonts/Kiona-Bold.ttf') format('truetype'),
		 url('../fonts/Kiona-BoldItallic.ttf') format('truetype');
	font-display: auto;
}

:root {
	--blue-lt: #bfd3e3;
	--blue: #145484;
	--blue-dk: #145484;
	--dark-grey: #424242;

	--white: #ffffff;
	--white-dk: #fafafa;

	--white-a: rgba(255,255,255,.1);
	--white-a-lt: rgba(255,255,255,.05);
	--black-a: rgba(0,0,0,.1);
	--black-a-lt: rgba(0,0,0,.05);

	--error: #f44336;
	--success: #4caf50;

	--un-xs: 5px;
	--un-xs-n: -5px;
	--un-sm: 10px;
	--un-sm-n: -10px;
	--un: 20px;
	--un-n: -20px;
	--un-lg: 40px;
	--un-lg-n: -40px;
	--un-xl: 80px;
	--un-xl-n: -80px;
	--un-xxl: 120px;
	--un-xxl-n: -120px;

	--shadow: 0 5px 20px rgba(0,0,0,.05);
	--shadow-lg: 0 5px 20px rgba(0,0,0,.1);	
	
}

body {
	color: var(--purple-dk);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1 0 auto;
}

section {
	padding: var(--un-xl) 0;
}

blockquote {
	border-left: 5px solid var(--purple) !important;
	padding-left:var(--un);
}

img, iframe {
	vertical-align: middle;
}

img {
	width: 100%;
}

figure {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, p, blockquote, ul, figure {margin: var(--un) 0 !important;}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child, blockquote:first-child, ul:first-child, figure:first-child {margin-top: 0 !important;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child, p.last-child, blockquote:last-child, ul:last-child, ul.last-child, figure:last-child {margin-bottom: 0 !important;}

::selection{color: var(--white); background: var(--purple);}
::-moz-selection{color: var(--white); background: var(--purple);}

/********* HELPERS ***********/

.blue-lt {background: var(--blue-lt) !important;}
.blue {background: var(--blue) !important;}
.blue-dk {background: var(--blue-dk) !important;}

.blue-lt-text {color: var(--blue-lt) !important;}
.blue-text {color: var(--blue) !important;}
.blue-dk-text {color: var(--blue-dk) !important;}

.kiona {font-family: 'kiona', sans-serif;}
.kionabold {font-family: 'kionabold', sans-serif;}

.display-flex {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}

.flex {
	display: flex !important;
	align-items: center;
}

a {color: var(--purple);}
a.link {font-weight: 600;}
a.link:hover {text-decoration: underline;}

h1 {font-size: 2rem !important;font-family: 'kiona';}

.margin-un {margin: var(--un) 0 !important;}
.margin-t-un {margin-top: var(--un) !important;}
.margin-b-un {margin-bottom: var(--un) !important;}
.margin-t-un-sm {margin-top: var(--un-sm) !important;}
.margin-t-un-lg {margin-top: var(--un-lg) !important;}
.margin-t-un-xl {margin-top: var(--un-xl) !important;}
.margin-b-un-sm {margin-bottom: var(--un-sm) !important;}
.margin-b-un-lg {margin-bottom: var(--un-lg) !important;}
.margin-b-un-xl {margin-bottom: var(--un-xl) !important;}

.no-margin {margin: 0 !important;}
.no-margin-t {margin-top: 0 !important;}
.no-margin-b {margin-bottom: 0 !important;}

.padding-un {padding: var(--un) !important;}
.no-gutters {margin-right:0 !important;margin-left:0 !important;}
.no-gutters > .col,
.no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}


hr {border: 0; height: 1px; width: 100%; background: var(--black-a-lt); margin: var(--un-lg) 0;}
.card .card-content hr {margin: var(--un) 0;}

.parallax-container {
	position:relative;
	overflow:hidden;
	height:auto;
}
.parallax-container .parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.navbar-collapse {
	justify-content: flex-end;
}

.card {
	border-radius: 0 !important;
	box-shadow: var(--shadow-lg) !important;
	display:block !important;
	margin-bottom:var(--un);
}

.card .card-image {
	border-radius: 0 !important;
}

.card .card-body {
	padding: var(--un);
}

.section-title {
	text-align: center;
	position: relative;
	margin-bottom: var(--un-xl);
}

.section-title::after {
	content: '';
	display: block;
	width: 100px;
	height: var(--un-xs);
	background: var(--blue);
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	bottom: var(--un-lg-n);
}

.section-title.st-white-text::after {
	background: var(--white);
}

.section-title h2 {
	font-family: 'kiona';
	margin-bottom: 0 !important;
}
.section-title h3 {
	font-weight: 300;
	margin-top: 0 !important;
}

/********** BTN **************/
.btn-primary {
	background-color:var(--blue-dk) !important;
	border-color:var(--blue-dk) !important;
}
.btn:hover, .btn:active, .btn:focus {
    box-shadow: var(--shadow-lg) !important;
    background: var(--blue) !important;
}
/********* SOCIAL ***********/

ul.social-icons {list-style: none; margin: 0; padding: 0;}

ul.social-icons li {display: inline-block; margin-right: 10px;}

ul.social-icons li:last-child {margin-right: 0;}

.social-icons a.facebook {color: #1974EC;}

.social-icons a.linkedin {color: #0077B5;}

.social-icons a:hover, .social-icons a:focus {color: #ffeb3b;}

.social-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #bf360c;
	display: inline-block;
	color: var(--white);
	font-size: 17px;
	line-height: 40px;
	text-align: center;
}

.social-btn:hover, .social-btn:focus {background: #4caf50; color: var(--white);}

.social {margin-top: 25px}

#social-links-nav-bottom img {height: 22px; margin-top: 14px; margin-right: 5px; float: left;}

#social-links-nav-bottom a {transition: .3s;}

#social-links-nav-bottom a.facebook {color: #1974EC;}
#social-links-nav-bottom a.facebook:hover {color: #125cbc;}
#social-links-nav-bottom a.twitter {color: #1da1f2;}
#social-links-nav-bottom a.twitter:hover {color: #1584c4;}
#social-links-nav-bottom a.instagram {color: #1da1f2;}
#social-links-nav-bottom a.instagram:hover {color: #b22559;}

#social-buttons{
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

#social-buttons a {
	width: 50px;
	height: 50px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	transition: .3s;
}

#social-buttons a:hover {
	width: 60px;
	padding-right: 20px;
	margin-left: -10px;
}

#social-buttons a:not(:last-child) {
	margin-bottom: var(--un-sm);
}

#social-buttons a img {width: 100%}

#social-buttons a#facebook {background: #1974EC;}
#social-buttons a#facebook:hover {background: #125cbc;}
#social-buttons a#twitter {background: #1da1f2;}
#social-buttons a#twitter:hover {background: #1584c4;}
#social-buttons a#linkedin {background: #0077B5;}
#social-buttons a#linkedin:hover {background: #006091;}
#social-buttons a#instagram {background: #de2c6f;}
#social-buttons a#instagram:hover {background: #b22559;}
#social-buttons a#soccontact {background: var(--green);}
#social-buttons a#soccontact:hover {background: var(--green-dk);}

#social-buttons i {font-size: 1.5rem;}

/******** INTRODUCTION ***********/

section#introduction {
	margin:0 !important;
}
#introduction .container {
	position: relative;
	overflow: hidden;
	padding: var(--un-lg);
    box-shadow: var(--shadow-lg);
    margin-top: var(--un-xxl-n);
    z-index: 50;
    background-color:var(--white);
}
/******* SECTION 1 : presentation *************/

#presentation {
	padding: 0;
	display: flex;
	align-items: center;
	background: var(--yellow-ab);
	overflow: hidden;
	position: relative;
}
#presentation h2 {
	font-size:2rem;
	font-family:'kiona';
}
#presentation #presentation-image {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center;
}

#presentation #presentation-content {
	margin-left: 50%;
	padding: var(--un-xl) var(--un-lg);
	width: 50%;
}

/************ PROFIL ******************/

#profil{
	background-color: var(--white-dk);
}
#profil .mentorat{
    align-items: center;
    padding-left: var(--un-lg);
	font-size:1.5rem;
}
#profil h3{
	color:var(--blue-dk);
	font-size:1.3rem;
}
.profil-cta {
	text-align:center;
	padding:var(--un);
}	

/********* PORTFOLIO ***********/
#portfolio .container-fluid, #portfolio .container-sm, #portfolio .container-md, #portfolio .container-lg, #portfolio .container-xl {
  max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box, #portfolio .container-sm .portfolio-box, #portfolio .container-md .portfolio-box, #portfolio .container-lg .portfolio-box, #portfolio .container-xl .portfolio-box {
  position: relative;
  display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption, #portfolio .container-sm .portfolio-box .portfolio-box-caption, #portfolio .container-md .portfolio-box .portfolio-box-caption, #portfolio .container-lg .portfolio-box .portfolio-box-caption, #portfolio .container-xl .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(244, 98, 58, 0.9);
  transition: opacity 0.25s ease;
  text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-md .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name, #portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption, #portfolio .container-sm .portfolio-box:hover .portfolio-box-caption, #portfolio .container-md .portfolio-box:hover .portfolio-box-caption, #portfolio .container-lg .portfolio-box:hover .portfolio-box-caption, #portfolio .container-xl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
/********* SECTION 4 ********/
#section4 {
	padding: 0;
    display: flex;
    align-items: center;
    background: var(--yellow-ab);
    overflow: hidden;
    position: relative;
}
#section4 #section4-image {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}
#section4 #section4-content {
    margin-left: 50%;
    padding: var(--un-xl) var(--un-lg);
    width: 50%;
}
/********* FOOTER ***********/

.footer1 {background: #232323; padding: 30px 0 0 0; font-size: 12px; color: #999; }
	.footer1 a { color: #ccc; }
		.footer1 a:hover {color: #fff; }
	.footer1 .widget { margin-bottom:30px; }		
	.footer1 .widget-title { font-size: 17px; font-weight: bold; color: #ccc; margin: 0 0 20px; }
	.footer1 .entry-meta { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0 0 35px 0; padding: 2px 0; color: #888888; font-size: 12px; font-size: 0.75rem; }
		.footer1 .entry-meta a { color: #333333; }
		.footer1 .entry-meta .meta-in { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; }
	.follow-me-icons { font-size:30px; }		
		.follow-me-icons i { float:left; margin:0 10px 0 0; }		

.footer2 { background: #191919; padding: 15px 0; color: #777; font-size: 12px; }
	.footer2 a { color: #aaa; }
		.footer2 a:hover { color: #fff; }
		.footer2 p { margin: 0; }

	.widget-simplenav { margin-left:-5px; }		
	.widget-simplenav a{ margin:0 5px; }		
	
/********* COOKIES ***********/

#cookieChoiceInfo {
	top: initial !important;
	bottom: var(--un) !important;
	left: var(--un) !important;
	background: var(--purple) !important;
	padding: var(--un-sm) var(--un) !important;
	color: var(--white) !important;
	width: calc(100% - var(--un-lg)) !important;
}