/* ==================================================== * RESET * ==================================================*/ html, body { border:0; margin:0; padding:0; font-size: 100%; line-height: 1.5; } a img { border:none; } .clear { clear:both; } h1,h2,h3,h4,h5,h6,div,ol,ul,p { margin:0; padding:0; } #page ul { margin-left:1.3em; list-style-type:square; } p { margin:0 0 1em 0;} p strong { font-weight: 700; } .nowrap { white-space: nowrap;} /* ==================================================== * LAYOUT * ==================================================*/ html, body { height: 100%; } body { background: #ffffff; font-family: "proxima-nova", arial, sans-serif; font-weight: 300; color: #3b3b3b; } .inner { width: 940px; margin: 0 auto; padding: 0 10px; } #PageBody_DIV { font-size: 0.875em; height: 100%; } .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { *zoom:1; } /* ==================================================== * TYPOGRAPHY * ==================================================*/ a { color: #E30613; text-decoration: none; } a:hover { color: #E30613; } h1, h2 { } /* ==================================================== * ELEMENTS * ==================================================*/ hr { border: 0; border-bottom: solid 1px #ebebeb; } input, textarea { font-family: inherit; font-size: inherit; } /* ==================================================== * HEADER * ==================================================*/ #header { border-top: 3px solid #F2F2F2; } #header .inner { } #logo { width: 200px; float: left; margin-top: 70px; } #toolbar { width: 480px; float: right; font-family: "report"; text-shadow: 0 1px #ba0510; font-size: 1.05em; } #toolbar .panel_1 { float: right; margin-left: 20px; } #toolbar .panel_1 img { margin-top: 8px; margin-left: 2px; } #toolbar ul { float: right; } #toolbar ul li { float: left; list-style: none; } #toolbar ul li a { background: #e30613; color: #ffffff; height: 42px; line-height: 42px; padding: 0 15px; text-transform: uppercase; font-weight: 600; display: block; border: 3px solid #F2F2F2; border-top: none; border-radius: 0 0 5px 5px; } #toolbar ul li a:hover { background: #3c3c3b; text-shadow: 0 1px #111111; } /* ==================================================== * NAVIGATION * ==================================================*/ #navigation { width: 640px; float: right; margin-top: 42px; font-family: "report", inherit; position: relative; z-index: 999; font-size: 1em; } #navigation .sf-menu { float: right; list-style: none; } #navigation .sf-menu > li { float: left; position: relative; } #navigation .sf-menu > li:hover > a, #navigation .sf-menu > li > a:hover { background: #F0F0F0; border-radius: 3px; color: #3B3B3B; } #navigation .sf-menu > li > a { font-weight: bold; text-transform: uppercase; color: #959595; display: block; padding: 10px; } #navigation .sf-menu > li.menu_on > a { color: #e30613; } #navigation .sf-menu > li ul { background: url("../g/2016/template/bg_menu.png") no-repeat scroll 20px 10px transparent; list-style: none; display: none; position: absolute; left: 0; top: 30px; padding-top: 20px; } #navigation .sf-menu > li:hover ul { display: block; } #navigation .sf-menu > li ul li { width: 170px; } #navigation .sf-menu > li ul li:first-child { padding-top: 5px; background: #f0f0f0; border-radius: 3px 3px 0 0; } #navigation .sf-menu > li ul li a { padding: 5px 10px; background: #f0f0f0; display: block; color: #3B3B3B; } #navigation .sf-menu > li ul li:first-child a { border-radius: 3px 3px 0 0; } #navigation .sf-menu > li ul li:last-child a { border-radius: 0 0 3px 3px; } #navigation .sf-menu > li ul li a:hover { color: #e30613; } /* ==================================================== * QUOTE * ==================================================*/ #quote { margin-top: 110px; text-align: center; color: #3c3c3b; font-family: "report"; font-size: 3.43em; font-weight: bold; letter-spacing: -0.02em; line-height: 1.1em; } #quote span { color: #e30613; } /* ==================================================== * TOP * ==================================================*/ #top { margin-bottom: 65px; position: relative; z-index: 1; } #top .paneltitle_1 { font-family: "report"; text-align: center; font-size: 3.43em; font-weight: 700; letter-spacing: -0.02em; } #top .paneltitle_1 span { font-weight: 400; text-transform: uppercase; } #top ul { font-family: "report"; list-style: none; text-align: center; } #top ul li { display: inline; text-transform: uppercase; font-size: 1.12em; padding: 0 10px; } #top ul li a { color: #959595; font-weight: 600; } #top ul li a:hover { color: #E30613; } /* #slider li { width: 132px; float: left; margin: 0 20px; height: 470px; } */ /* ==================================================== * SPOTLIGHT * ==================================================*/ #spotlight { background: transparent url(../g/2016/template/bg_spotlight.png) repeat-x center bottom; margin-bottom: 30px; margin-top: 80px; } #spotlight .inner { width: 960px; padding: 0; } #robot { cursor: pointer; pointer-events: none; /*background: transparent url(../g/2016/template/robot2.png) no-repeat left center;*/ width: 286px; height: 283px; margin: 0 auto; margin-top: -290px; z-index: 999; position: relative; } #spotlight #slide-description { opacity: 0; text-align: center; min-height: 110px; transition:opacity 0.5s linear; } #spotlight:hover #slide-description { display: block; opacity:1; } #spotlight #slide-description h1 { font-family: "report"; font-size: 3.43em; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: #3b3b3b; } #spotlight a { font-family: "report"; color: #E30613; font-size: 1.12em; font-weight: bold; text-transform: uppercase; } #slider li #slide-description { font-weight: bold; color: #959595; } #slider { list-style: none; padding: 0; margin: 0 auto; width: 720px; height: 26em; } #slider li { height: 132px; width: 132px; text-align: center; cursor: pointer; } #slider li.roundabout-in-focus { cursor: default; } #slider li span { display: block; } #slider img { max-width: 100%; height: auto!important; } #slider .slide-description { display: none; } #slider img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ } #spotlight-text { color: #959595; } /* ==================================================== * PAGE TITLE * ==================================================*/ #page-title { margin-top: 50px; } #page-title h1 { font-family: "report"; font-size: 3.43em; font-weight: 700; letter-spacing: -0.02em; text-align: center; } /* ==================================================== * MAIN * ==================================================*/ #main { position: relative; } .bodysheet { position: relative; } .bodysheet ul { margin-left: 15px; } .leftsheet { width: 460px; float: left; margin-bottom: 15px; } .rightsheet { width: 460px; float: left; margin-left: 20px; margin-bottom: 15px; } .fullsheet { width: 100%; float: left; } /* ONE THIRD SHEETS */ .sheetbody_2 { width: 290px; float: left; margin-left: 35px; margin-bottom: 15px; } .sheetbody_2.leftsheet2 { margin-left: 0; } .titlesheet2 { font-family: "report"; color: #555555; font-size: 1.14em; font-weight: bold; margin-bottom: 15px; text-transform: uppercase; } .bodysheet2 ul { margin-left: 15px; } .sheetbody_2 li { margin-bottom: 10px; } /* IMAGE SHEETS */ .image-sheet { width: 290px; float: left; margin-left: 35px; margin-bottom: 15px; } .image-sheet.leftsheet { margin-left: 0; } .image-sheet > img { border-radius: 3px; margin-bottom: 15px; } .image-sheet > h2 { font-family: "report"; margin-bottom: 10px; font-family: "report"; color: #555555; font-size: 1.2em; } /* I-CATCHER w/ MONITOR */ .sheetbody .asp-icatcher-holder { background: transparent url(../g/2016/template/bg_monitor.png) no-repeat 0 0; height: 408px !important; width: 400px; float: right; } .sheetbody .asp-icatcher-inner { margin-left: 14px; margin-top: 13px; } .sheetbody .sliderNavHolder { position: absolute; right: 0; top: 315px; } .sheetbody .sliderNavImage { padding-left: 5px; } /* TESTIMONIALS SHEET */ .sheet_4 { float: left; width: 940px; text-align: center; background: transparent url(../g/2016/template/bg_top_testimonials.png) no-repeat center top; padding-top: 30px; margin-bottom: 15px; margin-top: 15px; } .sheet_4 .sliderNavHolder { display: none; } .sheet_4 .asp-icatcher-inner { padding-bottom: 25px; background: transparent url(../g/2016/template/bg_bot_testimonials.png) no-repeat center bottom; } /* TEAM SHEET */ #team-slider .flex-pic { width: 500px; float: left; position: relative; margin-top: 20px; } #team-slider .flex-desc { width: 390px; float: right; } #team-slider .flex-title { font-family: "report"; margin-bottom: 15px; } #team-slider .flex-direction-nav { position: relative; z-index: 99; } #team-slider .flex-direction-nav .flex-prev { position: absolute; left: 0; left: -50px; bottom: 140px; height: 26px; width: 18px; background: transparent url(../g/2016/template/icon_flex_larrow.png) no-repeat center center; text-indent: -100px; overflow: hidden; } #team-slider .flex-prev:hover { background-position: center top; } #team-slider .flex-prev.flex-disabled { background-position: center bottom; } #team-slider .flex-direction-nav .flex-next { position: absolute; right: 0; right: -50px; bottom: 140px; height: 26px; width: 18px; background: transparent url(../g/2016/template/icon_flex_rarrow.png) no-repeat center center; text-indent: -100px; overflow: hidden; } #team-slider .flex-next:hover { background-position: center top; } #team-slider .flex-next.flex-disabled { background-position: center bottom; } .flex-pic-bg { position: absolute; height: 755px; width: 540px; background: transparent url(../g/2016/template/bg_flex2.png) no-repeat 0 0; top: -85px; } #team-carousel { width: 390px; float: right; background: #E30613; position: relative; } #team-carousel p { display: none; } #team-carousel .flex-desc { display: none; } #team-carousel .flex-pic { background: #f72e3b; margin: 5px; padding: 5px; } #team-carousel .flex-pic img { width: 100% !important; height: auto !important; cursor: pointer; } #team-carousel .flex-direction-nav { position: relative; z-index: 99; } #team-carousel .flex-direction-nav .flex-prev { position: absolute; left: 0; left: -20px; bottom: 35px; height: 13px; width: 9px; background: transparent url(../g/2016/template/icon_flex_lsarrow.png) no-repeat center center; text-indent: -100px; overflow: hidden; } #team-carousel .flex-prev:hover { background-position: center top; } #team-carousel .flex-prev.flex-disabled { background-position: center bottom; } #team-carousel .flex-direction-nav .flex-next { position: absolute; right: 0; right: -20px; bottom: 35px; height: 13px; width: 9px; background: transparent url(../g/2016/template/icon_flex_rsarrow.png) no-repeat center center; text-indent: -100px; overflow: hidden; } #team-carousel .flex-next:hover { background-position: center top; } #team-carousel .flex-next.flex-disabled { background-position: center bottom; } /* NAGA 121337 */ #page_id_17 #main .inner.cf > li { list-style: none } /* ==================================================== * FOOTER * ==================================================*/ #footer { background: #363636; color: #b1b1b1; text-transform: font-size: 0.8em; } #footer-copyright { float: left; } #footer-copyright a { color: #ffffff; } #footer-copyright a:hover { color: #e30613; } #footer-links { float: right; } #footer-links ul { float: right; list-style: none; } #footer-links ul li { float: left; margin-left: 15px; } #footer-links ul li a { color: #ffffff; } #footer-links ul li a:hover { color: #e30613; } /* ==================================================== * STICKY FOOTER * ==================================================*/ .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -46px; } #footer, .push { padding: 20px 0; } /* ===================================================================================================================== // RESPONSIVE : MOBILE & TABLET // ===================================================================================================================== */ @media screen and (max-width: 960px) { * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .wrapper { width: 100%; } .inner { width: 95%; margin: 0 auto;} ol { list-style-position: inside; } img { max-width: 100%; } #navigation { display: none; } /* Mobile menu */ #section_menu { display: none; } #mobile-navigation { display: block ; z-index:999; float: left; } #toggle-mobile-menu { display: block; background:url(../g/2016/template/icon_menu.png) no-repeat center center #E30613; text-indent: -500px; overflow:hidden; color: #fff; height: 47px; width: 50px; } #mobile-menu { background: #363636; position: absolute; width: 100%; z-index: 99999; } #mobile-menu li { border-bottom: dashed 1px #4C4B4B; float: left; width: 100%; } #mobile-menu li:hover { background: #4C4B4B; } #mobile-menu li a { color: #ffffff; padding: 8px 15px; display: block; width: 80%; float: left; font-weight: 700; } #mobile-menu li ul { display: none; background: #363636; list-style: none; font-size: 0.875em; float: left; width: 100%; margin: 0; } #mobile-menu li li { border-bottom: none; } #mobile-menu li li ul { background-color: none; } #mobile-menu li li ul a { padding: 5px 20px; font-weight: 400; } #mobile-menu .trigger-sub-menu { background: #1C1B1B url(../g/2016/template/ic_down_arrow.png) no-repeat center center; float: right; width: 20%; height: 40px; display: block; border-left: 1px dashed #4C4B4B; } #mobile-menu .trigger-sub-menu.active { background: #1C1B1B url(../g/2016/template/ic_down_arrow.png) no-repeat center center; border-bottom: 1px dashed #4C4B4B; } #mobile-menu .trigger-sub-menu:hover { background-color: #3D3B3B; } /* HEADER */ #toolbar { position: absolute; right: 10px; top: 0; width: 80%; } #logo { margin-top: 20px; } /* HOME ROUNDABOUT */ #spotlight { margin-top: 50px; } #spotlight .inner { width: 100%; } #spotlight #slide-description { opacity: 1; width: 90%; margin: 0 auto; height: 78px; } #slider { width: 90%; height: 17em; } #robot { margin-top: -240px; width: 285px; } /* FOOTER */ #footer { margin-top: 20px; } #footer-links { margin-top: 10px; display: inline-block; } #footer-links, #footer-links .footeritems { float: none; } #footer-links .footeritems li { margin-left: 0; margin-right: 15px; } /* SUBPAGES */ /* Slider page our team */ .flex-pic-bg { display: none; } #team-slider .flex-pic { width: 48%; height: auto !important; } #team-slider .flex-pic img { width: 100%; height: auto !important; } #team-slider .flex-desc { width: 48%; } #team-slider .flex-direction-nav .flex-prev { left: 0; } #team-slider .flex-direction-nav .flex-next { right: -20px; } /* Sheets */ .rightsheet, .leftsheet, .fullsheet { width: 100%; margin-left: 0; } } @media screen and (max-width: 768px) { table, tr, td { display: block; } } @media screen and (max-width: 480px) { form input, form select { max-width: 150px; } form h2, form p, form td { max-width: 275px; } form textarea { max-width: 210px; } #PageBody_DIV { height: auto; } #team-slider .flex-desc { clear: both; width: 95% !important; } #team-slider .flex-direction-nav { position: static; } #team-slider .flex-prev, #team-slider .flex-next { top: 150px; } #team-slider .flex-direction-nav .flex-next { right: 0; } #team-slider .flex-pic { width: 100%; } #team-carousel { width: 90%; float: none; margin: 0 auto; } /* HOME ROUNDABOUT */ #robot { width: 132px; margin-top: -197px; height: auto; } #slider img { max-width: 50%; } #spotlight { background-position: center 130px; } /* Icatcher product pages */ .sheetbody .asp-icatcher-holder { background: none; border: 5px solid #000; width: 100%; height: auto !important; } .sheetbody .asp-icatcher-holder img { width: 100% !important; height: auto !important; } .sheetbody .sliderNavHolder { top: -20px; } } @media screen and (max-width: 768px) { table, tr { display: block; } td { width: 100% !important; } form table { display: table; } form td { display: table-cell; width: auto !important; } form tr { display: table-row; } } /* ONLY SCREEN */ @media screen and (min-width: 960px) { #section_menu { display: none; } #toggle-mobile-menu { display: none; } }