/* == GENERAL RULES ===============================*/

a
{
color:#9f0;
text-decoration:none;
outline:none;
}

html
{
background:#dcdcdc;
}

html, body
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-weight:300;
background:#f39;
height:100%;
}

p, h3
{
color:#000;
line-height:1.75;
}


/* == HEADER ===================================== */

header
{
padding:7% 7.5%;
background:url(slider/Apartment-6_bed_sharp_dk.jpg);
background-size:cover;
}

#book header {background:url(slider/station_m.jpg);}
#loc header {background:url(slider/Scenery_11_m.jpg);}
#con header {background:url(slider/Swans-Conwy-2021-195_m.jpg);}
#apt_1 header {background:url(slider/flat1_0369_a_m.jpg);}
#apt_2 header {background:url(slider/flat2_0549_a_m.jpg);}
#apt_4 header {background:url(slider/apartment-4_4278-Edit_m.jpg);}
#apt_6 header {background:url(slider/flat6_0612_a_m.jpg);}
#apt_10 header {background:url(slider/flat10_3F2B9339_m.jpg);}
#rm_7 header {background:url(slider/Room_7_m.jpg);}
#rm_8 header {background:url(slider/Room-8_m.jpg);}
#rm_9 header {background:url(slider/jacha210523_interiors1307413074_online_m.jpg);}
#not_found header {background:#4a4934;}

header h1 a, #aa a {color:#fff;font-weight:300;}

.f-b
{
display:inline-block;width:27px;height:27px;background-image:url(graphics/f-b.png);background-size:cover;
}

.tw
{
display:inline-block;margin-left:0.25em;width:27px;height:27px;background-image:url(graphics/in.png);background-size:cover;
}


/* == NAV ======================================== */

nav
{
margin-top:-8.05%;margin-right:-8.625%;margin-left:-8.625%;
margin-bottom:2em;
padding-left:8.625%;
border-top:0.125em solid #999;
}

nav a
{
display:inline-block;margin-right:1em;padding:0.5em 0;
line-height:1.75;
font-size:0.8em;
font-weight:400;
color:#f30;
}

nav span
{
clear:both;
display:block;
}

nav span + span
{
margin-top:1px;
}

nav span a
{
clear:none;margin-left:2px;width:1.5em;text-align:center;background:#f30;color:#fff;line-height:1;
}

nav span a:hover
{
background:#9f0;color:#fff;
}

nav span a.no_lnk
{
margin-right:1em;margin-left:0;width:none;border:0;background:none;color:#f30;
}


/* == STRIP ====================================== */

#strip
{
position:relative;
border-top:0.25em solid #f30;
background:#9f0;z-index:1;
}

.strip_t {display:table;width:100%;}
.strip_tr {display:table-row;}

