/*
Theme Name:     Jupiter Child Theme
Theme URI: 		http://demos.artbees.net/jupiter5
Description:    Child theme for the Jupiter theme 
Author:         Otti Ott (Ottimoto - Web and Print
Theme URI: 		http://themeforest.net/user/artbees
Template:       jupiter
Text Domain: mk_framework
Domain Path: /languages/
*/


/* ===================================================================================================================
===================================================================================================================
ADDITIONS/CHANGES CSS CHILD THEME.
===================================================================================================================
=================================================================================================================== */

/* ===================================================================================================================
   * Responsive styles for Dianella Chiropractic in addition to styles defined parent 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(50, 50, 50); /* TEXT GREY. */ /* #323232 */
	/* color: rgb(0, 67, 118); /* BLUE. */ /* #004376 */ /* Headings, Main Nav, */
	/* color: rgb(0, 46, 77); /* DARK BLUE. */ /* #002e4d */ /* Header Toolbar. */
	/* color: rgb(126, 160, 186); /* LIGHT BLUE. */ /* #7d9fb9 */ /* Preloader, Footer BG, Main Nav Hover, Mobile Nav Hover, */
	/* color: rgb(50, 131, 191); /* BRIGHT BLUE. */
	/* color: rgb(16, 156, 131); /* LINK GREEN. */
	/* color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
	/* color: rgb(59, 92, 99); /* PETROL. */
	/* color: rgb(17, 89, 69); /* GREEN. */
	/* color: rgb(23, 48, 28); /* DARK GREEN. */
	/* color: rgb(79, 93, 117); /* GREY/BLUE. */ /* #4f5d75 *//* Accent colour, */
	/* color: rgb(120, 120, 120); /* GREY MIDDLE. */
	/* color: rgb(191, 191, 191); /* GREY LIGHT. */
	/* color: rgb(178, 170, 142); /* BEIGE. */
	/* color: rgb(120, 120, 120); /* GREY MIDDLE. */
	/* color: rgb(211, 177, 35); /* YELLOW. */
	/* color: rgb(183, 137, 0); /* CURRY. */
	/* color: rgb(191, 171, 37); /* DIRTY YELLOW. */
	/* color: rgb(64, 0, 17); /* BURGUNDY. */
	/* color: rgb(135, 15, 33); /* RED. */
	/* color: rgb(183, 52, 0); /* DARK ORANGE. */
	/* color: rgb(248, 161, 23); /* ORANGE. */


/* FONTS: Only Poppins from Google fonts in all sorts of cuts: ???
Poppins - 400 - For ???
Poppins - 500 - For ???
*/
   

/* 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; 
}

/* HELPER CLASSES.
====================================================================================================================== */


/* GENERAL.
====================================================================================================================== */
/* BUTTONS. */
.mk-button--size-medium, .mk-blog-meta .mk-button-container a.mk-button, a.mk-loadmore-button,
.mk-contact-form button.button {
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 1px;
}

/* Only for rows and not for page sections where content is centered on mobiles. Always float the buttons left - overwrite the centring. */
.mk-main-wrapper-holder .mk-button-container {
	float: left;
	text-align: left;
}

/* BLOG READ MORE BUTTONS. Also quick contact form. */
.mk-blog-meta .mk-button-container a.mk-button, .mk-blog-meta .mk-button-container a.mk-button:visited,
.mk-contact-form button.button, .mk-contact-form button.button:visited {
	background-color: rgb(16, 156, 131) !important; /* LINK GREEN. */
	text-transform: none;
	border-radius: 50px;
}
.mk-blog-meta .mk-button-container a.mk-button:hover, .mk-blog-meta .mk-button-container a.mk-button:active, .mk-blog-meta .mk-button-container a.mk-button:focus,
.mk-contact-form button.button:hover, .mk-contact-form button.button:active, .mk-contact-form button.button:focus {
	background-color: rgb(16, 190, 130) !important; /* LINK GREEN HOVER. */
}

/* LOAD MORE BUTTON BLOG. */
a.mk-loadmore-button, a.mk-loadmore-button:visited {
	background-color: rgb(16, 156, 131); /* LINK GREEN. */
	border-width: 0;
	color: rgb(255, 255, 255) !important; /* WHITE. */
	border-radius: 50px;
}
a.mk-loadmore-button:hover, a.mk-loadmore-button:active, a.mk-loadmore-button:focus {
	background-color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}
