/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  

/*==========================================
 BASE STYLES - MOBILE
============================================*/
/* TEXTS */
html {
    font-size: 16px;
}

body {
    color: #00264d;
    font-family: 'pt-sans', sans-serif;
    font-size: 1em;
    line-height: 1.285;
    text-align: left;
}

h1 {
    font-size: 1.875em;
    font-weight: bold;
    text-align: center;
}

h2, 
h3 {
  color: #ff6600;
}

h2 {
  font-size: 1.875em;
}

h3 {
  font-size: 1.125em; /* previously 20px, as was body text */
}

h4 {
  font-weight: bold;
}

/* LINKS */
a {
  color: #00264d;
  text-decoration: none;
}

/* BULLET POINTS */
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

/* CONTENT WRAPPER */
.content-wrapper {
    width: 90%;
    margin: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

/* IMAGES */
img {
  width: 100%;
}
   
figure {
  margin: 0;
}
   
/* CONTACT INFO */
address {
  font-style: normal;
}

/* TOP BUTTON */
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #ff6600;
  color: #00264d;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#scrollToTopBtn:hover {
  background-color: #00264d;
  color: white;
}

/* HEADER&FOOTER */
header,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

/*======================================== 
 HEADER - MOBILE
==========================================*/
header {
  background-color: #d5e2e2;
}

header .content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

header figure {
    width: 40%;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.header-divider {
    width: 100%;
    height: 1px;
    margin: 10px 0;
    background-color: #a3aab1;
  }

/*------ nav bar -------- */
header nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row nowrap;
    width: 100%;
}

header nav ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}

header nav ul li{
    font-size: 1.125em;
    padding: 30px 25px 0 25px;
    text-transform: uppercase;
}

header nav ul li a { 
  color: #ff6600;
}

header a:hover { 
  color: #00264d;
}

/* Header article */
header article {
    padding-top: 30px;
}


/*============================================
 FOOTER - MOBILE
==============================================*/
footer { 
    text-align: center;
}

footer .content-wrapper { 
    margin: 50px 0;
}
  
footer p {
    margin: 0;
}

footer article {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

footer #contact p i {
  font-size: 1em;
}

footer .copyright {
    padding-bottom: 50px;
    width: 100%;
}

/*---- Images ---- */
.gosc figure { 
    width: 20%;
}

/*---- Prices & Contact -----*/
footer #prices ul li,
footer #contact address p { 
    line-height: 2.0625;
}

footer #contact a:hover {
  color: #ff6600;
}


/* ===========================================
 HOMEPAGE - MOBILE
============================================== */
#osteo,
#about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

/*---- OSTEO ----*/
#osteo article {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

#osteo .small {
  flex-flow: column wrap;
}

#osteo ul {
  padding-left: 10px;
}

#osteo ul li {
    list-style-type: disc;
}


/*----- ABOUT -----*/
#about {
  background-color: #d5e2e2;
  background-size: cover;
}

#about section {
  margin: 50px 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row wrap;
}

#about section .content-title {
  width: 52%;
}

#about section .content-image {
  width: 48%;
}

#about figure {
  width: 30%;
}


/*==========================================
 EXPECTATIONS PAGE - MOBILE
============================================ */
.expectations {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

#page-title .content-wrapper {
  margin-bottom: 0;
}

.expectations h2 {
  padding-bottom: 50px;
  text-align: center;
}

.expectations ul li {
  padding-bottom: 15px;
}

#expect-footer {
  background-color: #d5e2e2;
}

/*----- BACKGROUND COLOURING mobile -------- */
#consultation,
#room-prep,
#after-ttt { 
    background: #d5e2e2;
    background-size: cover;
}

/*---- bullet point indentation mobile ------*/
#pre-screen ul,
#room-prep ul,
#after-ttt ul {
  padding-left: 20px;
}

/*------ pre-screen img mobile -----*/
#pre-screen img {
  width: 50%;
}

/*----- ROOM PREP mobile -------- */
#room-prep h2 {
  margin-top: 50px;
}

#room-prep .content-wrapper {
  margin-top: 0;
}

#ppe {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#room-prep figure {
  padding: 0;
  width: 40%;
  display: flex;
  justify-content: center;
}

#room-prep img {
  width: 60%
}

