/*
  CSS: cofs.ca
  Organization: Circle of Friends Services (COFS)
  Description: Custom styling for cofs.ca website.
  Version: 2.0
  License: Copyright (c) 2022 Circle of Friends Services (COFS). All Rights Reserved.
*/

/* CSS DIRECTORY
   01. GLOBAL
   02. CONTENT
   03. BRAND
   04. TYPOGRAPHY
   05. PAGE
   06. THEME
   07. ANIMATION
   08. RESPONSIVE
   09. MEDIA QUERIES
*/



/* GLOBAL
================================= */
html, body {
  height: 100%;
  background: #eee;
}

html {
  display: table;
  margin: auto;
}

body {
  display: table-cell;
  vertical-align: middle;
}

#cofs div, #cofs span, #cofs p,
#cofs ol, #cofs ul, #cofs li,
#cofs img {
  position: relative;
}

#cofs {
  position: relative;
  display: block;
  width: 100%;
}



/* CONTENT
================================= */
#cofs #cf-content {
  position: relative;
  display: block;
  max-width:  950px;
  padding: 30px 50px 50px;
}

#cofs * {
  padding: 0;
  margin: 0 auto;
}

#cofs, #cofs * {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  color: #555;
}



/* BRAND
================================= */
#cofs #cf-brand {
  display: block;
  padding: 50px 50px 0;
}

#cofs #cf-brand h1 {
  display: inline-block;
  font-family: 'Passion One', cursive;
  font-weight: 400;
  font-size: 110px;
  line-height: 80px;
}

#cofs #cf-brand h1,
#cofs #cf-brand h1 * {
  font-family: 'Passion One', cursive;
  font-weight: 400;
}

#cofs #cf-brand h1 .name {
  display: block;
}

#cofs #cf-brand h1 .name::first-letter {
  font-size: 120px;
  top: -6px;
}

#cofs #cf-brand .image {
  display: inline-block;
  top: -3px;
  left: 20px;
}



/* TYPOGRAPHY
================================= */
#cofs #cf-content p {
  font-size: 21px;
  line-height: 28px;
  margin-bottom: 12px;
}

#cofs #cf-content p:last-of-type {
  margin-bottom: 0;
}

#cofs #cf-content h2,
#cofs #cf-content h2 * {
  font-family: 'Passion One', cursive !important;
  font-weight: 400 !important;
}

#cofs #cf-content h2 {
  font-size: 60px;
  line-height: 45px;
  margin-bottom: 8px;
}

#cofs #cf-content h2 .notice::after {
  content: ".";
}

#cofs #cf-content h2 .date {
  font-size: 45px;
  line-height: 35px;
  vertical-align: baseline;
  opacity: 0.7;
}

#cofs #cf-content strong,
#cofs #cf-content strong * {
  font-family: 'Passion One', cursive;
  font-weight: 400;
  font-size: 28px;
}



/* PAGE - MAIN
================================= */
#cofs #cf-content .cf-close {
  margin-top: 24px !important;
}

#cofs #cf-content .cf-signature p {
  margin-bottom: 0;
}

#cofs #cf-content .cf-signature .cf-name {
  display: none !important;
  margin: 6px 0 2px;
}

#cofs #cf-content .cf-signature .cf-name-alt {
  position: relative;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: 66px;
  line-height: 66px;
  letter-spacing: -6px;
  margin: 8px 0 3px;
  left: -12px;
  opacity: 0.9;
}

#cofs #cf-content .cf-signature .cf-org,
#cofs #cf-content .cf-signature .cf-org-tagline {
  line-height: 26px;
}

#cofs #cf-content .cf-signature .cf-org-tagline {
  transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-5deg, 0deg);
}

/* global */
#cofs #cf-content h2,
#cofs #cf-content strong,
#cofs #cf-brand h1 .name::first-letter,
#cofs #cf-content .cf-signature .cf-org-tagline {
  opacity: 0.8;
}



/* THEME
================================= */
#cofs #cf-brand .image {
  position: relative;
  z-index: 1;
}

#cofs #cf-brand .image img {
  z-index: 1;
}

#cofs #cf-brand .image .ol,
#cofs #cf-brand .image .ol .ol-01,
#cofs #cf-brand .image .ol .ol-02 {
  position: absolute;
  top: 0;
  left: 0;
}

#cofs #cf-brand .image .ol .ol-02 {
  background: transparent url(/assets/public/image/theme/01/01-02-02.png) no-repeat top center;
  top: 0;
  left: 50%;
  margin-left: 350px;
  z-index: 0;
  opacity: 0.8;
}

#cofs.cf-01-02-01 #cf-brand .image .ol .ol-02,
#cofs.cf-01-02-02 #cf-brand .image .ol .ol-02 {
  background: transparent url(/assets/public/image/theme/01/01-02-02.png) no-repeat top center;
}

#cofs.cf-01-03-01 #cf-brand .image .ol .ol-02,
#cofs.cf-01-03-02 #cf-brand .image .ol .ol-02 {
  background: transparent url(/assets/public/image/theme/01/01-03-02.png) no-repeat top center;
}

#cofs #cf-brand .image .ol .ol-01 {
  width: 388px;
  height: 20px;
  background: transparent url(/assets/public/image/theme/01/01-01.png) no-repeat top center;
  top: 310px;
  z-index: 2;
}

