/*
Theme Name: Old Queen Street
Author: Sebastian Giraud / UnHerd
*/

html, body { background-color: #ded2c1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.container-fluid, #hero { max-width: 1400px; margin: 0 auto; }
header#header { display: block; }
header#mobile { display: none; }

#branding { padding-top: 4vh; padding-bottom: 4vh; font-family: 'Gridstar Regular'; }
#branding .row { margin: 0; }
#branding a { color: #ff3543; display: block; position: relative; text-align: center; letter-spacing: 5px; font-size: 13px; transition: ease-in-out 0.5s; }
#branding a:hover { text-decoration: none; color: #34504f; transition: ease-in-out 0.5s; }
#branding img.logo { width: 100%; height: inherit; }
#branding .dot { color: #ff3543; font-size: 40px; text-align: center; }

#hero { padding: 25vh 0; margin: 0 auto 5%; width: 92%; border: 2px solid #ff3543; }
#hero h1 { font-family: 'Gridstar Regular'; color: #FFF; font-size: 30px; letter-spacing: 5px; text-align: center; text-shadow: 0px 0px 20px rgba(0,0,0,0.9); margin-bottom: 40px; }
#hero a.menu { background: #ff3543; color: #FFF; transition: ease-in-out 0.5s; text-decoration: none; border: 2px solid #FFF; opacity: 0.8; transition: ease-in-out 0.5s;  }
#hero a.menu:hover { transition: ease-in-out 0.5s; opacity: 1; }

#blue { background: #4c7170; color: #FFF; padding: 15vh 4%; font-family: 'Times Regular'; background-position-x: 0; background-size: 50%; background-position: right -20% bottom 55%; background-repeat: no-repeat; line-height: 150%;}
#blue.cow { background-image: url('/wp-content/uploads/2022/10/OQS_COW_RGB_DARK_TEAL.png'); }
#blue, .text, #blue p, .text p, #menus p { line-height: 140%; letter-spacing: 0.2px; font-size: 18px; }

#halfimg.container-fluid.row { padding-left: 0; padding-right: 0; }
#halfimg .half-image { background-size: cover; background-position: center center; }
#halfimg .half-text { background: #345150; background-image: url('/wp-content/uploads/2022/11/about-us.jpg'); background-size: 190px 213px; background-repeat: no-repeat; background-position: left top; padding-top: 20px; }
#halfimg .half-text.left { background-image: url('/wp-content/uploads/2022/11/our-restaurant.jpg') !important; background-size: 317px 148px; padding-top: 20px; }
#halfimg .half-text.left .text { padding-right: 60px; }
#halfimg .half-text.row { margin-right: 0; margin-left: 0; }
#halfimg .half-text .outer { font-family: 'Gridstar Regular'; color: #ded2c1; font-size: 36px; }
#halfimg .half-text .outer .dot { font-size: 52px; line-height: 36px; vertical-align: top; }
#halfimg .half-text .outer.vertical {  transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); display: block; position: absolute; top: -10px; left: 150px; right: 10px; bottom: 0px; text-align: right; }
#halfimg .half-text .text { color: #FFF; padding-top: 65px; padding-left: 75px; padding-right: 75px; padding-bottom: 60px; line-height: 150%; }

#menus { padding: 10vh 0; }
#menus h3 { color: #345150; font-family: 'Gridstar Regular'; text-align: center; letter-spacing: 5px; font-size: 16px; transition: ease-in-out 0.5s; margin-bottom: 20px; }
#menus p { text-align: center; margin-bottom: 5vh; }
#menus p a { border-bottom: 1px solid #ff3543; text-decoration: none; color: #000; }
a.menu { display: block; width: 100%; padding: 20px; border: 2px solid #ff3543; color: #ff3543; font-family: 'Gridstar Regular'; text-align: center; letter-spacing: 5px; font-size: 13px; transition: ease-in-out 0.5s; margin-bottom: 20px; }
a.menu:hover { background: #ff3543; color: #FFF; transition: ease-in-out 0.5s; text-decoration: none; }

#footer { border-top: 2px solid #ff3543; border-bottom: 2px solid #ff3543; padding: 0 20px; width: 92%; margin-bottom: 5vh; text-align: center; }
#footer a { display: inline-block; vertical-align: middle; margin: 0 20px; }
#footer a:first-child { margin-left: 0; }
#footer a:last-child { margin-right: 0; }
#footer a.icon img { max-height: 20px; }

@font-face { font-family: 'Gridstar Regular'; font-style: normal; font-weight: normal; src: url('/wp-content/themes/OQSCafe/assets/fonts/Gridstar-Regular.woff') format('woff'); }
@font-face { font-family: 'Times Regular'; font-style: normal; font-weight: normal; src: url('/wp-content/themes/OQSCafe/assets/fonts/TimesRegular.ttf') format('ttf'); }

@media (max-width: 1250px) {
	#hero { padding: 18vh 0 15vh; }
	#hero h1 { padding: 0 10%; }
	a.menu { padding: 20px 0px; font-size: 12px; }
	
	#branding a { font-size: 12px; }
	
	#blue { padding: 12vh 4%; }
	#blue, .text, #blue p, .text p, #menus p { font-size: 16px; }
}

@media (max-width: 1025px) {
	#branding .col-sm-4 { padding: 0 !important; }
	#menus a.menu { line-height: 70px; height: 70px; padding: 0 15px; }
	#menus a.menu .label { display: inline-block; vertical-align: middle; line-height: 100%; margin-top: -8px; }
}

@media (max-width: 900px) {
	#halfimg .half-text.left .text, #halfimg .half-text .text { margin-right: 40px; }
	#hero a.menu { padding: 20px 10px; font-size: 8px; }
	#blue { padding: 10vh 4%; } 
	#halfimg .half-text .text { padding-right: 50px; }
	#blue, .text, #blue p, .text p, #menus p { font-size: 15px; line-height: 140% !important; }
	#branding a { font-size: 9px; margin: 0 8px; }
}

@media (max-width: 850px) {
	header#header { display: none; }
	header#mobile { display: block; }
	
	header#mobile #branding a img.logo { max-width: 150px; margin-bottom: 5vh; }
	header#mobile #branding a.menuitem { display: block; width: 100%; padding: 13px 0; font-size: 13px; margin-bottom: 0; margin-top: 0; }
	header#mobile #branding .col-6 a.menuitem:first-child { border-top: 1.5px solid #ff3543; }
	header#mobile #branding .col-6 a.menuitem:last-child { border-top: 1.5px solid #ff3543; border-bottom: 1.5px solid #ff3543; }
	
	#hero a.menu { font-size: 12px; }
	#halfimg .half-text.left .text, #halfimg .half-text .text { margin-right: 0; }

	#branding a { display: block; margin: 10px auto; font-size: 12px; }
	#branding a.icon { display: inline-block; margin: 10px 10px; }
}

@media (max-width: 700px) {
	header#mobile #branding a img.logo { margin-bottom: 2vh; }
	
	#hero { padding: 15vh 0 13vh; }

	#halfimg .half-image, #halfimg .half-text.row { flex: 0 0 100%; max-width: 100%; }
	#halfimg .half-image { min-height: 40vh; }
	
	p.bookings { margin: 0 20%; }
}

@media (max-width: 580px) {
	#hero { padding: 11vh 0 6vh; } 
	#hero a.menu { font-size: 13px; padding: 20px 10px; margin: 10px 5%; width: 90%; }	

	#blue { padding: 5vh 20px; }
	#blue.cow { background-image: none; }
	
	#menus { padding-left: 30px; }
	#menus p { margin-bottom: 30px; }
	#menus a.menu { line-height: 60px; height: 60px; padding: 0 15px; margin-bottom: 15px; }
}

@media (max-width: 450px) {
	#hero h1 { padding: 0 5%; font-size: 24px; margin-bottom: 20px; }
	#hero a.menu { padding: 15px 0; }
	#blue, .text, #blue p, .text p, #menus p { font-size: 17px; }
	#halfimg .half-text .text, #halfimg .half-text.left .text { padding-right: 10px; }
	p.bookings { margin: 0 10%; }
	#branding a { font-size: 11px; }
	
	#menus { padding: 8vh 0 7vh 30px; }
}

/* Essential elements */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth}
body{line-height:1}
a{text-decoration-skip-ink:auto}
a[href^="tel"]{color:inherit;text-decoration:none}
button{outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none} 
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none}
q{display:inline;font-style:italic}
q:before{content:'"'; font-style:normal}
q:after{content:'"';font-style:normal}
textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit appearance:none;appearance:none;border-radius:0}
input[type="search"]{-webkit-appearance:textfield}
table{border-collapse:collapse;border-spacing:0}
th,td{padding:2px}
big{font-size:120%}
small,sup,sub{font-size:80%}
sup{vertical-align:super}
sub{vertical-align:sub}
dd{margin-left:20px}
kbd,tt{font-family:courier;font-size:12px}
ins{text-decoration:underline}
del,strike,s{text-decoration:line-through}
dt{font-weight:bold}
address,cite,var{font-style:italic}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}