/*
Theme Name: Home Coffee
Author: SB Studio
Author URI: http://www.sb-studio.co.uk
Version: 1.0
*/

/*
RESETS ------------------------
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: ;background: transparent;}


/*
MAIN CONTENT ------------------
*/

html, html a {
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
	background-color: #ffffff;
	color: black;
	display: none;
	text-shadow: none !important;
}

body a {
	color: inherit;
	text-decoration: none;
}

body a:hover {
	color: inherit;
	text-decoration: none;
}

.ui-body-c, .ui-overlay-c {
	text-shadow: none !important;
	background: transparent !important;
	border: none !important;
	font-weight: normal !important;
	z-index: 1 !important;
}

.ui-link {
	text-shadow: none !important;
}

a {
	text-shadow: none !important;
	font-weight: normal !important;
	border: none !important;
	color: inherit !important;
}

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 600ms !important;
}

p {
	margin-bottom: 1em;
}

/*
HEADER CONTENT ------------------
*/

#header-wrap, .header-wrap {
	position: fixed;
	width: 100%; height: 80px;
	background-color: white;
	top: 0; left: 0;
	z-index: 9999;
	outline: 1px solid #ffffff;
}

.header-content-wrap {
	position: absolute;
	width: 1838px; height: auto;
	top: 20px; left: 50%;
	margin-left: -919px;
	transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear;
}

@media only screen and (max-width: 1850px) {
.header-content-wrap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
.header-content-wrap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
.header-content-wrap {
	width: 450px;
	margin-left: -225px;
}
}

.header-content-social {
	float: right;
}

/*
GRID CONTENT ------------------
*/

#content-wrap, .content-wrap {
	position: absolute;
	width: 100%; height: auto;
	top: 80px; left: 0;
}

#main-grid, #news-grid, #press-grid, #recipes-grid {
	position: relative;
	margin: 0 auto;
	max-width: 1838px;
	min-width: 1838px;
	overflow: inherit !important;
}

@media only screen and (max-width: 1850px) {
#main-grid {
	max-width: 1378px;
	min-width: 1378px;
}
}

@media only screen and (max-width: 1850px) {
#news-grid {
	max-width: 1378px !important;
	min-width: 1378px !important;
}
}

@media only screen and (max-width: 1850px) {
#press-grid {
	max-width: 1378px !important;
	min-width: 1378px !important;
}
}

@media only screen and (max-width: 1850px) {
#recipes-grid {
	max-width: 1378px !important;
	min-width: 1378px !important;
}
}

@media only screen and (max-width: 1400px) {
#main-grid {
	max-width: 915px;
	min-width: 915px;
}
}

@media only screen and (max-width: 1400px) {
#news-grid {
	max-width: 915px !important;
	min-width: 915px !important;
}
}

@media only screen and (max-width: 1400px) {
#press-grid {
	max-width: 915px !important;
	min-width: 915px !important;
}
}

@media only screen and (max-width: 1400px) {
#recipes-grid {
	max-width: 915px !important;
	min-width: 915px !important;
}
}

@media only screen and (max-width: 940px) {
#main-grid {
	max-width: 452px;
	min-width: 452px;
}
}

@media only screen and (max-width: 940px) {
#news-grid {
	max-width: 452px !important;
	min-width: 452px !important;
}
}

@media only screen and (max-width: 940px) {
#press-grid {
	max-width: 452px !important;
	min-width: 452px !important;
}
}

@media only screen and (max-width: 940px) {
#recipes-grid {
	max-width: 452px !important;
	min-width: 452px !important;
}
}

.grid-block {
	margin-bottom: 10px;
	background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
    cursor: pointer;
}

.small-width { width: 220px; }
.small-height { height: 220px; }
.medium-width { width: 450px; }
.medium-height { height: 450px; }
.large-width { width: 913px; }
.large-height { height: 910px; }

@media only screen and (max-width: 940px) {
.large-width { width: 450px; }
}

.recipes-grid .grid-block {
	background-color: white;
}

.grid-block-title-text {
	position: relative;
	top: 0; left: 0;
	margin: 10px;
	width: 100%; height: auto;
	font-family:'AdobeGaramondW01-Regula';
}

.text-column-wrap .grid-block-title-text {
	margin: 0px !important;
}

.recipes-grid .grid-block-title-text {
	color: #4c4c4c;
}

