@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700&family=Open+Sans:wght@300;400;500;700&family=Sora:wght@300;400;600;700&display=swap');

:root {
    --font-01:  font-family: 'Montserrat';
    --font-02:  font-family: 'Open Sans';
    --font-03:  font-family: 'Sora',    
}

.font-01 { font-family: 'Montserrat', sans-serif; }
.font-02 { font-family: 'Open Sans', sans-serif; }
.font-03 { font-family: 'Sora', sans-serif; }

.color-blue { color:#44728b}

.font-medium { font-size: 0.85em;}

.websiteViewPort { width: 990px; margin: auto;}
.custom-width    { max-width: 990px;  margin: auto;}

.bck     { background-image: url(/img/trk_assets/elegant-abstract-pattern.jpg); background-repeat: no-repeat; }
.bck-01  { background-color: white; background-image: url(/img/trk_assets/trk_background_Contents.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;   background-attachment: fixed; }
.bck-map { background-image: url(/img/uon_assets/Map_Offices.png); background-repeat: no-repeat;  background-position: left center;   }

.pull-up { margin-top: -20px;}

.bck-whiteContainer     {  background: #F2F2F2; box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25); border-radius: 5px; border-bottom: 3px solid white; position: relative;}
.bck-whiteContainer-01  {  background: #F2F2F2; box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25); border-radius: 5px; border-bottom: 3px solid white; position: relative;}


.title-circle { font-weight: bold; width: 150px; height: 150px; border:1px solid rgb(223, 223, 223); border-radius: 100px; 
                display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2em;}

.title-section { font-size: 1.2em; font-weight: bold;  }
.title-section-subtitle { font-size: 1em;  }

.title-footer { font-size: 0.85em; font-weight: bold;  }
.title-footer-links { font-size: 0.75em; text-decoration: none! important;  }
.title-footer-links a {  text-decoration: none! important; color:grey  }
.footer-icons { display: flex;     justify-content: space-around; margin-top:10px }
.footer-icons img { height: 40px;  }

.title-contents {font-size: 1.6em;color: #850606;}
.contents-txt        { font-family: 'Sora'; color: rgb(61, 61, 61); text-align: justify; }
.contents-side-image {
    width: 393px;
    height: 100%;
    background-image: url(../img/trk_assets/trk_Intro.png);
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 47;
    left: -68px;
    top: 19px;
    /* background-color: rebeccapurple; */
}

.services-button img { width: 80px; margin-bottom: 15px; }
.services-button { padding: 15px 10px; text-align: center; font-size: 0.95em;  font-family: 'Sora'; transition: 0.1s all; }
.services-button:hover { background-color: white; border-radius: 5px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.076); transform: scale(1.1);  cursor: pointer; }
.services-box-height { height: 270px;}

.custom-primary       { background-color: #ffffff !important; border: 1px solid rgb(165, 165, 165) !important; color:black;}
.custom-primary:hover { background-color: #243341 !important; color:white !important; border: 0px !important;}

.morada-wrapper      {background-color: #ffffffc9;border-radius: 3px;width: calc(30% - 5px);padding: 15px;font-family: 'Open Sans';font-size: 0.80em;margin: 13px;border-bottom: 3px solid #e15b5b;}
.morada-wrapper-wide { width: 47%}
.morada-wrapper-full { width: 100%}
.morada-wrapper span { display: block;}
.morada-country      { font-family: 'Sora'; font-size: 1.5em; color: rgb(78, 78, 78); border-bottom: 1px solid silver; margin-bottom: 5px;}
.morada-place        {font-family: 'Sora';font-size: 1.2em;color: rgb(195 50 48);font-weight: 500;border-left: 5px solid rgb(205 90 90);padding-left: 8px;margin: 10px 0px;}
.morada-note         { font-family: 'Open Sans'; font-size: 0.85em; color: rgb(78, 78, 78);}

.morada-tel         { margin-top: 5px; font-family: 'Montserrat'; }
.morada-email       { margin-top: 5px;  font-family: 'Montserrat';}
.morada-tel   img   { height: 20px; opacity: 0.5; margin-right: 5px; }
.morada-email img   { height: 15px; opacity: 0.5; margin-right: 5px; }

#officesBoxHP { height: 170px;}


@media (max-width:998px)
{
 .contents-side-image { display: none;}
 .morada-wrapper-wide { width: 100%}
 .morada-wrapper      { width: 100%}
 .bck-map { background-size: 45%; }

}