/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;
text-decoration: none;
color: #999;}
a:hover{color: #1a1a1a;}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
.smoothie{-webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color: #1a1a1a;font-family: 'Poppins', sans-serif;}
p{margin: 0 0 10px 0;}
strong{ color: #00AEEF;}
img{max-width: 100%;}
body{font-family: 'Roboto Slab', serif; background: #f3f3f3;}

.container{width: 100%; height: auto; max-width: 1920px; margin: 0 auto;}
.header{width: 100%; background: #fff; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; position: fixed; max-width: 1920px; z-index: 500;}
.logo{font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 800; padding: 0 20px; letter-spacing: -2px; color: #1a1a1a;}
.logo span{font-weight: 200;}
.navi{}

.current{font-weight: 800;}
.navlink:hover{}

.navi{display: flex; align-self: center; list-style-type: none; margin: 0; font-family: 'Poppins', sans-serif; padding: 0;}
.navlink{padding: 30px 20px;}
.navlink:hover a.nodd{opacity: 0.6;}
.dropdown:hover{background: #f7f7f7;}
.dropdown:hover a{color: #1a1a1a;}
.navlink a{font-weight: 500; font-size: 15px; color: #1a1a1a; }
.navlink a.current{font-weight: 800;}
.dropdown {}
.dropdown span::after{content: '\25BE'; margin-left: 5px;}

.dropdown-content {visibility: hidden;opacity: 0;transition: visibility 0.5s, opacity 0.5s, z-index 1s ease;position: absolute; top:100%; left: 0;background-color: #f7f7f7;width: calc(100vw - 0px); z-index: -1; display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 0 5%; border-bottom: 5px solid #efefef; max-width: 1920px; }

.dropdown:hover .dropdown-content {visibility: visible;opacity: 1;z-index: 2002;}
.dropdown-content a {color: #fff;padding: 15px 20px 10px;text-decoration: none;display: block; position: relative;}
.dropdown-content a:hover{ background: #fff; color: #1a1a1a;}
.ddbottom{position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px;}





.uppercontent{width: 100%; background: #fff; padding: 200px 20% 150px; position: relative;}
.mainheader{font-size: 30px; letter-spacing: -2px; margin-bottom: 20px;}
.readmore{color: #999;}
.readmore::after{content: '\25B8'; margin-left: 5px;}
.lowercontent{width: 100%; background: #f7f7f7; border-top: 10px solid #efefef; padding: 80px 20%;}

.divider{width: 150px; height: 1px; background: #1a1a1a; margin: 20px 0;}

.homearticles{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}

.eachhomearticle{width: calc(50% - 10px); background: #fff; padding: 40px 20px; margin-bottom: 20px; position: relative; overflow: hidden;transition: all 400ms cubic-bezier(.32,1.25,.1,1.47);}
/*.eachhomearticle{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }*/
.eachhomearticle:hover{box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }

.eacharticle{width: calc(50% - 10px); background: #fff; padding: 20px 20px 40px; margin-bottom: 20px; position: relative; overflow: hidden;transition: all 400ms cubic-bezier(.32,1.25,.1,1.47);}

.eacharticle:hover{box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }

.eachsearcharticle{width: 100%; background: #fff; padding: 40px 20px 50px; margin-bottom: 20px; position: relative; overflow: hidden;transition: all 400ms cubic-bezier(.32,1.25,.1,1.47);}


.eachhomearticlecategory{position: absolute; bottom:5px; left:0; color: #fff; padding: 5px 10px; font-size: 12px;}

.eachhomearticleborder{position: absolute; bottom:0px; left:0; width: 100%; height: 5px;}



.eacharticletext{color: #1a1a1a; font-size: 13px; position: relative;}
.eacharticletextcover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
    background: linear-gradient(to top,rgba(255,255,255,1) 0, rgba(255,255,255,0.9)30%, rgba(255,255,255,0.8)40%, rgba(255,255,255,0.7)70%, rgba(255,255,255,0.0)100%);}
.eacharticletextcontent{position: relative; z-index: 5;}


.footer{width: 100%; background: #fff; padding: 20px 20%; font-size: 12px;  display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.footnav{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.footnav span{margin: 0 5px;}
.footnavlink{color: #1a1a1a;}
.copy span{margin: 0 5px;}
.copy a{color: #1a1a1a; font-weight: 700;}

.searchlink{background: #fff; color: #1a1a1a; display: flex; overflow: hidden; padding: 020px; align-items: center;}

.searchform{display: flex; margin-left: 10px;}
.onsearchbox{width: 100%;}

.searchlink a{color: #1a1a1a;}
.searchbox{display: flex; flex-wrap: nowrap; align-self: center;}
.searchbox input{padding: 10px; border: 0px solid #efefef; outline: 1px solid #efefef;}
.searchbox input:focus{outline: 0px solid #1a1a1a; background: #efefef;}
.searchtext{width:calc(100% - 40px); max-width: 685px;}
.searchbtn{border: 0px solid #efefef; background: #1a1a1a; color: #fff; text-transform: uppercase; width: 40px; margin-right: 20px;transition:all 0.3s linear; outline: none;}


.searchbtn:hover{background:#efefef; color: #1a1a1a; }

.onsearchform{width: 100%;}

.searchform{width: auto; max-width: 0px; transition:all 0.5s linear; visibility: hidden; opacity: 0;}
.searchform.show{max-width: 1000px;visibility: visible; opacity: 1;}

.allarticles::after{content: '\25B8'; margin-left: 5px;}

.bodytext{font-size: 18px; font-weight: 300; line-height: 34px; padding-right: 20%;}
.bodyhead{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding-right: 20%;}
.catlink{padding: 5px 10px; color: #fff;}
.catlink:hover{background: #1a1a1a; color: #fff;}
::selection {
  background: #1a1a1a;
  color: #fff;
}
.dlpdf{position: absolute; bottom: 40px; left: 0; width: 100%; padding: 0 20%;}
.aboutupper{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.aboutpic{width: 200px; height: 200px; border-radius: 100px; overflow: hidden;}
.aboutpic img{width: 100%; height: 100%; object-fit: cover;}
.aboutheader{font-size: 30px; letter-spacing: -2px; width: calc(100% - 240px);}

.searchresultlink{color: #1a1a1a; font-family: 'Poppins', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 600; padding: 0;}
.searchresultlink:hover{opacity: 0.7;}
.eachsearcharticlecategory{position: absolute; bottom:5px; right:0; color: #fff; padding: 5px 10px;}



.eachbook{width: 100%; background: #fff; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; position: relative;}
.bookimage{width: 30%; padding: 20px;} .eachbookimage img{width: 100%;}
.bookdetails{width: 70%; padding: 20px;}
.bookdetails p{font-size: 14px;}
.bookdetails h3{font-size: 24px;}
.booklink{position: absolute; bottom: 0; right: 0; padding: 5px 10px; background: #f7f7f7; color: #1a1a1a; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;}
.booklink:hover{background: #fff;}

.categories{width:100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.eachcategory{width: calc(50% - 10px); background: #fff; padding: 40px 20px; margin-bottom: 20px; position: relative; overflow: hidden;transition: all 400ms cubic-bezier(.32,1.25,.1,1.47); display: block;}
/*.eachhomearticle{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }*/
.eachcategory:hover{box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); }
.eachcategoryborder{position: absolute; bottom:0px; left:0; width: 100%; height: 5px;}

/* ==========================================================================
   LIST JS
   ========================================================================== */
.allthefilters{margin-bottom: 20px;font-family: 'Poppins', sans-serif; font-weight: 300;}
.sorters{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-bottom: 10px;}
.filtersearch{width: 25%;}
.sort-by{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; align-items: center;}
.sorter{padding: 10px; background: #fff; color: #1a1a1a; font-size: 12px; cursor: pointer;width: 25%; text-align: center; text-transform: uppercase; font-weight: 300; flex-grow: 1;user-select: none; opacity: 0.7;}
.fsearch{padding: 10px; border:1px solid #fff; width: 100%; background: #fff; font-size: 12px;}
.fsearch:focus{outline: 1px solid #1a1a1a;}
.sorter:hover{opacity: 1;}
.sortactive{opacity: 1;}

.filter{display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; background: #1a1a1a;}


.filterer{padding: 10px; font-size: 12px; color:#fff; cursor: pointer; flex-grow: 1; text-align: center; text-transform: uppercase; font-weight: 300; opacity: 0.7; min-width: 150px;}
.filterall{background: #fff; color: #1a1a1a;}
.filterer:hover{opacity: 1;}
.filtereractive{opacity: 1;}


/* ==========================================================================
   FORM
   ========================================================================== */

.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;}
.halfinput{width:  49%;}
.fullinput{width: 100%;}
.theform label{font-size: 12px;}
.textinput{width: 100%; border:1px solid #fff; padding: 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; color: #0C0C0B; margin-bottom: 20px;}
.textinput:focus{outline: 1px solid #0f0f0f;}
.submitbutton{width: 100%; border:1px solid #1a1a1a; border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: #1a1a1a;}
.submitbutton:hover{background: #fff; color: #1a1a1a;}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px !important;}
.smallprint p{font-size: 12px !important; line-height: 20px;}



/*
    Paginator -
    Source: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php (strangerstudios.com)
*/

div.pagination {
    padding: 3px;
    margin: 3px;
    font-family: 'Poppins', sans-serif;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #ccc;
    zoom: 100%;
    text-decoration: none; /* no underline */
    color: #1a1a1a;
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid #1a1a1a;

    color: #000;
}
div.pagination span.page_current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #1a1a1a;

    * zoom: 100%;

    font-weight: bold;
    background-color: #1a1a1a;
    color: #FFF;
}
div.pagination span.page_disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;

    * zoom: 100%;

    color: #DDD;
}

* span.elipsis {zoom:100%}


#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    background: rgba(255,255,255,0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 10000000
}
#return-to-top i {
    color: #1a1a1a;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(255,255,255,1);
}
#return-to-top:hover i {
    color: #1a1a1a;
    top: 5px;
}
.hiddenforpdf{font-family: sans-serif;}
.pdfbtn{}
.pdfcontent{display: none;}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1400px) {
.footnav{width: 100%; margin-bottom: 10px;}
}
@media only screen and (min-width: 1200px) {.navi{display: flex!important;}.ham{display: none;}.searchformresponsive{display: none;}}
@media only screen and (max-width: 1200px) {
    
    .header{z-index: 501; padding: 20px;}
    .ham{display: block;}
    .navi{display: none; width: 100%; height: auto; text-align: right; padding-top: 40px;}
    .navi a{display: block; width: 100%; margin: 0; font-size: 18px; }
    .navlink{padding: 5px 0;}
    .dropdown{position: relative; background: #fff;}
    .dropdown span::after{content: ''; margin-left: 0;}
    .dropdown:hover{position: relative; background: #fff;}
    .dropdown-content {visibility: visible; opacity: 1;  position: relative; background: #f6f6f6;width: 100%; z-index: 10; display: flex; justify-content: flex-end; flex-wrap: wrap; padding:0; border-bottom: 5px solid #efefef;}
    .dropdown-content a {color: #1a1a1a; padding: 10px 5px 10px;}
    .dropdown-content a:hover{ background: rgba(255,255,255,0.0); color: #1a1a1a;}
    .uppercontent{padding: 200px 10% 150px;}
    .lowercontent{padding: 80px 10%;}
    .footer{padding: 20px 10%;}
    .searchformresponsive{display: flex; justify-content: flex-end; flex-wrap: wrap; width: 100%; border-top: 0px solid #efefef; padding-top: 10px;} 
    .searchlink{display: none;}
    .searchbtn{margin: 0;}
    .si1{padding: 10px; border: 1px solid #efefef; width: 100%;}
    .searchbox{width: 100%;}
    .aboutupper{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
    .aboutpic{width: 100px; height: 100px; border-radius: 50px; overflow: hidden;}
    .aboutheader{font-size: 30px; letter-spacing: -2px; width: calc(100% - 120px);}
    .dlpdf{padding: 0 10%;}
}
@media only screen and (max-width: 800px) {
    .eachhomearticle{width: 100%;}
    .bodytext{padding-right: 0;}
    .bodyhead{padding-right: 0;}
    .filtersearch{width: 100%; margin-bottom: 10px;}
    .sorter{width: 33.333333;}
    .filterer span{display: none;}
    .mainheader{font-size: 30px;}
    .eacharticle{width: 100%;}
    .bookimage{width: 30%; padding: 20px;} 
    .bookdetails{width: 70%; padding: 20px;}
    .bookdetails h3{font-size: 18px;}
    .eachcategory{width: 100%;}
}
@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}