:root {
    /* Primary brand colours */
    --vf-red: #e60000;
    --vf-grey: #3a3a3a;
    --vf-white: #FFFFFF;
    --vf-dig-grey: #4a4d4e;
    --vf-dig-green: #428600;
    --vf-dig-red: #BD0000;
    --vf-dig-maroon: #990000;
    /* Secondary brand colours */
    --vf-red-violet: #9c2aa0;
    --vf-aubergine: #5e2750;
    --vf-aqua-blue: #00b0ca;
    --vf-turquoise: #007c92;
    --vf-spring-green: #a8b400;
    --vf-lemon-yellow: #fecb00;
    --vf-fresh-orange: #eb9700;
    --vf-black: #000000;
}

/* fonts */
@font-face{
    font-family: Vodafone-Regular;
    src: url('../fonts/Vodafone_Font_Rg.ttf');
}
@font-face{
    font-family: Vodafone-Light;
    src: url('../fonts/Vodafone_Font_Lt.ttf');
}
@font-face{
    font-family: Vodafone-Bold;
    src: url('../fonts/Vodafone_Font_RgBd.ttf');
}
@font-face{
    font-family: Vodafone-Extra-Bold;
    src: url('../fonts/Vodafone_Font_ExBd.ttf');
}
/* All Content */
body{
    background-color: #ffffff;
    overflow: hidden;
}

p { font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif; }

span{ font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif;}

.vf-title{ font-family: "Vodafone-Bold", Helvetica, Arial, sans-serif;}
.vf-text{ font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif;}

/* Header Content */
.bannerImg{
    background-image: url('../img/banner.jpg');
    background-position: center bottom;
    background-size: cover;
    height: 250px;
}
.vfTitle{
    color: white; 
    background-color: rgba(230,0,0,.75);
    font-family: "Vodafone-Light", Arial, sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    margin: 0 55% 1.25rem 5% !important;
}
.vfTitle.arabic{margin: 0 5% 0 55% !important}
.vfSubtitle{
    color: #E60000;
    background-color: rgba(255, 255, 255, .75);
    font-family: "Vodafone-Regular", Arial, sans-serif;
    font-weight: 400 !important;
    font-size: 2rem;
    margin: 30px 55% 1.25rem 5%;
}
.vfSubtitle.arabic{margin: 0 5% 1.25rem 55% !important}
.profile{
    height: 52px;
    width: 52px;
    margin-top: 5px;
    border-radius: 50%;
    background-color:  rgba(230,0,0,.75);
}
.dropdown-menu.right{right: 0 !important; left: auto}
.dropdown-item{text-align: start !important;}
.dropdown-item:hover{
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.right-align{
    position: absolute;
    right: 0;
    margin: 0.5rem;
}
.left-align{
    position: absolute;
    left: 0;
    margin: 0.5rem;
}
#lang-list{
    border-radius: 5px;
    background-color: rgba(230,0,0,.75);
    color: #ffffff;
    padding: 0.5rem;
    cursor: pointer;
    font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    border: none;
}
#lang-list:focus{outline: none;}
.langOpt{
    padding: 0.25rem;
    background-color: #ffffff;
    color: black;
}
.langOpt:hover{
    background-color: rgba(230,0,0,.75) !important;
    color: white;
    cursor: pointer;
}

