/*************************************
KAIPI  - Prime Energy

**************************************/

/* FONTS
-------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');

/* SELECTION
-------------------------------------------------- */
::-moz-selection { /* Code for Firefox */
	background: #FAB000;
	color: #000;
}
::selection {
	background:  #FAB000;
	color: #000;
}

/* RESET
-------------------------------------------------- */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body{
	overflow-x: hidden;
}

body{
	font-size: 16px; /* base */
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin:0;
	color: #000;
	font-weight: 900;
    padding-top:60px;
	
}

p{
	line-height: 2rem;
	font-size: 1rem;
	margin: 1rem 0;
	color: #000;
}
span{
	color:#FAB000;
}

/*

HEADER

------------------------------------------------------------------------------------------------------------------- */
  header svg{
    fill: #000;
    height:25px;
  }
  .navbar {
      transition: all 0.4s;
      background:transparent;
  }
  @media screen and (max-width:991px){
    .navbar{
      background: rgb(255,255,255);
    }
  }
  @media screen and (min-width:991px) and (max-width:1200px){
    #menu-menu li a {
      font-size:14px;
    }
  }

  .navbar li span{
    color:#333;
    padding:20px;
  }
  .navbar li:nth-child(4){
    background: linear-gradient(180deg, #fab000 0%, #FCD67E 100%);
    cursor:pointer;
    border-radius:2px;
  }
  .navbar li:hover:nth-child(4) span{
    color:#777;
  }
  @media screen and (min-width:992px){
    .navbar .nav-link{
      color:white;
    }
  }
  .navbar-toggler{
    padding: 0;
    margin-top: .2rem;
    font-size: 1.5rem;
    outline:none;
  }
  .navbar-toggler:active,.navbar-toggler:focus,.navbar-toggler:hover{
    outline:none;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link:focus {
      color: #fff;
      text-decoration: none;
  }
  .navbar .navbar-brand {
      color: #000;
  }
  @media screen and (max-width:500px){
    .navbar .navbar-brand{
        font-size:1.15rem;
    }
  }
  .navbar.active {
      background: #fff;
      box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
  }
  .navbar.active .nav-link {
      color: #555;
  }
  .navbar.active .nav-link:hover,
  .navbar.active .nav-link:focus {
      color: #555;
      text-decoration: none;
  }

/*

SECTIONS

------------------------------------------------------------------------------------------------------------------- */
/* SECTION LINE */
.section-line{
    width:25%;
    background-color:#FAB000;
    height:2px;
    box-shadow:none;
    margin:2rem auto 2rem auto;
}
@media screen and (min-width:991px){
    .section-line{
        margin:9rem auto 2rem auto;
    }
}

/* HERO
-------------------------------------------------- */
.box-hero{
	display: flex;
    justify-content: flex-start;
	vertical-align: middle;
	flex-direction: column;
}

/* BOX HERO CONTENT */
.box-hero_content{
	justify-content: center;
	display: flex;
	vertical-align: middle;
	flex-direction:column;
	height:100vh;
}
@media screen and (max-width:500px){
    .box-hero_content {
        height: auto;
        padding-top: 50px;
        padding-bottom: 10px;
    }
    .hero .btn{
        font-size:25px!important;
        margin:10px auto!important;
    }
}

@media screen and (max-width:991px){
	.box-hero_content{
		text-align:center;
	}
}
@media screen and (min-width:991px){
	.box-hero_content{
		margin: 3rem auto 0rem auto;
		height:80vh;
	}
}
/* BUTTON */
.hero .btn{
	margin:20px auto;
	font-size: 30px;
	font-weight: 900;
	border-width: 3px;
    border-image: transparent;
	transition: border .5s ease;
}
.hero .btn:hover{
	border-image: linear-gradient(180deg, #fdd293 0%, #EA4F2C 100%) 1 / 3px stretch;
	outline:none;
}
@media screen and (min-width:768px){
	.hero .btn{
		width:60%;
	}
}
@media screen and (min-width:991px){
	.hero .btn{
		width:100%;
	}
}
/* Style de titulos hero */
.box-hero_content p:first-child,.box-hero_content span{
	font-weight:900;
}
.box-hero_content h1{
	font-weight:300;
	margin-top:20px;
}
@media screen and (max-width:600px){
	.box-hero_content h1{
		font-size:32px;
	}
}
/* IOS */
@media screen and (min-width:320px) and (max-height:570px){
	/* Iphone 5 */
	.box-hero_content h1{
		font-size:22px;
	}
	/*.list-box{
		width: auto!important;
	}*/
}
@media screen and (min-width:600px){
	.box-hero_content p:first-child{
		font-size:25px;
	}
	.box-hero_content h1{
		margin-top:30px;
	}	
}
@media screen and (min-width:991px){
	.box-hero_content h1{
		text-align:left;
	}
}
/* Notebook */
@media only screen and (min-width:1024px) and (max-height:600px){
	.box-hero_content{
		margin: 1rem auto 0rem auto;
	}
	.box-hero_content h1{
		margin-top:20px;
		font-size: 30px;
	}
	.pilier-tittle{
		font-size:90px!important;
	}	
}

.box-hero_content span:last-child{
	font-size: 30px;
	text-align:center;
}
@media screen and (min-width:600px){
	.box-hero_content span:last-child{
		font-size: 3rem;
	}
}
.box-hero_content h1,.box-hero_content p,.box-hero_content span{
	color:#000;
}
.pilier-tittle {
    font-size: 70px;
}
sup {
    top: -1em;
	font-size: 35%;
}
@media screen and (min-width:600px){
	.box-hero_content p:first-child{
		font-size:25px;
		text-align: center;
	}
	.pilier-tittle {
    	font-size: 7rem;
	}
	sup {
		top: -2em;
		font-size: 25%;
	}	
}
/*  Vídeo background  */
 .hero {
  	position: relative;
  	overflow: hidden;
}
@media screen and (min-width:991px){
    .hero {
      min-height:100vh;
    }
}
.video_area {
  	position: relative;
  	overflow: hidden;
}
 
@media screen and (max-width:991px){
	.hero{
		background:#efe9e2;
	}
}
.video_area video {
	position: absolute;
	top: 0;
	width:100%;
	height:100%;
	/*  object-fit is not supported on IE  */
	object-fit: cover;
	opacity:1;
	z-index:-1;	
}
@media screen and (max-width:991px){
	 .video_area video {
		display:none;
	}
}

/* Comment ça fonctionne? */
#how-it-works{
    padding-top: 20px;
}
@media screen and (min-width:991px){
    #how-it-works{
        padding-top: 100px;
    }
}

#how-it-works-anchor:target::before, #etic-anchor:target::before, #question-anchor:target::before {
  content: "";
  display: block;
  height: 120px; /* fixed header height*/
  margin: -90px 0 0; /* negative fixed header height */
}
#how-it-works a:hover, #main a:hover{
    color:black;
    text-decoration: none;
    cursor:pointer;
}



