@font-face {
  font-family: 'BentonSans-Condensed';
  src: url('../fonts/BentonSans-CondensedLight.eot');
  src: url('../fonts/BentonSans-CondensedLight.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BentonSans-CondensedLight.woff2') format('woff2'),
       url('../fonts/BentonSans-CondensedLight.woff') format('woff'),
       url('../fonts/BentonSans-CondensedLight.ttf') format('truetype'),
       url('../fonts/BentonSans-CondensedLight.svg#BentonSans-CondensedLight') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'BentonSans-Condensed';
  src: url('../fonts/BentonSans-CondensedBold.eot');
  src: url('../fonts/BentonSans-CondensedBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BentonSans-CondensedBold.woff2') format('woff2'),
       url('../fonts/BentonSans-CondensedBold.woff') format('woff'),
       url('../fonts/BentonSans-CondensedBold.ttf') format('truetype'),
       url('../fonts/BentonSans-CondensedBold.svg#BentonSans-CondensedBold') format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'MyriadPro-Condensed';
  src: url('../fonts/MyriadPro-LightCond.eot');
  src: url('../fonts/MyriadPro-LightCond.eot?#iefix') format('embedded-opentype'),
       url('../fonts/MyriadPro-LightCond.woff2') format('woff2'),
       url('../fonts/MyriadPro-LightCond.woff') format('woff'),
       url('../fonts/MyriadPro-LightCond.ttf') format('truetype'),
       url('../fonts/MyriadPro-LightCond.svg#MyriadPro-LightCond') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'MyriadPro-Condensed';
  src: url('../fonts/MyriadPro-BoldCond.eot');
  src: url('../fonts/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),
       url('../fonts/MyriadPro-BoldCond.woff2') format('woff2'),
       url('../fonts/MyriadPro-BoldCond.woff') format('woff'),
       url('../fonts/MyriadPro-BoldCond.ttf') format('truetype'),
       url('../fonts/MyriadPro-BoldCond.svg#MyriadPro-BoldCond') format('svg');
  font-weight: 700;
  font-style: normal;
}

@-webkit-keyframes bounce {
    0%,20%,53%,80%,100% {
        -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
        animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
        bottom: 0;
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        bottom: 30px;
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        bottom: 15px;
    }

    90% {
        bottom: 4px;
    }
}

@keyframes bounce {
    0%,20%,53%,80%,100% {
        -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
        animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
        bottom: 0;
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        bottom: 30px;
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        animation-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        bottom: 15px;
    }

    90% {
        bottom: 4px;
    }
}

@-webkit-keyframes arrow {
  0% {
    top: 0;
  }

  80% {
    top: 1.25rem;
  }

  100% {
    top: 0;
  }
}

@keyframes arrow {
  0% {
    top: 0;
  }

  80% {
    top: 1.25rem;
  }

  100% {
    top: 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

body {
  font-family: 'BentonSans-Condensed', sans-serif;
  color: #3e4d4d;
}

a, a:hover, a:focus {
  color: #d81010;
  text-decoration: none;
}

main {
  max-width: 100rem;
  margin: 0 auto;
}

.logo {
  padding-top: 1.25rem;
  padding-bottom: 0.9375rem;
}

.logo img {
  max-width: 350px;
}

/*language*/
ul.language {position:absolute;top:1.25rem;right:0;/*padding-top:1.25rem;padding-bottom:0.9375rem;*/}
ul.language .sel {background:#688181;}
ul.language .sel a,
ul.language li:hover a {transition:all 0.5s ease 0s;color:#fff;}
ul.language li {margin:0;padding:0;text-align:center;}
ul.language li a {width:3.8rem;font-family:"BentonSans-Condensed",sans-serif;font-size:1rem;font-weight:600;color:#688181;line-height:3.8rem;}
ul.language li:hover {transition:all 0.5s ease 0s;background:#688181;}

.hero {
  position: relative;
  margin: 0;
}


@media only screen and (min-width: 40.63rem) and (max-width: 60rem) {
	ul.language {top:1.8rem;/*padding-top:1.25rem;*/}
	ul.language li a {width:2.5rem;font-weight:normal;line-height:2.5rem;}
}

@media only screen and (min-width: 62.5rem) {
  .hero {
    min-height: 31.25rem;
  }

}

.hero__text {
  font-family: 'BentonSans-Condensed', sans-serif;
  font-size: 1.5rem;
  line-height: 1.45;
  padding: 2.5rem 0.625rem 3.75rem 0.625rem;
  text-align: center;
}

.hero__cta {
  display: block;
  position: relative;
  top: 0.9375rem;
  max-width: 12.5rem;
  color: #d81010;
  font-family: 'MyriadPro-Condensed', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  margin: 0 auto;
}

.hero__cta:after {
  content: '';
  position: relative;
  display: block;
  width: 6.25rem;
  height: 2.75rem;
  margin: 0 auto 0.25rem auto;
  background: url('../images/arrow.svg') no-repeat center transparent;
  -webkit-animation: arrow 2s infinite;
          animation: arrow 2s infinite;
}

@media only screen and (min-width: 62.5rem) {
  .hero__text {
    position: absolute;
    max-width: 38%;
    top: 5.875rem;
    right: 1.25rem;
    font-size: 1.25rem;
    padding: 0;
    text-align: left;
  }

  .hero__cta {
    position: absolute;
    top: 8.25rem;
    right: 0.625rem;
  }
} 

@media only screen and (min-width: 81.25rem) {
  .hero__cta {
      top: 10.75rem;
      right: 3.0625rem;
  }

  .hero__text {
    top: 9.125rem;
    font-size: 1.625rem;
  }
} 


@media only screen and (min-width: 100rem) {
  .hero__cta {
      top: 11.375rem;
  }

  .hero__text {
    max-width: 35%;
    right: 4.25rem;
    font-size: 2.125rem;
  }
} 

.actions {
  max-width: 120rem;
}

.actions [class*=block-grid-]>li {
  padding: 0 1.625rem 3.130rem;
}

.box {
  border: 1px solid #688181;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.box:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}

.box__content {
  padding-top: 3.5rem;
  padding-bottom: 3.125rem;
}

.box__title {
  position: relative;
  background-color: #688181;
  color: #fff;
  padding: 1.125rem 0 1.125rem 2rem;
  margin: 0;
  text-transform: uppercase;
  font-family: 'BentonSans-Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.1875rem;
}

.box__title:before {
  content: '';
  position: absolute;
  height: 2.125rem;
  right: 0;
  left: 20rem;
  bottom: 0;
  top: auto;
  background-color: #fff;
  -webkit-transform: skewX(-40deg);
      -ms-transform: skewX(-40deg);
          transform: skewX(-40deg);
  -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
}

.box__img {
  max-width: 12.5rem;
  height: auto;
  margin: 1.125rem 0;
  padding: 0 .9375rem;
}

.box:hover .box__img {
  position: relative;
  -webkit-animation: bounce 1s;
          animation: bounce 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;     
}

.box__text {
  max-width: 86%;
  color: #272727;
  margin: 0  auto 3.25rem auto;
  text-align: center;
}

@media only screen and (max-width: 40.063em) { 
  .logo img {max-width:250px;}

	ul.language {position:relative;padding-bottom:0.3rem;/*padding-top:1.25rem;*/}
	ul.language li {width:25%;background:#f4f6f6;}
	ul.language li a {width:100%;line-height:2rem;}
}

@media only screen and (min-width: 40.063em) { 
  .box__text {text-align:left;}
}

.box__text p {
  font-family: 'MyriadPro-Condensed', sans-serif;
  font-weight: 300;
  font-size: 2.375rem;
  line-height: 1.2;
  margin-bottom: 2.625rem;
}

.box__text small {
  display: block;
}

.box__button {
  display: inline-block;
  position: relative;
  padding: 0.375rem 1.875rem;
  border: 1px solid #d81010;
  color: #d81010;
  text-transform: uppercase;
  font-size: 26px;
  font-family: 'BentonSans-Condensed', sans-serif;
  overflow: hidden;
  background: none;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.box__button::after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  width: 110%;
  height: 0;
  top: 50%;
  left: 50%;
  background: #d81010;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.box__button:hover {
  color: #fff;
}

.box__button:hover:after {
  height: 400%;
  opacity: 1;
}

.box__store {
  display: inline-block;
  margin: 0 0.5rem 1.875rem 0.5rem;
}

.box__store img {
  max-height: 50px;
}

.advice {
  color: #d81010;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.625rem;
}

footer {
  padding: 3.125rem 0;
  background-color: #282727;
  color: #fff;
  font-size: 1.125rem;
  text-align: center;
}

footer ul.inline-list {
  display: inline-block;
  margin: 0;
}

footer ul.inline-list a,
footer ul.inline-list a:hover,
footer ul.inline-list a:focus {
  color: #fff;
}