@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

	 


@font-face {
    font-family: 'CoffeeServiceRegular';
    src: url('/font/coffeeservice-webfont.eot');
    src: url('/font/coffeeservice-webfont.eot?#iefix') format('embedded-opentype'), url('/font/coffeeservice-webfont.woff') format('woff'), url('/font/coffeeservice-webfont.ttf') format('truetype'), url('/font/coffeeservice-webfont.svg#CoffeeServiceRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    /*src: local('../font/Roboto-Regular.ttf'), url('../font/roboto.woff');*/
    src: local('Roboto Regular'),local('Roboto-Regular'),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff)format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'),local('Roboto-Medium'),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff)format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'),local('Roboto-Italic'),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff)format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-size: 30px;
    src: local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff)format('woff');
}



/*@font-face {

    font-family: 'Montserrat';
    src: url(../font/Montserrat-Regular.ttf) format("opentype");
}*/


/* 

    -----------------------
    Fonts
    -----------------------

*/

.fontOverride {
    /*font-family: 'Roboto';*/
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    font-size: 20px;
}

.myHeader {
    margin-top: 30px;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
}







.dark-primary-color {
    background: #D32F2F;
}

.default-primary-color {
    background: #F44336;
}

.light-primary-color {
    background: #FFCDD2;
}

.text-primary-color {
    color: #FFFFFF;
}

.accent-color {
    background: #FFEB3B;
}

.primary-text-color {
    color: #212121;
}

.secondary-text-color {
    color: #757575;
}

.divider-color {
    border-color: #BDBDBD;
}



/* 

    -----------------------
        Navigation bar
    -----------------------

*/
#top-left-logo {
    width: 133px;
    height: 83px;
    background-image: url(/images/Tomasina-cat-sanctuary.png);
    background-size: contain;
    position: fixed;
    top: 0px;
    left: 0px;
    /*right: -21px;*/
    z-index: 21;
    background-repeat: no-repeat;
    margin-top: 10px;
}

.navbar-default .logo h1 {
    font-size: 2em;
}

.navbar-brand h1 {
    font-size: 1em;
}





@media (max-width: 800px) {
    nav .navbar-nav {
        visibility: hidden;
    }
}

.navbar {
    height: 55px;
    overflow: visible;
    text-shadow: 1px 2px 4px #210a0a;
    /*border-: rgba(255,0,0,0.5);*/
}

    .navbar .nav-aside {
        margin-left: 120px;
        height: 9vh;
    }

    .navbar .navbar-nav > li > a {
        color: #F6F6F6;
    }

        .navbar .navbar-nav > li > a:hover {
            color: #D32F2F;
            border-bottom: #D32F2F 1px solid;
            margin-bottom: 5px;
            background-color: inherit;
            text-shadow: none;
        }

.navbar-default {
    /*background: #DE1B1B;*/
    /*box-shadow: 20px 20px 13px 0px #382b2b;*/
}

.navbar-fixed-top {
    z-index: 20 !important;
}

.navbar-default .logo h1 {
    margin-top: 0px;
    padding-top: 5px;
    text-shadow: rgb(75, 0, 0) 9px 9px 7px;
}



.navbar-default .logo a {
    color: black;
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-decoration: none;
}

.navbar-brand h1 {
    position: absolute;
    top: 0px;
}

.burger {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 45px;
    /*border: 1px solid blue;*/
    padding: 2px;
    margin-right: 1%;
    margin-top: 1%;
    visibility: hidden;
}

@media (max-width: 800px) {
    .burger {
        visibility: visible;
    }
}

.burger:hover {
    cursor: pointer;
}


/* 

    -----------------------
    Body parts
    -----------------------

*/


body {
    background-color: rgb(150, 150, 150);
    color: #2B2B2B;
    padding-top: 55px;
    /*background-image: url('/images/sleepy-cat01.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size:  cover;*/
}




.fxd-dashed {
    /*border: solid 2px grey;*/
    /*padding: 0px;*/
}

