/* Theme customization starts here for mariepopette.com website */
/* Parent:
Theme Name: Vantage
Author: SiteOrigin
Author URI: https://siteorigin.com/
Theme URI: https://siteorigin.com/theme/vantage/
Description: Vantage is a flexible multipurpose theme. Its strength lies in its tight integration with some powerful plugins like Page Builder for responsive page layouts, Meta Slider for big beautiful sliders and WooCommerce to help you sell online. Vantage is fully responsive and retina ready. Use it to start a business site, portfolio or online store. We offer free and premium support on our support <a href="http://siteorigin.com/thread/">forums</a> (http://siteorigin.com/thread/).
Version: 1.5.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantage
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce
*/

/* Remove top padding from #main element to make the header (slider) have no gap between top menu and itself */
#main {
  margin-top: 0px;
  padding-top: 0px;
}

/* increase font size of the footer */
#mp-footer-contact {
  font-size: 1.3em;
}

/* disable previous and next links on each post page */
.single-nav-wrapper {
  display: none;
}

/* disable featured image display on post pages. This still loads the image, so may use
 * php code to disable it, see functions.php override.
 * We don't want to display featured image, but do need it to display as thumbnail in the
 * Siteorigin Post Carousel widget.
 */
.entry-main .entry-header .entry-thumbnail {
  display: none;
}

/* Increase width of newsletter signup email box */
.mc-field-group input[type="email"] {
  width: 17em;
}

/* add a border to the contact me form */
.contact-form {
  border: 2px solid #777777;
  border-collapse: collapse;
  padding: 1em;
}

/* override so-widgets-bundle/widgets/post-carousel/css/style.css
 * which disables the post-carousel arrows on a smartphone which makes it
 * confusing to realize that the carousel can be swiped to see next and previous.
 */
@media screen and (max-width: 600px) {
  .sow-carousel-title a.sow-carousel-previous,
  .sow-carousel-title a.sow-carousel-next {
    display: block;
  }
}

/* Add support for entypo fonts, may be used in module or content for example */
@font-face {
  font-family: 'entypo';
  src: url('fonts/entypo.eot');
  src: url('fonts/entypo.eot?#iefix') format('embedded-opentype'), url('fonts/entypo.woff') format('woff'), url('fonts/entypo.ttf') format('truetype'), url('fonts/entypo.svg#genericonsregular') format('svg');
}

/* Multi site language switcher display icon display
    World icon: U+1F30E == &#127758;
    Unused. No longer using this in a widget, just in menu with words, so don't need icon.
.widget_mslswidget h3:before {
font-family: 'entypo';
top: 2px;
font-size: 2em;
content: "\1F30E";
}
*/

/* Text widget added, title Contact, with email and phone
    Chat/blurb icon: U+E718, phone icon: U+1F4DE,
    mail icon: U+2709 &#9993;
    user man shape icon: U+1F464 &#128100;
    Not using this for the catch-kathmandu theme, which does not
    have icons next to widget titles.
    Unknown if Vantage theme could use this.
.widget_text#text-4 h3:before,
.widget_text#text-3 h3:before,
.widget_text#text-2 h3:before {
font-family: 'entypo';
top: 2px;
font-size: 2em;
content: "\1F464";
}
*/

/*
 * http://wordpress.org/support/topic/trying-to-display-entypo-font-icons
 * Use it in text as <span class="entypo-class">&#128222 ;</span> for phone U+1F4DE
 * or <span class="mp-i mp-i-phone"></span>
 * 2016: while most glyphs work, the phone one &#128222 no longer displays on Chrome on Windows.
 * Also the latest entypo is no longer providing fonts, but is in .svg image icons only.
 * Maybe time to move to using just the icons... but they are just 20x20 px so not good on all pages.
 * OR try: 8227 filled triangle, 10145 thick arrow as replacements. 9742 is large, old phone - too big.
 * 2017: looks like 128222 works just fine now, so put it back - see .mp-phone
 * TODO: Vantage already loads vantage/fontawesome/css/font-awesome.css?ver=4.6.2' 
 * so use fa class and icons itself, no need to use entypo class...
 * BUT - then if I change theme, would need to add in font-awesome, and it is quite large
 * font-awesome is 1M, while entypo is just 0.1M. So keeping entypo around for now.
 */
