@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


img {
  animation: fadein 1s;
  -moz-animation: fadein 1s; /* Firefox */
  -webkit-animation: fadein 1s; /* Safari et Chrome */
  -o-animation: fadein 1s; /* Opera */
}


*{
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  -webkit-tap-highlight-color: transparent;
}

body {
 -webkit-text-size-adjust:100%;
  font-size: 1.4em;
  color:#111;
  font-family: "Lato";
}

br {
   display: block;
   margin: 0;
   content: " ";
}

::selection {
  color: #111;
  background: #ddd;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

a{
  color:#111;
  text-decoration: none;
}

h1 {
  font-family: "Eczar";
  font-size: 3em;
  font-weight: 600;
}

h2 {
  font-family: "Eczar";
  font-size: 2em;
  font-weight: 600;
}

h3 {
  font-family: "Eczar";
  font-size: 1.3em;
  font-weight: 600;
}

#subTitle {
  margin-top: -1.5em;
}

p {
  margin: 0;
  padding: 0;
  font-family: "lato";
  transition: all .4s;
}


/*
-------------------------------------------------------------------------------
-- HEADER
-------------------------------------------------------------------------------
*/

#header {
  position: relative;
  width: 100%;
  background-color: #fff;
}


#header-tissu {
  height: 120vh;
  width: 100%;
  background-image: url("./header/header.jpg");
  background-size: cover;
  background-position: left;
  animation: fadein 1s;
  -moz-animation: fadein 1s; /* Firefox */
  -webkit-animation: fadein 1s; /* Safari et Chrome */
  -o-animation: fadein 1s; /* Opera */
}

#header-title {
  position: absolute;
  z-index: 6;
  display: block;
  text-indent: -9999px;
  width: 430px;
  height: 246px;
  top: calc(45vh - 123px);
  left: calc(50% - 215px);
  background: url("assets/angovo-logo.svg");
  background-repeat: no-repeat;
  pointer-events: none;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari et Chrome */
  -o-animation: fadein 3s; /* Opera */
}

#gradient{
  position: absolute;
  bottom: -2px;
  width: 100%;
  height: 15vh;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
  z-index: 5;
}

/*
-------------------------------------------------------------------------------
-- DESCRIPTION DE LA MARQUE
-------------------------------------------------------------------------------
*/

#brand {
  font-size: 1.1em;
  position: relative;
  z-index: 8;
  margin: -25vh auto 10vh auto;
  width: calc(50% - 140px);
  text-align: center;
  padding: 40px 70px 100px 70px;
  height :auto;
  transition: height .4s;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 15px 2px rgba(17,17,17,.1);
}

#brandText {
  height: 100%;
  overflow: hidden;
}

#brand p {
  font-weight: 400;
  margin-top: 1em;
  //line-height: 175%;
  color:#111;
  margin-left: auto;
  margin-right: auto;
}

#brand p:first-of-type { /* first "p" child of "brand" div */
  margin-bottom:1.5em;
  color:#111;
  font-weight: 700;
}

.drapeau{
  display: inline-block;
  width: 4em;
  height: .2em;
  margin: 2em 0 1.5em 0;
}
/*
.drapeauSac{
  display: inline-block;
  width: 1em;
  height: .8em;
  margin: 0;
  padding: 0;
}*/

.drapeauBleu, .drapeauBlanc, .drapeauRouge{
  display: inline-block;
  width: 33.33%;
  height: 100%;
}

.drapeauBleu{background-color: rgb(42, 56, 185);}
.drapeauBlanc{background-color: rgb(255, 255, 255);}
.drapeauRouge{background-color: rgb(228, 43, 21);}

/*
-------------------------------------------------------------------------------
-- SACS
-------------------------------------------------------------------------------
*/

#sacs {
  height:auto;
  width: 50%;
  margin: auto;
  padding: 10vh 0 30vh 0;
}


.familyStyle1 {
  position: relative;
  width: 100%;
  margin: 0px auto 20px auto;
}

.image-box {
  position: relative;
  z-index: -1;
  border-radius: 6px;
  height: 420px;
  width: 100%;
  overflow: hidden;
}


