*, *:before, *:after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, blockquote { display: block; } ul { list-style-type: none; padding: 0; margin: 0; } li { padding: 10px 10px 5px 10px; color: #292929; font-weight: 300; font-size: 20px; } .container { max-width: 1000px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } /*----------------------- Typography -----------------------*/ h1 { font-size: 30px; line-height: 40px; margin: 0 0 30px 0; color: white; } h3 { font-size: 24px; line-height: 30px; margin: 0 0 30px 0; color: #262626; text-transform: uppercase; letter-spacing: 4px; } h5 { font-size: 20px; line-height: 1.4; margin: 30px 0 5px 0; color: #262626; text-transform: uppercase; letter-spacing: 2px; } p.description { font-size: 20px; line-height: 40px; margin: 0 0 30px 0; color: #494949; font-weight: 300; } p.description a, .highlight { color: #ed1b1b; } p.intro { font-size: 25px; line-height: 32px; margin: 0 0 25px 0; color: #ffa9a9; font-weight: 300; } p.intro.outline { color: #ffd6d6; font-style: italic; } /*----------------------- Buttons -----------------------*/ .btn { display: inline-block; font-size: 15px; line-height: 18px; border: 2px solid #e00c0c; color: #e00c0c; background-color: white; border-radius: 5px; padding: 10px 15px; cursor: pointer; text-transform: uppercase; } .btn:hover { background-color: #e00c0c; color: white; } .btn-large { font-size: 20px; line-height: 24px; padding: 10px 25px; } .btn-small { font-size: 12px; line-height: 15px; padding: 5px 12px; } /*----------------------- Top Wrapper -----------------------*/ .top-wrapper { background: url('../images/banner-bckg.png') no-repeat 50% top #eb2a2a; background-size: cover; position: relative; } /*----------------------- Header -----------------------*/ header { padding: 25px 0; } header .container { position: relative; } header .toggle-navigation { display: inline-block; width: 50px; background-color: transparent; padding: 10px 5px; border-radius: 5px; position: absolute; top: 35px; right: 15px; } header .toggle-navigation .line { display: block; width: 100%; height: 6px; margin-top: 6px; background-color: white; border-radius: 5px; } header .toggle-navigation .line:first-child { margin-top: 0; } header .navbar li { display: block; margin: 3px 0; text-align: right; } header .navbar li a { display: block; font-size: 20px; line-height: 30px; color: #ff9c9c; font-weight: 300; } header .navbar li a:hover, header .navbar li.active a { color: white; } /*----------------------- Banner -----------------------*/ .banner { background-size: cover; padding: 35px 0; position: relative; } /*----------------------- Content -----------------------*/ .content { padding-top: 30px; padding-bottom: 70px; position: relative; z-index: 3; } .content .social { margin: 50px 0; text-align: center; } .content .social li { display: inline-block; margin: 0 10px; } .content .social li.facebook a { background-color: #45609d; } .content .social li.twitter a { background-color: #48c7f5; } .content .social li.instagram a { background-color: #2a5b83; } .content .social li a { display: inline-block; width: 70px; height: 70px; border-radius: 50%; opacity: 0.6; line-height: 70px; font-size: 44px; color: white; } .content .social li a:hover { opacity: 1; } .content .phone-graphic { margin-bottom: 70px; text-align: center; } .content .phone-graphic a { display: inline-block; } .content .phone-graphic img { display: inline-block; max-width: 100%; height: auto; } .content .phone-graphic .second { display: none; } .content .phone-graphic a:hover .first { display: none; } .content .phone-graphic a:hover .second { display: block; } /*----------------------- Contact Us -----------------------*/ .contact-us .form-group { margin-bottom: 25px; } .contact-us .form-control { display: block; width: 100%; background-color: white; border: 2px solid #d8d8d8; border-radius: 5px; font-size: 25px; line-height: 30px; padding: 15px; font-family: 'Roboto', sans-serif; } .contact-us .submit { text-align: right; } .contact-us .response-message { font-size: 18px; color: #454545; line-height: 32px; text-align: center; margin-top: 30px; border: 2px solid #398f14; padding: 15px; border-radius: 15px; display: none; } /*----------------------- Support -----------------------*/ .support .headline { font-size: 26px; font-weight: 700; margin: 0 0 20px 0; } .support li { font-size: 20px; line-height: 40px; color: #494949; font-weight: 300; margin: 0 0 20px 0; } .support li span { font-weight: 700; font-size: 24px; } .support li .feedback { margin-top: 20px; } .support li a { color: #ed1b1b; } /*----------------------- Games -----------------------*/ .listed-games { width: 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } .games { background: linear-gradient(white, #f1f1f1, white); padding: 0 0 50px 0; } .games .game { padding: 30px 25px 20px 25px; background-color: white; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); text-align: center; } .games .game .img-holder img { border-radius: 50px; width: 128px; } .games .game h5 { font-size: 20px; line-height: 24px; min-height: 48px; color: #2d2d2d; text-transform: uppercase; margin: 15px 0; width: 250px; } .games .game { min-width: 300px; max-width: 400px; margin: 0 auto 15px auto; position: relative; flex-basis: auto; } .games .game .new-game { position: absolute; top: -2px; left: -5px; } .games .game .stores { margin: 15px 0; } .games .game .stores a { display: inline-block; margin: 0 3px; width: 22px; height: 22px; line-height: 22px; background-color: #c7c7c7; color: white; font-size: 12px; text-align: center; border-radius: 50px; } .games .game .stores a:hover { background-color: black; } /*----------------------- Testimonials -----------------------*/ .testimonials { padding: 50px 0; } .testimonials .testimonial { margin-bottom: 50px; } .testimonials .quote { font-size: 20px; line-height: 40px; margin: 0 0 5px 0; color: #494949; font-weight: 300; } .testimonials .author { display: block; color: #df2b2b; font-size: 20px; line-height: 30px; font-weight: 700; } .testimonials .author::first-letter { color: #494949; font-weight: 400; } /*----------------------- License Agreement -----------------------*/ .license-agreement .address { font-size: 18px; line-height: 22px; color: #494949; font-weight: 300; margin: 0 0 5px 0; } .license-agreement .address a { color: #ed1b1b; } /*----------------------- FAQ -----------------------*/ .faq .description .underline { font-weight: 700; text-decoration: underline; } /*----------------------- Listing -----------------------*/ .listing, .ordered-listing { padding-left: 35px; margin-bottom: 20px; list-style-position: inside; } .listing { list-style-type: disc; } .ordered-listing { list-style-type: lower-roman; } .listing li, .ordered-listing li { font-size: 20px; line-height: 28px; color: #494949; font-weight: 300; margin: 0 0 5px 0; } /*----------------------- Footer -----------------------*/ footer { background-color: #eb2a2a; padding: 20px 0 20px 0; } footer .location { background: url('../images/world-map.png') no-repeat 50% -100px; text-align: center; padding-bottom: 100px; position: relative; } footer .location .location-pin { display: block; max-width: 420px; width: 100%; padding: 15px; background-color: white; position: relative; padding-left: 130px; box-shadow: 0 39px 57px rgba(0, 0, 0, .36); margin: 0 auto 50px auto; text-align: left; } footer .location .pin-india { max-width: 480px; } footer .location .map { position: absolute; top: 15px; left: 15px; width: 90px; } footer .location .map img { display: block; max-width: 100%; height: auto; margin-bottom: 10px; } footer .location .map .btn { text-align: center; } footer .location .info h5 { font-size: 24px; line-height: 25px; margin: 0 0 15px 0; font-weight: 700; color: #cf2d2d; text-transform: uppercase; } footer .location .info .address span { display: block; font-size: 16px; line-height: 22px; font-weight: 300; color: #373737; } footer .bottom { padding: 40px 0 20px 0; } footer .navigation { margin-bottom: 15px; } footer .navigation li { display: block; margin: 5px 0; text-align: center; } footer .navigation a { font-size: 16px; line-height: 24px; color: #ff9c9c; font-weight: 300; } footer .navigation a:hover { color: white; } footer .copyright { font-size: 17px; font-weight: 300; color: #e86c6c; text-align: center; } /*----------------------- Helper classes -----------------------*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both } img { border: medium none; } .img-responsive { max-width: 100%; height: auto; display: block; } .img-center { margin: 0 auto; } .text-center { text-align: center; } .text-right { text-align: right; } a { text-decoration: none; color: inherit; } .accordion { background-color: #f0f0f0; font-size: 1.3em; font-weight: 600; color: #444; cursor: pointer; padding: 20px; margin: 5px 0px 10px 0; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; border-radius: 5px; } .table-ca { width: 100%; overflow-x: auto; overflow-y: hidden; table-layout: fixed; border-collapse: collapse; border: 1px solid #aaa; margin-top: 20px; margin-bottom: 20px; font-size: 20px; } .table-ca td, tr { border-collapse: collapse; border: 1px solid #aaa; } .active, .accordion:hover { background-color: #eb2a2a; color: #ffff; } ul { list-style-position: inside; } .panel { padding: 0 18px; background-color: white; border-left: 3px solid #eee; display: none; overflow: hidden; } .gdpr { background-color: #ffe5e5; padding: 9px; border-radius: 8px; } @media screen and (min-width: 768px) { footer .navigation { text-align: right; } footer .navigation li { display: inline-block; padding: 0 8px; } footer .copyright { text-align: right; } .games .game { width: 46%; flex-basis: 100px; margin: 0 2% 35px 2%; } footer .location .info .address span { font-size: 22px; line-height: 30px; } } @media screen and (max-width: 991px) { header nav { float: right; } /* header .navbar { overflow: hidden; max-height: 0; transition: max-height 300ms linear; } header .navbar.show { max-height: 800px; }*/ } @media screen and (min-width: 992px) { h1 { font-size: 56px; line-height: 50px; margin-bottom: 50px; } h3 { font-size: 34px; line-height: 50px; } header { padding-bottom: 0; position: relative; } header .toggle-navigation { display: none; } header nav { float: right; padding-top: 40px; } header .navbar li { display: inline-block; padding: 0 5px; margin: 0 5px; text-align: center; } header .navbar li a { font-size: 25px; padding: 5px; } .banner { padding: 35px 0 60px; overflow: hidden; z-index: 3; } .banner:after { content: ''; display: block; height: 170px; position: absolute; bottom: -40px; left: -20px; width: 120%; background-color: white; transform: rotate(-3deg); z-index: 2; } .banner.heading-only { padding-bottom: 10px; } .banner.heading-only h1 { font-size: 100px; line-height: 1; } .banner.heading-only:after { height: 190px; bottom: -88px; } .banner .company { padding-top: 45px; width: 58%; float: left; margin-right: 3%; } .banner .phone { width: 39%; float: left; position: relative; z-index: 3; } .content .social { margin: 100px 0; } .content .social li { margin: 0 25px; } footer { padding: 0 0 65px 0; position: relative; } footer .location { height: 900px; overflow: hidden; z-index: 3; } footer .location:before { content: ''; display: block; height: 90px; position: absolute; top: -50px; left: -10px; width: 110%; background-color: white; transform: rotate(-3deg); z-index: 2; } footer .location .container { position: relative; } footer .bottom .container { max-width: 1200px; } footer .location .location-pin { margin: 0 0 30px 0; position: absolute; } footer .location .location-pin:after { content: ''; width: 15px; border-top: 35px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; top: 96%; transform: rotate(30deg); } footer .location .pin-usa { top: 110px; left: 90px; } footer .location .pin-usa:after { left: 20px; } footer .location .pin-india { right: 35px; top: 240px; } footer .location .pin-india:after { right: 100px; } footer .bottom { padding: 0; } footer .navigation a { font-size: 20px; } .games .game { width: 31.33333%; margin: 0 1% 35px 1%; } } @media screen and (min-width: 1200px) { footer .location .pin-usa { top: 115px; left: -15px; } } @media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) { .banner.heading-only:after { bottom: -81px; } .banner.smaller-gap:after { bottom: -92px; } } .top-wrapper:after { content: ''; width: 600px; height: 70px; position: absolute; right: 0; bottom: 0; background-color: white; z-index: 2 } footer:before { content: ''; width: 600px; height: 50px; position: absolute; left: 0; top: 0; background-color: white; } }