.fxd-lpnl {
    /*border: 1px solid grey;*/
    position: relative;
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 10vh;
    border-radius: 10px;
    background-color: #F6F6F6;
    /*box-shadow: 20px 20px 13px 0px #382b2b;*/
    /*border: dashed 1px green;*/
    min-height: 85vh; /*used min- instead of normal height so when we have a small screen and more add divs are added, these are appended below it (rather than overlayed /cropped) */
    /*min-width: 70%;*/
    float: left;
    width: 90vw;
}

    .fxd-lpnl .container {
        position: relative;
        width: 100%;
    }

        .fxd-lpnl .container .welcomingSection {
            position: relative;
            width: 100%;
        }




/* 

    -----------------------
    For the text in landing/about page
    -----------------------

*/

.col-md-12 p:first-child {
    padding-bottom: 50px;
}

.welcomingSection .welcomingText {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10%;
    z-index: 11;
    margin-right: 100px;
    width: 100%;
    height: 25%;
    text-align: center;
    vertical-align: middle;
    /*text-shadow: rgb(75, 0, 0) 9px 9px 7px;
    -webkit-text-fill-color: #DE1B1B; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #DE1B1B;*/
    color: #DE1B1B;
}

.welcomingText h1 {
    font-size: 8vw;
    text-shadow: none;
    font-family: "CoffeeServiceRegular";
}

.welcomingText h2 {
    font-size: 4vw;
    color: #2B2B2B;
}



.burger-rpnl {
    z-index: 30;
    position: fixed;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    top: 30px;
    min-width: 285px;
    right: 0px;
    height: 100%;
    float: left;
    padding-left: 30px;
}

    .burger-rpnl .bb-imgz {
        border-radius: 0px;
    }


.burger-rpnl-mini-pnls:first-child {
}

.burger-rpnl-mini-pnls:last-child {
    margin-bottom: 0px;
    border-radius: 0px 0px 10px 10px;
    overflow: hidden;
}


.burger-rpnl-mini-pnls {
    height: 19%;
    width: 100%;
    position: relative;
    float: left;
    margin-bottom: 0%;
    border-bottom: solid white 1px;
    box-shadow: 20px 20px 13px 0px #382b2b;
}



.uc-supportSubSection {
    /*border: dashed 1px green;*/
    min-height: 90vh;
}

.fxd-lpnl-mini-pnls {
    height: 40.3vh;
    width: 100%;
    position: relative;
    float: left;
}

/*
    kontenut - huwa wrapper madwar il-fxd-body
*/
.kontenut {
    padding-left: 5vw;
    padding-right: 5vw;
    height: 100vh;
}


.fxd-body {
    /*padding-top: 50px;*/
    height: 100%;
}



@media (max-width:2400px) {
    .fxd-body {
        top: 0vh;
    }
}










/* 

    -----------------------
    For the Residents view 
    -----------------------

*/
.uc-scrollImages {
    min-height: 60vh;
}

.uc-thumbsImages {
    min-height: 31vh;
}


/* 

    ----------------------------------------------
    For the Main view - centres images and text 
    ----------------------------------------------

*/
.bb-img-wrapper {
    overflow: hidden;
}

    .bb-img-wrapper a {
        color: white;
        padding-bottom: 10px;
    }


.bb-roundDiv {
    left: 0px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0px;
    position: absolute;
    display: flex; /* [1] */
    justify-content: center; /* [2] */
    width: 100%;
    height: 100%;
}

.bb-imgz {
    border-bottom: 0px solid rgba(255, 255, 255, 0.47);
    /*box-shadow: 0px 0px 11px grey;*/
    left: 0px;
    position: absolute;
    display: flex; /* [1] */
    justify-content: center; /* [2] */
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Other vendor-prefixed transition properties */
    /*transition: background-image 0.5s;*/
    -webkit-transition: background-image 1s ease-in-out;
    -moz-transition: background-image 1s ease-in-out;
    -o-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
}



/*.bb-imgz:hover {
        background-image: url('../Staging/maoi2.jpg');
    }*/

