img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Open Sans', sans-serif; font-size: 15px; background-color: #303030; color: #404040; line-height: 1.4; text-align: center; } nav, h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul { padding: 0; margin: 0; } section ul, section ol { padding-left: 25px; margin: 0 } section li { margin-bottom: 8px } section ul ul { padding-left: 20px; margin-top: 8px; } img, iframe, video { max-width: 100%; height: auto; } a img, iframe { border: none; } a, .testimonial a:hover, .blog h2 a:hover { text-decoration: none; color: #398c00; } a:hover { text-decoration: underline; } nav a:hover, .banner a:hover, .featured a:hover, .btn:hover { text-decoration: none; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; 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%; max-width: 50%; } .clear { clear: both; } .center { text-align: center; } .container { background-color: #fff; } .wrap { max-width: 1170px; display: block; margin: 0 auto; position: relative; } .top li, nav li, aside, section, .featured a, footer ul { display: inline-block; vertical-align: top; } .logo, nav { display: inline-block; vertical-align: middle; } .table { display: table; width: 100%; } .table > div { display: table-cell; position: relative; vertical-align: top; } .table.half > div { width: 49%; } .table.half > div:nth-of-type(odd) { padding-right: 1%; } .table.half > div:nth-of-type(even) { padding-left: 1%; } .table.third > div { width: 33%; padding: 0 2%; } .nowrap { white-space: nowrap; } .top, header { font-size: 0; } .top { font-size: 15px; text-align: right; padding: 10px 0; } .top ul { margin: 0; padding: 0 10px } .top a { color: #fff; padding: 2px; display: block } .top a:hover, .featured a:hover h3, footer a:hover, .subfoot a:hover { text-decoration: none; color: #ccc; } .top li { line-height: 1.2; } .top li:first-of-type { padding-right: 40px; border-right: 1px solid #999; } .top li:nth-of-type(2) { padding-left: 40px; } .top i{display:block;width:26px;height:15px} header { padding: 20px 0 } .logo { margin: 0 10px } nav { width: calc(100% - 270px); font-size: 15px; font-weight: 600; text-align: right; } nav a { color: #404040; padding: 10px 15px; display: block } nav a:hover { color: #003f99; } .banner { height: 250px; background-image: url(/images-design/banner-interior.jpg); background-size: cover; background-position: center; } .banner .wrap, .featured h3 { position: relative; top: 50%; transform: translateY(-50%); } .banner a { display: inline-block; max-width: 510px; text-align: center; } .banner p, .banner span { color: #fff; text-align: center; margin: 0; } .banner p { font-size: 32px; font-weight: 600; text-transform: uppercase; text-shadow: 3px 3px 5px rgba(0,0,0,.8); } .banner span { font-size: 16px; margin-top: 20px; padding: 20px 0; width: 100%; max-width: 350px; } .banner span, .btn { display: inline-block; font-weight: 600; background-color: #348000; color: #fff; } .banner a:hover span, .btn:hover { background-color: #398c00; } aside { width: calc(25% - 26px); padding: 40px 12px 40px 10px; } aside ul { font-size: 15px; font-weight: 600; padding: 0; } aside li { list-style: none; margin-bottom: 8px } aside a { display: block; color: #404040; padding: 12px 0; border-bottom: 1px solid #ddd; } aside a:hover { text-decoration: none; border-bottom: 1px solid #348000; } section { width: calc(75% - 20px); padding: 30px 10px 40px; } section h1 { font-size: 24px; font-weight: 800; color: #003f99; } section h2, section h3 { font-size: 18px; margin-top: 30px; } section h4 { font-size: 16px; } .btn { padding: 15px 50px; margin-top: 10px; } .map { width: 100%; height: 300px; margin-bottom: 15px; } .quote { font-style: italic; margin-top: 40px; } .hide { display: none; } .pad { padding-left: 10px; padding-right: 10px } .comments blockquote { border-bottom: 1px solid #eee; margin: 20px 0 } .comments blockquote:last-of-type { border-bottom: none; } .comments cite { display: block; padding-bottom: 20px; } .cloud .header { max-height: 200px; color: #fff; background-image: url(/images-design/hosted-cloud.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 35px 0 30px; border-right: 1px solid #fff; } .cloud h2 { width: 85%; font-size: 29px; margin: 0 auto 5px; } .cloud h2, .cloud p { text-align: center; text-shadow: 2px 2px 3px rgba(0,0,0,.6) } .cloud h3 { color: #003f99; margin-left: 8px; } .cloud p { font-size: 20px; margin-top: 0; } .cloud .table.third > div { padding-bottom: 30px; } .cloud .table.third > div:nth-of-type(odd) { background-color: #f5f5f5; } .cloud .table.third > div:nth-of-type(even) { background-color: #fcfcfc; } #blogsidebar ul { list-style: none; padding-left: 0; } #posts .post { padding-bottom: 20px; } .blog #posts { font-size: 0; } .blog #posts .post { font-size: 16px; } .blog #posts .post h2 { margin-top: 10px; } .blog #posts .post h3 { margin-top: 10px; } .blog .posttags, .blog .postcats { display: none; } .blog #posts{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 15px} .blog .post > h2,section .post > h3{grid-area: title} .blog .post > .postThumbnail{grid-area: img;margin-top:20px;height:250px} .blog .post > p:nth-of-type(1){grid-area: date} .blog .post > p:nth-of-type(2){grid-area: p} .blog .post > p:nth-of-type(3){grid-area: btn} .blog .post > .posttags{grid-area: tags} .blog .post > .postcats{grid-area: cats} .blog .post{display:grid;grid-template-areas:"img" "title" "date" "p" "btn";grid-template-columns:1fr} section .postThumbnail{overflow:hidden} section .postThumbnail:empty{display:none} section .postThumbnail img { float: none; display: block; width: 100% !important; height: 100% !important; max-width: 100%; margin: 0; padding: 0; object-fit: cover; object-position: 50% 35% } .news .post p{margin-top:0} .emphasis, .emphasis a { font-size: 24px; font-weight: 800; color: #003f99; margin-top: 50px; } .goal, .testimonial { font-size: 16px; } .goal { background-color: #f5f5f5; padding: 20px 0 30px; } .goal h1, .testimonial h2 { font-size: 24px; font-weight: 800; } .featured { font-size: 0; padding: 40px 0 20px; } .featured a { width: calc((100% / 3) - 10px); height: 200px; background-position: center; background-size: cover } .featured a:nth-of-type(1) { background-image: url(/images-content/phone.jpg); background-position: bottom; } .featured a:nth-of-type(2) { background-image: url(/images-content/password.jpg); } .featured a:nth-of-type(3) { background-image: url(/images-content/cloud.jpg); } .featured a:nth-of-type(4) { background-image: url(/images-content/connect.jpg); } .featured a:nth-of-type(5) { background-image: url(/images-content/server.jpg); } .featured a:nth-of-type(6) { background-image: url(/images-content/cables.jpg); } .featured a:nth-of-type(3n+1) { margin: 10px 10px 10px 0 } .featured a:nth-of-type(3n+2) { margin: 10px 5px } .featured a:nth-of-type(3n+3) { margin: 10px 0 10px 10px } .featured h3 { font-size: 24px; font-weight: 600; text-align: center; color: #fff; margin: 0; text-shadow: 1px 1px 3px #000; } .testimonial { line-height: 1.6; padding: 5px 0 50px; } .testimonial h2 a { color: #003f99; } .testimonial h2, .testimonial p { text-align: center; } .cta { background-image: url(/images-design/banner-cta.jpg); background-size: cover; background-position: center; padding: 50px 0 60px; } .cta h2, .cta p { text-align: center; color: #fff; } .cta h2 { font-size: 32px; font-weight: 600; margin-bottom: 0; } .cta p { font-size: 18px; margin-top: 0; } .cta form { margin-top: 40px; } form { font-size: 0; margin: 20px 0; } form input[type=text], form input[type=email], form input[type=tel], form input[type=submit], form select, form textarea { font-family: 'Open Sans', sans-serif; font-size: 15px; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { background-color: #f5f5f5; padding: 0 20px; margin-bottom: 20px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; } form select { width: calc(100%); } form textarea { height: 150px; padding: 20px; } form input[type=submit] { width: 100%; max-width: 300px; font-weight: 600; text-transform: uppercase; background-color: #348000; color: #fff; padding: 15px 0; border: none; } form input[type=submit]:hover { cursor: pointer; background-color: #398c00; color: #fff; } #consult input[type=text], #consult input[type=email], #consult input[type=tel], form select, #consult textarea, #consult input[type=submit] { font-size: 16px; } #consult input[type=text], #consult input[type=email], #consult input[type=tel], form select, #consult textarea { background-color: rgba(255, 255, 255, .8); } footer, footer a, .subfoot, .subfoot a { color: #fff; } footer { font-size: 0; background-color: #404040; } footer > .wrap{padding: 30px 0 40px; } .subfoot .table > div { width: calc(50% - 20px); padding: 0 10px } footer ul { width: calc(25% - 20px); font-size: 15px; padding: 0; margin: 10px; } footer ul:last-of-type h3, footer ul:last-of-type li, .subfoot .table > div:last-of-type p { text-align: right; } footer li { list-style: none; margin-bottom: 10px; } footer h3 { font-size: 18px; } .subfoot { padding: 20px 0;background-color:#303030 } .subfoot .table.half > div { vertical-align: middle; } .video { text-align: left } .video > div { display: inline-block; width: 47%; padding: 1%; text-align: center; vertical-align: top } .video iframe { width: 100%; height: 200px } .video > div h3 { font-size: 14px; text-align: center; text-transform: capitalize; margin-top: 0; padding-top: 1%; } .pr { list-style-type: none; padding-left: 0 } .terms { list-style-type: upper-alpha } .terms h3 { margin-bottom: 0; text-transform: none } .toshiba { width: 100%; height: 750px } @media(max-width:999px) { nav li:first-of-type { display: none } nav a { padding: 4px; margin: 4px } .banner.home strong, .banner.home p { text-shadow: 2px 2px 3px #000; } .banner p { font-size: 20px } footer ul { font-size: 12px } .featured h3 { font-size: 20px } video {width:100%;height:55vw} } @media(max-width:767px) { footer ul { width: calc(50% - 20px); font-size: 15px } footer li, footer h3 { text-align: center !important } .logo, nav { display: block; width: auto; margin: 12px 0 } .logo { display: block; text-align: center; margin: 20px auto; } .logo img{display:block;width:100%;max-width:250px;margin:0 auto} nav, .top { text-align: center } header { padding: 16px 0 } .featured a { width: calc(50% - 10px) } .featured a:nth-of-type(2n+1) { margin: 10px 10px 10px 0 !important } .featured a:nth-of-type(2n+2) { margin: 10px 0 10px 10px !important } .banner a { max-width: none } .banner span { margin-top: 0; } aside, section { display: block; width: auto } aside { padding: 0 10px } aside li { display: inline-block; vertical-align: middle; width: 45%; padding: 0 2% } aside a { text-align: center } } @media(max-width:600px) { nav li { width: calc(33% - 16px) } nav a { text-align: center } section #blogs .postThumbnail{float:none;margin:0;max-width:100%;width:auto;height:250px} .blog #posts{grid-template-columns:1fr} } @media(max-width:500px) { .banner p:last-of-type { display: none } .banner a { display: block; } .banner span { box-shadow: 4px 4px 8px rgba(0,0,0,.3) } footer ul { display: block; width: auto; margin: 30px 0 } .featured h3 span { display: block } section > .imgRight { float: none; max-width: 100%; margin: 12px auto } .table.half > div { display: block; width: auto; padding: 0 !important } .subfoot p { text-align: center !important } aside li { display: block; width: auto } .cloud .table.third > div { display: block !important; width: 100%; } .cloud .header { max-height: 250px; } } @media(max-width:400px) { nav li { width: calc(50% - 16px) } .top li:first-of-type { display: block; padding: 0; border: none; text-align: center; font-size: 22px } .top li:nth-of-type(2) { padding-left: 0 } .top a { margin: 8px } .banner h1 { font-size: 28px } .cloud .header { max-height: 315px; } .banner span{font-size:14px} }