/* @override 
	http://www.stefie.net/bootstrap/css/creative.css


/*!
 * Start Bootstrap - Creative v5.0.1 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/#231F20rockDigital/startbootstrap-creative/blob/master/LICENSE)
	http://stefie.net/bootstrap/css/creative.css
	https://www.stefie.net/bootstrap/css/creative.css
	http://www.stefie.net/css/creative.css
 */
 
 
 
/* stefie's colors - june 2019
Primary: #231F20 - warm black 
Secondary: #FDBA11 - Hamsa Yellow 
Background: #F7FBFE - ice white
Accent color:  #F05B77 - pink
*/

body,html {
	width: 100%;
	height: 100%;
	font-family: 'proxima-nova', sans-serif;
	font-style: normal;
	font-weight: 400;
 	color: #231F20;
 	font-size: 1.05rem;
 	line-height: 1.30rem;
 	background-color: #F7FBFE;
}

hr {
  max-width: 35px;
  border-width: 5px;
  border-color: #FDBA11;
  border-radius: 10px;
}

hr.light {
  border-color: #fff;
}

a {
  color: #1C2A39;
 -webkit-transition:color .5s ease;
 -moz-transition: color .5s ease;
 -o-transition: color .5s ease;
 transition: color .5s ease;
}

a:hover { 
  color: #F05B77;
  text-decoration: underline;
-webkit-transition:color .5s ease;
-moz-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}

li.nav-item
{
	padding:0.5rem;
	border-bottom: 2px solid #333;
}


.copyright
{
	border-bottom: 10px solid #FDBA11;
}


.quotefooter
{

	font-family: 'psfournier-std', sans-serif;
	font-style: italic;
	font-size: 1.1rem;
	color: #444D55;
	padding-bottom: 2rem;
	padding-top: 1.3rem;
}

.copyfooter
{
	
	color: #444D55;
	font-size: 0.90rem;
	padding-bottom: 1rem;
}

.etoile
{
		color: #444D55;
		padding-bottom: 1.3rem;
}



/* Socicon */


@font-face {
    font-family: 'socicon';
    src: url('..fonts/socicon.eot');
    src: url('../fonts/socicon.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socicon.woff') format('woff'),
         url('../fonts/socicon.woff2') format('woff2'),
         url('../fonts/socicon.ttf') format('truetype'),
         url('../fonts/socicon.svg#sociconregular') format('svg');
    font-weight: normal;
    font-style: normal;
    text-transform: initial;
    
}

[class^="socicon"], [class*=" socicon"] { /* Change to your class name, eg: icon, socicon, social... */
	font-family: 'socicon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 1rem;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 1rem 5px 5px;
}


span.socicon {
    font-family: 'socicon' !important;
	

}

a.socicon:hover
{
    font-family: 'socicon' !important;
	text-decoration: none;
	

}

a.diana

{
   
	text-decoration: underline;
	

}

/* Menu Projects */

div.work-navigation {

	background: white;
	color: #343a40;
	font-weight: 400;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	text-align: center;
	font-size: 0.95rem;
	box-shadow: 0 0 5px rgba(2, 2, 2, 0.37);
	opacity: 1;
	
}

div.work-navigation a{


	color: #343a40;
	padding-right: 3rem;
	padding-left: 3rem;
}



div.work-navigation a:hover { 
  color: #F05B77;
  text-decoration: none;
-webkit-transition:color .5s ease;
-moz-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}


@media (max-width: 576px) {

div.work-navigation a{

	color: #343a40;
	padding-right: 1rem !important;
	padding-left: 0rem !important;
	font-size: 0.9rem;

}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
	margin-left: 15px;
padding-top: 1rem;
margin-right: 15px;
}


.accroche_casestudies
{

text-align: center;
font-weight: bold;
font-style: italic;
width: 90%;
margin: 15px auto !important;
font-size: 1.5rem !important;
line-height:1.8rem!important;
}


.col-lg-62{
  position: relative;
  width: 100%;
  min-height: 1px;
  margin-bottom: 0rem !important;
}

div.feedback
{
	
	width: 100%;
	text-align: center;
	margin-top: 0rem !important;
	font: italic bold 1.2rem 'psfournier-std', serif !important;
	line-height: 2rem !important;
	margin-bottom: 2rem !important;
}


}

/* Stefie Icons */

div.prodstartegy, .interactiondesign, .usabilityevaluation
{

	width: 120px;
	height: 120px;
	  background-repeat:no-repeat;
	  -webkit-font-smoothing:antialiased;
		display:inline-block;
	  background-size: 120px;
	
}


