/**
 * Grid size reference :
 *   sm < 576px
 *   md >= 768px
 *   lg >= 992px
 *   xl >= 1200px
 */

body, .defgram, .bgw {
    background-color: #e8eaea;
}

#top {
    margin-top: 56px;
}

#metagram * {
    color: white;
}
.bgb {

    background-color:black;
}

#metagram .row {
    margin: 0 auto;
}

#template-index h1, #template-index .h1 {
    font-family: Courier;
}

#metagram.magnificent {
    padding-top: 0;
    margin-top: -57px;
    margin-left: -2px;
}

#metagram .h1 {
    font-size: 2.5em;
}

#metagram h2 {
    font-size: 1.3em;
    margin-top: 20px;
}

#metagram p {
    font-size: 1.2em;
}

#metagram.highlight-glass-full .overlay {
    background-color: rgba(0, 0, 0, 0.7);
    margin: 0 auto;
    width:100%;
}

@media screen and (min-width: 388px) {

    #metagram.highlight-glass-full .row {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 47px;
        padding-bottom: 90px;
    }

    #metagram.highlight-text .row {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 69px;
        padding-bottom: 78px;
    }
    
}

#metagram.magnificent .container{
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
}

@media screen and (max-width: 991px) {
    #metagram .container{
        min-height: 100vh;
        display: flex;
        align-items: center;
        text-align: center;
    }
    #top {
        margin-top: 0;
    }

    #metagram .h1{
        line-height: 18vh;
    }
    

    #metagram h2 {
        line-height: 9vh;
    }
}


@media screen and (orientation: portrait) and (max-width: 991px) {
    #metagram .h1{
        line-height: 12vh;
    }
    #metagram h2 {
        line-height: 6vh;
    }
}


@media screen and (min-width: 768px) {
    #metagram .h1 {
        font-size: 3em;
    }

    #metagram h2 {
        font-size: 1.5em;
    }

    #metagram p {
        font-size: 1em;
    }
}


@media screen and (min-width: 992px) {
    #metagram .h1 {
        font-size: 3.5em;
        border-bottom: 1px dotted #808080;
    }

    #metagram h2 {
        font-size: 1.7em;
    }

    #metagram p {
        font-size: 1em;
    }
}

#metagram.highlight-glass-full .overlay {
    max-width: 100%;
}

#metagram h2 span {
    color: #cacaca;
}

#template-index .foliagram .paragram .fa {
    margin-right: 0;
}

#metagram.highlight-text .container > .row > .content > h1 span,
#metagram.highlight-text .container > .row > .content > h2 span,
#metagram.highlight-text .container > .row > .content > p span{
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0 6px;
    inline-size: fit-content;
}

.shade-primary {
    background-color: #dd4814;
    color: white;
}

.shade-secondary {
    background-color: #2a2c3c;
    color:white;
    box-shadow: -3px 3px 38px black;
}

.shade-light {
    background-color: #dadada;
    color: #333333;
}

.shade-dark {
    background-color: #191a1f;
    color: #d7d9de;
    box-shadow: -3px 3px 38px black;
}

.shade-darker {
    background-color: #101117;
    color: white;
}

.lang-flag {
    padding: 0;
    margin-left: 11px;
    margin-top: 6px;
}

.lang-flag img {
    height: 26px;
}

#metagram {
  background-size: cover;
  background-position-y: 75%;
  margin-top: -56px;
  padding-top: 56px;
}

.foliagram .paragram {
    margin-top: 26px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.9);
}

.navbar-dark .navbar-nav .active .nav-link {
    font-weight: bold;
}

.foliagram {
    margin-top: 8px;
}

.foliagram .paragram .text {
    display: block;
    width: 74%;
    float: left;
}

.defgram .foliagram .paragram h3 {
    font-size: 140%;
}

.foliagram .paragram .fa {
    float: left;
    margin-right: 3%;
    font-size: 236%;
    display: block;
    width: 19%;
    text-align: center;
    text-shadow: 6px 5px 4px #9c9c9c;
}

.defgram {
    padding-bottom: 32px;
    padding-top: 43px;
}

#page-not-found {
    background-image: url(/static/bg/retro-grid.jpg);
    background-size: cover;
    background-position-y: 75%;
    min-height: 70vh;
}

