/** * @file * Styles are organized using the SMACSS technique. @see http://smacss.com/book/ * * When you turn on CSS aggregation at admin/config/development/performance, all * of these @include files will be combined into a single file. */ /* Import Sass mixins, variables, Compass modules, etc. */ /* HTML element (SMACSS base) rules */ /* Layout rules */ /** * @file * Positioning for a responsive layout. * * Define CSS classes to create a fluid grid layout with optional sidebars * depending on whether blocks are placed in the left or right sidebars. * * This layout uses the Zen Grids plugin for Compass: http://zengrids.com */ /** * Center the page. * * For screen sizes larger than 1200px, prevent excessively long lines of text * by setting a max-width. */ #page, .region-bottom { margin-left: auto; margin-right: auto; max-width: 1200px; } /* Apply the shared properties of grid items in a single, efficient ruleset. */ #header, #content, #navigation, .region-sidebar-first, .region-sidebar-second, #footer { padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } /* Containers for grid items and flow items. */ #header:before, #header:after, #main:before, #main:after, #footer:before, #footer:after { content: ""; display: table; } #header:after, #main:after, #footer:after { clear: both; } /* Navigation bar */ @media all and (min-width: 480px) { #main { /* Move all the children of #main down to make room. */ padding-top: 3em; position: relative; } #navigation { /* Move the navbar up inside #main's padding. */ position: absolute; top: 0; height: 3em; width: 100%; } } /** * Use 3 grid columns for smaller screens. */ @media all and (min-width: 480px) and (max-width: 959px) { /** * The layout when there is only one sidebar, the left one. */ .sidebar-first { /* Span 2 columns, starting in 2nd column from left. */ /* Span 1 column, starting in 1st column from left. */ } .sidebar-first #content { float: left; width: 200%; margin-left: 100%; margin-right: -300%; } .sidebar-first .region-sidebar-first { float: left; width: 100%; margin-left: 0%; margin-right: -100%; } /** * The layout when there is only one sidebar, the right one. */ .sidebar-second { /* Span 2 columns, starting in 1st column from left. */ /* Span 1 column, starting in 3rd column from left. */ } .sidebar-second #content { float: left; width: 200%; margin-left: 0%; margin-right: -200%; } .sidebar-second .region-sidebar-second { float: left; width: 100%; margin-left: 200%; margin-right: -300%; } /** * The layout when there are two sidebars. */ .two-sidebars { /* Span 2 columns, starting in 2nd column from left. */ /* Span 1 column, starting in 1st column from left. */ /* Start a new row and span all 3 columns. */ } .two-sidebars #content { float: left; width: 200%; margin-left: 100%; margin-right: -300%; } .two-sidebars .region-sidebar-first { float: left; width: 100%; margin-left: 0%; margin-right: -100%; } .two-sidebars .region-sidebar-second { float: left; width: 300%; margin-left: 0%; margin-right: -300%; padding-left: 0; padding-right: 0; clear: left; /* Apply the shared properties of grid items in a single, efficient ruleset. */ /* Span 1 column, starting in the 1st column from left. */ /* Span 1 column, starting in the 2nd column from left. */ /* Span 1 column, starting in the 3rd column from left. */ } .two-sidebars .region-sidebar-second .block { padding-left: 10px; padding-right: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } .two-sidebars .region-sidebar-second .block:nth-child(3n+1) { float: left; width: 100%; margin-left: 0%; margin-right: -100%; clear: left; } .two-sidebars .region-sidebar-second .block:nth-child(3n+2) { float: left; width: 100%; margin-left: 100%; margin-right: -200%; } .two-sidebars .region-sidebar-second .block:nth-child(3n) { float: left; width: 100%; margin-left: 200%; margin-right: -300%; } } /** * Use 5 grid columns for larger screens. */ @media all and (min-width: 960px) { /** * The layout when there is only one sidebar, the left one. */ .sidebar-first { /* Span 4 columns, starting in 2nd column from left. */ /* Span 1 column, starting in 1st column from left. */ } .sidebar-first #content { float: left; width: 400%; margin-left: 100%; margin-right: -500%; } .sidebar-first .region-sidebar-first { float: left; width: 100%; margin-left: 0%; margin-right: -100%; } /** * The layout when there is only one sidebar, the right one. */ .sidebar-second { /* Span 4 columns, starting in 1st column from left. */ /* Span 1 column, starting in 5th column from left. */ } .sidebar-second #content { float: left; width: 400%; margin-left: 0%; margin-right: -400%; } .sidebar-second .region-sidebar-second { float: left; width: 100%; margin-left: 400%; margin-right: -500%; } /** * The layout when there are two sidebars. */ .two-sidebars { /* Span 3 columns, starting in 2nd column from left. */ /* Span 1 column, starting in 1st column from left. */ /* Span 1 column, starting in 5th column from left. */ } .two-sidebars #content { float: left; width: 300%; margin-left: 100%; margin-right: -400%; } .two-sidebars .region-sidebar-first { float: left; width: 100%; margin-left: 0%; margin-right: -100%; } .two-sidebars .region-sidebar-second { float: left; width: 100%; margin-left: 400%; margin-right: -500%; } } /* Component (SMACSS module) rules */ /** * @file * SMACSS Modules * * Adds modular sets of styles. * * Additional useful selectors can be found in Zen's online documentation. * https://drupal.org/node/1707736 */ /** * Wireframes. */ .with-wireframes #header, .with-wireframes #main, .with-wireframes #content, .with-wireframes #navigation, .with-wireframes .region-sidebar-first, .with-wireframes .region-sidebar-second, .with-wireframes #footer, .with-wireframes .region-bottom { outline: 1px solid #ccc; } /** * Accessibility features. */ /* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .element-invisible, .element-focusable, #navigation .block-menu .block__title, #navigation .block-menu-block .block__title { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Turns off the element-invisible effect. */ .element-focusable:active, .element-focusable:focus { position: static !important; clip: auto; height: auto; width: auto; overflow: auto; } /* * The skip-link link will be completely hidden until a user tabs to the link. */ #skip-link { margin: 0; } #skip-link a, #skip-link a:visited { display: block; width: 100%; padding: 2px 0 3px 0; text-align: center; background-color: #666; color: #fff; } /** * Branding header. */ /* Wrapping link for logo. */ .header__logo { float: left; /* LTR */ margin: 0; padding: 0; } /* Logo image. */ .header__logo-image { vertical-align: bottom; } /* Wrapper for website name and slogan. */ .header__name-and-slogan { float: left; } /* The name of the website. */ .header__site-name { margin: 0; font-size: 2em; line-height: 1.5em; } /* The link around the name of the website. */ .header__site-link:link, .header__site-link:visited { color: #000; text-decoration: none; } .header__site-link:hover, .header__site-link:focus { text-decoration: underline; } /* The slogan (or tagline) of a website. */ .header__site-slogan { margin: 0; } /* The secondary menu (login, etc.) */ .header__secondary-menu { float: right; /* LTR */ } /* Wrapper for any blocks placed in the header region. */ .header__region { /* Clear the logo. */ clear: both; } /** * Navigation bar. */ #navigation { /* Sometimes you want to prevent overlapping with main div. */ /* overflow: hidden; */ /* Main menu and secondary menu links and menu block links. */ } #navigation .block { margin-bottom: 0; } #navigation .links, #navigation .menu { margin: 0; padding: 0; text-align: left; /* LTR */ } #navigation .links li, #navigation .menu li { /* A simple method to get navigation links to appear in one line. */ float: left; /* LTR */ padding: 0 10px 0 0; /* LTR */ list-style-type: none; list-style-image: none; } /** * Breadcrumb navigation. */ .breadcrumb ol { margin: 0; padding: 0; } .breadcrumb li { display: inline; list-style-type: none; margin: 0; padding: 0; } /** * Titles. */ .page__title, .node__title, .block__title, .comments__title, .comments__form-title, .comment__title { /* Comment title. */ margin: 0; } /** * Messages. */ .messages, .messages--status, .messages--warning, .messages--error { margin: 1.5em 0; padding: 10px 10px 10px 50px; /* LTR */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD6UlEQVR42s2WX0xbVRzH3YwmC4k+GF/0ZS/S267/bmnX9nL7bwstZlnbjTDYyoC5GCbB0ZW5pdJCe6swbLFA6bpWIGuRMWVjKGP+21QW3SZBSAjGh4XEaTZTH82Cm/3ztS2xs7mw4KLRk3xyzj33/H6fe5Pz7zEA/yr/vUDukj9FH6drqTaqT8EoPs/UV+nX6TD1BlUh9AqLHlmgPKLcRHmoCOWmElK/FOKTYpS8UwLJkASiUyLI3pKhlClN0g46qj+qL/pbArlbrlO1q25JeiSgR2iYJ8ywXLSg/qP6LNl2ro8+Q4MMkKCd9K2t3q3KdQnkXXIF5aISkgEJzONm1F2qW52pDJN1MI2bUBIuAdVOJWSMTPNQgX6/vkjVpvpREpag6oMqWCYta1IzbsHh9ga0RJtzY8URMdRO9U/KSuWmNQUqh2pY3CtG+fvlqJyofMAFNrZAE+7e/RWR4X4cD9tgOGsA2U2CdtMDqwqyMyIzQ5KKqAKmcyaYxkzYd3YvjGNGFtXRPRj58DT+LOemRrFnrBLyITmUDmUyO/NYgu2d26ukHVJo3tXAMGpAs+cQmh0NeClan30uwN7TgnQ6nRd4r3thOGOAJqYB2UVC79AfZAnKHGUxQa8A2tNaNLW/jKvXv8Dyb8s4yryKA4O10A3roIvpUB+swTdz1/LJZ27PQBvT5lBH1RD4BChzlQ2wBNtc22aE/ULQgzRCl4P5BPcT93GMOYz9wb2QhCRgAq35d8u/L2PXe7tADVGgBlcQ+AXQtmlvsP/gzbJZvp8PMkJCFBYh8m0knyiVSsHe0YIGZz1+/uVOvt8z7QGvnwf+ST5EIRHIUyR4fh50rbp5lsDcYR4ReAXgBrng9q/Qfa0bfy035r7Ot2dvz4IX4IEIEAXwvDzscOw4zxJUd1YfEXlE4Aa4BQHMlwzSSBeI7iXvoTxWDqKPYCFsFaKmr+YVliB0JfS89DVpiuhlB9k/tSOZTuYFvq98yI7L0/MAsVWcGp0bfW61hbahwltxSeARsIKyWKesSKQSWIwvYkvvllwfx88pgOvhwthu/AzAxlVX8vz385tLbaVxwpcLZtEw0QDjsBGctzksiE4CimZFfHp++oWHbnbuUfdB0komMgHsRN1r0MWBsEmYODF5onY92/UTwcvBxuzXcN1ccHycVSn2FaPYWwzCQUDWKIt7z3utAJ5c74Hz+OLSomynY+cVfiM/xW3JiDyZpB3FuZrj4oCwE+Ad4qWMjPHjpTtL0mzMoxyZz9yM39Q7Y85Ok930icqm+k59TL2wm9l90dZv8y/8sPAigGf/iUN/Q4anM2zOsdLe+L+4VfwBVVjDs2rTYx0AAAAASUVORK5CYII='); background-position: 8px 8px; /* LTR */ background-repeat: no-repeat; border: 1px solid #be7; } .messages--warning { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACuElEQVRIiWP4//8/Ay0xSYqntTpnT252zqeJBf0Njhsykrz/pyd6/e9vcNpGVQv6q2wlm0qc/r0+IPD/3UG+/61l9v9mdrjIUc2C7hqHUzc3S///eZwBjO9tF/vfWe1wjioWTKixVm8otPn38wQT3IKfxxn/t5Va/utpsNSg2ILWcttrNzdJgQ3+dpQRjEHs+9tE/zeXWt+gyILOamuTqlxrsOtPLub+7+emBsSq/88v5wL7oqHQ9H9nmbkF2RbUF1rev7lJEuziuU3i/90ddcB4UZsoJC62ifyvK7R4QJYFrcUGrmUZ5v9hYb9hosh/bzcDMN42VRgeF9W5hv8bi/XdSbagKtfs2c1NEvCIPbaQ/7+/pwkYn17Ki0hR24T/l2eZPCfJgsZ83dCiNOP/yCnn7iau/8G+5mD8aBsHSoqqyNL9X5erHUm0BcVpRm9ubhZHMoTh/4eDzP/DA23+RwTZ/P96hAlF7t5Wof8FyfpvibKgNk8noyDZ4D9quofg1Bjr/1kJlhjiIF+Upmn/r83RzCJoQXaC3qcbm8SwGMLwvybP/H8jMGlik7u7VeB/Zqz2J7wWVGdr1uTG62J1PQgfWST1/+hiCaxyIF8UJqv9r8hQrcVpQVqkzrcbG0WwGvB2H/P/lnx5MAaxsam5vYn3f2KY+jesFpSlqfZnxWjidP2OGWL/g/0swBjExu4Lhv958Ur/i5KU+lEsCA1lYI4JUv95bZ0gTo2Pt3P+z0myBmMQG5e6mxu4/kf4Kf8EmQm3oCRNebKrvSawIGPBqRG9sMOp5hjjfwdrlf/58bKT4RaUpWvtcLZV/39iscD/H0AFP46jYwYiMeP/44u4/9tbKQODSXUH3II9G7v18hI0n8YGKv+IDVT6joxj/BVx4mgcOCde/SnITPRUJAHEGlTCEkQV19TAAN8FC67hZdFXAAAAAElFTkSuQmCC'); border-color: #ed5; } .messages--error { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACpElEQVR42rWWTUgbQRiGQ0Tx4MWDeFM8eBA9iKAoggiCoCiiIiL4L3oQV1CJB0UEf6iRYFpK7UniTw9VSqL2kvQsVDBpSZrtRo35czVNW3oprRf17exSl4yzu1ikAy9h59vvedhkMrMGAGoxknAk2w8MJ/WosXThiZkZt9jdLeglPjn5ATc3mhJNuNjbK0QbG3ExMICL/n6IfX0gcxB7ekDAELu6IHZ2IlJbi1hLS1BLogmPtbUhMTv7oMSamzUlqnByMxLT0/8STQkDj9TV4ZLj5OysrODl8jIu5Gs68dFR7JG6dWkJ0fFx+TpSX89IDMnwcHU1yKec12Yz3rlc4HkeLwjkXJpPip3U3+7vIx6P4ymph4eG5PlwTQ0lMdytlmBxMWKtrXLeT0zA5XTibvj9fjxfXETkb/3N/Dz2dneVuiTZtliU/rPSUsQ5ziuxZYG03IIlJdKKUPJjdRUAKMmzuTnskB/VYbdTtd9HR4g2NCi9Z2VliDY1BSnBaUEBzsrLqXyzWCiQ9HU5HA4afniIUFWV0hOqqMBpURErOM7NxWlhIZOvCwvA7S3Uxq+DA5AnZ3pO8vJYQSArC8c5Oeqx2Rj4udeLQH6+6v2B7GxW8DkjA0JmJpONwUHY7XZGIAgCzCYTeJUewmIFfqMRfEoKlQ2yJbza2oLWcLvdeDI2hk/3+iQWKzAYkJzNjg5srq9TwJ9OJ76YTNScx+ORJT66X1/grKyEbW2NgfPp6XKd/JMZySrHaQsSU1Oe+0/w3WpVgyu5HBlR6lc+H8gioevDwz6JrWwV5+3txyoSFk5DcOX1MnCyJ4Vwfb1zt1UY9SR8aioDpuppaVpwZbPTl+hHF04dOKzk8XBF8DgJC3/woU/W/EciOtELOWi8DDwp//215Q+p7kiKh2lQSAAAAABJRU5ErkJggg=='); border-color: #ed541d; } .messages__list { margin: 0; } .messages__item { list-style-image: none; } /* Core/module installation error messages. */ .messages--error p.error { color: #333; } /* System status report. */ .ok, .messages--status { background-color: #f8fff0; color: #234600; } .warning, .messages--warning { background-color: #fffce5; color: #840; } .error, .messages--error { background-color: #fef5f1; color: #8c2e0b; } /** * Tabs. */ /* Basic positioning styles shared by primary and secondary tabs. */ .tabs-primary, .tabs-secondary { overflow: hidden; *zoom: 1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmJiYmJiIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(100%, #bbbbbb), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(bottom, #bbbbbb 1px, rgba(0, 0, 0, 0) 1px); background-image: -webkit-linear-gradient(bottom, #bbbbbb 1px, rgba(0, 0, 0, 0) 1px); background-image: linear-gradient(to top, #bbbbbb 1px, rgba(0, 0, 0, 0) 1px); /* IE 9 and earlier don't understand gradients. */ list-style: none; border-bottom: 1px solid #bbb \0/ie; margin: 1.5em 0; padding: 0 2px; white-space: nowrap; } .tabs-primary__tab, .tabs-primary__tab.is-active, .tabs-secondary__tab, .tabs-secondary__tab.is-active { float: left; /* LTR */ margin: 0 3px; } a.tabs-primary__tab-link, a.tabs-primary__tab-link.is-active, a.tabs-secondary__tab-link, a.tabs-secondary__tab-link.is-active { border: 1px solid #e9e9e9; border-right: 0; border-bottom: 0; display: block; line-height: 1.5em; text-decoration: none; } /* Primary tabs. */ .tabs-primary__tab, .tabs-primary__tab.is-active { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; text-shadow: 1px 1px 0 #fff; border: 1px solid #bbb; border-bottom-color: transparent; /* IE 9 and earlier don't understand gradients. */ border-bottom: 0 \0/ie; } .tabs-primary__tab.is-active { border-bottom-color: #fff; } a.tabs-primary__tab-link, a.tabs-primary__tab-link.is-active { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; color: #333; background-color: #dedede; letter-spacing: 1px; padding: 0 1em; text-align: center; } a.tabs-primary__tab-link:hover, a.tabs-primary__tab-link:focus { background-color: #e9e9e9; border-color: #f2f2f2; } a.tabs-primary__tab-link:active, a.tabs-primary__tab-link.is-active { background-color: transparent; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#00E9E9E9'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, rgba(233, 233, 233, 0))); background-image: -moz-linear-gradient(#e9e9e9, rgba(233, 233, 233, 0)); background-image: -webkit-linear-gradient(#e9e9e9, rgba(233, 233, 233, 0)); background-image: linear-gradient(#e9e9e9, rgba(233, 233, 233, 0)); border-color: #fff; } /* Secondary tabs. */ .tabs-secondary { font-size: .9em; /* Collapse bottom margin of ul.primary. */ margin-top: -1.5em; } .tabs-secondary__tab, .tabs-secondary__tab.is-active { margin: 0.75em 3px; } a.tabs-secondary__tab-link, a.tabs-secondary__tab-link.is-active { -moz-border-radius: 0.75em; -webkit-border-radius: 0.75em; border-radius: 0.75em; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; text-shadow: 1px 1px 0 #fff; background-color: #f2f2f2; color: #666; padding: 0 .5em; } a.tabs-secondary__tab-link:hover, a.tabs-secondary__tab-link:focus { background-color: #dedede; border-color: #999; color: #333; } a.tabs-secondary__tab-link:active, a.tabs-secondary__tab-link.is-active { text-shadow: 1px 1px 0 #333; background-color: #666; border-color: #000; color: #fff; } /** * Inline styles. */ /* List of links generated by theme_links(). */ .inline { display: inline; padding: 0; } .inline li { display: inline; list-style-type: none; padding: 0 1em 0 0; /* LTR */ } /* The inline field label used by the Fences module. */ span.field-label { padding: 0 1em 0 0; /* LTR */ } /** * "More" links. */ .more-link { text-align: right; /* LTR */ } .more-help-link { text-align: right; /* LTR */ } .more-help-link a { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7UlEQVR42qWTPQqDQBCFcwSPkCNITpAj5AjeIm1uYpkyR7Cy2Mot7OwsBAsRwUKwmOwLGRle3EIy8PyBfZ/z3J2TiPylz8VWWZZpUB40BonRKyizaxkA88MYYiqCEgv4MTvnZJom0VqWRbz3FlJZgLYtqmEY1Lg9r+sKsIXcLSC3AC019H0vqLquLeC5AfiHYSGkcdAJimKIBQiJ4+CO92OAtm0FNc8zOjkMwE5Q63FAtbeg6zpAYvG8BWR7i5qmQYwY4MIHqYhE2DOPQWcGJBQF2XU72ZzyUeZ5GCNt5/hybJgYdAXsq5sOEE/jG6dC5IOqCXTmAAAAAElFTkSuQmCC'); background-position: 0 50%; /* LTR */ background-repeat: no-repeat; padding: 1px 0 1px 20px; /* LTR */ } /** * Pager. */ /* A list of page numbers when more than 1 page of content is available. */ .pager { clear: both; padding: 0; text-align: center; } .pager-item, .pager-first, .pager-previous, .pager-next, .pager-last, .pager-ellipsis, .pager-current { display: inline; padding: 0 0.5em; list-style-type: none; background-image: none; } .pager-item, .pager-first, .pager-previous, .pager-next, .pager-last, .pager-ellipsis { /* A concatenation of several list items using an ellipsis. */ } /* The current page's list item. */ .pager-current { font-weight: bold; } /** * Blocks. */ /* Block wrapper. */ .block { margin-bottom: 1.5em; } /** * Menus. */ .menu__item.is-leaf { list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAD1BMVEX///+/v7+Li4sAAADAwMBFvsw8AAAAAXRSTlMAQObYZgAAAB1JREFUCFtjYAADYwMGBmYVZSDhKAwkFJWhYiAAAB2+Aa/9ugeaAAAAAElFTkSuQmCC'); list-style-type: square; } .menu__item.is-expanded { list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABJJREFUeJxj+MdQw2DBIMAABgAUsAHD3c3BpwAAAABJRU5ErkJggg=='); list-style-type: circle; } .menu__item.is-collapsed { list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABFJREFUCB1jVmCGQClmEWYOAAZ8AMy3HPLXAAAAAElFTkSuQmCC'); /* LTR */ list-style-type: disc; } /* The active item in a Drupal menu. */ .menu a.active { color: #000; } /** * Marker. */ /* The "new" or "updated" marker. */ .new, .update { color: #c00; /* Remove background highlighting from in normalize. */ background-color: transparent; } /** * Unpublished note. */ /* The word "Unpublished" displayed underneath the content. */ .unpublished { height: 0; overflow: visible; /* Remove background highlighting from in normalize. */ background-color: transparent; color: #d8d8d8; font-size: 75px; line-height: 1; font-family: Impact, "Arial Narrow", Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; /* A very nice CSS3 property. */ word-wrap: break-word; } /** * Comments. */ /* Wrapper for the list of comments and its title. */ .comments { margin: 1.5em 0; } /* Preview of the comment before submitting new or updated comment. */ .comment-preview { /* Drupal core will use a #ffffea background. See #1110842. */ background-color: #ffffea; } /* Wrapper for a single comment. */ .comment { /* Comment's permalink wrapper. */ } .comment .permalink { text-transform: uppercase; font-size: 75%; } /* Nested comments are indented. */ .indented { /* Drupal core uses a 25px left margin. */ margin-left: 30px; /* LTR */ } /** * Forms. */ /* Wrapper for a form element (or group of form elements) and its label. */ .form-item { margin: 1.5em 0; /* Pack groups of checkboxes and radio buttons closer together. */ /* Form items in a table. */ /* Highlight the form elements that caused a form submission error. */ /* The descriptive help text (separate from the label). */ } .form-checkboxes .form-item, .form-radios .form-item { /* Drupal core uses "0.4em 0". */ margin: 0; } tr.odd .form-item, tr.even .form-item { margin: 0; } .form-item input.error, .form-item textarea.error, .form-item select.error { border: 1px solid #c00; } .form-item .description { font-size: 0.85em; } .form-type-radio .description, .form-type-checkbox .description { margin-left: 2.4em; } /* The part of the label that indicates a required field. */ .form-required { color: #c00; } /* Labels for radios and checkboxes. */ label.option { display: inline; font-weight: normal; } /* Buttons used by contrib modules like Media. */ a.button { -moz-appearance: button; -webkit-appearance: button; } /* Password confirmation. */ .password-parent, .confirm-parent { margin: 0; } /* Drupal's default login form block. */ #user-login-form { text-align: left; /* LTR */ } /** * OpenID * * The default styling for the OpenID login link seems to assume Garland's * styling of list items. */ /* OpenID creates a new ul above the login form's links. */ .openid-links { /* Position OpenID's ul next to the rest of the links. */ margin-bottom: 0; } /* The "Log in using OpenID" and "Cancel OpenID login" links. */ .openid-link, .user-link { margin-top: 1.5em; } html.js #user-login-form li.openid-link, #user-login-form li.openid-link { /* Un-do some of the padding on the ul list. */ margin-left: -20px; /* LTR */ } #user-login ul { margin: 1.5em 0; } /** * Drupal admin tables. */ form th { text-align: left; /* LTR */ padding-right: 1em; /* LTR */ border-bottom: 3px solid #ccc; } form tbody { border-top: 1px solid #ccc; } form table ul { margin: 0; } tr.even, tr.odd { background-color: #eee; border-bottom: 1px solid #ccc; padding: 0.1em 0.6em; } tr.even { background-color: #fff; } /* Markup generated by theme_tablesort_indicator(). */ td.active { background-color: #ddd; } /* Center checkboxes inside table cell. */ td.checkbox, th.checkbox { text-align: center; } /* Drupal core wrongly puts this in system.menus.css. Since we override that, add it back. */ td.menu-disabled { background: #ccc; } /** * Autocomplete. * * @see autocomplete.js */ /* Suggestion list. */ #autocomplete .selected { background: #0072b9; color: #fff; } /** * Collapsible fieldsets. * * @see collapse.js */ html.js .collapsible .fieldset-legend { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABJJREFUeJxj+MdQw2DBIMAABgAUsAHD3c3BpwAAAABJRU5ErkJggg=='); background-position: 5px 65%; /* LTR */ background-repeat: no-repeat; padding-left: 15px; /* LTR */ } html.js .collapsed .fieldset-legend { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABFJREFUCB1jVmCGQClmEWYOAAZ8AMy3HPLXAAAAAElFTkSuQmCC'); /* LTR */ background-position: 5px 50%; /* LTR */ } .fieldset-legend .summary { color: #999; font-size: 0.9em; margin-left: 0.5em; } /** * TableDrag behavior. * * @see tabledrag.js */ tr.drag { background-color: #fffff0; } tr.drag-previous { background-color: #ffd; } .tabledrag-toggle-weight { font-size: 0.9em; } /** * TableSelect behavior. * * @see tableselect.js */ tr.selected td { background: #ffc; } /** * Progress bar. * * @see progress.js */ .progress { font-weight: bold; } .progress .bar { background: #ccc; border-color: #666; margin: 0 0.2em; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .progress .filled { background-color: #0072b9; background-image: url('../images/progress.gif?1422354455'); } /** * @file * Print styling * * We provide some sane print styling for Drupal using Zen's layout method. */ /** * By importing this CSS file as media "all", we allow this print file to be * aggregated with other stylesheets, for improved front-end performance. */ @media print { /* Underline all links. */ a:link, a:visited { text-decoration: underline !important; /* Don't underline header. */ } a:link.header__site-link, a:visited.header__site-link { text-decoration: none !important; } #content { /* Add visible URL after links. */ /* Only display useful links. */ /* Add visible title after abbreviations. */ } #content a[href]:after { content: " (" attr(href) ")"; font-weight: normal; font-size: 16px; } #content a[href^="javascript:"]:after, #content a[href^="#"]:after { content: ""; } #content abbr[title]:after { content: " (" attr(title) ")"; } /* Un-float the content. */ #content { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Turn off any background colors or images. */ body, #page, #main, #content { color: #000; background-color: transparent !important; background-image: none !important; } /* Hide sidebars and nav elements. */ #skip-link, #toolbar, #navigation, .region-sidebar-first, .region-sidebar-second, #footer, .breadcrumb, .tabs, .action-links, .links, .book-navigation, .forum-topic-navigation, .pager, .feed-icons { visibility: hidden; display: none; } } /* SMACSS theme rules */ /* @import "theme-A"; */ /* @import "theme-B"; */ #admin-menu { z-index: 99999999; } body { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 110%; background-color: #F2F2F2; } body p { line-height: 150%; } body a, body img { border: none; outline: none; } #page { max-width: 1920px; width: 100%; position: relative; } #page:before, #page:after { content: ""; display: table; } #page:after { clear: both; } #main { padding-top: 0; position: relative; background-color: #FFF; } #main h1.page_title { margin: 0; padding: 0; padding-top: 120px; padding-left: 50px; height: 70px; text-transform: uppercase; } #content { padding-left: 0; padding-right: 0; } .homepageMobileContent { display: none; } /******************************************* COMMON *******************************************/ .row_1, .row_2, .row_3, .row_4, .row_5, .row_6 { /* preparation for child to be 100% height */ overflow: hidden; position: relative; width: 100%; } .backgroundImage img, .people_content .views-field-field-personal-image img { width: 100%; height: auto; display: block; } .homepageThumbSubContainerVertical { overflow: hidden; height: 50%; } .servicesCircleReadMore { background: url(../images/common/circle-arrow-orange.png) no-repeat; -o-background-size: 20px 20px; -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; background-size: 20px 20px; width: 20px; height: 20px; cursor: pointer; margin: 50px 10px 0 0; transition-duration: 0.5s; transition-property: transform; transform: rotate(0deg); float: left; } .servicesCircleReadMore.opened { overflow: hidden; transition-duration: 0.5s; transition-property: transform; } .servicesCircleReadMoreText { margin-top: 50px; cursor: pointer; } .case_study_item_content .servicesCircleReadMoreText { margin-top: 65px; cursor: pointer; } .servicesCircleReadMore._90 { transform: rotate(90deg); } .servicesCircleReadMore._180 { transform: rotate(180deg); } /******************************************* HEADER *******************************************/ .menuToolBar { position: fixed; margin: 0 auto; z-index: 99999; width: 100%; max-width: 1920px; } .menuToolBar .menuButton { float: right; z-index: 9999; position: relative; cursor: pointer; } .menuToolBar .menuButton img { width: 65px; height: auto; display: block; } header.show { margin-top: 0px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header.hide { margin-top: -90px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } header { position: absolute; width: 100%; margin-top: -90px; background-color: #fcfcfc; } header .block-title { display: none; } header .header__logo { float: left; width: 16.66667%; margin-left: 0%; margin-right: -16.66667%; padding-left: 40px; margin-top: 12px; } header .header__logo img { width: 40px; height: auto; display: block; } header .header__region { float: right; width: 100%; margin-right: 0%; margin-left: -100%; margin-right: 30px; clear: none; height: 65px; } header .menu { margin-top: 20px; float: right; margin-right: 60px; } header .menu .menu__item.is-leaf { list-style-image: none; list-style-type: none; } header .menu li { float: left; margin-left: 30px; } header .menu li a { text-decoration: none; color: #000000; } header .menu li a.active { color: #F2882D; } /******************************************* FOOTER *******************************************/ footer { margin-top: -1px; background-color: #000000; position: relative; padding: 50px 50px 100px 50px !important; } footer .logo { width: 50px; height: auto; } footer .block-title { display: none; } footer #block-menu-menu-footer-menu { float: right; width: 100%; margin-right: 0%; margin-left: -100%; } footer .menu { display: block; overflow: hidden; float: right; } footer .menu .menu__item.is-leaf { list-style-image: none; list-style-type: none; } footer .menu li { float: left; margin-left: 30px; } footer .menu li a { text-decoration: none; color: #8B8D90; } footer .menu li a.active { color: #8B8D90; } footer .footerSocial { float: right; clear: both; } footer .footerSocial a { margin-left: 10px; } footer .footerSocial a img { width: 28px; height: auto; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } footer .footerSocial a img:hover { opacity: 0.5; } footer .footerCopyright { margin-top: 40px; float: right; clear: both; color: #666666; } footer .footerCopyright a { color: #666666; text-decoration: none; } /******************************************* HOMEPAGE PARALAX *******************************************/ .parallax { z-index: 5; background: url(../images/homepage/home-header-back.jpg) 50% 0 no-repeat fixed; -o-background-size: 1920px auto; -webkit-background-size: 1920px auto; -moz-background-size: 1920px auto; background-size: 1920px auto; color: white; height: 800px; margin: 0 auto; overflow: hidden; padding: 0; } .parallax .c { background: url(../images/homepage/home-header-front.png) 50% 0 no-repeat fixed; -o-background-size: 1920px auto; -webkit-background-size: 1920px auto; -moz-background-size: 1920px auto; background-size: 1920px auto; height: 800px; } .parallax .c .parallaxText { top: 40%; position: relative; } .parallax .c .parallaxText .parallaxTextItem { display: block; overflow: auto; } .parallax .c .parallaxText .parallaxTextItem .field-item { text-align: center; } .parallax .c .parallaxText .title { font-size: 560%; text-transform: uppercase; font-weight: 700; } .parallax .c .parallaxText .description { position: absolute; width: 460px; left: 50%; margin-left: -230px; font-size: 180%; font-family: 'Arapey', serif; font-style: italic; } .parallax .c .parallaxText .description p { line-height: 120%; } .parallax .c .parallaxText .logo { width: 50px; position: absolute; left: 50%; margin-top: 160px; margin-left: -25px; } .parallax .c .parallaxText .logo img { width: 50px; height: auto; } /******************************************* HOMEPAGE *******************************************/ .block_1 span, .block_2 span, .block_3 span, .block_4 span, .block_5 span, .block_6 span, .block_7 span, .block_8 span, .block_9 span, .block_10 span, .block_11 span { display: none; } .block_1:hover span, .block_2:hover span, .block_3:hover span, .block_4:hover span, .block_5:hover span, .block_6:hover span, .block_7:hover span, .block_8:hover span, .block_9:hover span, .block_10:hover span, .block_11:hover span { display: inline; } .homepageContainer { /* row_1 */ } .homepageContainer .homepageThumbSubContainerVertical.block_cs { bottom: 0; } .homepageContainer .block_cs .backgroundImage { background-color: #000000; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink.white { background-color: #FFFFFF; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink.grey { background-color: #D1D3D4; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink { display: block; text-decoration: none; overflow: auto; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink .homepageThumbTextWrapper { padding: 50px 50px 0 50px; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink .homepageThumbTextWrapper .homepageThumbTitle { font-size: 180%; color: #000000; font-weight: 700; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink .homepageThumbTextWrapper .homepageThumbDesc { color: #636466; } .homepageContainer .homepageThumbContainer .homepageThumbContainerLink .circleLink { width: 20px; height: auto; position: absolute; bottom: 40px; } .homepageContainer .homepageThumbContainer .homepageThumbContainerImageZoom .backgroundImage { overflow: hidden; } .homepageContainer .homepageThumbContainer .homepageThumbContainerImageZoom .backgroundImage img { width: 100%; height: auto; display: block; transition: all 0.2s linear; } .homepageContainer .homepageThumbContainer .homepageThumbContainerImageZoom:hover .backgroundImage img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .homepageContainer .homepageThumbContainer .circleLinkCS { position: absolute; z-index: 599; width: 20px; height: auto; margin: 50px; opacity: 0; } .homepageContainer .homepageThumbContainer .homepageThumbTextWrapperFade { position: absolute; width: 440px; opacity: 0; z-index: 999; color: #FFF; padding: 100px 50px 0 50px; } .homepageContainer .homepageThumbContainer .homepageThumbTextWrapperFade .homepageThumbContainerTitle { text-transform: uppercase; margin-bottom: 20px; } .homepageContainer .homepageThumbContainer .homepageThumbTextWrapperFade .homepageThumbContainerCaseStudyTitle { font-size: 270%; font-weight: 700; line-height: 1; } .homepageContainer .homepageThumbContainer .homepageThumbTextWrapperFade a { color: #FFF; text-decoration: none; } .homepageContainer .row_1 .homepageThumbContainerLink { overflow: hidden; height: 100%; position: absolute; } .homepageContainer .row_1 .block_services { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; overflow: hidden; height: 100%; position: absolute; /* 33.33333% white line fix */ width: 33.33334%; margin-right: -33.33334% !important; } .homepageContainer .row_1 .block_services .homepageThumbContainerLink { height: 50%; width: 100%; } .homepageContainer .row_1 .block_cs_1 { float: right; width: 33.33333%; margin-right: 33.33333%; margin-left: -66.66667%; } .homepageContainer .row_1 .block_cs_1 .backgroundImage { width: 100.2%; } .homepageContainer .row_1 .block_people { float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; overflow: hidden; height: 100%; position: absolute; } .homepageContainer .row_2 { margin-top: -4px; } .homepageContainer .row_2 .homepageThumbContainerLink { position: relative; } .homepageContainer .row_2 .block_case_studies { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; } .homepageContainer .row_2 .block_case_studies .homepageThumbSubContainerVertical.bottom .left { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .homepageContainer .row_2 .block_case_studies .homepageThumbSubContainerVertical.bottom .right { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .homepageContainer .row_2 .testimonials_1 { float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; overflow: hidden; height: 100%; position: absolute; background-color: #FFFFFF; } .homepageContainer .row_3 .homepageThumbContainerLink { position: relative; overflow: hidden; height: 100%; } .homepageContainer .row_3 .block_cs { float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; } .homepageContainer .row_3 .block_cs .backgroundImage { width: 100.1%; } .homepageContainer .row_3 .block_clients { float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; overflow: hidden; height: 100%; position: absolute; } .homepageContainer .row_4 { margin-top: -3px; } .homepageContainer .row_4 .block_equipment { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; overflow: hidden; height: 100%; position: absolute; } .homepageContainer .row_4 .block_equipment .homepageThumbSubContainerVerticalContent.left { float: left; width: 50%; margin-left: 0%; margin-right: -50%; position: absolute; height: 50%; } .homepageContainer .row_4 .block_equipment .homepageThumbSubContainerVerticalContent.right { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .homepageContainer .row_4 .block_equipment .block_cs_2 { float: left; width: 100%; margin-left: 0%; margin-right: -100%; position: absolute; bottom: 0; } .homepageContainer .row_4 .testimonials_2 { float: left; width: 33.33333%; margin-left: 33.33333%; margin-right: -66.66667%; overflow: hidden; height: 100%; position: absolute; background-color: #FFFFFF; } .homepageContainer .row_4 .block_cs_1 { float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; } .homepageContainer .row_4 .block_cs_1 .backgroundImage { margin-top: -1px; } /* homepageContainer */ /******************************************* CASE STUDIES / EQUIPMENT / SERVICE *******************************************/ .case_studies_content .views-row-group, .equpment_content .views-row-group, .services_content .views-row-group { overflow: hidden; } .case_studies_content .views-row-odd, .case_studies_content .views-row-odd, .equpment_content .views-row-odd, .equpment_content .views-row-odd, .services_content .views-row-odd, .services_content .views-row-odd { clear: left; float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .case_studies_content .views-row-even, .case_studies_content .views-row-even, .equpment_content .views-row-even, .equpment_content .views-row-even, .services_content .views-row-even, .services_content .views-row-even { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .case_studies_content .views-row.grey, .case_studies_content .views-row.grey, .equpment_content .views-row.grey, .equpment_content .views-row.grey, .services_content .views-row.grey, .services_content .views-row.grey { background-color: #E6E7E8; } .case_studies_content .views-row.grey .case-study-euipment-intro-wrapper, .case_studies_content .views-row.grey .case-study-euipment-intro-wrapper, .equpment_content .views-row.grey .case-study-euipment-intro-wrapper, .equpment_content .views-row.grey .case-study-euipment-intro-wrapper, .services_content .views-row.grey .case-study-euipment-intro-wrapper, .services_content .views-row.grey .case-study-euipment-intro-wrapper { background-color: #E6E7E8; margin-top: -1px; z-index: 9999; position: relative; } .case_studies_content .views-row.white, .case_studies_content .views-row.white, .equpment_content .views-row.white, .equpment_content .views-row.white, .services_content .views-row.white, .services_content .views-row.white { background-color: #FFFFFF; } .case_studies_content .views-row.white .case-study-euipment-intro-wrapper, .case_studies_content .views-row.white .case-study-euipment-intro-wrapper, .equpment_content .views-row.white .case-study-euipment-intro-wrapper, .equpment_content .views-row.white .case-study-euipment-intro-wrapper, .services_content .views-row.white .case-study-euipment-intro-wrapper, .services_content .views-row.white .case-study-euipment-intro-wrapper { background-color: #FFFFFF; margin-top: -1px; z-index: 9999; position: relative; } .case_studies_content .views-row:hover .views-field-field-case-study-main-image img, .case_studies_content .views-row:hover .views-field-field-case-study-image-b img, .equpment_content .views-row:hover .views-field-field-case-study-main-image img, .equpment_content .views-row:hover .views-field-field-case-study-image-b img, .services_content .views-row:hover .views-field-field-case-study-main-image img, .services_content .views-row:hover .views-field-field-case-study-image-b img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .case_studies_content .views-row, .equpment_content .views-row, .services_content .views-row { /* 100% height of parent */ margin-bottom: -99999px; padding-bottom: 99999px; /* images */ /* text */ } .case_studies_content .views-row .views-field-field-case-study-main-image, .case_studies_content .views-row .views-field-field-case-study-image-b, .case_studies_content .views-row .views-field-field-equipment-main-image, .case_studies_content .views-row .views-field-field-service-image, .equpment_content .views-row .views-field-field-case-study-main-image, .equpment_content .views-row .views-field-field-case-study-image-b, .equpment_content .views-row .views-field-field-equipment-main-image, .equpment_content .views-row .views-field-field-service-image, .services_content .views-row .views-field-field-case-study-main-image, .services_content .views-row .views-field-field-case-study-image-b, .services_content .views-row .views-field-field-equipment-main-image, .services_content .views-row .views-field-field-service-image { background-color: #000000; overflow: hidden; } .case_studies_content .views-row .views-field-field-case-study-main-image img, .case_studies_content .views-row .views-field-field-case-study-image-b img, .case_studies_content .views-row .views-field-field-equipment-main-image img, .case_studies_content .views-row .views-field-field-service-image img, .equpment_content .views-row .views-field-field-case-study-main-image img, .equpment_content .views-row .views-field-field-case-study-image-b img, .equpment_content .views-row .views-field-field-equipment-main-image img, .equpment_content .views-row .views-field-field-service-image img, .services_content .views-row .views-field-field-case-study-main-image img, .services_content .views-row .views-field-field-case-study-image-b img, .services_content .views-row .views-field-field-equipment-main-image img, .services_content .views-row .views-field-field-service-image img { width: 100%; height: auto; display: block; transition: all 0.2s linear; } .case_studies_content .views-row .views-field-field-case-study-image-b img, .case_studies_content .views-row .views-field-field-case-study-main-image img, .equpment_content .views-row .views-field-field-case-study-image-b img, .equpment_content .views-row .views-field-field-case-study-main-image img, .services_content .views-row .views-field-field-case-study-image-b img, .services_content .views-row .views-field-field-case-study-main-image img { width: 100.2%; } .case_studies_content .views-row .case-study-euipment-intro-wrapper, .equpment_content .views-row .case-study-euipment-intro-wrapper, .services_content .views-row .case-study-euipment-intro-wrapper { clear: left; float: left; width: 100%; margin-left: 0%; margin-right: -100%; overflow: hidden; padding: 50px 0; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-title, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-title, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-title { clear: left; float: left; width: 100%; margin-left: 0%; margin-right: -100%; font-size: 270%; font-weight: 700; text-transform: uppercase; padding: 20px 0 0 50px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro, .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description, .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-body, .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-body, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-body, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing { clear: left; float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; padding-left: 50px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro p, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro p, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro p { margin-bottom: 20px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-service-intro p, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-service-intro p, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-service-intro p { margin-bottom: -8px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image { clear: left; float: left; width: 83.33333%; margin-left: 0%; margin-right: -83.33333%; margin-top: 30px; padding-left: 50px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content { width: 20px; float: left; margin-right: 10px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content img, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content img, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image .field-content img { width: 20px; height: auto; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link { clear: left; float: left; width: 100%; margin-left: 0%; margin-right: -100%; padding-left: 50px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link a, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link a, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link a { text-decoration: none; color: #A8AAAD; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1 { display: none; } .case_studies_content .views-row a, .equpment_content .views-row a, .services_content .views-row a { color: #000000; } .case_studies_content .views-row a .views-field-field-case-study-main-image, .equpment_content .views-row a .views-field-field-case-study-main-image, .services_content .views-row a .views-field-field-case-study-main-image { float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; width: 66.677% !important; } .case_studies_content .views-row a .views-field-field-case-study-image-b, .equpment_content .views-row a .views-field-field-case-study-image-b, .services_content .views-row a .views-field-field-case-study-image-b { float: left; width: 33.33333%; margin-left: 66.66667%; margin-right: -100%; width: 33.34% !important; } /******************************************* CASE STUDY ITEM *******************************************/ .case_study_item_content .row_2, .case_study_item_content .row_3 { margin-top: -1px; } .case_study_item_content .case_study_block_a { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; overflow: hidden; height: 100%; position: absolute; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper { overflow: hidden; height: 100%; position: absolute; margin: 0 0 50px 50px; width: 80%; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .csBackButton { margin-top: 100px; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .csBackButton a { display: block; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .csBackButton a img { width: 20px; height: auto; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .page_category_title { padding-top: 40px; height: 70px; text-transform: uppercase; font-weight: 700; font-size: 150%; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper h1 { font-size: 270%; margin-bottom: 50px; } .case_study_item_content .case_study_block_b { float: left; width: 66.66667%; margin-left: 33.33333%; margin-right: -100%; } .case_study_item_content .case_study_block_b img { min-width: 1000px; } .case_study_item_content .case_study_block_b .case_study_extra_description { opacity: 0; padding-top: 184px; position: absolute; margin-left: 50px; } .case_study_item_content .case_study_block_b .case_study_extra_description .field-type-text-long { width: 45%; float: left; margin-right: 5%; } .case_study_item_content .case_study_block_b .case_study_extra_description .field-type-text-long p { margin-top: 6px; } .case_study_item_content .case_study_block_c { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; } .case_study_item_content .case_study_block_c .backgroundImage { width: 100.2%; } .case_study_item_content .case_study_block_d { float: left; width: 16.66667%; margin-left: 33.33333%; margin-right: -50%; } .case_study_item_content .case_study_block_d .backgroundImage { width: 100.2%; } .case_study_item_content .case_study_block_d .backgroundImage img { margin-top: -1px; } .case_study_item_content .case_study_block_e { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .case_study_item_content .case_study_block_f { float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .case_study_item_content .case_study_block_g { float: left; width: 50%; margin-left: 50%; margin-right: -100%; text-align: center; display: table; height: 100%; background-color: #FFF; opacity: 0; } .case_study_item_content .case_study_block_g .case_study_testimonial { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } .case_study_item_content .case_study_block_g .case_study_testimonial_title { font-size: 200%; text-transform: uppercase; font-weight: 700; width: 60%; margin: 0 auto; } .case_study_item_content .case_study_block_g .case_study_testimonial_text { color: #939598; font-family: 'Arapey', serif; font-style: italic; font-size: 140%; width: 60%; margin: 0 auto; } .case_study_item_content .case_study_block_g .case_study_testimonial_client { color: #F48A2E; width: 60%; margin: 0 auto; text-transform: uppercase; } /******************************************* CLIENTS *******************************************/ .clients_content .clients_block_a { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .clients_content .clients_block_a img { width: 99%; height: auto; } .clients_content .clients_block_b { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .clients_content .clients_block_b .views-row { width: 31.3333333%; float: left; margin: 0 1% 2% 1%; } .clients_content .clients_block_b .views-row img { margin: 0 auto; display: block; width: 100%; max-width: 300px; height: auto; } /* client logos bottom */ .clientLogosBottom { background-color: #EFEFF0; overflow: auto; } .clientLogosBottom .views-row { width: 12.5%; float: left; } .clientLogosBottom .views-row img { max-width: 220px; width: 100%; margin: 0 auto; height: auto; display: block; } /******************************************* TESTIMNIALS *******************************************/ .testimonials .view .caroufredsel_wrapper .view-content { height: 100% !important; position: static !important; } .testimonials .testimonials-last-three .views-row { margin: 300px 300px 20px 300px; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 300px 100px 20px 100px; } .testimonials .testimonials-all .views-row { width: 60%; margin: 50px 20% 20px 20%; } .testimonials .views-row { float: left; text-align: center; display: block; } .testimonials .views-row .views-field-title { font-size: 270%; text-transform: uppercase; font-weight: 700; } .testimonials .views-row .views-field-field-testimonial-text { color: #939598; font-family: 'Arapey', serif; font-style: italic; font-size: 140%; } .testimonials .views-row .views-field-field-testimonial-text p { line-height: 150%; } .testimonials .views-row .views-field-field-testimonial-client-name { color: #F48A2E; text-transform: uppercase; } .testimonials #pager_1, .testimonials #pager_2, .testimonials #pager_mobile, .testimonials #pager_all { width: 100%; text-align: center; position: absolute; bottom: 20px; } .testimonials #pager_1 span, .testimonials #pager_2 span, .testimonials #pager_mobile span, .testimonials #pager_all span { display: inline-block; text-indent: -99999999px; width: 10px; height: 10px; margin: 0 5px; border: 1px solid #303539; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; cursor: pointer; } .testimonials #pager_1 span.cycle-pager-active, .testimonials #pager_2 span.cycle-pager-active, .testimonials #pager_mobile span.cycle-pager-active, .testimonials #pager_all span.cycle-pager-active { border: 1px solid #F48A2E; background-color: #F48A2E; } /******************************************* PEOPLE *******************************************/ .people_content .view-people-view .views-row { overflow: hidden; position: relative; width: 100%; margin-bottom: -1px; } .people_content .view-people-view .views-row .views-field-nothing { overflow: hidden; height: 100%; position: absolute; padding: 50px 0 0 50px; width: 100%; opacity: 0; z-index: 999; color: #FFFFFF; } .people_content .view-people-view .views-row .views-field-nothing .peopleItemName, .people_content .view-people-view .views-row .views-field-nothing .peopleItemSurname { font-size: 270%; text-transform: uppercase; line-height: 1; } .people_content .view-people-view .views-row .views-field-nothing .peopleItemSurname { padding-bottom: 30px; } .people_content .view-people-view .views-row .views-field-nothing .peopleItemLink { position: absolute; bottom: 120px; height: 30px; background-image: url(../images/common/social-linkedin-white.png); -o-background-size: 26px 26px; -webkit-background-size: 26px 26px; -moz-background-size: 26px 26px; background-size: 26px 26px; background-repeat: no-repeat; } .people_content .view-people-view .views-row .views-field-nothing .peopleItemLink a { color: #FFFFFF; text-decoration: none; margin-left: 34px; margin-top: 4px; display: block; } .people_content .view-people-view .views-row .views-field-field-personal-image { background-color: #000000; width: 100.1%; } .people_content .view-people-view .views-row-1 { float: right; width: 66.66667%; margin-right: 0%; margin-left: -66.66667%; } .people_content .view-people-view .people_small_group_1 { float: left; width: 33.33333%; margin-left: 0%; margin-right: -33.33333%; width: 33.33334% !important; margin-bottom: -1px; } .people_content .view-people-view .views-row-4 { clear: left; float: left; width: 66.66667%; margin-left: 0%; margin-right: -66.66667%; } .people_content .view-people-view .people_small_group_2 { float: right; width: 33.33333%; margin-right: 0%; margin-left: -33.33333%; width: 33.33334% !important; margin-bottom: -1px; } /******************************************* CONTACT *******************************************/ .contact_content .row_1 .contact_block_a { float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .contact_content .row_1 .contact_block_a .phone_email { position: absolute; top: 25%; margin-left: 5%; } .contact_content .row_1 .contact_block_a .phone_email .field-name-field-contact-intro { width: 66%; } .contact_content .row_1 .contact_block_a .phone_email .field-name-field-phone-number { font-size: 365%; } .contact_content .row_1 .contact_block_a .phone_email .field-name-field-phone-number p { margin: 10px 0; } .contact_content .row_1 .contact_block_a .phone_email .field-name-field-phone-number a { color: #000000; text-decoration: none; } .contact_content .row_1 .contact_block_a .phone_email .field-name-field-email a { color: #000000; text-decoration: none; } .contact_content .row_1 .contact_block_a .contactSocial { margin-top: 20px; } .contact_content .row_1 .contact_block_a .contactSocial a { margin-right: 10px; } .contact_content .row_1 .contact_block_a .contactSocial a img { width: 28px; height: auto; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .contact_content .row_1 .contact_block_a .contactSocial a img:hover { opacity: 0.5; } .contact_content .row_1 .contact_block_b { float: left; width: 50%; margin-left: 50%; margin-right: -100%; overflow: hidden; height: 100%; position: absolute; } .contact_content .row_2 { background-color: #E6E7E8; } .contact_content .row_2 .contact_block_c { float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .contact_content .row_2 .contact_block_d { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .contact_content .row_3 { background-color: #FFFFFF; margin-top: 4px; } .contact_content .row_3 .contact_block_e { float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .contact_content .row_3 .contact_block_f { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .contact_content .address_vat { margin-left: 10%; margin-top: 40px; } .contact_content .address_vat a { color: #000000 !important; text-decoration: none; } .contact_content .address_vat .field-name-field-company-reg-vat-numbers { font-size: 80%; color: #939598; position: absolute; } /* map */ #googleMapLondon, #googleMapBrighton { width: 100%; height: 350px; word-wrap: normal; } #googleMapLondon a, #googleMapBrighton a { color: #F28938; text-decoration: none; } /******************************************* RESPONSIVE *******************************************/ /******************************************* 1920 *******************************************/ @media (max-width: 1920px) { body { font-size: 100%; } .parallax { -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } .parallax .c { background: url(../images/homepage/home-header-front.png) 50% 0 no-repeat fixed; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; } .testimonials .views-field-title { font-size: 200% !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 50% 100px 0 100px; } .testimonials .testimonials-last-three .views-field-title { font-size: 300% !important; } } /******************************************* 1700 *******************************************/ @media (max-width: 1700px) { body { font-size: 90%; } .case_study_item_content .page_category_title { padding-top: 70px !important; height: 40px !important; } .case_study_item_content .page__title { margin-bottom: 20px !important; } } /******************************************* 1600 *******************************************/ @media (max-width: 1600px) { body p { line-height: 150%; } .homepageThumbTextWrapper .homepageThumbTitle { font-size: 120% !important; } .homepageThumbTextWrapperFade { width: 300px !important; } .homepageThumbTextWrapperFade .homepageThumbContainerCaseStudyTitle { font-size: 180% !important; } .testimonials .testimonials-last-three .views-row { margin: 230px 200px 20px 200px !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 50% 100px 20px 100px; } .testimonials .testimonials-all .views-row { margin: 30px 20% 20px 20%; } .testimonials .testimonials-all .views-row .views-field-title { font-size: 180% !important; } } /******************************************* 1500 *******************************************/ @media (max-width: 1500px) { .case_study_block_g .case_study_testimonial_title { font-size: 160% !important; width: 80% !important; } .case_study_block_g .case_study_testimonial_text { font-size: 140%; width: 80% !important; } .case_study_block_g .case_study_testimonial_client { width: 80% !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 50% 80px 20px 80px; } } /******************************************* 1400 *******************************************/ @media (max-width: 1400px) { .services_content .views-field-title, .case_studies_content .views-field-title { width: 90% !important; } .case_study_item_main_text_wrapper .page_category_title { padding-top: 20px !important; } .parallaxText .logo { margin-top: 120px !important; } } /******************************************* 1300 *******************************************/ @media (max-width: 1300px) { .homepageThumbContainerLink .homepageThumbTextWrapper { padding: 40px 20px 0 40px !important; } .block_people .homepageThumbDesc { display: none; } .block_cs .homepageThumbTextWrapperFade { padding: 80px 20px 0 40px !important; } .block_cs .circleLinkCS { margin: 40px !important; } .testimonials .testimonials-last-three .views-row { margin: 160px 100px 20px 100px !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 50% 60px 20px 60px; } .testimonials .testimonials-all .views-row { margin: 10px 20% 20px 20% !important; } .testimonials .testimonials-all .views-row .views-field-title { font-size: 160% !important; } } /******************************************* 1200 *******************************************/ @media (max-width: 1200px) { .people_content .peopleItemName, .people_content .peopleItemSurname { font-size: 200% !important; } .people_content .peopleItemLink { bottom: 70px !important; } .case_study_item_main_text_wrapper h1 { font-size: 250% !important; } .testimonials .testimonials-last-three .views-row { width: 60%; margin: 100px 20% 20px 20% !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 40% 40px 20px 40px; } .testimonials .views-field-title { font-size: 200% !important; } .parallaxText .description { margin-top: -20px; } .parallaxText .logo { margin-top: 90px !important; } } /******************************************* 1100 *******************************************/ @media (max-width: 1100px) { body { font-size: 80%; } .menu li { margin-left: 20px !important; } .homepageThumbTextWrapperFade { width: 240px !important; } .case-study-euipment-intro-wrapper .views-field-field-link-image { margin-top: 30px !important; } .people_content .peopleItemName, .people_content .peopleItemSurname { font-size: 160% !important; } } /******************************************* 1024 *******************************************/ /******************************************* RESTRUCTURE HOMEPAGE *******************************************/ .row_6 .testimonials_2 { float: left; width: 50%; margin-left: 50%; margin-right: -100%; height: 500px; } .row_6 .testimonials_2 .views-row { left: 50% !important; margin: 0 !important; } .row_6 .testimonials_2 #pager_2 { margin-left: -25%; } .row_6 .last_cs { float: left; width: 50%; margin-left: 0%; margin-right: -50%; } .row_6 .last_cs .backgroundImage img { margin-top: -1px; } /******************************************* 1024 *******************************************/ /* only iPAD */ @media only screen and (max-device-width: 768px) and (orientation: landscape) { body { font-size: 80%; } .case_study_item_content .page_category_title { font-size: 100% !important; } .case_study_item_content h1 { font-size: 140% !important; margin-bottom: 50px; } .case_study_item_content .case_study_item_main_text_wrapper { width: 70% !important; } .case_study_item_content .case_study_block_b .case_study_extra_description { padding-top: 176px !important; } .case_study_item_content .case_study_block_b img { min-width: 800px; } .parallax { background: url(../images/homepage/home-header-ipad-landscape_final.jpg) 50% 0 no-repeat fixed !important; height: 450px !important; -o-background-size: 140% !important; -webkit-background-size: 140% !important; -moz-background-size: 140% !important; background-size: 140% !important; } .parallax .c { height: 450px !important; background: none !important; } .testimonials { width: 100% !important; } .testimonials .testimonials-last-three .views-row { width: 80%; margin: 50px 10% 20px 10% !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 160px 40px 20px 40px !important; } #googleMapLondon, #googleMapBrighton { height: 300px; } } @media only screen and (max-device-width: 768px) and (orientation: portrait) { /* homepage */ /* row 1 */ .row_1 .block_services { width: 50% !important; } .row_1 .block_cs_1 { width: 50% !important; margin-right: 0% !important; } /* row 2 */ .row_2 .homepageThumbContainerLink { overflow: hidden; height: 100%; position: absolute; } .row_2 .block_people { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .row_2 .block_case_studies { float: right !important; width: 50% !important; margin-right: 0 !important; } /* row 3 */ .row_3 .testimonials { height: 500px; } /* row_5 */ .row_5 .block_clients { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .row_5 .block_clients .homepageThumbContainerLink { overflow: hidden; height: 100%; position: absolute; } .row_5 .block_equipment { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .row_5 .block_equipment .homepageThumbSubContainerVerticalContent.left { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; height: 50%; } .row_5 .block_equipment .homepageThumbSubContainerVerticalContent.right { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .row_5 .block_equipment .homepageThumbTextWrapper { overflow: hidden; height: 100%; position: absolute; height: 86%; width: 33%; } .homepageContainer, .services_content, .case_studies_content, .case_study_item_content, .clients_content, .people_content, .equpment_content, .contact_content { font-size: 110%; } .parallaxText { font-size: 80%; } .parallaxText .description { margin-top: -20px; } .parallaxText .logo { margin-top: 50px !important; } /* clients */ .clients_block_a { float: left; width: 100%; margin-left: 0%; margin-right: -100%; clear: left; width: 100% !important; margin-right: 0 !important; overflow: auto !important; position: relative !important; } .clients_block_a .clientTestimonials { height: 300px !important; } .clients_block_a .clientTestimonials .views-row { margin: 40px 10% 20px 10% !important; width: 80%; } .clients_block_a img { width: 100% !important; } .clients_block_b { clear: right; width: 100% !important; margin: 0 !important; } /* services */ .case_studies_content .views-row, .equpment_content .views-row, .services_content .views-row { width: 100%; } .case_studies_content .views-row-even, .equpment_content .views-row-even, .services_content .views-row-even { margin-left: 0%; margin-right: 0%; } /* case study */ .case_study_item_content .case_study_block_a { float: none; width: 100%; position: relative !important; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper { position: relative !important; } .case_study_item_content .case_study_block_b { float: none; width: 100%; margin-left: 0; } .case_study_item_content .case_study_block_b .case_study_extra_description { padding-top: 40px !important; } .case_study_item_content .case_study_block_c { width: 66.6667%; } .case_study_item_content .case_study_block_d { width: 33.3333%; } .case_study_item_content .case_study_block_d .backgroundImage img { margin: 0; } .case_study_item_content .case_study_block_e { width: 100%; margin: 0; float: none; } .case_study_item_content .case_study_block_f { width: 100%; } .case_study_item_content .case_study_block_g { width: 100%; margin: 0; float: none; position: relative; } .case_study_item_content .case_study_block_g .case_study_testimonial { height: 200px; } /* contact */ .contact_content .contact_block_a { clear: left; float: left; width: 200%; margin-left: 0%; margin-right: -200%; height: 420px; } .contact_content .contact_block_a .backgroundImage img { height: 100%; } .contact_content .contact_block_b { display: none; } .contact_content .contact_block_c, .contact_content .contact_block_e { clear: left; width: 100% !important; position: relative; } .contact_content .contact_block_c { height: 200px; } .contact_content .contact_block_e { height: 300px; } .contact_content .contact_block_d, .contact_content .contact_block_f { clear: left; width: 100% !important; margin-left: 0 !important; } .contact_content .address_vat { margin-left: 5%; } .contact_content #googleMapLondon, .contact_content #googleMapBrighton { height: 300px; } .testimonials { width: 100% !important; } .testimonials .testimonials-last-three .views-row { width: 80%; margin: 50px 10% 20px 10% !important; } .testimonials .testimonials-last-three-skip-three .views-row { margin: 160px 40px 20px 40px !important; } .parallax { background: url(../images/homepage/home-header-ipad-portrait_final.jpg) 50% 0 no-repeat fixed !important; height: 450px !important; -o-background-size: 120% !important; -webkit-background-size: 120% !important; -moz-background-size: 120% !important; background-size: 120% !important; } .parallax .c { background: none !important; height: 450px !important; } /* people */ .people_content .peopleItemPosition { display: none; } } @media only screen and (max-width: 1024px) { .not-touch { /* homepage */ /* row 1 */ /* row 2 */ /* row 3 */ /* row_5 */ /* clients */ /* services */ /* case study */ /* contact */ } .not-touch .row_1 .block_services { width: 50% !important; } .not-touch .row_1 .block_cs_1 { width: 50% !important; margin-right: 0% !important; } .not-touch .row_2 .homepageThumbContainerLink { overflow: hidden; height: 100%; position: absolute; } .not-touch .row_2 .block_people { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .not-touch .row_2 .block_case_studies { float: right !important; width: 50% !important; margin-right: 0 !important; } .not-touch .row_3 .testimonials { height: 500px; } .not-touch .row_5 .block_clients { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; } .not-touch .row_5 .block_clients .homepageThumbContainerLink { overflow: hidden; height: 100%; position: absolute; } .not-touch .row_5 .block_equipment { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .not-touch .row_5 .block_equipment .homepageThumbSubContainerVerticalContent.left { float: left; width: 50%; margin-left: 0%; margin-right: -50%; overflow: hidden; height: 100%; position: absolute; height: 50%; } .not-touch .row_5 .block_equipment .homepageThumbSubContainerVerticalContent.right { float: left; width: 50%; margin-left: 50%; margin-right: -100%; } .not-touch .row_5 .block_equipment .homepageThumbTextWrapper { overflow: hidden; height: 100%; position: absolute; height: 86%; width: 33%; } .not-touch .homepageContainer, .not-touch .services_content, .not-touch .case_studies_content, .not-touch .case_study_item_content, .not-touch .clients_content, .not-touch .people_content, .not-touch .equpment_content, .not-touch .contact_content { font-size: 110%; } .not-touch .parallaxText { font-size: 80%; } .not-touch .parallaxText .description { margin-top: -20px; } .not-touch .parallaxText .logo { margin-top: 50px !important; } .not-touch .clients_block_a { float: left; width: 100%; margin-left: 0%; margin-right: -100%; clear: left; width: 100% !important; margin-right: 0 !important; overflow: auto !important; position: relative !important; } .not-touch .clients_block_a .clientTestimonials { height: 300px !important; } .not-touch .clients_block_a .clientTestimonials .views-row { margin: 40px 10% 20px 10% !important; width: 80%; } .not-touch .clients_block_a img { width: 100% !important; } .not-touch .clients_block_b { clear: right; width: 100% !important; margin: 0 !important; } .not-touch .case_studies_content .views-row, .not-touch .equpment_content .views-row, .not-touch .services_content .views-row { width: 100%; } .not-touch .case_studies_content .views-row-even, .not-touch .equpment_content .views-row-even, .not-touch .services_content .views-row-even { margin-left: 0%; margin-right: 0%; } .not-touch .case_study_item_content .case_study_block_a { float: none; width: 100%; position: relative !important; } .not-touch .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper { position: relative !important; } .not-touch .case_study_item_content .case_study_block_b { float: none; width: 100%; margin-left: 0; } .not-touch .case_study_item_content .case_study_block_b .case_study_extra_description { padding-top: 40px !important; } .not-touch .case_study_item_content .case_study_block_c { width: 66.6667%; } .not-touch .case_study_item_content .case_study_block_d { width: 33.3333%; } .not-touch .case_study_item_content .case_study_block_d .backgroundImage img { margin: 0; } .not-touch .case_study_item_content .case_study_block_e { width: 100%; margin: 0; float: none; } .not-touch .case_study_item_content .case_study_block_f { width: 100%; } .not-touch .case_study_item_content .case_study_block_g { width: 100%; margin: 0; float: none; position: relative; } .not-touch .case_study_item_content .case_study_block_g .case_study_testimonial { height: 200px; } .not-touch .contact_content .contact_block_a { clear: left; float: left; width: 200%; margin-left: 0%; margin-right: -200%; height: 420px; } .not-touch .contact_content .contact_block_a .backgroundImage img { height: 100%; } .not-touch .contact_content .contact_block_b { display: none; } .not-touch .contact_content .contact_block_c, .not-touch .contact_content .contact_block_e { clear: left; width: 100% !important; position: relative; } .not-touch .contact_content .contact_block_c { height: 200px; } .not-touch .contact_content .contact_block_e { height: 300px; } .not-touch .contact_content .contact_block_d, .not-touch .contact_content .contact_block_f { clear: left; width: 100% !important; margin-left: 0 !important; } .not-touch .contact_content .address_vat { margin-left: 5%; } .not-touch .contact_content #googleMapLondon, .not-touch .contact_content #googleMapBrighton { height: 300px; } .not-touch .case_study_extra_description { padding-top: 0 !important; } .not-touch .testimonials .testimonials-last-three .views-row { width: 60%; margin: 160px 20% 20px 20% !important; } .not-touch .testimonials .testimonials-last-three-skip-three .views-row { margin: 160px 40px 20px 40px !important; } } /******************************************* 840 *******************************************/ @media only screen and (max-width: 840px) { .row_2 .block_people .homepageThumbDesc { display: none; } .parallaxText .logo { margin-top: 40px !important; margin-left: -15px !important; } .parallaxText .logo img { width: 40px !important; } } /******************************************* MOBILE *******************************************/ @media only screen and (max-width: 767px) { body { font-size: 75%; } /* parallax */ .parallax { background: url(../images/homepage/home-header-mobile_final.jpg) 50% 0 no-repeat fixed !important; -o-background-size: 100% !important; -webkit-background-size: 100% !important; -moz-background-size: 100% !important; background-size: 100% !important; height: 300px !important; } .parallax .c { background: none !important; height: 300px !important; } .parallax .parallaxText { font-size: 44% !important; } .parallax .parallaxText .description { display: none !important; } .parallax .parallaxText .logo { margin-top: 10px !important; } /* read more */ .case_study_item_content .servicesCircleReadMoreText { margin-top: 40px !important; } .services_content .servicesCircleReadMoreText { margin-top: 0px !important; } h1.page_title { padding-top: 80px !important; padding-left: 10px !important; height: 30px !important; } /* top menu */ header.hide { margin-top: -220px; } header { margin-top: -220px; } header .block-title { display: none; } header .header__logo { padding-left: 0px; } header .header__region { height: 220px; } header .menu { margin-top: 20px; float: left; margin-left: 20%; width: 100%; font-size: 120%; } header .menu li { float: none; margin-top: 5px; } header .menu li a { color: #AEB0B2; } header .menu li a.active { color: #000000; } footer .menu { display: block; overflow: hidden; float: right; } footer .menu .menu__item.is-leaf { list-style-image: none; list-style-type: none; } footer .menu li { float: none; text-align: right; margin-left: 0px; margin-bottom: 5px; } /* homepage */ .homepageDesktopContent { display: none; } .homepageContainer .homepageMobileContent { display: block; } .homepageContainer .homepageMobileContent .homepageThumbTextWrapper { padding: 40px 20px 0 20px !important; } .homepageContainer .homepageMobileContent .homepageThumbTextWrapperFade { padding: 80px 20px 0 20px !important; width: 80% !important; } .homepageContainer .homepageMobileContent .homepageThumbSubContainerVerticalContent { width: 50%; float: left; } .homepageContainer .homepageMobileContent .circleLink { position: relative !important; bottom: 0 !important; padding: 15px 0 40px 0; } .homepageContainer .homepageMobileContent .block_cs .circleLinkCS { margin: 40px 20px !important; } .homepageContainer .homepageMobileContent .row_1 .homepageThumbContainerLink { position: relative !important; height: auto !important; overflow: auto !important; } .homepageContainer .homepageMobileContent .testimonials { height: 300px; } .homepageContainer .homepageMobileContent .testimonials .testimonials-mobile .views-row { margin: 40px 10% 20px 10% !important; } .homepageContainer .homepageMobileContent .testimonials .testimonials-mobile .views-row .views-field-title { font-size: 160% !important; line-height: 1; } .homepageContainer .homepageMobileContent .testimonials .testimonials-mobile .views-row .views-field-field-testimonial-text .field-content p { line-height: 120% !important; } .homepageContainer .homepageMobileContent .row_3 .homepageThumbContainerLink, .homepageContainer .homepageMobileContent .row_8 .homepageThumbContainerLink { height: auto !important; } .homepageContainer .homepageMobileContent .row_5 .homepageThumbContainerLink { height: auto !important; } .homepageContainer .homepageMobileContent .row_6 { background-color: #F2F2F2; } /* equipment / case studies / services */ .case_studies_content .views-row .case-study-euipment-intro-wrapper, .equpment_content .views-row .case-study-euipment-intro-wrapper, .services_content .views-row .case-study-euipment-intro-wrapper { padding: 25px 0; /* equipment */ /* case study */ /* services */ } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-title, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-title, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-title { padding: 0 0 0 10px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-description { padding-left: 10px; width: 90%; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-equipment-link { padding-left: 10px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-case-study-intro { padding-left: 10px; width: 90%; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-field-link-image { padding-left: 10px; margin-top: 25px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-body, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-body, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-body { padding-left: 10px; width: 90%; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing { padding-left: 10px; margin-top: 25px; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing .servicesCircleReadMore, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing .servicesCircleReadMore, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-nothing .servicesCircleReadMore { margin-top: 0; } .case_studies_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .equpment_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1, .services_content .views-row .case-study-euipment-intro-wrapper .views-field-body-1 { padding-left: 10px; width: 90%; } /* case study item */ .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper { margin: 0 5% 25px 5%; width: 90%; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .page_category_title { font-size: 140% !important; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper h1 { font-size: 200% !important; } .case_study_item_content .case_study_block_a .case_study_item_main_text_wrapper .servicesCircleReadMore { margin-top: 25px; } .case_study_item_content .case_study_block_b .case_study_extra_description { margin: -20px 5% 0 5% !important; } .case_study_item_content .case_study_block_b .case_study_extra_description .field-type-text-long { width: 100%; } .case_study_item_content .case_study_block_b img { min-width: 940px !important; margin-left: -200px; } .case_study_item_content .case_study_block_g .case_study_testimonial { height: 240px; } .case_study_item_content .case_study_block_g .case_study_testimonial .case_study_testimonial_text p { line-height: 1 !important; } /* clients */ .clients_content .views-field-field-testimonial-text p { line-height: 1 !important; } /* people */ .people_content .view-people-view .views-row, .people_content .view-people-view .people_small_group_1, .people_content .view-people-view .people_small_group_2 { width: 100% !important; clear: left; } .people_content .view-people-view .views-row .views-field-nothing, .people_content .view-people-view .people_small_group_1 .views-field-nothing, .people_content .view-people-view .people_small_group_2 .views-field-nothing { padding: 30px 0 0 20px; } .people_content .view-people-view .views-row-last .peopleItemLink { background-image: url(../images/common/social-email.png) !important; } /* clients bottom */ .clientLogosBottom .views-row { width: 25%; } /* contact */ .contact_content .contact_block_a { height: 300px; } .contact_content .contact_block_a .phone_email { top: 50px !important; } .contact_content .contact_block_a .phone_email .field-name-field-phone-number { font-size: 260% !important; } } /* login */ #user-login { width: 400px; margin: 200px auto; }