/*------------------------------------*\
    Used by Cloud66 specific theme
    Updated 29/01/16
\*------------------------------------*/

@import url("buttons.css?v=3");
@import url("type.css?v=3");
@import url("navbar.css?v=3");
@import url("grid_system.css?v=3");
@import url("headers.css?v=3");
@import url("form.css?v=3");
@import url("pretty_print.css?v=3");
@import url("sidebar.css?v=3");
@import url("animations.css?v=3");


/*------------------------------------*\
    BUGFIX
\*------------------------------------*/
.read-next {
    /* fixes a bug with horizontal scrollbars and flexbox */
    overflow: hidden;
}

/*------------------------------------*\
    UTILITY CLASSES
\*------------------------------------*/
.u-objLeft {
    float: left !important;
}

.u-objRight {
    float: right !important;
}
.u-inlineBlock {
    display: inline-block !important;
}
.u-textSmall {
  font-size: 1.2rem !important;
}

.u-textCentered {
    text-align: center;
}
.u-textRight {
    text-align: right;
}
.u-textLeft {
    text-align: left;
}
.u-textMuted {
    color: #999 !important;
}
.u-textPadded {
    padding: 0 3.8em 1em 3.8em;
}
.u-hidden {
    display: none;
}

.u-opacity {
    opacity: 0;
}

.u-fullWidth {
    width: 100% !important;
    box-sizing: border-box;
}

.u-noBorder {
    border: none !important;
}

.u-fixed {
    position: fixed!important
}

.u-flex {
    display: flex;
}
.u-flexItem {
    align-self: flex-start;
}

/*---------------------------------------------------*\
    BLOCKS (BEM) - SUIT Naming conventions
\*---------------------------------------------------*/

.Callout {
    background: #FAFBFC;
    padding: 12px;
    color: #434a51;
    border-color: #ddd #ddd #ccc;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #fff inset, 0 1px 5px #f1f1f1;
    margin-bottom: 24px;
    font-size: 16px;
}
.Callout p {
    margin-bottom: 0;
}

.Callout--yellow {
    border-color: #E5D6B0;
    background: #fff9ea;
}

/*------------------------------------*\
    HERO
    Absolutely Positioned  bg image
\*------------------------------------*/
.Hero {
    /*background-image: url(/assets/img/hero-tour.png);*/
    position: absolute;
    top: 0;
	left: 0;
    height: 600px;
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    /*background-size: 2560px 600px;*/
    z-index: -1;
}

.home-template .Hero {
    background-image: url(/assets/img/hero-home.png);
    background-position: center -140px;
    height: 1200px;
    background-size: 2560px 1200px;
}
@media only screen and (max-width: 500px) {
	.home-template .Hero {
        background-position: -683px -78px;
        display: none;
	}
}

.tag-template .Hero {}
.author-template .Hero {
    top: -110px;
}


/*------------------------------------*\
    SECTION (BEM)
\*------------------------------------*/
.Section {
    margin-top: 2em;
}
.Section--dividerTop {
    border-top: 1px solid #ebf2f6;
}
.Section--cta {
    text-align: center;
    padding-top: 4em;
}


/*------------------------------------*\
    MODULE
\*------------------------------------*/
.Module {
    padding: 2.8em 0;
}

.Module-title {
    font-size: 20px;
    color: #000;
}

.Module-title--relatedItem {
    margin: 0 0 -1.2em 0;
}

/*------------------------------------*\
    MODULE
\*------------------------------------*/
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/*------------------------------------*\
    MAILCHIMP
\*------------------------------------*/
.Subscribe.is-shown {
    transform: translateY( 0px );
}

.Subscribe {
    text-align: left;
    box-sizing: border-box;
    transition: transform 0.65s ease-in;
    position: relative;
    margin: 3em auto 3em auto;
    width: 600px;
    transform: translateY( 140px );
    background: #EDEDED;
    padding: 1em;
    border-radius: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.Subscribe  .Subscribe-label {
        font-size: 1.3rem;
        color: #000;
        margin: 0 0 6px 0;
}
.Subscribe  .Subscribe-field {
    width: 81%;
}

.Subscribe  .Button {
    transition: none;
}

/*------------------------------------*\
    COVER IMAGE
\*------------------------------------*/
.CoverImage {
    position: relative;
    height: 12em;
    background-position: 50% bottom;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 80px 0 2em 0;
}
/* > 1024px */
@media only screen and (min-width : 1025px) {
    .CoverImage {
       padding: 0 16em;
    }
}
/* < 1024px */
@media only screen and (max-width : 1024px) {
    .CoverImage {
       height: 8em;
    }
}

.CoverImage-title {
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.CoverImage--index {
    padding-top: 12em;
    background-image: url("/assets/img/covers/index.jpg");
}
/* > 1024px */
@media only screen and (min-width : 1025px) {

}

.CoverImage-titleInner {
    background: rgba(0,0,0,0.45);
    padding: 4px;
}

/* < 1024px */
@media only screen and (max-width : 1024px) {
    .CoverImage--index {
        padding-top: 9em;
    }
    .CoverImage-title {
        font-size: 20px;
        padding-left: 1em;
        padding-right: 1em;
    }
    h2.CoverImage-title {
        font-size: 16px;
    }
}

.ArticleNav {
    margin-bottom: 30px;
}
.ArticleNav-link {
    font-size: 15px;
}

@media only screen and (max-width: 500px) {
    .ArticleNav {
        margin-top: 30px;
    }
}

@media only screen and (max-width : 1024px) {
    .SocialVert {
        display: none;
    }
}
@media only screen and (min-width : 1025px) {
    .SocialVert {
        position: fixed;
        top: 11em;
        margin-left: -110px;
        display: block;
        width: 20px;
    }
    .SocialVert-item {
        display: block;
        margin-bottom: 2px;
    }
    .SocialVert a {
        color: #ccc;
    }
    .SocialVert a:hover .fa {
        color: #333;
    }
    .SocialVert .fa {
        font-size: 22px;
    }
}

#results {
    border-bottom: #EFEFEF 1px solid;
    margin-bottom: 2rem;
}
#results .post {
    padding-bottom: 1rem;
    margin-top: 1rem;
    margin-bottom: 1em;
    border-bottom: none;
}
#results .post p {
    font-size: 13px;
    color: #999;
}
#results h2.post-title {
    font-size: 15px;
    line-height: 1;
}
#results h2.post-title a {
    color: #0088cc;
}
#results .search-info {
    font-size: 14px;
    color: #353D49;
}