#page-not-found {
    padding-top: 15vh;
    padding-bottom: 15vh;
}

#page-not-found h1,
#page-not-found h2,
#page-not-found p {
    color:#545454;
    line-height: 135%;
    margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
    #page-not-found h1, h2, p {
        line-height: 135%;
        margin-bottom: 24px;
    }
    #page-not-found {
        padding-top: 12vh;
    }
    #page-not-found h1 {
        font-size: 4.5em;
    }
    #page-not-found h2 {
        font-size: 2.5em;
    }
    #page-not-found p {
        font-size: 1.5em;
    }
}

.expanded {
    padding: 40px 0;
}

.imagram {
    padding: 45px 0;
}

.imagram img {
    max-width: 100%;
}

.imagram h2 {
    font-size: 2.5em;
}

.imagram p {
    font-size: 1.2em;
}

@media screen and (min-width: 992px) {
    .imagram p {
        width: 90%;
    }
}

.icogram {
    margin-bottom: 20px;
}

.icogram h3 {
    border-bottom: solid #989898 1px;
    padding-bottom: 7px;
}

.icogram h3 i {
    min-width: 41px;
    text-align: center;
}

.language_img_formattor{
    align-items: center;
    padding: 15px;
}

.language_img_formattor img{
    width: 100%;
}

.language_img_formattor p{
    text-align: justify;
}

.vfx {
    min-height: 100vh;
    width: auto;
    z-index: -1;
    min-width: 100%;
    position: fixed;
}

@media screen and (max-width: 426px) {
    #template-index #metagram .h1 {
        font-size: 1.5em;
    }
}


.tritogram .paragram {
    margin-top: 18px;
    margin-bottom: 18px;
}

.contact-form.shade-dark {
    background: linear-gradient(to bottom, #33365d, #191a1f);
}


@media screen and (max-width: 991px) {
    #template-index #metagram {
        margin-top: 0!important;
        height: 100vh;
    }
    #template-index #metagram.highlight-glass-full .row {
        padding-bottom: 0;
        padding-top: 9vh;
    }
    #navbar {
        text-align: center;
        max-height: 90vh;
        overflow-y: scroll;
    }
}

@media screen and (orientation: portrait) and (max-width: 991px) {
    #template-index #metagram.highlight-glass-full .row {
        padding-top: 2vh;
    }
    #template-index #metagram .h1 {
        line-height: 7vh;
        font-size: 2em;
    }
    .navbar {
        background-color: transparent!important;
    }    
}


@media screen and (max-width: 991px) {
    #navbar {
        text-align: center;
    }
    .navbar-dark .navbar-nav .nav-link {
        font-size: 2em;
    }
    ul.nav {
        padding: 17px 0;
        padding-bottom: 32px;
    }
}


@media screen and (orientation: landscape) and (max-width: 991px) {
    #metagram {
        margin-top: 0!important;
        min-height: 100vh;
    }
    #metagram.highlight-glass-full .row {
        padding-top: 0;
        padding-bottom: 80px;
    }
    .fixed-top {
        position: absolute;
    }
    .navbar {
        background-color: rgba(0,0,0,0.7)!important;
    }
}

.navbar-brand {
    margin-right: 5px;
}

#metagram:not(.magnificent) .vfx {
    min-height: 110vh;
    margin-top: -61px;
}

