body {

  display: flex;

  justify-content: center;

  align-items: start;

  height: 100vh;

  margin: auto;

/*  max-width: 1172px;*/

}

.section_yellow {

  float: left;

  width: 100%;

  background-color: #DAAA00;

  position: relative;

}



.star_subtext {

  float: left;

  width: 100%;

}

.star_subtext p {

    color: #fff;

    font-family: "Montserrat", sans-serif;

    text-align: center;

    font-size: 1.6em;

    animation: serciveanim 1s forwards ease-in-out;

    animation-delay: 1.5s;

    opacity: 0;

}



/*VAGUES HAUT ET BAS*/

.vague_haut, .vague_bas {

  position: relative;

  z-index: 1;

}



.vague_haut img, .vague_bas img {

width: 100%;

}

@media only screen and (min-device-width : 601px) {

  .img_dst {

    display: block;

  }

  .img_mob {

    display: none;

  }

}

@media only screen and (max-device-width : 600px) {

  .img_dst {

    display: none;

  }

  .img_mob {

    display: block;

  }

}



/*ETOILES COTE*/

.yellow_stars_side {

      position: absolute;

    width: 100%;

    top: 0;

    overflow: hidden;

    height: 100%;

}

.stars_fond_img_gauche {

  display: none;

  position: absolute;

  left: 0;

  height: 100%;

}

.stars_fond_img_droite {

  display: none;

  position: absolute;

  right: 0;

  height: 100%;

}

@media only screen and (max-device-width : 1400px) {

  .stars_fond_img_gauche, .stars_fond_img_droite {

    display: none;

  }

}



.container {

  max-width: 725px;

  margin: 80px auto;

  padding: 4rem 30px;

  overflow: hidden;

}

.content_star {

	    position: relative;

    width: 100%;

    height: 100%;

    float: left;

}

.star_container {

  height: auto;

  width: 100%;

  max-width: 310px;

  position: relative;

  margin: auto;

  animation: starrotate 1.5s forwards ease-in-out;

  transform: scale(0.7);

}

.star_container img {

  width: 100%;

}

.star_piece {

  position: absolute;

  transition-duration: 0.5s;

  opacity: 0;

}

.star_piece a {

  float: left;

  width: 100%;

  height: 100%;

}



.star_piece img {

  transition-duration: 0.5s;

}



.star_text {

	    width: 100%;

    float: left;

    position: absolute;

    top: 0;

    height: 100%;

}



.star_text_item {

  opacity: 0;

  animation: serciveanim 1s forwards ease-in-out;

}



.star_txt {

	padding: 0;

    position: absolute;

    background-color: #111c4e;

    color: #fff;

    border-radius: 100px;

    font-family: "Montserrat", sans-serif;

    font-size: 1.3125rem;

    width: 270px;

    height: 48px;

    text-align: center;

    animation: serciveanim 1s forwards ease-in-out;

    animation-delay: 1.5s;

    opacity: 0;

    transition-duration: 0.5s;

    display: flex;

}





.star_txt h3 {

	margin: auto;

  font-size: 16px;

}

.element-hover:hover .star_txt {



}

.star_txt:hover  {

	background-color: #111c4e82;

	transition-duration: 0.5s;

}

.star_txt:hover img {

	opacity: 0.5;

	transition-duration: 0.5s;

}

.star_txt:before {

	content: "";

    position: absolute;

}

.star_txt:after {

	content: "";

    position: absolute;

    border-radius: 50px;

    background-color: #fff;

}

.star1_txt {

	top: 0;

    left: : 0;

}

.star1_txt:before {

    width: 27px;

    height: 112px;

    left: 270px;

    top: 20px;

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

}

.star1_txt:after {

    width: 10px;

    height: 10px;

    top: calc(112px + 20px + 6px);

    left: calc(270px + 29px - 6px);

}





.star2_txt {

	top: 0;

    right: 0;

}

