/*========= VARIABLES =========*/
:root{
    --color-purple:#51284F;
    --color-white:#ffffff;
    --color-black:#000000;
    --color-gray-light:#f9f9f9;
    
    --font-size-xs:12px;
    --font-size-sm:14px;
    --font-size-md:18px;
    --font-size-lg:24px;
    --font-size-xl:32px;
    
    --transition-all-xs:all 0.2s ease;
    --transition-all-sm:all 0.4s ease;
    --transition-all-md:all 0.6s ease;
    --transition-all-lg:all 0.8s ease;
    --transition-all-xl:all 1s ease;
}   

@font-face{
    font-family:'guardian-egypt';
    src:url(https://s3.amazonaws.com/present.knowledgevision.com/account/16c27743-a90e-4bb1-898b-8d3f82ef87da/subaccount/4cfb5583-22e7-43db-9020-54824a4c88ae/content/assets/templates/template_background/GuardianEgypt_Medium_Web_otf_1635233552617/GuardianEgypt_Medium_Web_25807d05-126a-4c7c-8b31-4a07bf7769f6.otf?AWSAccessKeyId=AKIAJ3VQS6HPMVD4IBQA&Expires=2145916800&Signature=jR8kV5vlxDZgnbSSH3EE0X7TNBQ%3D);
}

h1, h2, h3, .showcase-description p:first-child{
    font-family:'guardian-egypt';
}

h1.showcase-title{
    color:var(--color-purple) !important;
}

h3.showcase-title {
     color:var(--color-purple) !important;
}

h3 .tile-title{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/*--------------- GENERAL  ---------------*/
body{
    padding-bottom:0px;
}

/*--------------- NAVIGATION  ---------------*/
.navbar-default{
    border-bottom: 0px !important;
}
.navbar-default .showcase-logo {
    max-width: 200px;
}

.navbar-default #main-search-form {
    background-color: transparent !important;
    border: 0px solid transparent !important;
}


/*--------------- GUEST BOOK  ---------------*/
.login-container{
    background-image: url("https://s3.amazonaws.com/present.knowledgevision.com/account/16c27743-a90e-4bb1-898b-8d3f82ef87da/subaccount/4cfb5583-22e7-43db-9020-54824a4c88ae/content/assets/templates/template_background/loginBg_1_Edited_1635239296289/loginBg_1_Edited_92a63ca2-21d9-4f17-9c25-578bfdc6f593.jpg?AWSAccessKeyId=AKIAJ3VQS6HPMVD4IBQA&Expires=2145916800&Signature=o6FZuWpkAeSjnk1uCcejonQjlQg%3D");
    width: 100%;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 60px);
}

.login-container .row{
    display: flex;
    height: 100%;
    align-items: center;
    margin-top:0px !important;
}

.login-container .row .col-lg-6{
    width: 35%;
    margin-left: 60%;
    background-color: var(--color-white);
    padding: 3rem;
    display:flex;
    flex-flow: column wrap;
}

.login-container .row .col-lg-6 > *{
    text-align:left !important;
}

.login-container .row .col-lg-6 .row img{
    margin-left: 14px;
    width:228px !important;
}

.login-container .row .col-lg-6 h3.text-center{
    font-size: 16px !important;
    color: var(--color-purple) !important;
    margin-bottom:10px !important;
    margin-top:10px !important;
}

.login-container .row .col-lg-6 p:nth-of-type(2){
    color: var(--color-purple) !important;
}

.login-container .row .col-lg-6 p:nth-of-type(1), .login-container .row .col-lg-6 p:nth-of-type(3){
    display:none;
}

.login-container .row .col-lg-6 form{
    color:var(--color-black) !important;
}

.login-container .row .col-lg-6 form .form-control{
    border-radius:0px;
}

.login-container .row .col-lg-6 form label{
    font-weight:400;
}

.login-container .row .col-lg-6 form button{
    width:100% !important;
    background-color:var(--color-purple) !important;
    border: 0px !important;
    border-radius: 0px !important;
}

@media only screen and (max-width:768px){
    .login-container .row .col-lg-6{
        width: 80%;
        margin-left: 10%;
    }
}


/*--------------- Showcase Header ---------------*/

header{
    margin-top:30px;
    display:block !important;
}

.header-container {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.header-container h1.showcase-title{
    font-size: var(--font-size-lg);
    font-weight:400;
}

#url-auth-suffix ~ header{
    margin-top:0px;
    margin-bottom: 0px;
    display: block !important;
    padding-top: 0px;
    height:400px; /*Height should be changed based on the image size*/
}

#url-auth-suffix ~ header .container {
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    margin-bottom : 0px;
}

#url-auth-suffix ~ header .container .row{
    margin-left:0px;
    margin-right:0px;
    height: 100%;
}

#url-auth-suffix ~ header .container .row .col-xs-12{
    padding-left:30px;
    padding-right:30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#url-auth-suffix ~ header .showcase-banner {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#url-auth-suffix ~ header .header-container h1.showcase-title {
    font-size: var(--font-size-xl);
    color:var(--color-white) !important;
}