.bb-img-text {
    color: white;
    align-self: center;
}

    .bb-img-text:hover {
        cursor: default;
        border-radius: 10px;
        border: 1px solid white;
        padding: 10px;
        min-width: 40%;
        text-align: center;
        opacity: 1;
        color: white;
        align-self: center;
    }



a {
    color: #D32F2F;
}



/*
    used for the images gallery
    as the placeholder to centre images
*/
.imagesWrapper {
    /*border: 1px solid black;*/
    float: left;
    display: flex;
    /*width: 30%;
    height: 300px;
                                                had to hide them because of the theTeam form
        */
    width: 30%;
    height: 300px;    
    margin-right: 3%;
    margin-bottom: 3%;
    min-width: 300px;
    min-height: 300px;
    overflow: hidden;
}


/*
    used for the images gallery
    centres the images within a wrapper
    
    when a user hovers an image it will be enlarged and centred on screen
*/
.wrappedCentredImage {
    height: auto; /* Or whatever */
    margin: auto; /* Magic! */
    /*padding: 4%;*/
 width: 100%;
}


 
.poppedUpCentredImage {
    background-color: rgba(109, 105, 105, 0.57);
    background: white;
    /*width: 50vw;
    height: 80vh;
    max-height: 100vh;
    */
    width: 80%;
    height: auto;
    overflow: hidden;
    max-height: 85vh;
    left: 10%;
    display: flex;
    position: fixed;
    top: 70px;
    
    /*overflow: hidden;*/
    text-align: center;
    border: solid 1px grey;
    box-shadow: 20px 20px 20px 0px rgba(109, 105, 105, 0.67);
    border-radius: 20px;
}


/*
    used for the images gallery
    maked the poped up image centred
*/
.poppedUpCentredImage > img {
    height: 80vh;
    
        /*width: 100%;
        height: auto;
        margin: auto;
        background-color: red;
        background-color: rgba(109, 105, 105, 0.57);
        background: white;*/
    }

.poppedUpCentredImage .wrappedCentredImage {
      width: inherit; 
}

/* 

    ----------------------------------------------
    For the Articles collection view
    ----------------------------------------------


 
*/






