img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 16px; background-color: #716c93; color: #4d4d4d; line-height: 1.5; text-align: center; min-width: 320px; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6 { font-weight: 900; } h2, h3, h4, h5, h6 { color: #603e83; } body, header ul, footer ul { padding: 0; margin: 0; } nav ul, section ul, section ol { padding: 0 } img, iframe { max-width: 100%; } a img, iframe { border: none; } a, nav a:hover { text-decoration: none; color: #f7564b; transition: all .3s linear .01s; } a:hover { text-decoration: underline; transition: all .3s linear .01s; } nav a:hover, .cycle-slideshow a:hover, .featured a:hover, .testimonials a:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 30px 0; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; } li{margin:5px 0} .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; } .wrap { max-width: 1020px; display: block; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div, header, nav { display: table-cell; vertical-align: top; } .table.mid > div { vertical-align: middle } .table.half > div, .table.quad > div { width: 50%; } .table.half > div:first-of-type { padding-right: 2%; } .table.half > div:last-of-type { padding-left: 2%; } .table.third > div { width: 33%; } .table.third > div:nth-of-type(1) { padding-right: 2%; } .table.third > div:nth-of-type(2) { padding: 0 1%; } .table.third > div:nth-of-type(3) { padding-left: 2%; } header, nav { vertical-align: middle; } nav li, footer .table.mark li { display: inline-block; } .overlay { background-color: rgba(0,0,0,.4); height: calc(100% - 20px) } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0 } header { width: 175px; padding: 5px 10px; } header li{margin: 0} nav { font-weight: 700; text-align: right; } nav a { color: #4d4d4d; padding: 10px; } nav ul { margin: 20px 0; } nav ul:first-of-type li { border-right: 1px solid #4d4d4d; } nav ul:first-of-type li:last-of-type { border: none; } nav ul:last-of-type { text-transform: uppercase; } .webMeeting { color: #f7564b; } #mainNav li { position: relative; border-top: 1px solid #fff; } #mainNav li a { font-size: 14px; text-align: left; display: inline-block; text-decoration: none; } #mainNav > li:hover { border-top: 1px solid #eee; } #mainNav li:hover > a { background: #fff; color: #f7564b; } #mainNav li:hover > ul { display: block; } #mainNav ul { display: none; background: #fff; margin: 0 0 0 -1px; position: absolute; z-index: 999; } #mainNav ul li { border: none; position: relative; } #mainNav li:last-child ul { right: 0; } #mainNav ul li a { display: block; text-align: left; border-bottom: 1px solid #f2f2f2; width: 133px; } #mainNav ul li a:hover { background: #f7564b; color: #fff; } #mainNav ul li:first-of-type { display: none } .mobnav ul, .mobnav li { margin: 0 } .mobnav li { display: inline-block; } .mobnav a { display: block; padding: 10px 20px; color: #fff; background-color: #716c93; border-radius: 15px; margin: 10px } .cycle-slideshow { height: 60vw; max-height: 500px; min-height: 350px; position: relative; overflow: hidden; } .cycle-slideshow article { display: block; width: 100%; height: 100%; } .cycle-slideshow .overlay { padding: 10px 50px } .cycle-slideshow .wrap, .testimonials .wrap { top: 50%; transform: translateY(-50%); } .cycle-slideshow h1, .cycle-slideshow p { text-align: center; color: #fff; text-shadow: 1px 1px 3px #000; } .cycle-slideshow h1 { font-size: 36px; margin-top: 0; } .cycle-slideshow h1 span { display: block; font-size: 24px; font-weight: 700; } .cycle-slideshow h1 em { color: #f7564b; padding-right: 5px; } .cycle-slideshow p { max-width: 600px; font-size: 18px; font-weight: 700; text-align: center; margin: 0 auto; } .cycle-slideshow p:last-of-type { margin-top: 20px; } .cycle-prev, .cycle-next { position: absolute; top: 0; width: 50px; z-index: 888; height: 100%; cursor: pointer; background-position: 50% 50%; background-repeat: no-repeat; opacity: .2; } .cycle-prev { left: 0; background-image: url(/images-design/arrow-prev.png); } .cycle-next { right: 0; background-image: url(/images-design/arrow-next.png); } .cycle-prev:hover, .cycle-next:hover { opacity: .4; transition: all .3s linear .01s; } .slide1 { background-image: url(/images-design/slides/1.jpg); background-position: center; } .slide2 { background-image: url(/images-design/slides/2.jpg); background-position: center top 20%; } .slide3 { background-image: url(/images-design/slides/3.jpg); background-position: center top 15%; } .slide4 { background-image: url(/images-design/slides/4.jpg); background-position: center; } .slide5 { background-image: url(/images-design/slides/5.jpg); background-position: center bottom 20%; } .banner { height: 300px; background-size: cover; background-position: center; z-index: 888; position: relative } section h1 { font-size: 36px; background-color: #716c93; color: #fff; padding: 30px 40px; margin: -80px 0 0 -40px; z-index: 888; position: relative; width: 100%; } section h2.pr { margin-top: 20px; } .banner.about { background-image: url(/images-design/banners/team.jpg); } .banner.applause { background-image: url(/images-design/banners/applause.jpg); } .banner.news { background-image: url(/images-design/banners/news.jpg); } .banner.careers { background-image: url(/images-design/banners/application.jpg); background-position-y: 60%; } .banner.support { background-image: url(/images-design/banners/support.jpg); } .banner.solutions { background-image: url(/images-design/banners/solutions.jpg); background-position-y: 55%; } .banner.contact { background-image: url(/images-design/banners/contact.jpg); } .featured { background-color: #716c93; } .featured .table { font-size: 0 } .featured a { width: 50%; display: inline-block; padding-top: 15px } .featured h2 { font-size: 18px; color: #fff; margin: 5px 0 15px; } .featured h2, .more h2, .more p, .testimonials h2, .testimonials p { text-align: center; } .featured .table > div { padding: 0 !important } .featured img { width: 50px; margin-bottom: 15px; } .more { padding: 50px 0 80px; } .more h2, .testimonials h2 { font-size: 24px; } .more p, .testimonials p { font-size: 18px; } .more p { width: 75%; margin: 40px auto; } .more .button { font-size: 16px; } .testimonials { height: 450px; } .testimonials .overlay { background-color: rgba(0,0,0,.65); padding: 10px 20px;position:relative } .testimonials {margin-top: 20px; } .testimonials h2 a, .testimonials p { color: #fff; } .testimonials h2 { margin: 0 0 40px; } .testimonials h2 a { display: block; background-color: rgba(247, 86, 75, .8); padding: 20px; max-width: 400px; margin: 0 auto } .testimonials a:hover { background-color: rgba(247, 86, 75, .9); } section { padding-bottom: 20px; } section > .wrap { max-width: 940px; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; padding: 0 40px 35px 40px; } section h2 { font-size: 24px; } section h3 { font-size: 18px; } section h4 { font-size: 16px; } section ul, section ol { margin: 20px; } section li { margin-bottom: 5px; } .button { display: inline-block; font-weight: bold; background-color: #f7564b; color: #fff; padding: 15px 60px; margin-top: 10px; border-radius: 3px; box-shadow: 0 2px 0 #c4443c; } .special { font-size: 18px; color: #603e83; } .margintop { margin-top: 40px; } .map { width: 100%; height: 400px; margin: 30px 0 20px; } .table.address > div:first-of-type { width: 280px; padding-right: 2%; } .table.address > div:last-of-type { padding-left: 2%; } .table.address h2 { font-size: 18px; margin-bottom: 0; } .table.address ul { list-style: none; margin: 0 30px; } .table.address i { color: #4d4d4d; margin-right: 5px; } .video { width: 100%; height: 52vw; max-height: 526px; margin-top: 30px; } .nolist,section .pr { list-style: none; margin-left: 0 } .pr { margin: 0 } .faq { margin-bottom: 40px; } .faq h3 { color: #4d4d4d } .faq h3:before { content: "Q." } .faq p:before { content: "A." } .faq h3:before, .faq p:before { font-size: 18px; font-weight: bold; color: #f7564b; margin-right: 5px; } .table.third.guides { margin-top: 50px; } .table.third.guides > div { vertical-align: middle; } form { text-align: left; margin: 20px 0; } form .table.half > div:first-of-type { padding-right: 5px; } form .table.half > div:last-of-type { padding-left: 5px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form input[type=file], form select, form textarea { font-family: 'Lato', sans-serif; font-size: 16px; } form input[type=text], form input[type=email], form input[type=tel], form select, form .input { margin-bottom: 10px; } form input[type=text], form input[type=email], form input[type=tel], form textarea, form select, form .input { background-color: #f3f3f3; padding: 0 10px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea, form .input { width: calc(100% - 20px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 40px; } form input[type=file] { margin-left: 20px; } form select { width: 100%; } form .input { padding: 9px 10px; margin: 5px 0 0; } form textarea { height: 150px; padding: 10px; } form input[type=submit] { font-weight: bold; background-color: #f7564b; color: #fff; padding: 10px 40px; margin-top: 5px; border: none; border-radius: 3px; box-shadow: 0 2px 0 #c4443c; } form input[type=submit]:hover, .button:hover { cursor: pointer; text-decoration: none; background-color: #ff5d52; color: #fff; box-shadow: 0 2px 0 #cc473e; transition: all .3s linear .01s; } #quick input[type=text], #quick input[type=email], #quick textarea { background-color: #fff; } #quick input[type=text], #quick input[type=email] { height: 35px; } #quick textarea { height: 100px; } #quick input[type=submit] { padding: 8px 30px; } #newsletter input[type=email] { width: 82%; margin-right: 15px; } #support { margin-bottom: 40px; } #faq textarea { height: 120px; } .products { margin: 20px 0; } .video-guide { width: 100%; height: 254px; } .products h2 { text-align: center; } .products i { color: #716c93; } .products:first-of-type { margin-top: 40px; } .products:last-of-type { margin-bottom: 40px; } .boxed input[disabled=true] { background: red; } .boxed textarea { height: 80px } .boxed .radio label { margin: 0 } .boxed .radio label:last-of-type { margin-bottom: 20px } .boxed .fakeput.radio { background-color: #f5f5f5 } .boxed .fakeput.radio p { margin: 0; padding: 18px 0 5px 20px } .boxed input[type=submit] { margin-top: 0 } footer, footer a, footer h3 { color: #fff; } footer a:hover, .featured a:hover h2 { text-decoration: none; color: #ddd; transition: all .3s linear .01s; } footer .table.third li { margin-bottom: 15px; } footer .wrap { padding: 30px 10px 40px; } footer h3 { font-size: 18px; } footer ul {padding-left:25px } footer h2.pr, footer .pr li span, .mobnav { display: none; } .hide { display: none !important; } footer .table.mark { margin-top: 50px; table-layout: auto } footer .table.mark div:last-of-type { width: 160px } footer .table.mark > div:first-of-type { text-align: left; } footer .table.mark > div ul:last-of-type li { padding: 0 10px; border-left: 1px solid #fff; } footer .table.mark > div ul:last-of-type li:first-of-type { padding-left: 0; border: none; } footer .table.mark p { text-align: right; } footer .fa { padding: 7px 5px; margin: 0 2px 20px; border-radius: 2px; } footer .fa-facebook { background-color: #3b5998; } footer .fa-linkedin { background-color: #0077b5; } footer .fa-yelp { background-color: #dd4b39; } footer .fa-comment { background-color: #89ba16; } .footcar .button{text-align:center} #toshp5 + #toshp5 { display: none } @media(max-width:999px) { nav ul ul{display:none !important} section > .wrap { max-width: none; padding: 0 10px; border-style: none } section h1 { padding: 15px 20px; margin: 0 0 1em -10px; width: calc(100% - 20px) } .mobnav { display: block; } .mark div:first-of-type a { display: block; margin: 4px 8px } body { font-size: 16px } nav a { padding: 4px; margin: 4px } } @media(max-width:600px) { .featured .table.quad > div, .table.products > div, .address .table.half > div { display: block; width: auto; padding: 0 !important } .table.address > div { width: 50% !important } #newsletter input[type=email] { width: calc(100% - 20px) } input[type=submit] { width: 100% } footer .table.third, footer .table.third > div:first-of-type { display: block; width: auto } footer .table.third > div { width: 46%; padding: 0 2% !important } .map { height: 200px } } @media(max-width:500px) { .table.half > div, .table.address > div { display: block; width: auto !important; padding: 0 !important } header, nav { display: block; width: auto; text-align: center } header { padding-top: 20px } .trim { display: none } .cycle-slide-active, .cycle-slide { animation: none !important; background-size: cover !important } .cycle-prev, .cycle-next { display: none } .cycle-slideshow .overlay { padding: 10px } } @media(max-width:400px) { section h1 { font-size: 25px; } footer .table > div, footer .table.third > div { display: block; width: auto !important; padding: 0 !important; } footer .table.mark p, .mark ul { text-align: center } footer h3 { margin-top: 2em } footer .wrap { padding: 5px 10px 20px } .footcar .button {display:block} }