.star2_txt:before {

    width: 59px;

    height: 89px;

    right: 270px;

    top: 20px;

    border-top: 2px solid #fff;

    border-left: 2px solid #fff;

}

.star2_txt:after {

    width: 10px;

    height: 10px;

    top: calc(89px + 10px + 6px);

    right: calc(270px + 61px - 6px);

}







.star3_txt {

	bottom: 0;

    right: 0;

}

.star3_txt:before {

    width: 29px;

    height: 117px;

    right: 270px;

    bottom: 20px;

    border-bottom: 2px solid #fff;

    border-left: 2px solid #fff;

}

.star3_txt:after {

    width: 10px;

    height: 10px;

    bottom: calc(117px + 10px + 6px);

    right: calc(270px + 31px - 6px);

}







.star4_txt {

	bottom: 0;

    left: 0;

}

.star4_txt:before {

    width: 60px;

    height: 92px;

    left: 270px;

    bottom: 20px;

    border-bottom: 2px solid #fff;

    border-right: 2px solid #fff;

}

.star4_txt:after {

    width: 10px;

    height: 10px;

    bottom: calc(92px + 10px + 6px);

    left: calc(270px + 62px - 6px);

}





/*MOBILE*/



@media only screen and (max-device-width : 600px) {

	.container {

		overflow: initial;

		padding: 15px;

		float: left;

    width: 90%;

	}

	.content_star {

		padding: 100px 0;

	}

	.star_container {

    width: 90%;

    margin: 0 5%;

}

	.star_txt {

    padding: 8px 12px;

    border-radius: 8px;

    font-size: 14px;

    width: 42%;

    height: 80px;

    display: flex;

}

.star_txt h3 {

	margin: auto;

  font-size: 16px;

}

.star1_txt {

    top: 0;

    left: 0;

}

.star1_txt:before {

        width: 25%;

    height: 125px;

    left: 50%;

    top: 96px;

    border-bottom: 2px solid #fff;

    border-left: 2px solid #fff;

    border-top: initial;

    border-right: initial;

}

.star1_txt:after {

    width: 10px;

    height: 10px;

    top: calc(125px + 2px + 96px - 6px);

    left: calc(50% + 25%);

}

.star2_txt {

    top: 0;

    right: 0;

}

.star2_txt:before {

    width: 40%;

    height: 110px;

    right: 50%;

    top: 96px;

    border-top: initial;

    border-left: initial;

    border-bottom: 2px solid #fff;

    border-right: 2px solid #fff;

}

.star2_txt:after {

    width: 10px;

    height: 10px;

    top: calc(110px + 2px + 96px - 6px);

    right: calc(50% + 40%);

}

.star3_txt {

    bottom: 0;

    right: 0;

}



.star3_txt:before {

    width: 25%;

    height: 146px;

    right: 50%;

    bottom: 96px;

    border-bottom: initial;

    border-left: initial;

    border-top: 2px solid #fff;

    border-right: 2px solid #fff;

}

.star3_txt:after {

    width: 10px;

    height: 10px;

    bottom: calc(146px + 2px + 96px - 6px);

    right: calc(50% + 25%);

}



.star4_txt {

    bottom: 0;

    left: 0;

}



.star4_txt:before {

    width: 36%;

    height: 112px;

    left: 50%;

    bottom: 96px;

    border-bottom: initial;

    border-right: initial;

    border-top: 2px solid #fff;

    border-left: 2px solid #fff;

}

.star4_txt:after {

    width: 10px;

    height: 10px;

    bottom: calc(112px + 2px + 96px - 6px);

    right: initial;

    left: calc(50% + 36%);

}



}





/*TABLETTE*/



