/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/* ===================================================================================================================
===================================================================================================================
ADDITIONS/CHANGES ONLY BELOW HERE.
===================================================================================================================
=================================================================================================================== */

/* ===================================================================================================================
   * Responsive styles for 3B in addition to styles defined by original Avada Theme
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Responsive styles - design dependent
   =================================================================================================================== */
   
   
	/* color: rgb(0, 0, 0); BLACK. */
	/* color: rgb(255, 255, 255); WHITE. */
	/* color: rgb(241, 210, 0); YELLOW. */ /* #F1D200. */
	/* color: rgb(191, 189, 0); DARK YELLOW. */
	/* color: rgb(50, 50, 50); ALMOST BLACK (TEXT). */ /* #323232. */
	/* color: rgb(193, 193, 193); 30% ALMOST BLACK. */ /* #c1c1c1. */
	/* color: rgb(234, 234, 234); 10% ALMOST BLACK. */ /* #eaeaea. */
	/* color: rgb(100, 100, 100); MIDDLE GREY (HEADINGS PART). */
	/* color: rgb(54, 70, 82); DARK BLUE/GREY - QLs. */
	/* color: rgb(234, 236, 237); 10% BLUE/GREY - QLs. */
	/* color: rgb(187, 32, 32);  RED LINKS. */ /* #bb2020. */
	/* color: rgb(164, 36, 59); DARK RED LINKS HOVER. */
	/* color: rgb(9, 58, 62); DARK GREEN. */
	/* color: rgb(64, 62, 11); GREEN-BROWN. */
	/* color: rgb(150, 150, 150); GREY FOR LINES. */
	
	/* Counter bg colours. */
	/* color: rgb(64, 62, 11); OLIVE. */
	/* color: rgb(83, 81, 35); 90% OLIVE. */
	/* color: rgb(102, 100, 59); 80% OLIVE. */
	/* color: rgb(121, 120, 84); 70% OLIVE. */


/* FONTS. */
/* Montserrat and Rubik selected in Avada Theme Options. 
Montserrat Light = 300
Montserrat Light Italic = 300i
Rubik Light = 300
Rubik Regular = 400
Rubik Medium = 500
*/


/* OWN CSS FILES
====================================================================================================================== */
/*  @import 'mediaquery-reporter.css'; Add media reporter to see bar for breakpojnt changes. DELETE!!! */


/* HELPER CLASSES.
====================================================================================================================== */
/* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden 
{ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}


/* GENERAL.
====================================================================================================================== */
/* Reduce the margin after paragraphs. */
.fusion-post-content p, .post-content p {
	margin-bottom: 15px;
}
/* Image also with margin bottom so it equals into the same distance to next container below as if there would be text. */
.fusion-imageframe img {
	margin-bottom: 15px;
}

/* BUTTONS. */
/* All colours etc designed in theme. Only scale , border radius and width here. */
/* All button links. */
a.fusion-button.button-flat.fusion-button.button-flat {
	border-radius: 3px;
}
/* Buttons and visited buttons. */
a.fusion-button.button-flat.fusion-button.button-flat, a:visited.fusion-button.button-flat.fusion-button.button-flat {
	transition: all .2s ease-in-out;
}
/* Hover, active and focus. */
a:hover.fusion-button.button-flat.fusion-button.button-flat, a:active.fusion-button.button-flat.fusion-button.button-flat, a:focus.fusion-button.button-flat.fusion-button.button-flat {
	transform: scale(1.05);
}
/* Only for buttons inside the green box - sort out width and alignment. */
.greenBoxButtons a.fusion-button.button-flat.fusion-button.button-flat  {
	width: 250px;
}
.greenBoxButtons .fusion-alignright {
	float: left;
	margin-left: 0;
}
.greenBoxButtons .fusion-alignleft {
	float: left;
	margin-right: 0;
}




/* END GENERAL.
====================================================================================================================== */


/* FONTS/TYPOGRAPHY.
====================================================================================================================== */
/* Secondary header text. */
.fusion-header-v2 .fusion-secondary-header {
	font-family: "Rubik";
	font-size: 17px;
}
/* Link for phone number inside secondary header (Scale). Use Specificity. */
.fusion-secondary-header.fusion-secondary-header a, .fusion-secondary-header.fusion-secondary-header a:visited {
	font-size: 17px;
}
.fusion-secondary-header.fusion-secondary-header a:hover, .fusion-secondary-header.fusion-secondary-header a:active, .fusion-secondary-header.fusion-secondary-header a:focus {
	font-size: 18px;
}

/* Dropdown menu fonts - same as main menu fonts. */
.fusion-main-menu .fusion-dropdown-menu .sub-menu li a, .fusion-main-menu .sub-menu li a {
	font-family: "Rubik" !important;
}

/* Page Title h1. Use Specificity. */
.fusion-page-title-bar.fusion-page-title-bar h1 {
	font-size: 28px;
}
.fusion-page-title-bar.fusion-page-title-bar h1 span {
	font-size: 14px;
}

/* The title heading h2 has part of the text selected as <strong> in Wordpress-> Ensure it is not just bold but the proper font-weight used. */
.fusion-title h2.title-heading-left strong {
	font-weight: 500;
}

