/*————————————————————————————
  NATIVE METAS TAGS + GLOBAL SELECTORS 
————————————————————————————*/

/* Font */

body, .sans-serif, .tooltip-detail {
  font-family: Roboto,Helvetica Neue,Ubuntu,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
}

body, .sans-serif {
  font-size: 16px;
}


h1, .h1 {
  font-size: 3.3em;
  font-weight: 300;
  margin-top: .5em;
  }

  h1, .h1, .card, .card h4 {
    color: #1d2949;
  }

  h1:not(.sans-serif), .h1, .card > .d-flex > h3, .serif, .home-h2, article.article p:not(.sans-serif), .vocab table td:first-of-type, .vocab td:first-of-type {
    font-family: 'Merriweather', serif;
  }

  h1 span.smaller { font-size: 1.8rem; }

.home-h2 {
  font-weight: 500;
  font-size:3em;
}

.home-h2 .text-muted {
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: lighter;
  letter-spacing: 0.03em;
  line-height: 1em;
}

.text-muted  { 
  color: #6c757d;
  clear: both;
  display: block; 
}

.home-h3, h2 {
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: 0.01em;
}

.home-h3 {
  font-size: 1.6em;
  margin-bottom: 0.5em;
}

h2 {
  font-size:1.8em;
}

h3, .h3 {
    font-size: 1.13em;
    font-weight: 600;
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
}

  h2, h3, p, .home-h3, .home-h2 {
    color: #1d2949;
  }

h4 {
  font-size: 1.01rem;
  margin-top: 3px;
  padding-left: 5px;
  text-transform: uppercase;
}

h4 ~ p {
  padding-left: 5px;
}

h5, .h5 {
  font-size: 1rem;
}

h6 {
  font-size: .84rem;
  text-transform: uppercase;
}

a, .a {
  color: rgba(27, 106, 234, 1);
}

header a:not(.btn):not(.nav-link):not(.no-deco) {
  text-decoration: underline;
  color: inherit !important;
}

main a:not(.btn):not(.no-deco):not(.nav-link_tab) {
  text-decoration: underline;
  color: inherit !important;
}

main a:not(.btn):not(.no-deco):hover {
  text-decoration: none;
}

a:hover,
header a:not(.btn):not(.nav-link):not(.no-deco):hover {
  text-decoration: none;
}