div.one {display:block;float:left;clear:right;padding:1.3em 0 1.3em 0;width:100%;text-align:center;}
div.one div {margin-bottom:0.75em;color:#9f0;}
#strip div.two {display:block;float:left;clear:left;padding-bottom:1.5em;width:100%;text-align:center;}
p.two {line-height:1.75;color:#f30;font-weight:400;}
#strip div.three {display:none;}
#strip div.one div {color:#f30;}

div.one a {display:inline-block;margin-right:0.5em;height:2em;width:2em;line-height:2;text-align:center;font-size:0.9em;font-weight:800;background:#f30;color:#fff;}

div.one a:hover {background:#9f0;}
#strip div.one a:hover {background:#f39;}


/* == CONTENT ===================================== */

.content
{clear:both;
margin:0 7.5%;
}

.main_article
{
position:relative;z-index:1;background:#f39;#333;#ccc;#dcdcdc;padding-bottom:3em;border-top:0.25em solid #99FF00;#97C725;#39c;padding-top:1em;
}

.main_article.no_border {border:none;}

.main_article p, .main_article ul, h3 {margin:0 auto;padding-bottom:1.75em;}

.main_article ul {list-style-type:circle;color:#000;line-height:1.75em;}

.main_article li {margin:0 2em;}

.main_article p:first-of-type:first-letter {display:block;float:left;font-size:350%;margin-top:0.15em;margin-right:0.05em;color:#99FF00;#97C725;#39c;line-height:0.65;}

div.down {position:absolute;bottom:0.25em;right:0;left:0;text-align:center;}

.down img
{margin:0 auto;
padding-bottom:0.05em;
width:35px;
}

.down img:hover
{padding-top:0.05em;
padding-bottom:0;
}

.picture_grid
{
margin:0 auto;padding:2em 0;width:100%;
}

.picture_grid a.thumb, .picture_grid a.thumb_gal2
{
float:left;width:19%;padding-top:19%;margin:0 1.25% 1.25% 0;
}

.picture_grid a.wide_dbl
{
width:39.25%;
}

.picture_grid a.ri
{
margin-right:0;
}

.main_article div.one
{
clear:both;float:none;display:block;margin:0 auto;text-align:center;
}

div.one a + div
{
padding-top:1em;
}


/* == TYPOGRAPHY ================================== */

h1, h2, #strap
{
color:#9f0;
}

#strap
{
color:#fff;
}

#strap a, .home h2 a
{
color:#f39;
}

.home h1, #aa
{
font-size:1.75em;
line-height:0.9;
letter-spacing:-0.05em;
padding-bottom:0.3em;
text-shadow:0 0 2px rgba(0,0,0,0.5);
}

.home h2, #strap
{
font-size:1em;
text-shadow:0 1px 0 rgba(0,0,0,0.25), 0 -1px 0 rgba(255,255,255,0.1);
padding-bottom:1em;
}


.home h2 {color:#fff;}

.main_article h1, .main_article h2
{
margin:0 auto;
}

.main_article h1
{
font-size:1.5em;line-height:1.25;
}

.main_article h2
{
font-size:1em;line-height:1.75;
}

.centre_img
{
margin:0;margin-top:1em;margin-bottom:2em;width:100%;
}


h3
{
font-weight:300;color:#333;font-style:italic;
}

div.map {
    display:block;position: relative;margin:1em auto 2em auto;
    padding-bottom: 58.25%;
    height: 0; width:100%;overflow: hidden;
}

div.map div
{
display:block;
}

.map iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* == FOOTER ====================================== */

footer {clear:both;background:#f30;#96937e;margin:0;padding:1em;line-height:2;font-size:65%;text-shadow:0 1px 1px rgba(255,255,255,0.5);text-align:center;}

footer p
{
font-weight:600;color:#000;
}

footer p a
{
color:#000;
border-bottom:1px dotted #333;
}

footer p a:hover
{
color:#000;
}


/* == FORM ====================================== */

label
{
margin-right:1em;
}

input
{
border:0;
border-bottom:1px dotted #000;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:300;
color:#9f0;
background:#f39;
}

textarea
{
display:block;
padding:0.5em;
border:1px dotted #000;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:300;
color:#9f0;
background:#f39;
}

.submit
{
display:inline-block;padding:0 1em;height:2em;line-height:2;text-align:center;font-size:0.9em;font-weight:800;background:#f30;color:#fff;text-shadow:0 0 1px rgba(51,153,204,1);border:0;cursor:pointer;
}

.submit:hover {background:#9f0;}

span.note_bad {margin:0 auto;display:block;color:red;}
span.note_good {margin:0 auto;display:block;color:#99FF00;#97C725;#39c;}

.t_c {padding:1em;text-align:center;font-size:.625em;background:rgba(51,51,51,.2);}


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

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)
{
.f-b {background-image:url(graphics/f-b@x2.png);}
.tw {background-image:url(graphics/in.png);}
}

@media screen and (min-width: 580px)
{
body {font-size: 112.5%;}
#slide_wrap {min-height:100%;}
header {background:none;}
.home h2, #strap, p, ul {font-size: 90%;}
nav {position:absolute;top:0;right:7.5%;margin:0 0 2em 0;padding-top:1em;padding-bottom:0;font-size:100%;background:url(graphics/nav_arrow_red.png) no-repeat right top;background-size:1em auto;border:none;}
nav a {float:right;clear:right;margin-top:0.25em;margin-right:0;padding:0;font-weight:300;color:#f30;#96937e;border-bottom:1px solid transparent;text-shadow:0 1px 0 rgba(255,255,255,0.1);line-height:1.5;}
nav a:hover {color:#9f0;}
nav span a
{
line-height:1.5;
}
#strip {box-shadow:0 3px 5px 0 rgba(0,0,0,0.5);}
#strip div.two p {margin:0 auto;width:67%;}
.main_article {padding-top:2em;}

span.note_bad, span.note_good {font-size:90%;}

#book header {background:url(slider/station.jpg);background-size:cover;}
#loc header {background:url(landscapes/Scenery_11.jpg);background-size:cover;}
#con header {background:url(landscapes/Swans-Conwy-2021-195.jpg);background-size:cover;}
#apt_1 header {background:url(slider/flat1_0369_a.jpg);background-size:cover;}
#apt_2 header {background:url(slider/flat2_0549_a.jpg);background-size:cover;}
#apt_4 header {background:url(slider/apartment-4_4278-Edit.jpg);background-size:cover;}
#apt_6 header {background:url(slider/flat6_0612_a.jpg);background-size:cover;}
#apt_10 header {background:url(slider/flat10_3F2B9339.jpg);background-size:cover;background-position:bottom center;}
#rm_7 header {background:url(slider/Room_7.jpg);background-size:cover;}
#rm_8 header {background:url(slider/Room-8.jpg);background-size:cover;}
#rm_9 header {background:url(slider/jacha210523_interiors1307413074_online.jpg);background-size:cover;}
}

@media screen and (min-width: 580px)
{

}

@media screen and (min-width: 680px)
{
body {font-size: 125%;}
.home h2, #strap, p, h3, ul {font-size: 80%;}
.down img {width:70px;}
div.one {padding-right:2em;}
.main_article p, .main_article ul, h1, h2, h3 {width:57%;}
.main_article li {margin:0 3em;}
.centre_img {margin:0 12.5%;margin-top:1em;margin-bottom:2em;width:75%;}
.picture_grid {margin:0 auto;padding:2em 0;width:75%;}
div.map {width:75%;}

span.note_bad, span.note_good {width:57%;font-size:80%;}
}

@media screen and (min-width: 780px)
{
body {font-size: 137.5%;}
.home h2, #strap {font-size: 70%;}
.f-b, .tw {width:36px;height:36px;}
p, ul {font-size: 70%;}
div.one a {font-size:0.6em;}
div.one {float:none;display:table-cell;width:43%;padding:2.3em 2em 2.3em 0;vertical-align:middle;text-align:left;}
#strip div.two {float:none;display:table-cell;width:43%;padding:1em 1em;vertical-align:middle;text-align:center;border-left:1px dotted #f30;}
p.two {line-height:2;font-weight:300;}
#strip div.two p {margin:0;width:100%;}
#strip div.three {float:none;display:table-cell;width:14%;background:#fff;}
#slidecaption div {position:absolute;top:0;right:0;bottom:0;left:80.5%;background-size:cover !important;background-position:center !important;}
.main_article #accommodation {background:none;}
.main_article div.one {padding-left:2em;}

span.note_bad, span.note_good {font-size:70%;}
}

@media screen and (min-width: 900px)
{
body {font-size: 150%;}
.home h2, #strap {font-size: 65%;}
#strip div.two {padding:1em 2em;}
}

@media screen and (min-width: 1280px)
{
body {font-size: 175%;}
#strip div.two {padding:1em 3em;}
.down img {width:105px;}
footer {font-size:60%;}
}

@media screen and (min-width: 1700px)
{
body {font-size: 200%;}
.down img {width:140px;}
footer {font-size:50%;}
}