@charset "UTF-8";

* {
    font-family: 'Segoe UI', sans-serif;
    
}

.tags {
    display:none;
}
.sectionHeader {
    display: inline-block;
    color: #de4b26;
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

img, object, embed, video {
    max-width: 800px;
    text-align: center;
}

.video-container {
    position: relative;
    padding-top: 10px;
    /*padding-bottom:56.25%;
	
	height:0;
	overflow:hidden;*/
}

    .video-container ul {
        font-weight: bold;
        list-style-position: outside;
    }

    .video-container li {
        font-weight: normal;
        text-indent: 42px;
        list-style-position: outside;
        list-style-type: none;
        line-height: 28px;
    }

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

#mainwrapper header {
    /*Header */
    background-color: #3d3834;
    overflow: auto;
    font-family: 'Segoe UI', sans-serif;
    font-style: normal;
    font-weight: bold;
    width: 100%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}

    #mainwrapper header #logo {
        /* Company Logo text */
        width: 12%;
        float: left;
        padding-left: 2%;
        padding-top: 10px;
        padding-bottom: 10px;
        color: rgba(146,146,146,1.00);
    }

    #mainwrapper header nav {
        /*Nav bar containing links in header */
        text-align: right;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 2%;
        width: 68%;
        float: left;
        color: rgba(146,146,146,1.00);
    }

header nav a {
    /* Links in header */
    padding-right: 2%;
}

.mainItem {
    font-weight:bold;
}

a {
    color:black;
    text-decoration:none;
    font-style:normal;

}
.headerBox {
    background-color: #3d3834;
    width: 80%;
    color: white;
    font-size: 22px;
    border-radius: 10px;
    display: flex;
    padding-bottom: 1%;
    margin-bottom: 1%;
    box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);
    /* justify-content: center;
    align-items: center;*/
}

.searchBox {
    background-color: #3d3834;
    width: 80%;
    color: white;
    font-size: 22px;
    border-radius: 10px;
    display: flex;
    padding-bottom: 1%;
    margin-bottom: 1%;
}

.search-container {
    position: relative;
}

.search-input {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 20px;
    height: 20px;
}
    .docs {
    display: flex;
   /* justify-content: center;
    align-items: center;*/
    flex-direction:column;
    width:100%;
}

.contentBox {
    background-color: #F8F8F8;
    width: 95%;
    height: 95%;
    border-radius: 10px;
    margin-right: 1%;
    margin-top: 1%;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 
}

.sectionHead {
    font-size:18px; 
    color:black;
    margin-left:1%;
    font-weight:bold;
   
}

.sectionContent {
    font-size:16px;
    color:black;
    margin-left:1%;

}

.sectionColumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .sectionColumns a {
        flex: 1 0 30%; /* grow | shrink | basis */
        margin-right: 10px;
        box-sizing: border-box;
    }
#content #mainContent h1, #content #mainContent h2 {
    /* Styling for main headings */
    color: #de4b26;
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
}

#content #mainContent h3 {
    /*Captions ot Taglines */
    font-family: 'Segoe UI', sans-serif;
    font-style: normal;
    font-weight: bold;
    color: rgba(146,146,146,1.00);
}

#content #mainContent #bannerImage {
    /*Container for main banner image */
    width: 100%;
    max-height: 100%;
    background-color: rgba(208,207,207,1.00);
}

#content #mainContent p {
    /* All paragraphs under maincontent */
    color: rgba(146,146,146,1.00);
    font-family: 'Segoe UI', sans-serif;
    font-style: normal;
    font-weight: 200;
    text-align: justify;
}

#content #mainContent #authorInfo {
    /* Author info section */
    background-color: rgba(208,207,207,1.00);
    width: 30%;
    float: left;
    padding-right: 0px;
    margin-right: 20px;
}

    #content #mainContent #authorInfo h2, #content #mainContent #authorInfo p {
        color: rgba(255,255,255,1.00);
        padding-left: 2%;
        padding-top: 11px;
    }

    #content #mainContent #authorInfo p {
        color: rgba(255,255,255,1.00);
        padding-left: 2%;
        padding-top: 0px;
        padding-bottom: 11px;
        padding-right: 2%;
    }

footer article {
    /* Footer articles */
    width: 45%;
    float: left;
    padding-left: 1.4%;
    padding-right: 1.4%;
    padding-top: 1%;
    text-align: justify;
    font-family: 'Segoe UI', sans-serif;
    font-style: normal;
    font-weight: 200;
    color: rgba(146,146,146,1.00);
    margin-bottom: 2%;
    margin-right: 1.4%;
    background-color: #FFFFFF;
}

    footer article h2 {
        /* Footer article titles */
        color: #de4b26;
        font-weight: bold;
    }