.recipe-image {
	position: absolute; 
	width: 430px; height: 330px; 
	left: 0; bottom: 0; 
	margin: 10px;
	background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

em, strong {
	font-style: normal;
	font-weight: normal;
	color: #dbe11d;
}

.large-title { font-size: 50px; line-height: 50px; }
.small-title { font-size: 35px; line-height: 35px; }

.medium-width .large-title { width: 55%; }

@media only screen and (max-width: 940px) {
.large-title { font-size: 35px; line-height: 35px; }
}

.grid-block-text-footer {
	position: absolute; 
	bottom: 0; left: 0;
	width: 210px;
	border-top: 1px solid;
	margin: 10px;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.small-width .grid-block-text-footer { 
	width: 200px !important; 
}

.grid-block-description-footer {
	position: absolute; 
	bottom: 0; left: 0;
	width: 85%;
	margin: 10px; margin-bottom: 20px;
	font-family:'Brandon Grot W01 Light';
	font-size: 17px; line-height: 20px;
	letter-spacing: 1px;
}

.grid-block-image-footer {
	position: absolute; 
	bottom: 0;
	margin: 10px;
}

.up-arrow {
	position: absolute; 
	bottom: 0; left: 0;
	width: 0; 
	left: 50%; margin-left: -15px;
	height: 0; 
	margin-bottom: -20px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid;
	z-index: 9999;
	display: none;
}

#click-our_company .up-arrow {
	border-bottom-color: #d2dee1;
}
#click-gallery .up-arrow {
	border-bottom-color: #d1d2d4;
}
#click-venue-oxton .up-arrow {
	border-bottom-color: #f2e9c9;
}
#click-menu-wrap .up-arrow {
	border-bottom-color: #e5f5f9;
}
.news-item .up-arrow {
	border-bottom-color: #ffffff;
}

/*
TEXT CONTENT ------------------
*/

.grid-break {
	width: 893px;
	height: auto;
	background-color: #d2dee1;
	margin-bottom: 10px;
	padding-left: 10px; padding-right: 10px;
}

@media only screen and (max-width: 940px) {
.grid-break {
	width: 430px;
}
}

.grid-break-close {
	cursor: pointer;
}

.our_company {
	background-color: #d2dee1;
}
.gallery {
	background-color: #d1d2d4;
}
.venue-oxton {
	background-color: #f2e9c9;
}
.menu-wrap {
	background-color: #e5f5f9;
}
.news-item {
	background-color: #ffffff;
}

.text-header-wrap {
	position: relative;
	width: 890px; height: auto;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 30px; 
}

@media only screen and (max-width: 940px) {
.text-header-wrap {
	width: 430px;
}
}

#post-newsletter .text-header-wrap {
	width: 430px !important;
}

.text-column-wrap {
	position: relative;
	width: 100%; height: auto;
	margin-top: 40px;
	margin-bottom: 60px;
}

.text-column {
	display: inline-block;
	vertical-align: text-top;
}

.text-left-column {
	width: 420px; height: auto;
	margin-right: 75px;
}

@media only screen and (max-width: 940px) {
.text-left-column {
	margin-right: 0px !important;
	margin-bottom: 25px !important;
}
}

.text-right-column {
	width: 390px;
}

.text-column-title {
	position: relative;
	width: 310px; height: auto;
	font-family:'AdobeGaramondW01-Regula';
	font-size: 40px; line-height: 40px;
	margin-bottom: 20px;
}

.text-column-body-copy {
	position: relative;
	width: 100%; height: auto;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	font-size: 17px; line-height: 20px;
	margin-bottom: 30px;
}

.text-social-wrap {
	position: relative;
	width: 100%; height: auto;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 50px;
}

.text-social-link {
	margin-right: 0px;
}

.right-column-image {
	position: relative;
	margin-bottom: 10px;
}

@media only screen and (max-width: 940px) {
.right-column-image {
	width: 430px !important;
	height: auto !important;
}
}

/*
TEXT CONTENT — Newsletter Content ------------------
*/

