.button {
  display: block;
  color: #fff;
  white-space: nowrap;
  padding: 0 30px;
  background-color: #000;
  overflow: hidden
}

@media all and (max-width:499px) {
  .button {
    margin-top: 2px
  }
}

@media all and (min-width:500px) {
  .button {
    margin-top: 5px
  }
}

.button:first-child {
  margin-top: 0
}

@media all and (max-width:499px) {
  .button>span {
    margin: -30px 0
  }
}

@media all and (min-width:500px) {
  .button>span {
    margin: -25px 0
  }
}

.button.hover {
  color: #fff;
  background-color: #e60012
}

.button.weak {
  background-color: rgba(0, 0, 0, .5)
}

.button.weak.hover {
  background-color: #e60012
}

@media all and (max-width:768px) {
  .only_lxlxxl {
    display: none
  }
}

#certificate {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #fff;
  z-index: 10000;
  -webkit-transition: background-position .5s cubic-bezier(.9, 0, .1, 1);
  transition: background-position .5s cubic-bezier(.9, 0, .1, 1);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}

#certificate.show {
  display: block
}

#certificate.open {
  background-position: 150% bottom
}

@media all and (max-width:768px) {
  #certificate.open .set {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0)
  }
}

@media all and (min-width:769px) {
  #certificate.open .set {
    -webkit-transform: translate3d(-60%, -50%, 0);
    transform: translate3d(-60%, -50%, 0)
  }
}

#certificate.english .french {
  display: none!important
}

#certificate.french .english {
  display: none!important
}

#certificate .set {
  -webkit-transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1), -webkit-transform .5s cubic-bezier(.9, 0, .1, 1)
}

@media all and (max-width:768px) {
  #certificate .set {
    position: relative;
    margin: 0 auto
  }
}

@media all and (min-width:769px) {
  #certificate .set {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
  }
}

@media all and (max-width:499px) {
  #certificate .set {
    width: calc(100% - 30px - 30px);
    height: 100%;
    min-height: 663px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #certificate .set {
    width: calc(100% - 50px - 30px - 50px - 30px);
    height: 100%;
    min-height: 709px
  }
}

@media all and (min-width:769px) and (max-width:1024px) {
  #certificate .set {
    width: calc(100% - 70px - 30px - 70px - 30px)
  }
}

@media all and (min-width:1025px) {
  #certificate .set {
    width: calc(100% - 70px - 90px - 70px - 90px);
    max-width: 1181px
  }
}

@media all and (max-width:768px) {
  #certificate .set .block_1 {
    width: 100%;
    height: 100%
  }
}

@media all and (min-width:769px) and (max-width:1024px) {
  #certificate .set .block_1 {
    width: 50%
  }
}

@media all and (min-width:1025px) {
  #certificate .set .block_1 {
    width: 33.33333%
  }
}

#certificate .set .block_1 .site_title {
  display: block
}

#certificate .set .block_1 .site_title img{
  width: 200px;
}

@media all and (max-width:499px) {
  #certificate .set .block_1 .site_title {
    margin-top: -20px
  }
  #certificate .set .block_1 .site_title img{
    width: 150px;
  }
}

#certificate .set .block_1 .site_subtitle {
  display: block
}

@media all and (max-width:499px) {
  #certificate .set .block_1 .site_subtitle {
    margin-top: -80px
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  #certificate .set .block_1 .site_subtitle {
    margin-top: -70px
  }
}

@media all and (min-width:1025px) {
  #certificate .set .block_1 .site_subtitle {
    margin-top: -60px
  }
}

#certificate .set .block_1 .jfoodo {
  overflow: hidden;
  z-index: 1
}

@media all and (max-width:768px) {
  #certificate .set .block_1 .jfoodo {
    position: absolute;
    bottom: 0
  }
}

@media all and (min-width:769px) {
  #certificate .set .block_1 .jfoodo {
    margin-top: 50px
  }
}

#certificate .set .block_1 .jfoodo .logo_jfoodo {
  display: block;
  width: 114px;
  height: 29px;
  text-indent: -10000px;
  background-image: url(../../images/logo_jfoodo_color_frame.svg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  z-index: 1
}

#certificate .set .block_1 .jfoodo .logo_jfoodo.hover {
  opacity: .7
}

#certificate .set .block_1 .jfoodo .profile {
  pointer-events: none
}

@media all and (max-width:499px) {
  #certificate .set .block_1 .jfoodo .profile {
    margin-top: -40px;
    margin-bottom: -20px
  }
}

@media all and (min-width:500px) {
  #certificate .set .block_1 .jfoodo .profile {
    margin-top: -30px
  }
}

#certificate .set .block_1 .jfoodo .profile a {
  pointer-events: auto
}