/* Slider heading and text. */
.tfs-slider .slide-content-container .fusion-title h2 {
	font-size: 22px !important;
	line-height: normal !important;
}
.tfs-slider .slide-content-container .fusion-title h3 {
	font-size: 16px !important;
	line-height: normal !important;
}

/* Counter. */
.fusion-counters-box .fusion-counter-box.fusion-counter-box .counter-box-content {
	font-size: 18px !important;
}

/* Buttons. */
a.fusion-button.button-flat.fusion-button.button-flat {
	font-family: "Rubik";
	font-size: 18px;
}

/* List items the same font size as text. */
.fusion-checklist, ul.fusion-checklist {
	font-size: 15px !important;
}

/* The blog teaser title. */
#wrapper #main .fusion-post-content > .blog-shortcode-post-title {
	font-weight: 300;
}

/* Footer font sizes. */
p.footerContactDetails {
	font-size: 15px;
}

/* Message on error 404 page in smaller font. */
.error-message {
	font-size: 18px !important;
	color: rgb(50, 50, 50); /* ALMOST BLACK (TEXT). */
}



/* END FONTS/TYPOGRAPHY.
====================================================================================================================== */


/*  HEADER.
====================================================================================================================== */
/* Secondary header. */
/* Remove border top and bottom, set yellow bg colour and font size for callout text. */
.fusion-header-v2 .fusion-secondary-header {
	border-top: 0px solid rgb(255, 255, 255); /* WHITE. */
	border-bottom: 0px solid rgb(255, 255, 255); /* WHITE. */
	background-color: rgb(241, 210, 0); /* YELLOW. */
	color: rgb(50, 50, 50); /* ALMOST BLACK (TEXT). */
}
/* The contact info inside of secondary header with less height to achieve what we want. Padding for mobiles. Use Specificity. */
.fusion-contact-info.fusion-contact-info {
	line-height: 42px;
	padding: 0.5em 0px 0.5em 0px;
}
/* Link for phone number inside secondary header. Scale the font size with transition on hover. Use Specificity. */
.fusion-secondary-header.fusion-secondary-header a, .fusion-secondary-header.fusion-secondary-header a:visited {
	color: rgb(187, 32, 32); /* RED LINKS. */
	transition: all .2s ease-in-out;
}
.fusion-secondary-header.fusion-secondary-header a:hover, .fusion-secondary-header.fusion-secondary-header a:active, .fusion-secondary-header.fusion-secondary-header a:focus {
	color: rgb(164, 36, 59); /* DARK RED LINKS HOVER. */
}

/* Header. */
/* Remove bottom border. */
.fusion-header-v2 .fusion-header {
	border-bottom: 0px solid white;
}

/* Logo with less margin to achieve wanted height. Use Specificity. */
.fusion-header .fusion-logo.fusion-logo {
	margin-top: 25px;
	margin-bottom: 25px;
}

/* Page Title. */
/* Page Title text all uppercase. */
.fusion-page-title-bar h1 {
	text-transform: uppercase;
}
.fusion-page-title-bar.fusion-page-title-bar h1 span {
	text-transform: none;
	color: rgb(255, 255, 255); /* WHITE. */
}


/* END  HEADER.
====================================================================================================================== */


/*  NAVIGATION.
====================================================================================================================== */
/* MOBILE. */
/* Remove the dash before each dropdown item. */
.fusion-mobile-nav-holder li.fusion-mobile-nav-item li a:before {
	content: "";
}
/* Mobile nav text all uppercase. */
.fusion-mobile-nav-item a {
	text-transform: uppercase;
}

/* DESKTOP. */
/* The height of the desktop navigation. */
.fusion-main-menu.fusion-main-menu > ul > li > a {
	height: 126px;
	line-height: 126px;
}
/* The active arrow in the navigation  is set to a triangle in theme options. Position it now on top instead of bottom. */
.fusion-arrow-highlight .fusion-arrow-svg {
	top: 0;
}
/* Change the colour to yellow. Remove stroke otherwise it appears blurry. Use Specificity. */
.fusion-arrow-svg.fusion-arrow-svg path {
	fill: rgb(241, 210, 0); /* YELLOW. */
	stroke-width: 0;
}

/* Navigation text all uppercase. Also the dropdown. */
.fusion-main-menu > ul > li > a, .fusion-main-menu .fusion-dropdown-menu .sub-menu li a {
	text-transform: uppercase;
}

/* Dropdown menu closer to main nav. Use Specificity. */
.fusion-main-menu .fusion-dropdown-menu > .sub-menu.sub-menu {
	margin-top: 10px;
}
li:hover .fusion-dropdown-svg {
	display: none;
}



/* END  NAVIGATION.
====================================================================================================================== */


/*  SLIDER HOME.
====================================================================================================================== */
/* Adjust the font to suit other page title font. */
.tfs-slider .slide-content-container .fusion-title h2 {
	font-weight: 400;
	text-transform: uppercase;
}
/* Do not show the button son mobiles -> bring back later.  */
.tfs-slider .slide-content-container .fusion-button {
	display: none;
}


/*  END SLIDER HOME.
====================================================================================================================== */


/*  PAGE TITLE.
====================================================================================================================== */
/* Page Title Bar. */
/* Remove border top and bottom. */
.fusion-page-title-bar {
	border-top: 0px solid white;
	border-bottom: 0px solid white;
}

/* Page tilte alignment. */
.fusion-page-title-captions h1 {
	text-align: left;
}