.mega {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

.extra {
  font-size: 1.6em;
}

.plus {
  font-size: 1.1em;
}

.intro {
  color: #b5094f;
}

.video .smaller {
  font-size: 1.8rem;
}

.card .smaller {
  font-size: 0.9rem;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: 600;
}

.light {
  font-weight: 200;
}

article.article p {
  font-size: 1.05em;
  line-height: 1.7rem;
}

.underline {
  text-decoration: underline;
}


/*————————————————————————————
  COLORS 
————————————————————————————*/

  .bg-primary-dark {
    background-color: rgba(29, 41, 73, 1);
  }

  .bg-primary-dark-darker {
    background-color: #060a15;
  }

  .bg-secondary { 
    background-color: #b5094f !important;
  }

  .bg-accent { 
    background-color: rgba(59, 244, 116, .4);
  }

  .bg-border-accent { 
    border: 1px #3bf474 solid;
    background-color: rgba(59, 244, 116, .1);
  }

  .bg-border-accent-dotted { 
    border: 1px rgba(59, 244, 116, 1) dotted; 
  }

  .bg-grey-brand {
    background-color: #f5f5f5;
  }

  .nav-link {
    color: rgb(255, 255, 255, 0.65);
   }

  .nav-link:hover {
    color: rgb(255, 255, 255, 1);
   }

   .disabled { color: rgba(33, 37, 41,.5) ;} 
   .disabled a { pointer-events: none; text-decoration: none !important;} 


/*- COLOR Type language ——————————————————————————————————————*/ 

.langage-type {
  color: rgba(59, 244, 116, 1);
}

.primary {
  color: rgba(33, 37, 41,.5) ;
}

/*- COLOR LEVEL ——————————————————————————————————————*/ 

.nivel-facil {
  color: rgba(29, 41, 73, .8);
  border: 1px rgba(59, 244, 116, .1) solid; 
  background-color: rgba(59, 244, 116, .2);
}

.nivel-facil_fill, a.nivel-facil:hover {
  color: rgba(29, 41, 73, 1);
  border: rgba(59, 244, 116, 1) solid; 
  background-color: rgba(59, 244, 116, 1);
}

.nivel-medium {
  color: rgba(29, 41, 73, .8);
  border: 1px rgba(27, 106, 234, .1) solid;
  background-color: rgba(27, 106, 234, .2);
}

.nivel-medium_fill, a.nivel-medium:hover {
  color: rgba(255, 255, 255, 1);
  border: 1px rgba(27, 106, 234, 1) solid;
  background-color: rgba(27, 106, 234, 1);
}

.nivel-advanced {
  color: rgba(29, 41, 73, .8);
  border: 1px rgba(239, 27, 52, .1) solid;
  background-color: rgba(239, 27, 52, .2);
}

.nivel-advanced_fill, a.nivel-advanced:hover {
  color: rgba(29, 41, 73, 1);
  border: 1px rgba(239, 27, 52, 1) solid;
  background-color: rgba(239, 27, 52, 1);
}

.nivel-no {
  color: rgba(29, 41, 73, .8);
  border: 1px rgba(239, 27, 52, .1) solid;
  background-color: rgba(239, 27, 52, .2);
}


/*————————————————————————————
  ICONES 
————————————————————————————*/


.icon::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

.icon-share a {
  left: 10px;    
  /* fonctionne aussi avec a stretch. Necessité d'utiliser position absolute.Élément père est position relative. */
}

.em {
  margin-right: .7rem;
  height: 1em !important;
}

a:hover .feather-arrow-up-right {
  opacity: .5;
}

.feather-check {
  color: #3bf474;
}

.feather-check, .check-circle {
  margin-right: 5px;
}

/*————————————————————————————
  GLOBAL LAYOUT COMPONENTS 
————————————————————————————*/

body, html{
    height: 100%;
    min-width: 100%;
}

/* necessary for scrollspy Bootstrap component */
body {
  position: relative;
}

hr {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

hr.dark-color {
  height:1px; 
  border-width:0; 
  color:#060a15; 
  background-color:#060a15;
}

hr.short {
  width:50%; 
}

.mt-6 {
  margin-top: 64px;
}


/*————————————————————————————
  CUSTOMIZED LAYOUT
————————————————————————————*/


/* ————————————————————————————
 NAVIGATIONS 
 */


.navbar {
  height: 4rem;
  border-bottom: 1px solid rgb(0, 0, 0,.1);
  background: #1d2949;
  box-shadow: 0px 0px 8px rgba(0,0,0,.6);
  z-index: 2;
}

  .navbar .nav-link, .bottom-page .nav-link {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
   }

  .navbar .active > .nav-link {
    font-weight: 500;
  }

  .bd-navbar .navbar-nav-svg {
    width: 1rem;
    height: 1rem;
  }

  .dropdown-item {
    color : rgb(0, 0, 0,.6);
  }

  /* dropdown show on hover */

  .dropdown:hover .dropdown-menu{
        display: block;
    }
    .dropdown-menu{
        margin-top: 0;
    }

    .dropdown-toggle::after {
      display: none;
    }

/* ————————————————————————————
 BUTTONS 
 */  

.btn-primary { 
  background: rgba(27, 106, 234, 1);
  border-radius: none;
}

.btn-primary:hover { 
  background: rgba(27, 106, 234, .86);
  border-radius: none;
}

.btn-grey-brand { 
  background: rgba(245, 245, 245);
  color: #060a15;
  border-color: #dcdcdc;
}

.btn-grey-brand:hover, .btn-grey-brand.active, .btn-grey-brand[aria-expanded="true"] { 
  background: #dcdcdc;
  color: inherit;
}


/* ————————————————————————————
  LOGO 
 */

.navbar-brand img {
  height: 4.5em;
}

/* ————————————————————————————
 COVER  FIRST FOLD 
 */

 .cover-firstfold h1 {
  font-size: 4vw;
 }

 .cover-firstfold p {
  font-size: 1.2rem;
 }

 .home .cover-firstfold {
  background: url(images/practica-frances-conversacional-con-nativa-quoteonly-parlezvsfr.png) 90% 90% no-repeat;
}

/* ————————————————————————————
 ZONAS ENFATISADAS 
 */

.extra-xl h3 {
  color: #266aeb;
  font-size: 1.3em;
  margin-bottom: 0;
}

.extra-xl p:not(.smaller) {
color: #1d2949;
font-size: 1.08em;
}

/* ————————————————————————————
 CARDS 
 */

.card {
  padding: 1em 2em .4em;
}

.card h4 {
  font-size: 1em;
}

.card h4 + .card p {
  margin-top: 1em;
}

.card p.card-text:not(.serif) {
  color: inherit;
  font-size: .9em;
  color: rgba(0, 0, 0, .7);
  padding-top: .5em;
  padding-bottom: .5em;
}

.bg-cardItems {
  background: rgba(0, 0, 0, 0);
}

.bg-cardItems:hover {
    background: rgba(0, 0, 0, .02);
    box-shadow: none !important;
}


/* ————————————————————————————
 IMAGES 
 */

.image-ratio {
  padding: .25em;
  max-width: 100%;
  height: auto;
}


/* ————————————————————————————
 LIST 
 */  

.icon-share li:hover {
  background: rgba(0, 0, 0, .02);
  box-shadow: none;
}


/* ————————————————————————————
 TABS 
 */  
  
  .nav-tabs .nav-link_tab {
    color:rgba(29, 41, 73,.76);
    font-weight: 300;
    padding: .6rem 2rem;
    display: block;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .nav-tabs .nav-link_tab:hover, .nav-tabs .nav-link_tab.active:hover {
    color:rgba(29, 41, 73,1);
  }

  .nav-tabs .nav-link_tab.active {
    color: rgba(27, 106, 234, .86);
    background: white;
    border-bottom: 2px solid rgba(27, 106, 234, .86);
  }

   article .tab-pane { 
    color: #3c4257;
    font-size: 96%;
    font-weight: 300;
    }

/* Tab cards */ 
  .nav-tabs_card .nav-link_tab {
      color:rgba(29, 41, 73,.76);
      font-weight: 300;
      padding: 1.5rem 2rem;
      margin-bottom: 26px;
      border: 1px solid #dee2e6;
    }

  .nav-tabs_card .nav-link_tab:hover, .nav-tabs_card .nav-link_tab.active:hover {
    color:rgba(29, 41, 73,1);
  }

    .nav-tabs_card .nav-link_tab.active {
      color:#212529;
      border-left: 1px solid rgba(27, 106, 234, .86);
      border-top: 1px solid rgba(27, 106, 234, .86);
      border-right: 1px solid rgba(27, 106, 234, .86);
      margin-bottom: 0;
    }

    .nav-tabs_card #first-tab.active  {
      background: rgba(27, 106, 234, .06);
    }
    .nav-tabs_card #second-tab.active {
      background: rgba(27, 106, 234, .12);
    }
    .nav-tabs_card #third-tab.active {
      background: rgba(27, 106, 234, .18);
    }

  .tab-content > .active {
    border-top: 1px solid rgba(27, 106, 234, .86);
  }

  .tab-content > #tab-principiantes .card {
    background: rgba(27, 106, 234, .06);
  }
  .tab-content > #tab-conversacion .card {
    background: rgba(27, 106, 234, .12);
  }
  .tab-content > #tab-tutoring .card {
    background: rgba(27, 106, 234, .2);
  }


