/* CSS Document */

body, html {margin:0; padding:0; 
 font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
   }
html { }



body {color:#fff; font-weight:400;  font-size: 2rem; height: 100%; background-size: cover ; 
background-image:url(../img/bg2.jpg); background-size:cover; background-position: center center; background-attachment:fixed;   color:#3d55a3;
  }
  
div.blocsContainer {display: flex;  flex-direction: row;}


.content {width:1020px; max-width:100%; margin:auto; padding:0px; overflow:hidden; text-align:center }
.module {}
.bloc,.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 , .bloc-25, .blog-50, .blog-33, .blog-25 {display:inline-block; margin:0; padding:0; vertical-align:top}
.bloc-25 {width:25%}
.bloc {width:100%}
.bloc-33 {width:33.33%}
.bloc-40 {width:33.33%}
.bloc-60 {width:65%}
.bloc-67 {width:66.66%}
.bloc-50 {width:50%}

h1 {text-align:center}
h2 {font-size:1.5em; margin:30px auto 80px auto; font-weight:600}


.choseConfig  img { height:130px; max-height:20%; display:block; margin:50px auto}

hr {display:block; margin:30px auto 50px auto; width:60px; max-width:60%; border:0; height:3px; background:#fff; border-radius:14px}

.infoLeft, .infoRight {position:absolute; left:25px; top:130px; font-size:0.55em; text-transform:uppercase; font-weight:600; color:#3d55a3}
.infoRight { left:auto; right:25px;}

.back {position: absolute; top:18px; left:10px;}
.back i { font-size:14x !important; color:#fff}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}

.container2 {
  display: flex;
  height: 100%;
    align-items: center;

}

.stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  height:300px;
   color:#fff
}

input{
  display: none;
}

.stars i {
  transition: all .3s;
font-size: 105px;
 margin:0 10px;
}

i:hover {
  transform: scale(1.1) rotate(5deg);
  cursor: pointer;
}

.stars ~ label {
 /* color: gold;*/
 
}

.stars :checked ~ label {
 /* color: gold;*/
  color:#3d55a3
}


.new-button {display:block; position:absolute; top:200px; left:50%; width:320px; margin-left:-160px; text-decoration:none;
border: 2px solid #fff; background: rgba(255,255,255,0.05); color:#fff; padding: 20px 24px;  font-size: 0.7em; line-height:1.5em; border-radius: 42px;
 -webkit-transition: all 0.4s;    -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s;
 cursor: pointer; letter-spacing:2px; text-transform:uppercase; font-weight:600 }
.new-button i {font-size:0.5em}

.new-button2 {display:block; margin:20px auto; text-decoration:none;
border: 2px solid #fff; background: rgba(255,255,255,0); color:#fff; padding: 16px 20px;  font-size: 0.4em; line-height:0.4em; border-radius: 32px;
 -webkit-transition: all 0.4s;    -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s;
 cursor: pointer; letter-spacing:2px; text-transform:uppercase; font-weight:600 }

.new-buttonBlue {display:block; position:absolute; top:200px; left:50%; width:320px; margin-left:-160px; text-decoration:none;
border: 3px solid #3d55a3; background: rgba(255,255,255,0.05); color:#3d55a3; padding: 20px 24px;  font-size: 0.8em; line-height:1.5em; border-radius: 42px;
 -webkit-transition: all 0.4s;    -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s;
 cursor: pointer; letter-spacing:2px; text-transform:uppercase; font-weight:800 }

.topTitle {font-size:30px; margin:90px auto 90px auto }
.logoVote {height:180px; margin:0 auto 30px auto}


@media (max-width: 780px) {
	
.logoVote {height:auto; margin:0 auto 30px auto; max-width:80%}
.choseConfig  img { height:auto; max-width:80%; max-height: none; display:block; margin:40px auto}
.topTitle {font-size:40px; margin:70px auto 70px auto }
.stars i {transition: all .3s;font-size: 64px;margin:0 0px}
h2 {    font-size: 1em; margin: 30px auto 60px auto;}


.infoLeft, .infoRight {left:15px; top:85px; font-size:0.4em; }
.infoRight { left:auto;  right:15px;}
.stars {
  height:200px;
}

.new-button, .new-buttonBlue  { top:160px; width:290px; margin-left:-145px; }


}

@media (max-width: 420px) {
	h2 {    font-size: 1em; margin: 30px auto 40px auto; width:80%}

	.stars i {transition: all .3s;font-size: 52px;margin:0 0px}
.infoLeft, .infoRight {left:15px; top:75px; font-size:0.4em; }
.infoRight { left:auto;  right:15px;}
.new-button, .new-buttonBlue  { top:125px; width:200px; margin-left:-100px; }
hr { margin:10px auto 30px auto; }

}


.anim-2 {
  animation: slideUp2 .6s both;
}

@keyframes slideUp2 {
  0% {
    transform: translateY(76px) scale(0.92);
    opacity: 0;
  }
}


@keyframes slideUp {
  0% {
    transform: translateY(76px) scale(0.92);
    opacity: 0;
  }
}

.anim-y {
  animation: slideUp .6s both;
}

.anim-y:nth-child(2) {
  animation-delay: 0.28s;
}

.anim-y:nth-child(3) {
  animation-delay: 0.42s;
}

.anim-y:nth-child(4) {
  animation-delay: 0.56s;
}

.anim-y:nth-child(5) {
  animation-delay: 0.7s;
}

.anim-y:nth-child(6) {
  animation-delay: 0.84s;
}

.anim-y:nth-child(7) {
  animation-delay: 0.98s;
}

.anim-y:nth-child(8) {
  animation-delay: 1.12s;
}

.anim-y:nth-child(9) {
  animation-delay: 1.26s;
}

.anim-y:nth-child(10) {
  animation-delay: 1.4s;
}


.anim-y:nth-child(11) {
  animation-delay: 1.54s;
}

.anim-y:nth-child(12) {
  animation-delay: 1.68s;
}

.anim-y:nth-child(13) {
  animation-delay: 1.82s;
}


.anim-y:nth-child(14) {
  animation-delay: 1.96s;
}


.anim-y:nth-child(15) {
  animation-delay: 2.10s;
}


.anim-y:nth-child(16) {
  animation-delay: 2.24s;
}


.anim-y:nth-child(17) {
  animation-delay: 2.38s;
}


.anim-y:nth-child(18) {
  animation-delay:2.52s;
}


.anim-y:nth-child(19) {
  animation-delay: 2.66s;
}
.anim-y:nth-child(20) {
  animation-delay: 2.80s;
}

.anim-y:nth-child(21) {
  animation-delay: 2.94s;
}