/*
Version: 1.01

.----------------.  .-----------------. .----------------.  .----------------.  .----------------.  .----------------.  .----------------.
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| |     _____    | || | ____  _____  | || |  _________   | || |  _________   | || |  _______     | || |     _____    | || | ____    ____ | |
| |    |_   _|   | || ||_   \|_   _| | || | |  _   _  |  | || | |_   ___  |  | || | |_   __ \    | || |    |_   _|   | || ||_   \  /   _|| |
| |      | |     | || |  |   \ | |   | || | |_/ | | \_|  | || |   | |_  \_|  | || |   | |__) |   | || |      | |     | || |  |   \/   |  | |
| |      | |     | || |  | |\ \| |   | || |     | |      | || |   |  _|  _   | || |   |  __ /    | || |      | |     | || |  | |\  /| |  | |
| |     _| |_    | || | _| |_\   |_  | || |    _| |_     | || |  _| |___/ |  | || |  _| |  \ \_  | || |     _| |_    | || | _| |_\/_| |_ | |
| |    |_____|   | || ||_____|\____| | || |   |_____|    | || | |_________|  | || | |____| |___| | || |    |_____|   | || ||_____||_____|| |
| |              | || |              | || |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
'----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'
.----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------.
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| |    _______   | || |  _________   | || |  ____  ____  | || |   _____      | || |  _________   | || |    _______   | |
| |   /  ___  |  | || | |  _   _  |  | || | |_  _||_  _| | || |  |_   _|     | || | |_   ___  |  | || |   /  ___  |  | |
| |  |  (__ \_|  | || | |_/ | | \_|  | || |   \ \  / /   | || |    | |       | || |   | |_  \_|  | || |  |  (__ \_|  | |
| |   '.___`-.   | || |     | |      | || |    \ \/ /    | || |    | |   _   | || |   |  _|  _   | || |   '.___`-.   | |
| |  |`\____) |  | || |    _| |_     | || |    _|  |_    | || |   _| |__/ |  | || |  _| |___/ |  | || |  |`\____) |  | |
| |  |_______.'  | || |   |_____|    | || |   |______|   | || |  |________|  | || | |_________|  | || |  |_______.'  | |
| |              | || |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
'----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'

Interim styles for Energy Intelligence

This document is purely for new stylings that aren't related to the legacy styles, if you're editing the exiting styles of the website, edit the appropriate file.

**CONTENTS**
* Mixin definitions
* Font imports
* Top stories
* Article List
* Variable settings
*/
/**********************
    Mixin definitions
***********************/
/***********************
Font imports
***********************/
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
/***********************
Variable settings
***********************/
/* Font variables */
/* Global colors */
/* Element colors */
/* Breakpoint definitions */
/*****************
Common
*****************/
.no-underline {
  text-decoration: none !important;
}
.no-margin {
    margin: 0;
}
/* Affected menu items in the top  */
/*html {
    font-size: 8px;
}*/
.vresize {
    resize: vertical;
}
/* A reusable overlay which will make the entire container a hyperlink. */
a.linkOverlay {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2;
  background-color: #333;
  opacity: 0;
  font-size:16px;
}
a.linkOverlay:hover {
  opacity: 0.09;
}
/*Icons*/
.weo-ico {
  display: inline-block;
  margin-right: 3px;
  width: 18px;
  height: 18px;
  text-decoration: none;
  transition: 0.3s;
  position: relative;
  cursor: pointer;
}
.weo-ico:hover {
  background-position: 0 -18px;
  transition: 0.3s;
}
.weo-ico:hover::after {
  position: absolute;
  top: -15px;
  font: normal 10px Arial, Helvetica, sans-serif;
  color: black;
}
.pdf-ico {
  background-image: url('../../Media/Images/document_18.png');
  background-repeat: no-repeat;
}
.pdf-ico:hover::after {
  content: "PDF";
  left: -2px;
}
.email-ico {
  background-image: url('../../Media/Images/envelope_closed_18.png');
  background-repeat: no-repeat;
}
.email-ico:hover::after {
  content: "Email the Editor";
  left: -36px;
  width: 80px;
}
.favoriteLink a {
    color: #2F2F2F;
    font-family: lato;
    text-decoration: none;
    /*font-size:1.3em;*/
}
.favoriteLink a:hover {
  text-decoration: underline;
}
.favorite {
  background-image: url('../../Media/Images/star_18.png');
  background-repeat: no-repeat;
  width: 18px;
}
.favorite.remove {
  background-position: 0 -18px;
}
.favorite.remove.weo-ico:hover::after {
  content: "Remove from favorites";
  left: -49px;
  width: 103px;
}
.favorite.weo-ico.add:hover::after {
  content: "Add to favorites";
  left: -36px;
  width: 80px;
}
.back-slide {
  background-image: url('../../Media/Images/back_18.png');
  width: 50px;
}
/*****************
Page furniture
*****************/
body {
  background-color: #F2F2F2;
  font-size: 16px;
}
h1,
h2 {
  margin-top: 0;
  display: inline-block;
  max-width: 100%;
  font-size: 1.7em;/*1.25em;*/
  font-family: "Lato";
  font-weight: 400;
  margin-bottom: 1.5rem;
}
h1.channelTitle,
h2.channelTitle {
  margin-top: 16px;
  margin-left: 16px;
}
span.favoriteLink {
  float: right;
  margin-top: 16px;
  margin-right: 16px;
  font-size:16px;
}
.carousel {
  margin: 8px 0 32px;
  padding-top: 8px !important;
  padding-bottom: 16px !important;
  text-align: left;
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.carousel ul {
  box-shadow: inset -14px 1px 22px -6px #ffffff;
}
/*****************
Article List
*****************/
#articlesPage article {
  text-align: left;
  position: relative;
  margin-bottom: 32px;
  /* need to convert to mixin */
}
#articlesPage article .thumbnail {
  position: relative;
  display: block;
}
#articlesPage article .thumbnail img {
  width:100%;
  height:auto;
}
#articlesPage article a.headline {
  display: block;
  margin-bottom: 9.6px!important;
  font-size:20px; /*1.25em;*/
  max-width: 90%;
  text-decoration: none;
  font-family: "Lato";
  color: #2F2F2F;
  font-weight: bold;
}
#articlesPage article p {
  font-size: 14px;/*0.875em;*/
  font-family: "Lato";
  margin-bottom: 10px;
}
#articlesPage article h3 {
  font-size: 12px;/*0.75em;*/
  color: #2F2F2F;
  font-weight: 600;
  margin-bottom: 6px;
}
#articlesPage article h3 span {
        color: #FE5000; /*#E67437;*/
}
#articlesPage article .synopsis {
  padding: 16px;
  bottom: 0;
  z-index: 2;
  font-size:16px;
}
#articlesPage article h3.pictureArticle,
#articlesPage article .headline.pictureArticle {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: text-shadow 1s;
}
#articlesPage article h3.pictureArticle span,
#articlesPage article .headline.pictureArticle span {
  color: #fff;
}
#articlesPage article h3.pictureArticle:hover,
#articlesPage article .headline.pictureArticle:hover {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
#articlesPage article .headline.pictureArticle {
  font-size: 2em;
  margin-bottom: 0em;
  line-height: 1em;
}
#articlesPage article.topStory .headline {
  font-size: 25.6px;
  margin-bottom: 8px;
}
#articlesPage div.topStories {
  border-bottom: 1px solid #E4E4E4;
  margin-bottom: 16px;
}
#articlesPage div.topStories article {
  margin-bottom: 8px;
}
div#favorites {
  margin: 2rem;
  min-height: 800px;
}
div#favorites ul {
  padding: 0;
}
div#favorites li {
  list-style: none;
  display: block;
  width: 50%;
  border-bottom: 1px solid #E4E4E4;
  margin-bottom: 0.1em;
  padding: 0.5em 0;
}
div#favorites a {
  font-family: "Lato";
  text-decoration: none;
  font-size: 1.2em;
  color: #2F2F2F;
}
div#favorites a:hover {
  text-decoration: underline;
}
div#favorites .remove {
  display: block;
  cursor: pointer;
  position: relative;
  width: 70px;
  height: 18px;
  float: right;
}
div#favorites .remove::after {
  position: absolute;
  right: 5px;
  bottom: 0px;
  font-size: 12px;
  font-family: "Lato";
  content: 'Remove';
}
/*****************
Marketing grid pages
*****************/
.people-profile {
  text-align: center;
  font-family: lato;
}
/*****************
Subscription forms
*****************/
/*form.email-form,*/ 
div.email-form {
  background-color: #E4E4E4;
  border-radius: 1em;
  padding: 1.5rem 1em 1em;
  margin: 5px;
  box-sizing: border-box;
  height: auto;
}
    /*form.email-form h2,*/ 
    div.email-form h2 {
        font-size: 1.3em;
        text-align: left;
        margin-bottom: 1em;
        font-weight:bold;
    }
    /*form.email-form input[type="text"],
    form.email-form input[type="email"],*/ 
    div.email-form input[type="text"],
    div.email-form input[type="email"] {
        display: block;
        box-sizing: border-box;
        background-color: #fff;
        border: none;
        margin-bottom: 0.4rem;
        width: 100%;
        padding: 0.9em;
        border-radius: 1em;
        font-size: 1.1em; /*0.8em;*/
    }
    /*form.email-form input[type="submit"],*/
    div.email-form input[type="submit"] {
        background-color: #EF5000; /*#E67437;*/
        border-radius: 1em;
        text-align: left;
        border: none;
        padding: 0.5em 1em;
        box-sizing: border-box;
        font-family: "Lato";
        font-size: 1.1em; /*0.8em;*/
        font-weight: 600;
        color: #fff;
    }
/* Lead Generation Form */
::-webkit-input-placeholder {
  color: #2F2F2F;
}
::-moz-placeholder {
  color: #2F2F2F;
}
:-ms-input-placeholder {
  color: #2F2F2F;
}
#subscription-form input[type="text"] {
  width: 100%;
  padding: 0.5em;
  border-radius: 5px;
  box-sizing: border-box;
  border: none;
  background-color: #E4E4E4;
}


#articlesPage .thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}