.flex-one {
    flex: 1;
}
#how-it-works{
    min-height: 70vh;
}
.black-text{
    color:#000;
}
#how-it-works .orange-text{
    color: #FAB000;
}
#how-it-works h3{
    text-align:center;
    letter-spacing: 0.1em;
    font-weight:300;
}

@media screen and (min-width:768px){
    #how-it-works h3{
        font-size:3rem;
        text-align:left;
    }
}
#how-it-works h3 span{
    color: #FAB000;
}
#how-it-works p {
    font-size: 1.563rem;
    letter-spacing: 0.1em;
    font-weight: 100;
}
#how-it-works p strong{ 
    font-weight:600;
}
#how-it-works .orange-box p{
    letter-spacing: 0.1em;
    text-align:justify;
    font-weight:300;
    font-size: 1.25rem;
}
.orange-box p strong {
    font-weight:800;
}
.lista-box{
    height:29vh;
}
.orange-box{
    background:#FAB000;
    padding-left:30px;
    padding-right:30px;
    /*height:28vh;*/
}
.small-organg-divisor{
    margin: 4rem auto 3rem auto;
    border: 0;
    border-top: 2px solid #fab000;
    border-radius: 2px;
    width:30%;
}

.big-text-how{
    text-align: center;
}
.big-text-how p strong{ 
    font-size:3.75rem;
    letter-spacing: 0.1em;
    color:#000;   
    line-height:8vh;
}
.big-text-how .sub-description-text{
    font-size:2.5rem;
}

