@charset "UTF-8";

/* BALISE */

html{
  font-size: 80%;
}
body{
  margin:0;
}
*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Fira Mono", monospace;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #000;
}
h1{
  font-family: "PlayfairDisplay",serif;
  font-weight: bold;
  font-style: italic;
  font-size: 3rem;
  line-height: 4rem;
}
h2,h3,h4,h5,h6{
  font-family: "PlayfairDisplay",serif;
  font-weight: bold;
  font-style: italic;
  font-size: 1.8rem;
  line-height: 2.2rem;
}
strong, b{
  font-weight: bold;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
button{
  background: none;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
}
header{
  position: fixed;
  z-index: 5;
  width: 100%;
  padding: 15px 0;
  -webkit-box-shadow: 0 0 10px #0000001f;
  box-shadow: 0 0 10px #0000001f;
}
header .container{
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
#logo{
  height: 25px;
  width: auto;
}

/* NAVIGATION */

.burger {
  display: flex;
  width: 28px;
  height: 21px;
  flex-direction: column;
  justify-content: space-between;
	z-index:6;
}
.burger-open{
}

.burger span{
  display: block;
  width: 100%;
  height: 3px;
}
nav {
  display: none;
}
nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%
}
nav ul li a{
  text-transform: uppercase;
	font-size: 1.8rem;
  font-weight: bold;
  color: #006166;
}
nav ul li:hover a{
  color: #F3BC00;
}
.nav {
	transition: all 0.5s ease;
}
.nav-open {
	display: flex;
	align-items: center;
    position: absolute;
    top: 44px;
    left: -2.5%;
    width: 106%;
    height: 94vh;
    background: #fff;
}
.nav-open ul{
	flex-direction: column;
    justify-content: space-around;
    height: 60vh;
}

footer{
  position: relative;
  z-index: 5;
  width: 100%;
  text-align: center;
  -webkit-box-shadow: 0 0 10px #0000001f;
  box-shadow: 0 0 10px #0000001f;
}
footer .container{
    height: 25vh;
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
a, div, :hover {
  transition: 0.5s;
}

/* CLASS */

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

.h-100vh {height:100vh;}
.h-80vh {height:120vh;}
.h-40vh {height:40vh;}
.h-20vh {height: 5vh;}
.h-10vh {height:5vh !important;z-index: 1;}
.f-66p{flex: 66%;}
.f-33p{flex: 100%;}

.article-container-left, .article-container-center, .article-container-right{
  z-index: 4;
  position:relative;
  max-width:1280px;
  width:100%;
  height:100%;
  margin: 0 auto;
  padding: 0 2.5%;
  display:flex;
  justify-content:center;
  align-items: flex-end;
}
.article{
  background:#fff;
  max-width:640px;
  width:100%;
  padding: 5% 5% 7.5%;
  -webkit-box-shadow: 0 0 10px #0000001f;
  box-shadow: 0 0 10px #0000001f;
}
.article-container-center .article{
  margin-top: 0;
}
.langue{
  display: flex;
  justify-content: space-around;
  padding-right: 5%;
}

/* CLASS DE TEXTE */

.title{
  margin-bottom: 5%;
}
.line{
  width: 50%;
  height: 3px;
}
.paragraph{
  margin: 7.5% 0 0;
}
.list{
  margin-left: 12.5%;
}
.list li{
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: bold;
}
.list li{
  margin-left: -35px;
}
.list li:before{
  content:" ";
  background: #F3BC00;
  display: inline-block;
  height: 3px;
  width: 20px;
  vertical-align: middle;
  margin-right: 15px;
}

.color-green{color: #006166;}
.color-yellow{color: #F3BC00;}
.color-red{color: #e52329;}
.color-white{color: #fff;}

.btn-container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 5%;
}

/* CLASS DE INNPUT - BOUTON */

.btn{
  display: inline-block;
  border: 3px solid #F3BC00;
  margin: 2.5% 0;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}
.btn:hover{
  border: 3px solid #006166;
}

#btn-restaurant:before{
  content: url('../../img/utensils.svg');
  display: inline-block;
  height: auto;
  width: 15px;
  vertical-align: middle;
  margin-right: 15px;
}

#btn-loisir:before{
  content: url('../../img/dice.svg');
  display: inline-block;
  height: auto;
  width: 20px;
  vertical-align: middle;
  margin-right: 15px;
}

#btn-pedagogie:before{
  content: url('../../img/book.svg');
  display: inline-block;
  height: auto;
  width: 15px;
  vertical-align: middle;
  margin-right: 15px;
}

#btn-evenement:before{
  content: url('../../img/calendar-alt.svg');
  display: inline-block;
  height: auto;
  width: 15px;
  vertical-align: middle;
  margin-right: 15px;
}

#section-contact input[type="email"]{
  width: 75%;
  padding: 0.5rem 1.5rem;
  border: 1px solid #000;
  margin-bottom: 2.5%;
}
#section-contact input[type="email"]::placeholder {
  color: #006166;
}
#btn-newsletter:before{
  content: url('../../img/paper-plane.svg');
  display: inline-block;
  height: auto;
  width: 15px;
  vertical-align: middle;
  margin-right: 15px;
}

/* CLASS D'IMAGE */

.logos-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  height: 50vh;
  padding-left: 10%;
}

#section-bch img {
  max-height: 100px;
}
#section-bch a:hover{
  transform: translate(5%, 0);
}
#logo-bisamme2{
  width: 76%;
  max-width: 610px;
}
#logo-cuvee {
  width: 42%;
  max-width: 360px;
}
#logo-cuvee, #logo-hallen {
  width: 42%;
  max-width: 340px;
}
#logo-hallen {
  max-height: 63px !important;
  margin-top: 27px;
}

