img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { min-width: 320px; background-color: #999; color: #666; font-family: Arial,Helvetica Neue,Helvetica,sans-serif; font-size: 14px; text-align: center; line-height: 1.5;margin:0 auto } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; } body { padding: 0; margin: 0; } img, iframe, object, object embed { max-width: 100%;height:auto } a img, iframe { border: none; height: auto; } a, header a:hover, aside li a:hover, .featured li a:hover, footer a:hover { color: #b10000; text-decoration: none; } a:hover { text-decoration: underline; transition: ease-in-out .3s; } header a:hover, nav a:hover, .banner a:hover, .featured a:hover, .btn:hover { text-decoration: none; transition: ease-in-out .3s; } hr { border: none; border-bottom: 1px solid #eee; margin: 25px 0; } .imgLeft { float: left; margin: 5px 4% 1% 1%; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 1% 1% 4%; } .clear { clear: both; } .center { text-align: center; } blockquote { width: auto; margin-left: 0; } .container { background-color: #fff; } .copyright {font-size: 11px; text-align: center; ;} .wrap { max-width: 1080px; display: block; margin: 0 auto; position: relative; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-gap: 20px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third, .grid.featured { grid-template-columns: repeat(3,1fr); } .grid.quad { grid-template-columns: repeat(4,1fr); } .mid { align-self: center; align-items: center; } nav li, aside, section, .halfCol, .triCol, .featured li, footer .flex > div:last-of-type li { display: inline-block; vertical-align: top; } .banner a:hover span, .btn:hover, .featured .btn:hover { background-color: #980000; } header { background-image: linear-gradient( to right, transparent 50%, #eee 50% ); position: relative;min-height:140px } header .bg { background-image: url(/images-design/nav-bg.png); background-repeat: no-repeat; background-position: right bottom; } header:before { content: ""; width: 50%; height: 41px; background-color: #13334b; position: absolute; top: 0; } .smallp {font-size: 11px;} header .grid{grid-template-columns:240px 1fr;grid-gap:0} footer .flex { justify-content: space-between; } .indent {text-indent: 50px; font-weight: bold;} .underline {text-decoration: underline;} header .logo { background-color: #fff; padding: 20px 20px 20px 10px;align-self:center } header .logo img { display:block } nav { text-transform: uppercase; position: relative; background-image: linear-gradient( to right, #eee 50%, transparent 50% ); transform: skewX(-20deg); z-index: 999; } nav::before { content: ""; width: 6px; height: 140px; background-color: #8b0000; position: absolute; top: 0; left: 0; } nav ul { margin: 0;text-align:right } nav li { transform: skewX(20deg);position:relative } nav a{display:block} nav form a{display:inline-block} nav .fa-search{display:inline-block;width:12px;height:13px} nav .topnav { font-size: 13px; background-color: #13334b; padding: 10px 0;margin-right:25px;} nav .topnav a { color: #fff; padding: 0 10px;line-height:20px } nav .topnav form a { padding: 2px 5px; } #SearchForm input { outline: none; border: none; margin: 0 0 0 20px; padding: 4px 0; } nav .mainnav { font-size: 15px; font-weight: 900; margin: 0 0 0 20px; padding: 0; text-align: left!important;} nav .mainnav a { color: #13334b; margin: 31px 12px; padding: 5px 0; border-bottom: 4px solid transparent; } nav .mainnav a:hover { border-color: #8b0000; } nav .dropdown { display: none; min-width: 350px; font-weight: 500; text-transform: none; position: absolute; z-index: 999; padding: 35px 0 0 0;border:1px solid #ccc;padding:0 } nav .dropdown li { transform: none;border-top:1px solid #ccc } nav .dropdown li:first-of-type{border-top:none} nav .dropdown li, nav .dropdown a, nav ul li:hover > ul { display: block; } nav .mainnav .dropdown a { background-color: rgba(255,255,255,.95); padding: 10px 20px;margin:0 } nav .mainnav .dropdown a:hover { font-weight: bold; background-color: rgba(213,186,116,.95); border-color: transparent; } .banner { height: 300px; text-align: left; background-image: linear-gradient(to right,#13334b,#1e4f73,#13334b); background-position: center; background-repeat: no-repeat; } .banner .wrap, .bannerInterior .wrap { top: 50%; transform: translateY(-50%); padding: 0 10px; } .banner h1, .bannerInterior h1 { font-weight: 600; line-height: 1; text-shadow: 1px 1px 3px rgba(0,0,0,.5); } .banner h1, .banner ul, .bannerInterior h1 { color: #fff; margin: 0; } .banner h1 { font-size: 69px; text-transform: uppercase; } .banner ul { list-style: none; padding: 0; } .banner li { font-size: 18px; font-weight: bold; margin: 20px 0; } .banner span { margin-top: 20px; } .bannerInterior { height: 200px; background-image: url(/images-design/interior.jpg); background-size: cover;background-position:50% 42%;background-color:#8f520e } .bannerInterior h1 { font-size: 52px; text-align: right; text-transform: uppercase; } .featured { margin: 40px 0 20px; } .featured > div { text-align: left; background-color: #f9f8f6; outline: 1px solid #eee; position: relative;padding-bottom:50px } .featured >div:last-of-type{padding-bottom:0} .featured >div .btn{position:absolute;bottom:0} .featured a:hover > div { box-shadow: 0 5px 10px rgba(0,0,0,.4); transform: scale(1.01); outline: 1px solid #eee; transition: ease-in-out .3s; } .featured a { display: block; } .featured a>div{display: grid;grid-template-columns:1fr 100px;align-items:center;height:150px} .featured img{object-fit:cover} .featured .one { background-color: #7F2629; } .featured .two { background-color: #003056; } .featured .three { background-color: #216241; } .featured .four { background-color: #B76C21; } .featured .five { background-color: #C69E18; } .featured h2, .featured h3, .featured .btn { color: #fff; } .featured h2 { display: inline-block; vertical-align: middle; } .featured h2 { font-weight: 300; } .featured h2, .featured h3 { font-size: 20px; margin: 0; } .featured h3 { background-color: #333; padding: 5px 15px; } .featured i, aside i { margin-right: 10px; } .featured ul { list-style: none; padding: 0 15px; } .featured li a, aside li a, aside p { color: #666; } .featured .btn { position: absolute; bottom: 0; } .featured p { color: #666; margin: 20px 15px; } .featured .video { padding: 15px; display: block; margin: 0 auto;max-width:calc(100% - 30px) } .locations.grid.half {grid-column-gap: 5px; grid-gap: 5px; grid-template-columns: 340px 1fr;} .locations.grid.half p {margin-bottom: 0px; } .container>.wrap{display:grid;grid-template-columns:1fr 3fr;grid-gap:40px;padding:40px 0} aside div { padding-bottom: 5px; background-color: #f9f8f6; outline: 1px solid #ddd; margin-bottom: 25px; } aside h3, aside li, aside p { padding: 0 15px; } aside h3 { font-size: 18px; background-color: #333; color: #fff; margin: 0; padding: 5px 15px; } aside ul { margin: 0; padding: 10px 0; } aside li { list-style: none; font-size: 12px; font-weight: bold; text-transform: uppercase; } aside li a { display: block; padding: 10px 0; } aside i{display:inline-block;width:23px;height:16px;line-height:1} .halfCol { width: calc(100% / 2 - 10px); } .triCol { width: calc(100% / 3 - 10px); } h1, h2, h3, h4 { font-family: 'Roboto',sans-serif; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } section h2 { margin-top: 0; } section h2 i { color: #eee; } section h3 { margin: 20px 0; } section ul, section ol { padding-left: 25px; } section li { margin: 5px 0; } .nolist, footer ul { list-style: none; padding: 0; } .btn { font-size: 12px; text-align: center; display: inline-block; text-transform: uppercase; background-color: #8b0000; color: #fff; padding: 7px 20px; margin-top: 10px; } footer, footer a { color: #fff; } footer .wrap{padding: 20px 0; } footer { border-top: 6px solid #8b0000; } footer .mark { display: block; margin-top: 20px; } footer .flex > div{ padding: 0 10px; } footer .flex > div:last-of-type ul { margin-bottom: 40px; } footer li i{display:block;width:36px;height:28px} footer .fa-envelope-o{display:inline-block;width:24px;height:14px} .subfoot { list-style: none; padding: 0; } .subfoot li { display: inline-block; text-align: center; } .subfoot li a { padding: 0 10px; border-left: 1px solid #fff; } .subfoot li:nth-of-type(2){margin-left: 10px;} #webinars { width: 100%; border-collapse: collapse; } #webinars th { background: #333; color: #FFF; font-weight: bold; padding: 10px 5px; } #webinars td { padding: 5px; border: 1px solid #CCC; vertical-align: top; } #webinars td li { list-style-type: none; } #openexchange { text-align: left; } #openexchange p, #subscribe p { width: 48%; display: inline-block; font-weight: bold; text-align: left; vertical-align: top; } #subscribe p { display: block; } #openexchange p input, #openexchange p textarea, #subscribe input { display: block; width: 90%; padding: 5px; border-radius: 3px; outline: none; border: 1px solid #CCC; } #openexchange p input:focus, #openexchange p textarea:focus { box-shadow: #666 0 0 10px; } #openexchange h2 { border-bottom: 1px solid #8b0000; color: #8b0000; margin-bottom: 0; margin-top: 50px; } #openexchange input[type=submit], #subscribe input[type=submit] { background: #8b0000; padding: 15px; border-radius: 3px; color: #FFF; display: block; border: none; font-weight: bold; } #openexchange input[type=submit]:hover { cursor: pointer; background: #980000; } .hide { display: none; } .seminars { border-collapse: collapse; } .seminars td { border: 1px solid #999; padding: 5px; } .seminars tr:nth-of-type(odd) td { background-color: #ddd; } .nowrap,.subfoot span,a[href^=tel]{white-space:nowrap} footer h3{text-align:center} table{max-width:100% !important;height:auto !important} button { background-color: #7F2729; color: #fff; } @media(max-width:1070px) { nav .mainnav a { margin: 6px 10px; } } @media(max-width:999px) { header .wrap{overflow:hidden} nav, nav li { transform: none; } nav ul ul{display:none !important} nav .topnav{margin-right:0} header .logo{padding:20px} header:before, nav:before { content: none; } header, header .bg { background-image: none; } header .logo { display: block; margin: 0 auto; } nav { width: 100%; background-color: #eee; } nav .topnav a { padding: 0; } nav .mainnav { padding: 10px 0; } nav .mainnav, nav .mainnav a { margin: 0; } nav li { vertical-align: middle; margin: 5px 10px; } .grid.featured{grid-template-columns:1fr 1fr} .featured a>div{height:auto;grid-template-columns:1fr} .featured h2{display:block;padding:10px 20px;text-align:center} .featured img{max-height:200px;object-fit:contain;margin:0 auto} .banner .grid h1{font-size:50px} } @media(max-width:767px) { header .grid,.grid.third{grid-template-columns:1fr} nav ul{text-align:center} .banner .wrap{top:unset;transform:none} .banner{height:auto} .banner .grid.third{grid-template-columns:1fr 1fr;grid-gap:0} .banner .grid h1{padding:20px;grid-column:span 2;text-align:center} .banner .grid img{padding:20px;max-width:calc(100% - 40px)} .bannerInterior h1{font-size:36px;text-align:center} } @media(max-width:700px) { aside,section{display:block;margin:0;width:auto} section{padding:0 10px} } @media(max-width:600px) { .grid.featured { grid-template-columns: 1fr; } } @media(max-width:500px) { .banner .grid.third{grid-template-columns:1fr} .banner .grid h1{grid-column:unset} .banner .grid img{width:260px;margin:0 auto} .banner li,footer li, footer p{text-align:center} footer .flex{display:block} .subfoot li{display:block;margin:8px 0} .subfoot li a{border-left:none} table{} table,table tr{display:block;} table td,table th{display:block;height:auto !important;margin:8px 0;width:auto !important;border:none !important} #openexchange p{width:auto;display:block} }