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



/*-------------------------- fonte ---------------------------- */


@font-face {
    font-family: 'baikalmedium';
    src: url('font/baikal/baikal-medium.woff2') format('woff2'),
         url('font/baikal/Baikal-Medium.woff2') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'baikalregular';
    src: url('font/baikal/Baikal-Regular.woff2') format('woff2'),
         url('font/baikal/Baikal-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'baikallight';
    src: url('font/baikal/Baikal-Light.woff2') format('woff2'),
         url('font/baikal/Baikal-Light.woff2') format('woff');
    font-weight: normal;
    font-style: normal;

}



h1 {font-family: 'baikalmedium';
	color:#fff!important;
    line-height : 1.1em!important;}


h2 {font-family: 'baikalregular';
	color:#fff!important;
    line-height : 1.1em!important;}

h3 {font-family: 'baikalregular';
	color:#fff!important;
    }

p {font-family: 'baikallight';
   color:#D4D4D4!important;}

a {font-family: 'baikalregular';}

h1 a {font-family: 'baikalmedium';}

p.text-italic {font-style: italic;}

/* MEDIA QUERIES */

@media (max-width: 576px) {
    h1 {font-size: 26px!important;}
	h2 {font-size: 15px!important;}
	h3 {font-size: 12px!important;}
	p {font-size: 12px!important;}
	button {font-size: 12px!important;}
	.nav-link {font-size: 16px!important;}
	a.info {font-size: 12px!important;}
	a.end {font-size: 12px!important;}
	.sl {padding: 50px 10px 50px 10px!important;}
	.detail {padding-top: 165px;}
	.vide_2 {background-color: #fff;
	   opacity: 0%;
       width: 100%;
       height: 0px;}
	
	.outer {
    width: 100%;
    height: 350px;
    overflow: hidden;}
	
	.navbar-nav {padding: 100px 0px 20px 0px;}
	.nav-item-3 {padding-bottom: 25px;}
	
	.material-symbols-outlined {font-size: 15px!important;}
}


/*-------------------------- media ---------------------------- */
@media (min-width: 576px) {
    h1 {font-size: 45px!important;}
	h2 {font-size: 15px!important;}
	h3 {font-size: 14px!important;}
	p {font-size: 13px!important;}
	button {font-size: 13px!important;}
	.nav-link {font-size: 13px!important;}
	a.info {font-size: 13px!important;}
	a.end {font-size: 13px!important;}
	.sl {padding: 50px 100px 50px 100px!important;}
	.detail {padding-top: 170px;}
	
	.outer {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;}
	
	.material-symbols-outlined {font-size: 18px!important;}
}




@media (min-width: 768px) {
    h1 {font-size: 55px!important;}
	h2 {font-size: 20px!important;}
	h3 {font-size: 16px!important;}
	p {font-size: 14px!important;}
	button {font-size: 14px!important;}
	.nav-link {font-size: 14px!important;}
	a.info {font-size: 14px!important;}
	a.end {font-size: 14px!important;}
	.sl {padding: 50px 120px 50px 120px!important;}
	.detail {padding-top: 180px;}
	
	.outer {
    width: 100%;
    height: 430px;
    overflow: hidden;
	position: relative;}

}



@media (min-width: 992px) {
    h1 {font-size: 60px!important;}
	h2 {font-size: 20px!important;}
	h3 {font-size: 17px!important;}
	p {font-size: 15px!important;}
	button {font-size: 15px!important;}
	.nav-link {font-size: 15px!important;}
	a.info {font-size: 15px!important;}
	a.end {font-size: 15px!important;}
	.sl {padding: 50px 10px 50px 10px!important;}
	.detail {padding-top: 180px;}
	
	.outer {
    width: 100%;
    height: 380px;
    overflow: hidden;
	position: relative;
}
	.material-symbols-outlined {font-size: 25px!important;}
	
    }



@media (min-width: 1200px) {
	h1 {font-size: 65px!important;}
	h2 {font-size: 25px!important;}
	h3 {font-size: 19px!important;}
	p {font-size:16px!important;}
	button {font-size: 16px!important;}
	.nav-link {font-size: 16px!important;}
	a.info {font-size: 16px!important;}
	a.end {font-size: 16px!important;}
	.sl {padding: 100px 10px 100px 10px!important;}
	.detail {padding-top: 190px;}
	
	.outer {
    width: 100%;
    height: 450px;
    overflow: hidden;
	position: relative;
}
}



@media (min-width: 1400px) {
	h1 {font-size: 70px!important;}
	h2 {font-size: 25px!important;}
	h3 {font-size: 20px!important;}
	p {font-size: 17px!important;}
	button {font-size: 17px!important;}
	.nav-link {font-size: 17px!important;}
	a.info {font-size: 17px!important;}
	a.end {font-size: 17px!important;}
	.sl {padding: 100px 100px 100px 100px!important;}
	.detail {padding-top: 200px;}
	
    .outer {
    width: 100%;
    height: 550px;
    overflow: hidden;
	position: relative;
}
}



@media (min-width: 1600px) {    
	.outer {
    width: 100%;
    height: 700px;
    overflow: hidden;}
}


/*-------------------------- body ---------------------------- */

body {margin: 0px!important;
      padding: 0px!important;}

.w {color: #fff!important;}
.b {color: #000!important;}

.line {background-color: #D4D4D4!important;; height: 1px; width:auto;}




/*-------------------------- liens ---------------------------- */

a {text-decoration: none!important;
   color:#fff!important;}
a:hover, a:active  {text-decoration:none!important;
                    color:#7D7D7D!important;}


/* footer - confidentialité, etc... */
a.end {color:#D4D4D4!important;}
a.end:hover, a.end:active  {color:#fff!important;}
p.end {color:#D4D4D4!important;}


/* button */

a button.bb {background-color:transparent!important;
        border: 1px #fff solid;
        border-radius: 50px!important;
        color: #fff;
        padding: 10px 25px 12px 25px;
        cursor: pointer;
        box-shadow: inset 0 0 0 0 #fff;
        -webkit-transition: ease-out 0.5s;
        -moz-transition: ease-out 0.5s;
         transition: ease-out 0.5s;}

a button.bb:hover, a button:active {
                             color:#000;
                             box-shadow: inset 400px 0 0 0 #fff;}


a button.bw {background-color:transparent!important;
        border: 1px #000 solid;
        border-radius: 50px!important;
        color: #000;
        padding: 10px 25px 12px 25px;
        cursor: pointer;
        box-shadow: inset 0 0 0 0 #000;
        -webkit-transition: ease-out 0.5s;
        -moz-transition: ease-out 0.5s;
         transition: ease-out 0.5s;}

a button.bw:hover, a button.bw:active {
                             color:#fff;
                             box-shadow: inset 400px 0 0 0 #000;}


/*-------------------------- navigation ---------------------------- */

/* barre de navigation */
.navbar {
    transition: top 0.3s;
	position: fixed;
	background-color:transparent;}

.navbar:hover {background-color: #000!important;}
.navbar:active {background-color: #000!important;}


a.nav-link span  {opacity: 0%!important;}
a.nav-link:hover span {opacity: 100%!important;} 



/* burger */
i.bi.bi-list {color: #fff !important;
              font-size: 30px;
              }

button.navbar-toggler {border: none !important;}
button.navbar-toggler:hover, button.navbar-toggler:active  {background-color:#000!important;
                                                           border: 0px !important;}



/* lien contact */



a.nav-link.bb  {background-color:#fff!important;
        border: 1px #fff solid;
        border-radius: 50px!important;
        color: #000!important;
        padding: 6px 20px 8px 20px!important;
        cursor: pointer;
        box-shadow: inset 0 0 0 0 #fff;
        -webkit-transition: ease-out 0.5s;
        -moz-transition: ease-out 0.5s;
         transition: ease-out 0.5s;}


a.nav-link.bb:hover, a.nav-link.bb:active {
                             color:#fff!important;
                             box-shadow: inset 400px 0 0 0 #000;}


/*-------------------------- homepage ---------------------------- */


/* video */
.video {background-color: #000;
        width: 100%;
        height: auto;}


p i.bi .bi-arrow-down-right {
    color: #fff !important;
    font-size: 20px;
}

/* services */
h1 a:hover, h1 a:active {color:#fff!important;}



.contain {
  position: relative;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
	z-index: 3000;
}

.contain:hover .overlay {
  opacity: 1;
}



/*-------------------------- services ---------------------------- */

ul.c {list-style-type: disc;}


/*-------------------------- page projets ---------------------------- */
/* Image zoom on hover + Overlay colour */


.inner {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.inner:hover {transform: scale(1.1);}

.bg-1 {background-image: url("../images/p_projet/the_3d.jpg");}
.bg-2 {background-image: url("../images/p_projet/ndl.jpg");}
.bg-3 {background-image: url("../images/p_projet/ice_tea.jpg");}
.bg-4 {background-image: url("../images/p_projet/kp.jpg");}
.bg-5 {background-image: url("../images/p_projet/correr.jpg");}

/*-------------------------- projets ---------------------------- */
.vide {background-color: #fff;
	   opacity: 0%;
       width: 100%;
       height: 350px;}