.artiklu {
    padding: 5px;
    float: left;
    width: 30%;
    height: 100%;
    min-height: 275px;
    max-height: 360px;
    border: 1px solid rgba(81, 80, 80, 0.47);
    display: inline-block;
    vertical-align: top;
    position: relative;
    /*box-shadow: 20px 20px 13px 0px #382b2b;*/
    overflow: hidden;
    margin: auto;
    margin-right: 3%;
    margin-bottom: 3%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

@media (max-width: 900px) {
    .artiklu {
        width: 47%;
    }
}

@media (max-width: 500px) {
    .artiklu {
        width: 100%;
    }
}


.artiklu span {
    position: absolute;
    border: 1px solid white;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #F6F6F6;
    font-size: 13px;
    /*font-size: 1vw;*/
    background: #DE1B1B;
    vertical-align: middle;
    padding: 5px;
    line-height: 18px;
}


    .artiklu span a {
        color: #D32F2F;
    }

.artiklu .artiklu-header {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: red;
    text-shadow: 1px 2px 4px black;
    text-align: center;
}

    .artiklu .artiklu-header h3 {
        font-family: "CoffeeServiceRegular";
        font-size: 3em;
        color: #DE1B1B;
        margin-top: 5px;
    }

.artiklu .centreImage {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 75px;
}




/*

    ----------------------------------------------
         For the Image transitions animation
    ----------------------------------------------

*/

.bb-trans {
}

    .bb-trans img {
        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    .bb-trans .bb-img-hover:hover {
        opacity: 0;
    }



/*

    ----------------------------------------------
         UMBRACO Grid Modification
    ----------------------------------------------

*/

.umb-grid .grid-section .container img {
    max-width: 100%;
    /*box-shadow: 3px 1px 15px #382b2b;*/
    box-shadow: 10px 10px 13px 0px #382b2b;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.umb-grid .grid-section .container .noShadow {
    box-shadow: none;
}

.umb-grid .grid-section .container h1 {
    color: red;
    font-family: "CoffeeServiceRegular";
    font-size: 8vw;
}

.umb-grid .grid-section .container .redHeader h1 {
    font-size: 4vw;
    font-family: Montserrat;
}

@media (max-width: 584px) {
    .umb-grid .grid-section .container .redHeader h1 {
        font-size: 8vw;
    }
}






/* 

    -----------------------
          FOOTER
    -----------------------

*/



footer {
    /*margin-left: -35px;*/
    float: left;
    bottom: 0px;
    /*background: rgba(66,66,66, 0.75);*/
    background: #4c0e13;
    width: 100%;
    color: #D32F2F;
    text-shadow: 1px 2px 4px #210a0a;
}

.fa-stack {
    color: whitesmoke;
}



.oneThird {
    width: 25%;
    float: left;
}

    .oneThird > * {
        float: left;
    }

        .oneThird > *:first-child {
            padding-right: 10px;
        }

    .oneThird div {
        display: inline-block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }


.iconKlikk {
    cursor: pointer;
}



.fa-stack-1x {
    color: #D32F2F;
    text-shadow: 1px 2px 4px #210a0a;
    box-shadow: 1px 2px 14px #210a0a;
    border-radius: 100%;
    width: 46px;
    left: 3px;
    top: 3px;
    height: 47px;
    background-color: #F6F6F6;
}

    .fa-stack-1x:hover {
        text-shadow: none;
        box-shadow: none;
    }


.fa-circle:before {
    content: ""; /*over-ridding the default behaviour of fa --> content: "\f111"*/
}











/* 

    ----------------------------------------------
                Contact form / Email Generic
    ----------------------------------------------

*/



.contactForm {
    border: 1px solid white;
    top: 0px;
    width: 60vw;
    height: 85vh;
    left: 0px;
    position: fixed;
    margin-top: 2%;
    /*margin-top: 10vh;*/
    margin-left: 20vw;
    background-color: #F6F6F6;
    border-radius: 11px;
    box-shadow: 20px 20px 13px 0px #382b2b;
    z-index: 11;
}

.contentBody {
    height: 100%;
    overflow: hidden;
}


.contactForm .contactFormFields {
    padding-top: 6vh;
}

.contactForm .contactHeading {
    width: 100%;
    text-align: center;
    font-size: 6vw;
    text-shadow: none;
    font-family: coffeeserviceregular;
    color: #DE1B1B;
}


.closeMe {
    position: absolute;
    top: -5px;
    right: 5px;
    border: 1px solid #DE1B1B;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    background-color: #DE1B1B;
    color: white;
    cursor: pointer;
    text-shadow: 1px 2px 4px #210a0a;
    box-shadow: 10px 10px 13px 0px #382b2b;
}

    .closeMe:hover {
        text-shadow: none;
        box-shadow: none;
        top: 0px;
        right: -5px;
    }












/* 

    -----------------------
          Donate
    -----------------------

*/






.theThree {
    width: 33.3%;
    float: left;
    border-right: 1px solid;
    text-align: center;
    height: 245px;
    min-width: 150px;
    min-height: 190px;
    margin-bottom: 10px;
}

    .theThree:first-child {
        padding-right: 40px;
    }

    .theThree:last-child {
        border-right: none;
        box-shadow: none;
    }

    .theThree div {
    }

    .theThree h2 {
        margin-top: 0px;
    }


.donateHeader {
    float: left;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid;
    margin-bottom: 10px;
}
















/* 

    -----------------------
          Shadowing
    -----------------------

*/

.shdw-lev1 {
    box-shadow: 0px 0px 13px 0px #382b2b;
}

.shdw-lev2 {
    text-shadow: 1px 2px 4px #210a0a;
    box-shadow: 3px 3px 14px #210a0a;
}

    .shdw-lev2:hover {
        text-shadow: none;
        box-shadow: none;
    }

.shdw-lev3 {
    box-shadow: 20px 20px 53px 0px #382b2b;
}

.txt-shdw-lev1 {
    text-shadow: 3px 1px 5px #382b2b;
}








/* 
    Team cshtml
*/


.mainBody {
    width: 100%;
    /*border: 1px solid red;*/
}

.mainTopImage {
    position: relative;
    float: left;
    width: 100%;
}

    .mainTopImage > img {
        width: 100%;
        height: 400px;
    }

.mainHeader {
    color: red;
    text-align: center;
}


.contentBody {
    width: 100%;
    float: left;
}

    .contentBody p {
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

.mainBodyLeft {
    position: relative;
    width: 75%;
    float: left;
    /*border: solid 1px yellow;*/
    margin-left: -2px;
}

.mainBodyRight {
    position: relative;
    width: 25%;
    float: left;
    /*border: solid 1px pink;*/
    margin-left: -3px;
}




.imagesBoxes .fullNameCss {
    text-align: center;
    position: absolute;
    border: 1px black brown;
    bottom: 0px;
    width: 100%;
    height: 24%;
}


.imagesBoxes .imageKropperCss {
    height: 80%;
    position: relative;
    float: left;
    overflow: hidden;
    top: 0px;
    left: 0px;
}

.imagesBoxes img {
    height: 100px;
    width: auto;
}


.imagesBoxes label {
    /*position: absolute;
            bottom: 0px;*/
    font-size: 10px;
}

.imagesBoxes h2 {
    font-family: "CoffeeServiceRegular";
    position: absolute;
    bottom: 0px;
    color: grey;
}

.imagesBoxes:first-child, .imagesBoxes:nth-child(2) {
    margin-top: 0px;
    margin-bottom: 0px;
}


.imagesBoxes:nth-child(even) {
    margin-right: 20px;
}




#overwriteMe {
    padding-left: 16%;
    padding-right: 16%;
    padding-bottom: 16%;
}



.imagesBoxes {
    position: relative;
    overflow: hidden;
    width: 40%;
    height: 130px;
    border: 1px solid blue;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    float: left;
}



@media (max-width:584px) {
    .mainBodyLeft {
        display: none;
    }

    .mainBodyRight {
        width: 100%;
    }




    .mainBodyRight_bioInfo {
        /* width: 100%; */
        position: relative;
        float: left;
        border: double 10px black;
    }

    .imagesBoxes {
        width: 100%;
    }
}







/* 

    -----------------------
          Media queries
    -----------------------

*/


@media (max-width: 1100px) {
    .contactForm {
        /*margin-top: 7%;*/
        margin-left: 7%;
        width: 85%;
        height: 85%;
    }

    .theThree {
        width: 33.3%;
    }
}


@media (max-width: 800px) {
    .contactForm {
        /*margin-top: 2%;*/
        margin-left: 2%;
        width: 95%;
        height: 95%;
    }
}

@media (max-width: 775px) {
    .imagesWrapper {
        width: 100%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .poppedUpCentredImage {
        width: 100%;
        left: 0px;
    }

        .poppedUpCentredImage > img {
            width: 98%;
            margin-left: 1%;
            margin-right: 1%;
        }

    .umb-grid .grid-section .container h1 {
        font-size: 15vw;
    }
}


@media (max-width: 584px) {
    .contentBody {
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: visible;
    }

        .contentBody .theThree {
            width: 50%;
            border: 1px solid brown;
        }
}



@media (max-width: 500px) {
    body {
        padding-top: 100px;
    }

    .welcomingSection .welcomingText {
        top: 20%;
    }

    .fxd-lpnl {
        border: none;
        padding: 0px;
        padding-top: 10px;
        width: 100%;
        margin-top: 8vh;
        border-radius: 0px;
    }

    .kontenut {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }

    .fontOverride {
        font-size: 17px;
    }


    .umb-grid .grid-section .container h1 {
        font-size: 20vw;
    }
}