/* set up defaults */
* { margin: 0; padding: 0; }

body {
   font-size: 18px;
   font-family: Helvetica, sans-serif;
   color: #272428;
   text-align: center;
}

/* bg image for each page */
body.sky1 {
   background: url(../img/sky1.jpg) no-repeat center center fixed;
   background-size: cover;
}

body.sky2 {
   background: url(../img/sky2.jpg) no-repeat center center fixed;
   background-size: cover;
}

body.sky3 {
   background: url(../img/sky3.jpg) no-repeat center center fixed;
   background-size: cover;
}

body.sky4 {
   background: url(../img/sky4.jpg) no-repeat center center fixed;
   background-size: cover;
}
body.beach {
   background: url(../img/Tooway.JPG) no-repeat center center fixed;
   background-size: cover;
}
/* text bg */
section {
   width: 1000px;
   margin: 2rem auto;
   background: rgba(255,255,255, .75);/* rgba = red green blue alpha */
}

.col {
   width: 50%;
   float: left;
}

.clear { clear: both; }
.fill { height: 6rem; }

h1 {
   padding: 6rem 0;
   font-size: 4rem;
   font-weight: 200;
}

h2 {
   padding: 4rem 0 1rem 0;
   font-size: 2rem;
   font-weight: 300;
}

p {
   margin: .5rem 0;
}

/* buttons */
a.btn {
   display: block;
   padding: 1rem 0;
   font-size: 125%;
   font-weight: 200;
   text-decoration: none;
   width: 50%;/* width of the container ... the column */
   margin: 0 auto;/* centre the button in the column */
}

a.btn:link, a.btn:visited {
   color: #fff;
   background: rgba(16, 155, 219, .9);/* light blue */
   transition: background 1s, color 1s;/* animation fx */
}

a.btn:hover {
   color: #b4eefd;/* pale blue */
   background: rgba(16, 18, 137, .9);/* dark blue */
}


/* RESPONSIVE */
@media screen and (max-width: 1270px) {
/* default iDevice */

}

/* iPad landscape */
@media screen and (max-width: 1045px) {

}

/* iPad portrait */
@media screen and (max-width: 856px) {

}

/* iPhone SE landscape */
@media screen and (max-width: 690px) {

   h1 {
      padding: 3rem 0;
      font-size: 2.5rem;
      font-weight: 200;
   }

   h2 {
      padding: 2rem 0;
      font-size: 2rem;
      font-weight: 300;
   }

   a.btn {
      display: block;
      padding: 1rem 0;
      font-size: 125%;
      font-weight: 200;
      text-decoration: none;
      width: 75%;/* width of the container ... the column */
      margin: 0 auto;/* centre the button in the column */
   }

   section {
      width: 100%;
      margin: 2rem auto;
      background: rgba(255,255,255, .75);/* rgba = red green blue alpha */
   }

}

/* iPhone SE portrait */
@media screen and (max-width: 500px) {

   .col {
      width: 100%;
      float: none;
   }

}