/* Social Media icons - font awesome - footer */
.fa {
	color: #0d6ba0;
}
.fa-facebook-square, .fa-linkedin, .fa-twitter, .fa-instagram, .fa-youtube  {
	color: #0d6ba0;
}
.foot-logo {width:5%;margin-top:-10px;opacity: 0.8;}

ol.H li {
    color:#0796c6;        
    font-weight: 600; 
    margin-left: 18px;
    font-size:1.2em;
}
ol.H li::first-letter {text-transform: capitalize;}
ol.H li span {color: #000000; font-size: 12px;}

footer {border-top: 1px solid #b7b7b7;}
footer a {color:red}



/* Learn More v5 styles */
#showcase-learn {
    position: relative;
     background-image: url("../img/phone-notifications.jpg"); 
    /* background-image: url("../img/social-shopping-hero_optz.jpg"); */
    min-height: 700px; 
  }
 
#showcase-learn .primary-overlay {
      background: rgba(27, 107, 158, 0.8);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; 
  }


  .d-flex {color:#006699; font-size:1.4em; font-weight: 400; text-align: left; letter-spacing: -1px;}
  .d-flex span {color:red; font-size:1.5em; font-weight: 200;}
  .d-flex .stars {font-size: 2em; color: red; }

  hr.grey { 
       width:90%;
       text-align:center;
       height:2px; 
       background-color: CCC;
    }

    .dkblue {color:#006699}
    .dkblu {color:#006699; font-weight: 400;}

    #SM .row li {
        width: 33.3%;
        float: left;
        border: 0;
      }
      
    #SM img {
        border: 0 none;
        display: inline-block;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
      }
  

    /* #showcase-learn h1 {font-size:3em; color:#222;  padding-top:50px  }   */

    /*  not in use
  #showcase-learn h1 {
      font-size:2.8em;
      background:#efefef;
      opacity: 0.8;
      border-radius: 12px;
      padding:24px 16px;
      box-shadow: 1px 2px 8px #000000;
      color:#222;         
    }
    */




/* On screens that are 576px or less, set these styles */
@media screen and (max-width: 576px) {
    h2.display-4 {color: #0796c6; font-size:2.4em; padding-bottom:0px;}
    h4.lead {color: #555; font-size: 1.5em; padding-top:0}
    p {font-size:1.4em; font-weight:300; color:black}

    ul.F {list-style-type: disc; margin-top:15px;}
    ul.F li {
        color:#0796c6;        
        font-weight: 600; 
        margin-left: 25px;
        font-size:1.2em;
    }
    ul.F li::first-letter {text-transform: capitalize;}


    ul.G {list-style-type: disc; margin-top:15px;}
    ul.G li {
        color:#0796c6;        
        font-weight: 600; 
        margin-left: 25px;
        font-size:1.2em;
    }
    ul.G li::first-letter {text-transform: capitalize;}

    ol.G li {
        color:#0796c6;        
        font-weight: 600; 
        margin-left: 25px;
        font-size:1.2em;
    }
    ol.G li::first-letter {text-transform: capitalize;}
    ol.G li span {color: #000000;}

    #showcase-learn {
        position: relative;
        /* background-image: url("../img/phone-notifications.jpg"); */
        background-image: url('../img/phone-notifications-700.jpg');
        min-height: 700px; 
      }


      .dflex {line-height:12px;}
      .d-flex span {color:red; font-size:1.2em; font-weight: 400; line-height:10px;}
      .d-flex .fa {font-size:2em;} 
      .d-flex .stars {font-size: 2em; color: red; margin-top:12px; }


    /* smaller font size for longer text sentences */
    h2.display-6 {color: #0796c6; padding-bottom:20px; font-size:1.8em; font-weight:400;}

    footer p{color:#555; font-size:1.2em;}

  }

  /* social media icons in page content at the bottom - learnMore_v5.html */
  .list-inline img {padding-left:0; padding-right:0; width:40%;}

  #showcase-learn .fa {
    background-color: #006699;
    color:#FFF;
    padding: 12px;
    border-radius: 5px;
    font-size: 2em !important; /*size whatever you like*/
  }
  #showcase-learn .d-flex {
    background:#efefef; 
    width:90%; 
    border-radius:5px;
    border:1px solid;
    box-shadow: 2px 2px 2px #222222;
    margin-top:100px;    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }



  /* On screens that are at least 600px wide or greater, set these styles */
@media screen and (min-width: 601px) {

    .logo-default {
        width:100%; 
        margin-left:20px;
    } 
    
    h2.display-4 {font-size: 2.6em; color: #0796c6; padding-bottom:20px;  text-decoration: none;}
    h4.lead {color: #333333; padding-top:10px; }
    p {color:#000000; font-size:1.4em; }

    ul.F {list-style-type: square; margin-top:16px}
    
    /*
        ul li.features {color:#0796c6; font-weight: 600; margin-left: 25px; }
    */

    ul.F li {
        color:#0796c6;        
        font-weight: 600; 
        margin-left: 25px;
        list-style-type: disc;
        font-size:1.2em;
    }
    ul.F li::first-letter {text-transform: capitalize;}

    ul.G {list-style-type: disc; margin-top:15px;}
    ul.G li {
        color:#0796c6;        
        font-weight: 400; 
        margin-left: 25px;
        font-size:1.1em;
    }
    ul.G li::first-letter {text-transform: capitalize;}    

    /* smaller font size for longer text sentences */
    h2.display-6 {color: #0796c6; padding-bottom:20px; font-size:1.8em; font-weight:300;}

   
     
    /* learnMore v5 notification in Hero image */
    #showcase-learn .fa {
      background-color: #006699;
      color:#FFF;
      padding: 12px;
      border-radius: 5px;
      font-size: 3em !important; /*size whatever you like*/
      vertical-align: middle;
      padding-top:20px;
    } 

    footer p.right{color:#555; font-size:1.2em;}
    footer p{color:#555; font-size:1em;}
  }