/* URL ASSOLUTO: 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

https://stg2-fr.raja-group.com/INTERSHOP/static/BOS/RAJA-Site/MONDOFFICE/RAJA-MONDOFFICE/it_IT/css/mo_hr.css 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/


/* NON TOCCARE - VALIDO PER TUTTE LE PAGINE STATICHE */

.static-header__title {
  margin: 2rem 0 2rem 0;
}

.static-header {
  min-height: auto!important;
}

ol.page-breadcrumb {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Raleway;
  margin-bottom: 3rem;
}


/* NON TOCCARE - VALIDO PER TUTTE LE PAGINE STATICHE */


/* APPLICATO PER LE "CARDS" */

.no-bordo {
  border: 0px!important;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
}


/* PARLA DA SOLO */

.overflow_visible {
  overflow: visible!important;
}


/* GRAY BORDER FOR BOXES & IMAGES */

.grey_border {
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  padding: 20px;
}


/************************ BUTTON MONDOFFICE ************************/

/* BUTTON LARGHEZZA 20rem x BANNER */

.button__red__MO__banner a {
  color: #cc0000!important;
}

.button__red__MO__banner a:hover {
  color: #ffffff!important;
}

.button__red__MO__banner {
  cursor: pointer;
  outline: 0;
  /*  position: relative;*/
  display: flex;
  background-color: #ffffff;
  color: #cc0000!important;
  /*text-transform: uppercase;*/
  padding: 0 2rem;
  border-radius: 3rem;
  height: 4.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  width: 20rem;
  align-items: center;
  text-align: center;
  justify-content: center;
  /*  letter-spacing: .88px;*/
  border: 2px solid #CC0000;
  color: #cc0000;
  transition: all .3s ease-out;
  margin: auto;
}

.button__red__MO__banner:hover {
  color: #ffffff!important;
  background-color: #cc0000!important;
}

/* BUTTON LARGHEZZA 20rem x BANNER */


/* BUTTON LARGHEZZA FISSA */

.button__red__MO a {
  color: #014A94!important;
}

.button__red__MO a:hover {
  color: #ffffff!important;
}

.button__red__MO {
  cursor: pointer;
  outline: 0;
  /*  position: relative;*/
  display: flex;
  background-color: #ffffff;
  color: #014A94!important;
  /*text-transform: uppercase;*/
  padding: 0 1rem;
  border-radius: 3rem;
  height: 4.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  width: 30rem;
  align-items: center;
  text-align: center;
  justify-content: center;
  /*  letter-spacing: .88px;*/
  border: 2px solid #014A94;
  color: #014A94;
  transition: all .3s ease-out;
  margin: auto;
}

.button__red__MO:hover {
  color: #ffffff!important;
  background-color: #014A94!important;
}

/* BUTTON LARGHEZZA FISSA */

/* BUTTON LARGHEZZA MAX 90% */

.button__red__MO__90 a {
  color: #cc0000!important;
}

.button__red__MO_90 a:hover {
  color: #ffffff!important;
}

.button__red__MO__90 {
  cursor: pointer;
  outline: 0;
  /*  position: relative;*/
  display: flex;
  background-color: #ffffff;
  color: #cc0000!important;
  /*text-transform: uppercase;*/
  padding: 0 1rem;
  border-radius: 3rem;
  height: 4.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  max-width:  90%;
  align-items: center;
  text-align: center;
  justify-content: center;
  /*  letter-spacing: .88px;*/
  border: 2px solid #CC0000;
  color: #cc0000;
  transition: all .3s ease-out;
  margin: auto;
}

.button__red__MO__90:hover {
  color: #ffffff!important;
  background-color: #cc0000!important;
}

/* BUTTON LARGHEZZA MAX 90% */

/* BUTTON LARGHEZZA MAX 70% */

.button__red__MO__70 a {
  color: #cc0000!important;
}

.button__red__MO_70 a:hover {
  color: #ffffff!important;
}

.button__red__MO__70 {
  cursor: pointer;
  outline: 0;
  /*  position: relative;*/
  display: flex;
  background-color: #ffffff;
  color: #cc0000!important;
  /*text-transform: uppercase;*/
  padding: 0 1rem;
  border-radius: 3rem;
  height: 4.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  max-width:  70%;
  align-items: center;
  text-align: center;
  justify-content: center;
  /*  letter-spacing: .88px;*/
  border: 2px solid #CC0000;
  color: #cc0000;
  transition: all .3s ease-out;
  margin: auto;
}

.button__red__MO__70:hover {
  color: #ffffff!important;
  background-color: #cc0000!important;
}

/* BUTTON LARGHEZZA MAX 70% */

/* BUTTON LARGHEZZA AUTO */

.button__red__MO__auto a {
  color: #cc0000!important;
}

.button__red__MO__auto a:hover {
  color: #ffffff!important;
}

.button__red__MO__auto {
  cursor: pointer;
  outline: 0;
  /*  position: relative;*/
  display: flex;
  background-color: #ffffff;
  color: #cc0000!important;
  /*text-transform: uppercase;*/
  padding: 0 2rem;
  border-radius: 3rem;
  height: 4.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  width: auto;
  align-items: center;
  text-align: center;
  justify-content: center;
  /*  letter-spacing: .88px;*/
  border: 2px solid #CC0000;
  color: #cc0000;
  transition: all .3s ease-out;
  margin: auto;
}

.button__red__MO__auto:hover {
  color: #ffffff!important;
  background-color: #cc0000!important;
}

/* BUTTON LARGHEZZA AUTO */

/* CTA Text */

/* Shake for CTA Text */

