/* HERO STYLES */ .hero { background-color: #fff; } .hero, .hero-container { height: 545px; overflow: visible; } .slide { position: relative; z-index: 0; } .slide .bg { position: absolute; } .slide.active { z-index: 2; } .slide.last-active { z-index: 1; } .slide .bg { background-position: 50% center; height: 545px; width: 100%; background-repeat: no-repeat; } .hero-content { position: absolute; top: 60px; left: 50%; margin-left: 55px; max-width: 425px; text-align: left; } .hero h1 { width: 100%; } .slide h1 { padding: 0 0 .2em 0; } .content, .heroBtn { z-index: 4; } .slide.light h1 a:hover, .slide.dark h1 a:hover { color: #8dd2f1; } .slide.light h1 a:active, .slide.dark h1 a:hover { color: #235770; } .slide p { text-align: left; } /*LIGHT BG STYLE*/ .slide.light h1 a { color: #423834; } .slide.light p { color: #6E6E6E; } .slide.light .bg { background-color: #E7E9E4; } /*DARK BG STYLE*/ .slide.dark h1 a { color: #fff; } .slide.dark p { color: #fff; } .slide.dark .bg { background-color: #000; } /*GLOBAL BUTTON*/ .hero .button { width: 300px; text-align: center; font-size: 4.4em; line-height: 1em; padding: 10px 20px; height: auto; transition: all 0; -webkit-transition: all 0; -moz-transition: all 0; -o-transition: all 0; -ms-transition: all 0; display: inline-block; } .hero .button:hover { } .hero .button:active { -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, .4); -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, .4); box-shadow: inset 0 0 20px rgba(0, 0, 0, .4); } /*BLUE BUTTON*/ .hero .blue-button { background: #294c60 url('../images/global/buttonLarge_bg.png') repeat-x left top; border: 1px solid #629bb5; text-shadow: 1px 1px 0 #062f42; -webkit-box-shadow: 0 5px #062f42; -moz-box-shadow: 0 5px #062f42; box-shadow: 0 5px #062f42; } .hero .blue-button:hover { webkit-box-shadow: 0 3px #062f42; -moz-box-shadow: 0 3px #062f42; box-shadow: 0 3px #062f42; } /*MELON BUTTON*/ .hero .melon-button { background: #BE343E url('../images/global/melon-button_bg.png') repeat-x left top; border: 1px solid #820026; text-shadow: 1px 1px 0 #9C2935; -webkit-box-shadow: 0 5px #730023; -moz-box-shadow: 0 5px #730023; box-shadow: 0 5px #730023; } .hero .melon-button:hover { -webkit-box-shadow: 0 3px #730023; -moz-box-shadow: 0 3px #730023; box-shadow: 0 3px #730023; } .hero .melon-button:active { -webkit-box-shadow: 0 3px #730023; -moz-box-shadow: 0 3px #730023; box-shadow: 0 3px #730023; } /* KEY POINT BOX STYLES */ .content { padding: 0; } #keyPoints { margin-top: -60px; text-align: center; z-index: 1; } #keyPoints .column { float: left; width: 21%; height: 430px; background: rgba(100, 100, 100, .5); padding: 0 1.25%; margin-left: 2%; } #keyPoints .column:first-child { margin-left: 0; } #keyPoints img { width: 170px; } #keyPoints h2 { color: #fff; height: 50px; font-size: 2.4em; padding-top: 0.6em; } #keyPoints p { color: #fff; font-size: 1.3em; } /* MAIN CONTENT STYLES */ h2.slogan { color: #9f9f9f; font-size: 5em; padding: 0.9em 0; text-align: center; } .imgTxt, .txtImg, .imgHldr { position: relative; overflow: hidden; } .imgTxt .imgHldr, .imgTxt section, .txtImg .imgHldr, .txtImg section { width: 48%; } .imgTxt .imgHldr, .imgTxt section, .txtImg section { float: left; } .imgTxt section, .txtImg section { padding-bottom: 6em; } .imgTxt .imgHldr { padding: 0 2% 6em 0; background: #fff url('../images/global/shadowRight.png') no-repeat bottom right; margin-right: 2%; } .txtImg .imgHldr { float: right; padding: 0 0 6em 2%; background: #fff url('../images/global/shadowLeft.png') no-repeat bottom left; } .txtImg section { margin-right: 2%; } .imgHldr img { width: 100%; } .imgTxt h3, .txtImg h3 { padding-bottom: 0.2em; } .imgTxt h3 a, .txtImg h3 a { color: #484848; } .imgTxt h3 a:hover, .txtImg h3 a:hover { color: #8dd2f1; } .imgTxt h3 a:active, .txtImg h3 a:active { color: #235770; } /* ///////////////////////////////////////////////////////////// */ /* ///////////////////// MEDIA QUERIES ///////////////////////// */ /* TABLETS (IN PORTRAIT) /////////////////////////////////////// */ @media screen and (min-width: 569px) and (max-width: 959px) { .sw { width: 96%; padding: 0 2%; } .hero, .hero-container { height: 390px; } .slide .bg { height: 390px; background-size: 1380px auto; background-position: 40% center; } .hero h1 { font-size: 4em; } .hero-content { margin-left: 0; left: 55%; margin-right: 2%; top: 20px; width: 43%; } .content { padding: 0 2%; } .hero .button { font-size: 4.15em; padding: 0.22em 10%; } #keyPoints { margin-top: -50px; } #keyPoints img { width: 80% } #keyPoints .column { width: 21.75%; height: auto; padding: 0 1.25% 1em; margin-left: 1%;} #keyPoints .column:first-child { margin-left: 0; } #keyPoints h2 { height: 40px; font-size: 3em; padding-top: 0.35em; } h2.slogan { font-size: 4em; padding: 1em 0; } .imgTxt section, .txtImg section { padding-bottom: 3em; } .imgTxt h3, .txtImg h3 { font-size: 3em; } } /* TABLETS (IN PORTRAIT) < 800PX /////////////////////////////// */ @media screen and (min-width: 569px) and (max-width: 800px) { .hero .button { font-size: 3.9em; } #keyPoints p { font-size: 1.3em; } .imgTxt .imgHldr, .imgTxt section, .txtImg .imgHldr, .txtImg section { width: 49%; } .imgTxt .imgHldr, .txtImg .imgHldr { padding: 0 0 6em 0; } .txtImg section { margin-right: 2%; } .imgTxt h3, .txtImg h3 { font-size: 2.5em; } } /* TABLETS (IN PORTRAIT) < 700PX /////////////////////////////// */ @media screen and (min-width: 569px) and (max-width: 700px) { .slide h1 { font-size: 3.9em; } .hero .button { font-size: 3.65em; } .imgTxt h3, .txtImg h3 { font-size: 2em; } } /* TABLETS (IN PORTRAIT) < 600PX /////////////////////////////// */ @media screen and (min-width: 569px) and (max-width: 600px) { .slide h1 { font-size: 3.7em; } .hero .button { font-size: 3.4em; } .imgTxt .imgHldr, .imgTxt section, .txtImg .imgHldr, .txtImg section { float: none; width: 100%; margin-right: 0; } #keyPoints p { font-size: 1.2em; } } /* MOBILE PHONES & TABLETS (SHARED STYLES) ///////////////////// */ @media screen and (max-width: 959px) { } /* MOBILE PHONES /////////////////////////////////////////////// */ @media screen and (max-width: 568px) { .hero, .hero-container { height: 589px; } .hero-content { top: 230px; left: 0; right: 0; margin-left: 0; width: 96%; padding: 0 2% 25px; max-width: inherit; background: #fff; min-height: 210px; } .hero-content.light { background-color: rgba(255,255,255,.8); } .hero-content.dark { background-color: rgba(0,0,0,.8); } .slide .bg { height: 220px; background-size: 900px auto; background-position: 25% top; text-align: center; } .slide h1, .heroBtn { text-align: center; } .slide p { margin-bottom: .5em; } .slide h1 { font-size: 3.8em; text-align: left; } .slide.light h1 a, .slide.dark h1 a { color: #423834; } .slide.light p, .slide.dark p { color: #6E6E6E; } .hero .button { font-size: 3.5em; } .hero .button { padding: 0.22em 10%; } #keyPoints { margin-top: 0; width: 100%; text-align: left; } #keyPoints .column { float: none; margin-top: 1em; width: 92%; height: auto; padding: 1em 4%; margin-left: 0; overflow: auto; } #keyPoints h2, #keyPoints img { width: 25%; padding-left: 4%; text-align: center; } #keyPoints h2 { font-size: 3em; height: auto; color: #2F3334; padding-top: 0; } #keyPoints img { float: left; margin: -0.5em 0; } #keyPoints p { float: right; font-size: 1.6em; text-align: left; width: 65%; margin-top: -2em; } h2.slogan { font-size: 3em; padding: 0.8em 0; } .imgTxt .imgHldr, .imgTxt section, .txtImg .imgHldr, .txtImg section { float: none; width: 100%; margin-right: 0; } .imgTxt .imgHldr, .txtImg .imgHldr { padding: 0 0 1em 0; } .imgTxt section, .txtImg section { padding-bottom: 1em; } .imgTxt, .txtImg { padding-bottom: 1.5em; } h3 { font-size: 2.4em; line-height: 1.1em; } } /* MOBILE PHONES <480px //////////////////////////////////////// */ @media screen and (max-width: 480px) { .slide h1 { font-size: 3.2em; } .hero .button { font-size: 3.25em; padding: 0.25em 1em; } #keyPoints h2, #keyPoints img { width: 30%; padding-left: 0; } #keyPoints h2 { font-size: 2.6em; } #keyPoints img { margin: -0.25em 0; } #keyPoints p { font-size: 1.4em; } } /* MOBILE PHONES >400px