/* GENERICS */
body { -ms-overflow-style: scrollbar; background-color: #FFF; color: #5a5a5a; font-size: 18px; }
#wrapper > .container-fluid, #footer > .container-fluid { max-width: 980px; padding: 0; }
#template_content { background-color: transparent; border-left: 1px solid #D2D2D2; border-right: 1px solid #D2D2D2; overflow: hidden; min-height: 400px; text-align: center; position: relative; }
*:focus { outline: none;}
.nopadding { padding: 0 !important; margin: 0 !important; }
.noborder { border: 0 !important;}
.mobile-checker { height: 0px; }
.fixed { position: fixed; position:-ms-device-fixed; z-index: 999; top: 0; }
img { max-width: 100%; }
a:hover, a:focus { text-decoration: none; }

/* DESKTOP/MOBILE SWITCH */
.desktop-view { display: block; }
.mobile-view { display: none; }
.mobile-checker { height: 0px; display: none; }

/* VERTICAL ALIGN CONTENT */
.outerContainer { display: table; height: inherit; overflow: hidden; width: inherit; }
.innerContainer { display: table-cell; margin: 0 auto; text-align: center; vertical-align: middle; width: 100%; }
.element { }

/* FONT AND COLORS */
.subitofont { font-family: "subitofont"; -moz-font-feature-settings: "calt" 1, "kern" 1; -ms-font-feature-settings: "calt" 1, "kern" 1; -webkit-font-feature-settings: "calt" 1, "kern" 1; font-feature-settings: "calt" 1, "kern" 1;}
.red { color: #F9423A; }
.red label { color: #3cb8ba; }
.blue { color: #3cb8ba; }
h2 { font-weight: 600; font-size: 30px; line-height: 32px; }
h2 + p { margin-top: 5px; }

/* HTML ELEMENTS */
.button-container { margin: 50px auto; display: inline-block; }
.button-container .button { height: 60px; width: 290px; font-size: 24px; line-height: 24px; background-color: #F9423A; border-color: #F9423A; }
.button-container .button.btn_large { width: 340px; }
.button-container .button:hover { background-color: #3CB8BA; border-color: #3CB8BA; }
.button-container .button a { color: #fff; }
.button-container > a:hover, .button > a:hover { text-decoration: none; }
.button-white { background-color: #FFF; border-color: #BEBEBE; color: #0097a6; -moz-box-shadow: 2px 4px 8px 1px #ccc; -webkit-box-shadow: 2px 4px 8px 1px #ccc; box-shadow: 2px 4px 8px 1px #ccc; border: none; }
.button-white:hover { background-color: #FFF; text-decoration: underline;}
.button-white > a { color: #0097A6; }
/*.button-container .button iframe, .button-container .button span { width: 100% !important; height: 100% !important; opacity: 0 !important; }*/

/* IFRAME CONTAINER */
.iframe-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.iframe-container > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.iframe-container .cover-img { cursor: pointer; background-size: cover; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; }
.iframe-container .cover-img > div { color: #fff; font-size: 16px; line-height: 20px; position: absolute; left: 0; right: 0; margin: -92.5px auto 0; top: 50%; text-transform: uppercase; height: 185px; }
.iframe-container .cover-img > div .icon-play { display: block; width: 100px; height: 100px; background: url('../images/play.png') no-repeat center; background-size: contain; margin: 0 auto; }
.iframe-container .cover-img > div label { display: block; }
.tip { border: 5px solid #ffffff; background-color: #3cb8ba; display: inline-block; }
.tip.mobile-view { border: 0; display: none; margin-top: 30px; }
.tip.desktop-view { display: inline-block; margin-bottom: 10px; }
.tip h3 { font-size: 18px; line-height: 24px; text-transform: uppercase; font-weight: 800; color: #fff; padding: 8px 50px; }
.tip.mobile-view h3 { line-height: 18px; font-size: 16px; padding: 8px 0; }

/* HEADER e FOOTER REVIEW */
.site_header { height: 90px; margin-bottom: -1px; border-right: 1px solid #D2D2D2; border-left: 1px solid #D2D2D2; }
.site_header .red_bar_container .logo a { display: block; width: auto; }
.site_header .red_bar_container .logo a > div { margin: 0 auto; }
.site_header .top_header_link_container { background-color: transparent; display: none; }
#header .common-logo-subito-1 { background-image: url('../images/Header_Offline-test.png'); background-position: 0; background-size: cover; color: #fff; text-transform: uppercase; font-size: 34px; font-weight: 800; width: auto; text-align: center; letter-spacing: 7px; height: 80px; }
footer.site_footer .bottom_link_container { background-color: #f7f5f1; }
.container-fluid { position: relative; }

/* CONTENT */
.section-head { margin: 40px 90px 0; }
.section-head .iframe-container { margin-top: 40px; }

.rule { position: absolute; left: 0; right: 0; bottom: 95%; margin: 0 auto;  text-align: center; z-index: 2; max-width: 500px; }
.rule.mobile-view { position: relative; top: 0; right: auto; }
.rule .rule-title { border: 5px solid #ffffff; background-color: #3cb8ba; display: inline-block; position: relative; left: 0; top: 25px; }
.rule .rule-title h3 { font-size: 18px; line-height: 24px; text-transform: uppercase; font-weight: 800; color: #fff; padding: 8px 25px; }
.rule .rule-desc { border: 5px solid #ffffff; background-color: #f9423a; padding: 40px 25px 25px; margin: 0 auto; }
.rule .rule-desc p { font-size: 16px; font-weight: 300; line-height: 18px; color: #fff; }

.section-steps .video-box { margin: 40px 150px; position: relative; }
.section-steps .video-box + p { line-height: 14px; }
.section-steps > p.mobile-view { display: none; }
.section-steps > p.desktop-view { display: block; }
.section-steps .video-box .iframe-container { z-index: 1; margin-top: 140px; }
.section-steps .video-box .iframe-container .cover-img > div { height: 100px; margin-top: -50px; }
.section-steps .thumb-list { margin: 15px 20px 0; }
.section-steps .thumb-list .thumb-item { margin: 0 7.5px; cursor: pointer; position: relative; left: 0; top: 0; height: 0; padding-bottom: 56.25%; background-size: cover; }
.section-steps .thumb-list .thumb-item span { font-size: 36px; line-height: 36px; color: #fff; font-weight: 800; position: absolute; left: 0; top: 50%; margin-top: -15px; width: 100%; text-align: center; }
.section-steps .thumb-list .thumb-item.step1 { background-image: url('../images/slider/1_002.png'); }
.section-steps .thumb-list .thumb-item.step1:hover, .section-steps .thumb-list .slick-current .thumb-item.step1 { background-image: url('../images/slider/1_003.png'); } 
.section-steps .thumb-list .thumb-item.step2 { background-image: url('../images/slider/2_002.png'); }
.section-steps .thumb-list .thumb-item.step2:hover, .section-steps .thumb-list .slick-current .thumb-item.step2 { background-image: url('../images/slider/2_003.png'); } 
.section-steps .thumb-list .thumb-item.step3 { background-image: url('../images/slider/3_002.png'); }
.section-steps .thumb-list .thumb-item.step3:hover, .section-steps .thumb-list .slick-current .thumb-item.step3 { background-image: url('../images/slider/3_003.png'); } 
.section-steps .thumb-list .thumb-item.step4 { background-image: url('../images/slider/4_002.png'); }
.section-steps .thumb-list .thumb-item.step4:hover, .section-steps .thumb-list .slick-current .thumb-item.step4 { background-image: url('../images/slider/4_003.png'); } 
.section-steps .thumb-list .thumb-item.step5 { background-image: url('../images/slider/5_002.png'); }
.section-steps .thumb-list .thumb-item.step5:hover, .section-steps .thumb-list .slick-current .thumb-item.step5 { background-image: url('../images/slider/5_003.png'); } 

.slick-dots { margin: 10px 0 0; display: block; width: 100%; padding: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 10px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 10px; height: 10px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; border-radius: 50%; background-color: gray;}
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }

/* SLIDER IMG PRELOAD */
.preload-slider-img { position: absolute; left: 0; bottom: 0; height: 0; opacity: 0; }
.preload-slider-img > div {}
.preload-slider-img .step1 div.red { background-image: url('../images/slider/1_001.png');}
.preload-slider-img .step1 div.gray { background-image: url('../images/slider/1_003.png');}
.preload-slider-img .step2 div.red { background-image: url('../images/slider/2_001.png');}
.preload-slider-img .step2 div.gray { background-image: url('../images/slider/2_003.png');}
.preload-slider-img .step3 div.red { background-image: url('../images/slider/3_001.png');}
.preload-slider-img .step3 div.gray { background-image: url('../images/slider/3_003.png');}
.preload-slider-img .step4 div.red { background-image: url('../images/slider/4_001.png');}
.preload-slider-img .step4 div.gray { background-image: url('../images/slider/4_003.png');}
.preload-slider-img .step5 div.red { background-image: url('../images/slider/5_001.png');}
.preload-slider-img .step5 div.gray { background-image: url('../images/slider/5_003.png');}

.section-about { margin: 10px 40px 60px; }
.section-about ul { margin-top: 40px;}
.section-about ul li { text-align: left; margin-bottom: 40px; }
.section-about ul li.right-text { text-align: right; }
.section-about ul li div span { display: inline-block; width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; background-position: left bottom; }
.section-about ul li div span.mobile-view { display: none; }
.section-about ul li div span.desktop-view { display: inline-block; }
.section-about ul li div span.icon-day { background-image: url('../images/icon-day.png'); }
.section-about ul li div span.icon-esclamation { background-image: url('../images/icon-esclamation.png'); }
.section-about ul li div span.icon-verify { background-image: url('../images/icon-verify.png'); }
.section-about ul li div label { font-size: 18px; font-weight: 300; line-height: 24px; color: #3cb8ba; }


/* MOBILE */
@media (max-width: 978px) {     
    /* DESKTOP/MOBILE SWITCH */
    body { font-size: 14px; -ms-overflow-style: -ms-autohiding-scrollbar; } 
    .desktop-view { display: none; }
    .mobile-view { display: block; }
    .mobile-checker { display: block; }
    
    /*HOVERS*/    
    .button-container .button:hover { text-decoration: none; background-color: #F9423A; border-color: #F9423A; }    
    
    /* GLOBAL */
    header.interno { background-color: #FF242B; }
    header.interno .logo-cnt .logo { color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 800; width: auto; text-align: center; letter-spacing: 4px; line-height: 50px; width: auto; height: auto; margin: 0; padding: 0 10px; background-image: url(../images/Header_Offline-test.png); height: 50px; width: 100%; background-size: 140%; background-position: center; }
    h2 { font-size: 24px; line-height: 26px; }
    h2 + h2 { margin-top: 5px; }
    h2 + p { margin-top: 10px; }
    .button-container { margin: 30px auto; }
    .button-container .button { height: 50px; font-size: 20px; line-height: 20px; }
    .button-container .button.btn_large { width: 300px; }
    
    /* IFRAME CONTAINER */
    .iframe-container .cover-img div { height: 80px; margin-top: -40px; }
    .iframe-container .cover-img div .icon-play { width: 60px; height: 60px;  }
    .tip.mobile-view { display: block; }
    .tip.desktop-view { display: none; }
    
    /* CONTENT */
    .section-head { margin: 20px 15px 0; }
    .section-head .iframe-container { margin-top: 3px; }        
    .section-steps { margin: 0 15px; }
    .section-steps .video-box { margin: 0 0 15px; }
    .section-steps .thumb-list { margin: 20px 10% 0; }
    .section-about { margin: 10px 15px 60px; }
    .section-about ul li, .section-about ul li.right-text { text-align: center; }
    .section-about ul li div span { display: block; margin: 0 auto 10px; }
    .section-about ul li div span.mobile-view { display: block; }
    .section-about ul li div span.desktop-view { display: none; }
    .section-steps .video-box .iframe-container { margin-top: 0px; }
    .section-steps .video-box .iframe-container .cover-img > div { height: 60px; margin-top: -30px; }
    .section-steps .video-box .iframe-container .cover-img > div span { height: 60px; width: 60px; }
    .rule .rule-desc { border: 0; margin-bottom: 3px; padding: 35px 5px 12px; }
    .rule .rule-desc p { font-size: 16px; line-height: 18px;}
    
    .section-steps > p.mobile-view { display: block; }
    .section-steps > p.desktop-view { display: none; }
    
    .section-steps .thumb-list .thumb-item.step1:hover { background-image: url('../images/slider/1_002.png'); }
    .section-steps .thumb-list .thumb-item.step2:hover { background-image: url('../images/slider/2_002.png'); }
    .section-steps .thumb-list .thumb-item.step3:hover { background-image: url('../images/slider/3_002.png'); }
    .section-steps .thumb-list .thumb-item.step4:hover { background-image: url('../images/slider/4_002.png'); }
    .section-steps .thumb-list .thumb-item.step5:hover { background-image: url('../images/slider/5_002.png'); }
    
    .section-steps .thumb-list .slick-current .thumb-item.step1 { background-image: url('../images/slider/1_003.png'); }
    .section-steps .thumb-list .slick-current .thumb-item.step2 { background-image: url('../images/slider/2_003.png'); }
    .section-steps .thumb-list .slick-current .thumb-item.step3 { background-image: url('../images/slider/3_003.png'); }
    .section-steps .thumb-list .slick-current .thumb-item.step4 { background-image: url('../images/slider/4_003.png'); }
    .section-steps .thumb-list .slick-current .thumb-item.step5 { background-image: url('../images/slider/5_003.png'); }
}

@media (max-width: 480px) { 
    .section-steps .thumb-list { margin: 10px 10% 0; }
    .slick-dots li { margin: 0 7px; }
}

@media (max-width: 550px) { 
    header.interno .logo-cnt .logo { background-size: 140%; }
}