.image-sac {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  transition: margin .2s;
  transform-origin: center;
  transition: all .4s;
}

.tag {
  position: absolute;
  font-size: .7em;
  top:10px;
  left: 10px;
  width: auto;
  font-weight: bold;
  border-radius: 6px;
  color : #bbb;
  background-color: #111;
  padding: 8px 16px;
  pointer-events: none;
  transition: all .4s;
  white-space: nowrap;
}

.title-card {
  position: absolute;
  left:-10%;
  top: 20%;
  width: calc(40% - 80px);
  transition: all 1s;
  border-radius: 6px;
  background-color: #ffffff;
  pointer-events: none;
  padding: 25px 40px 40px 40px;
  box-shadow: 0 0 15px 2px rgba(17,17,17,.1);
  z-index: 3;
}

.title-card-hidden {
  display: none;
}

.familyStyle1:nth-of-type(2n+1) .title-card {
  top : auto;
  left:auto;
  right : -10%;
  bottom: 10px;
}

.familyStyle1:hover{
  cursor: pointer;
}

.familyStyle1:hover .title-card {
  left : 10px;
  transition: all .4s;

}

.familyStyle1:nth-of-type(2n+1):hover .title-card {
  right : 10px;
  left: auto;
}

.familyStyle1:hover .tag {
  color:#fff;
}

.familyStyle1:hover .image-sac {
  transform: scale(1.02);
}

.separator {
  border-top: 1px solid #e5e5e5;
  margin-bottom: 30px;
  width: 100%;
  transition: all .2s;
}

.nmbreSacs{
  margin-top: .4em;
  font-size: .8em;
  color : #cccccc;
}

/*-- small cards ---------------------------------------*/

.familyStyle2 {
  position: relative;
  display: inline-block;
  vertical-align:top;
  width: calc((100% / 3) - (40px / 3));
  margin: 0px 20px 20px 0px;
}

.familyStyle2:nth-of-type(3n) {
  margin: 0px 0 20px 0px;
}

.familyStyle2 .title-card {
  position: absolute;
  left:10px;
  top: 85%;
  width: calc(100% - 80px);
  transition: all 1s;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 20px 30px 30px 30px;
  pointer-events: none;
  transition: all .4s;
}

.cropCard{
  position: relative;
  width: 100%;
  height:100%;
}

.familyStyle2:hover .tag + .title-card{
  top: 55px;
}

.familyStyle2:hover .title-card {
  top: 10px;
}

.familyStyle2 .separator, .familyStyle2 p {
  opacity: 0;
}

.familyStyle2:hover .separator, .familyStyle2:hover p {
  opacity: 1;
}

.familyStyle2:hover .tag {
  background-color: #111;
  color : #fff;
}

.familyStyle2:hover .image-sac {
  transform: scale(1.04);
}


/*-- sacs recommandés ---------------------------------------*/

#listeMiniatureSacs .familyStyle2 a .image-box {
  height: 300px;
}

.title-card-reco {
  position: absolute;
  left:10px;
  bottom:-12px;
  width: calc(100% - 50px);
  transition: all 1s;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 15px;
  pointer-events: none;
  transition: all .4s;
}

.familyStyle2:hover .title-card-reco {
  bottom: 10px;
}

.title-card-reco h3 span {
  font-family: "Lato";
  font-size: .7em;
}

/*
-------------------------------------------------------------------------------
-- FOOTER
-------------------------------------------------------------------------------
*/

#footer {
  background-size: cover;
  background-position: left;
  padding-bottom: 25vh;
}

#reseaux{
  text-align: left;
  padding: 3vh 0 10vh 0;
}

#footer #reseaux, .texteBuy #reseaux{
  text-align: center;
}


#reseaux a{
  color: #111;
  text-decoration: none;
}

/*
-------------------------------------------------------------------------------
-- BOUTONS
-------------------------------------------------------------------------------
*/

.btn {
  margin-top: 2px;
  display: inline-block;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  transition: all .4s;
  opacity: 1;
}

.btn .imgBtn {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}

.btn:hover {
  opacity: .8;
  background-color: #efefef;
}

.btn span {
  transition: all .2s;
}