#mainContent {
    /* Container for the blog post in individal blog view */
    padding-left: 2%;
    width: 96%;
    float: left;
    padding-right: 2%;
    padding-top: 0px;
    background-color: #F8F8F8;
}

#mainwrapper #content #sidebar {
    /* Sidebar*/
    width: 19%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    background-color: rgba(246,246,246,1.00);
    margin-top: 150px;
    padding-top: 32px;
}

#mainwrapper {
    /* Container of all content */
    width: 100%;
    overflow: auto;

    background-color: #e5e4e2;
}

#content #sidebar input {
    /* Search box in sidebar */
    width: 98%;
    height: 32px;
}

#content #sidebar #adimage {
    /* Container for Image in sidebar */
    width: 100%;
    background-color: rgba(208,207,207,1.00);
    margin-top: 46px;
    float: none;
    overflow: auto;
}

nav ul li {
    list-style-type: none;
    padding-top: 8px;
    padding-bottom: 8px;
}

nav ul {
    padding-left: 0%;
}

    nav ul li a {
        color: rgba(#de4b26);
        text-decoration: none;
    }

#footerbar {
    /* Footer bar at the bottom of the page */
    height: 18px;
    clear: both;
    background-color: #3d3834;
    width: 100%;
}

footer {
    /* Container for footer artices */
    width: 100;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 2%;
}

.notOnDesktop {
    /*element to be displayed only in mobile view and tabet view */
    display: none;
}

#mainContent #bannerImage img {
    /* Actual banner image */
    width: 100%;
}

#sidebar #adimage img {
    /* Image in sidebar */
    width: 100%;
    float: left;
}

#mainwrapper header nav a {
    /* Links in header */
    color: white;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 6px;
    font-weight: bold;
}

    #mainwrapper header nav a:hover {
        /* Links in header */
        color: #FFFFFF;
        background-color: #3D3834;
    }

/* Tablet view */
@media screen and (max-width:769px) {
    .notOnDesktop {
        /* Search box shown only in mobile view and Tablet view */
        display: block;
        text-align: right;
        padding-right: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 96%;
    }

    #content .notOnDesktop input {
        height: 28px;
    }

    #mainContent {
        /* Container for the blog post */
        padding-top: 0px;
        float: none;
        width: 96%;
    }

    #sidebar input {
        /* Search box in sidebar */
        display: none;
    }

    #mainwrapper #content #sidebar {
        /* Sidebar*/
        float: none;
        width: 92%;
        padding-top: 13px;
        overflow: auto;
        margin-top: 3px;
        margin-left: 2%;
        padding-bottom: 13px;
    }

    #content #sidebar #adimage {
        /* Image in sidebar */
        width: 60%;
        margin-top: 0px;
        float: left;
    }

    #content #sidebar nav {
        /* Navigation links in sidebar */
        width: 36%;
        float: left;
        padding-left: 4%;
    }

    #sidebar nav ul {
        margin-top: 0px;
    }

    footer {
        /* Footer region */
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    }

    #content footer article {
        /*Each footer article */
        width: 45%;
    }

    #mainwrapper header {
        /* Header */
        width: 100%;
        display:flex;
        justify-content:space-between;
    }
  
}

/* Mobile view */
@media screen and (max-width:480px) {
    #mainwrapper header #logo {
        /* Company Logo text in header */
        width: 100%;
        margin-left: .5%;
    }

    #mainwrapper header nav {
        /*navigation links in header */
        text-align: center;
        background-color: rgba(255,255,255,1.00);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #content #sidebar #adimage {
        /* Container for image in sidebar */
        width: 100%;
    }

    #content #sidebar nav {
        /* Navigation bar for links in sidebar */
        width: 96%;
        padding-top: 7px;
    }

    #sidebar nav ul li {
        display: inline-block;
        width: 32%;
        text-align: center;
    }

    #mainwrapper #content #sidebar {
        /* sidebar */
        padding-bottom: 0px;
    }

    #content .notOnDesktop {
        /* Search box shown only in mobile and tablet view */
        width: 100%;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }

    #content {
        /* Search box shown only in mobile and tablet view */
        width: 100%;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }

    #mainContent {
        /* Container for the blog post in individal blog view */
        padding-left: .5%;
        width: 99%;
        float: left;
        padding-right: .5%;
    }

    #mainwrapper {
        /* Header */
        width: 100%;
        overflow: auto;
        margin-left: .5%;
        background-color: #e5e4e2 !important;
    }

    #content .notOnDesktop input {
        width: 100%;
        text-align: center;
    }

    #content #mainContent h3 {
        /* Title under maincontent, if any */
        font-size: 14px;
        font-weight: bold;
    }

    #content footer article {
        /* Each foter article */
        width: 99%;
    }

  
}