@font-face {
    font-family: 'ralewayregular';
    src: url('/fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('/fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('/fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('/fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaythin';
    src: url('/fonts/raleway-thin-webfont.woff2') format('woff2'),
         url('/fonts/raleway-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
Dark blue: #505160
Light blue: #68829E
Light green: #aebd38
Dark green: #598234

Light pink: #be38f3
Darker pink: #ed719e

Red: #ed719e
Royal Blue: #4169e1
*/



 * {
  box-sizing: border-box;
}

body {
font-size:16px;
font-family: 'ralewayregular';
color:#222;
background-color:#B9C4C9;
}
/*
background:url("/images/bgpic.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center; 
*/
a {
text-decoration:none;
color:#52958B;
font-family: 'ralewaysemibold';
}
a:hover {
color:#128277;
}
p {
line-height:1.5em;
}
.bold {
font-weight:bold;
}
ul {
margin:16px 0;
}
ul.tick {
list-style-type:none;
padding-left:20px;
}
.tick li {
text-align:left;
line-height:2em;
}
.tick li::before {
font-family: 'Font Awesome\ 5 Free';
content: "\f00c\0020\0020";
font-weight:600;
}

.scrollToTop {
text-align: center;
position: fixed;
bottom: 75px;
right: 40px;
display: none;
width: 56px;
height: 56px;
background-color: #128277;
color: #ffffff;
line-height: 54px;
border-radius: 50%;
padding:0;
}
.scrollToTop:hover {
cursor:pointer;
background-color:#52958B;
color: #ffffff;
}

#main_banner {
width:810px;
height:120px;
}
#wrapper {
max-width:1200px;
margin:0 auto;
background-color:#ffffff;
padding:20px 30px 0 30px;
text-align:center;
position:relative;
}
#wrapper::after {
    clear:both;
    display: block;
    content: " ";
}
h1 {
text-align:center;
font-size:3.3em;
margin:20px 0 0 0;
color:#004D47;
}

h1:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 30%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #B9C4C9; /* This creates the border. Replace black with whatever color you want. */
}

h2 { /* Self Catering Cottages on the stunning Isle of Arran */
font-family: 'ralewaythin';
text-align:center;
font-size:1.7em;
}

h3 {
font-family: 'ralewayregular';
text-align:center;
font-size:1.3em;
margin-top:30px;
}
h3:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 30%; /* Change this to whatever width you want. */
    padding-top: 7px; /* This creates some space between the element and the border. */
    border-bottom:1px solid #004D47; /* This creates the border. Replace black with whatever color you want. */
}
h4 {
font-family: 'ralewayregular';
text-align:center;
font-size:1.1em;
margin-top:30px;;
}
h5 {
margin-top:0;
}

.f-nav{  /* To fix main menu container */
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
border-bottom:1px solid #ccc;
}
.menu.f-nav a {
font-size:14px;
padding: 0 15px;
}
.menu {
padding:16px 0;
margin:0;
background-color:#fff;
}
.menu li {
display:inline-block;
margin-right:10px;
list-style-type:none;
padding:0;
}
.menu a {
text-decoration:none;
line-height:40px;
display:block;
padding:5px 15px;
border-radius:15px;
border:2px solid #B9C4C9;
transition: 0.3s;
background-color:#fff;
color:#004D47;
}
.menu a:hover {
background-color:#128277;
color:#fff;
}
.menu a.active {
background-color:#128277;
color:#fff;
border:2px solid #B9C4C9;
}

#contact_details {
padding:30px 0;
font-size:1.25em;
border-bottom:2px solid #004D47;
line-height:1.5em;
}
#contact_details a::before {
  content: "\A";
}
.cottage_box_holder {
margin-bottom:50px;
float:left;
width:100%;
}
.cottage_box_holder::after {
    clear:both;
    display: block;
    content: " ";
}
.cottage_box {
float:left;
width:33%;
min-width:230px;
text-align:center;
padding-top:30px;
}
.cottage_box a {
width:80%;
}
.cottage_box img {
margin-bottom:15px;
padding:2px;
border:1px solid #B9C4C9;
}
.cottage_box img:hover {
opacity:.75;
}
.cottage_box a:first-child {
font-family: 'ralewaysemibold';
font-size:1.4em;
color:#222;
}

.cottage_box a:first-child:hover {
color:#B9C4C9;
}

#check_availability {
width:100%;
float:left;
padding-top:35px;
margin-bottom:40px;
font-size:1.2em;
border-top:2px solid #004D47;
}
#check_availability.notopborder { /* individual cottages pages */
border-top:none;
padding-top:0;
}
#check_availability div#calendar {
visibility:hidden;
height:0px;
}
.visible1 {
	visibility:visible !important;
	height:209px !important;
}
.visible2 {
	visibility:visible !important;
	height:500px !important;
}
#check_availability > h3 {
	display:none;
}

