/*
Theme Name: Achievable
Version: 31
Description: Achievable's wordpress theme
Author: Achievable, Inc.
Author URI: https://achievable.me
License: UNLICENSED
Copyright: (c) 2020 Achievable, Inc.
*/

/*

[Table of contents]

1. CSS

*/


/* 1. CSS
********************************************************************************************
********************************************************************************************/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
  border: 0;
  margin: 0;
  padding: 0;
}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object {
  display: block;
}

a img{
  border:0;
}

body {
  font-family: 'Raleway', sans-serif !important;
  background-color: white;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

h1 {
  font-size: 32px;
  line-height: 1.3;
  margin: 1.8em 0px 0.8em;
}

h2 {
  font-size: 30px;
  line-height: 1.3;
  margin: 1.8em 0px 0.8em;
}

h3 {
  font-size: 22px;
  line-height: 30px;
  margin: 2em 0px 1em;
}

.aaaPagination {
  text-align: center;
  margin: 32px 0;
  font-size: 18px;
}

.aaaPagination .loop-pagination > * {
  margin: 4px;
}

.aaaPostSingleContent .wp-block-pullquote {
  margin: 1em 0;
  padding: unset;
}

.wp-block-pullquote blockquote, blockquote.wp-block-quote {
  border-left: 4px solid #00b4e6;
  padding: 24px;
  text-align: left;
  background-color: #f5f7fa;
}

.wp-block-pullquote blockquote cite, blockquote.wp-block-quote cite {
  display: inline-block;
  font-size: 0.6em;
}

.aaaPostSingleContent .wp-caption-text,
figcaption {
  font-size: 12px;
}

.aaaPostSingleContent .wp-caption {
  width: unset !important;
}

.aaaPostSingleContent .wp-caption img,
.aaaPostSingleContent img {
  max-width: 100%;
  height: auto;
}

.aaaButton, a.aaaButton, .aaaPostSingleContent a.aaaButton {
  display: inline-block;
  text-align: center;
  border: 1px solid #fff;
  padding: 16px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);

  border-radius: 4px;
  border: 1px solid white;
  color: white;
  background-color: #00b4e6;
  text-decoration: none;
}

.aaaButton:hover, a.aaaButton:hover, .aaaPostSingleContent a.aaaButton:hover {
  color: white;
  background-color: #1eaecc;
}

.aaaWell {
  position: relative;
}

@media (min-width: 1320px) {
  .aaaWell {
    width: 1240px;
    margin: 0 auto;
  }
}