#url-auth-suffix ~ header .header-container span.showcase-description {
    margin-top:0px !important;
    margin-bottom: 0px;
    text-align: left;
    max-width: 100%;
    width: 60% !important;
    background: var(--color-purple);
    padding: 20px !important;
}

@media (max-width: 1024px){
    #url-auth-suffix ~ header .header-container span.showcase-description {
        max-width: 100%;
        width: 100% !important;
    }
}

#url-auth-suffix ~ header .header-container span.showcase-description p{
    color:var(--color-white);
    font-size: var(--font-size-lg);
    
}

#url-auth-suffix ~ header .header-container span.showcase-description p a{
    color: var(--color-white) !important;
    border: 1px solid #fff;
    padding: 1rem 1.5rem;
    display: inline-block;
    margin-top: 2rem;
    font-size:var(--font-size-sm);
}

#url-auth-suffix ~ header .header-container span.showcase-description p a:hover{
    text-decoration:none;    
}


/*--------------- Featured Knovio ---------------*/
header + .container{
    margin:60px auto;
}

.featured-knovio.row{
    padding:0px;
    margin:0px;
    background-color: var(--color-purple);
}

.container .featured-knovio .featured-knovio-post {
    box-shadow: 0 0 0 transparent;
}

.container .featured-knovio .featured-knovio-info {
    margin-left: 0%;
    padding: 2rem;
    color:var(--color-white);
}

.container .featured-knovio .featured-knovio-info .featured-knovio-title{
    color:var(--color-white) !important;
    font-size: var(--font-size-lg);
    margin: 0rem;
}

.container .featured-knovio .featured-knovio-info .featured-knovio-description{
    height: auto;
    color:var(--color-white) !important;
}


/*--------------- Featured Category ---------------*/

section.featured-category {
    margin-bottom: 0px;
    border-bottom: 0px solid transparent;
    margin-top: 0px;
    padding: 4rem 0rem 0rem 0rem;
    background: #ffffff;
}

section.featured-category:nth-of-type(1) {
    /*padding-top:0rem !important;*/
}

.featured-category .col-xs-9{
    width: 70% !important;
    text-align: left;
}

.featured-category .col-xs-2{
    width: 30% !important;
}


.featured-category .container .row .col-xs-9 a, .featured-category .container .row .col-xs-9 a h3.showcase-title{
    color: var(--color-purple) !important;
}

.featured-category .container .row .col-xs-9 a:hover{
    color: var(--color-purple) !important;
}

.featured-category .container .row .col-xs-2.pull-right a {
    background: var(--color-purple);
    color: var(--color-white) !important;
    text-decoration: none;
    padding: .5rem 2rem;
    transition:var(--transition-all-xs);
}

.featured-category .container .row .col-xs-2.pull-right a:hover {
    background: var(--color-purple);
    color: var(--color-white) !important;
}

.column-view-item>.post {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /*height: 280px;*/
    border-bottom: 0px solid #000;
    background: var(--color-gray-light);
    transition:var(--transition-all-xs);
}

.column-view-item>.post:hover{
    box-shadow: 0px 6px 12px rgb(0 0 0 / 10%);
    transform: translateY(-8px);
    cursor: pointer;
}

.column-view-item>.post:hover .tile-text-area .post-details-activate{
    color: var(--color-black) !important;
    transition:var(--transition-all-xs);
}

.column-view-item>.post:hover .tile-text-area .post-details-activate i{
    display:block !important;
}
.column-view-item>.post>.thumb-wrapper{
    background-color:var(--color-white) !important;
}
.column-view-item>.post>.thumb-meta-wrapper {
    height: auto;
}

/*--------------- Carousel Arrows---------------*/
a.carousel-control.right.featured-post-move-forward.increased-opacity,
a.carousel-control.left.featured-post-move-back.increased-opacity{
    color:var(--color-purple) !important;
}


/*--------------- Footer ---------------*/
.login-container + footer{
    margin-top: 0px;
    display:none !important;
}

footer {
    background-color:var(--color-purple) !important;
    margin-top: 30px;
    display:block !important;
}

.footer-container {
    padding: 20px 0 20px !important;
    text-align:center;
}

.footer-container p{
    color: var(--color-white);
    margin-bottom:0px;
}

/*--------------- Popup Dropdown  ---------------*/
#postDetailsBody div div span{
	color:#000 !important;
}


/* FIXES */
.modal #postDetailsBody .post-details-description-output {
    color: black;
}

.single-post .post .tile-area .tile-text .tile-navigation-link .navigation-link-operation {
    color: black !important;
}

#page-top .tile-title {
    word-break: keep-all;
}

@media screen and (max-width: 677px) {
    #page-top header {
        height: 100%;
    }
}

/* Search Box border and text */
.navbar-default #main-search-form .search-form-head input.search-query,
#main-search-form > div > button.search-submit,
#main-search-form .search-cancel:hover span:before{
    color: rgb(0,0,0) !important;
}

.search-form-head input.search-query:focus {
    border: 2px solid rgba(0,0,0,1) !important;
}