.shake-horizontal {
	-webkit-animation: shake-horizontal 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}


/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

/* Shake for CTA Text */

.CTA_text a {
  color:#cc0000!important;
  font-size: 1.4rem;
/*  font-weight: 700;*/
}

/*
.CTA_texta a:visited {
  color:#cc0000!important;
  font-size: 1.4rem;
}
*/

.CTA_texta :hover {
  color:#656F84!important;
  font-size: 1.4rem;
/*  font-weight: 700;*/
}

/*
.CTA_texta a:active {
  color:#656F84!important;
  font-size: 1.4rem;
}
*/

/* CTA Text */

/************************ BUTTON MONDOFFICE ********************/


/************************ MONDOFFICE FLEX COLUMNS ************/


/* COLUMNS MO BACKGROUND FOR TEST & PREVIEW */

.aaa {
  background-color:#aaa;
  }
.bbb {
  background-color:#bbb;
  }
.ccc {
  background-color:#ccc;
  }
.ddd {
  background-color:#ddd;
  }
.eee {
  background-color:#eee;
  }
.fff {
  background-color:#fff;
  }

/* COLUMNS MO BACKGROUND FOR TEST & PREVIEW */


/* SOMETIMES, FOR MOBILE, WE - Chiara e Costantino - NEED BOTTOM SPACE BETWEEN COLUMNS */

.flex_column_spacer {
  height: 0rem;
}

@media screen and (max-width: 992px) {
  .flex_column_spacer {
    height: 6rem;
  }
}


/* SOMETIMES, FOR MOBILE, WE - Chiara e Costantino - NEED BOTTOM SPACE BETWEEN COLUMNS */

* {
  box-sizing: border-box;
}


/* Container for flexboxes */

.row {
  display: flex;
  flex-wrap: wrap;
}


/* Create FIVE columns 30% + 17,5% */

.columnMO30 {
  flex: 28%;
  padding: 20px;
	margin: 1rem;
}

.columnMO17 {
  flex: 15.5%;
  padding: 20px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO30 {
    flex: 50%;
  }
}

@media screen and (max-width: 992px) {
  .columnMO17 {
    flex: 50%;
  }
}


/* Create FIVE columns 30% + 17,5% */


/* Create TWO columns 60% + 40% */

.columnMO60 {
  flex: 58%;
  padding: 20px;
	margin: 1rem;
}

.columnMO40 {
  flex: 38%;
  padding: 20px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO60 {
    flex: 50%;
  }
}

@media screen and (max-width: 992px) {
  .columnMO40 {
    flex: 50%;
  }
}


/* Create TWO columns 60% + 40% */


/* Create TWO columns 2/3 + 1/3 */

.columnMO2_3 {
  flex: 64.66%;
	margin: 1%;
}

.columnMO1_3 {
  flex: 31.33%;
  padding: 20px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO2_3 {
    flex: 50%;
  }
}

@media screen and (max-width: 992px) {
  .columnMO1_3 {
    flex: 50%;
  }
}


/* Create TWO columns 2/3 + 1/3 */


/* Create SIX equal columns */

.columnMO6 {
  flex: 14.66%;
  padding: 10px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO6 {
    flex: 50%;
  }
}


/* Create SIX equal columns */


/* Create FOUR equal columns */

.columnMO4 {
  flex: 23%;
  padding: 20px;
  margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO4 {
    flex: 50%;
  }
}


/* Create FOUR equal columns */

/* Create THREE columns 50%+25%+25% */

.columnMO3_50 {
  flex: 48%;
  padding: 20px;
	margin: 1rem;
}
.columnMO3_25 {
  flex: 23%;
  padding: 20px;
	margin: 1rem;
}

/* On screens that are 992px wide or less */

@media screen and (max-width: 992px) {
  .columnMO3_50 {
    flex: 50%;
    overflow: visible;
  }
}
@media screen and (max-width: 992px) {
  .columnMO3_25 {
    flex: 50%;
    overflow: visible;
  }
}

/* Create THREE columns 50%+25%+25% */

/* Create THREE equal columns */

.columnMO3 {
  flex: 31.33%;
  padding: 20px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO3 {
    flex: 50%;
    overflow: visible;
  }
}


/* Create THREE equal columns */


/* Create TWO equal columns */

.columnMO2 {
  flex: 48%;
  padding: 20px;
	margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO2 {
    flex: 50%;
    /*color: #ffffff;*/
  }
}


/* Create TWO equal columns */


/* TWO columns INVERTED on MOBILE */

.parent_MO {
  display: flex;
  flex-direction: column-reverse;
}

.item_MO {
  width: auto;
  min-height: 200px;
}

@media screen and (min-width: 600px) {
  .parent_MO {
    flex-direction: row;
  }
  .item_MO {
    width: 50%;
    min-height: 200px;
  }
}


/* TWO columns INVERTED on MOBILE */


/* Create ONE column */

.columnMO1 {
  flex: 100%;
  padding: 20px;
  margin: 1rem;
}


/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {
  .columnMO1 {
    flex: 100%;
  }
}


/* Create ONE column */


/* On screens that are 600px wide or less, make the columnMOs stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}


/************************ MONDOFFICE FLEX COLUMNS ************************/


/* CSS - HOMEPAGE */


/* max widht homepage */

.home {
  max-width: 2000px;
  background: #fff;
}


/* colore h3 */

.red {
  color: #cc0000;
}



/*******************BANNER BASKET ***********************************/

.banner_basket {
border:1px solid #e0e4ea;
box-shadow:0 2px 14px 0 rgba(0,0,0,.1);

    }