@media only screen and (min-device-width : 601px) and (max-device-width : 1170px) { 



	.star_txt {

    padding: 10px 15px;

    border-radius: 100px;

    font-size: 1rem;

    width: 200px;

    height: 40px;

}

  .star1_txt:before {

    left: 230px;

    height: 112px;

    top: 30px;

    width: 50px;

}

.star1_txt:after {

    top: calc(112px + 2px + 30px);

    left: calc(230px + 52px - 6px);

}

.star2_txt:before {

    width: 100px;

    height: 75px;

    right: 230px;

    top: 30px;

}

.star2_txt:after {

    top: calc(75px + 2px + 30px);

    right: calc(230px + 100px + 2px - 6px);

}

.star3_txt:before {

  width: 65px;

    height: 120px;

    right: 230px;

    bottom: 30px;

}

.star3_txt:after {

    bottom: calc(120px + 2px + 30px);

    right: calc(230px + 65px + 2px - 6px);

}

.star4_txt:before {

    width: 100px;

    height: 90px;

    left: 230px;

    bottom: 30px;

}

.star4_txt:after {

    bottom: calc(90px + 2px + 30px);

    left: calc(230px + 100px - 6px);

}

}





.img_hidden {

  visibility: hidden;

}



.star_1 {

  top: 0px;

  left: 0px;

  width: 48.67%;

  animation: star1anim 1.5s forwards ease-in-out;

}

.star_2 {

  top: -3px;

  right: 4px;

  width: 61.04%;

  animation: star2anim 1.5s forwards ease-in-out;

}

.star_3 {

  bottom: 3px;

  right: 0;

  width: 48.65%;

  animation: star3anim 1.5s forwards ease-in-out;

}

.star_4 {

  bottom: 0px;

  left: 3px;

  width: 61.02%;

  animation: star4anim 1.5s forwards ease-in-out;

}



/*TEXTES*/





.star_1:before {

  position: absolute;

  animation: serciveanim 1s forwards ease-in-out;

    left: -336px;

    top: 66px;

    transform: scale(1.3);

    animation-delay: 1.5s;

    opacity: 0;

}

.star_2:before {

  position: absolute;

  animation: serciveanim 1s forwards ease-in-out;

  left: initial;

  right: -365px;

    top: 65px;

    transform: scale(1.3);

    animation-delay: 1.5s;

    opacity: 0;

}

.star_3:before {

  position: absolute;

  animation: serciveanim 1s forwards ease-in-out;

      left: initial;

    right: -369px;

    bottom: 65px;

    transform: scale(1.3);

    animation-delay: 1.5s;

    opacity: 0;

}

.star_4:before {

  position: absolute;

  animation: serciveanim 1s forwards ease-in-out;

    left: -330px;

    bottom: 65px;

    transform: scale(1.3);

    animation-delay: 1.5s;

    opacity: 0;

}







@media only screen and (max-device-width : 600px) {

.star_1:before {

  transform: scale(1);

  left: -33px;

    top: -101px;



}

.star_2:before {

  transform: scale(1);

  right: -37px;

  top: -101px;

}

.star_3:before {

  transform: scale(1);

  right: -37px;

  bottom: -112px;

}

.star_4:before {

  transform: scale(1);

  left: -33px;

  bottom: -112px;

}

}





















@keyframes star1anim {

  0% {

    top: -300px;

    left: -300px;

    opacity: 0;

  }

  100% {

    top: 0px;

    left: 0px;

    opacity: 1;

  }

}



@keyframes star2anim {

  0% {

    top: -300px;

    right: -300px;

    opacity: 0;

  }

  100% {

    top: -3px;

    right: 1px;

    opacity: 1;

  }

}



@keyframes star3anim {

  0% {

    bottom: -300px;

    right: -300px;

    opacity: 0;

  }

  100% {

    bottom: 5px;

    right: 0px;

    opacity: 1;

  }

}



@keyframes star4anim {

  0% {

    bottom: -300px;

    left: -300px;

    opacity: 0;

  }

  100% {

    bottom: 2px;

    left: 1px;

    opacity: 1;

  }

}



@keyframes starrotate {

  0% {

    transform: rotate(-180deg);

  }

  100% {

    transform: rotate(0deg);

  }

}



@keyframes serciveanim {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}