/* CLASS DE BACKGROUND PAGE RESTOS */

#section-licorne .bg-75{
  background:url("../../img/bisamme-licorne.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: -60px -40px 0 0 #006166;
  box-shadow: -60px -40px 0 0 #006166;
}
#section-east-canteen .bg-75{
  background:url("../../img/bisamme-east-canteen.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: 60px -40px 0 0 #F3BC00;
  box-shadow: 60px -40px 0 0 #F3BC00;
}
#section-pur .bg-75{
  background:url("../../img/bisamme-pur.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: -60px 40px 0 0 #006166;
  box-shadow: -60px 40px 0 0 #006166;
}
#section-velicious .bg-75{
  background:url("../../img/bisamme-velicious.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: 60px 40px 0 0 #F3BC00;
  box-shadow: 60px 40px 0 0 #F3BC00;
}

/* CLASS DE BACKGROUND HOME PAGE */

.bg-container, .bg-container-reverse{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
}

.bg-75{
  z-index: 3;
  height:100%;
  flex:75%;
  overflow: hidden;
}
.bg-12-5{
  height:100%;
  flex:12.5%;
  z-index: 1;
}
.bg-25{
  height:100%;
  flex:25%;
  z-index: 1;
}
#section-intro .h-100vh {
  height:90vh;
}
#section-intro .bg-container, #section-bars-restaurants .bg-container, #section-partenaires .bg-container{
  background:url("../../img/bisamme-intro.svg") center center no-repeat;
  background-size: cover;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#section-intro img{
  max-width: 640px;
  width: 60%;
}
.scroll-container{
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: initial auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll {
  display: block;
  width: 40px;
  height: 40px;
  border-right: 3px solid #006166;
  border-bottom: 3px solid #006166;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#section-concept .bg-75{
  background:url("../../img/bisamme-concept-food.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: -60px -40px 0 0 #F3BC00;
  box-shadow: -60px -40px 0 0 #F3BC00;
}
#section-services .bg-75{
  background:url("../../img/bisamme-lieu-de-vie-strasbourg.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: 60px 40px 0 0 #006166;
  box-shadow: 60px 40px 0 0 #006166;
}
#section-valeurs .bg-75{
  background:url("../../img/bisamme-valeurs-coop.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: 60px 40px 0 0 #F3BC00;
  box-shadow: -60px 40px 0 0 #F3BC00;
}
#section-valeurs .bg-12-5:first-child{
  display: none;
}
#section-bch .bg-container, #section-localisation .bg-container{
  background:url("../../img/bisamme-localisation.svg") center center no-repeat;
  background-size: cover;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe#map {
  width:100%;
  height:40vh;
  margin-bottom: 7.5%;
  -webkit-box-shadow: 0 5px 10px #0000001f;
  box-shadow: 0 5px 10px #0000001f;
}
#section-contact .bg-75{
  background:url("../../img/bisamme-contact.jpg") center center no-repeat;
  background-size: cover;
  -webkit-box-shadow: -60px -40px 0 0 #006166;
  box-shadow: -60px -40px 0 0 #006166;
}
#section-contact.h-80vh {
  height:80vh !important;
}
#section-contact .bg-25{
  display: none;
}
.social-container{
  width:50%;
  padding: 0 5%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
footer img{
  width: auto;
  height: 35px;
}
footer a:hover{
  transform: translate(0, -5px);
}

.bg-white{background: #fff;}
.bg-grey{background:#fafafa;}
.bg-red{background:#e52329;}
.bg-green{background:#006166;}
.bg-yellow{background:#F3BC00;}
.bg-lightYellow{background:#EDE6D6;}
.bg-gradient-grey-lightYellow{background: linear-gradient(#fafafa, #EDE6D6);}
.bg-gradient-lightYellow-grey{background: linear-gradient(#EDE6D6, #fafafa);}


/* FONTS */

@font-face {
	font-family: "PlayfairDisplay";
  font-weight: bold;
	font-style: italic;
	src: url('../fonts/PlayfairDisplay-BoldItalic.ttf');
}
@font-face {
	font-family: "FiraMono";
	font-weight: normal;
	src: url('../fonts/FiraMono-Regular.ttf');
}
@font-face {
	font-family: "FiraMono";
	font-weight: bold;
	src: url('../fonts/FiraMono-Bold.ttf');
}



/* RESPONSIVE */

@media screen and (min-width:768px){
  html{
    font-size: 100%;
  }
  footer .container{
    height: 10vh;
    flex-wrap: nowrap;
  }
  .burger{
    display: none;
  }
  nav{
    display: inherit;
  }
	nav ul li a{
	font-size: inherit;
	}
	
	
  .h-80vh {
    height:80vh;
  }
  .h-20vh {
    height: 20vh;
  }
  .h-10vh {
    height: 10vh !important;
  }

  .f-33p{
    flex: 33%;
  }

  .bg-container, .bg-container-reverse{
    height: 100%;
  }
  .bg-container{
    flex-direction:row;
  }
  .bg-container-reverse{
    flex-direction:row-reverse;
  }

  #section-valeurs .bg-12-5:first-child{
    display: block;
  }
  #section-contact .bg-25{
    display: block;
  }

  .article-container-left, .article-container-center, .article-container-right{
    align-items: center;
  }
  .article-container-left{
    justify-content:flex-start;
  }
  .article-container-right{
    justify-content:flex-end;
  }
  .article{
    margin-top: 0;
  }

}