.mk-loadmore-button svg {
	fill: rgb(255, 255, 255); /* WHITE. */
}

/* IMAGE OVERLAY. */
.image-hover-overlay {
	background-color: rgba(16, 156, 131, 0.7) !important; /* LINK GREEN. */
}


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


/* TYPOGRAPHY.
====================================================================================================================== */
/* ?????
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Zilla Slab', serif;
*/

/* Page Title. */
#mk-page-introduce.intro-left .page-title {
	font-size: 26px !important;
}


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


/* HEADER.
====================================================================================================================== */
/* Somehow the header bg colour needs to be added here. Otherwise grey bg colour visibel when changing form menu to sticky menu. */
.mk-header {
	background-color: rgb(255, 255, 255); /* WHITE. */
	border-bottom-width: 0;
}

/* Sticky header bottom border to be thicker. */
.mk-header.sticky-style-fixed.a-sticky .mk-header-holder {
	border-bottom-width: 2px;
}

/* Sticky header inner with transparent bg colour when scrolled - 0.9 transparency set in theme for sticky header. */
.sticky-style-fixed .mk-header-nav-container {
	background-color: transparent;
}

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


/* NAVIGATION.
====================================================================================================================== */
/* MOBILE. */
/* Mobile menu font size and font weight. */
.mk-responsive-nav li a {	
	font-size: 16px;
	font-weight: 500;
}
/* Mobile submenu font size and font weight. */
.mk-responsive-nav li ul li a {
	font-size: 15px;
	font-weight: 500;
}
/* The background colour to be removed. */
.mk-responsive-nav li a:hover, .mk-responsive-nav li a:active, .mk-responsive-nav li a:focus {
	color: rgb(126, 160, 186) !important; /* LIGHT BLUE. */
	background-color: transparent;
}


/* DESKTOP. */
/* Submenu: Remove padding top and bottom. */
.main-navigation-ul li.no-mega-menu ul.sub-menu {
	padding: 0;
}


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


/* PAGE TITLE.
====================================================================================================================== */
/* Only used on blog archive page and blog single pages - turned off on other pages. */
#mk-page-introduce.intro-left {
	background-color: rgba(126, 160, 186, 0.1); /* LIGHT BLUE with transparency. */
}
#mk-page-introduce.intro-left .page-title {
	margin-top: 0;
	margin-bottom: 0;
}

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


/* HERO SLIDER & HERO IMAGES.
====================================================================================================================== */


/* END HERO SLIDER & HERO IMAGES.
====================================================================================================================== */


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


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

/* PAGES.
====================================================================================================================== */
/* QUICK LINKS. */
.mk-image.inside-image {
	transition: all .15s ease-in-out
}
.mk-image.inside-image:hover {
	opacity: 0.9;
}
.mk-image.inside-image .mk-image-caption {
	background-color: rgb(16, 156, 131); /* LINK GREEN. */
}
.mk-image.inside-image .mk-image-caption:hover {
	background-color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}

/* ACCORDION. */
.mk-accordion.fancy-style .mk-accordion-tab {
	color: rgb(0, 67, 118); /* BLUE. */
	font-size: 19px;
	font-weight: normal;
	padding-top: 18px;
	padding-bottom: 18px;	
}



/* END PAGES.
====================================================================================================================== */


/* BLOG.
====================================================================================================================== */
/* BLOG TEASER. */
/* Hide the teaser comment and love wrapper (in slider of teaser). */
.mk-blog-teaser .teaser-comment-love-wrapper {
	display: none;
}
/* Remove the dark bg colour with opacity set to 0, to have the image as it is. */
.mk-blog-teaser .image-hover-overlay {
	/*
	opacity: 0.2;
	background-color: rgb(16, 156, 131) !important;
	*/
}
.mk-blog-teaser article:hover .image-hover-overlay {
	opacity: 0.5;
	background-color: rgb(16, 156, 131) !important; /* LINK GREEN. */
}

