/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.4.1550580015
Updated: 2019-02-19 12:40:15

*/



@font-face {
	font-family: 'KG Inimitable Original Regular';
	font-style: normal;
	font-weight: normal;
	src: local('KG Inimitable Original Regular'), url('fonts/KGInimitableOriginal.woff') format('woff');
}

#bottomrightcontainer{
    background-color: #ff7942;
    border: 2px solid #2c004a;
    border-radius: 2px;
    z-index: 1;
    position: absolute;
    width: 10%;
    height: 20%;
    right: -6%;
    bottom: -12%;
    border-radius: 10px;
    text-align: center;
}

#collapsible-progress-bar{
    margin-top: 5%;
    z-index: 999;
    background: url(/wp-content/uploads/2020/09/purple.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 30px 50px 50px 50px;
    color: white !important;
}

.collapse-anchor{
    width: 100%;
    cursor: pointer;
}

#skill-time-dropdown,
#month-dropdown,
#year-dropdown {
    height: auto;
    border-radius: 30px !important;
    padding: 7px 40px 7px 15px !important;
    background-color: #E2B910 !important;
    color: #5207a1 !important;
    border: none !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%235207a1' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position-x: calc(100% - 10px) !important;
    background-position-y: 5px !important;
    background-size: 20px !important;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800%7CRaleway:100,200,300,400,600,700,800,900%7CMontserrat:100,200,300,400,500,600,700,800,900');
 .box-shadow {
     box-shadow: 0px 0px 18px -3px rgba(143, 143, 143, .50);
}
 .card:hover {
     box-shadow: 0px 0px 20px -3px rgba(143, 143, 143, .75);
}
 .box-shadow-dark {
     box-shadow: 3px 3px 11px -3px rgba(0, 0, 0, .25);
}
 body {
     font-family: 'Open Sans', Arial, Verdana;
}
 section {
     padding-top: 2rem;
     padding-bottom: 2rem;
}
 .font-weight-bolder {
     font-weight: 900;
}
 .display-1, .display-2, .display-3, .display-4 {
     font-weight: 900;
}
 .heading-big {
     font-weight: 800;
     text-transform: uppercase;
     color: red;
     margin: 0;
     padding: 0.15rem 0;
     line-height: 1.2;
     font-size: 2rem;
     transition: color 0.5s ease-in, border-color 0.5s ease-in-out;
}
 .heading-big-square {
     padding: 1rem 1rem;
     border: 10px solid red;
     margin: 0.5rem auto 1rem auto;
}
 .heading-big:hover {
     color: #f90;
     border-color: #f90;
}
 .card {
	 height: auto !important;
     transition: 0.5s ease;
     border-radius: 0;
	 background-color: #E8EEFF;
	 border: none;
     transform: perspective(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
 .card-header {
     border-radius: 0 !important;
	 border: none;
}
 .card-footer {
     padding-top: 1rem;
     padding-bottom: 1rem;
}
 .card-header, .card-footer {
	 background-color: #F1553A;
	 color: #fff;
     transition: 0.5s ease;
}
.card .card-header .card-title {
	color: #fff !important;
}
 .card:hover {
	 transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg);
}
 .card:hover .card-header, .card:hover .card-footer {
     background-color: #51B048;
}
 .card:hover .promotion-promo {
     transform: scale(1.175) translateY(2.5px);
     transform-origin: left center;
}
 .card:hover .promotion-price {
     transform: translate(2.5px, 17.5px) scale(1.15);
     transform-origin: center right;
}
 .card-body {
     position: relative;
     z-index: 0;
     overflow: hidden;
     padding: 1rem .5rem;
}
 .card .btn {
     font-weight: bold;
     text-transform: uppercase;
}
 .promotion-promo {
     font-weight: 700;
     font-size: 1.15rem;
     color: #ffc107;
     font-family: 'Montserrat', sans-serif;
     text-decoration: line-through;
     transition: 0.25s linear;
}
 .promotion-price {
     position: absolute;
     bottom: 0;
     right: 0;
     background: #ffc107;
     width: 92px;
     height: 92px;
     padding-bottom: 0rem;
     padding-top: 1.25rem;
     text-align: center;
     font-weight: 700;
     font-family: 'Montserrat', sans-serif;
     font-size: 1.1rem;
     border-radius: 5rem;
     color: #fff;
     z-index: -1;
     transform: translate(5px, 27.5px) rotate(-9deg);
     border: 1px dashed #fff;
     transition: 0.25s linear;
     line-height: 1.15;
}
 .promotion-price-desc {
     padding: 0;
     margin: 0 auto;
     text-transform: uppercase;
     font-size: 0.9rem;
     display: block;
}
 .promotion-price-text {
     padding: 0;
     margin: 0 auto;
     font-weight: 900;
}
 .card-animate {
     counter-reset: section;
}
 .card-animate .card-body:before {
     transition: 0.5s ease;
     counter-increment: section;
     content: "" counter(section) "";
     display: block;
     font-size: 15rem;
     font-weight: 900;
     position: absolute;
     bottom: 5rem;
     line-height: 0;
     left: -0.85rem;
     padding: 0;
     margin: 0;
     color: rgba(0, 0, 0, .10);
     z-index: 0;
}
 .card-animate .card:hover .card-body:before {
     transform: translate(10px, -10px);
}
 .card-animate .card-text {
     margin-top: 1rem;
     margin-bottom: 1rem;
     color: black !important;
     text-align: center;
     font-size: 20px;
}
 .card-animate .card-title {
     font-weight: 900;
     text-transform: uppercase;
}

.card-text {
     color: black !important;
     text-align: center;
     font-size: 20px;
}

.card-title {
    text-align: center;
}

.fancy {
  text-align: center;

  /* Same trick as previously used to make circles */
  box-sizing: border-box;
  width     : 150px;
  height    : 114px;
  padding   : 18px 1em 0 1em;

  /* We make room for the "ears" of our cloud */
  margin    : 0 100px;

  position: relative;

  background-color: #00B8D3;

  /* Well, actually we are not making a full circle
     as we want the bottom of our cloud to be flat.
     Feel free to tweak this example to make a cloud
     that isn't flat at the bottom ;) */
  border-radius: 100% 100% 0 0;
  z-index : 101;
}

/* Those are common style that apply to both our ::before
   and ::after pseudo elements. */
.fancy::before,
.fancy::after {
  /* This is required to be allowed to display the
     pseudo-elements, event if the value is an empty
     string */
  content: '';

  /* We position our pseudo-elements on the left and
     right sides of the box, but always at the bottom */
  position: absolute;
  bottom  : 0;

  /* This makes sure our pseudo-elements will be below
     the box content whatever happens. */
  z-index : 9;

  background-color: #00B8D3;
  border-radius: 100%;
}

.fancy::before {
  /* This is the  size of the clouds left ear */
  width  : 100px;
  height : 100px;

  /* We slightly move it to the left */
  left    : -80px;

  /* To make sure that the bottom of the cloud
     remains flat, we must make the bottom right
     corner of the left ear square. */
  border-bottom-right-radius: 0;
}

.fancy::after {
  /* This is the size of the clouds left ear */
  width  : 80px;
  height : 80px;

  /* We slightly move it to the right */
  right   : -60px;

  /* To make sure that the bottom of the cloud
     remains flat, we must make the bottom left
     corner of the right ear square. */
  border-bottom-left-radius: 0;
}

#collapsible-progress-bar select {
  --radius: 0;
  --baseFg: white;
  --baseBg: #270d3f;
  --accentFg: black;
  --accentBg: #ffc107;
}

#collapsible-progress-bar select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;
  cursor: pointer;
}

.quiz-point-hide {
  display: none !important;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}