/* END PAGE TITLE.
====================================================================================================================== */



/*  CONTENT.
====================================================================================================================== */
/* Only on Home page the heading to be left aligned first and centered later. */
.home .fusion-title.fusion-title-center.fusion-sep-none .title-heading-center {
	text-align: left !important;
}

/* Home page only. Some body text to be left aligned and centered later. */
.homeTextAlign p {
	text-align: left;
}

/* The solid line after the heading h2. Use Specificity. */
.fusion-title .title-sep.sep-single.title-sep.sep-single {
	border-bottom-width: 2px;
}

/* Headings reversed out. */
.fusion-title.whiteHeading h2.title-heading-left, .fusion-title.whiteHeading h3.title-heading-left {
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Checklists. Use Specificity. */
.fusion-checklist.fusion-checklist {
	margin-top: 0px;
}

/* TESTIMONIALS. */
.fusion-testimonials.classic.fusion-testimonials.classic blockquote {
	background-color: rgba(255, 255, 255, 0.2); /* WHITE. */
}

/* LOCATION MAPS. */
/* Outer container to be positioned relative - here the column. */
.relativeContainer .fusion-column-wrapper {
	position: relative;
}
/* The tooltip shortcode itself with an absolute class, higher z-index to sit above map and the animation declaration. Also start opacity. */
.absoluteContainer {
	position: absolute !important;
	z-index: 10;
	animation: pulse 1.5s ease infinite;
	opacity: 0.6;
}
/* The animation shall pulse with size and opacity. */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}
/* Each individual marker to be positioned. Resize marker and adjust percentages on smaller devices -> later full width again and different percentages. */
.absoluteContainer.aberdeen {
	width: 20px;
	left: 46%;
	top: 21%;
}
.absoluteContainer.perth {
	width: 20px;
	left: 78%;
	top: 68%;
}
.absoluteContainer.melbourne {
	width: 20px;
	left: 85%;
	top: 70%;
}
.absoluteContainer.europe {
	width: 20px;
	left: 48%;
	top: 22%;
}
.absoluteContainer.houston {
	width: 20px;
	left: 23%;
	top: 35%;
}
.absoluteContainer.asiapacific {
	width: 20px;
	left: 80%;
	top: 56%;
}
.absoluteContainer.middleeast {
	width: 20px;
	left: 61%;
	top: 43%;
}
.absoluteContainer.africa {
	width: 20px;
	left: 50%;
	top: 43%;
}
.absoluteContainer.americas {
	width: 20px;
	left: 23%;
	top: 35%;
}

/* The table underneath the project locations map. */
.table-1 td {
	vertical-align: top;
}

/* SIDEBAR. */
/* The lists - ALSO APPLY FOR FOOTER. */
/* Remove the border from the menu lists. */
.fusion-widget-area .widget_categories li,
.fusion-widget-area .widget_nav_menu li,
.fusion-widget-area .widget_recent_entries li {
	border-bottom-width: 0;
}
/* Remove the icon in front of each list item. */
.fusion-widget-area .widget_categories li a:before,
.fusion-widget-area .widget_nav_menu li a:before,
.fusion-widget-area .widget_recent_entries li a:before {
	font-family: 'FontAwesome';
	content: "\f0c8";
	margin-left: -20px;
	font-size: 12px;
	padding-top: 2px;
}
/* Move lists over to equalise. */
.fusion-widget-area .widget_categories ul,
.fusion-widget-area .widget_nav_menu ul,
.fusion-widget-area .widget_recent_entries ul {
	margin-left: 11px; /* Equalise the negative margin from before. */
}
.fusion-widget-area .widget_categories li a,
.fusion-widget-area .widget_nav_menu li a,
.fusion-widget-area .widget_recent_entries li a {
	margin-left: 0px; /* Equalise the negative margin from before. */
}

/* Reduce the padding for list items. */
.fusion-widget-area .widget_categories li,
.fusion-widget-area .widget_nav_menu li,
.fusion-widget-area .widget_recent_entries li {
	padding-top: 7px;
	padding-bottom: 7px;
}

/* Lines underneath each widget. */
#sidebar .widget {
	border-top: 1px solid rgb(150, 150, 150); /* GREY FOR LINES. */
	padding-top: 10px;
}

/* The social icons. Also here for sidebar */
.fusion-social-networks.boxed-icons .fusion-social-network-icon {
	border-color: rgb(187, 32, 32) !important; /* RED LINKS. */
}

/* Error 404. */
.error404 .fusion-title .title-sep.sep-double {
	border-bottom-width: 0;
	border-color: rgb(50, 50, 50); /* ALMOST BLACK (TEXT). */
	border-top-width: 2px;
}

.error404 #post-404page {
	margin-top: 3%;
}

.error404 section#content {
	margin-bottom: 3%;
}

.error404 #main {
	border-bottom: 2px solid rgb(234, 236, 237) !important; /* 10% BLUE/GREY - QLs. */
}

/* END CONTENT.
====================================================================================================================== */