/* BLOG ARCHIVE PAGE - it's a page and not selected in WP settings as Blog page. */
/* Content distance top. */
#theme-page .theme-page-wrapper#mk-page-id-37 {

}
#theme-page .theme-page-wrapper#mk-page-id-37 .theme-content {
	padding: 25px 20px !important
}
/* Remove the social section on the left side of the short text. */
.mk-blog-modern-item .blog-modern-social-section {
	display: none;
}
/* Then move the short text including all meta to the left to equalise the spot of the sharing section I removed earlier. */
.mk-blog-modern-item .mk-blog-meta {
	margin-left: 0px;
}
/* Remove the meta for author. */
.mk-blog-modern-item .mk-blog-meta .mk-blog-meta-wrapper .mk-blog-author.blog-meta-item {
	display: none;
}
/* Change the meta link colours. */
.mk-blog-modern-item .mk-blog-meta .mk-blog-meta-wrapper a {
	color: rgb(16, 156, 131); /* LINK GREEN. */
}
.mk-blog-modern-item .mk-blog-meta .mk-blog-meta-wrapper a:hover {
	color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}

/* SINGLE BLOG POST. */
/* Content distance top. */
.single-post #theme-page .theme-page-wrapper {

}
.single-post #theme-page .theme-page-wrapper .theme-content {
	padding: 25px 20px !important
}
/* Remove the meta for author. */
.single-post .single-social-section .mk-love-holder {
	display: none;
}
/* Remove the love icon inside the social section. */
.single-post .blog-single-meta .mk-blog-author {
	display: none;
}
/* Recent posts. */
/* The bottom border to be changed and a top border added .*/
.blog-similar-posts {
	border-bottom: 2px solid rgb(126, 160, 186); /* LIGHT BLUE. */
	border-top: 2px solid rgb(126, 160, 186); /* LIGHT BLUE. */
	padding-top: 30px;
	padding-bottom: 20px;
}
/* The title. */
.similar-post-title {
	font-size: 28px;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: rgb(0, 67, 118); /* BLUE. */
	margin-left: 15px;
}
/* Similar posts holder. */
.blog-similar-posts .similar-post-holder {
	border-width: 0;
}
/* The title for the similar posts teasers. */
.mk-similiar-title {
	font-size: 14px;
	line-height: normal;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}

/* PREVIOUS/NEXT NAVIGATION. */
/* Change the bg colour when hovered (and moved in) to green hover. */
a.mk-post-nav:hover .mk-pavnav-icon, a.mk-post-prev:hover .mk-pavnav-icon {
	background-color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}
/* The text needs to be changed too. */
.pagnav-wrapper .pagenav-title {
	font-size: 14px;
	line-height: normal;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}
.pagnav-wrapper .pagenav-category {
	font-size: 12px;
	line-height: normal;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}
a .pagnav-wrapper .pagenav-title, a:visited .pagnav-wrapper .pagenav-title,
a .pagnav-wrapper .pagenav-category, a:visited .pagnav-wrapper .pagenav-category {
	color: rgb(16, 156, 131); /* LINK GREEN. */
}
a:hover .pagnav-wrapper .pagenav-title, a:active .pagnav-wrapper .pagenav-title, a:focus .pagnav-wrapper .pagenav-title,
a:hover .pagnav-wrapper .pagenav-category, a:active .pagnav-wrapper .pagenav-category, a:focus .pagnav-wrapper .pagenav-category {
	color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}
/* Remove the border around the transitioned out wrapper. */
.pagnav-wrapper .pagenav-bottom {
	border-width: 0;
}

/* Blog post sharing. */
.blog-share-container .single-share-box {
	background-color: rgb(16, 156, 131) !important; /* LINK GREEN. */

}
/* Link colours in share box. */
.single-share-box li a, .single-share-box li a:visited {
	color: rgb(255, 255, 255) !important; /* WHITE. */
}
.single-share-box li a:hover, .single-share-box li a:active, .single-share-box li a:focus {
	color: rgb(191, 191, 191) !important; /* GREY LIGHT. */
}



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


/* SIDEBAR.
====================================================================================================================== */
/* Sidebar nav. */
/* Remove the padding around the menu. */
#mk-sidebar .widget_nav_menu {
	padding: 0;
	border-top: 1px solid rgb(126, 160, 186); /* LIGHT BLUE. */
	padding-top: 30px;
}
/* Remove border around sidebar menu. */
#mk-sidebar .widget_nav_menu ul.menu {
	border-width: 0;
}
/* Remove border bottom between list items. */
#mk-sidebar .widget_nav_menu ul li {
	border-bottom-width: 0;
}
/* Remove the left indent of menu item links. */
#mk-sidebar .widget_nav_menu ul li a {
	padding-left: 0px;
}
/* Remove bg colour of current menu item. */
#mk-sidebar .widget_nav_menu ul li.current_page_item a {
	background-color: transparent;	
}


/* END SIDEBAR.
====================================================================================================================== */


/* LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* END LIGHBOX/GALLERY IMAGES.
====================================================================================================================== */


/* FOOTER.
====================================================================================================================== */
/* The icon before the address details. */
.mk-font-icons .font-icon.mk-size-small svg {
	vertical-align: top;
	padding-top: 4px;
}

/* Back to top and Quick Contact. */
.mk-go-top, .mk-quick-contact-link {
	border-radius: 50%;
}
a.mk-go-top, a.mk-go-top:visited {
	background-color: rgba(16, 156, 131, 0.5); /* LINK GREEN. */
}
a.mk-go-top:hover, a.mk-go-top:active, a.mk-go-top:focus {
	background-color: rgba(16, 190, 130, 0.8); /* LINK GREEN HOVER. */
}
a.mk-quick-contact-link, a.mk-quick-contact-link:visited {
	background-color: rgba(16, 156, 131, 0.7); /* LINK GREEN. */
}
a.mk-quick-contact-link:hover, a.mk-quick-contact-link:active, a.mk-quick-contact-link:focus {
	background-color: rgba(16, 190, 130, 0.8) !important; /* LINK GREEN. */
}


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


/* FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */
/* Style the form. */
input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], textarea {
	width: 90%;
	font-size: 15px;
	color: rgb(50, 50, 50); /* TEXT GREY. */
	border: 1px solid rgb(126, 160, 186); /* LIGHT BLUE. */
	margin-bottom: 17px;
}

/* Submit button. */
.wpcf7-submit, .wpcf7-submit:visited {
	background-color: rgb(16, 156, 131); /* LINK GREEN. */
	border-width: 0;
	color: rgb(255, 255, 255) !important; /* WHITE. */
	font-size: 15px;
	border-radius: 50px;
}
.wpcf7-submit:hover, .wpcf7-submit:active, .wpcf7-submit:focus {
	background-color: rgb(16, 190, 130); /* LINK GREEN HOVER. */
}

/* Errors. */
/* Required. */
span.wpcf7-not-valid-tip {
	color: rgb(135, 15, 33); /* RED. */
}
/* Error box. */
div.wpcf7-validation-errors {
	border: 2px solid rgb(135, 15, 33); /* RED. */
	background-color: rgba(135, 15, 33, 0.1); /* RED with transparency. */
	color: rgb(50, 50, 50); /* TEXT GREY. */
}


/* END FORM - REGISTER YOUR INTEREST.
====================================================================================================================== */


/* QUICK OCNTACT FORM. */
.mk-quick-contact-wrapper p {
	color: rgb(50, 50, 50); /* TEXT GREY. */
}
.mk-quick-contact-wrapper .mk-quick-contact-title {
	font-weight: normal
	color: rgb(0, 67, 118); /* BLUE. */
}



/* 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
940px = 58.75em
960px = 60em
992px = 62em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* Main breakpoints for Jupiter theme seems to be at 767/768px. */
/* Navigation breakpoint set to 960 in theme options, so 961 is still showing full nav. */

/* Small screens: above 320px = 20em  (inclusive 320px). */
@media only screen and (min-width: 20em) { 
	/* ------------ GENERAL. ------------ */

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

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

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

	/* ------------ END NAVIGATION. ------------ */
	
	/* ------------ HERO SLIDER & HERO IMAGES. ------------ */

	/* ------------ END HERO SLIDER & HERO IMAGES. ------------ */
	
	/* ------------ HOME. ------------ */

	/* ------------ END HOME. ------------ */
	
	/* ------------ PAGES. ------------ */

	/* ------------ END PAGES. ------------ */
	
	/* ------------ BLOG. ------------ */

	/* ------------ END BLOG. ------------ */
	
	/* ------------ SIDEBAR. ------------ */
	
	/* ------------ END SIDEBAR. ------------ */
	
	/* ------------ LIGHBOX/GALLERY IMAGES. ------------ */

	/* ------------ END LIGHBOX/GALLERY IMAGES. ------------ */
	
	/* ------------ FOOTER. ------------ */

	/* ------------ END FOOTER. ------------ */
	
	/* ------------ FORM - REGISTER YOUR INTEREST. ------------ */

	/* ------------ END FORM - REGISTER YOUR INTEREST. ------------ */
}

/* XSmall screens: above 320px = 20em (inclusive 320px). */
@media only screen and (min-width: 20em) { 

}

