/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
* {
  -webkit-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial; }

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow-y: auto !important; }

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; }

#main-container {
  margin: 0px;
  padding: 0px;
  background-color: white; }

@keyframes animate-dot {
  0% {
    opacity: 1;
    @media only screen and (min-width: 1023px) {
      opacity: 1; }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      opacity: 1; }
    @media only screen and (max-width: 920px) {
      opacity: 1; }
    @media only screen and (max-width: 800px) {
      opacity: 1; }
    @media only screen and (max-width: 644px) {
      opacity: 1; } }
  50% {
    opacity: 0;
    @media only screen and (min-width: 1023px) {
      opacity: 0; }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      opacity: 0; }
    @media only screen and (max-width: 920px) {
      opacity: 0; }
    @media only screen and (max-width: 800px) {
      opacity: 0; }
    @media only screen and (max-width: 644px) {
      opacity: 0; } } }

#media-size-display {
  position: absolute;
  right: 0;
  z-index: 10;
  display: none; }
  #media-size-display .media-size-display-item {
    display: none; }
  #media-size-display #media-size-display-normal {
    background-color: yellow;
    display: block; }
  #media-size-display #media-size-display-ipad {
    background-color: pink; }
  #media-size-display #media-size-display-ipadlarge {
    background-color: purple; }
  #media-size-display #media-size-display-inter {
    background-color: lightsteelblue; }
  #media-size-display #media-size-display-iphone {
    background-color: lightcyan; }
  #media-size-display #media-size-display-iphonesmall {
    background-color: lightgreen; }
  @media only screen and (min-width: 1023px) {
    #media-size-display #media-size-display-ipad {
      display: block; }
    #media-size-display #media-size-display-normal {
      display: none; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    #media-size-display #media-size-display-ipadlarge {
      display: block; }
    #media-size-display #media-size-display-normal {
      display: none; } }
  @media only screen and (max-width: 800px) {
    #media-size-display #media-size-display-iphone {
      display: block; }
    #media-size-display #media-size-display-normal {
      display: none; } }
  @media only screen and (max-width: 920px) {
    #media-size-display #media-size-display-inter {
      display: block; }
    #media-size-display #media-size-display-normal {
      display: none; } }
  @media only screen and (max-width: 644px) {
    #media-size-display #media-size-display-iphonesmall {
      display: block; }
    #media-size-display #media-size-display-normal {
      display: none; } }
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
.top-nav {
  height: 130px; }
  @media only screen and (min-width: 1023px) {
    .top-nav {
      height: 146px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .top-nav {
      height: 174px; } }
  @media only screen and (max-width: 920px) {
    .top-nav {
      height: 111px; } }
  @media only screen and (max-width: 800px) {
    .top-nav {
      height: 91px; } }
  @media only screen and (max-width: 644px) {
    .top-nav {
      height: 70px; } }
  .top-nav .top-nav-bg {
    position: absolute;
    width: 100%;
    height: 18px;
    background-color: #f1eab6; }
    @media only screen and (min-width: 1023px) {
      .top-nav .top-nav-bg {
        height: 20px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav .top-nav-bg {
        height: 24px; } }
    @media only screen and (max-width: 920px) {
      .top-nav .top-nav-bg {
        height: 15px; } }
    @media only screen and (max-width: 800px) {
      .top-nav .top-nav-bg {
        height: 13px; } }
    @media only screen and (max-width: 644px) {
      .top-nav .top-nav-bg {
        height: 10px; } }
    .top-nav .top-nav-bg::after {
      content: '';
      position: absolute;
      background-image: url(/asset/images/svg/courbesCombinees.svg);
      background-size: 100%;
      background-repeat: no-repeat;
      width: 100%;
      height: 118px;
      top: 4px; }
      @media only screen and (min-width: 1023px) {
        .top-nav .top-nav-bg::after {
          height: 132px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .top-nav-bg::after {
          height: 158px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .top-nav-bg::after {
          height: 100px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .top-nav-bg::after {
          height: 83px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .top-nav-bg::after {
          height: 64px; } }
      @media only screen and (min-width: 1023px) {
        .top-nav .top-nav-bg::after {
          top: 4px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .top-nav-bg::after {
          top: 5px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .top-nav-bg::after {
          top: 3px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .top-nav-bg::after {
          top: 3px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .top-nav-bg::after {
          top: 2px; } }
  .top-nav .top-nav-main-btn-container {
    position: absolute;
    left: 50%;
    top: 9px;
    transform: translate(-50%, 0%); }
    @media only screen and (min-width: 1023px) {
      .top-nav .top-nav-main-btn-container {
        top: 10px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav .top-nav-main-btn-container {
        top: 12px; } }
    @media only screen and (max-width: 920px) {
      .top-nav .top-nav-main-btn-container {
        top: 8px; } }
    @media only screen and (max-width: 800px) {
      .top-nav .top-nav-main-btn-container {
        top: 6px; } }
    @media only screen and (max-width: 644px) {
      .top-nav .top-nav-main-btn-container {
        top: 5px; } }
    .top-nav .top-nav-main-btn-container a img {
      content: url("/asset/images/ui/sd/btn_accueil_idle.png");
      width: 151.8px;
      height: 117.4px; }
      @media (min-height: 1350px) {
        .top-nav .top-nav-main-btn-container a img {
          content: url("/asset/images/ui/hd/btn_accueil_idle.png"); } }
      @media only screen and (min-width: 1023px) {
        .top-nav .top-nav-main-btn-container a img {
          width: 170px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .top-nav-main-btn-container a img {
          width: 203px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .top-nav-main-btn-container a img {
          width: 129px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .top-nav-main-btn-container a img {
          width: 106px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .top-nav-main-btn-container a img {
          width: 82px; } }
      @media only screen and (min-width: 1023px) {
        .top-nav .top-nav-main-btn-container a img {
          height: 131px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .top-nav-main-btn-container a img {
          height: 157px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .top-nav-main-btn-container a img {
          height: 100px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .top-nav-main-btn-container a img {
          height: 82px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .top-nav-main-btn-container a img {
          height: 63px; } }
    .top-nav .top-nav-main-btn-container a:hover img, .top-nav .top-nav-main-btn-container a:active img {
      content: url("/asset/images/ui/sd/btn_accueil_over.png"); }
      @media (min-height: 1350px) {
        .top-nav .top-nav-main-btn-container a:hover img, .top-nav .top-nav-main-btn-container a:active img {
          content: url("/asset/images/ui/hd/btn_accueil_over.png"); } }
  .top-nav .link-back-container {
    position: absolute;
    top: 15px;
    left: 15px; }
    @media only screen and (min-width: 1023px) {
      .top-nav .link-back-container {
        top: 17px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav .link-back-container {
        top: 20px; } }
    @media only screen and (max-width: 920px) {
      .top-nav .link-back-container {
        top: 13px; } }
    @media only screen and (max-width: 800px) {
      .top-nav .link-back-container {
        top: 11px; } }
    @media only screen and (max-width: 644px) {
      .top-nav .link-back-container {
        top: 8px; } }
    @media only screen and (min-width: 1023px) {
      .top-nav .link-back-container {
        left: 17px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav .link-back-container {
        left: 20px; } }
    @media only screen and (max-width: 920px) {
      .top-nav .link-back-container {
        left: 13px; } }
    @media only screen and (max-width: 800px) {
      .top-nav .link-back-container {
        left: 11px; } }
    @media only screen and (max-width: 644px) {
      .top-nav .link-back-container {
        left: 8px; } }
    .top-nav .link-back-container a.my-button,
    .top-nav .link-back-container div.my-button {
      position: relative;
      display: block;
      cursor: pointer;
      background-color: #cdc793;
      border: none;
      text-align: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      filter: drop-shadow(0px 3px 0px #5d7d96); }
      @media only screen and (min-width: 1023px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          width: 38px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          width: 46px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          width: 29px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          width: 24px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          width: 18px; } }
      @media only screen and (min-width: 1023px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          height: 38px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          height: 46px; } }
      @media only screen and (max-width: 920px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          height: 29px; } }
      @media only screen and (max-width: 800px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          height: 24px; } }
      @media only screen and (max-width: 644px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          height: 18px; } }
      .top-nav .link-back-container a.my-button img,
      .top-nav .link-back-container div.my-button img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22px;
        height: 22px;
        content: url("/asset/images/svg/btn_icone_back.svg"); }
        @media only screen and (min-width: 1023px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            width: 25px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            width: 29px; } }
        @media only screen and (max-width: 920px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            width: 19px; } }
        @media only screen and (max-width: 800px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            width: 15px; } }
        @media only screen and (max-width: 644px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            width: 12px; } }
        @media only screen and (min-width: 1023px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            height: 25px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            height: 29px; } }
        @media only screen and (max-width: 920px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            height: 19px; } }
        @media only screen and (max-width: 800px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            height: 15px; } }
        @media only screen and (max-width: 644px) {
          .top-nav .link-back-container a.my-button img,
          .top-nav .link-back-container div.my-button img {
            height: 12px; } }
      @media only screen and (min-width: 1023px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          filter: drop-shadow(0px 3.36px 0px #5d7d96); } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          filter: drop-shadow(0px 4.01786px 0px #5d7d96); } }
      @media only screen and (max-width: 800px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          filter: drop-shadow(0px 2.1px 0px #5d7d96); } }
      @media only screen and (max-width: 644px) {
        .top-nav .link-back-container a.my-button,
        .top-nav .link-back-container div.my-button {
          filter: drop-shadow(0px 1.62px 0px #5d7d96); } }
      .top-nav .link-back-container a.my-button:hover, .top-nav .link-back-container a.my-button:active, .top-nav .link-back-container a.my-button:focus,
      .top-nav .link-back-container div.my-button:hover,
      .top-nav .link-back-container div.my-button:active,
      .top-nav .link-back-container div.my-button:focus {
        background-color: #cebb67; }
      .top-nav .link-back-container a.my-button img,
      .top-nav .link-back-container div.my-button img {
        left: 51%; }

.top-nav-links-container-left,
.top-nav-links-container {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  top: 24px; }
  @media only screen and (min-width: 1023px) {
    .top-nav-links-container-left,
    .top-nav-links-container {
      top: 27px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .top-nav-links-container-left,
    .top-nav-links-container {
      top: 32px; } }
  @media only screen and (max-width: 920px) {
    .top-nav-links-container-left,
    .top-nav-links-container {
      top: 20px; } }
  @media only screen and (max-width: 800px) {
    .top-nav-links-container-left,
    .top-nav-links-container {
      top: 17px; } }
  @media only screen and (max-width: 644px) {
    .top-nav-links-container-left,
    .top-nav-links-container {
      top: 13px; } }
  .top-nav-links-container-left-subnav,
  .top-nav-links-container-subnav {
    top: 45px; }
    @media only screen and (min-width: 1023px) {
      .top-nav-links-container-left-subnav,
      .top-nav-links-container-subnav {
        top: 50px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav-links-container-left-subnav,
      .top-nav-links-container-subnav {
        top: 60px; } }
    @media only screen and (max-width: 920px) {
      .top-nav-links-container-left-subnav,
      .top-nav-links-container-subnav {
        top: 38px; } }
    @media only screen and (max-width: 800px) {
      .top-nav-links-container-left-subnav,
      .top-nav-links-container-subnav {
        top: 32px; } }
    @media only screen and (max-width: 644px) {
      .top-nav-links-container-left-subnav,
      .top-nav-links-container-subnav {
        top: 24px; } }
  .top-nav-links-container-left a,
  .top-nav-links-container a {
    color: #6c6338;
    text-decoration: none;
    font-family: 'Arima Madurai Black'; }
    .top-nav-links-container-left a:hover, .top-nav-links-container-left a.current, .top-nav-links-container-left a:active,
    .top-nav-links-container a:hover,
    .top-nav-links-container a.current,
    .top-nav-links-container a:active {
      opacity: 0.6; }
    .top-nav-links-container-left a:visited,
    .top-nav-links-container a:visited {
      color: #6c6338; }

.top-nav-links-container {
  right: 34px; }
  @media only screen and (min-width: 1023px) {
    .top-nav-links-container {
      right: 38px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .top-nav-links-container {
      right: 46px; } }
  @media only screen and (max-width: 920px) {
    .top-nav-links-container {
      right: 29px; } }
  @media only screen and (max-width: 800px) {
    .top-nav-links-container {
      right: 24px; } }
  @media only screen and (max-width: 644px) {
    .top-nav-links-container {
      right: 18px; } }
  .top-nav-links-container .top-nav-link-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    margin-left: 20px; }
    @media only screen and (min-width: 1023px) {
      .top-nav-links-container .top-nav-link-container {
        margin-left: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav-links-container .top-nav-link-container {
        margin-left: 27px; } }
    @media only screen and (max-width: 920px) {
      .top-nav-links-container .top-nav-link-container {
        margin-left: 17px; } }
    @media only screen and (max-width: 800px) {
      .top-nav-links-container .top-nav-link-container {
        margin-left: 14px; } }
    @media only screen and (max-width: 644px) {
      .top-nav-links-container .top-nav-link-container {
        margin-left: 11px; } }

.top-nav-links-container-left {
  left: 70px; }
  @media only screen and (min-width: 1023px) {
    .top-nav-links-container-left {
      left: 78px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .top-nav-links-container-left {
      left: 94px; } }
  @media only screen and (max-width: 920px) {
    .top-nav-links-container-left {
      left: 60px; } }
  @media only screen and (max-width: 800px) {
    .top-nav-links-container-left {
      left: 49px; } }
  @media only screen and (max-width: 644px) {
    .top-nav-links-container-left {
      left: 38px; } }
  .top-nav-links-container-left .top-nav-link-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    margin-right: 20px; }
    @media only screen and (min-width: 1023px) {
      .top-nav-links-container-left .top-nav-link-container {
        margin-right: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .top-nav-links-container-left .top-nav-link-container {
        margin-right: 27px; } }
    @media only screen and (max-width: 920px) {
      .top-nav-links-container-left .top-nav-link-container {
        margin-right: 17px; } }
    @media only screen and (max-width: 800px) {
      .top-nav-links-container-left .top-nav-link-container {
        margin-right: 14px; } }
    @media only screen and (max-width: 644px) {
      .top-nav-links-container-left .top-nav-link-container {
        margin-right: 11px; } }

.userType-child .top-nav-main-btn-container a::after,
.userType-parent .top-nav-main-btn-container a::after,
.userType-teacher .top-nav-main-btn-container a::after {
  content: '';
  position: absolute;
  background-image: url("/asset/images/ui/sd/bulle_enfants.png");
  width: 75.8px;
  height: 65.8px;
  background-size: 100%;
  background-repeat: no-repeat;
  left: 132px;
  top: 47px; }
  @media (min-height: 1350px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      background-image: url("/asset/images/ui/hd/bulle_enfants.png"); } }
  @media only screen and (min-width: 1023px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      width: 85px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      width: 102px; } }
  @media only screen and (max-width: 920px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      width: 64px; } }
  @media only screen and (max-width: 800px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      width: 53px; } }
  @media only screen and (max-width: 644px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      width: 41px; } }
  @media only screen and (min-width: 1023px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      height: 74px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      height: 88px; } }
  @media only screen and (max-width: 920px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      height: 56px; } }
  @media only screen and (max-width: 800px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      height: 46px; } }
  @media only screen and (max-width: 644px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      height: 36px; } }
  @media only screen and (min-width: 1023px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      left: 148px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      left: 177px; } }
  @media only screen and (max-width: 920px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      left: 112px; } }
  @media only screen and (max-width: 800px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      left: 92px; } }
  @media only screen and (max-width: 644px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      left: 71px; } }
  @media only screen and (min-width: 1023px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      top: 53px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      top: 63px; } }
  @media only screen and (max-width: 920px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      top: 40px; } }
  @media only screen and (max-width: 800px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      top: 33px; } }
  @media only screen and (max-width: 644px) {
    .userType-child .top-nav-main-btn-container a::after,
    .userType-parent .top-nav-main-btn-container a::after,
    .userType-teacher .top-nav-main-btn-container a::after {
      top: 25px; } }

.current-basePage-forgotpassword .top-nav-main-btn-container a::after,
.current-basePage-resetpassword .top-nav-main-btn-container a::after {
  content: none !important; }

.userType-parent .top-nav-main-btn-container a::after {
  background-image: url("/asset/images/ui/sd/bulle_parents.png"); }
  @media (min-height: 1350px) {
    .userType-parent .top-nav-main-btn-container a::after {
      background-image: url("/asset/images/ui/hd/bulle_parents.png"); } }

.userType-teacher .top-nav-main-btn-container a::after {
  background-image: url("/asset/images/ui/sd/bulle_prof.png"); }
  @media (min-height: 1350px) {
    .userType-teacher .top-nav-main-btn-container a::after {
      background-image: url("/asset/images/ui/hd/bulle_prof.png"); } }

* {
  font-family: 'Niramit Regular'; }

.project-pc {
  font-family: 'Niramit Regular';
  font-size: 13px;
  line-height: 18px; }
  .project-pc main {
    position: relative;
    margin: auto;
    width: 920px; }
    @media only screen and (min-width: 1023px) {
      .project-pc main {
        width: 1030px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc main {
        width: 1232px; } }
    @media only screen and (max-width: 920px) {
      .project-pc main {
        width: 782px; } }
    @media only screen and (max-width: 800px) {
      .project-pc main {
        width: 644px; } }
    @media only screen and (max-width: 644px) {
      .project-pc main {
        width: 497px; } }
    .project-pc main .main-container {
      margin-left: 80px;
      margin-right: 80px; }
      @media only screen and (min-width: 1023px) {
        .project-pc main .main-container {
          margin-left: 90px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .project-pc main .main-container {
          margin-left: 107px; } }
      @media only screen and (max-width: 920px) {
        .project-pc main .main-container {
          margin-left: 68px; } }
      @media only screen and (max-width: 800px) {
        .project-pc main .main-container {
          margin-left: 56px; } }
      @media only screen and (max-width: 644px) {
        .project-pc main .main-container {
          margin-left: 43px; } }
      @media only screen and (min-width: 1023px) {
        .project-pc main .main-container {
          margin-right: 90px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .project-pc main .main-container {
          margin-right: 107px; } }
      @media only screen and (max-width: 920px) {
        .project-pc main .main-container {
          margin-right: 68px; } }
      @media only screen and (max-width: 800px) {
        .project-pc main .main-container {
          margin-right: 56px; } }
      @media only screen and (max-width: 644px) {
        .project-pc main .main-container {
          margin-right: 43px; } }
  @media only screen and (min-width: 1023px) {
    .project-pc {
      font-size: 15px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .project-pc {
      font-size: 17px; } }
  @media only screen and (max-width: 920px) {
    .project-pc {
      font-size: 11px; } }
  @media only screen and (max-width: 800px) {
    .project-pc {
      font-size: 9px; } }
  @media only screen and (max-width: 644px) {
    .project-pc {
      font-size: 7px; } }
  @media only screen and (min-width: 1023px) {
    .project-pc {
      line-height: 20px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .project-pc {
      line-height: 24px; } }
  @media only screen and (max-width: 920px) {
    .project-pc {
      line-height: 15px; } }
  @media only screen and (max-width: 800px) {
    .project-pc {
      line-height: 13px; } }
  @media only screen and (max-width: 644px) {
    .project-pc {
      line-height: 10px; } }
  .project-pc h1 {
    font-family: 'Arima Madurai Black';
    font-size: 19px; }
    @media only screen and (min-width: 1023px) {
      .project-pc h1 {
        font-size: 21px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc h1 {
        font-size: 25px; } }
    @media only screen and (max-width: 920px) {
      .project-pc h1 {
        font-size: 16px; } }
    @media only screen and (max-width: 800px) {
      .project-pc h1 {
        font-size: 13px; } }
    @media only screen and (max-width: 644px) {
      .project-pc h1 {
        font-size: 10px; } }
    .project-pc h1 + p {
      margin-top: -4px !important; }
      @media only screen and (min-width: 1023px) {
        .project-pc h1 + p {
          margin-top: -4px !important; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .project-pc h1 + p {
          margin-top: -5px !important; } }
      @media only screen and (max-width: 920px) {
        .project-pc h1 + p {
          margin-top: -3px !important; } }
      @media only screen and (max-width: 800px) {
        .project-pc h1 + p {
          margin-top: -3px !important; } }
      @media only screen and (max-width: 644px) {
        .project-pc h1 + p {
          margin-top: -2px !important; } }
  .project-pc h2 {
    font-family: 'Arima Madurai Black';
    font-size: 17px;
    margin: 0px;
    padding: 0px;
    margin-top: 30px; }
    @media only screen and (min-width: 1023px) {
      .project-pc h2 {
        font-size: 19px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc h2 {
        font-size: 23px; } }
    @media only screen and (max-width: 920px) {
      .project-pc h2 {
        font-size: 14px; } }
    @media only screen and (max-width: 800px) {
      .project-pc h2 {
        font-size: 12px; } }
    @media only screen and (max-width: 644px) {
      .project-pc h2 {
        font-size: 9px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc h2 {
        margin-top: 34px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc h2 {
        margin-top: 40px; } }
    @media only screen and (max-width: 920px) {
      .project-pc h2 {
        margin-top: 26px; } }
    @media only screen and (max-width: 800px) {
      .project-pc h2 {
        margin-top: 21px; } }
    @media only screen and (max-width: 644px) {
      .project-pc h2 {
        margin-top: 16px; } }
  .project-pc button {
    cursor: pointer;
    font-family: 'Arima Madurai Black';
    background-color: #f1eab6;
    border: none;
    text-align: center;
    border-radius: 17px;
    width: 204px;
    height: 55px;
    font-size: 18px;
    line-height: 62px;
    filter: drop-shadow(0px 6px 0px #5d7c98); }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        border-radius: 19px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        border-radius: 23px; } }
    @media only screen and (max-width: 920px) {
      .project-pc button {
        border-radius: 14px; } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        border-radius: 12px; } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        border-radius: 9px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        width: 228px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        width: 273px; } }
    @media only screen and (max-width: 920px) {
      .project-pc button {
        width: 173px; } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        width: 143px; } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        width: 110px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        height: 62px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        height: 74px; } }
    @media only screen and (max-width: 920px) {
      .project-pc button {
        height: 47px; } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        height: 39px; } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        height: 30px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        font-size: 20px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        font-size: 24px; } }
    @media only screen and (max-width: 920px) {
      .project-pc button {
        font-size: 15px; } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        font-size: 13px; } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        font-size: 10px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        line-height: 69px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        line-height: 83px; } }
    @media only screen and (max-width: 920px) {
      .project-pc button {
        line-height: 53px; } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        line-height: 43px; } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        line-height: 33px; } }
    @media only screen and (min-width: 1023px) {
      .project-pc button {
        filter: drop-shadow(0px 6.72px 0px #5d7c98); } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .project-pc button {
        filter: drop-shadow(0px 8.03571px 0px #5d7c98); } }
    @media only screen and (max-width: 800px) {
      .project-pc button {
        filter: drop-shadow(0px 4.2px 0px #5d7c98); } }
    @media only screen and (max-width: 644px) {
      .project-pc button {
        filter: drop-shadow(0px 3.24px 0px #5d7c98); } }
    .project-pc button:hover, .project-pc button:active, .project-pc button:focus {
      background-color: #cebb67; }

.round-btn-container a.my-button,
.round-btn-container div.my-button {
  position: relative;
  display: block;
  cursor: pointer;
  background-color: #f1e9b6;
  border: none;
  text-align: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  filter: drop-shadow(0px 3px 0px #5d7c97); }
  @media only screen and (min-width: 1023px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      width: 48px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      width: 58px; } }
  @media only screen and (max-width: 920px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      width: 37px; } }
  @media only screen and (max-width: 800px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      width: 30px; } }
  @media only screen and (max-width: 644px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      width: 23px; } }
  @media only screen and (min-width: 1023px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      height: 48px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      height: 58px; } }
  @media only screen and (max-width: 920px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      height: 37px; } }
  @media only screen and (max-width: 800px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      height: 30px; } }
  @media only screen and (max-width: 644px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      height: 23px; } }
  .round-btn-container a.my-button img,
  .round-btn-container div.my-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    content: url("/asset/images/svg/btn_icone_close.svg"); }
    @media only screen and (min-width: 1023px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        width: 25px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        width: 29px; } }
    @media only screen and (max-width: 920px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        width: 19px; } }
    @media only screen and (max-width: 800px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        width: 15px; } }
    @media only screen and (max-width: 644px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        width: 12px; } }
    @media only screen and (min-width: 1023px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        height: 25px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        height: 29px; } }
    @media only screen and (max-width: 920px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        height: 19px; } }
    @media only screen and (max-width: 800px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        height: 15px; } }
    @media only screen and (max-width: 644px) {
      .round-btn-container a.my-button img,
      .round-btn-container div.my-button img {
        height: 12px; } }
  @media only screen and (min-width: 1023px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      filter: drop-shadow(0px 3.36px 0px #5d7c97); } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      filter: drop-shadow(0px 4.01786px 0px #5d7c97); } }
  @media only screen and (max-width: 800px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      filter: drop-shadow(0px 2.1px 0px #5d7c97); } }
  @media only screen and (max-width: 644px) {
    .round-btn-container a.my-button,
    .round-btn-container div.my-button {
      filter: drop-shadow(0px 1.62px 0px #5d7c97); } }
  .round-btn-container a.my-button:hover, .round-btn-container a.my-button:active, .round-btn-container a.my-button:focus,
  .round-btn-container div.my-button:hover,
  .round-btn-container div.my-button:active,
  .round-btn-container div.my-button:focus {
    background-color: #cebb67; }

.activity-btn-close-container {
  position: absolute;
  z-index: 1; }
  .activity-btn-close-container a.my-button {
    position: relative;
    display: block;
    cursor: pointer;
    background-color: #f1e9b6;
    border: none;
    text-align: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 0px #5d7c97); }
    @media only screen and (min-width: 1023px) {
      .activity-btn-close-container a.my-button {
        width: 48px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .activity-btn-close-container a.my-button {
        width: 58px; } }
    @media only screen and (max-width: 920px) {
      .activity-btn-close-container a.my-button {
        width: 37px; } }
    @media only screen and (max-width: 800px) {
      .activity-btn-close-container a.my-button {
        width: 30px; } }
    @media only screen and (max-width: 644px) {
      .activity-btn-close-container a.my-button {
        width: 23px; } }
    @media only screen and (min-width: 1023px) {
      .activity-btn-close-container a.my-button {
        height: 48px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .activity-btn-close-container a.my-button {
        height: 58px; } }
    @media only screen and (max-width: 920px) {
      .activity-btn-close-container a.my-button {
        height: 37px; } }
    @media only screen and (max-width: 800px) {
      .activity-btn-close-container a.my-button {
        height: 30px; } }
    @media only screen and (max-width: 644px) {
      .activity-btn-close-container a.my-button {
        height: 23px; } }
    .activity-btn-close-container a.my-button img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 22px;
      content: url("/asset/images/svg/btn_icone_close.svg"); }
      @media only screen and (min-width: 1023px) {
        .activity-btn-close-container a.my-button img {
          width: 25px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .activity-btn-close-container a.my-button img {
          width: 29px; } }
      @media only screen and (max-width: 920px) {
        .activity-btn-close-container a.my-button img {
          width: 19px; } }
      @media only screen and (max-width: 800px) {
        .activity-btn-close-container a.my-button img {
          width: 15px; } }
      @media only screen and (max-width: 644px) {
        .activity-btn-close-container a.my-button img {
          width: 12px; } }
      @media only screen and (min-width: 1023px) {
        .activity-btn-close-container a.my-button img {
          height: 25px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .activity-btn-close-container a.my-button img {
          height: 29px; } }
      @media only screen and (max-width: 920px) {
        .activity-btn-close-container a.my-button img {
          height: 19px; } }
      @media only screen and (max-width: 800px) {
        .activity-btn-close-container a.my-button img {
          height: 15px; } }
      @media only screen and (max-width: 644px) {
        .activity-btn-close-container a.my-button img {
          height: 12px; } }
    @media only screen and (min-width: 1023px) {
      .activity-btn-close-container a.my-button {
        filter: drop-shadow(0px 3.36px 0px #5d7c97); } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .activity-btn-close-container a.my-button {
        filter: drop-shadow(0px 4.01786px 0px #5d7c97); } }
    @media only screen and (max-width: 800px) {
      .activity-btn-close-container a.my-button {
        filter: drop-shadow(0px 2.1px 0px #5d7c97); } }
    @media only screen and (max-width: 644px) {
      .activity-btn-close-container a.my-button {
        filter: drop-shadow(0px 1.62px 0px #5d7c97); } }
    .activity-btn-close-container a.my-button:hover, .activity-btn-close-container a.my-button:active, .activity-btn-close-container a.my-button:focus {
      background-color: #cebb67; }

.activitytype-video,
.current-basePage-homevideo,
.current-basePage-teachervideo,
.current-basePage-parentvideo {
  overflow: hidden; }
  .activitytype-video #main-container,
  .current-basePage-homevideo #main-container,
  .current-basePage-teachervideo #main-container,
  .current-basePage-parentvideo #main-container {
    overflow: hidden;
    margin: initial;
    width: 100%;
    height: 100%; }
    .activitytype-video #main-container main,
    .current-basePage-homevideo #main-container main,
    .current-basePage-teachervideo #main-container main,
    .current-basePage-parentvideo #main-container main {
      position: relative;
      overflow: hidden;
      margin: auto;
      width: 100%; }
      .activitytype-video #main-container main .main-container,
      .current-basePage-homevideo #main-container main .main-container,
      .current-basePage-teachervideo #main-container main .main-container,
      .current-basePage-parentvideo #main-container main .main-container {
        margin: initial; }
  .activitytype-video .activity-btn-close-container,
  .current-basePage-homevideo .activity-btn-close-container,
  .current-basePage-teachervideo .activity-btn-close-container,
  .current-basePage-parentvideo .activity-btn-close-container {
    top: 13px;
    right: 90px; }
    @media only screen and (min-width: 1023px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        top: 15px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        top: 17px; } }
    @media only screen and (max-width: 920px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        top: 11px; } }
    @media only screen and (max-width: 800px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        top: 9px; } }
    @media only screen and (max-width: 644px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        top: 7px; } }
    @media only screen and (min-width: 1023px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        right: 101px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        right: 121px; } }
    @media only screen and (max-width: 920px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        right: 77px; } }
    @media only screen and (max-width: 800px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        right: 63px; } }
    @media only screen and (max-width: 644px) {
      .activitytype-video .activity-btn-close-container,
      .current-basePage-homevideo .activity-btn-close-container,
      .current-basePage-teachervideo .activity-btn-close-container,
      .current-basePage-parentvideo .activity-btn-close-container {
        right: 49px; } }

.activitytype-game .activity-btn-close-container {
  top: -5px;
  right: -48px; }
  @media only screen and (min-width: 1023px) {
    .activitytype-game .activity-btn-close-container {
      top: -6px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .activitytype-game .activity-btn-close-container {
      top: -7px; } }
  @media only screen and (max-width: 920px) {
    .activitytype-game .activity-btn-close-container {
      top: -4px; } }
  @media only screen and (max-width: 800px) {
    .activitytype-game .activity-btn-close-container {
      top: -4px; } }
  @media only screen and (max-width: 644px) {
    .activitytype-game .activity-btn-close-container {
      top: -3px; } }
  @media only screen and (min-width: 1023px) {
    .activitytype-game .activity-btn-close-container {
      right: -54px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .activitytype-game .activity-btn-close-container {
      right: -64px; } }
  @media only screen and (max-width: 920px) {
    .activitytype-game .activity-btn-close-container {
      right: -41px; } }
  @media only screen and (max-width: 800px) {
    .activitytype-game .activity-btn-close-container {
      right: -34px; } }
  @media only screen and (max-width: 644px) {
    .activitytype-game .activity-btn-close-container {
      right: -26px; } }

a {
  color: black; }
  a:hover, a:visited {
    color: black; }
  a.my-button {
    text-decoration: none;
    color: initial;
    cursor: pointer;
    font-family: 'Arima Madurai Black';
    background-color: #f1eab6;
    border: none;
    text-align: center;
    border-radius: 17px;
    width: 204px;
    height: 55px;
    font-size: 18px;
    line-height: 62px;
    filter: drop-shadow(0px 6px 0px #5d7c98); }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        border-radius: 19px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        border-radius: 23px; } }
    @media only screen and (max-width: 920px) {
      a.my-button {
        border-radius: 14px; } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        border-radius: 12px; } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        border-radius: 9px; } }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        width: 228px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        width: 273px; } }
    @media only screen and (max-width: 920px) {
      a.my-button {
        width: 173px; } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        width: 143px; } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        width: 110px; } }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        height: 62px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        height: 74px; } }
    @media only screen and (max-width: 920px) {
      a.my-button {
        height: 47px; } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        height: 39px; } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        height: 30px; } }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        font-size: 20px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        font-size: 24px; } }
    @media only screen and (max-width: 920px) {
      a.my-button {
        font-size: 15px; } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        font-size: 13px; } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        font-size: 10px; } }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        line-height: 69px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        line-height: 83px; } }
    @media only screen and (max-width: 920px) {
      a.my-button {
        line-height: 53px; } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        line-height: 43px; } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        line-height: 33px; } }
    @media only screen and (min-width: 1023px) {
      a.my-button {
        filter: drop-shadow(0px 6.72px 0px #5d7c98); } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      a.my-button {
        filter: drop-shadow(0px 8.03571px 0px #5d7c98); } }
    @media only screen and (max-width: 800px) {
      a.my-button {
        filter: drop-shadow(0px 4.2px 0px #5d7c98); } }
    @media only screen and (max-width: 644px) {
      a.my-button {
        filter: drop-shadow(0px 3.24px 0px #5d7c98); } }
    a.my-button:hover, a.my-button:active, a.my-button:focus {
      background-color: #cebb67; }
  a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: pointer; }

.sound-icon {
  position: relative;
  width: 25px;
  height: 25px;
  background-image: url(/asset/images/svg/btn_icone_son_bleu.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer; }
  @media only screen and (min-width: 1023px) {
    .sound-icon {
      width: 28px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .sound-icon {
      width: 33px; } }
  @media only screen and (max-width: 920px) {
    .sound-icon {
      width: 21px; } }
  @media only screen and (max-width: 800px) {
    .sound-icon {
      width: 18px; } }
  @media only screen and (max-width: 644px) {
    .sound-icon {
      width: 14px; } }
  @media only screen and (min-width: 1023px) {
    .sound-icon {
      height: 28px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .sound-icon {
      height: 33px; } }
  @media only screen and (max-width: 920px) {
    .sound-icon {
      height: 21px; } }
  @media only screen and (max-width: 800px) {
    .sound-icon {
      height: 18px; } }
  @media only screen and (max-width: 644px) {
    .sound-icon {
      height: 14px; } }
  .sound-icon::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: -5px;
    left: -5px; }
    @media only screen and (min-width: 1023px) {
      .sound-icon::after {
        width: 34px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .sound-icon::after {
        width: 40px; } }
    @media only screen and (max-width: 920px) {
      .sound-icon::after {
        width: 26px; } }
    @media only screen and (max-width: 800px) {
      .sound-icon::after {
        width: 21px; } }
    @media only screen and (max-width: 644px) {
      .sound-icon::after {
        width: 16px; } }
    @media only screen and (min-width: 1023px) {
      .sound-icon::after {
        height: 34px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .sound-icon::after {
        height: 40px; } }
    @media only screen and (max-width: 920px) {
      .sound-icon::after {
        height: 26px; } }
    @media only screen and (max-width: 800px) {
      .sound-icon::after {
        height: 21px; } }
    @media only screen and (max-width: 644px) {
      .sound-icon::after {
        height: 16px; } }
    @media only screen and (min-width: 1023px) {
      .sound-icon::after {
        top: -6px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .sound-icon::after {
        top: -7px; } }
    @media only screen and (max-width: 920px) {
      .sound-icon::after {
        top: -4px; } }
    @media only screen and (max-width: 800px) {
      .sound-icon::after {
        top: -4px; } }
    @media only screen and (max-width: 644px) {
      .sound-icon::after {
        top: -3px; } }
    @media only screen and (min-width: 1023px) {
      .sound-icon::after {
        left: -6px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .sound-icon::after {
        left: -7px; } }
    @media only screen and (max-width: 920px) {
      .sound-icon::after {
        left: -4px; } }
    @media only screen and (max-width: 800px) {
      .sound-icon::after {
        left: -4px; } }
    @media only screen and (max-width: 644px) {
      .sound-icon::after {
        left: -3px; } }
  .sound-icon:hover {
    opacity: 0.5; }

.orientation-change-warning-container {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(86, 145, 155, 0.9);
  display: none; }
  .orientation-change-warning-container .orientation-change-warning {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 20px;
    padding-bottom: 24px;
    background-color: white;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #315574; }
    @media only screen and (min-width: 1023px) {
      .orientation-change-warning-container .orientation-change-warning {
        width: 672px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .orientation-change-warning-container .orientation-change-warning {
        width: 804px; } }
    @media only screen and (max-width: 920px) {
      .orientation-change-warning-container .orientation-change-warning {
        width: 510px; } }
    @media only screen and (max-width: 800px) {
      .orientation-change-warning-container .orientation-change-warning {
        width: 420px; } }
    @media only screen and (max-width: 644px) {
      .orientation-change-warning-container .orientation-change-warning {
        width: 324px; } }
    @media only screen and (min-width: 1023px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding: 27px; } }
    @media only screen and (max-width: 920px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding: 17px; } }
    @media only screen and (max-width: 800px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding: 14px; } }
    @media only screen and (max-width: 644px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding: 11px; } }
    @media only screen and (min-width: 1023px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding-bottom: 27px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding-bottom: 32px; } }
    @media only screen and (max-width: 920px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding-bottom: 20px; } }
    @media only screen and (max-width: 800px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding-bottom: 17px; } }
    @media only screen and (max-width: 644px) {
      .orientation-change-warning-container .orientation-change-warning {
        padding-bottom: 13px; } }
    @media only screen and (min-width: 1023px) {
      .orientation-change-warning-container .orientation-change-warning {
        font-size: 29px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .orientation-change-warning-container .orientation-change-warning {
        font-size: 35px; } }
    @media only screen and (max-width: 920px) {
      .orientation-change-warning-container .orientation-change-warning {
        font-size: 22px; } }
    @media only screen and (max-width: 800px) {
      .orientation-change-warning-container .orientation-change-warning {
        font-size: 18px; } }
    @media only screen and (max-width: 644px) {
      .orientation-change-warning-container .orientation-change-warning {
        font-size: 14px; } }
    @media only screen and (min-width: 1023px) {
      .orientation-change-warning-container .orientation-change-warning {
        line-height: 34px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .orientation-change-warning-container .orientation-change-warning {
        line-height: 40px; } }
    @media only screen and (max-width: 920px) {
      .orientation-change-warning-container .orientation-change-warning {
        line-height: 26px; } }
    @media only screen and (max-width: 800px) {
      .orientation-change-warning-container .orientation-change-warning {
        line-height: 21px; } }
    @media only screen and (max-width: 644px) {
      .orientation-change-warning-container .orientation-change-warning {
        line-height: 16px; } }
    .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
      width: 453.6px;
      height: 537.6px;
      margin-top: 15px;
      margin-bottom: 15px;
      background-image: url(/asset/images/svg/img_popUp_orientation.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      display: inline-block; }
      @media only screen and (min-width: 1023px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          width: 508px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          width: 608px; } }
      @media only screen and (max-width: 920px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          width: 386px; } }
      @media only screen and (max-width: 800px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          width: 318px; } }
      @media only screen and (max-width: 644px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          width: 245px; } }
      @media only screen and (min-width: 1023px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          height: 602px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          height: 720px; } }
      @media only screen and (max-width: 920px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          height: 457px; } }
      @media only screen and (max-width: 800px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          height: 376px; } }
      @media only screen and (max-width: 644px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          height: 290px; } }
      @media only screen and (min-width: 1023px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-top: 17px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-top: 20px; } }
      @media only screen and (max-width: 920px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-top: 13px; } }
      @media only screen and (max-width: 800px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-top: 11px; } }
      @media only screen and (max-width: 644px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-top: 8px; } }
      @media only screen and (min-width: 1023px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-bottom: 17px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-bottom: 20px; } }
      @media only screen and (max-width: 920px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-bottom: 13px; } }
      @media only screen and (max-width: 800px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-bottom: 11px; } }
      @media only screen and (max-width: 644px) {
        .orientation-change-warning-container .orientation-change-warning .orientation-change-warning-image {
          margin-bottom: 8px; } }

@media screen and (orientation: portrait) {
  .is-mobile-true .orientation-change-warning-container {
    display: block; } }

.admin-nav {
  width: 100%;
  height: 83px;
  margin-bottom: 20px;
  background-color: #f1eab6; }
  @media only screen and (min-width: 1023px) {
    .admin-nav {
      height: 93px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .admin-nav {
      height: 111px; } }
  @media only screen and (max-width: 920px) {
    .admin-nav {
      height: 71px; } }
  @media only screen and (max-width: 800px) {
    .admin-nav {
      height: 58px; } }
  @media only screen and (max-width: 644px) {
    .admin-nav {
      height: 45px; } }
  @media only screen and (min-width: 1023px) {
    .admin-nav {
      margin-bottom: 22px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .admin-nav {
      margin-bottom: 27px; } }
  @media only screen and (max-width: 920px) {
    .admin-nav {
      margin-bottom: 17px; } }
  @media only screen and (max-width: 800px) {
    .admin-nav {
      margin-bottom: 14px; } }
  @media only screen and (max-width: 644px) {
    .admin-nav {
      margin-bottom: 11px; } }
  .admin-nav .admin-nav-title {
    padding-top: 20px;
    padding-left: 20px;
    font-size: 20px;
    font-family: 'Arima Madurai Black'; }
    @media only screen and (min-width: 1023px) {
      .admin-nav .admin-nav-title {
        padding-top: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .admin-nav .admin-nav-title {
        padding-top: 27px; } }
    @media only screen and (max-width: 920px) {
      .admin-nav .admin-nav-title {
        padding-top: 17px; } }
    @media only screen and (max-width: 800px) {
      .admin-nav .admin-nav-title {
        padding-top: 14px; } }
    @media only screen and (max-width: 644px) {
      .admin-nav .admin-nav-title {
        padding-top: 11px; } }
    @media only screen and (min-width: 1023px) {
      .admin-nav .admin-nav-title {
        padding-left: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .admin-nav .admin-nav-title {
        padding-left: 27px; } }
    @media only screen and (max-width: 920px) {
      .admin-nav .admin-nav-title {
        padding-left: 17px; } }
    @media only screen and (max-width: 800px) {
      .admin-nav .admin-nav-title {
        padding-left: 14px; } }
    @media only screen and (max-width: 644px) {
      .admin-nav .admin-nav-title {
        padding-left: 11px; } }
    @media only screen and (min-width: 1023px) {
      .admin-nav .admin-nav-title {
        font-size: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .admin-nav .admin-nav-title {
        font-size: 27px; } }
    @media only screen and (max-width: 920px) {
      .admin-nav .admin-nav-title {
        font-size: 17px; } }
    @media only screen and (max-width: 800px) {
      .admin-nav .admin-nav-title {
        font-size: 14px; } }
    @media only screen and (max-width: 644px) {
      .admin-nav .admin-nav-title {
        font-size: 11px; } }
  .admin-nav ul {
    padding-left: 20px; }
    @media only screen and (min-width: 1023px) {
      .admin-nav ul {
        padding-left: 22px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .admin-nav ul {
        padding-left: 27px; } }
    @media only screen and (max-width: 920px) {
      .admin-nav ul {
        padding-left: 17px; } }
    @media only screen and (max-width: 800px) {
      .admin-nav ul {
        padding-left: 14px; } }
    @media only screen and (max-width: 644px) {
      .admin-nav ul {
        padding-left: 11px; } }
    .admin-nav ul li {
      display: inline-block;
      margin-right: 10px; }
      @media only screen and (min-width: 1023px) {
        .admin-nav ul li {
          margin-right: 11px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        .admin-nav ul li {
          margin-right: 13px; } }
      @media only screen and (max-width: 920px) {
        .admin-nav ul li {
          margin-right: 9px; } }
      @media only screen and (max-width: 800px) {
        .admin-nav ul li {
          margin-right: 7px; } }
      @media only screen and (max-width: 644px) {
        .admin-nav ul li {
          margin-right: 5px; } }
      .admin-nav ul li.current {
        background-color: rgba(0, 0, 0, 0.1); }

.current-page-homevideo .round-btn-container::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  left: -13px;
  top: -13px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%; }
  @media only screen and (min-width: 1023px) {
    .current-page-homevideo .round-btn-container::before {
      width: 78px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-homevideo .round-btn-container::before {
      width: 94px; } }
  @media only screen and (max-width: 920px) {
    .current-page-homevideo .round-btn-container::before {
      width: 60px; } }
  @media only screen and (max-width: 800px) {
    .current-page-homevideo .round-btn-container::before {
      width: 49px; } }
  @media only screen and (max-width: 644px) {
    .current-page-homevideo .round-btn-container::before {
      width: 38px; } }
  @media only screen and (min-width: 1023px) {
    .current-page-homevideo .round-btn-container::before {
      height: 78px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-homevideo .round-btn-container::before {
      height: 94px; } }
  @media only screen and (max-width: 920px) {
    .current-page-homevideo .round-btn-container::before {
      height: 60px; } }
  @media only screen and (max-width: 800px) {
    .current-page-homevideo .round-btn-container::before {
      height: 49px; } }
  @media only screen and (max-width: 644px) {
    .current-page-homevideo .round-btn-container::before {
      height: 38px; } }
  @media only screen and (min-width: 1023px) {
    .current-page-homevideo .round-btn-container::before {
      left: -15px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-homevideo .round-btn-container::before {
      left: -17px; } }
  @media only screen and (max-width: 920px) {
    .current-page-homevideo .round-btn-container::before {
      left: -11px; } }
  @media only screen and (max-width: 800px) {
    .current-page-homevideo .round-btn-container::before {
      left: -9px; } }
  @media only screen and (max-width: 644px) {
    .current-page-homevideo .round-btn-container::before {
      left: -7px; } }
  @media only screen and (min-width: 1023px) {
    .current-page-homevideo .round-btn-container::before {
      top: -15px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-homevideo .round-btn-container::before {
      top: -17px; } }
  @media only screen and (max-width: 920px) {
    .current-page-homevideo .round-btn-container::before {
      top: -11px; } }
  @media only screen and (max-width: 800px) {
    .current-page-homevideo .round-btn-container::before {
      top: -9px; } }
  @media only screen and (max-width: 644px) {
    .current-page-homevideo .round-btn-container::before {
      top: -7px; } }

div.post-it-note {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
  font-style: italic;
  background-color: #fffacc;
  box-shadow: 0px 2px 2px 3px #dadada;
  -webkit-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  height: 120px;
  width: 180px; }
  @media only screen and (min-width: 1023px) {
    div.post-it-note {
      height: 134px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    div.post-it-note {
      height: 161px; } }
  @media only screen and (max-width: 920px) {
    div.post-it-note {
      height: 102px; } }
  @media only screen and (max-width: 800px) {
    div.post-it-note {
      height: 84px; } }
  @media only screen and (max-width: 644px) {
    div.post-it-note {
      height: 65px; } }
  @media only screen and (min-width: 1023px) {
    div.post-it-note {
      width: 202px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    div.post-it-note {
      width: 241px; } }
  @media only screen and (max-width: 920px) {
    div.post-it-note {
      width: 153px; } }
  @media only screen and (max-width: 800px) {
    div.post-it-note {
      width: 126px; } }
  @media only screen and (max-width: 644px) {
    div.post-it-note {
      width: 97px; } }

.right-0 {
  right: 0; }

.absolute {
  position: absolute; }

.-mt-50 {
  margin-top: -50px; }
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
form {
  position: relative;
  margin-left: 70px;
  margin-top: 5px;
  margin-bottom: 20px;
  width: 466px; }
  @media only screen and (min-width: 1023px) {
    form {
      margin-left: 78px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    form {
      margin-left: 94px; } }
  @media only screen and (max-width: 920px) {
    form {
      margin-left: 60px; } }
  @media only screen and (max-width: 800px) {
    form {
      margin-left: 49px; } }
  @media only screen and (max-width: 644px) {
    form {
      margin-left: 38px; } }
  @media only screen and (min-width: 1023px) {
    form {
      margin-top: 6px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    form {
      margin-top: 7px; } }
  @media only screen and (max-width: 920px) {
    form {
      margin-top: 4px; } }
  @media only screen and (max-width: 800px) {
    form {
      margin-top: 4px; } }
  @media only screen and (max-width: 644px) {
    form {
      margin-top: 3px; } }
  @media only screen and (min-width: 1023px) {
    form {
      margin-bottom: 22px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    form {
      margin-bottom: 27px; } }
  @media only screen and (max-width: 920px) {
    form {
      margin-bottom: 17px; } }
  @media only screen and (max-width: 800px) {
    form {
      margin-bottom: 14px; } }
  @media only screen and (max-width: 644px) {
    form {
      margin-bottom: 11px; } }
  @media only screen and (min-width: 1023px) {
    form {
      width: 522px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    form {
      width: 624px; } }
  @media only screen and (max-width: 920px) {
    form {
      width: 396px; } }
  @media only screen and (max-width: 800px) {
    form {
      width: 326px; } }
  @media only screen and (max-width: 644px) {
    form {
      width: 252px; } }
  form label {
    display: block;
    font-size: 14px; }
    @media only screen and (min-width: 1023px) {
      form label {
        font-size: 16px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      form label {
        font-size: 19px; } }
    @media only screen and (max-width: 920px) {
      form label {
        font-size: 12px; } }
    @media only screen and (max-width: 800px) {
      form label {
        font-size: 10px; } }
    @media only screen and (max-width: 644px) {
      form label {
        font-size: 8px; } }
  form .checkbox {
    display: -ms-flexbox;
    display: flex; }
    form .checkbox__option {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center; }
      form .checkbox__option input[type=checkbox] {
        width: 40px;
        height: 20px; }
      form .checkbox__option-big label {
        width: 100px; }
  @media (max-width: 900px) {
    form .checkbox {
      display: -ms-flexbox;
      display: flex; }
      form .checkbox__option-big label {
        width: unset; } }
  form .schoolevels-other {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    form .schoolevels-other input {
      margin-left: 10px;
      width: 90px !important; }
  form .input-row {
    position: relative;
    vertical-align: top;
    margin-top: 8px; }
    @media only screen and (min-width: 1023px) {
      form .input-row {
        margin-top: 9px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      form .input-row {
        margin-top: 11px; } }
    @media only screen and (max-width: 920px) {
      form .input-row {
        margin-top: 7px; } }
    @media only screen and (max-width: 800px) {
      form .input-row {
        margin-top: 6px; } }
    @media only screen and (max-width: 644px) {
      form .input-row {
        margin-top: 4px; } }
    form .input-row.text-area-row {
      margin-top: 10px; }
      @media only screen and (min-width: 1023px) {
        form .input-row.text-area-row {
          margin-top: 11px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row.text-area-row {
          margin-top: 13px; } }
      @media only screen and (max-width: 920px) {
        form .input-row.text-area-row {
          margin-top: 9px; } }
      @media only screen and (max-width: 800px) {
        form .input-row.text-area-row {
          margin-top: 7px; } }
      @media only screen and (max-width: 644px) {
        form .input-row.text-area-row {
          margin-top: 5px; } }
    form .input-row input,
    form .input-row textarea {
      resize: none;
      font-family: 'Niramit Regular';
      border: none;
      color: black !important;
      background-color: #ebe9dd;
      width: 460px; }
      @media only screen and (min-width: 1023px) {
        form .input-row input,
        form .input-row textarea {
          width: 515px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row input,
        form .input-row textarea {
          width: 616px; } }
      @media only screen and (max-width: 920px) {
        form .input-row input,
        form .input-row textarea {
          width: 391px; } }
      @media only screen and (max-width: 800px) {
        form .input-row input,
        form .input-row textarea {
          width: 322px; } }
      @media only screen and (max-width: 644px) {
        form .input-row input,
        form .input-row textarea {
          width: 248px; } }
      form .input-row input:-ms-input-placeholder,
      form .input-row textarea:-ms-input-placeholder {
        color: #bab5a2;
        padding-left: 5px; }
      form .input-row input::placeholder,
      form .input-row textarea::placeholder {
        color: #bab5a2;
        padding-left: 5px; }
        @media only screen and (min-width: 1023px) {
          form .input-row input:-ms-input-placeholder,
          form .input-row textarea:-ms-input-placeholder {
            padding-left: 6px; }
          form .input-row input::placeholder,
          form .input-row textarea::placeholder {
            padding-left: 6px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row input:-ms-input-placeholder,
          form .input-row textarea:-ms-input-placeholder {
            padding-left: 7px; }
          form .input-row input::placeholder,
          form .input-row textarea::placeholder {
            padding-left: 7px; } }
        @media only screen and (max-width: 920px) {
          form .input-row input:-ms-input-placeholder,
          form .input-row textarea:-ms-input-placeholder {
            padding-left: 4px; }
          form .input-row input::placeholder,
          form .input-row textarea::placeholder {
            padding-left: 4px; } }
        @media only screen and (max-width: 800px) {
          form .input-row input:-ms-input-placeholder,
          form .input-row textarea:-ms-input-placeholder {
            padding-left: 4px; }
          form .input-row input::placeholder,
          form .input-row textarea::placeholder {
            padding-left: 4px; } }
        @media only screen and (max-width: 644px) {
          form .input-row input:-ms-input-placeholder,
          form .input-row textarea:-ms-input-placeholder {
            padding-left: 3px; }
          form .input-row input::placeholder,
          form .input-row textarea::placeholder {
            padding-left: 3px; } }
      form .input-row input:focus:active, form .input-row input:focus,
      form .input-row textarea:focus:active,
      form .input-row textarea:focus {
        outline-color: #bab5a2;
        outline-width: 2px;
        outline-style: solid !important; }
      form .input-row input:focus:not(:focus-visible), form .input-row input.active,
      form .input-row textarea:focus:not(:focus-visible),
      form .input-row textarea.active {
        outline: none;
        outline-color: transparent !important; }
    form .input-row input {
      height: 28px; }
      @media only screen and (min-width: 1023px) {
        form .input-row input {
          height: 31px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row input {
          height: 38px; } }
      @media only screen and (max-width: 920px) {
        form .input-row input {
          height: 24px; } }
      @media only screen and (max-width: 800px) {
        form .input-row input {
          height: 20px; } }
      @media only screen and (max-width: 644px) {
        form .input-row input {
          height: 15px; } }
      form .input-row input.input-type-number {
        width: 120px; }
        @media only screen and (min-width: 1023px) {
          form .input-row input.input-type-number {
            width: 134px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row input.input-type-number {
            width: 161px; } }
        @media only screen and (max-width: 920px) {
          form .input-row input.input-type-number {
            width: 102px; } }
        @media only screen and (max-width: 800px) {
          form .input-row input.input-type-number {
            width: 84px; } }
        @media only screen and (max-width: 644px) {
          form .input-row input.input-type-number {
            width: 65px; } }
    form .input-row .star {
      position: absolute;
      right: -6px; }
      @media only screen and (min-width: 1023px) {
        form .input-row .star {
          right: -7px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row .star {
          right: -8px; } }
      @media only screen and (max-width: 920px) {
        form .input-row .star {
          right: -5px; } }
      @media only screen and (max-width: 800px) {
        form .input-row .star {
          right: -4px; } }
      @media only screen and (max-width: 644px) {
        form .input-row .star {
          right: -3px; } }
      form .input-row .star.star-error {
        color: #bb112e; }
      form .input-row .star.star-input-type-number {
        right: 334px; }
        @media only screen and (min-width: 1023px) {
          form .input-row .star.star-input-type-number {
            right: 374px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row .star.star-input-type-number {
            right: 447px; } }
        @media only screen and (max-width: 920px) {
          form .input-row .star.star-input-type-number {
            right: 284px; } }
        @media only screen and (max-width: 800px) {
          form .input-row .star.star-input-type-number {
            right: 234px; } }
        @media only screen and (max-width: 644px) {
          form .input-row .star.star-input-type-number {
            right: 180px; } }
    form .input-row.button-container {
      position: absolute;
      bottom: 6px;
      right: -200px; }
      @media only screen and (min-width: 1023px) {
        form .input-row.button-container {
          bottom: 7px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row.button-container {
          bottom: 8px; } }
      @media only screen and (max-width: 920px) {
        form .input-row.button-container {
          bottom: 5px; } }
      @media only screen and (max-width: 800px) {
        form .input-row.button-container {
          bottom: 4px; } }
      @media only screen and (max-width: 644px) {
        form .input-row.button-container {
          bottom: 3px; } }
      @media only screen and (min-width: 1023px) {
        form .input-row.button-container {
          right: -224px; } }
      @media only screen and (min-width: 1366px) and (min-height: 1024px) {
        form .input-row.button-container {
          right: -268px; } }
      @media only screen and (max-width: 920px) {
        form .input-row.button-container {
          right: -170px; } }
      @media only screen and (max-width: 800px) {
        form .input-row.button-container {
          right: -140px; } }
      @media only screen and (max-width: 644px) {
        form .input-row.button-container {
          right: -108px; } }
      form .input-row.button-container button {
        width: 154px;
        height: 43px;
        line-height: 48px; }
        @media only screen and (min-width: 1023px) {
          form .input-row.button-container button {
            width: 172px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row.button-container button {
            width: 206px; } }
        @media only screen and (max-width: 920px) {
          form .input-row.button-container button {
            width: 131px; } }
        @media only screen and (max-width: 800px) {
          form .input-row.button-container button {
            width: 108px; } }
        @media only screen and (max-width: 644px) {
          form .input-row.button-container button {
            width: 83px; } }
        @media only screen and (min-width: 1023px) {
          form .input-row.button-container button {
            height: 48px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row.button-container button {
            height: 58px; } }
        @media only screen and (max-width: 920px) {
          form .input-row.button-container button {
            height: 37px; } }
        @media only screen and (max-width: 800px) {
          form .input-row.button-container button {
            height: 30px; } }
        @media only screen and (max-width: 644px) {
          form .input-row.button-container button {
            height: 23px; } }
        @media only screen and (min-width: 1023px) {
          form .input-row.button-container button {
            line-height: 54px; } }
        @media only screen and (min-width: 1366px) and (min-height: 1024px) {
          form .input-row.button-container button {
            line-height: 64px; } }
        @media only screen and (max-width: 920px) {
          form .input-row.button-container button {
            line-height: 41px; } }
        @media only screen and (max-width: 800px) {
          form .input-row.button-container button {
            line-height: 34px; } }
        @media only screen and (max-width: 644px) {
          form .input-row.button-container button {
            line-height: 26px; } }

.error-warning {
  margin: 0;
  padding: 0;
  color: #bb112e;
  margin-top: -7px !important;
  font-size: 15px; }
  @media only screen and (min-width: 1023px) {
    .error-warning {
      margin-top: -8px !important; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .error-warning {
      margin-top: -9px !important; } }
  @media only screen and (max-width: 920px) {
    .error-warning {
      margin-top: -6px !important; } }
  @media only screen and (max-width: 800px) {
    .error-warning {
      margin-top: -5px !important; } }
  @media only screen and (max-width: 644px) {
    .error-warning {
      margin-top: -4px !important; } }
  @media only screen and (min-width: 1023px) {
    .error-warning {
      font-size: 17px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .error-warning {
      font-size: 20px; } }
  @media only screen and (max-width: 920px) {
    .error-warning {
      font-size: 13px; } }
  @media only screen and (max-width: 800px) {
    .error-warning {
      font-size: 11px; } }
  @media only screen and (max-width: 644px) {
    .error-warning {
      font-size: 8px; } }

.current-page-forgotpassword form,
.current-page-adminlogin form,
.current-page-adminstats form {
  width: 308px;
  margin-left: 117px; }
  @media only screen and (min-width: 1023px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      width: 345px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      width: 413px; } }
  @media only screen and (max-width: 920px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      width: 262px; } }
  @media only screen and (max-width: 800px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      width: 216px; } }
  @media only screen and (max-width: 644px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      width: 166px; } }
  @media only screen and (min-width: 1023px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      margin-left: 131px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      margin-left: 157px; } }
  @media only screen and (max-width: 920px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      margin-left: 99px; } }
  @media only screen and (max-width: 800px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      margin-left: 82px; } }
  @media only screen and (max-width: 644px) {
    .current-page-forgotpassword form,
    .current-page-adminlogin form,
    .current-page-adminstats form {
      margin-left: 63px; } }
  .current-page-forgotpassword form .input-row input,
  .current-page-forgotpassword form .input-row textarea,
  .current-page-adminlogin form .input-row input,
  .current-page-adminlogin form .input-row textarea,
  .current-page-adminstats form .input-row input,
  .current-page-adminstats form .input-row textarea {
    width: 300px; }
    @media only screen and (min-width: 1023px) {
      .current-page-forgotpassword form .input-row input,
      .current-page-forgotpassword form .input-row textarea,
      .current-page-adminlogin form .input-row input,
      .current-page-adminlogin form .input-row textarea,
      .current-page-adminstats form .input-row input,
      .current-page-adminstats form .input-row textarea {
        width: 336px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .current-page-forgotpassword form .input-row input,
      .current-page-forgotpassword form .input-row textarea,
      .current-page-adminlogin form .input-row input,
      .current-page-adminlogin form .input-row textarea,
      .current-page-adminstats form .input-row input,
      .current-page-adminstats form .input-row textarea {
        width: 402px; } }
    @media only screen and (max-width: 920px) {
      .current-page-forgotpassword form .input-row input,
      .current-page-forgotpassword form .input-row textarea,
      .current-page-adminlogin form .input-row input,
      .current-page-adminlogin form .input-row textarea,
      .current-page-adminstats form .input-row input,
      .current-page-adminstats form .input-row textarea {
        width: 255px; } }
    @media only screen and (max-width: 800px) {
      .current-page-forgotpassword form .input-row input,
      .current-page-forgotpassword form .input-row textarea,
      .current-page-adminlogin form .input-row input,
      .current-page-adminlogin form .input-row textarea,
      .current-page-adminstats form .input-row input,
      .current-page-adminstats form .input-row textarea {
        width: 210px; } }
    @media only screen and (max-width: 644px) {
      .current-page-forgotpassword form .input-row input,
      .current-page-forgotpassword form .input-row textarea,
      .current-page-adminlogin form .input-row input,
      .current-page-adminlogin form .input-row textarea,
      .current-page-adminstats form .input-row input,
      .current-page-adminstats form .input-row textarea {
        width: 162px; } }

.current-page-adminlogin h1,
.current-page-adminstats h1 {
  margin-bottom: 25px; }
  @media only screen and (min-width: 1023px) {
    .current-page-adminlogin h1,
    .current-page-adminstats h1 {
      margin-bottom: 28px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-adminlogin h1,
    .current-page-adminstats h1 {
      margin-bottom: 33px; } }
  @media only screen and (max-width: 920px) {
    .current-page-adminlogin h1,
    .current-page-adminstats h1 {
      margin-bottom: 21px; } }
  @media only screen and (max-width: 800px) {
    .current-page-adminlogin h1,
    .current-page-adminstats h1 {
      margin-bottom: 18px; } }
  @media only screen and (max-width: 644px) {
    .current-page-adminlogin h1,
    .current-page-adminstats h1 {
      margin-bottom: 14px; } }

.adminblockedmail-message {
  color: #118cfb;
  text-transform: uppercase; }

.current-page-adminblockedmail form {
  margin-top: 35px; }
  @media only screen and (min-width: 1023px) {
    .current-page-adminblockedmail form {
      margin-top: 39px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .current-page-adminblockedmail form {
      margin-top: 47px; } }
  @media only screen and (max-width: 920px) {
    .current-page-adminblockedmail form {
      margin-top: 30px; } }
  @media only screen and (max-width: 800px) {
    .current-page-adminblockedmail form {
      margin-top: 25px; } }
  @media only screen and (max-width: 644px) {
    .current-page-adminblockedmail form {
      margin-top: 19px; } }
  .current-page-adminblockedmail form .button-container {
    bottom: auto;
    top: 10px;
    right: -170px; }
    @media only screen and (min-width: 1023px) {
      .current-page-adminblockedmail form .button-container {
        top: 11px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .current-page-adminblockedmail form .button-container {
        top: 13px; } }
    @media only screen and (max-width: 920px) {
      .current-page-adminblockedmail form .button-container {
        top: 9px; } }
    @media only screen and (max-width: 800px) {
      .current-page-adminblockedmail form .button-container {
        top: 7px; } }
    @media only screen and (max-width: 644px) {
      .current-page-adminblockedmail form .button-container {
        top: 5px; } }
    @media only screen and (min-width: 1023px) {
      .current-page-adminblockedmail form .button-container {
        right: -190px; } }
    @media only screen and (min-width: 1366px) and (min-height: 1024px) {
      .current-page-adminblockedmail form .button-container {
        right: -228px; } }
    @media only screen and (max-width: 920px) {
      .current-page-adminblockedmail form .button-container {
        right: -145px; } }
    @media only screen and (max-width: 800px) {
      .current-page-adminblockedmail form .button-container {
        right: -119px; } }
    @media only screen and (max-width: 644px) {
      .current-page-adminblockedmail form .button-container {
        right: -92px; } }
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/
.my-title {
  font-size: 32px;
  margin-bottom: 26px;
  color: grey;
  text-align: center; }
  @media only screen and (min-width: 1023px) {
    .my-title {
      font-size: 36px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .my-title {
      font-size: 43px; } }
  @media only screen and (max-width: 920px) {
    .my-title {
      font-size: 27px; } }
  @media only screen and (max-width: 800px) {
    .my-title {
      font-size: 27px; } }
  @media only screen and (max-width: 644px) {
    .my-title {
      font-size: 21px; } }
  @media only screen and (min-width: 1023px) {
    .my-title {
      margin-bottom: 29px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .my-title {
      margin-bottom: 35px; } }
  @media only screen and (max-width: 920px) {
    .my-title {
      margin-bottom: 22px; } }
  @media only screen and (max-width: 800px) {
    .my-title {
      margin-bottom: 18px; } }
  @media only screen and (max-width: 644px) {
    .my-title {
      margin-bottom: 14px; } }

.my-subtitle {
  font-size: 22px;
  margin-bottom: 13px;
  margin-top: 13px; }
  @media only screen and (min-width: 1023px) {
    .my-subtitle {
      font-size: 25px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .my-subtitle {
      font-size: 29px; } }
  @media only screen and (max-width: 920px) {
    .my-subtitle {
      font-size: 19px; } }
  @media only screen and (max-width: 800px) {
    .my-subtitle {
      font-size: 18px; } }
  @media only screen and (max-width: 644px) {
    .my-subtitle {
      font-size: 14px; } }
  @media only screen and (min-width: 1023px) {
    .my-subtitle {
      margin-bottom: 15px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .my-subtitle {
      margin-bottom: 17px; } }
  @media only screen and (max-width: 920px) {
    .my-subtitle {
      margin-bottom: 11px; } }
  @media only screen and (max-width: 800px) {
    .my-subtitle {
      margin-bottom: 9px; } }
  @media only screen and (max-width: 644px) {
    .my-subtitle {
      margin-bottom: 7px; } }
  @media only screen and (min-width: 1023px) {
    .my-subtitle {
      margin-top: 15px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .my-subtitle {
      margin-top: 17px; } }
  @media only screen and (max-width: 920px) {
    .my-subtitle {
      margin-top: 11px; } }
  @media only screen and (max-width: 800px) {
    .my-subtitle {
      margin-top: 9px; } }
  @media only screen and (max-width: 644px) {
    .my-subtitle {
      margin-top: 7px; } }

.sm-text {
  font-size: 15px; }
  @media only screen and (min-width: 1023px) {
    .sm-text {
      font-size: 17px; } }
  @media only screen and (min-width: 1366px) and (min-height: 1024px) {
    .sm-text {
      font-size: 20px; } }
  @media only screen and (max-width: 920px) {
    .sm-text {
      font-size: 13px; } }
  @media only screen and (max-width: 800px) {
    .sm-text {
      font-size: 13px; } }
  @media only screen and (max-width: 644px) {
    .sm-text {
      font-size: 10px; } }
@font-face {
  font-family: 'Niramit Regular';
  src: url(../../asset/fonts/Niramit-Regular.eot);
  src: url(../../asset/fonts/Niramit-Regular.eot?#iefix) format("embedded-opentype"), url(../../asset/fonts/Niramit-Regular.woff2) format("woff2"), url(../../asset/fonts/Niramit-Regular.woff) format("woff"), url(../../asset/fonts/Niramit-Regular.ttf) format("truetype"), url(../../asset/fonts/Niramit-Regular.svg#Niramit-Regular) format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Arima Madurai Black';
  src: url(../../asset/fonts/ArimaMadurai-Black.eot);
  src: url(../../asset/fonts/ArimaMadurai-Black.eot?#iefix) format("embedded-opentype"), url(../../asset/fonts/ArimaMadurai-Black.woff2) format("woff2"), url(../../asset/fonts/ArimaMadurai-Black.woff) format("woff"), url(../../asset/fonts/ArimaMadurai-Black.ttf) format("truetype"), url(../../asset/fonts/ArimaMadurai-Black.svg#ArimaMadurai-Black) format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }
/**
* IMPORTANT: 
* If you must change these values, you must match the changes in foxy/utils/FoxyUtilities:
* private static WIDTH_TABLET:number = 1023;
* private static WIDTH_LARGE_TABLET:number = 1890;
* private static HEIGHT_TABLET:number = 700;
* private static HEIGHT_LARGE_TABLET:number = 1350;
*/
/*END IMPORTANT*/
/*
Computes different sizes depending on device using a ratio compared to base Android Nexus 7 size
Ex: @include bayamSetPropUsingRatio(padding-top,6px);
$phoneXtra: You might want to add an xtra ratio for phones. Ex: text will be too small if just resized proportionnally
Ex: @include bayamSetPropUsingRatio(font-size,14px,1.2);
$addImportant: Adds !important at property
$smallPhoneExtraRatio: You might want to add yet another ratio for small iPhone resolution: this will be combined to $phoneXtra, ex: 0.8 * 0.9
*/
/*
Writes the proper image backgroung image path integrating proper sd or hd folder
*/

/*# sourceMappingURL=mainstyles.css.map*/