/* FLIP BOXES - HEXAGON.
====================================================================================================================== */
/* The container holding the hexagons to have no padding left and right for mobiles only, otherwise hexagon cropped off -> later add padding again. */
.hexagonContainer {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Mobile first. Columns: Adjust the columns so the hexagon quick links are centered. */
.threeRow.fusion-layout-column {
	width: 100% !important;
	margin-left: 0% !important;
	margin-right: 0% !important;
	margin-bottom: 95px !important;
}
/* Columns: Adjust the columns so the hexagon quick links are centered. */
.twoRow.fusion-layout-column {
	width: 100% !important;
	margin-left: 0% !important;
	margin-right: 0% !important;
	margin-bottom: 95px !important;
}
.singleFlipBox {
	margin: 0 auto !important;
}

/* Script used form http://csshexagon.com/ */
/* Added calculated height to avoid jumping when browser window size is changed slowly. */
/* Added to front and inner wrapper. Moved the before and after from the wrapper to front and back accordingly. */
.flip-box-front {
	height: 177px; /* 231px minus 2 x the removed padding top/bottom. */
	border-radius: 0 !important;
	padding: 0px 20px;
}
.flip-box-back {
	height: 177px;
	border-radius: 0 !important;
	padding: 0px 20px;
}
.flip-box-inner-wrapper {
	height: 177px !important;
}
.flip-box-inner-wrapper {
	position: relative;
	width: 300px; 
	height: 173.21px;
	/* background-color: #64C7CC; */
	margin: 86.60px 0;
	margin-left: auto; /* Also required for horizontally centring the hexagon boxes. */
	margin-right: auto; /* Also required for horizontally centring the hexagon boxes. */
}

/* ---------- */
/* Leave this for the wrapper in there - even if it is a duplicate of what's applied to the front and back - but it avoids the jittering on certain hover spots. */
.flip-box-inner-wrapper:before,
.flip-box-inner-wrapper:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}
.flip-box-inner-wrapper:before {
  bottom: 100%;
  border-bottom: 86.60px solid transparent;
}
.flip-box-inner-wrapper:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid transparent;
}
/* ---------- */

.flip-box-front:before, .flip-box-back:before,
.flip-box-front:after, .flip-box-back:after {
	content: "";
	position: absolute;
	left: 0;
	width: 0;
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
}
.flip-box-front:before {
	bottom: 100%;
	border-bottom: 86.60px solid rgb(234, 236, 237); /* 10% BLUE/GREY - QLs. */
}
.flip-box-back:before {
	bottom: 100%;
	border-bottom: 86.60px solid rgb(54, 70, 82); /* DARK BLUE/GREY - QLs. */
}
.flip-box-front:after {
	top: 100%;
	border-top: 86.60px solid rgb(234, 236, 237); /* 10% BLUE/GREY - QLs. */
}
.flip-box-back:after {
	top: 100%;
	border-top: 86.60px solid rgb(54, 70, 82); /* DARK BLUE/GREY - QLs. */
}


/* END FLIP BOXES - HEXAGON.
====================================================================================================================== */


/*  HOME.
====================================================================================================================== */
/* COUNTER. */
.counterBackground {
	background-color: rgb(64, 62, 11); /* OLIVE. */
}
/* Use Specificity. */
.fusion-counters-box .fusion-counter-box.fusion-counter-box {
	background-color: rgb(64, 62, 11); /* OLIVE. Fallback. */
	margin-bottom: 0;
	padding: 20px 0 20px 0;
}
.fusion-counters-box .fusion-counter-box:nth-child(1) {
	background-color: rgb(83, 81, 35); /* 90% OLIVE. */
}
.fusion-counters-box .fusion-counter-box:nth-child(2) {
	background-color: rgb(121, 120, 84); /* 70% OLIVE. */
}
.fusion-counters-box .fusion-counter-box:nth-child(3) {
	background-color: rgb(64, 62, 11); /* OLIVE. */
}
.fusion-counters-box .fusion-counter-box:nth-child(4) {
	background-color: rgb(102, 100, 59); /* 80% OLIVE. */
}



/* END HOME.
====================================================================================================================== */


/*  BLOG TEASER & BLOG ARCHIVE (not assigned in settings as blog page - normal page).
====================================================================================================================== */
/* Blog Teaser background. Use Specificity. */
.fusion-blog-layout-grid .post .fusion-post-wrapper.fusion-post-wrapper {
	background-color: rgb(255, 255, 255); /* WHITE. */
}
/* Remove the border around the wrapper. */
.fusion-blog-layout-grid .post .fusion-post-wrapper {
	border-width: 0;
}
/* Remove the rollover title on the image. */
.fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title {
	display: none;
}

/* The teaser title to be uppercase. Also the hover/rollover title. */
#wrapper #main .fusion-post-content > .blog-shortcode-post-title,
.fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title {
	text-transform: uppercase;
}
/* The rollover circle bg colour. also when not hovered (for the transition duration). */
.fusion-image-wrapper:hover .fusion-rollover .fusion-rollover-content a.fusion-rollover-link {
	background: rgb(255, 255, 255); /* WHITE. */;
}
.fusion-image-wrapper .fusion-rollover .fusion-rollover-content a.fusion-rollover-link {
	background: rgb(255, 255, 255); /* WHITE. */;
}
/* The colour of the rollover circle icon. */
.fusion-image-wrapper.fusion-image-wrapper .fusion-rollover .fusion-rollover-link:before {
	color: rgb(241, 210, 0); /* YELLOW. */
}

/* The heading. Use Specificity. */
#wrapper #main .fusion-post-content > .blog-shortcode-post-title.blog-shortcode-post-title {
	line-height: normal;
}

