/* Define header size indirectly, by telling where body content starts (padding top) 
   The "size" is affected by WP top bar, so always check size changes in a browser without the bar (not logged in) */
body {
/*    padding-top: 120px; */
    padding-bottom: 20px;
}

div.content { padding: 1em }

@media (min-width: 1000px) {
    aside#secondary{
        padding-left: 2em;
    }
}

iframe{
    border-width: 0px;
}

img{
    border-radius: 25px;
}

img.size-full{
    max-width: 100%;
    width: auto;
}

img.size-medium{
    max-width: 50%;
    width: auto;
    margin: 5px 5px;
}

img.social-logo{
    width: 1em;
}

/* Fix image alignment */
img.alignleft {
    float: left;
    margin-right: 1.5em;
}

img.alignright {
    float: right;
    margin-left: 1.5em;
}


/* Use in bootstrap rows whose cells should have equal height */
.equal-height{
    display: flex;
    flex-wrap: wrap;
}

/* Use in divs to vertically-align elements centered
   (note that the div should be vertically-bigger than the content:
   for example, bootstrap cells should have equal height) */
.vcenter{
    display: flex;
    align-items: center;
}

.pull-bottom {
    /* vertical-align only applies to inline elements 
     !!!! not working? */
    display: inline-block;
    vertical-align: bottom !important;
    float: none;
}

.pull{
    position:absolute;
}

.bottom{
    bottom:0;
}

.right{
    right:0;
}

.post-details{
 
}

.post-title{
    margin-bottom: 0.2em;
}

.col > h1, .col > h2, .col > h3, .col > h4{
    margin-top: 0px;
}

/************** Text ****************/

/* Define font-sizes in proportion to base size (rem),
   which is adapted to the screen size.
   For specific cases, you can use pt or px */

html {
    font-size: 20px;
}

@media(max-width: 1580px) {
  html {
    font-size: 18px;
  }
}
@media(max-width: 980px) {
  html {
    font-size: 16px;
  }
}


/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lato01.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/lato01.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lato02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/lato02.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 160%;
    font-weight: 300;
}

a, a:hover{
    font-weight: 400;
    text-decoration: none;
}

h1,h2,h3,h4{
    font-weight: 700;
}

h1{
    font-size: 18pt;
}

h2{
    font-size: 16pt;
}

h3{
    font-size: 14pt;
}

h4{
    font-size: 12pt;
}


.navbar-default{
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.fa-stack{
    font-size: 16px;
}

#site-title{
    font-size:1rem;
    line-height: 1.2rem;
    text-align: left;
    text-decoration: none;
    height: 100%;
}


.navbar-default .navbar-nav > li > a{
    font-size: 1rem;
    text-align: right;
}


p{
    margin: 0 0 1em;
    text-align: left;
}

h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 1em;
    margin-bottom: 0.8em;
    clear: both;
}

h2.entry-title{
    margin-bottom: 0.2em;
}

li{
    list-style: none;
}

li:before {
  content: '\f068'; /* fa-minux */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #0074D9;
}

blockquote::before {
  font-family: FontAwesome;
  content: '\f10d'; /*quote left icon*/
}

blockquote::after {
  font-family: FontAwesome;
  content: '\f10e'; /*quote right icon*/
}


.navbar-default .navbar-nav > li:before,
.widget_archive > ul > li:before{
    content: none;
}

.display-posts-listing > .listing-item > .title{
    font-size: 16pt;
}


/*********** Color **************/

body{
    color: #222;
}

h1,h2,h3,h4{
    color: #444;
}


blockquote{
    border: 0;
}

#site-title, #footer, .navbar-default .navbar-nav > li > a:hover, footer a:hover{
    color:#fbc737;
}

.navbar-default{
    background-image:none;
    background-color: #334ca7;
}

.navbar-default .navbar-nav > li > a, footer a{
    color: #bbb;
    text-shadow: unset;
}

.fa-twitter, .fa-facebook, .fa-instagram, .fa-linkedin{
    color: #2f5496; /* navbar bgcolor */
}

a:hover > .fai{
    color: #bbb;    
}

/*************** Navigation *********************/

/* Navbar cell padding -> .nav>li>a */
/* using absolute positioning interferes with collapse layout */
@media (min-width: 1000px) {
    ul.navbar-nav{
	position:absolute;
	bottom:0;
	right:0;
    }
}

button.navbar-toggle{
    margin-top: 25px;
}

.navbar-default .navbar-nav > li > a{
    padding-top: 0.5rem;
}

.fa-stack > a:hover > i{
    /* background-color: white; */
    background-image: none;
    box-shadow: none;    
}

.navbar-collapse{
    margin-right: -15px;
    margin-left: -15px;
}

/* required to align icons vertically (vertical-alignment: middle does not work...) */
span.fa-lg{
    vertical-align: -15%;
}

.navbar-default{
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Responsive navbar-brand image CSS https://codepen.io/bootstrapped/pen/KwYGwq */

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {

  padding: 15px 0px;
  width: 4em; 
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Sticky footer - ensure the footer remains in the bottom of the page, even when there is few content
   @see https://getbootstrap.com/docs/3.3/examples/sticky-footer/sticky-footer.css
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
    background-color: #eee;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

footer {
    position: absolute;
    font-size: 12pt;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 80px;
    background-color: #334ca7; /* "corporate" blue */
    color: #bbb;                               
}

#footer{
    margin-top:1em;
    text-align:center;
}