/* ————————————————————————————
 TOOLTiPS 
 */ 

.tooltip-origine {
  position: relative;
  transition: .5s;
}

.tooltip-origine:hover .tooltip-detail {
  visibility: visible;
  opacity: 1;
}

  .tooltip-detail {
    visibility: hidden;
    width: 120px;
    background-color: rgba(22,22,22,1);
    color: #fff;
    font-size: 0.89rem;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }

    .tooltip-detail::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #222222 transparent transparent transparent;
  }

  .tooltip-origine:hover .tooltip-detail {
    visibility: visible;
    opacity: 1;
  }

/* ————————————————————————————
 TABLE
 */  
  table {
    width: 100%;
  }

  table tr:hover {
    background : rgba(27, 106, 234, .1);
    border-color: #007bff;
  }

  .table-vocab table td, .table-vocab table th {
    padding: 12px 16px;
  }

  .table-vocab_narrow td, .wow th {
    padding: 6px 10px;
  }

  table tr {
    border-bottom: 1px solid #a6a4a4;
  }

  table th {
    border: 1px solid #dcdcdc;
  }

  table td {
    border: 1px dashed #dcdcdc;
    font-size: .9rem;
  }

  table td:first-of-type {
    border-left : none;
    background-color : rgb(233, 236, 239)
  }

  table td:last-of-type {
    border-right : none;
  }

  table th {
    text-align: left;
    background-color: rgb(245, 245, 245);
    text-transform: uppercase;
    font-weight: normal;
    font-size: .8rem;
  }