.newsletter-wrap {
	position: relative;
	margin-top: 40px;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.text-column-wrap .wpcf7-email {
	position: relative;
	width: 410px !important; height: 20px;
	background-color: transparent !important;
	border: 1px solid #6d6e71 !important;
	moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	border-radius: 0px !important;
	font-family:'AdobeGaramondW01-Regula' !important;
	font-size: 17px !important;
	color: #6d6e71 !important;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

input:focus {
	outline: none !important; 
}

.newsletter-wrap .wpcf7-submit {
	position: relative;
	background-color: transparent !important;
	font-family:'Brandon Grot W01 Light' !important;
	color: #4c4c4c !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	border: none !important;
	padding-left: 0px !important;
	cursor: pointer !important;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
    
    moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	border-radius: 0px !important;
	z-index: 9999 !important;
}

.enquiry-content-wrap {
	position: relative;
	width: 1838px; height: 450px;
	margin-top: 45px; left: 50%;
	margin-left: -919px;
	margin-bottom: 250px;
	transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear;
}

@media only screen and (max-width: 1850px) {
.enquiry-content-wrap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
.enquiry-content-wrap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
.enquiry-content-wrap {
	width: 450px;
	margin-left: -225px;
}
}

.enquiry-content {
	position: relative;
	width: 430px; height: auto;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 17px; line-height: 20px;
}

.enquiry-form {
	position: relative;
	margin-top: 40px;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 2px;
}

.enquiry-form .wpcf7-text {
	position: relative;
	background-color: transparent;
	width: 100%; height: 25px;
	border: 1px solid #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 7px;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.enquiry-form .wpcf7-textarea {
	position: relative;
	background-color: transparent;
	width: 100%; height: 25px;
	border: 1px solid #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 7px;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

#mce-EMAIL {
	position: relative;
	background-color: transparent;
	width: 416px; height: 25px;
	border: 1px solid #4c4c4c !important;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 7px;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    -moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	border-radius: 0px !important;
}

.enquiry-form .wpcf7-textarea {
	height: 150px !important;
	resize: none;
}

textarea:focus {
	outline: none !important; 
}

.enquiry-form .wpcf7-submit, #mc-embedded-subscribe {
	position: relative;
	background-color: transparent;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: none;
	padding-left: 0px !important;
	cursor: pointer;
	-webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

/*
TEXT CONTENT — Enquiry Extras ------------------
*/

.venue-info-wrap {
	position: relative;
	width: 100%; height: auto;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
}

.venue-info-column {
	width: 200px; 
	display: inline-block;
	vertical-align: text-top;
}

.venue-info-left {
	margin-right: 10px;
}

.venue-info-title {
	position: relative;
	font-size: 15px; line-height: 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-top: 1px solid #4c4c4c;
	margin-bottom: 15px;
}

.venue-info-copy {
	position: relative;
	font-size: 17px; line-height: 20px;
}

/*
TEXT CONTENT — Gallery Extras ------------------
*/

.slideshow-wrap {
	position: relative; 
	width: 890px; height: 570px; 
}

@media only screen and (max-width: 940px) {
.slideshow-wrap {
	width: 430px !important; height: 275px !important;
}
}

.slide-back {
	position: absolute;
	left: 0; top: 50%;
	margin-top: -16px;
	z-index: 9999;
	cursor: pointer;
}

.slide-forward {
	position: absolute;
	right: 0; top: 50%;
	margin-top: -16px;
	z-index: 9999;
	cursor: pointer;
}

.slideshow {
	position: absolute;
	width: 100%; height: 100%;
	z-index: 1;
}

.slide {
	position: absolute;
	margin: auto;
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0;
	
}

/*
TEXT CONTENT — Menu Extras ------------------
*/

.menu-category-wrap {
	position: relative;
	width: 890px; height: auto;
}

@media only screen and (max-width: 940px) {
.menu-category-wrap {
	width: 430px;
}
}

.menu-category-header {
	position: relative;
	width: 100%; height: 90px;
	border-bottom: 1px solid black;
	cursor: pointer;
}

@media only screen and (max-width: 940px) {
.menu-category-header {
	height: 85px;
}
}

.menu-category-title {
	position: relative;
	font-family:'AdobeGaramondW01-Regula';
	font-size: 40px; line-height: 100px;
	color: #4c4c4c;
}

@media only screen and (max-width: 940px) {
.menu-category-title {
	font-size: 35px;
}
}

.menu-category-arrow {
	position: absolute;
	top: 45px; right: 0;
}

.menu-content-wrap {
	position: relative;
	width: 100%; height: auto;
	margin-top: 20px;
	margin-bottom: 60px;
	color: #4c4c4c;
	font-family:'Brandon Grot W01 Light';
	font-size: 17px; line-height: 20px;
	display: none;
}

.menu-category-wrap strong {
	color: #00b2d5;
	font-style: normal; font-weight: normal;
}

.menu-content-block {
	width: 430px; height: auto;
	vertical-align: text-top;
	padding-bottom: 15px;
	margin-bottom: 5px;
	border-bottom: 1px solid #4c4c4c;
}

.menu-content-block p {
	margin-bottom: 0em !important;
}

.menu-content-block:nth-child(odd) {  
  margin-right: 20px;
}

@media only screen and (max-width: 940px) {
.menu-content-block:nth-child(odd) {  
  margin-right: 0px;
}
}

.m-c-b {
	display: inline-block;
	vertical-align: text-top;
}

.menu-content-block-name {
	width: 350px;
	margin-right: 25px;
}

/*
TEXT CONTENT — News & Press Extras ------------------
*/

#news-header-wrap {
	position: relative;
	width: 1838px; height: auto;
	left: 50%; margin-left: -919px;
	color: #4c4c4c;
	margin-top: 25px; margin-bottom: 35px;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear;
}

@media only screen and (max-width: 1850px) {
#news-header-wrap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
#news-header-wrap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
#news-header-wrap {
	width: 450px;
	margin-left: -225px;
	font-size: 12px; line-height: 25px;
}
}

