html, body{
margin:0;
padding:0;
font-size:16px;
font-family: 'Open Sans', helvetica, sans-serif;
line-height:1.8;
color:#555;
}
ul{
list-style-type:none;
}
a{
color:inherit;
text-decoration:inherit;
}
p a{
color:#1CA1FF;
text-decoration:underline;
}
.centered{
margin:0 auto;
width:80%;
}
.padded{
padding:30px;
}
.cent-align{
text-align:center;
}
.cent{
margin:0 auto;
}
.round{
border-radius:50%;
}
.notwhite{
background-color:#FFFCFB
}
.notwhite2{
background-color:#FFFDFB;
}
button,input[type=submit] {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin: 0;
text-decoration: none;
background: #FF9600;
color: #ffffff;
font-size: 1.5rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, 
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
border-radius:5px;
letter-spacing:.03em;
}
button:hover,
button:focus {
background: #63EA8F;
}
button:focus {
outline: 1px solid #fff;
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
.readmore{
font-size:1rem;
padding:8px;
}
.book{
background:#FF9600;
color:#fff;
padding:15px;
/* text-transform:uppercase; */
margin:0;
box-shadow:5px 8px 15px rgba(0, 0, 0, 0.3);
}
.introbook{
position:absolute;
right:3vw;
bottom:10px;
font-size:16px;
}
.voucher{
background:#1CA1FF;
}
.undervoucher{
display:block;
font-size:14px;
}

.contact{
padding:2px 2vw 8px 40px;
background-color:rgba(11, 9, 4,0.03);
color:#888;
font-size:110%;
letter-spacing:.08em;
text-align:right;
}

#logo{
position:absolute;
left:30px;
top:30px;
z-index:999;
}
#logo img{
width:16vw;
max-width:250px;
box-shadow:5px 8px 15px rgba(0, 0, 0, 0.3);
min-width:180px;
}
#menu-icon, #mobile-menu {
display: none;
}

nav#main-nav{
height:100px;
background-color:#fff;
  -webkit-box-shadow: 3px 13px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 13px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 13px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.main-nav,.mobile-menu{
float:right;
margin-right:10vw;
font-size:120%;
}
.main-nav li{
float:left;
padding:20px 30px 0 30px;
letter-spacing:.04em;
}
.main-nav li:hover, .mobile-menu li:hover{
color:#0380D8;
transition:color 1s ease;
}


#intro{
background-image:url('/img/intro13.jpg');
background-color:#fff;
background-size:cover;
height:50vw;
max-height:730px;
font-size:25px;
/* color:#035590; */
color:#fff;
line-height:1em;
padding-top:7vw;
position:relative;
}
.introheader{
font-size:350%;
margin-bottom:0;
line-height:1em;

}
.keypoints-wrap{
position:relative;
background-color:#FFF8F8;
}
.keypoints{
font-size:120%;
display:block;
}
.keypoints li{
display:inline-block;
padding:30px;
text-transform:uppercase;
letter-spacing:.1em;
}

.boxinfo-wrap{
display:flex;
width:100%;
}
.boxinfo{
position:relative;
width:50%;
height:470px;
background-size:cover;
color:#FFFEF7;
padding:0 8vw 0 3vw;
letter-spacing:.05em;
}
.boxinfohead{
border:1px solid #fff;
padding:15px;
text-transform:uppercase;
font-weight:100;
  z-index:9;
}
.overlay {
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  z-index:5;
}
.dblue{
background-color: #008CBA;
}
.green{
background-color: #4FBB72;
}
.overlay-text{
position:absolute;
z-index:5;
left:0;
margin:5vw;
}
.boxinfo:hover .overlay {
opacity: .8;
}

.onepoint{
margin:0 auto;
display:flex;
}
.op-short{
width:40%;
}
.op-long{
width:60%;
padding:3vw;
}
.review-wrap{
display:flex;
justify-content:space-around;
margin-bottom:20px;
}
.review{
width:24%;
background-color:rgba(11, 9, 4,0.03);
border-radius:25px;
padding:25px;
font-style:italic;
font-size:110%;
position:relative;
text-align:center;
}


.ian{
width:80%;
padding-top:20px;
}
#showmoreian.hidden{
opacity:0;
height:0px;
transform:translatex(-5vw);
  }
