/**
* Settings: Colors, Media Queries
*/
/**
* Colors
*/
/**
* Colours
*/
/**
* Type
*/
/**
* Media Queries
*/
/**
* Tools: Mixin Functions
*/
/**
* Calculates Rem
*/
/**
* Returns font-size with rem value
*/
/**
* Return line-height with rem value
*/
/**
* Returns content wrapped media query
*/
/**
* Generic: Reset normalize or HTML5 reset.
*/
/**
* normalize.css
*/
/**
* Base: Typography settings live...
*/
/**
* Type
*/
body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', serif;
  color: #121214; }

body h2 {
  font-size: 22px;
  font-size: 1.375rem; }

/**
* Objects: Layout Patterns
*/
/**
* Contain
*/
/**
* This is a wrapper of elements
* that have a max-width on viewports
* and need to be centred.
*/
@media only screen and (min-width: 1024px) {
  .o-contain-desktop--centered {
    max-width: 1200px;
    margin: auto; }
  .o-contain-desktop--right {
    max-width: 1200px;
    margin-left: auto; }
  .o-contain-desktop--left {
    max-width: 1200px;
    margin-right: auto; } }

/**
* Row
*/
.o-row {
  display: flex;
  flex-direction: row; }

.o-column {
  display: flex;
  flex-direction: column; }

@media only screen and (min-width: 1024px) {
  .o-column-desktop {
    display: flex;
    flex-direction: column; }
  .o-row-desktop {
    display: flex;
    flex-direction: row; } }

/**
* Box Sizing Border Box
*/
/**
* Does the job of making an element
* respond it's parent padding
*/
* {
  box-sizing: border-box; }

/**
* Components: Aesthetic styling for reusable
* chunks of HTML
*/
.c-header {
  background: url("../imgs/background.jpg");
  background-position: center center;
  background-size: cover;
  height: 385px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.c-header__logo {
  width: 200px;
  box-shadow: 0px 0px 50px #0b3d6e; }

.c-header__contact {
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 250px; }

.c-header__contact p {
  font-size: 16px;
  font-size: 1rem;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4); }

.c-header__contact a {
  color: white;
  text-decoration: none; }

.c-info {
  background: snow;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.c-info__body {
  background: white;
  padding: 20px;
  transform: translateY(-60px);
  box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%; }

.c-info__body p {
  line-height: 30px; }

.c-info__body .c-info__about-me {
  position: relative;
  padding-top: 50px; }

.c-info__body .c-info__about-me img {
  width: 70px;
  border-radius: 50%;
  border: 3px solid #3ca0ff;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  transform: translateY(-100px); }

.c-footer {
  text-align: center;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px; }

.c-footer .c-footer__logo {
  width: 150px; }

.c-footer .c-footer__contact a {
  color: #3ca0ff;
  text-decoration: none;
  line-height: 30px; }

/**
* If all else fails...
*/