/* ————————————————————————————
Backgrounds  full width 
 */  

.video {
  background: #1d2949 url("https://www.parlezvsfr.com/images/home-break-demiAzul.png") no-repeat center/cover;
}

.reserva {
  background: url("images/home-break-fluo.png") no-repeat center/cover;
}

.col-custom-21 { width: 21%; }


.li-sty-none li { list-style: none; }

.alert p { font-size: 90%; }


/* ————————————————————————————
 FROM  
 */ 


/* Form mailchimp */ 

  form #mc_embed_signup {
    clear:left; 
  }


/* ————————————————————————————
 STICKY - FLOATING CONTAINER  
 */ 
.sticky-top {
    z-index: 1 !important;
  }

  #specifics .sticky-top {
      top: 103px;
   } 


/* ————————————————————————————
 CAROUSEL BUTTONS  
 */ 

.carousel-control-next, .carousel-control-prev {
  width: 8%;
  height: 95%;
  background-color: rgba(38, 106, 235, .6);
  opacity : 1;
}

 .carousel-indicators { 
    bottom: -16px;
 }

 .carousel-indicators li {
    background-color: rgba(38, 106, 235, .6);
 }


/* ———————————————————————————————————————————————————————————————————————————————————
  PAGES
*/

  h2.tab-h2 {
    font-size: .9rem;
  }


/* ———————————————————————————————————————————————————————————————————————————————————
  APRENDE FRANCES 
*/


/*- ARTICLE ——————————————————————————————————————*/ 

/* Sous menu actif */

    .sub-menu .active {
      color: rgb(27, 106, 234);
      text-decoration: none !important;
      border-bottom: 2px solid rgba(27, 106, 234, .86);
    }

    .sub-menu .active a {
      text-decoration: none !important;
    }


/* tooltip in article  original .tooltip*/

.tooltip_definition {
  padding: 1px 4px;
  background: rgba(181, 9, 79, .2);
  transition: 0.4s;
}

  .tooltip_definition:hover {
    background: rgba(181, 9, 79, .1);
    color: rgba(181, 9, 79, 1);
  }

.tooltip_explication {
  padding: 1px 4px;
  background: rgba(59, 244, 116, 0.2);
  transition: 0.4s;
}
  
  .tooltip_explication:hover {
    background: rgba(59, 244, 116, 0.1);
    color: rgba(8, 96, 35);
  }

  /* Images */

  .img-content-in-article {
    top: 1%;
    left: -5%;
    height: 200px;
    float : left;
  }

  .in-article {
    height: 100%;
  }

  /* Related content */

  .title_related-menu {
    font-size: 2.2rem;
    line-height: 3.5rem;
    font-weight: bold;
  }

  .note-seo {
    line-height: 1.2;
    font-size: 0.8rem;
  }

  /* A1-2 B1-2 C1-2 */

.nivel {
  top: -24px;
  font-size: .8rem
}

/* Varios text */

.exemple {
  background-color: rgb(245, 245, 245);
  padding: 6px 12px;
  display: block;
  font-size: .9rem;
  margin: 6px 0px;
}

  .exemple[content*="Por ejemplo"] {
    font-weight: bold;
  }

