body { font-size: 1.5rem; line-height: 1.75em; letter-spacing: 0.01rem; color: #424242; } li { margin-bottom: 10px; } h1 { font-size: 3em; line-height: 1.2em; } h2 { font-size: 2.6em; line-height: 1.2em; padding-top: 5px; margin-bottom: 22px; } h3 { font-size: 1.8em; line-height: 1.1em; margin-bottom: .7em; } .post-block h3 { font-size: 1.8em; } h4 { font-size: 1.4em; } h5 { font-size: 1em; } p { color: #424242; } .flexslider.home-banner { margin-bottom: 0; border: none; } #header .header-logo svg { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; margin: 15px 15px 15px 0; top: 0; } svg .st0 { fill: #2B40B5; } svg .st1 { fill: #1475CF; } svg .st2 { fill: #1C1275; } svg .st3 { fill: none; stroke: #2B40B5; stroke-width: 0.216; stroke-miterlimit: 2.6131; } div.main-title { height: 650px; background-position: top right; background-size: contain; background-repeat: no-repeat; text-align: left; padding: 30px 0 0 0; } .home-banner .flex-control-nav { z-index: 99; bottom: 40px; text-align: left; } .flexslider.home-banner .flex-control-nav a.flex-active { color: #fff !important; background: #fff !important; border: 2px solid #fff !important; } .flexslider.home-banner .flex-control-nav a { color: #fff !important; border: 2px solid #fff !important; background: none; box-shadow: none; } .inner-banner { position: relative; top: 45%; transform: perspective(1px) translateY(-50%); max-width: 1200px; margin: auto; } /* ----- SVG Icons - svgicons.sparkk.fr ----- */ .svg-icon { width: 4em; height: 4em; } .svg-icon path, .svg-icon polygon, .svg-icon rect { fill: #4691f6; } .svg-icon circle { stroke: #4691f6; stroke-width: 1; } /* ---- END SVG---- */ header { box-shadow: 1px 1px 1px #ccc; } #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span { font-size: 0.8em; color: #424242; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { color: #424242; } #footer { font-size: .8em; } .main-title h1 { color: #ffffff; font-size: 3.1em; font-weight: 400; line-height: 1.1em; width: 55%; } .header-placement .main-title h2 { text-align: right; font-size: 24px; text-transform: none; text-shadow: 0px 4px 6px #424242; margin: 0; } .main-title h2 { font-size: 1.9em; line-height: 1.5em; color: #ffffff; width: 45%; } .main-title > .btn, .header-placement .btn:hover { text-shadow: none; clear: both; } .main-title p.excerpt { color: #ffffff; width: 50%; } ul.nav li { margin-bottom: 0; } ul.dropdown li { margin-bottom: 0; } section.section-headline { background-color: #000; border: 0; padding: 15px 0; } section.section-headline a { color: #fff; } .post img { display: block; margin: 0 auto; max-width: 100%; border-radius: 4px; } .posts h4 a:hover { text-decoration: inherit; } .social-icons li { font-size: .8em; } .call-to-action p { font-size: 1.2em; } .text-default { color: #424242; } .call-to-action.call-to-action-in-footer { margin-bottom: 0 !important; } .call-to-action-dark .call-to-action-block { border-bottom: 7px solid #2e353e; } .call-to-action-block a.text-light:hover { text-decoration: none; color: #ccc !important; } .call-to-action-block:hover { border-bottom: 7px solid #2A78BE; } /** Begin Social Button CSS **/ .socialize { text-align: center; float: right; } .share-btn { display: inline-block; color: #ffffff; border: none; padding: 0.1em; width: 2em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); outline: none; text-align: center; margin: 0 5px; } .share-btn:hover { color: #eeeeee; } .share-btn:active { position: relative; top: 2px; box-shadow: none; color: #e2e2e2; outline: none; } .share-btn.twitter { background: #55acee; } .share-btn.google-plus { background: #dd4b39; } .share-btn.reddit { background: #ff5700; } .share-btn.facebook { background: #3B5998; } .share-btn.linkedin { background: #4875B4; } .share-btn.email { background: #444444; } article.post .post-meta i { margin-right: 0; } /** end Social Button CSS **/ .btn-default { background-color: transparent; } html .btn-borders.btn-white { border-color: #FFFFFF; color: #FFFFFF; } html .btn-borders.btn-primary:hover:hover, html .btn-borders.btn-primary:focus:hover { background-color: #2A78BE; } .btn-borders.btn-success:hover { background-color: #47a447; } .btn-borders.btn-default:hover { background-color: #adadad; } html .btn-primary[disabled] { border-color: #383f48; background-color: #383f48; } .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { background-color: #383f48; border-color: #383f48; } .select-style { border: 1px solid #ccc; border-radius: 3px; overflow: hidden; background: #fafafa url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDg2LjAwMSA4Ni4wMDEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDg2LjAwMSA4Ni4wMDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8cGF0aCBkPSJNNS45MDcsMjEuMDA0Yy0xLjM1Mi0xLjMzOC0zLjU0Mi0xLjMzOC00Ljg5NCwwYy0xLjM1LDEuMzM2LTEuMzUyLDMuNTA2LDAsNC44NDRsMzkuNTQsMzkuMTUgICBjMS4zNTIsMS4zMzgsMy41NDIsMS4zMzgsNC44OTQsMGwzOS41NC0zOS4xNWMxLjM1MS0xLjMzOCwxLjM1Mi0zLjUwNiwwLTQuODQ0Yy0xLjM1Mi0xLjMzOC0zLjU0Mi0xLjMzOC00Ljg5NC0wLjAwMkw0Myw1Ni43MDcgICBMNS45MDcsMjEuMDA0eiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat 90% 50%; } .select-style select { padding: 5px 8px; width: 100%; border: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; } .select-style select:focus { outline: none; } .select-style select:disabled { opacity: .5; } .product-banner { min-height: 555px; padding-bottom: 15px; } .product-title { padding-top: 50px; font-size: 22px; margin: 25px; color: #000; } .product-name { font-size: 52px; margin: 25px; color: #000; font-weight: bold; } .product-nickname { font-size: 32px; margin: 25px; color: #000; font-weight: bold; } .product-tagline { font-size: 25px; margin: 25px; color: #000; } .product-price { font-size: 32px; } table.product-table a:hover { text-decoration: none; } .heading.heading-middle-border-dark h1, .heading.heading-middle-border-dark h2, .heading.heading-middle-border-dark h3, .heading.heading-middle-border-dark h4, .heading.heading-middle-border-dark h5, .heading.heading-middle-border-dark h6 { background: #f4f4f4; } html h1.heading-tertiary, html h2.heading-tertiary, html h3.heading-tertiary, html h4.heading-tertiary { color: #3c763d !important; } .measure { width: 60%; margin: 0 auto; } #map-legend { font-family: Arial, sans-serif; background: #fff; padding: 5px; margin: 10px; border: 1px solid #000; } #map-legend h3 { margin: 0; font-size: 12px; text-align: center; } #map-legend img { vertical-align: middle; max-width: 20px; } ul.sort-source { list-style: none; padding-left: 0; } ul.sort-source li { margin-bottom: 0; } ul.sort-source > li.country-list, ul.sort-source > li.model-list { cursor: pointer; border-bottom: 1px solid #ededed; padding: 10px 0 10px; line-height: 20px; font-size: 18px; } ul.sort-source > li.country-list > a:hover, ul.sort-source > li.country-list > a, ul.sort-source > li.model-list > a:hover, ul.sort-source > li.model-list > a { text-decoration: none; } ul.sort-source > li.country-list > ul { list-style: none; padding-left: 25px; font-size: 14px; padding-top: 5px; } ul.sort-source > li.country-list > ul > li > a { color: #777; text-decoration: none; } ul.sort-source > li.country-list > ul > li > a:hover { text-decoration: none; color: #2A78BE; } .thumb-info-caption .thumb-info-caption-text, .thumb-info-caption p { font-size: 1em; } h2.heading-cascade { line-height: 38px; margin-bottom: 22px; } .heading-cascade .heading-cascade__step { display: block; font-size: 22px; color: #2A78BE; } section.page-header.custom-product { min-height: 300px; } .page-header .custom-product h1 { line-height: 130%; font-size: 46px; } .image-holder img { max-width: 100%; } ul { padding-left: 30px; } table.table { font-size: .9em; } .product-table { font-size: 12px; color: #737c85; } .product-table thead tr { background-color: #BDBDBD; } .product-table tr, .striped-table tr { background-color: #EEEEEE; } .product-table tr:nth-child(even), .striped-table tr:nth-child(even) { background-color: #FAFAFA; } .product-table tbody > tr > td, .striped-table tbody > tr > td { border: none; vertical-align: middle; line-height: 1.7; padding: 30px 20px; } .product-table thead > tr > th { font-weight: normal; border: none; padding: 30px 20px; font-size: 14px; color: #37474F; } .product-table tbody tr th { background-color: #fff; border: 1px solid #ddd; font-weight: 400; padding-top: 20px; padding-bottom: 20px; } .striped-table tbody tr th, .striped-table tbody tr td { padding-left: 15px; } .product-table .table-main { font-weight: bold; text-transform: uppercase; } .label.label-sm { font-size: .6em; } section.page-header h1 { font-size: 2.1em; line-height: 1.2em; width: 80%; border-bottom: none; } .blog-posts article { padding-bottom: 45px; margin-bottom: 35px; } .post-meta { margin-top: 8px; font-size: 1em; margin-right: 50px; } article.post-large { margin-left: 0; padding-bottom: 20px; margin-bottom: 20px; } article.post-large h2 { margin-bottom: 20px; } article.post .post-meta { font-size: 1em; margin-bottom: 20px; margin-top: 0; padding-top: 15px; border-top: 1px solid #ccc; } article.post .post-date { line-height: 1.4em; } .tagline.post-meta { font-size: 1.3em; min-height: 22px; } .img-circle { border: 1px solid #ccc; padding: 1px; } .post-meta span { margin-right: 8px; } .page-header .breadcrumb.breadcrumb-valign-mid { font-size: 1.4em; margin-right: 100px; } .single-post article.post-large { margin-left: 0; } .page-header .breadcrumb > li { font-size: .75em; } a.anchor { top: -75px; display: block; position: relative; visibility: hidden; } .videoWrapper { position: relative; padding-bottom: 53.25%; padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #desc { text-align: center; padding: 15px; background: #F5F5F5; border: 1px solid #E0E0E0; } .load .thumb { max-width: 100%; border: 1px solid #E0E0E0; } section.clients div.image-holder { text-align: center; } /* START CODE HIGHLIGHTING */ .highlight { background: #ffffff; } .highlight .c { color: #999988; font-style: italic; } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2; } /* Error */ .highlight .k { font-weight: bold; } /* Keyword */ .highlight .o { font-weight: bold; } /* Operator */ .highlight .cm { color: #999988; font-style: italic; } /* Comment.Multiline */ .highlight .cp { color: #999999; font-weight: bold; } /* Comment.Preproc */ .highlight .c1 { color: #999988; font-style: italic; } /* Comment.Single */ .highlight .cs { color: #999999; font-weight: bold; font-style: italic; } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ .highlight .gd .x { color: #000000; background-color: #ffaaaa; } /* Generic.Deleted.Specific */ .highlight .ge { font-style: italic; } /* Generic.Emph */ .highlight .gr { color: #aa0000; } /* Generic.Error */ .highlight .gh { color: #999999; } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted */ .highlight .gi .x { color: #000000; background-color: #aaffaa; } /* Generic.Inserted.Specific */ .highlight .go { color: #888888; } /* Generic.Output */ .highlight .gp { color: #555555; } /* Generic.Prompt */ .highlight .gs { font-weight: bold; } /* Generic.Strong */ .highlight .gu { color: #aaaaaa; } /* Generic.Subheading */ .highlight .gt { color: #aa0000; } /* Generic.Traceback */ .highlight .kc { font-weight: bold; } /* Keyword.Constant */ .highlight .kd { font-weight: bold; } /* Keyword.Declaration */ .highlight .kp { font-weight: bold; } /* Keyword.Pseudo */ .highlight .kr { font-weight: bold; } /* Keyword.Reserved */ .highlight .kt { color: #445588; font-weight: bold; } /* Keyword.Type */ .highlight .m { color: #009999; } /* Literal.Number */ .highlight .s { color: #d14; } /* Literal.String */ .highlight .na { color: #008080; } /* Name.Attribute */ .highlight .nb { color: #0086B3; } /* Name.Builtin */ .highlight .nc { color: #445588; font-weight: bold; } /* Name.Class */ .highlight .no { color: #008080; } /* Name.Constant */ .highlight .ni { color: #800080; } /* Name.Entity */ .highlight .ne { color: #990000; font-weight: bold; } /* Name.Exception */ .highlight .nf { color: #990000; font-weight: bold; } /* Name.Function */ .highlight .nn { color: #555555; } /* Name.Namespace */ .highlight .nt { color: #000080; } /* Name.Tag */ .highlight .nv { color: #008080; } /* Name.Variable */ .highlight .ow { font-weight: bold; } /* Operator.Word */ .highlight .w { color: #bbbbbb; } /* Text.Whitespace */ .highlight .mf { color: #009999; } /* Literal.Number.Float */ .highlight .mh { color: #009999; } /* Literal.Number.Hex */ .highlight .mi { color: #009999; } /* Literal.Number.Integer */ .highlight .mo { color: #009999; } /* Literal.Number.Oct */ .highlight .sb { color: #d14; } /* Literal.String.Backtick */ .highlight .sc { color: #d14; } /* Literal.String.Char */ .highlight .sd { color: #d14; } /* Literal.String.Doc */ .highlight .s2 { color: #d14; } /* Literal.String.Double */ .highlight .se { color: #d14; } /* Literal.String.Escape */ .highlight .sh { color: #d14; } /* Literal.String.Heredoc */ .highlight .si { color: #d14; } /* Literal.String.Interpol */ .highlight .sx { color: #d14; } /* Literal.String.Other */ .highlight .sr { color: #009926; } /* Literal.String.Regex */ .highlight .s1 { color: #d14; } /* Literal.String.Single */ .highlight .ss { color: #990073; } /* Literal.String.Symbol */ .highlight .bp { color: #999999; } /* Name.Builtin.Pseudo */ .highlight .vc { color: #008080; } /* Name.Variable.Class */ .highlight .vg { color: #008080; } /* Name.Variable.Global */ .highlight .vi { color: #008080; } /* Name.Variable.Instance */ .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */ /* END CODE HIGHLIGHTING */ @media (max-width: 1460px) { div.main-title { background-position: top left; background-size: cover; } } @media (max-width: 991px) { .product-title { padding-top: 10px; } .main-title h2 { width: 70%; } } @media (max-width: 767px) { .product-title { padding-top: 10px; margin: 20px; } .product-name { font-size: 58px; margin: 25px; } .product-nickname { font-size: 32px; margin: 25px; } .product-tagline { font-size: 22px; margin: 25px; line-height: 130%; } .product-price { font-size: 22px; } .btn-responsive { padding: 5px 10px; font-size: 12px; line-height: 1.5; } .main-title h1 { line-height: 1.1em; font-size: 2.5em; width: 100%; } .main-title h2 { line-height: 1.3em; font-size: 1.5em; width: 100%; } .main-title p.excerpt { width: 100%; } .measure { width: 100%; } h1 { font-size: 2.5em; line-height: 1.2em; } h2 { font-size: 2em; line-height: 1.3em; } } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ .product-table table, .product-table thead, .product-table tbody, .product-table th, .product-table td, .product-table tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .product-table thead tr { position: absolute; top: -9999px; left: -9999px; } .product-table tbody > tr { border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .product-table tbody > tr:nth-child(odd) > td { border-bottom: 1px solid #ddd; } .product-table tbody > tr > td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } .appliance-product-table tbody > tr > td:last-child { padding-left: 0; } .product-table tbody > tr > td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ .platform-product-table tbody > tr > td:nth-of-type(1):before { content: "SMALL / BRANCH OFFICE:"; font-weight: bold; padding: 25px 5px; } .platform-product-table tbody > tr > td:nth-of-type(2):before { content: "MEDIUM ENTERPRISE:"; font-weight: bold; padding: 25px 5px; } .platform-product-table tbody > tr > td:nth-of-type(3):before { content: "DATACENTER:"; font-weight: bold; padding: 25px 5px; } .platform-product-table tbody > tr > td:nth-of-type(4):before { content: "LARGE ENTERPRISE:"; font-weight: bold; padding: 25px 5px; } .platform-product-table tbody > tr > td:nth-of-type(5):before { content: "CLOUD PERIMETER:"; font-weight: bold; padding: 25px 5px; } .appliance-product-table tbody > tr > td:nth-of-type(1):before { content: "BEST USED FOR:"; font-weight: bold; padding: 5px; } .appliance-product-table tbody > tr > td:nth-of-type(2):before { content: "PROCESSOR:"; font-weight: bold; padding: 5px; } .appliance-product-table tbody > tr > td:nth-of-type(3):before { content: "RAM:"; font-weight: bold; padding: 5px; } .appliance-product-table tbody > tr > td:nth-of-type(4):before { content: "STORAGE OPTIONS:"; font-weight: bold; padding: 5px; } .appliance-product-table tbody > tr > td:nth-of-type(5):before { content: "PORTS:"; font-weight: bold; padding: 5px; } .appliance-product-table tbody > tr > td:nth-of-type(6):before { content: "PRICE:"; font-weight: bold; padding: 5px; } }