/* The line. */
#wrapper #main .fusion-post-content .fusion-content-sep {
	border-top-width: 0;
	border-bottom-width: 0;
	margin-top: 10px;
}

/* The distance above the teaser text to be less. Use Specificity. */
.fusion-blog-layout-grid .fusion-post-content-container.fusion-post-content-container {
	margin-top: 10px;
}

/* The read more link to be closer to text above. */
.fusion-blog-layout-grid .fusion-meta-info {
	margin-top: 0px;
}
.fusion-blog-layout-grid .fusion-post-content p, .post-content p {
	margin-bottom: 10px;
}


/* END BLOG TEASER.
====================================================================================================================== */


/*  BLOG SINGLE.
====================================================================================================================== */
/* The single blog post pages also need to have padding top as the other containers. */
.single-post #main {
	padding-top: 3%;
	padding-bottom: 3%;
}

/* Single project/blog post page to have the same background as blog teaser and blog archive page. */
.single-post #main
{
	background-image: url(images/honeycomb-bg-repeat-base-grey.png);
	background-repeat: repeat;
	background-position: left top;
}

/* The category pages (project categories) */
.archive.category #main {
	padding-top: 3%;
	padding-bottom: 3%;
}

/* The lines. Use Specificity. */
.single-navigation.single-navigation {
	border-top: 1px solid rgb(150, 150, 150); /* GREY FOR LINES. */
	border-bottom: 1px solid rgb(150, 150, 150); /* GREY FOR LINES. */
}
.post .fusion-meta-info.fusion-meta-info {
	border-top: 1px solid rgb(150, 150, 150); /* GREY FOR LINES. */
	border-bottom: 1px solid rgb(150, 150, 150); /* GREY FOR LINES. */
	padding-top: 15px;
	padding-bottom: 15px;
}


/* END BLOG SINGLE.
====================================================================================================================== */


/*  CONTACT.
====================================================================================================================== */
/* CONTACT. */
/* The address with the same indent in regards to then icons as in footer. */
#content .footerAddress span.addressSpan {
	margin-left: 20px;
}

/* END CONTACT.
====================================================================================================================== */


/* CONTACT FORM
====================================================================================================================== */
/* Remove blue outline on fileds. */
.wpcf7-form select, .wpcf7-form textarea, .wpcf7-form input[type="text"], .wpcf7-form input[type="password"], .wpcf7-form input[type="datetime"], .wpcf7-form input[type="datetime-local"], .wpcf7-form input[type="date"], .wpcf7-form input[type="month"], .wpcf7-form input[type="time"], .wpcf7-form input[type="week"], .wpcf7-form input[type="number"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="search"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="color"], .wpcf7-form .uneditable-input, .wpcf7-form .select-wrap, .wpcf7-form .form-control {
	outline: 0;
}

/* The form fields. */
.wpcf7-form .wpcf7-select, .wpcf7-form .wpcf7-text, .wpcf7-form textarea, input[type="email"], input[type="password"], input[type="text"], select, textarea {
	background-color: rgb(255, 255, 255) !important; /* WHITE. */
	color: rgb(50, 50, 50) !important; /* ALMOST BLACK (TEXT). */
}
/* The focus state. */
.wpcf7-form .wpcf7-select:focus, .wpcf7-form .wpcf7-text:focus, .wpcf7-form textarea:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, select:focus, textarea:focus {
	background-color: rgb(240, 240, 240) !important; /* A LIGHT GREY. */
}
.wpcf7-form .wpcf7-text, input[type="email"], input[type="text"] {
	height: 34px !important;
}

/* BUTTONS to look the same as throughout the site. */
/* All button links. */
.wpcf7-form input[type="submit"], .wpcf7-submit {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 400 !important;
	border-radius: 3px !important;
	font-size: 18px !important;
}
.wpcf7-form input[type="submit"], .wpcf7-submit {
	border-radius: 3px;
}
/* Buttons and visited buttons. */
.wpcf7-form input[type="submit"], .wpcf7-submit, .wpcf7-form input[type="submit"]:visited, .wpcf7-submit:visited {
	transition: all .2s ease-in-out;
	background-color: rgb(241, 210, 0) !important; /* YELLOW. */
	color: rgb(50, 50, 50) !important; /* ALMOST BLACK (TEXT). */
}
/* Hover, active and focus. */
.wpcf7-form input[type="submit"]:hover, .wpcf7-submit:hover, .wpcf7-form input[type="submit"]:active, .wpcf7-submit:active, .wpcf7-form input[type="submit"]:focus, .wpcf7-submit:focus {
	transform: scale(1.05);
	background-color: rgb(191, 189, 0) !important; /* DARK YELLOW. */
	color: rgb(50, 50, 50) !important; /* ALMOST BLACK (TEXT). */
}

/* Alerts and error messages. */
[role="alert"] {
	color: rgb(255, 0, 0); /* RED. */
}
.wpcf7-not-valid {
	border-color: rgb(255, 0, 0) !important; /* RED. */
}
.wpcf7-form .wpcf7-validation-errors {
	background: rgba(255, 0, 0, 0.1) !important; /* RED with transparency. */
	border: 1px solid rgb(255, 0, 0) !important; /* RED. */
	color: rgb(255, 0, 0) !important; /* RED. */
}
[role="alert"].wpcf7-mail-sent-ok {
	color: rgb(150, 161, 58); /* GREEN. */
}