.mp-i, .entypo-class {
  display: inline-block;
  font-family: 'entypo';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-size: xx-large;
  line-height: 50%;
  padding-right: 2px;
}

/* mp-icons are all mp-i- classes. Use them with entpyo-class */
.mp-i-phone:before {
  /* if this does not display on Windows, try &#10145; &#x27a1 right-arrow as replacement */
  content: "\1F4DE";
}
.mp-i-email:before {
  /* &#x2709 &#9993;  email */
  content: "\2709";
}
.mp-i-form:before {
  /* &#x2328 &#9000;  Keyboard */
  content: "\2328";
}
.mp-i-comment:before {
  /* E718 &#59160; comments */
  content: "\E718";
}
.mp-i-external:before {
  /* &#xe715; external link */
  content: "\E715";
}

/* tel class for telephone numbers
* Use this as: <span class="tel"> <a href="tel:+1-514-...">514...</a></span>
 * JavaScript code may strip off the <a> tag on desktop browsers
  font-weight: bold;
 */
.tel {
}

/*
 * Tariffs page, probably at: http://www.mariepopette.com/tarifs/
 * table style
 */
table.mp-tarif {
  border: 2px solid #777777;
  border-collapse: collapse;
}
table.mp-tarif th, table.mp-tarif td {
  border: 1px solid #777777;
  padding: 0.5em;
  text-align: center;
}

/* make the table outer container x-scrollable, otherwise only the
 * first column is seen on a smartphone portrait display
 */
div.mp-tarif {
  overflow-x: auto;
}

/*
 * indent all <p> inside an entry? Maybe be 0em or 1em or 2em.
 */
.entry-content p {
  text-indent: 0em;
}

input, textarea {
  /* form input elements get white background by default, make it very light green */
  background-color: #efe;
}

/** Multisite language switcher line should issue a br clear="all" so 
 * "This post is available in ..." line does not get messed up if images
 * are present in the post.
 */
p#msls {
  clear: both;
  font-style: italic;
  font-size: 90%;
}

/* don't show sidebar widgets on smaller screens 
 * text-3 is Contacts and it is in footer but don't just disable that,
 * disable the entire secondary area so there is no big whitespace left.
 * Not needed for Vantage parent theme, since it does not use sidebars.
@media screen and (max-width: 960px) {	
  .widget-area#secondary { 
    display: none;
  }
}
 */

/* green/blue button, changes to partly grey on hover (part of
 * hover style from parent style)
 * Using button or new class .mpbtn does not work, so using
 * input[type=...]
 */

input[type="submit"] {
  background: #42d934;
  background-image: -webkit-linear-gradient(top, #42d934, #2ba8b8);
  background-image: -moz-linear-gradient(top, #42d934, #2ba8b8);
  background-image: -ms-linear-gradient(top, #42d934, #2ba8b8);
  background-image: -o-linear-gradient(top, #42d934, #2ba8b8);
  background-image: linear-gradient(to bottom, #42d934, #2ba8b8);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
input[type="submit"]:hover {
  background: #47945f;
  text-decoration: none;
}

/* vantage uses very small font-size for titles, so make it larger
  font-size: 20px;
  Use same value as used for h1 in article.post CSS entries in Vantage CSS.
 */
article.post .entry-header h1.entry-title,
article.page .entry-header h1.entry-title {
  font-size: 1.7em;
}
/* Vantage uses small font-size: 13px; for buttons, make it use larger font */
a.button {
  font-size: inherit;
}

/* Vantage article carousel inherits .entry-content { line-height: 1.6em; }
 * which makes text under article image look too spaced out. Reduce it.
 */
.sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 {
  line-height: 1.2em;
}

#mp-title h1 {
  text-align: center;
}

/* Easy Facebook Like Box Plugin
 */
.efbl_fb_story,
#efblcf { /* override definition from easybox plugin */
  border-bottom: 2px solid #777777;
}