@media all and (max-width:768px) {
  #certificate .set .block_2 {
    position: absolute;
    left: 0;
    width: 100%
  }
}

@media all and (max-width:499px) {
  #certificate .set .block_2 {
    top: 186px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #certificate .set .block_2 {
    top: 218px
  }
}

@media all and (min-width:769px) and (max-width:1024px) {
  #certificate .set .block_2 {
    width: 50%
  }
}

@media all and (min-width:1025px) {
  #certificate .set .block_2 {
    width: 40%;
    min-width: 300px
  }
}

#certificate .set .block_2 .back {
  display: block;
  opacity: 0;
  position: relative;
  margin: 30px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: opacity 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: opacity 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: opacity 1s cubic-bezier(.6, 0, .4, 1), transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: opacity 1s cubic-bezier(.6, 0, .4, 1), transform 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1)
}

@media all and (max-width:768px) {
  #certificate .set .block_2 .back {
    top: 0;
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0)
  }
}

@media all and (min-width:769px) {
  #certificate .set .block_2 .back {
    position: absolute;
    -webkit-transform: translate3d(40px, -100%, 0);
    transform: translate3d(40px, -100%, 0)
  }
}

#certificate .set .block_2 .back.show {
  opacity: 1;
  pointer-events: auto
}

@media all and (max-width:768px) {
  #certificate .set .block_2 .back.show {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@media all and (min-width:769px) {
  #certificate .set .block_2 .back.show {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

#certificate .set .block_2 .back>span {
  display: block;
  margin: -30px 0
}

#certificate .set .block_2 .pages {
  position: relative;
  height: 100%
}

@media all and (max-width:768px) {
  #certificate .set .block_2 .pages {
    margin-top: -70px
  }
}

#certificate .set .block_2 .pages .page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity .5s cubic-bezier(.6, 0, .4, 1), -webkit-transform .5s cubic-bezier(.6, 0, .4, 1);
  transition: opacity .5s cubic-bezier(.6, 0, .4, 1), -webkit-transform .5s cubic-bezier(.6, 0, .4, 1);
  transition: opacity .5s cubic-bezier(.6, 0, .4, 1), transform .5s cubic-bezier(.6, 0, .4, 1);
  transition: opacity .5s cubic-bezier(.6, 0, .4, 1), transform .5s cubic-bezier(.6, 0, .4, 1), -webkit-transform .5s cubic-bezier(.6, 0, .4, 1)
}

#certificate .set .block_2 .pages .page.standby {
  opacity: 0;
  -webkit-transform: translate3d(20px, 0, 0);
  transform: translate3d(20px, 0, 0);
  pointer-events: none
}

#certificate .set .block_2 .pages .page.standby a {
  pointer-events: none!important
}

#certificate .set .block_2 .pages .page.done {
  opacity: 0;
  -webkit-transform: translate3d(-20px, 0, 0);
  transform: translate3d(-20px, 0, 0);
  pointer-events: none
}

#certificate .set .block_2 .pages .page.done a {
  pointer-events: none!important
}

#certificate .set .block_2 .pages .page.country_selector {
  height: 100%
}

@media all and (max-width:499px) {
  #certificate .set .block_2 .pages .page.country_selector {
    margin-top: -39px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #certificate .set .block_2 .pages .page.country_selector {
    margin-top: -40px
  }
}

#certificate .set .block_2 .pages .page .message {
  pointer-events: none
}

#certificate .set .block_2 .pages .page .message .country {
  text-transform: uppercase
}

#certificate .set .block_2 .pages .page .message .underline {
  display: inline-block;
  position: relative;
  white-space: nowrap
}

#certificate .set .block_2 .pages .page .message .underline.hover::after {
  background-color: #e60012;
  -webkit-transition: background-color 0s ease-out;
  transition: background-color 0s ease-out
}

#certificate .set .block_2 .pages .page .message .underline::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background-color: #000;
  -webkit-transition: background-color .3s ease-out;
  transition: background-color .3s ease-out
}

#certificate .set .block_2 .pages .page .message .underline_css {
  position: relative;
  text-decoration: underline
}

#certificate .set .block_2 .pages .page .message .highlight {
  color: #e60012
}

#certificate .set .block_2 .pages .page .message a {
  pointer-events: auto
}

@media all and (max-width:499px) {
  #certificate .set .block_2 .pages .buttons {
    margin: -20px -15px 0 -15px;
    width: calc(100% + 30px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #certificate .set .block_2 .pages .buttons {
    margin: -20px -25px 0 -25px;
    width: calc(100% + 50px)
  }
}

@media all and (min-width:769px) {
  #certificate .set .block_2 .pages .buttons {
    position: absolute;
    width: 100%;
    bottom: 50px
  }
}

