@media (max-width: 575px) {
    .container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 576px) {
    .container {
        width: 90%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*section .container {
    background-image: url("../images/background.jpg");
    background-repeat: repeat;
    background-size: 100%;
}*/

.card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid white;
    color: black;
    font-size: 1.25rem;
}

.fitImg {
    width: 100%;
    height: auto;
}

.pe-show {
    cursor: pointer;
}

/* tablist */
.nav .nav-item .nav-link {
    background-color: rgb(246, 247, 249);
    color: black;
    font-size: 2.5rem;
    border: 1px rgb(213, 213, 213) solid;
}

@media screen and (min-width: 992px) {
    .nav .nav-item .nav-link {
        border-top-left-radius: 20rem;
        border-top-right-radius: 20rem;
    }
}

.nav .nav-item .nav-link:hover {
    border: 1px rgb(123, 163, 216) solid;
    font-weight: bold;
}

.nav .nav-item .nav-link:hover img {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7))
}

.nav .nav-item .nav-link.active {
    background-color: rgb(172, 209, 255);
    color: black;
    font-size: 2.5rem;
    border: 0px rgb(213, 213, 213) solid;
}

.nav .nav-item .nav-link.active:hover {
    border: 1px rgb(123, 163, 216) solid;
    font-weight: bold;
}

.tab-content .card .card-footer {
    background-color: white;
}

.productBoxShadow:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .7);
}

.productCardHeader {
    background: rgba(26, 140, 255, 0.35);
    /*height: 80px;*/
    font-size: 2rem;
}

.productEducationCardHeader {
    background: rgb(202, 234, 209);
    /*height: 80px;*/
    font-size: 2rem;
}

.productInfoPlan {
    display: flex;
}

.productInfoPlan .btn {
    flex: 1;
    font-size: 1.3rem;
}

.productInfoPlan .btn-outline-dark:hover {
    font-size: 1.5rem;
    color: #343a40;
    background-color: transparent;
    border: 3px solid;
    border-color: rgb(255, 0, 0);
    animation: 1.5s borderRainbow linear infinite;
}

.productInfoPlan .btn-outline-dark.active:hover {
    font-size: 1.5rem;
    border: 3px solid;
    border-color: rgb(255, 0, 0);
    animation: 1.5s borderRainbow linear infinite;
}

@keyframes borderRainbow {
    from {
        border-color: rgb(255, 0, 0);
    }
    16.6% {
        border-color: rgb(255, 0, 255);
    }
    33.3% {
        border-color: rgb(0, 0, 255);
    }
    50% {
        border-color: rgb(0, 255, 255);
    }
    66.6% {
        border-color: rgb(0, 255, 0);
    }
    83.3% {
        border-color: rgb(255, 255, 0);
    }
    to {
        border-color: rgb(255, 0, 0);
    }
}

.productInfoTitle {
    font-size: 1.2rem;
    font-weight: bold;
}

.productInfoContent {
    font-size: 1.2rem;
    font-weight: normal;
}

.productInfoOrigin {
    font-size: 2rem;
    color: #FF0000;
    text-decoration: line-through;
}

.productInfoPrice {
    font-size: 3rem;
    font-weight: normal;
}

.productInfoSmall {
    font-size: 0.9rem;
    font-weight: normal;
}

.productInfoRenewPrice {
    font-size: 2rem;
    color: #FF0000;
}

.courseCardHeader {
    background: rgba(26, 140, 255, 0.35);
    height: 120px;
    font-size: 2rem;
}

.productFaqCard {
    background: rgba(255, 255, 255, 1);
}

/* lokiTutorialModal */
.lokiTutorialModal {
    font-size: 1.25rem;
}

.lokiTutorialCheckbox {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.lokiTutorialRainbow {
    animation: rainbowShadow 3.5s linear 0s infinite normal;
}

@keyframes rainbowShadow {
    0%   {box-shadow: 0 0 10px rgba(255, 0, 0, .8), 0 0 10px rgba(255, 0, 0, .5);}
    8%   {box-shadow: 0 0 10px rgba(255, 127, 0, .8), 0 0 10px rgba(255, 127, 0, .5);}
    16%  {box-shadow: 0 0 10px rgba(255, 255, 0, .8), 0 0 10px rgba(255, 255, 0, .5);}
    25%  {box-shadow: 0 0 10px rgba(127, 255, 0, .8), 0 0 10px rgba(127, 255, 0, .5);}
    33%  {box-shadow: 0 0 10px rgba(0, 255, 0, .8), 0 0 10px rgba(0, 255, 0, .5);}
    41%  {box-shadow: 0 0 10px rgba(0, 255, 127, .8), 0 0 10px rgba(0, 255, 127, .5);}
    50%  {box-shadow: 0 0 10px rgba(0, 255, 255, .8), 0 0 10px rgba(0, 255, 255, .5);}
    58%  {box-shadow: 0 0 10px rgba(0, 127, 255, .8),  0 0 10px rgba(0, 127, 255, .5);}
    66%  {box-shadow: 0 0 10px rgba(0, 0, 255, .8), 0 0 10px rgba(0, 0, 255, .5);}
    75%  {box-shadow: 0 0 10px rgba(127, 0, 255, .8), 0 0 10px rgba(127, 0, 255, .5);}
    83%  {box-shadow: 0 0 10px rgba(255, 0, 255, .8), 0 0 10px rgba(255, 0, 255, .5);}
    91%  {box-shadow: 0 0 10px rgba(255, 0, 127, .8), 0 0 10px rgba(255, 0, 127, .5);}
    100% {box-shadow: 0 0 10px rgba(255, 0, 0, .8), 0 0 10px rgba(255, 0, 0, .5);}
}

.lokiTutorialPosVerb {
    background-color: #d9737d;
    color: #fff;
    border-color: #000;
    border-radius: 5px;
}

.lokiTutorialPosOptional {
    background-color: #20c997;
    color: #000;
    border-color: #000;
    border-radius: 5px;
}

.lokiTutorialPosCheck {
    background-color: #5d9cf9;
    color: #fff;
    border-color: #000;
    border-radius: 5px;
}

.lokiTutorialPosUncheck {
    background-color: #6c757d;
    color: #fff;
    border-color: #000;
    border-radius: 5px;
}

.lokiTutorialDeployBtn {
    min-width: 300px;
    max-width: 70%;
    font-size: 1.25rem;
}

.lokiTutorialSignAnime {
    animation: signFrames 0.75s ease-in-out 0s infinite alternate;
}

@keyframes signFrames {
    0%   {transform: translateX(0px);}
    25%  {transform: translateX(0px);}
    100% {transform: translateX(-20px);}
}

.lokiTutorialLabel {
    width: 15%;
}

.lokiTutorialArgsBorder {
    opacity: 0;
    color: #ff0000;
    font-weight: bold;
}

#lokiTutorialCode.collapsing,
#lokiTutorialCode.show {
    display: flex;
}

#lokiTutorialAnime.collapsing,
#lokiTutorialCode.collapsing {
    transition-duration: 1.2s !important;
}

#lokiTutorialPatternUtterance {
    opacity: 0;
    transform-style: preserve-3d;
    transform-origin: 0px 0px;
}

#lokiTutorialPatternInput {
    opacity: 0;
    transform-style: preserve-3d;
    transform-origin: 0px 100%;
}

.lokiTutorialMatchText {
    font-size: 2rem;
}