@media (max-width: 1319px) and (min-width: 1024px) {
  .aaaWell {
    width: 960px;
    margin: 0 auto;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .aaaWell {
    width: 756px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .aaaWell {
    width: auto;
    margin: 0px 4px;
  }
}

.aaaHeaderMain {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 400;
  background: white;
  box-shadow: rgba(25, 45, 100, 0.08) 0px 10px 30px 0px;
}

body.admin-bar .aaaHeaderMain {
  top: 32px;
}

body.admin-bar .aaaHeaderMainHolder {
  height: 90px;
}

.aaaHeaderMainInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  text-decoration: none;
}

.aaaHeaderMainInner a {
  text-decoration: none;
}

.aaaHeaderMainHolder {
  height: 90px;
}

.aaaHeaderBar {
  height: 2px;
  background-color: #00b4e6;
}

.aaaHeaderLogo {
  height: 66px;
}

.aaaHeaderCategoriesContainer {
  background-color: #F1F3F5;
}

.aaaHeaderCategories {
  height: 56px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: auto;
}

.aaaHeaderCategory {
  padding: 0 12px;
  font-size: 15px;
  color: #556575;
  line-height: 1;
  text-decoration: none;
  font-family: "Montserrat";
  white-space: nowrap;
}

.aaaHeaderCategory:first-child {
  padding-left: 0;
}

.aaaHeaderCategory:last-child {
  padding-right: 0;
}

.aaaHeaderCategory.active {
  color: #1d2b36;
  font-weight: 500;
}

.aaaHeaderCategory:hover {
  color: #1d2b36;
}

.aaaPostSingleHeader {
  position: relative;
  height: 450px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 0 32px;
  background-color: #3b64d2;
}

.aaaPostSingleHeaderImage {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 53%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.aaaPostSingleHeaderImage img {
  width: 100%;
  height: auto;
  max-height: 95%;
  border: 2px solid #3827c3;
  border-right: 0;
  border-radius: 4px;
}

.aaaAuthorBlock {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.aaaAuthorAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aaaAuthorAvatar img {
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.aaaAuthorBlockInfo {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  margin-left: 16px;
}

.aaaAuthorName {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.aaaPostDate {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.aaaPostSingleHeaderTitle {
  color: white;
  font-size: 44px;
  width: 53%;
  margin-bottom: 16px;
  padding-right: 8px;
}

.aaaPostSingleContent {
  overflow: auto;
  max-width: 720px;
  margin: 80px auto 40px auto;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.aaaPagination a,
.aaaViewAllArticles a,
.aaaPostSingleContent a {
  color: #1d2b36;
  border-bottom: 1px solid #1d2b36;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.aaaPagination a:hover,
.aaaViewAllArticles a:hover,
.aaaPostSingleContent a:hover {
  color: #1292ee;
  border-bottom-color: #1292ee;
}

.aaaArchiveHeaderDescription,
.aaaPostSingleContent p,
.aaaPostSingleContent ul,
.aaaPostSingleContent ol {
  color: #314351;
  font-size: 16px;
  font-size: calc(16px + 2 * ((100vw - 430px) / 770));
  line-height: 1.8;
  letter-spacing: -0.005em;
  color: rgb(49, 67, 81);
  margin: 0 0 10px;
  margin-bottom: 23px;
}

.aaaPostSingleContent ul, .aaaPostSingleContent ol {
  padding-left: 32px;
}

.aaaFooter {
  padding: 32px;
  background-color: #1d2b36;
}

.aaaCopyright {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
  color: #93a1b0;
}

.aaaFooterExamLinks {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.aaaFooterExamLinks a {
  padding: 8px;
  color: #93a1b0;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  white-space: nowrap;
}

.aaaFooterExamLinks a:hover {
  color: white;
}

.aaaPostTiles {
  margin: 40px auto;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

.aaaPostTile {
  border-radius: 4px;
  background-color: #f1f3f5;
  overflow: hidden;
  text-align: center;
}

.aaaPostTile:hover {
  box-shadow: rgba(30, 45, 62, 0.21) 0px 10px 15px -10px, rgba(31, 44, 60, 0.1) 0px 5px 40px -10px;
}

.aaaPostTileLink {
  text-decoration: none;
}

.aaaPostTileImage {
  height: 200px;
}

.aaaPostTileImage img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.aaaPostTileContent {
  padding: 32px;
}

.aaaPostTileCategory {
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: #93a1b0;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  font-family: "Montserrat";
}

.aaaPostTileTitle {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #1d2b36;
}

.aaaCourseUpsellBlock {
  max-width: 784px;
  margin: 32px auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border: 1px solid #1292ee;
  border-radius: 4px;
  padding: 32px;
}

.aaaCourseUpsellInfo {}

.aaaCourseUpsellBlockTitle {
  font-size: 24px;
  margin: 16px 0;
}

.aaaCourseUpsellBlockText {
  margin-bottom: 16px;
}

.aaaCourseUpsellImage {
  flex: 0 0 300px;
  width: 300px;
  height: auto;
}

.aaaViewAllArticles {
  text-align: center;
  margin: 40px auto;
}

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

.aaaRelatedPost {
  display: flex;
  flex-flow: column nowrap;
}

@media (max-width: 950px) {
  .aaaPostSingleHeader {
    height: unset;
    padding: 32px 32px 0 32px;
  }

  .aaaPostSingleHeaderTitle {
    width: unset;
  }

  .aaaPostSingleHeaderImage {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding-top: 16px;
  }

  .aaaPostSingleHeaderImage img {
    border: 2px solid #3827c3;
    border-bottom: 0;
    width: 100%;
    max-height: unset;
    height: inherit;
  }
}

@media (max-width: 850px) {
  .aaaPostSingleContent {
    max-width: 100%;
    margin: 32px;
  }

  .aaaCourseUpsellBlock {
    max-width: 100%;
    margin: 16px auto;
    padding: 16px;
  }

  .aaaCourseUpsellBlockText {
    font-size: 14px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .aaaHeaderMain {
    top: unset;
  }

  body.admin-bar .aaaHeaderMainHolder {
    height: 0px;
  }

  .aaaHeaderMainHolder {
    height: 0px;
  }

  .aaaHeaderMain {
    top: unset;
    position: relative;
  }

  .aaaPostTiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .aaaPostTileImage {
    height: 150px;
  }

  .aaaPostTileContent {
    padding: 8px;
  }
}

@media (max-width: 600px) {
  .aaaFooterExamLinks {
    justify-content: unset;
  }

  .aaaCourseUpsellBlock {
    flex-flow: column-reverse nowrap;
  }

  .aaaCourseUpsellImage {
    flex: unset;
  }

  .aaaPostSingleHeaderTitle {
    font-size: 32px;
  }
}

@media (max-width: 486px) {
  .aaaHeaderLogo {
    height: 40px;
  }

  .aaaHeaderMainInner {
    height: 60px;
  }

  .aaaHeaderMainInner .aaaButton {
    padding: 8px;
  }

  .aaaPostTileTitle {
    font-size: 14px;
  }

  .aaaPostTileImage {
    height: 100px;
  }

  .aaaHeaderCategory {
    font-size: 14px;
  }

  .aaaHeaderCategories {
    align-items: center;
    justify-content: space-between;
  }
}