div.prodstartegy {

		background: url('../icones/usabilityevaluation.svg');  
		background-size: 120px;
		background-repeat:no-repeat;
		background-position: center;

		
}

div.interactiondesign {

		 background: url('../icones/interactiondesign.svg');
		 background-size: 120px;
		 background-repeat:no-repeat;
		 background-position: center;
		
}


div.usabilityevaluation {

		  background: url('../icones/productstrategy.svg');
		  background-size: 120px;
		  background-repeat:no-repeat;
		  background-position: center;
}


.textventure
{
margin-top: 0rem;
margin-bottom: 2rem;
}

.legende {
	font-size: 0.9rem;
	font-style: italic;
	margin-top: 0.5rem;
	margin-bottom: 2rem;
	width: 100%;
}


.legende a {
	text-decoration: underline;
}


.accroche_casestudies
{

text-align: center;
font-weight: bold;
font-style: italic;
width: 90%;
margin: 1.5rem auto 1rem;
font-size: 2.7rem;
line-height: 2.9rem;
}

.textform
{
margin-top: 0rem;
padding: 0;
}

.portfoliotitle
{
	font-weight: bold;
	font-size: 1rem;
	line-height: 1rem;
	padding: 0;
	margin: 0 0 0.6rem;
}

.portfoliosubtitle
{
	font-size: 0.9rem;
	font-style: italic;
		line-height: 1rem;
}

/* Stefie Menu */



h1{
font-family: 'psfournier-std', sans-serif;
font-style: normal;
font-weight: 700;
text-align: left;
margin-bottom: 3rem;
line-height: 3rem;

}

h3,
h4,
h5,
h6 {
  font-family: 'psfournier-std', 'Helvetica Neue', Arial, sans-serif;
}


h2
{
font-family: 'psfournier-std', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 2rem;
margin: 0;
padding: 0 0 2rem;
line-height: 2.35rem;
width: 100%;
}

div.intro_casestudies
{
	
	width: 100%;
	text-align: center;
	margin-top: 2rem;
}

div.summary_title
{
	
	width: 100%;
	text-align: lef;
	margin-top: 2rem;
}


div.feedback
{
	
	width: 100%;
	text-align: center;
	margin-top: 2rem;
	font: italic bold 1.5rem 'psfournier-std', serif;
	line-height: 2.35rem;
	margin-bottom: 2rem;
}


p.feedback
{
	line-height: 2rem;
}

h3
{
	color: 231F20;
	font: 1.1rem 'psfournier-std', 'Helvetica Neue', Arial, sans-serif;
	font-weight: bold;
	border-bottom: 0px;
	-webkit-margin-before: 0;
	-webkit-margin-after:0;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.hrh3 {
  max-width: 12%;
  border-width: 4px;
  border-color: #F05B77;
  margin-top: 1.5rem;
}

.superh4
{
	font: italic bold 2.5rem 'psfournier-std', 'Helvetica Neue', Arial, sans-serif;
	border-bottom: 0px;
	-webkit-margin-before: 0;
	-webkit-margin-after:0;
	margin-bottom: 1rem;
	margin-top: 1rem;
}


p,
h2,
h3 {
  orphans: 3;
  widows: 3;

}
h2,
h3 {
  page-break-after: avoid;
}


.bg-primary {
  background-color: #FDBA11 !important;
  
}

.bg-dark {
  background-color: #1C2A39 !important;
}

.text-faded {
  color: rgba(28, 42, 57, 0.7);
}

section {
  padding: 0 0 03rem;
}

  #skills  {
  	padding: 0 0 3rem;
  }
  
  
  #casestudies {
    padding: 0 0 2rem;

  }

section.bgwhite
 {
	padding: 0 0 04rem;
}


.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
text-align: center;  
}

.follow
{
	margin-top: 4rem;
}


.section-heading {
  margin-top: 0;
}

::-moz-selection {
  color: #fff;
  background: #1C2A39;
  text-shadow: none;
}

::selection {
  color: #fff;
  background: #1C2A39;
  text-shadow: none;
}

img::-moz-selection {
  color: #fff;
  background: transparent;
}

img::selection {
  color: #fff;
  background: transparent;
}

img::-moz-selection {
  color: #fff;
  background: transparent;
}

#mainNav {
  background-color: #FDBA11;
  font-family: 'proxima-nova', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;

}

#mainNav .navbar-brand {
  color: #1C2A39;
  font: 1rem 'psfournier-std', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;

}

#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #FDBA11;
  
}

#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
  font-weight: 400;
  color: #231F20;

}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
color: #231F20; !important;

}


