/* Id: 7.15770929.1535120149
 * Generated: 2018-08-24 10:16:14
 */
    .banner-to-switch {    
    width: 200%;
    margin-bottom: 20px;
  	margin-left:-50%;
}

@media screen and (min-width: 768px) {
   .banner-to-switch .desktop-only {
      display:block;
   }
   .banner-to-switch .mobile-only {
      display:none;
   }
}
@media screen and (max-width: 767px) {
   .banner-to-switch .mobile-only {
      display:block;
   }
   .banner-to-switch .desktop-only {
      display:none;
   }
}


.banner-to-switch .initial-banner,
.banner-to-switch .second-banner{
	width: 100%;
  	margin-bottom: 20px;
    opacity:0;
  	visibility:hidden;
  	position:absolute;
  	left:0;
  	right:0;
  	transition: opacity .5s ease-in-out;
}
.banner-to-switch.not-switched-banner .initial-banner,
.banner-to-switch.switched-banner .second-banner{
  	opacity:1;
  	visibility:visible;
  	position:relative;
}
.banner-to-switch.switched-banner .initial-banner {
	opacity:0;
  	visibility:hidden;
  	position:absolute;
}      
.banner-to-switch .initial-banner {
	height: 400px;
}
.banner-to-switch .second-banner {
	height: 400px;
}
.banner-to-switch .initial-banner:after {
	content: "";
    display: block;
    height: 400px;
    position: relative;
    z-index: -1;
    background: #000 url('/polopoly_fs/7.15770929.1535120149!/iHeart-home-final.png') top center no-repeat;
}
.banner-to-switch .second-banner:after {
	content: "";
    display: block;
    height: 400px;
    position: relative;
    z-index: -1;
    background: #483f9a url('/polopoly_fs/7.15770929.1535120149!/1500x400-iHEART-header.jpg') top center no-repeat;
}

@media screen and (max-width: 767px) {
	.banner-to-switch .initial-banner,
	.banner-to-switch .second-banner{
  		height: 300px;
  	}
      .banner-to-switch .initial-banner:after,
	.banner-to-switch .second-banner:after{
  		height: 300px;
      	background-size:cover;
  	}
}
    
/******* INITIAL BANNER *******/    

.banner-to-switch .initial-banner .banner-content {
	text-align: center;
    position: absolute;
    bottom: 40px;
    margin: 0 auto;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.banner-to-switch .initial-banner .banner-content h1{
  	color: #fff;
    margin-bottom: 32px;
  	font-size:57px;
  	line-height:57px;
}
.banner-to-switch .initial-banner .banner-content a.btn { 
  	font-size: 18px;
    padding: 10px 45px;
    background-color: #5BA7F7;
    border-color: #5BA7F7; 
}
.banner-to-switch .initial-banner .banner-content a.btn:hover { 
	background-color:#1190fa;
  	border-color: #1190fa; 
}
@media screen and (max-width: 767px) {
	.banner-to-switch .initial-banner .banner-content {
  		bottom: 20px;
  	}
    .banner-to-switch .initial-banner .banner-content h1{
        margin-bottom: 22px;
        font-size:34px;
        line-height:34px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .banner-to-switch .initial-banner .banner-content h1 {
    	font-size: 47px;
    	line-height: 47px;
    }
}


/******* SWITCHED BANNER *******/     
      
.banner-to-switch .second-banner .banner-content {
	text-align: center;
    position: absolute;
    bottom: 40px;
    margin: 0 auto;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
.banner-to-switch .second-banner .banner-content h1{
  	color: #fff;
    margin-bottom: 32px;
  	font-size:57px;
  	line-height:57px;
}
.banner-to-switch .second-banner .banner-content h1:lang(fr){
  	font-size:53px;
  	line-height:53px;
}
.banner-to-switch .second-banner .banner-content a.btn { 
  	font-size: 18px;
    padding: 10px 45px;
    background-color: #5BA7F7;
    border-color: #5BA7F7;
    margin:0 10px;
}
@media screen and (max-width: 639px) {
   .banner-to-switch .second-banner .banner-content {
      bottom:15px;
   }
   .banner-to-switch .second-banner .banner-content a.btn { 
       margin:0 10px;
       padding:10px;
       width: 80%;
   }
   .banner-to-switch .second-banner .banner-content  div a.btn:first-of-type {
       margin-bottom: 15px;
   }
   .banner-to-switch .second-banner .banner-content h1,
   .banner-to-switch .second-banner .banner-content h1:lang(fr){
      margin-bottom: 12px;
      font-size: 27px;
      line-height: 31px;
   }
   .banner-to-switch .second-banner .banner-content h1:lang(en){
      padding: 0 10%;
   }
}
.banner-to-switch .second-banner .banner-content a.btn:hover { 
	background-color:#1190fa;
  	border-color: #1190fa; 
}
@media screen and (min-width: 640px) and (max-width: 767px) {
	.banner-to-switch .second-banner .banner-content {
  		bottom: 20px;
  	}
   .banner-to-switch .second-banner .banner-content h1 {
      margin-bottom: 22px;
      font-size:34px;
      line-height:34px;
	}
   .banner-to-switch .second-banner .banner-content h1:lang(fr) {
      margin-bottom: 15px;
      font-size:40px;
      line-height:43px;
      padding: 0 5%;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .banner-to-switch .second-banner .banner-content h1 {
    	font-size: 47px;
    	line-height: 47px;
    }
    .banner-to-switch .second-banner .banner-content h1:lang(fr) {
    	font-size: 41px;
    	line-height: 45px;
      margin-bottom: 15px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1499px) {
    .banner-to-switch .second-banner .banner-content h1:lang(fr) {
    	font-size: 42px;
    	line-height: 45px;
    }
}