/* Main Content */
.arabic{ direction: rtl;}
.arabic .media-left{margin-left: 1rem; margin-right: 0;}
.arabic-text{
    text-align: start !important;
}
.modal-card-body{
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}
.links{
    min-height: calc((100vh - 250px) - 160px);
    padding-top: 1% !important;
}
.links.admin{ padding: 2% 3% 1% 3% !important;}
.errorLinks{min-height: calc(100vh - 370px) !important;}
#links{ padding: 1% 5%; }
.teacherLink, .guestLink, .adLink {
    margin: 0 auto;
    padding: 1rem;
    cursor: pointer;
    transition: 0.5s ease;
}
.teacherLink:hover, .guestLink:hover, .adLink:hover{transform: scale(1.15);}
.adLink{
    padding: 0.5rem !important;
    max-width: max-content;
}
.adLink .media-content{max-width: 15rem;}
.underConstruction,.adLink.systemStatus{cursor: default}
.underConstruction{opacity: 0.4;}
.underConstruction:hover, .adLink.systemStatus:hover{transform: none !important;}
.tile{
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
}
.cardTitle {
    font-size: 1.25rem;
    font-family: "Vodafone-Bold", Helvetica, Arial, sans-serif;
}
.cardSubtitle {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.5);
}
.systemStatusImg{
    width: 48px;
}
.teacherIcon, .guestIcon, .adIcon{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.image.is-72x72 {
    height: 72px;
    width: 72px;
}
.terms, .privacy{
    padding: 0rem 1.5rem;
    text-align: center;
}
.termsText, .privacyText{
    font-size: 1.25rem;
}
.modalTitle{
    font-size: 1.25rem;
    font-weight: 600;
}
.modalTxt{
    margin-bottom: 1rem;
}

.footerPages{
    padding: 3% 10%;
}
.footerPages > ol > p{font-size: 1.15rem;}

/* Maybe enable later through a query? */
.huawei-ict-academy {
  display: none;
  visibility: hidden;
}

/*
 *
 * Logos Content
 *
 */
.logos {
    width: 100%;
    padding-right: 60px;
    padding-left: 60px;
    margin: 40px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.logos > * {
  margin: 20px;
}

.logos .moe-logo {
    height: 45px;
}

.logos .vff-logo {
    height: 45px;
}

.logos .unhcr-logo {
    height: 42px;
}
@media (min-width: 1024px) {
    .logos {
        justify-content: flex-end;
    }
}

@media (max-width: 750px) {
    .logos {
        width: 90%;
        padding: 45px;
        margin: 0 auto;
        display: grid;
        grid-template-areas:
            "vf . un"
            ". moe .";
        grid-row-gap: 25px;
    }

    .logos > * {
        margin: 0px;
    }

    .logos .moe-logo {
        grid-area: moe;
        justify-self: center;
    }

    .logos .vff-logo {
        grid-area: vf;
        height: 45px;
    }

    .logos .unhcr-logo {
        margin-right: 0px;
        grid-area: un;
        height: 40px;
    }

    .logos .logo-divider {
        display: none;
        visibility: hidden;
    }
}

@media (max-width: 500px) {
    .logos {
        display: none;
        visibility: hidden;
    }
}
/* If we're showing the IRC logo we need to tweak things
 * a bit because the logo is taller than it is wide
 */

.tall-logos {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.tall-logos > * {
  margin: 20px;
}

.tall-logos .moe-logo {
  height: 60px;
  width: auto;
  margin-left: 4vw;
}

.tall-logos .irc-logo {
  height: 100px;
  width: auto;
}

.tall-logos .vff-logo {
  height: 60px;
}

.tall-logos .unhcr-logo {
  height: 55px;
  margin-right: 4vw;
}

@media (min-width: 1024px) {
    .tall-logos {
        margin-bottom: 2vh;
        justify-content: flex-end;
    }

}


@media (max-width: 750px) {
    .tall-logos {
        width: 80%;
        padding: 45px;
        margin: 0 auto;
        display: grid;
        grid-template-areas:
            "moe vf"
            "irc un";
        grid-row-gap: 25px;
    }

    .tall-logos > * {
        margin: 0px;
    }

    .tall-logos .moe-logo {
        grid-area: moe;
        margin-inline: auto;
        height: 45px;
        width: auto;
    }

    .tall-logos .irc-logo {
        grid-area: irc;
        margin-inline: auto;
    }

    .tall-logos .vff-logo {
        grid-area: vf;
        height: 45px;
    }

    .tall-logos .unhcr-logo {
        margin-right: 0px;
        grid-area: un;
        height: 40px;
    }

    .tall-logos .logo-divider {
        display: none;
        visibility: hidden;
    }
}

@media (max-width: 500px) {
    .tall-logos {
        display: none;
        visibility: hidden;
    }
}

/* Footer Content */
.vf-footer{
    width: 100%;
    box-sizing: border-box;
    background-color: #4a4d4e;
    font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    padding: 0.25rem 0rem 0.25rem;
    height: 90px;
}
.footer .columns:not(:last-child){margin: 0px !important;}
.vf-footer p{font-family: "Vodafone-Regular", Helvetica, Arial, sans-serif !important;}
#footer{
    margin: auto;
    width: 90%;
}
.footer .column, a { color: #ffffff; }
.footer a:hover{ text-decoration: underline;
color: #ffffff; }

/* Media Queries */
@media screen and (min-width: 1900px){
    #links{padding: 5% !important;}
    .columnTwo{margin-right: 150px}
    .adLink{padding: 1.5rem !important;}
    .links.admin{padding: 2% 5% 1% 8% !important;}
}

@media screen and (min-width: 1440px) and (max-height: 800px){
    .links.admin{padding: 10px 2% !important}
    .adLink{padding: 0.25rem !important;}
}

@media screen and (min-width: 1400px) {
    .bannerImg{ height: 300px; }
    .links{ 
        min-height: calc((100vh - 300px) - 170px); 
        padding-top: 40px !important;
    }
    .columnTwo{margin: 0 120px;}
    .adLink .media-content{min-width: 15rem;}
}


@media screen and (max-width: 1280px){
    #links, .links.admin{ padding: 0% 5%}
    .mainTiles.small{ min-height: 90px;}
    .vf-footer{ font-size: 16px;}
    .cardTitle {font-size: 1rem; }
    .profile{
        width: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 1280px) and (max-height: 648px){
    .bannerImg{ height: min-content;}
    .links {
        min-height: calc((100vh - 200px) - 170px);
        padding-top: 40px !important;
    }
    .links.admin{padding-top: 10px !important;}
    #links{padding: 1% 5%;}
    .adLink{padding: 0.25rem !important}
    .columnTwo{margin: 0 50px;}
}

@media screen and (max-width: 1024px){
    .vf-footer{ height: 120px;}
    #footer{width: 100%}
    #links{padding: 0% 5%}
    .links{ min-height: calc((100vh - 250px) - 190px);
        padding-top: 50px !important;
    }
    .links.admin{padding: 50px 5% 0 5% !important}
}

@media screen and (max-width: 1024px) and (max-height: 700px){
    .links.admin{padding: 10px 2% !important;}
}

/* Tablet */
@media screen and (max-width: 850px) and (max-height:420px){
    body{overflow: scroll;overflow-x: hidden;}
    .vf-footer{height: auto; padding: 1rem;}
}
@media screen and (max-width: 800px){
    body{ overflow: scroll;
        overflow-x: hidden;
    }
    .links{
        min-height: auto;
        padding-top: 25px !important;
    }
    .links.admin{ padding-top: 15px !important;}
    #footer{width: 85%;}
    .vf-footer{ height: auto;
        padding: 0.75rem 0rem 1rem;
    }
    .teacherLink{padding: 0.65rem;}
    .columns:not(:last-child){margin: 1rem !important;}
}
@media screen and (max-width: 800px) and (height: 1280px){
    .columns{ display: block !important;}
    .columns:not(:last-child){margin: 0px !important;}
    .logos{padding: 35px 0 25px 0}
    .guestLink, .adLink{ padding: 30px 0}
    .tile{ display: block !important;}
    .vf-footer.admin{padding: 0;}
    .links{padding: 8% 0 !important;}
}
@media screen and (max-width: 768px) and (orientation: portrait){
    .vfTitle, .vfTitle.arabic{margin: 0 5% 1.25rem 5% !important;}
    .vfSubtitle, .vfSubtitle.arabic{ margin: -1.25rem 5% 1.25rem 5% !important;}
    .links{padding-top: 8% !important;}
    .columns:not(:last-child){margin: 0 !important;}
}
@media screen and (max-width: 653px){
    .vfTitle, .vfTitle.arabic{ margin: 0.25rem 3% 0 3% !important; font-size: 2rem;}
    .vfSubtitle, .vfSubtitle.arabic{ margin: 0 3% 1.25rem 3% !important; font-size: 2rem;}
    .profile{ margin-top: 2px;}
    .links{padding-top: 15px !important;}
}
@media screen and (max-width: 350px){
    #links{padding: 0 !important;
        width: 100vw;
    }
    .column{ padding: 0.75rem 0 !important;
        margin: 0;
        max-width: 100vw;
    }
    .teacherLink, .guestLink{
        padding: 1rem 1.5rem !important;
    }
}