#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
  color: #1C2A39 !important;
  border-bottom: 2px solid #333 !important;
  -webkit-transition:color .5s ease !important;
  -moz-transition: color .5s ease !important;
  -o-transition: color .5s ease !important;
  transition: color .5s ease !important;
  
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover
 {
  color: #1C2A39 !important;
  text-decoration: none;
  
}


#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover
 {
  color: #1C2A39 !important;
  text-decoration: none;
  
}

#mainNav.navbar-shrink {
	background-color: #fdba11;
	box-shadow: 0 0 5px rgba(2, 2, 2, 0.37);
	opacity: 1;
}



@media (min-width: 992px) {
  #mainNav {
    border-color: transparent;
    background-color: transparent;
  }
  #mainNav .navbar-brand {
    color: rgba(28, 42, 57, 100);
  }
  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #1C2A39;
	
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link {
/*  	margin-right: 1rem;
	margin-left: 1rem;*/
  	font-variant: normal;
  	margin: 0;
  	padding-bottom: 0.15rem;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #1C2A39;
	border-bottom: 2px solid transparent;
	
	
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
  border-bottom-color: #1C2A39;    
  border-bottom-width: 2px;
  border-bottom-style: solid;
   padding-bottom: 3px;
  
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
  }
  #mainNav.navbar-shrink {
  	background-color: #fdba11;
  	box-shadow: 0 0 5px rgba(2, 2, 2, 0.37);
  	opacity: 1;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #1C2A39;
	border-bottom: 1px solid transparent;
  }
  #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
    color: #1C2A39;
		border-bottom: 1px solid transparent;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #1C2A39;
		border-bottom: 1px solid transparent;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: #552E54;
		border-bottom: 1px solid transparent;
  }
  
  li.nav-item
  {
  	padding-right: 0.5rem;
  	padding-left: 0.5rem;
  	border: none;
  }
  
  
}

header.masthead {

	background-color: #FDBA11;
  background-position: center center;
  background-size: cover;
  margin-bottom: 1rem;

}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px;
  
}

header.masthead h1 {
  font-size: 2rem;
    color: #231F20;
  margin-top:0.5rem;
	margin-bottom: 0.5rem;
	text-align: left;
	line-height: 110%;

}

header.masthead p {
  font-weight: 400;
  text-align: left;
  color: #231F20;
}





/* Portfolio */

div.intro {

	position: relative;
	float: left;
	margin: 2rem 0 2rem;
	padding-right: 3rem;
	padding-left: 0;
	padding-top: 0;
}

div.work-full h4 {
   	font-size: 0.9rem;
   	font-style: normal;
}

.skills.col-lg-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
	margin-top: 30px;
	margin-right: 0;
  padding: 0;
	margin-left: 0;
	border: no;
	position: relative;
	float: right;
	margin-bottom: 3rem;
	margin-top: 2rem;
	font-size: 0.8rem;

}


.skills li {
list-style-type: round;
list-style-position: outside;
margin: 0;
padding: 0;

}


div.work-full h3 {
   color: #231F20;
}

div.work-full div.process
{
  position: relative;
  float: left;
  width: 100%;
  
}

@media (min-width: 768px) {
  header.masthead p {
    font-size: 1.15rem;
	text-align: left;
  }
  header.masthead h1 {
    font-size: 3rem;
	margin-top: 2rem;
		margin-bottom: 2rem;
		text-align: left;
  }
}



@media (min-width: 992px) {
  header.masthead {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  header.masthead h1 {
    font-size: 3rem;
		text-align: left;
  }
}

@media (min-width: 1200px) {
  header.masthead h1 {
    font-size: 4rem;
  }
}

.service-box {
  max-width: 400px;
  
}

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto 10px;

  
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #231F20;
  background: rgba(253, 186, 17, 100);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
border-radius: 4px;

  

}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;

  
  
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  padding: 0 15px;
font-family: 'proxima-nova', sans-serif;
color: #231F20;
font-size: 1rem !important;
margin-bottom: 0.8rem;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 1rem;
	color: #231F20;
	font-family: 'proxima-nova', sans-serif;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-box:focus {
  outline: none;
}

@media (min-width: 768px) {
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}

.text-primary {
  color: #552E54 !important;
}

.btn {
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.btn-xl {
  padding: 1rem 2rem;
}

.btn-primary {
  background-color: #F05B77;
  margin-top: 3rem;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: #ed3c5d !important;
}

.btn-primary:active, .btn-primary:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(85, 46, 84, 1) !important;
  box-shadow: 0 0 0 0.2rem rgba(85, 46, 84, 1) !important;
}