.showit{
  opacity:1;
display:inline-block !important;
-webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
  transition:all 2s;
  height:auto;
transform:translatex(0vw);

}
.services-wrap{


/* background: #fff; /* Old browsers */ */
/* background: -moz-linear-gradient(top,  #FEFFFF 0%, #fff 100%); /* FF3.6-15 */ */
/* background: -webkit-linear-gradient(top,  #FEFFFF 0%,#fff 100%); /* Chrome10-25,Safari5.1-6 */ */

/* background: linear-gradient(to bottom,  #444 0%,#333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#554058', endColorstr='#312a3a',GradientType=0 ); /* IE6-9 */ */
padding:30px;
margin-top:30px;
}
#deal{
color:white;
position:absolute;
right:-15px;
bottom:30px;
background-color:#FF1D1D;
padding:3px;
font-size:115%;
width:77px;
box-shadow:3px 3px 15px rgba(0, 0, 0, 0.3);
z-index:99;
transform:rotate(8deg);
}

.service{
width:100%;
display:flex;
margin: 0 auto;
margin-bottom:2vw;
max-width:1200px;
height:auto;
position:relative;
background:#fff;
-webkit-box-shadow: 4px 7px 13px -1px rgba(224,221,224,1);
-moz-box-shadow: 4px 7px 13px -1px rgba(224,221,224,1);
box-shadow: 4px 7px 13px -1px rgba(224,221,224,1);
}
.service-left{
width:40%;
min-width:300px;
overflow:hidden;
}
.service:hover .overlay{
opacity:.8;
}
.service-right{
margin:2vw 2vw 30px 0 ;
}
.service-icon{
display:none;
}
.skew-wrap{
transform:skew(-13deg);
overflow:hidden;
margin-left:-5vw;
width:400px;
}
.skew-wrap > *{
transform:skew(13deg);
width:460px;
}
.service-right{
width:70%;
padding:15px;
}

#contact-form{
width:60%;
padding:5vw 0 0 6vw;
}
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
input[type=submit]{
background-color:#FF9600
}
input[type=submit]:hover {
    background-color: #63EA8F;
}
footer{
margin-top:50px;
height:220px;
color:white;
background:#444;
}
.footer-inner{
display:flex;
}
.footermenu{
width:40%;
margin:0;
}
.footerextras{
width:50%;
float:right;
}

/* responsive mystyles */
/* tablet */
@media only screen and (max-width : 900px) {
body{
font-size:15px;
}
h1{
line-height:1.2em;
}
.centered{
width:95%;
}
.book{
font-size:110%;
}
#logo{
left:5px;
top:5px;
}

nav#main-nav{
height:120px;
}
ul.main-nav{
display:none;
}
#menu-icon {
position:absolute;
display:inline-block;
right:0;
top:35px;
font-size:250%;
padding:0 20px 0 15px;
}
#mobile-menu{
position:absolute;
right:0px;
top:88px;
background:#fefefe;
z-index:999;
}
.mobile-menu li{
padding:10px;
}
#intro{
padding:12vw 0 17vw 0;
font-size:150%;
}
.introheader{
font-size:150%;
line-height:0;
}
.introbook .book{
padding:8px;
}
.keypoints li{
display:block;
padding:8px;
}
.boxinfo-wrap{
flex-direction:column;
}
.boxinfo{
width:100%;
padding:0;
height:340px;
}
.overlay-text{
margin:10vw;
}
.op-long{
padding-top:0;
}
.service-right{
padding:0
}
.skew-wrap{
width:300px;
}
.skew-wrap > *{
width:360px;
}
}

/* mobile */
@media only screen and (max-width : 600px) {
#logo{
left:5px;
top:35px;
}
#logo img{
width:20vw;
min-width:140px;
}

#intro{
font-size:100%;
line-height:1.2em;
}
ul.keypoints{
width:90%;
}
.op-long,.op-short, .service-right{
width:90%;
margin:0 auto;
text-align:center;
padding:0 5px 50px 5px;
}
.review-wrap{
flex-direction:column;
}
.review{
width:80%;
margin:0px auto;
margin-bottom:15px;
}
#contact-form{
width:90%;
margin:0 auto;
}
.ian{
width:70%;
padding-top:20px;
}
.service-left{
display:none;
}
.service-icon{
font-size:35px;
display:block;
color:#4FBB72;
}
.service{
margin-bottom:20px;
}
.padded{
padding:5px;
}
.onepoint{
flex-direction:column;
}
}
}