.news-date {
	position: relative;
	margin-top: 10px; margin-left: 10px;
	color: #ffffff;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px;
}

/*
CONTACT CONTENT ------------------
*/

#googleMap {
	position: relative;
	width: 1838px; height: 450px;
	margin-top: 20px; left: 50%;
	margin-left: -919px;
}

@media only screen and (max-width: 1850px) {
#googleMap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
#googleMap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
#googleMap {
	width: 450px;
	margin-left: -225px;
}
}

.contact-content-wrap {
	position: relative;
	width: 1838px; height: 450px;
	margin-top: 30px; left: 50%;
	margin-left: -919px;
}

@media only screen and (max-width: 1850px) {
.contact-content-wrap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
.contact-content-wrap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
.contact-content-wrap {
	width: 450px;
	margin-left: -225px;
}
}

.contact-navigation-wrap {
	position: relative;
	width: 100%; height: 50px;
	border-bottom: 1px solid black;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; 
	color: #4c4c4c;
	text-transform: uppercase;
	letter-spacing: 2px;
}

@media only screen and (max-width: 940px) {
.contact-navigation-wrap {
	font-size: 12px;
}
}

.contact-navigation-link {
	width: 25%; display: inline-block;
	float: left;
	text-align: center;
	cursor: pointer;
}

.contact-navigation-link:first-child {
	text-align: left;
}
.contact-navigation-link:last-child {
	text-align: right;
}

.contact-content {
	position: relative;
	width: 450px; height: auto;
	margin-top: 20px;
	font-family:'Brandon Grot W01 Light';
	color: #4c4c4c;
	font-size: 17px; line-height: 20px;
	display: none;
}

#contact-content-oxton {
	display: inherit;
}

.contact-content-column {
	position: relative;
	width: 215px;
	display: inline-block;
	vertical-align: text-top;
}

.contact-content-column:first-child {
	margin-right: 10px;
}

.contact-content-header {
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 17px;
}


/*
FOOTER CONTENT ------------------
*/

#footer-wrap {
	position: relative; 
	width: 1838px; height: auto; 
	left: 50%; margin-left: -919px;
	border-top: 1px solid #4c4c4c; 
	color: #4c4c4c;
	margin-top: 170px; margin-bottom: 60px;
	font-family:'Brandon Grot W01 Light';
	font-size: 15px; line-height: 30px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear;
}

@media only screen and (max-width: 1850px) {
#footer-wrap {
	width: 1378px;
	margin-left: -689px;
}
}

@media only screen and (max-width: 1400px) {
#footer-wrap {
	width: 915px;
	margin-left: -457px;
}
}

@media only screen and (max-width: 940px) {
#footer-wrap {
	width: 450px;
	margin-left: -225px;
	font-size: 12px; line-height: 21px;
	padding-top: 8px; padding-bottom: 30px;
}
}

.footer-left, .footer-center, .footer-right {
	width: 33.3%; float: left; display: inline-block;
}

.footer-center {
	text-align: center;
}

.footer-right {
	text-align: right;
}

@media only screen and (max-width: 940px) {
.footer-left, .footer-center, .footer-right {
	width: 100%; float: left; display: block;
	text-align: center;
}
}

/*
ISOTOPE CONTENT ------------------
*/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
      -ms-transition-duration: 0.5s;
       -o-transition-duration: 0.5s;
          transition-duration: 0.5s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/*
MOBILE CONTENT ------------------
*/


@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}