@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200italic,300,300italic,400,400italic,600,600italic,700,700italic,900,900italic);


/* ## RESETS ## */
.block, .container, .row, .row.block { margin: 0; padding: 0; }


/* ## GENERAL ## */
body {background: #f0f0f0;color: #000;font-family: 'Source Sans Pro', sans-serif;font-weight: 400;font-size: 16px;line-height: 32px;}

#content { padding: 60px; text-align: center;  }
.container {background: #FFF;margin: 0 auto !important;max-width: 1366px;padding: 60px !important;width: 100%;text-align: left;}

h1.h1 {font-size: 60px;font-weight: 700;margin: 0;}
h1.h1:after {background: #000;display: block;content:'';height: 1px;margin: 50px auto 60px;position: relative;width: 30px;}

p { margin: 0 0 35px 0; }

.btn-primary { background: transparent; border: 2px solid #f47937;border-radius: 5px; color: #f47937; display:inline-block !important; font-size: 14px;font-weight: 700;letter-spacing: 2px;line-height: 14px;padding: 20px 40px;text-transform: uppercase;transition: .25s;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: #f47937; border: 2px solid #f47937; color: #FFF; outline: none; }

@media only screen and (max-width: 1024px) {
    #content { padding: 40px; }
    .container { padding: 40px !important; }
    h1.h1:after {margin: 30px auto 40px;}
}

@media only screen and (max-width: 640px) {
    #content { padding: 0 20px; }
}

@media only screen and (max-width: 480px) {
    .container { padding: 20px !important; }    
    h1.h1 { font-size: 36px; padding: 0 20px; }
    p { margin: 0 0 15px 0; }
}


/* ## HEADER ## */
#header { overflow: auto; padding: 60px; width: 100%; }

#header .logo { display: table; height: 58px; text-align: left; }
#header .logo div { display: table-cell; vertical-align: middle; }
#header .logo div a { background: url(https://blueprint.cdn.cloud.searchoptics.net/adce40d19da737e438539b66c93ba4be/logo_sprite.png) no-repeat; background-position: 0 -50px; display: block; height: 29px; width: 200px; }

#header .signUp { text-align: right; }

@media only screen and (max-width: 767px) {
    #header { margin: 0 auto; padding: 40px; text-align: center; }
    #header .logo { height: 29px; width: 100%;  }
    #header .logo div { display: block; margin: 0 0 20px 0; }
    #header .logo div a { margin: 0 auto; text-align: center; }
    #header .signUp { text-align: center; }
    #header .signUp .btn-primary { border: none; padding: 0; }
}

@media only screen and (max-width: 480px) {
    #header {padding: 20px;margin: 0 0 40px 0;}
}


/* ## BLOG ## */
.blogListWidget { text-align: left; }
.blogListWidget .container-fluid.contentWrap { border-right: 1px solid #CCC; float: left; margin: 0; padding: 0; width: 66%; }
.blogListWidget .container-fluid.contentWrap .blogEntry { margin: 0 60px 60px 0; }
.blogListWidget .container-fluid.contentWrap .blogEntry .title { }
.blogListWidget .container-fluid.contentWrap .blogEntry .title h1 {font-size: 36px;font-weight: 700;margin: 0;padding: 50px 0 0 0;}
.blogListWidget .container-fluid.contentWrap .blogEntry .title h1:after {background: #000;display: block;content:'';height: 1px;margin: 25px 0 10px;position: relative;width: 30px;}
.blogListWidget .container-fluid.contentWrap .blogEntry .title h1 a { color: #000; text-decoration: none; }
.blogListWidget .container-fluid.contentWrap .blogEntry .author { display: none; }
.blogListWidget .container-fluid.contentWrap .blogEntry .creation-date {color: #000;font-size: 28px;font-weight: 300;position: absolute;}
.blogListWidget .container-fluid.contentWrap .blogEntry .creation-date i { display: none; }
.blogListWidget .container-fluid.contentWrap .blogEntry .category { display: none; }
.blogListWidget .container-fluid.contentWrap .blogEntry .description { }
.blogListWidget .container-fluid.contentWrap .blogEntry a.button { color: #f47937; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.blogListWidget .filter-bar { display: block !important; float: right; width: calc(33% - 60px) !important; }
.blogListWidget .filter-bar .container-fluid { background: #FFF; }
.blogListWidget .filter-bar .container-fluid .navbar-header { }
.blogListWidget .filter-bar .container-fluid .navbar-header .navbar-toggle { }
.blogListWidget .filter-bar .container-fluid .navbar-header .navbar-brand {color: #000;font-size: 24px;font-weight: 700;height: inherit;margin: 0 0 10px 0;padding: 0;}
.blogListWidget .filter-bar .container-fluid .navbar-collapse { }
.blogListWidget .filter-bar .container-fluid .navbar-collapse .navbar-nav { width: 100%; }
.blogListWidget .navbar.navbar-inverse.filter-bar .container-fluid .navbar-collapse .navbar-nav li { background-color: #FFF !important; margin: 0; padding: 0; }
.blogListWidget .navbar.navbar-inverse.filter-bar .container-fluid .navbar-collapse .navbar-nav li a { border: none; color: #f47937 !important;font-size: 12px;font-weight: 800;letter-spacing: 2px;text-transform: uppercase;}
.blogListWidget .navbar.navbar-inverse.filter-bar .container-fluid .navbar-collapse .navbar-nav li a:before { content:""; margin: 0; }


@media only screen and (max-width: 1024px) {
    .blogListWidget .container-fluid.contentWrap { width: 69%; }
    .blogListWidget .container-fluid.contentWrap .blogEntry { margin: 0 40px 40px 0; }
    .blogListWidget .filter-bar { display: block !important; float: right; width: calc(30% - 40px) !important; }
}

@media only screen and (max-width: 991px) {
    .blogListWidget .container-fluid.contentWrap { width: 72%; }
    .blogListWidget .filter-bar { display: block !important; float: right; width: calc(27% - 20px) !important; }
}

@media only screen and (max-width:767px) {
    .blogListWidget .container-fluid.contentWrap { border: none; float: none; width: 100%; }
    .blogListWidget .container-fluid.contentWrap .blogEntry {margin: 0 0 40px 0;position: relative;}    
    .blogListWidget .filter-bar {padding: 0;width: 100% !important;display: block !important;border: none;background: none !important;margin: 0 0 40px 0 !important;float: none !important;}    
    .blogListWidget .filter-bar .container-fluid { padding: 0; }
    .blogListWidget .filter-bar .container-fluid .navbar-header { float:left;margin: 0;width: 110px;}
    .blogListWidget .filter-bar .container-fluid .navbar-header .navbar-toggle {display: none;}
    .blogListWidget .filter-bar .container-fluid .navbar-header .navbar-brand  { font-size: 21px;}
    .blogListWidget .filter-bar .container-fluid .navbar-collapse {position: relative;padding: 0; width: calc(100% - 110px); border: none;display: inline;float:left;}
    .blogListWidget .navbar.navbar-inverse.filter-bar .container-fluid .navbar-collapse .navbar-nav li {width: initial !important;float: left;}
    .blogListWidget .navbar.navbar-inverse.filter-bar .container-fluid .navbar-collapse .navbar-nav li a { margin: 0 20px 10px 0;padding: 0;}
}

@media only screen and (max-width:640px) {
    .blogListWidget .filter-bar .container-fluid .navbar-header { float:none; width: 100%; }
    .blogListWidget .filter-bar .container-fluid .navbar-header .navbar-brand  {font-size: 20px;margin: 0 0 15px 0;}
    .blogListWidget .filter-bar .container-fluid .navbar-collapse {float: none;margin: 0;}
}


/* ## FOOTER ## */
#footer { color: #000; text-align: center; padding: 60px; }
#footer p { font-size: 14px; font-weight: 600; margin: 0; }

@media only screen and (max-width:767px) {
    #footer { padding: 40px; }
}

@media only screen and (max-width:480px) {
    #footer { padding: 20px; }
}