/* XSmall screens: above 480px = 30em (inclusive 480px). */
@media only screen and (min-width: 30em) { 

}

/* Medium screens: above 640px = 40em (inclusive 640px). */
@media only screen and (min-width: 40em) { 

}

/* Medium screens: above 768px = 48em (inclusive 768px). */
@media only screen and (min-width: 48em) { 
	/* ------------ PAGE TITLE. ------------ */
	/* Page Title. */
	#mk-page-introduce.intro-left .page-title {
		font-size: 36px !important;
	}
	/* ------------ END PAGE TITLE. ------------ */
	
	/* ------------ BLOG. ------------ */
	/* BLOG ARCHIVE PAGE - it's a page and not selected in WP settings as Blog page. */
	/* Content distance top. */
	#theme-page .theme-page-wrapper#mk-page-id-37 {
		margin: 20px auto !important;
	}
	#theme-page .theme-page-wrapper#mk-page-id-37 .theme-content {
		padding-top: 30px !important;
	}

	/* SINGLE BLOG POST. */
	/* Content distance top. */
	.single-post #theme-page .theme-page-wrapper {
		margin: 20px auto !important;
	}
	.single-post #theme-page .theme-page-wrapper .theme-content {
		padding-top: 30px !important;
	}
	/* ------------ END BLOG. ------------ */
}


/* FOOTER ONLY: above 769px = 48.0625em (inclusive 769px). */
@media only screen and (min-width: 48.0625em) { 
	
}

/* TOOLBAR only. */
@media only screen and (min-width: 781px) {
	/* ------------ HEADER. ------------ */
	/* TOOLBAR. */
	/* Increase the height of the toolbar. */
	.mk-header-toolbar, .mk-toolbar-holder, .header-toolbar-contact, .mk-header-date, .mk-header-login, .mk-header-signup, .mk-header-tagline, .mk-header-toolbar .mk-header-searchform, .mk-language-nav>a {
		height: 40px;
		line-height: 40px;
	}
	/* ------------ END HEADER. ------------ */
}

/* Blog category pages only - same padding left and right as all other pages. */
@media handheld, only screen and (max-width: 960px) {
	.theme-page-wrapper .theme-content:not(.no-padding) {
		padding: 25px 20px !important
	}
}


/* Wrapper settings below 960 to be overwritten. */
@media handheld, only screen and (max-width: 960px) {

}

/* 961up screens: above 961px = 60.0625em (inclusive 961px). */
@media only screen and (min-width: 60.0625em) { 

}

/* XXMedium screens: above 992 = 62em (inclusive 992px). */
@media only screen and (min-width: 62em) { 

}

/* Large screens: above 1024 = 64em (inclusive 1024px). */
@media only screen and (min-width: 64em) { 	
	/* ------------ PAGE TITLE. ------------ */
	/* Page Title. */
	#mk-page-introduce.intro-left .page-title {
		font-size: 45px !important;
	}
	/* ------------ END PAGE TITLE. ------------ */
}

/* BETWEEN screens: above 1081 = 73.8125em (inclusive 1081px). */
@media only screen and (min-width: 73.8125em) { 	

}

/* XLarge screens: above 1200 = 75em (inclusive 1200px). */
@media only screen and (min-width: 75em) { 	

}

/* BETWEEN screens: above 1300 = 81.25em (inclusive 1300px). */
@media only screen and (min-width: 81.25em) { 	

}

/* XXLarge screens: above 1440 = 90em (inclusive 1440px). */
@media only screen and (min-width: 90em) { 	

}

/* Mega screens: above 1921 = 120.0625em (inclusive 1921px). */
@media only screen and (min-width: 120.0625em) { 

}

/* Above 2240 = 140em (inclusive 2240px). */
@media only screen and (min-width: 140em) { 

}

/* MEDIA QUERIES FOR STANDARD DEVICES - PORTARIT AND LANDSCAPE. */
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape and from iPhone 4 UP TO iPhone 6S+*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

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

}

/* Landscape iPhone 5 and 5S */
@media only screen 
  and (min-device-width: 481px) 
  and (max-device-width: 568px)
  and (orientation: landscape) {

}

/* Landscape iPhone 6 */
@media only screen 
  and (min-device-width: 569px) 
  and (max-device-width: 667px) 
  and (orientation: landscape) { 

}

/* Landscape iPhone 6+*/
@media only screen 
  and (min-device-width: 668px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 

}

/* END MEDIA QUERIES
====================================================================================================================== */