/* RESET **********************************************************************/ 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:baseline;background:transparent; } body { line-height:1; } ol,ul { list-style:none; } blockquote,q { quotes:none; } blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; } ins { text-decoration:none; } del { text-decoration:line-through; } /**********************************************************************/ @font-face { font-family: 'Questrial Regular'; src: url('../fonts/questrial-regular-webfont.eot'); src: url('../fonts/questrial-regular-webfont.eot#iefix') format('embedded-opentype'), url('../fonts/questrial-regular-webfont.woff') format('woff'), url('../fonts/questrial-regular-webfont.ttf') format('truetype'), url('../fonts/questrial-regular-webfont.svg') format('svg'); font-weight: normal !important; font-style:normal; } html { -webkit-font-smoothing: antialiased; } html, body { width: 100%; height: 100%; background-color: #fff; font-size: 13px; font-weight: normal; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; } a { text-decoration: none; color: #444; } p { color: #888; font-size: 13px; line-height: 20px; padding-bottom: 20px; } h1 { font-size: 20px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 1px; line-height: 20px!important; margin: 15px auto 0; padding-bottom: 20px; } .clear { clear: both; display: none; } .container img { max-width: 100%; } /* MOBILE NAV STYLES */ #mobile-nav { display: block; float: right; padding: 0px; border: 0px solid red; margin: 0px; } #mobile-button { cursor: pointer; } #mobile-button button { background-color: transparent; color: #fff; margin: 0; padding: 0; border: 0px solid blue; width: 95px; height: 34px; cursor: pointer; } /* table styling - home & menu section */ table th { color: #fff; font-size: 16px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: bold; padding: 3px 0px; margin: 0; } table td { color: #000; font-size: 13px; line-height: 20px; padding: 1px 0px; margin: 0; } .small-meta { color: #FFF; font-weight: bold; fony: normal normal normal normal 9px/normal 'Lucida Grande'; text-rendering: auto; letter-spacing: normal; word-spacing: normal; } #menutable td { color: #000; font-size: 13px; line-height: 20px; padding: 1px 0px; margin: 0; } table input[type=text], table input[type=email] { border: 0px solid white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; padding: 8px; background: rgba(255,255,255,0.7); margin: 0 0 10px 0; color: #d52727; font-weight: bold; width: 180px; } table input[type=submit] { border: 0px solid white; padding: 8px 10px; background: #e37126; margin: 0 0 10px 0; color: #fff; margin-left: 10px; } /*FRAMEWORK*/ .section { width: 100%; height: 100%; height: auto !important; min-height: 100%; overflow-x: hidden; position: relative; } .container { margin-left: auto; margin-right: auto; overflow: hidden; position: relative; z-index: 1; max-width: 60em; } .container img { border: 7px solid #fff; max-width: 100%; } #contactus .container img { border: 0px; } #fixed { position: fixed; width: 100%; z-index: 5; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home-tablet.png) no-repeat top left; display: block; height: 74px; width: 195px; } #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top center fixed #ccc; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; background-size:230%; } #home .details { position: absolute; bottom: 0; width: 100%; } #home .details p { color: #fff; float: left; font-size: 13px; padding: 1em; } #home .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #home .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #home .details p span { font-size: 13px; vertical-align: top; } #home .details p.social_icon { display:none; } #cafe { background: #e37126; position: relative; z-index: 6; } #cafe h1 { color: #FFF; } #cafe p { color: #fff; } #cafe .container { /* background-color: #fff; */ margin-top: 35px; padding: 20px; margin-bottom: 40px; } #cafe a { opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #cafe a:hover { opacity: .65; filter:alpha(opacity=65); } #cafe .content_column1 { width: 100%; float: left; display: block; clear: none; text-align: center; } #cafe .content_column2 { width: 100%; float: right; display: block; clear: none; text-align: left; padding-bottom: 20px; } #cafe .details { position: absolute; z-index: 5; bottom: 0; width: 100%; } #cafe .details p { color: #fff; float: left; font-size: 13px; padding: 1em; } #cafe .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #cafe .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #cafe .details p span { font-size: .70em; vertical-align: top; } #cafe .details p.social_icon { display:none; } #vouchers { background: #dd5217; position: relative; z-index: 6; } #vouchers h1 { color: #FFF; } #vouchers p { color: #fff; } #vouchers .container { /* background-color: #fff; */ margin-top: 35px; padding: 20px; margin-bottom: 40px; } #vouchers a { opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #vouchers a:hover { opacity: .65; filter:alpha(opacity=65); } #vouchers .content_column1 { width: 100%; float: left; display: block; clear: none; text-align: center; } #vouchers .content_column2 { width: 100%; float: right; display: block; clear: none; text-align: left; padding-bottom: 20px; } #vouchers .details { position: absolute; z-index: 5; bottom: 0; width: 100%; } #vouchers .details p { color: #fff; float: left; font-size: 13px; padding: 1em; } #vouchers .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #vouchers .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #vouchers .details p span { font-size: .70em; vertical-align: top; } #vouchers .details p.social_icon { display:none; } #restaurant { background: url(../images/Menu-The-Union-Tapas-Restaurant.jpg) no-repeat center center fixed #ccc; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-size: 13px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/Menu-The-Union-Tapas-Restaurant.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/Menu-The-Union-Tapas-Restaurant.jpg', sizingMethod='scale')"; background-size: cover; } #restaurant h1 { color: #760000; } #restaurant p { color: #000; padding-bottom: 0px; margin-bottom: 0px; } #restaurant .container { background-color: #fff; margin-top: 35px; padding: 20px; margin-bottom: 40px; } #restaurant a { opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #restaurant a:hover { opacity: .65; filter:alpha(opacity=65); } #restaurant .content_column1 { width: 90%; float: none; display: block; clear: none; text-align: center; padding: auto; margin: auto; } #restaurant .content_column2 { width: 90%; float: none; display: block; clear: none; text-align: left; padding: auto; margin: auto; padding-bottom: 15px;} #restaurant .details { position: absolute; z-index: 5; bottom: 0; width: 100%; } #restaurant .details p { color: #fff; float: left; font-size: 13px; padding: 1em; } #restaurant .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #restaurant .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #restaurant .details p span { font-size: .70em; vertical-align: top; } #restaurant .details p.social_icon { display:none; } #functions { background: #760000; } #functions h1 { color: #fff; } #functions p { color: #fff; } #functions .container { /* background-color: #fff; */ margin-top: 35px; padding: 20px; margin-bottom: 40px;} #functions a { opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #functions a:hover { opacity: .65; filter:alpha(opacity=65); } #functions .content_column1 { width: 100%; float: left; display: block; clear: none; text-align: center; } #functions .content_column2 { width: 100%; float: left; display: block; clear: none; text-align: left; padding-bottom: 20px; } #functions .details { position: absolute; z-index: 5; bottom: 0; width: 100%; } #functions .details p { color: #fff; float: left; padding: 1em; } #functions .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #functions .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #functions .details p span { font-size: .70em; vertical-align: top; } #functions .details p.social_icon { display:none; } #contactus { background: url(../images/Contact-The-Union-Restaurant-Penrith.jpg) no-repeat center center fixed #ccc; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/Contact-The-Union-Restaurant-Penrith.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/Contact-The-Union-Restaurant-Penrith.jpg', sizingMethod='scale')"; } #contactus h1 { color: #760000; } #contactus p { color: #000; } #contactus .container { background-color: #fff; margin-top: 35px; padding: 20px; margin-bottom: 40px; } #contactus a { opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } #contactus a:hover { opacity: .65; filter:alpha(opacity=65); } #contactus .content_column1 { width: 95%; float: none; display: block; clear: none; padding: auto; margin: auto; } #contactus .content_column2 { width: 90%; float: none; display: block; clear: none; text-align: center; padding: auto; margin: auto; } #contactus .details { position: absolute; z-index: 5; bottom: 0; width: 100%; } #contactus .details p { color: #fff; float: left; font-size: 13px; padding: 1em; } #contactus .details p a { color: #fff; text-decoration: none; opacity: 1; filter:alpha(opacity=100); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } #contactus .details p a:hover { opacity: .65; filter:alpha(opacity=65); } #contactus .details p span { font-size: .70em; vertical-align: top; } #contactus .details p.social_icon { display:none; } /* FOOTER STYLES */ .footer { background-color: #e37126; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ text-align: center; margin: auto; padding: auto; width: 100%; padding-bottom: 10px; display: block; height: 30px; } .footer .copyright { width: 90%; display: block; float: left; clear: none; border: 0px solid yellow; text-align: left; font-size: 13px; color: #fff; padding: 1em 1.2em 0em 1.2em; } .footer .copyright a { font-size: 13px; color: #fff; } #nav { display:none; } #logos { display: block; width: 130px; text-align: center; float: left; height: 49px; overflow: visible; padding: 30px; } #logos li { opacity: 0; filter: alpha(opacity=0); position: absolute; } #logos li.current { opacity: 1; filter: alpha(opacity=100); z-index: 3; } #logos img { cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } #logos img:hover { opacity: .7; filter: alpha(opacity=70); } #logos li#one { margin-top: 40px; } li#two, li#three, li#four, li#five { display: none; } #mobile-button { display: block; float: right; padding: 10px; width: 95px; padding-top: 10px; height: 34px; } /* HOME FOOTER */ #details-contact { display: block; float: left; width: 100%; } #subscribe-form-wrapper, #subscribe-form { display: none; } #newsletter-signup { display: block; float: left; width: 150px; background-color: #e37126; border: 0px solid pink; padding: 8px; color: #fff; margin-top: 5px; margin-left: 0.8em; } /* CONTACT FORM STYLES */ .gform_wrapper .top_label .gfield_label { color: #d52727; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-size: 13px; padding: 0px; margin: 0px; } .gfield_required { color: #d52727; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-size: 13px; } .gform_wrapper input[type=email],.gform_wrapper input[type=text],.gform_wrapper input[type=tel],.gform_wrapper input[type=number],.gform_wrapper input[type=password]{ background:#FAFAFA;border:1px solid #EAEAEA;box-shadow:none;border-radius:2px;font-size:1.3rem !important;font-size:13px !important;height:20px } .gform_wrapper textarea{background:#FAFAFA;border:1px solid #EAEAEA;box-shadow:none;border-radius:2px;font-size:1.3rem !important;font-size:13px !important} .gform_wrapper ul li.gfield{margin-bottom:6px} .gform_wrapper #field_1_1,.gform_wrapper #field_1_2{width:48%;float:left;clear:none} .gform_wrapper #field_1_2{margin-left:4% !important} .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] { color: #fff; background: #d52727; border-radius: 2px; border: none; text-shadow: none; text-transform: uppercase; padding: 8px 10px; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { #logos li#one { margin-top: 60px; } #home { /* border: 0px solid orange; background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top center fixed #ccc; background-size:200%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home.jpg', sizingMethod='scale')"; */ } #home_logo { background: url(../images/The-Union-Restaurant-logo-home.png) no-repeat top left; display: block; width: 332px; height: 124px; /* height: 155px; width: 415px; */ background-size: 332px 124px; } /* TWO COLUMNS FOR ALL SECTION CONTENT */ #cafe .container { /* background-color: #fff; */ margin-top: 178px; padding: 20px; font-size: 13px; } #cafe .content_column1 { width: 28%; float: left; display: block; clear: none; text-align: left; font-size: 13px; } #cafe .content_column2 { width: 67%; float: right; display: block; clear: none; text-align: left; font-size: 13px; } #vouchers .container { /* background-color: #fff; */ margin-top: 178px; padding: 20px; font-size: 13px; } #vouchers .content_column1 { width: 28%; float: left; display: block; clear: none; text-align: left; font-size: 13px; } #vouchers .content_column2 { width: 67%; float: right; display: block; clear: none; text-align: left; font-size: 13px; } #restaurant .container { /* background-color: #fff; */ margin-top: 178px; padding: 20px; padding-bottom: 5px; } #restaurant .content_column1 { width: 28%; float: left; display: block; clear: none; text-align: left; } #restaurant .content_column2 { width: 67%; float: right; display: block; clear: none; text-align: left; padding-bottom: 15px; } #functions .container { /* background-color: #fff; */ margin-top: 178px; padding: 20px; } #functions .content_column1 { width: 28%; float: left; display: block; clear: none; text-align: left; } #functions .content_column2 { width: 67%; float: right; display: block; clear: none; text-align: left; } #contactus .container { /* background-color: #fff; */ margin-top: 178px; padding: 20px; } #contactus .content_column1 { width: 52%; float: left; display: block; clear: none; text-align: left; } #contactus .content_column2 { width: 47%; float: right; display: block; clear: none; text-align: right; padding-top: 20px; } /* HOME FOOTER */ #details-contact { display: block; float: left; width: 60%; } #newsletter-signup { display: block; float: right; width: 150px; background-color: #e37126; border: 0px solid pink; padding: 8px; margin-right: 1em; color: #fff; margin-top: 5px; } } /* Tablet Layout: (landscape) Inherits styles from: Tablet (portrait) Layout. */ @media only screen and (min-width: 830px) { /* was 769 */ /*#nav { display:none; } */ #logos { display: block; width: 130px; text-align: center; float: left; height: 49px; overflow: visible; padding: 30px; } #logos li { opacity: 0; filter: alpha(opacity=0); position: absolute; } #logos li.current { opacity: 1; filter: alpha(opacity=100); z-index: 3; } #logos img { cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } #logos img:hover { opacity: .7; filter: alpha(opacity=70); } #logos li#one { margin-top: 60px; } li#two, li#three, li#four, li#five { display: block; } /*NAVIGATION*/ #logos { display: block; width: 130px; text-align: center; float: left; height: 49px; overflow: visible; padding: 30px; } #logos li { opacity: 0; filter: alpha(opacity=0); position: absolute; } #logos li.current { opacity: 1; filter: alpha(opacity=100); z-index: 3; } #logos img { cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } #logos img:hover { opacity: .7; filter: alpha(opacity=70); } #mobile-button { display: none; } #nav { display: block; float: right; padding: 30px; z-index: 100; } #nav li { margin: 0 -3px; display: inline-block; font-size: 18px; font-family: Verdana, Geneva, sans-serif; padding: 0.5em 1em; z-index: 100; } #nav li a { color: #fff; text-decoration: none; cursor: pointer; } #nav li a:hover { opacity: .7; filter:alpha(opacity=70); } #nav li.current a { color: #fff; } #nav li.current a:hover { opacity: 1; filter:alpha(opacity=100);} #nav li.home { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #d52727; border-top-left-radius: 25px; -moz-border-radius-topleft: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-left-radius: 25px; padding-top: 8px; padding-bottom: 8px; } #nav li.cafe { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #e37126; padding-top: 8px; padding-bottom: 8px; } #nav li.restaurant { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #dd257f; padding-top: 8px; padding-bottom: 8px; } #nav li.functions { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #760000; padding-top: 8px; padding-bottom: 8px; } #nav li.vouchers { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #dd5217; padding-top: 8px; padding-bottom: 8px; } #nav li.contactus { font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; background-color: #a41411; border-top-right-radius: 25px; -moz-border-radius-topright: 25px; -moz-border-radius-bottomright: 25px; border-bottom-right-radius: 25px; padding-top: 8px; padding-bottom: 8px; } .home #nav li.current a { color: #fff; } .home #nav li a { color: #fff; } .cafe #nav li.current a { color: #fff; } .cafe #nav li a { color: #fff; } .restaurant #nav li.current a { color: #fff; } .restaurant #nav li a { color: #fff; } .functions #nav li.current a { color: #fff; } .functions #nav li a { color: #fff; } .vouchers #nav li.current a { color: #fff; } .vouchers #nav li a { color: #fff; } .contactus #nav li.current a { color:#fff; } .contactus #nav li a { color: #fff; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home.png) no-repeat top left; display: block; width: 332px; height: 124px; background-size: 332px 124px; /* height: 155px; width: 415px; */ } /* DISPLAY SOCIAL SHARE ICON */ #cafe .details p.social_icon { display: block; float: right; font-size: 13px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; } #restaurant .details p.social_icon { display: block; float: right; font-size: 13px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; } #functions .details p.social_icon { display: block; float: right; font-size: 13px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; } #vouchers .details p.social_icon { display: block; float: right; font-size: 13px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; } #contactus .details p.social_icon { display: block; float: right; font-size: 13px; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; } /* HOME FOOTER */ #newsletter-signup { display: none; } #subscribe-form-wrapper { display: block; float: right; width: 369px; height: 388px; border: 0px solid yellow; text-align: right; background-image: url(../images/The-Union-bull-large.png); background-repeat: no-repeat; } #subscribe-form { display: block; margin-top: 190px; margin-left: 80px; z-index: 5; } #details-contact { display: block; float: left; width: 50%; border: 0px solid pink; margin-top: 338px; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 930px) { #logos li#one { margin-top: 40px; } #home { background: url(../images/The-Union-Restaurant-Penrith-Home.jpg) no-repeat center center fixed #ccc; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home.jpg', sizingMethod='scale')"; background-size: cover; } } /* webkit-keyframes: Make a div element move gradually down */ @-webkit-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: reset, fadeIn; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; } .invisible { visibility: hidden; } /* IPHONE4 ADJUSTMENT LAYOUTS */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top left fixed #ccc; -webkit-background-size: contain; -moz-background-size:contain; -o-background-size: contain; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; background-size: contain; } */ } /* IPAD ADJUSTMENT LAYOUTS */ /* Page background-image landscape for iPad 3 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top left fixed #ccc; -webkit-background-size: contain; -moz-background-size:contain; -o-background-size: contain; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; background-size: contain; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home-2x.png) no-repeat top left; display: block; background-size: cover; width: 332px; height: 124px; /* height: 155px; width: 415px; */ background-size: cover; } #subscribe-form-wrapper { display: block; float: right; width: 369px; height: 388px; background-size: cover; border: 0px solid yellow; text-align: right; background-image: url(../images/The-Union-bull-large-2x.png)no-repeat top left; } } /* Page background-image portrait for iPad 3 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top center fixed #ccc; background-size:200%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home-2x.png) no-repeat top left; display: block; width: 332px; height: 124px; /* height: 155px; width: 415px; */ background-size: cover; } } /* Page background-image landscape for iPad 1/2 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top left fixed #ccc; -webkit-background-size: contain; -moz-background-size:contain; -o-background-size: contain; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; background-size: contain; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home-2x.png) no-repeat top left; display: block; width: 332px; height: 124px; /* height: 155px; width: 415px; */ background-size: cover; } #subscribe-form-wrapper { display: block; float: right; width: 369px; height: 388px; background-size: cover; border: 0px solid yellow; text-align: right; background-image: url(../images/The-Union-bull-large-2x.png)no-repeat top left; } } /* Page background-image portrait for iPad 1/2 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { #home { background: url(../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg) no-repeat top center fixed #ccc; background-size:200%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/The-Union-Restaurant-Penrith-Home-Tablet.jpg', sizingMethod='scale')"; } #home_logo { background: url(../images/The-Union-Restaurant-logo-home-2x.png) no-repeat top left; display: block; h width: 332px; height: 124px; /* height: 155px; width: 415px; */ background-size: cover; } } /***************************** Inline Menu links, ******************************/ .inpage_menus { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin:20px 0; } .inpage_menus a { background-color: #d52727; padding: 10px 20px; color: white; font-family: 'Questrial Regular', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 18px; transition: transform 0.2s; } #restaurant .inpage_menus a { transition: transform 0.2s; opacity: 1; } .inpage_menus a:hover { transform: scale(1.1); } .inpage_menus a:first-child { border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .inpage_menus a:last-child { border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .inpage_menus a:nth-child(1) { background-color: #d52727; } .inpage_menus a:nth-child(2) { background-color: #dd257f; } .inpage_menus a:nth-child(3) { background-color: #760000; } .inpage_menus a:nth-child(4) { background-color: #dd5217; } .inpage_menus a:nth-child(5) { background-color: #a41411; } .header-menu_small { justify-content: flex-end; align-items: center; display: flex; width: 100%; padding: 0 30px; box-sizing: border-box; } .header-menu_small .inpage_menus { margin: 0; } .header-menu_small .inpage_menus a { font-size: 13px; padding: 8px 16px; } .header-menu_small .inpage_menus a:nth-child(1) { background-color: #a41411; } .header-menu_small .inpage_menus a:nth-child(2) { background-color: #dd5217; } .header-menu_small .inpage_menus a:nth-child(3) { background-color: #dd257f; } .header-menu_small .inpage_menus a:nth-child(4) { background-color: #760000; } .header-menu_small .inpage_menus a:nth-child(5) { background-color: #d52727; } @media (max-width: 768px) { .header-menu_small { display: none; } }