/************************/
/* COLORS               */
/************************/
.blackText {
    color: #494949;
}
.orangeText {
    color: #FFA630;
}
.blueText {
    color: #0474BA;
}
.redText {
    color: #C62828;
}
.greenText {
    color: #56b509;
}

/************************/
/* BODY                 */
/************************/
html, body {
    height: 100%;
}
body {
    line-height: 28px;
    /* font-family: Segoe UI,Helvetica,Open Sans,sans-serif; */
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    font-size: 16px;
    margin: 0px;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/************************/
/* HEADER               */
/************************/
.appHeader {
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.headerLogo {
    /* padding: 0.5rem 0.5rem; */
    padding: 0.5rem 0.5rem 0.5rem 0rem;
    max-width: 22.9rem;
}
.headerText {
    font-size: 24px;
    float: right;
    height: 60px;
    line-height: 64px;
    margin: 0 auto;
    text-align: center;
    color: #6a6868;
    font-style: italic;
    display: block;
}
.containerDiv {
    /* width: 100%; */
    padding-right: 15px;
    padding-left: 15px;
    /* margin-right: auto;
    margin-left: auto; */
    margin: 0 auto;
    max-width: 1215px;
    /* padding: 0 15px; */
}
.headerDiv {
    display: grid;
    grid-template-columns: 50px auto;
    /* height: 50px; */
    /* padding: 0.75rem 0.75rem; */
}
.headerImage {
    height: 50px;
}
/* .headerText {
    font-size: 26px;
    color: #D35800;
    margin-top: 10px;
} */

/************************/
/* MAIN CONTAINER DIV   */
/************************/
@media (min-width: 576px) {
    .containerDiv {
        max-width:540px;
    }
}
@media (min-width: 768px) {
    .containerDiv {
        max-width:720px;
    }
}
@media (min-width: 992px) {
    .containerDiv {
        max-width:960px;
    }
}
@media (min-width: 1200px) {
    .containerDiv {
        max-width:1140px;
    }
}

@media (max-width: 1023px) {
    .appHeader .containerDiv {
        /* padding:0 15px; */
        padding: 0px 10px 0px 15px;
    }
}
@media only screen and (max-width: 768px) {
    .containerDiv {
        padding:10px;
    }
}

@media only screen and (max-width: 768px) {
    .headerText {
       display: none;
    }
}

/************************/
/* CONTENT              */
/************************/
.appContent {
    margin-top: 72px;
    /* float: left; */
    /* width: 75%; */
    flex: 1;
}
@media screen and (max-width: 768px) {
    .appContent {
        padding: 15px 0 0;
        min-height: auto;

        width: 100%;
        float: none;
        clear: both;
    }
}
@media only screen and (max-width: 768px) {
    .appContent {
        min-height: auto;
    }
}

/************************/
/* Breadcrumbs          */
/************************/
@media (min-width: 576px) {
    .breadcrumbs {
        max-width:540px;
    }
}
@media (min-width: 768px) {
    .breadcrumbs {
        max-width:720px;
    }
}
@media (min-width: 992px) {
    .breadcrumbs {
        max-width:960px;
    }
}
@media (min-width: 1200px) {
    .breadcrumbs {
        max-width:1140px;
    }
}

/* @media (max-width: 1023px) {
    .breadcrumbs {
        padding: 0px 10px 0px 15px;
    }
}
@media only screen and (max-width: 768px) {
    .breadcrumbs {
        padding:10px;
    }
} */

.breadcrumbs {
    color: #494949;
    /* font-size: 14px; */
    padding: 0.5rem 0;
    /* margin: 0; */
    background-color: #f5f5f5;
    
    margin: 0 auto;

    a {
        text-decoration: none;
        color: #494949;
    }
}
.breadcrumbs ol {
    margin: 0 auto;
    max-width: 1215px;
    /* padding: 0 15px; */
    margin-left: 24px;
}
.breadcrumbs li {
    display: inline;
    margin: 0 2px;
}

.breadcrumbs-link:hover {
    color: #FFA630;
}

.hamburger {
    font-size:30px;
    cursor: pointer;
    position: relative;
    float: left;
    padding: 0 15px;
}
.hamburger:hover {
    /* filter: invert(71%) sepia(18%) saturate(1864%) hue-rotate(341deg) brightness(103%) contrast(101%); */
    filter: invert(66%) sepia(85%) saturate(511%) hue-rotate(358deg) brightness(101%) contrast(103%);
}

/************************/
/* Sidebar              */
/************************/
.sidebar {
    height: calc(100% - 154px);
    width: 0;
    position: fixed;
    z-index: 1;
    /* top: 120px; */
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 40px;
  }
  
  .sidebar .menulink {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
 
  .sidebar a:hover {
    /* color: #f1f1f1; */
    color: #FFA630;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  .sidebar .articles {
    color: #818181;
    padding: 8px 8px 8px 16px;
  }
  .sidebar .title {
    font-size: 25px;
    color: #818181;
  }
  .sidebar .articlelink {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

/************************/
/* ARTICLES             */
/************************/
.articleDiv {
    display: grid;;
    grid-template-columns: 2fr auto; /* change auto to 1fr for ads*/
    column-gap: 30px;;
    padding-top: 10px;
    padding-bottom: 24px;
}

.articleDiv2 {
    padding-top: 10px;
    padding-bottom: 24px;
    /* height: calc(100vh - 326px); */
    height: 650px;
}
.articleDiv-left {

    .article-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(216px,1fr));
        column-gap: 1rem;
        row-gap: 1rem;
        margin-bottom: 1rem;
        width: 100%;

        .article-card {
            margin-bottom: 0;
            max-width: none;
            min-width: 216px;

            margin-top: 0;
            width: auto;

            padding-bottom: 2px;
            position: relative;

            background-color: #fff;
            border: 1px solid #e6e6e6;
            box-shadow: inset 0 -2px 0 0 #e6e6e6;

            .card-link {
                background-color: #fff;
                display: grid;
            }

            a {
                text-decoration: none;
    
                .card-image{
                    margin: 0;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                    }
                }
    
                .card-info{
                    height: 100%;
                    padding-left: 10px;
                    padding-right: 10px;
                    color: #393838;              
                }
            }
        }
    }
}

.articleDiv-left-image {
    margin-top: 40px;
}
.articleDiv-left-content {
    margin-top: 40px;
    font-size: 20px;

    .no-bullets {
        list-style-type: none; 
    }
}
.articleDiv-right {
}

.customTable {
    width: 100%;
    background-color: #FFFFFF;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #cccccc;
    border-style: solid;
    color: #000000;
  }
  
  .customTable td, .customTable th {
    border-width: 2px;
    border-color: #cccccc;
    border-style: solid;
    padding: 5px;
  }
  
  .customTable thead {
    background-color: #cccccc;
  }


/************************/
/* TERM AND CONDITIONS  */
/************************/
.term-div {
    padding: 25px 10px 0 0;
}

/************************/
/* PRIVACY POLICY       */
/************************/
.privacy-div {
    padding: 25px 10px 0 0;
}

/************************/
/* SITEMAP              */
/************************/
.sitemap-div {
    padding: 25px 10px 0 0;
    min-height: calc(100vh - 317px);
}
.sitemapList {
    list-style-type: none;
    margin-top: -15px;
}
.sitemapList li a {
    color: #787676;
}
/************************/
/* FOOTER               */
/************************/
.appFooter {
    /* height: 200px; */
    padding: 1.5rem;
    background-color: #333333;
    color: white;
    border-radius: 0px 0px 10px 10px;
}
.footerRow{
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;;
}
.footerLogo {
    width: 300px;
}
.footerCol {
    /* margin-bottom: 1.6rem; */
    
    .app {
        margin-bottom: 10px;
    }

    .social {
        margin-top: 10px;
    }
}
.footerCol:first-child {
    padding-left: 1.2rem;
} 
.footerCol:nth-child(2) {
    padding-left: 1.2rem;
    padding-right: 0;
}
.footerCol:last-child {
    padding-left: 1.2rem;
    padding-right: 0rem;
}
@media (min-width: 768px) {
    .footerCol {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 992px) {
    .footerCol {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }
}
.footerLinks {
    font-size: 15px;
}
.footerLinks a {
    text-decoration: none;
    margin: 0 16px 0 0;
}
.footerLinks a:hover {
    text-decoration: underline;
}
.footerLinksUnderline {
    text-decoration: underline;
    margin: 0 16px 0 0;
}
.footerAppleStoreIcon {
    width: 100px;
    margin-right: 10px;
}
.footerGoogleStoreIcon {
    width: 115px;
}
.footerSocialIcons {
    width: 40px;
    margin-right: 10px;
}