/* VIDEO YOUTUBE RESPONSIVE */

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; overflow: hidden; }
  .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* TEMPLATE CONFORT (confort reading, 2 columns. No left sidebar) */
     
  /* Related content */
    
    .confort .title_related-menu {
      font-size: 1rem;
      line-height: 1rem;
      font-weight: normal;
    }

    .confort .title_related-menu::after {
      content: " : ";
    }

    .confort .sub-menu {
      display: initial;
      padding: 0;
    }

  /* A1-2 B1-2 C1-2 */

  .confort .nivel {
    margin-left: 20px;
  }

  .confort .nivel::before {
    content: " | ";
    margin-right: 20px;
  }

  .confort .nivel, .confort .nivel li {
    display: initial;
    padding: 0;
  }



/*- RIGHT SIDEBAR ——————————————————————————————————————*/ 

/* Related articles */

  .related-article {
    margin-bottom: 20px;
  }

  .title_aside-article {
    font-weight: bold;
  }

    .related-article .accordion  {
      display: initial;
      padding: 0; 
      border-bottom: 1px solid rgba(0,0,0,.125);
    }

      .related-article .accordion li {
        list-style: none;
      }

      .related-article .accordion  button[aria-expanded="true"]::before {
        content: " - ";
        position: absolute;
        left : 13px;
      }

      .related-article .accordion  button[aria-expanded="false"]::before {
        content: " + ";
        position: absolute;
        left : 13px;
      }

      .related-article .accordion button {
        padding: .75rem 1.8rem;
      }

    .related-article .accordion .card-body {
      padding: .9rem;
    }



/*- LEFT SIDEBAR ——————————————————————————————————————*/ 

.menu-vert {
  flex-flow: row nowrap;
  background-color: #1a1f36;
  height: 85.5vh;
  overflow: scroll;
}

.menu-vert .active {
  background: #eee;
  color: #5469d4;
}

.menu-vert .active::after {
  font: normal 16px StripeIcons;
  content:"\2192";
  padding-left: 5px;
  position: absolute;
  right: 9px;

}

.menu-vert a {
  color: #6584df;
  font-size: 90%;
  font-weight: 300;
  position: relative;
}

 .menu-vert a:hover {
  color: #a4bbff;
    background: #2d355e;
}

.menu-vert ul li {
  margin-left: 30px;
}

  .nav-alfa {
      border-right: 1px solid rgb(0, 0, 0,.1);
  }

    .nav-alfa ul li {
      width: 50px;
      text-align: center;
    }


      .nav-alfa a {
        display: block;
        padding-top:15px;
        padding-bottom: 15px;
        width: 100%;
      }

    .nav-alumnos span {
      color: #fff;
    }
    .nav-alumnos span, 
    aside h4 {
      text-transform: uppercase;
      font-weight: bold;
    }

    .nav-alumnos hr {
      background: rgb(63, 77, 147);
      margin-top: .6em;
    }

    .nav-alumnos .nav-link {
      padding: .2rem;
    }


/*- ASIDE ——————————————————————————————————————*/ 

aside h4 {
  font-size: 72%;
  color: #26224d;
}

aside .nav-link {
  font-size: 88%;
  padding-left:0;
}

  aside a {
      color:rgba(29, 41, 73,.6);
      font-size: 300;
    }

    aside a:hover {
      color:#1f1a47;
    }

     aside a.active {
      color:#5469d4;
    }




/* ———————————————————————————————————————————————————————————————————————————————————
FOOTER 
*/


footer img[alt="logo-clemencizm"] {
  width: 50px;
}

footer h4 {
  color:  #266aeb;
}

footer .bg-primary-dark p, 
footer .bg-primary-dark address {
  color: rgba(255, 255, 255, 0.68);
}

footer .bg-primary-dark ul {
  list-style: none;
  font-size: 80%;
}

footer .bg-primary-dark a {
    color: rgb(255, 255, 255, 0.45);
   }

footer .bg-primary-dark a:hover {
    color: rgb(255, 255, 255, .75);
    text-decoration: none;
   }

footer .bg-primary-dark-darker p a {
  color: rgba(255, 255, 255, 0.45);
}

footer .bg-primary-dark-darker a:hover {
  color: rgba(255, 255, 255, 0.75);
}

#changePreferences:hover {
  text-decoration: none;
  cursor: pointer;
}