.pricing-package {
    margin: -3px -3px;
    border-radius: 5px;
    border: 5px solid #022c40;
    padding: 11vh 69px;
    background: linear-gradient(#0f2c4a, #022c40);
    opacity: 0.97;
    width: 100px;
    overflow: hidden;
}

.pricing-package p {
    font-size: 1.4em;
}

.packages {
    overflow: hidden;
}

.pricing-package h3 {
    font-size: 2.3em;
    font-family: Courier;
}


.hourly-rate {
    font-size: 30px;
    margin-right: 15px;
    color: #f3ee68;
}

.pricing-package .n-hour {
    padding: 0 20px;
}


@media screen and (max-width: 992px) {
    .pricing-package h3 {
        font-size:2em;
    }
    .hourly-rate {
        font-size: 24px;
        margin-right: 15px;
        color: #f3ee68;
    }
}

.deal-banner {
    padding-top: 28px;
    padding-bottom: 28px;
}

.deal-banner p {
    font-size: 25px;
    margin-bottom: 0;
}

.deal-banner h3 {
    font-size: 2.6em;
}

@media screen and (max-width: 767px) {
    .deal-banner h3 {
        font-size: 2em;
    }
}
@media screen and (max-width: 434px) {
    .deal-banner h3 {
        font-size: 1.4em;
    }
    .deal-banner p {
        font-size: 1.2em;
    }
}
.btn-dark:not(:disabled) {
    color: #fff;
    background-color: #404161;
    border: #282b46 2px solid;
}

.btn-dark:not(:disabled):hover,
.btn-dark:not(:disabled):active,
.btn-dark:not(:disabled):focus {
    color: #fff!important;
    background-color: #414275!important;
    border: #4f4469 2px solid!important;
    box-shadow: none!important;
}


@media screen and (max-width: 857px) {
    .pricing-package * {
        text-align: center;
    }
    .pricing-package h3 {
        font-size: 1.8em;
    }
    .pricing-package p {
        font-size: 1.4em;
    }
    .pricing-package .hourly-rate {
        font-size: 19px;
    }
}

.form-control {
    background-image: linear-gradient(#b3b3b3, white);
}

.packages {
    background-color: transparent!important;
}

footer .logos {
    text-align: center;
    padding: 13px 0;
}

footer .logos a {
    color: #3e3e3e;
    white-space: nowrap;
}

footer .logos a:hover {
    text-decoration: none;
}

footer .logos i {
    font-size: 4em;
    color: #a0a0a0;
    margin: 7px 4.5%;
    margin-right: 6px;
}

footer .logos span {
    display: none;
}

@media screen and (max-width: 525px) {
    footer .logos i {
        font-size: 3em;
        margin: 7px 3%;
    }
}

footer .copyright {
    text-align: center;
    padding: 23px 0;
}


footer .copyright * {
    padding: 0 8%;
}

footer .copyright .disclaimer {
    max-width: 1025px;
    margin: 0 auto;
    margin-top: 19px;
    color: grey;
}

footer .copyright .own {
    color: #c37e00;
}

footer .copyright a.priv {
    color: #007cff;
    text-decoration: underline;
}

footer {
    padding: 15px 0;
    margin-top: -1px;
    padding-bottom: 58px;
}

#back-to-top {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 999;
    font-size: 25px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
    opacity: 0.9;
    background-color: #354375;
}

#team img {
    width: 65%;
    border-radius: 100%;
    margin-bottom: 13px;
    box-shadow: -5px -2px 23px black;
}

#team  {
    text-align: center;
    
    background-image: linear-gradient(#0c0c0c, #253456);
}

#team h3 {
    font-size: 1.5rem;
}

#team .member {
    margin-top: 24px;
    margin-bottom: 10px;
}

#team h3, #team p {
    text-shadow: 2px 3px 9px black;
}

textarea {
    min-height: 75px;
}

.navbar {
    background-color: rgba(0,0,0,0.70)!important;
    transition: background-color 100ms linear;
}

@media screen and (max-width: 991px) and (orientation: portrait) {
    .navbar {
        background-color: transparent!important;
    }
}

#template-index .navbar {
    background-color: transparent!important;
}

#template-index .navbar.is-not-top, .navbar.is-not-top {
    background-color: rgba(0,0,0,0.7)!important;
}

@media screen and (max-width: 991px) {
    #template-index .navbar.opened, .navbar.opened {
        background-color: black!important;
        z-index: 9999;
        max-height: 100vh;
        height: 100vh;
        padding-bottom: 100%;
        align-items: baseline;
        position: fixed;
    }
    .navbar .nav-link {
        padding: 2vh 0;
    }
}

#team {
    text-align: center;
}

@media screen and (max-width: 991px) {
    #template-pricing #top {
        margin-top: 56px;
    }
    #template-pricing #metagram {
        display: none;
    }
    #template-pricing .navbar:not(.is-not-top) {
        background-color: black!important;
    }
}

video {
    background-color: black;
}

.text {
    padding: 0 20px;
}

.text h2 {
    display: inline;
    width: 100%;
}