/*
	CSS used on Choose From Bonus - Selection page
*/

/* Top Banner content asset - start*/
.bonus-top-banner-holder {
   width: 100%;
   margin-bottom: 80px;
}

.bonus-top-banner-wrapper {
   border: 2px solid #e5e5e5;
   font-family: "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial, sans-serif;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}

.bonus-top-banner-wrapper .text-wrap {
   width: 60%;
   padding: 0 25px;
}

.bonus-top-banner-wrapper .text1 {
   /*per PSD*/
   font-size: 84.81px;
   color: #be0f34;010000
}

.bonus-top-banner-wrapper .text2 {
   font-size: 38px;
   color: #010000;
}

.bonus-top-banner-wrapper .image-wrap {
   padding: 0 25px;
}

.bonus-top-banner-wrapper .image-wrap img {
   width: 100%;
}

@media only screen and (max-width: 761px) {
   .bonus-top-banner-holder {
      margin-bottom: 65px;
   }

   .bonus-top-banner-wrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 15px 25px;
   }

   .bonus-top-banner-wrapper .text-wrap {
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2;
      -ms-flex-order: 2;
      -webkit-order: 2;
      order: 2;
      width: 100%
   }

   .bonus-top-banner-wrapper .image-wrap {
      -webkit-box-ordinal-group: 1;  
      -moz-box-ordinal-group: 1;     
      -ms-flex-order: 1;     
      -webkit-order: 1;  
      order: 1;
      width: 100%
   }

   .bonus-top-banner-wrapper .text1 {
      font-size: 55px;
      margin: 25px 0 0px;
      text-align: center;
   }

   .bonus-top-banner-wrapper .text2 {
      font-size: 22px;
      margin: 18px 0 0;
      text-align: center;
   }
}
/* Top Banner content asset - end*/

/* Bonus steps content assets - start*/
.step-one-wrapper,
.step-two-wrapper {
   width: 100%;
   font-family: "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial, sans-serif;
   margin-bottom: 75px;
}

.step-holder {
   border: 2px solid #e5e5e5;
   padding: 22px 35px;
}

@media only screen and (min-width: 762px) {
	.step-holder {
	    display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	}
}

.step-holder .step {
   color: #dd8a99;
   font-size: 72px;
   margin-right: 34px;
}

@media only screen and (max-width: 761px) {
	.step-holder .step {
		margin-right: 0;
	}
}

@media only screen and (min-width: 762px ) and (max-width: 1023px) {
	.step-holder .step {
	   font-size: 48px;
	}
}

@media only screen and (min-width: 762px) {
	.step-holder .step {
	   display: block;
	   -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
	   flex-shrink: 0;
	   -ms-flex-item-align: center;
	   align-self: center;
	   -webkit-align-self: center;
	}
}

.step-holder .step-message {
   font-size: 30px;
   color: #020000;
}
@media only screen and (min-width: 762px ) and (max-width: 1023px) {
	.step-holder .step-message {
		font-size: 26px;
	}
}

@media only screen and (min-width: 762px) {
	.step-holder .step-message {
		display: block;
		margin-top: 12px;
		-ms-flex-item-align: center;
		align-self: center;
		-webkit-align-self: center;
	}
}

@media only screen and (max-width: 761px) {
   .step-one-wrapper {
      margin-bottom: 25px;
   }

   .step-holder .step,
   .step-holder .step-message {
      display: block;
      text-align: center;
   }

   .step-holder .step {
      font-size: 45px;
   }
   .step-holder .step-message {
      margin-top: 29px;
   } 
}

.step-two-wrapper .step {
   color: #c62844;
}
/* Bonus steps content assets - end*/