/* FIXED RIGHT BUTTONS */
.fixed-right-btn {
  position: fixed;
  pointer-events: all;
  /*// achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used*/
  right : 0;
  top: 30vh;
}

  /* Vertical rotation */
  .vertical-btn {
    writing-mode: tb-rl;
    display:flex;
    align-items:center;
    justify-content: flex-end;
    border-radius-bottom: 0;
  }
    .vertical-btn a {
      transform: rotate(180deg);
      padding-top:1.5rem;
      padding-bottom:1.5rem;
    }

  /* SCROLL TOP */
  .back-to-top-link { 
    width: 3.1rem;
    height: 4rem;
    padding: 0.55rem;
    text-align: center;
    border-radius:.25rem;
    }

    .back-to-top-link:hover  {
        background: white;
      }

      .back-to-top-link a {
        color: rgba(59, 244, 116, 1);
      }

      .back-to-top-link a:hover {
        text-decoration: none !important;
        color: rgba(59, 244, 116, .6);
      }

@media screen and (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}

/* ———————————————————————————————————————————————————————————————————————————————————
OTHER BLOCK / LAYOUT -  
*/

  .opinion-primera-class {
    text-align: center;
  }

/*——————————————————————————————————————————————————————————————————————————
 SCREEN ADAPTATION 
————————————————————————————————————————————————————————————————————————————*/


/* On big screens, untill it reaches 992 breakpoint */
@media (min-width: 992px) {
  

/* ————————————————————————————
 NAVIGATIONS 
 */

.navbar .active > .nav-link {
    border-bottom: 1px solid rgba(255, 255, 255,.9);
  }

  #timezone {
    flex-direction: row;
  }


/* ————————————————————————————
  VIDEOS 
 */  
  .video-container iframe,  
  .video-container object,  
  .video-container embed,
  .video-container img {
    width: 35vw;
    height: calc(35vw/1.77);
  }


/* ————————————————————————————
  OPINIONES 
 */ 
  .opinion-primera-class .d-lg-inline.d-block {
        float: right;
    }

  .opinion-primera-class span {
    text-align: none;
  }

  .opinion-primera-class {
    text-align: left;
  }

}



 
/* On small screens, untill it reaches 992 breakpoint */

@media (min-width: 992px) and (max-width: 1090px) {  
 
 /* ————————————————————————————
 NAVIGATIONS 
 */  
  .navbar-brand {
    font-size: 1rem;
  }

  .navbar-brand img {
    height: 4em;
  }

   #timezone li {

    border:  none;
    padding-top: 10px;


  }


}

/* On small screens, untill it reaches 576 breakpoint */


@media (max-width: 365px) {

/* ————————————————————————————
 NAVIGATIONS 
 */
  .navbar-brand img {
    width: 3.4em;
  }

}

@media (max-width: 576px) {

   /* ————————————————————————————
   COVER  FIRST FOLD 
   */

   .cover-firstfold h1 {
    font-size: 7vw;
   }

 
}

/* On small screens, untill it reaches 768 breakpoint */


@media (max-width: 768px) {  
   

  /* ————————————————————————————
   VIDEO 
  */

  #comparte {
    margin-bottom: 35px;
  }

  #comparte p {
    color: white;
  }

  #comparte p,
  #comparte li:hover svg:first-of-type,
  #comparte li:hover a {
    color: white;
  }

}



/* On small screens, untill it reaches 992 breakpoint */


@media (max-width: 991px) {  
   
/* ————————————————————————————
 NAVIGATIONS 
 */
  .navbar {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-brand img {
    height: 4em;
    position: absolute;
    top: 0;
  }

  .navbar-toggler {
    margin-right: 15px;
  }


  .navbar-collapse {
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbar-collapse ul li:first-of-type {
    padding-top: 20px;
  }

  .navbar-collapse > ul:last-of-type {
    float: left;
    display: inline-block;
    width: 100%;
  }

  , .navbar-collapse > ul:last-of-type li {
    display: inline-block;
  }

  .navbar-collapse > ul:last-of-type li[data-content]::before {
    display: visible;
    content: attr(data-content);
    text-transform: uppercase;
    color: white;
  }

    .video-container iframe { width: 100%;  }

}