/*-----ttt mobile ------*/
#ttt img {
  width: 60%
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden,
 [hidden] {
   display: none !important;
 }
 
 /*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
 
 .sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
   /* 1 */
 }
 
 /*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   position: static;
   white-space: inherit;
   width: auto;
 }
 
 /*
  * Hide visually and from screen readers, but maintain layout
  */
 
 .invisible {
   visibility: hidden;
 }
 
 /*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
 
 .clearfix::before,
 .clearfix::after {
   content: " ";
   display: table;
 }
 
 .clearfix::after {
   clear: both;
 }
 
 /* ==========================================================================
    EXAMPLE Media Queries for Responsive Design.
    These examples override the primary ('mobile first') styles.
    Modify as content requires.
    ========================================================================== */

@media all and (min-width: 768px) {  /* ------- TABLET --------- */
  /*=================================
   General styles - Tablet
  ===================================*/
  .content-wrapper {
    max-width: 640px;
  }

  h1 {
    font-size: 2.25em;
  }

  h2 {
    font-size: 2em;
    line-height: 1.333;
  }

  h3 {
    font-size: 1.25em;
  }

  body {
    font-size: 1.125em;
  }

  /* =====================================
    HEADER - TABLET
  ======================================== */
  header {
    justify-content: space-around;
  }

  header .content-wrapper {
    width: 90%;
    justify-content: space-between;
    align-items: flex-start;
  }

  header figure {
    width: 35%;
  }

  header nav {
    width: 60%;
  }

  header nav ul {
    justify-content: space-around;
  }

  header article {
    padding-left: 30px;
  }

  .header-divider {
    display: none;
  }

  
  /* =================================
    HOMEPAGE - TABLET
  ==================================== */
  
  /* --------- Osteo tablet ---------- */
  #osteo .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row wrap;
  }

  #osteo .small {  
    width: 33%;
  }

  #osteo .big {
    width: 60%;
  }


  /*------- About tablet ---------*/
  #about .content-text {
    width: 100%;
  }

  /*==========================================
    EXPECTATIONS PAGE - TABLET
  ============================================ */ 
  #pre-screen .content-wrapper,
  #room-prep .content-wrapper,
  #ttt .content-wrapper {
    display: flex;
    flex-flow: row nowrap;
  }
  
  .content-image {
    width: 28%;
  } 

  .content-text {
    width: 69%;
  }
  
  /*------ pre-screen img tablet -----*/
#pre-screen img {
  width: 100%;
}

  /*--- ROOM PREP tablet -----*/
  #room-prep .content-wrapper {
    justify-content: space-between;
  }

  #you-prep {
    width: 48%;
  }

  #ppe-laura {
    width: 48%;
  }

  #room-prep figure {
    width: 50%;
  }

  /*#laura-prep {
    width: 59%;
  }*/

  /*-----ttt tablet ------*/
  #ttt img {
    width: 100%;
  }
  
  /* ----- after TTT tablet---------- */
  #after-ttt section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row nowrap;
  }

  #laura-ends,
  #you-end {
    width: 49%;
  }
  

} /* Tablet ends */



@media all and (min-width: 1200px) {  /* -------- DESKTOP ---------- */
  /* =========================
   General styles - Desktop 
  ============================*/
  .content-wrapper {
    max-width: 960px;
  }  

  h1 {
    font-size: 2.5em;
  }

  h2 {
      font-size: 1.75em;
  }

  h3,
  h4 {
    font-size: 1.25em;
  }

  body {
      font-size: 1.25em;
      line-height: 1.5;
  }


  /* ========================================
   HEADER - DESKTOP
  =========================================== */
  header nav {
    margin-top: 40px;
  }

  header nav ul {
    justify-content: space-between;
  }

  
  /* =================================
   FOOTER - DESKTOP
  ==================================== */
  .footer-content { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  }
    
  footer #prices {
    width: 25%;
  }

  footer .gosc {
    width: 40%;
  }

  footer .gosc figure {
    width: 35%;
  }

  footer #contact {
    width: 35%;
  }



  /* ==============================
   EXPECTATIONS - DESKTOP 
  =================================*/
  
  /* --------- ROOM PREP desktop ------- */
  #room-prep .content-wrapper,
  #ppe-laura {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row nowrap;
  }

  #you-prep {
    width: 39%;
  }

  #ppe-laura {
    width: 59%;
  }

  #ppe {
    width: 39%;
  } 

  #room-prep figure {
    width: 85%;
  }

  #laura-prep {
    width: 59%;
  }

  /* -------- after TTT desktop-------- */
  #after-ttt .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row wrap;
  }


} /* Desktop ends */


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
      display: table-header-group;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
}