@media (min-width: 1440px){
    .orange-box {
        height: 27.5vh;
    }
}

@media (max-width: 768px){
    #how-it-works .my-5{
        margin-bottom: 1rem!important;;        
    }
    .list-box{
        width: auto;
        margin-bottom: 6vh;
    }
    #how-it-works .section-line {
        margin: 5rem auto 2rem auto;
    }
    .orange-box {
        margin-top: 0px;
    }
    #how-it-works p {
        font-size: 25px;
        letter-spacing: 0.1em;
        width: 100%;
        line-break: auto;
        text-align: center;
        display: block;
    }

    #how-it-works .btn_rechercher {
        font-size: 20px;
    }
    #how-it-works .orange-box p {
        text-align: left;
    }
}
@media (max-width: 500px){
    .big-text-how {
        margin-top: 4rem;
    }
    #how-it-works h3{
        text-align: center;
    }
    #how-it-works p {
        font-size: 17px;
        text-align: justify;
        display: block;
        justify-content: left;
    }
    .list-box {
        margin-bottom: 3vh;
    }
    .orange-box {
        background: #FAB000;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 0px;
        width: 100%;
    }
    #how-it-works p .mb-5{
        margin-bottom:0px!important
    }
    #how-it-works .orange-box p {
        letter-spacing: 0.1em;
        text-align: justify;
        font-weight: 300;
        font-size: 14px;
    }
}

#how-it-works .btn_rechercher {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:100%;
}

@media screen and (min-width:414px) and (max-width:991px){
    /*Iphone 6,7,8 plus */
    /*.hero{
        height: 95vh!important;
        min-height: 95vh!important;
    }*/
    .box-hero{
        padding-top: 60px;
    }
}

@media screen and (max-width: 500px){
    #how-it-works .btn_rechercher{
       font-size: 15px;
    }
}

/* IOS */
@media screen and (min-width: 375px) and (max-height:812px){
    /* Iphone X */
    .box-hero{
        padding-top: 60px;
    }
}
 
/*   de 12 milliards de CHF non réclamés */
.cta p strong{ 
    letter-spacing: 0.1em;
    color:#000;     
}
.cta{
    min-height:50vh;
}

@media (min-width: 768px){
    .cta p strong{ 
        font-size:2rem;
    }
    .sub-description-text{
        font-size:25px!important;
    }
    .cta p{
        font-size:25px;
        letter-spacing: 0.1em;
    }  
    
}
@media (min-width: 991px){
    .cta{
        min-height:110vh;
    }
    .cta video{
        top: -40px;
    }
    .cta p strong{ 
        font-size:3rem;
    }
}