/* END CONTACT FORM
====================================================================================================================== */


/*  FOOTER.
====================================================================================================================== */
/* The address. */
.fusion-footer #custom_html-3 .footerAddress span, .fusion-footer #custom_html-6 .footerAddress span, .fusion-footer #custom_html-7 .footerAddress span {
	margin-left: 20px;
}
/* Reduce margin bottom between the address blocks. */
.fusion-footer #custom_html-3, .fusion-footer #custom_html-6, .fusion-footer #custom_html-7 {
	margin-bottom: 30px;
}

/* Reduce the margin introduced by webkit browsers. */
p.footerContactDetails {
	-webkit-margin-before: 0.4em !important;
	-webkit-margin-after: 0.4em !important;
}

/* The menu list. */
/* All applied within the settings for the list items in the sidebar earlier. */

/* The social icons - done with sidebar. */

/* Recent posts. */
/* Recent Posts inserted as shortcode. Change the width of the images etc. */
.fusion-footer .fusion-recent-posts.layout-thumbnails-on-side .columns .column .floated-slideshow {
	margin-right: 10px;
	width: auto;
}
/* Ensure the images are always shown in rows of 2. */
.fusion-footer .fusion-columns .fusion-column-last .fusion-column {
	width: 50% !important;
	float: left;
}

/* Hide the headings for the logos - just for structure. */
.fusion-footer #media_image-2 h4, .fusion-footer #media_image-4 h4, .fusion-footer #media_image-3 h4, .fusion-footer #media_image-5 h4 {
	display: none;
}


/* To top colours. */
a#toTop, a#toTop:visited {
	background-color: rgb(187, 32, 32); /* RED LINKS. */
	border-radius: 3px 3px 0 0
}
a#toTop:hover, a#toTop:active, a#toTop:focus {
	background-color: rgb(164, 36, 59); /* DARK RED LINKS HOVER. */
}


/* END FOOTER.
====================================================================================================================== */