#certificate .set .block_2 .pages .buttons .button.disabled {
  color: rgba(255, 255, 255, .2);
  pointer-events: none
}

#certificate .set .block_2 .pages .buttons .button.disabled .icon_flag {
  opacity: .2
}

#certificate .set .block_2 .form {
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  opacity: 0;
  -webkit-transform: translate3d(40px, 0, 0);
  transform: translate3d(40px, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  -webkit-transition: top .3s ease-out, opacity 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: top .3s ease-out, opacity 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: top .3s ease-out, opacity 1s cubic-bezier(.6, 0, .4, 1), transform 1s cubic-bezier(.6, 0, .4, 1);
  transition: top .3s ease-out, opacity 1s cubic-bezier(.6, 0, .4, 1), transform 1s cubic-bezier(.6, 0, .4, 1), -webkit-transform 1s cubic-bezier(.6, 0, .4, 1)
}

#certificate .set .block_2 .form.show {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: auto
}

#certificate .set .block_2 .form input[type=checkbox] {
  display: none
}

#certificate .set .block_2 .form input[type=checkbox]:checked+.checkbox:hover::before {
  opacity: .6
}

#certificate .set .block_2 .form input[type=checkbox]:checked+.checkbox:hover::after {
  opacity: .6
}

#certificate .set .block_2 .form input[type=checkbox]:checked+.checkbox::before {
  opacity: 1
}

#certificate .set .block_2 .form input[type=checkbox]:checked+.checkbox::after {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

#certificate .set .block_2 .form input[type=checkbox]:focus+.checkbox::before {
  opacity: .8
}

#certificate .set .block_2 .form input[type=checkbox]:focus+.checkbox::after {
  opacity: .8
}

#certificate .set .block_2 .form .checkbox {
  display: block;
  position: relative;
  height: 30px;
  cursor: pointer
}

#certificate .set .block_2 .form .checkbox .label {
  display: inline-block;
  position: absolute;
  top: 50%;
  width: calc(100% - 40px);
  padding-left: 40px;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0)
}

#certificate .set .block_2 .form .checkbox:hover::before {
  opacity: .6
}

#certificate .set .block_2 .form .checkbox:hover::after {
  opacity: .6
}

#certificate .set .block_2 .form .checkbox::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: solid 1px #000;
  background-color: #fff;
  opacity: .3;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out
}

#certificate .set .block_2 .form .checkbox::after {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 14px;
  height: 14px;
  background-color: #000;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: opacity .2s ease-out, -webkit-transform .2s ease-out;
  transition: opacity .2s ease-out, -webkit-transform .2s ease-out;
  transition: opacity .2s ease-out, transform .2s ease-out;
  transition: opacity .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out
}

#certificate .privacy {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

#certificate .privacy.open {
  pointer-events: auto
}

#certificate .privacy.open .panel {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

#certificate .privacy.open::before {
  opacity: .8
}

#certificate .privacy::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity .5s cubic-bezier(.9, 0, .1, 1);
  transition: opacity .5s cubic-bezier(.9, 0, .1, 1)
}

#certificate .privacy .panel {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 50px - 50px);
  max-width: 500px;
  height: 100%;
  padding: 0 50px;
  background-color: #fff;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1), -webkit-transform .5s cubic-bezier(.9, 0, .1, 1)
}

#certificate .privacy .panel h2 {
  width: calc(100% - 20px)
}

#certificate .privacy .panel .body {
  margin-top: -50px
}

#certificate .privacy .panel .body ol {
  list-style-type: decimal;
  padding-left: 17px
}

#certificate .privacy .panel .body ul {
  list-style-type: disc;
  padding-left: 17px
}

#certificate .privacy .panel .published {
  margin-top: -50px
}

#certificate .close {
  position: fixed;
  top: 0;
  right: 0;
  width: 109px;
  height: 109px;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: -webkit-transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1), -webkit-transform .5s cubic-bezier(.9, 0, .1, 1)
}

#certificate .close.open {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

#certificate .close.hover div {
  -webkit-transform: scale(.8);
  -ms-transform: scale(.8);
  transform: scale(.8)
}

#certificate .close div {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 29px;
  height: 29px;
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

#certificate .close div span {
  display: block;
  position: absolute;
  top: 15px;
  left: -6px;
  width: 41px;
  height: 1px;
  background-color: #000
}

#certificate .close div span:nth-child(1) {
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg)
}

#certificate .close div span:nth-child(2) {
  -webkit-transform: rotate(-315deg);
  -ms-transform: rotate(-315deg);
  transform: rotate(-315deg)
}


/*# sourceMappingURL=jfoodo.certificate.5.css.map */