@media screen and (max-width:768px){
    .cta{
        background-image: linear-gradient(220deg, #fab00024 -10%, #ffffff 68%);
    }
    .cta p {
        text-align: left;
    }
}

@media screen and (max-width:991px){
    .btn_area{
        text-align:center;
    }
}

/* Suis-je concerné ? */
.question{
    padding-top: 30px;
    margin-top: -1rem;
}
@media screen and (min-width:991px){
    .question{
        padding-top: 110px;
    }
}
.question h3{
    font-weight:300;
}
@media screen and (min-width:768px){
    .question h3{
        font-size:3rem;
    }
    .question_subtitle{
        font-size:25px;
        max-width:760px;
        margin: 40px auto 20px auto;
        text-align:center;
    }
}

/* QUESTION BOX */
.question_box h6{
    font-size:15px;
}

@media screen and (max-width:600px){
    .question_box_wrapper{
        margin:15px 0;
    }
    .question_box{
        padding:15px 0;
    }
    
}
@media screen and (min-width:768px){
    .question_box_wrapper{
        display:flex;
        flex-direction:row;
    }
    .question_box{
        width:220px;
        display:flex;
        flex-direction:column;
        vertical-align:middle;
        justify-content:flex-end;
        align-items:center;
    }
}

@media screen and (min-width:991px){
    ._mt{
        position:relative;
        top:5rem;
    }
}

@media screen and (min-width:500px) and (max-width:991px){
    .question_box img{
     width:110px;
    }
}

/* QUESTION DESCRIPTION */
.question_short-description p{
    text-align:left;
    font-size:19px;
    font-weight:300;
}
.question_short-description p strong{
    font-weight:900;
}

/* QUESTION BUTTON */
.btn_rechercher{
    box-shadow: 0.71px 0.71px 0 rgb(0 0 0 / 0%);
    border-radius: 0px;
    background: linear-gradient(180deg, #fab000 0%, #FCD67E 100%);
    text-transform:uppercase;
    margin:20px auto;
    width:220px;
}
.row_btn_rechercher{
    text-align:center;
}
@media screen and (min-width:768px){
    .btn_rechercher{
        font-size:20px;
        margin:5px auto;
        width:auto;
    }
    .row_btn_rechercher{
        margin-top:25px;
        text-align:right;
    }
    .question h3 {
        padding-left:20px;
    }
}

/* Video */
.question{
    position: relative;
}
.question video{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit: cover;
}

/* ROW QUESTION SUBTITLE*/
.row_question_subtitle{
    margin:10px 0;
}
@media screen and (min-width:991px){
    .row_question_subtitle{
        margin:30px 0;
    }
    .row_question_subtitle .question_subtitle{
        padding: 15px 0;
    }
}
@media screen and (max-width:500px){
    .question_short-description p {
        text-align: justify;
        font-size: 19px;
        font-weight: 300;
    }
}

/* Notre Éthique */
.etic{
    padding-top: 50px;
    margin-top: -1rem;
}

@media screen and (max-width:500px){
    .etic_box_content{
        text-align:left;
    }
}
@media screen and (min-width:768px){
    .etic_box_content{
        display: flex;
        align-items: center;
        height: 150px;
        justify-content: flex-start;
    }
}
.etic_box_content p, .etic h1{
    font-weight:300;
}
@media screen and (min-width:768px){
    .etic h1{
        font-size:3rem;
    }
    .etic p{
        font-size:19px;
    }
}
@media screen and (min-width:768px) and (max-width:991px){
    .etic img{
        max-width:110px;
    }
}
/* Video */
.etic{
    position: relative;
}
.etic video{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

/*

PAGES

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

/* ARCHIVE */
.widget-area .widget-title{
font-size: 1.214rem;
}
.widget-area ul{
padding: 0;
margin: 0 0 1.071rem 0;
list-style: none;
}
.widget-area li a,article .entry-meta a{
color: #212121;
font-family: SemiJost-Bold;
}

/* 404, INDEX, SINGLE
-------------------------------------------------- */
.message-theme{
	padding-top: 12rem;
	min-height:41rem;
}
.page nav{
	padding-top: 0!important;
	background: white;
}
@media (min-width: 768px){
	.page{
		padding-top: 12.143rem;
	}
}

.error-page{
	padding-top:3.571rem;
}
.error-page-content{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	height: 100vh;
}
.error-page svg{
	max-width: 28rem;
}