/* SKIPLINKS 508 REQUIREMENTS - ACCESSIBILITY
====================================================================================================================== */
.skiplist {
	margin: 0; 
	padding: 0
} 
.skip {
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip {
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a {
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active {
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover {
	cursor: default
}


/* Media Queries
====================================================================================================================== */
/* All above is mobile first. */
/* 
320px = 20em
480px = 30em
640px = 40em
768px = 48em 
800px 	Main Breakpoint change set in theme
940px = 58.75em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* Main breakpoint for Avada theme seems to be at 800px/801px. */
/* Set in Theme Options -> Responsive. */

/* Small screens: 321px - 480px (20.0625em - 30em) */
@media only screen and (min-width: 20.0625em) { 
	/* ------------ GENERAL. ------------ */

	/* ------------ END GENERAL. ------------ */
	
	/* ------------ FONTS/TYPOGRAPHY. ------------ */

	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */

	/* ------------ END HEADER. ------------ */
	
	/* ------------ NAVIGATION. ------------ */

	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ PAGE TITLE. ------------ */

	/* ------------ END PAGE TITLE. ------------ */

	/* ------------ SLIDER HOME. ------------ */

	/* ------------ END SLIDER HOME. ------------ */
	
	/* ------------ CONTENT. ------------ */

	/* ------------ END CONTENT. ------------ */
	
	/* ------------ FLIP BOXES - HEXAGON. ------------ */

	/* ------------ END FLIP BOXES - HEXAGON. ------------ */
	
	/* ------------ HOME. ------------ */

	/* ------------ END HOME. ------------ */
	
	/* ------------ BLOG TEASER & BLOG ARCHIVE. ------------ */

	/* ------------ END BLOG TEASER & BLOG ARCHIVE. ------------ */
	
	/* ------------ BLOG ARCHIVE (overview). ------------ */

	/* ------------ END BLOG ARCHIVE (overview). ------------ */
	
	/* ------------ BLOG SINGLE. ------------ */

	/* ------------ END BLOG SINGLE. ------------ */
	
	/* ------------ CONTACT. ------------ */

	/* ------------ END CONTACT. ------------ */
	
	/* ------------ CONTACT FORM. ------------ */

	/* ------------ END CONTACT FORM. ------------ */
	
	/* ------------ FOOTER. ------------ */

	/* ------------ END FOOTER. ------------ */
}

/* XSmall screens: 481px - 640px (30.0625em - 40em) */
@media only screen and (min-width: 30.0625em) { 
	/* LOCATION MAPS. */
	/* Each individual marker to be positioned. Resize marker and adjust percentages on smaller devices -> later full width again and different percentages. */
	.absoluteContainer.aberdeen {
		width: 20px;
		left: 46%;
		top: 22%;
	}
	.absoluteContainer.perth {
		width: 20px;
		left: 78%;
		top: 76%;
	}
	.absoluteContainer.melbourne {
		width: 20px;
		left: 87%;
		top: 78%;
	}
	.absoluteContainer.houston {
		width: 20px;
		left: 23%;
		top: 36%;
	}
	.absoluteContainer.europe {
		width: 20px;
		left: 49%;
		top: 24%;
	}
	.absoluteContainer.asiapacific {
		width: 20px;
		left: 80%;
		top: 56%;
	}
	.absoluteContainer.middleeast {
		width: 20px;
		left: 62%;
		top: 45%;
	}
	.absoluteContainer.africa {
		width: 20px;
		left: 52%;
		top: 46%;
	}
	.absoluteContainer.americas {
		width: 20px;
		left: 21%;
		top: 27%;
	}
	/* ------------ END CONTENT. ------------ */
}

/* Medium screens: 641px - 767px (40.063em - 47.9375em) */
@media only screen and (min-width: 40.063em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Slider heading and text. */
	.tfs-slider .slide-content-container .fusion-title h2 {
		font-size: 28px !important;
	}
	.tfs-slider .slide-content-container .fusion-title h3 {
		font-size: 17px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* Secondary header. */
	/* Hide the break inserted between both phone number on larger devices, to have both next to each other. */
	.fusion-secondary-header.fusion-secondary-header .fusion-contact-info br {
		display: none;
	}
	/* ------------ END HEADER. ------------ */
}

/* CHANGED THE BREAKPOINT TO ACTUALLY SHOW THE CHANGE ALREADY AT 768PX I.E. IPADS ETC. */
/* XMedium screens: 768px - 940px (48em - 58.75em) */
@media only screen and (min-width: 48em) { 
	/* ------------ SLIDER HOME. ------------ */
	/* Do not show the button son mobiles -> bring back later.  */
	.tfs-slider .slide-content-container .fusion-button {
		display: block;
	}
	/* ------------ END SLIDER HOME. ------------ */
}

/* MAIN BREAKPOINT CHANGE THEME at 801px (50.0625em) */
@media only screen and (min-width: 801px) {
	/* ------------ GENERAL. ------------ */
	/* BUTTONS. */
	/* Only for buttons inside the green box - sort out width and alignment. */
	.greenBoxButtons a.fusion-button.button-flat.fusion-button.button-flat  {
		width: 250px;
	}
	.greenBoxButtons .fusion-alignright {
		float: right;
		margin-left: 15px;
	}
	.greenBoxButtons .fusion-alignleft {
		float: left;
		margin-right: 15px;
	}
	/* Only for buttons inside the green box - sort out width and alignment. */
	.greenBoxButtons a.fusion-button.button-flat.fusion-button.button-flat  {
		width: 300px;
	}
	/* ------------ END GENERAL. ------------ */
	
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Secondary header text. */
	.fusion-header-v2 .fusion-secondary-header {
		font-size: 20px;
	}
	/* Link for phone number inside secondary header (Scale). Use Specificity. */
	.fusion-secondary-header.fusion-secondary-header a, .fusion-secondary-header.fusion-secondary-header a:visited {
		font-size: 20px;
	}
	.fusion-secondary-header.fusion-secondary-header a:hover, .fusion-secondary-header.fusion-secondary-header a:active, .fusion-secondary-header.fusion-secondary-header a:focus {
		font-size: 21px;
	}
	
	/* Page Title h1. Use Specificity. */
	.fusion-page-title-bar.fusion-page-title-bar h1 {
		font-size: 50px;
	}
	.fusion-page-title-bar.fusion-page-title-bar h1 span {
		font-size: 22px;
	}
	
	/* Slider heading and text. */
	.tfs-slider .slide-content-container .fusion-title h2 {
		font-size: 34px !important;
	}
	.tfs-slider .slide-content-container .fusion-title h3 {
		font-size: 18px !important;
	}
	
	/* Counter. */
	.fusion-counters-box .fusion-counter-box.fusion-counter-box .counter-box-content {
		font-size: 12px !important;
	}
	
	/* Buttons. */
	a.fusion-button.button-flat.fusion-button.button-flat {
		font-size: 16px;
	}
	
	/* Footer font sizes. */
	p.footerContactDetails {
		font-size: 14px;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */

	/* ------------ NAVIGATION. ------------ */
	/* DESKTOP. */
	/* Padding right less first to avoid menu wrap. */
	.fusion-main-menu.fusion-main-menu > ul > li {
		padding-right: 14px;
	}
	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ HEADER. ------------ */
	/* The contact info inside of secondary header. Remove the padding. Use Specificity. */
	.fusion-contact-info.fusion-contact-info {
		padding: 0;
	}
	/* ------------ END HEADER. ------------ */
	
	/* ------------ PAGE TITLE. ------------ */
	/* Page title alignment. */
	.fusion-page-title-captions h1 {
		text-align: center;
	}
	/* ------------ END PAGE TITLE. ------------ */
	
	/* ------------ CONTENT. ------------ */
	/* Only on Home page the heading to be left aligned first and centered later. */
	.home .fusion-title.fusion-title-center.fusion-sep-none .title-heading-center {
		text-align: center !important;
	}
	/* Only on Home page, the solid line after the heading h2. Use Specificity. */
	.home .fusion-separator.sep-single {
		margin-left: auto;
		margin-right: auto;
	}
	/* Home page only. Some body text to be left aligned and centered later. */
	.homeTextAlign p {
		text-align: center;
	}

	/* Headings h2 alignment. */
	.fusion-title.fusion-sep-none h2.title-heading-left {
		text-align: center;
	}
	/* Heading reversed out. */
	.fusion-title.whiteHeading h2.title-heading-left {
		text-align: center;
	}
	
	/* LOCATION MAPS. */
	/* Each individual marker to be positioned. Resize marker and adjust percentages on smaller devices -> later full width again and different percentages. */
	.absoluteContainer.aberdeen {
		width: 33px;
		left: 46%;
		top: 23%;
	}
	.absoluteContainer.perth {
		width: 33px;
		left: 78%;
		top: 76%;
	}
	.absoluteContainer.melbourne {
		width: 33px;
		left: 87%;
		top: 80%;
	}
	.absoluteContainer.houston {
		width: 33px;
		left: 23%;
		top: 37%;
	}
	.absoluteContainer.europe {
		width: 33px;
		left: 49%;
		top: 25%;
	}
	.absoluteContainer.asiapacific {
		width: 33px;
		left: 80%;
		top: 56%;
	}
	.absoluteContainer.middleeast {
		width: 33px;
		left: 62%;
		top: 45%;
	}
	.absoluteContainer.africa {
		width: 33px;
		left: 53%;
		top: 50%;
	}
	.absoluteContainer.americas {
		width: 33px;
		left: 22%;
		top: 30%;
	}
	/* ------------ END CONTENT. ------------ */
	
	
	/* ------------ FLIP BOXES - HEXAGON. ------------ */
	/* The container holding the hexagons to have no padding left and right for mobiles only, otherwise hexagon cropped off -> later add padding again. */
	.hexagonContainer {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	/* ------------END FLIP BOXES - HEXAGON. ------------ */
}

/* For additional navigation element "News". */
@media only screen and (min-width: 900px) {
	/* ------------ NAVIGATION. ------------ */
	/* DESKTOP. */
	/* Padding right less first to avoid menu wrap. */
	.fusion-main-menu.fusion-main-menu > ul > li {
		padding-right: 28px;
	}
	/* ------------ END NAVIGATION. ------------ */
}


@media only screen and (min-width: 992px) {
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Counter. */
	.fusion-counters-box .fusion-counter-box.fusion-counter-box .counter-box-content {
		font-size: 15px !important;
	}
	
	/* Buttons. */
	a.fusion-button.button-flat.fusion-button.button-flat {
		font-size: 20px;
	}
	
	/* Footer font sizes. */
	p.footerContactDetails {
		font-size: 15px;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ GENERAL. ------------ */
	/* BUTTONS. */
	/* Only for buttons inside the green box - sort out width and alignment. */
	.greenBoxButtons a.fusion-button.button-flat.fusion-button.button-flat  {
		width: 300px;
	}
	/* ------------ END GENERAL. ------------ */
	
	/* ------------ NAVIGATION. ------------ */
	/* DESKTOP. */
	/* Padding right less first to avoid menu wrap. */
	.fusion-main-menu.fusion-main-menu > ul > li {
		padding-right: 45px;
	}
	/* ------------ END NAVIGATION. ------------ */
}

/* XXMedium screens: 941px - 1024px (58.8124em - 64em)*/
@media only screen and (min-width: 58.8125em) { 

}

/* Large screens: 1025px - 1200px (64.0625em - 75em)*/
@media only screen and (min-width: 64.0625em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Slider heading and text. */
	.tfs-slider .slide-content-container .fusion-title h2 {
		font-size: 50px !important;
	}
	.tfs-slider .slide-content-container .fusion-title h3 {
		font-size: 24px !important;
	}
	
	/* Counter. */
	.fusion-counters-box .fusion-counter-box.fusion-counter-box .counter-box-content {
		font-size: 16px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
	
	/* ------------ FLIP BOXES - HEXAGON. ------------ */
	/* Columns: Adjust the columns so the hexagon quick links are centered. */
	.threeRow.fusion-layout-column {
		width: 30% !important;
		margin-left: 1.5% !important;
		margin-right: 1.5% !important;
		margin-bottom: 30px !important;
	}
	.home .threeRow.fusion-layout-column {
		margin-bottom: 120px !important;
	}
	/* Columns: Adjust the columns so the hexagon quick links are centered. */
	.twoRow.fusion-layout-column {
		width: 47% !important;
		margin-left: 1.5% !important;
		margin-right: 1.5% !important;
		margin-bottom: 115px !important;
	}
	/* The top row distance to three hexagons below. */
	.twoRow.twoRowTop.fusion-layout-column {
		margin-bottom: 80px !important;
	}
	/* ------------ END FLIP BOXES - HEXAGON. ------------ */
}

/* Large screens: 1201px - 1440px (75.0625em - 90em)*/
@media only screen and (min-width: 75.0625em) { 
	/* ------------ FONTS/TYPOGRAPHY. ------------ */
	/* Counter. */
	.fusion-counters-box .fusion-counter-box.fusion-counter-box .counter-box-content {
		font-size: 18px !important;
	}
	/* ------------ END FONTS/TYPOGRAPHY. ------------ */
}

/* XLarge screens: 1441px - 1920px (90.0625em - 120em) */
@media only screen and (min-width: 90.0625em) { 

}

/* XXLarge screens: 1921px (120.0625em) */
@media only screen and (min-width: 120.0625em) { 

}


/* MEDIA QUERIES FOR STANDARD DEVICES. 
====================================================================================================================== */
/* IPHONES. */
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ====================================================== */
/* IPADS. */
/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ====================================================== */
/* LAPTOPS. */
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

/* ====================================================================================================================== */




/* Landscape displays. */
@media screen and (orientation: landscape) {

}

/* Portrait displays. */
@media screen and (orientation: portrait) {

}