.button {
font-family: 'ralewaysemibold';
padding:8px 15px;
background-color:#52958B;
color:#fff;
border-radius:5px;
box-shadow:3px 3px 3px #222;
transition: 0.3s;
}
.button:hover {
box-shadow:5px 5px 5px #000;
background-color:#128277;
color:#fff;
}

.button.type2 {
background-color:#128277;
}
.button.type2:hover {
background-color:#52958B;
}

.booking::before {
font-family: 'Font Awesome\ 5 Free';
content: "\f274\0020\0020";
font-weight:600;
}

#whether {
text-align:center;
margin:60px auto 30px;
}
#whether h3 {
margin-top:0;
}
#vignette {
width:356px;

margin:25px auto 0;
}


.bold {
font-family: 'ralewaysemibold';
}
.border {
padding:2px;
border:2px solid #B9C4C9;
}
.fifty-left, .fifty-right {
width:50%;
margin:20px 0;
float:left;
}
 .hundred-left {
width:100%;
margin:20px 0;
float:left;
}
#loc-contact .fifty-left, #loc-contact .fifty-right {
padding:0 15px;
}
#loc-contact .fifty-left {
width:40%;
}
#loc-contact .fifty-right {
width:60%;
}
#loc-contact li {
line-height:1.75em;	
}

#map-box {
width:100%;
height:400px;
}
#map-box-contact {
height:500px;
}
.gallery {
width:90%;
margin:0 5%;
overflow:auto;
}
.gallery img {
margin:0 5px 5px 0;
float:left;
}
.gallery img:hover {
opacity:.75;
}
.gallery a {
display:block;
}

.owl-carousel {
margin-bottom:45px;
}
.owl-stage-outer {
background-color:#004D47;
color:#fff;
}
.owl-item div {
font-size:1.15em;
padding:10px;
}
#other-cottages {
width:100%;
margin-bottom:30px;
}
#other-cottages a {
margin-right:25px;
}

/* Arran Attractions*/
h3.attractions_village {
font-size:25px;
background-color: #004D47;
color: #fff;
padding: 9px 0 1px 15px;
color:#fff !important;
text-align:left;
} 
h4.attractions_category {
font-size:1.4em;
text-align:left;
border-bottom:1px solid #ccc;
margin:0 0 30px;
} 
.attraction_box {
float:left;
width:48%;
margin-right:2%;
min-height:300px;
text-align:left;
line-height:1.4em !important;
}
.attraction_img {
float:left;
margin:0 20px 120px 0;
}
.attraction_box h5 {
margin-bottom:8px;
font-size:1.2em;
font-weight:normal;
} 
.attraction_text {
margin-top:0;
}
#arran_attr_box_1, #arran_attr_box_2 {
float:left;
}
#arran_attr_box_1 {
width:35%;
}
#arran_attr_box_2 {
width:38%;
margin-left:50px;
}
.quicknav {
width:100%;
height:40px;
margin:30px 0 0;
}
.quicknav a {
opacity:0.75;
}

#footer {
width:100%;
padding:20px;
}

.mobile {
font-size:39px;
margin:20px 0 0;
display:none;
}

.mobile:hover {
cursor:pointer;
}

@media (max-width: 865px) {

#main_banner {
width:100%;
height:auto;
}

}

@media (max-width: 750px) {

img {
	width: auto;
	max-width: 100%;
  }

.attraction_box {
width:100%;
min-height:220px !important;
height:220px !important;
}

#vignette {
width:371px;
float:none;
margin-top:25px;
}
#whether {
float:none;
margin:25px 0;
}
#home .cottage_box {
width:100%;
clear:left;
padding:25px 0;
}

#cottages .cottage_box:nth-child(1), #cottages .cottage_box:nth-child(2) {
width:50%;
}
#cottages .cottage_box:nth-child(3) {
width:100%;
clear:left;
}

.fifty-left, .fifty-right, #loc-contact .fifty-left, #loc-contact .fifty-right {
float:none;
width:100%;
}
.fifty-right img {
margin:0 0 25px;
}

.visible2 {
	visibility:visible !important;
	height:400px !important;
}

.mobile {
display:inline-block;
}
.menu {
display:none;
padding:0;
}
.menu li {
width:100%;
margin:5px 0 0 0;
display:block;
}
.menu a {
border-radius:0;
}

}

@media (max-width: 700px) {
h1 {
font-size:2.5em;
}
}

@media (max-width: 600px) {
h1 {
font-size:2.2em;
}
#arran_attr_box_1, #arran_attr_box_2 {
width:50%;
}
#arran_attr_box_2 {
margin-left:0;
}

}

@media (max-width: 540px) {
h1 {
font-size:1.9em;
}
}

@media (max-width: 470px) {
h1 {
font-size:1.6em;
}
}