#cofs.cf-01-02-01 #cf-brand .image .ol .ol-02,
#cofs.cf-01-02-02 #cf-brand .image .ol .ol-02 {
  top: -10px;
}

#cofs.cf-01-03-01 #cf-brand .image .ol .ol-02,
#cofs.cf-01-03-02 #cf-brand .image .ol .ol-02 {
  top: 0;
}

#cofs #cf-brand .image .ol .ol-02,
#cofs.cf-01-03-02 #cf-brand .image .ol .ol-02 {
  width: 100px;
  height: 100px;
}




/* ANIMATION
================================= */
#cofs[class*="cf-01-"] #cf-brand .image .ol .ol-02 {
  animation: animate_theme_01 0.5s linear;
  animation-fill-mode: forwards;
}

@keyframes animate_theme_01 {
  0%   {top: 20px;}
  30%   {top: 10px;}
  50%   {top: 5px;}
  100% {top: 0px;}
}



/* RESPONSIVE
================================= */
#cofs .rd-wrap-none {
  white-space: nowrap !important;
}



/* @MEDIA QUERIES
================================= */

/* @Media - Large+ */
@media only screen and (min-width: 992px) {

  /* Global */
  #cofs #cf-brand h1 .name {
    min-width: 375px;
  }

  /* Responsive */
  .rd-block-md- {
    display: block;
  }

}


/* @Media - All - Large (*-all-lg) */
@media only screen and (max-width: 991px) {

  /* Global */
  #cofs #cf-content *,
  #cofs #cf-brand h1,
  #cofs #cf-brand h1 .name,
  #cofs #cf-brand .image,
  #cofs #cf-brand .image * {
    position: relative;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  #cofs #cf-content *:not([class*="rd-wrap-"]):not([class*="rd-block-"]):not([class*="inline"]),
  #cofs #cf-brand h1,
  #cofs #cf-brand h1 .name,
  #cofs #cf-brand .image {
    display: block;
  }

  #cofs #cf-content .inline {
    display: inline !important;
  }

  #cofs #cf-brand {
    max-width: 100%;
  }

  #cofs #cf-content,
  #cofs #cf-brand {
    padding-left: 50px;
    padding-right: 50px;
  }

  #cofs #cf-content {
    max-width: 600px;
  }

  #cofs #cf-brand h1 .name {
    display: inline-block;
  }

  #cofs #cf-brand .image {
    margin-top: 30px;
  }

  #cofs[class*="cf-01-"] #cf-brand .image {
    max-width: 388px;
  }

  #cofs[class*="cf-01-"] #cf-brand .image .ol .ol-02 {
    left: 50%;
    margin-left: 130px;
  }

  #cofs #cf-content h2 .notice::after {
    content: "";
  }

  #cofs #cf-content h2 .date {
    font-size: 45px;
    line-height: 35px;
    margin-top: 12px;
  }

  #cofs #cf-content h2 .date span {
    display: inline-block;
  }

  /* responsive */
  .rd-block-all-lg {
    display: block !important;
  }

  .rd-none-all-lg {
    display: block !important;
  }

  .rd-p-all-lg {
    position: relative;
    display: block;
    clear: both;
    margin: 12px 0 !important;
  }

  .rd-p-all-lg.reset-top {
    margin-top: 0 !important;
  }

  .rd-p-all-lg.reset-btm {
    margin-top: 0 !important;
  }

}


/* @Media - All - Medium (*-all-sm) */
@media only screen and (max-width: 500px) {

  /* Global */
  #cofs #cf-content,
  #cofs #cf-brand {
    padding-left: 20px;
    padding-right: 20px;
  }

  #cofs #cf-content .cf-thanks {
    width: 96%;
    margin: 0 auto;
  }

  #cofs #cf-brand h1 {
    font-size: 70px;
    line-height: 60px;
  }

  #cofs #cf-brand h1 .name::first-letter {
    font-size: 85px;
  }

  #cofs #cf-brand .image img {
    width: 90%;
    height: auto;
    margin-top: 35px;
  }

  #cofs[class*="cf-01-"] #cf-brand .image {
    max-width: 252px;
  }

  #cofs #cf-brand .image .ol .ol-01 {
    width: 100%;
    top: 225px;
  }

  #cofs[class*="cf-01-"] #cf-brand .image .ol .ol-02 {
    left: 50%;
    margin-left: 45px;
  }

  #cofs #cf-content h2 {
    font-size: 52px;
    line-height: 40px;
    opacity: 0.9;
  }

  #cofs #cf-content h2 .date {
    font-size: 42px;
    line-height: 30px;
  }


  /* Responsive */
  .rd-block-all-md {
    display: block !important;
  }

  .rd-none-all-md {
    display: block !important;
  }

  .rd-p-all-md {
    position: relative;
    display: block;
    clear: both;
    margin: 12px 0 !important;
  }

  .rd-p-all-md.reset-top {
    margin-top: 0 !important;
  }

  .rd-p-all-md.reset-btm {
    margin-top: 0 !important;
  }

  @keyframes animate_theme_01 {
    0%   {top: -5px;}
    30%   {top: -5px;}
    50%   {top: -10px;}
    100% {top: -15px;}
  }

}