body, html {
    height: 100%;
    /*background-color:#e7e6e6;*/
    font-family: helvetica,calibri,arial,sans-serif;
    background-color: #f2f2f2;
}

.headernavcontainer
{
    background-color:white; 
    padding:20px;
    border-bottom: 1px #ff0001 solid    
}

.promo1 {
    width:100%;
}

.col-sm{
    margin: 5px
}

.button {
    background-color:#ef2a22;
    border: 2px #ef2a22 solid;
    color: white;
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    
}

.related 
{padding: 0em 3em 0em 3em}


.secbutton {
    background-color:#f9f8f7;
    border: 2px #c3c4c5 solid;
    color: #ef2a22;
    padding: 5px 10px 5px 10px;
    margin: 0px 10px 0 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    
}



.button:hover {
    color: white;
}

.secbutton:hover {
    color: #ef2a22;
}

/* The hero image */
.hero-image {    
    background: linear-gradient(
                     rgba(20,20,20, .5), 
                     rgba(20,20,20, .5)),
                     url("shareview-tablet-2.png");
    z-index: 2;
    /* Set a specific height */
    width: auto;
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: left;
    position: absolute;
    color: white;
    top: 40%;
    left: 10%;
}


.centerText
{
    
    text-align: center
}

.leftText
{
    
    text-align: left
}


.container
{
    padding: 5px 0 5px 0
}

.containerRed
{
    background-color:#BFC9D8;
    width:100%;
    color:black
}

.containerGrey
{
    background-color:#e5e6e6;
    width:100%;
    padding:2%;
}
.containerLightGrey
{
    background-color:#f2f2f2;
    width:100%;
    padding:2%;
}
h2
{font-weight: bold;
 font-size:2.2em;
}

.redUnderline
{
    
    border-bottom: 2px solid #ef2a22;
}

h3
{font-weight: bold; 
font-size:1.5em;

}

.h3line
{border-bottom: 2px solid #ef2a22;line-height: 40px}

.embed-responsive-16by9 {
    display: block;
    width: 100%;
    height:100%;
    z-index: 2;
    border-radius: 6px;
    overflow: hidden;
    margin: 2% 0 0 8%;
    
}


.containerFooter
{color:white !important;
background-color: #5A555A;
width:100%
}

.containerFooter a
{
    color:white
}

ol {

  counter-reset: item;
}

ol > li {

  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  padding-right: 0.5em;
  font-weight: bold;
  content: counter(item) ".";
}tent: counter(item) ".";
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}


@media screen and (min-width: 800px) {
.indent
{margin-left:5%;

}
}

@media screen and (min-width: 1000px) {

.indent

    {margin-left:15%;
    max-width: 600px;
    }
    
.floatleft
    {
        float:left;
    }
    
.floatright
    {
        float:right;
    }

}

@media screen and (min-width: 1030px) {
.indent
{    margin-left:23%;
}
}

@media screen and (max-width: 1040px) {
            
        .hero-text{
            top: 40%;
            left: 10%;
            padding: 5px;
        }
        }

        
        @media screen and (max-width: 775px) {
            
        .hero-text{
            top: 35%;
            left: 3%;
            padding: 5px;
        }
        }
    
        @media screen and (max-width: 660px) {
            
        .hero-text{
            top: 10%;
            left: 5%;
            padding: 5px;
        }
      .button
            {
            width:95%;
            
            }
            
         .secbutton
            {
            width:95%;
                
            }
            
                      .headernav
            {
                background-color:white;
                margin: 0 auto;
                width: 150px;
                padding: 10px;
                text-align: center  
                
            }
               .headernavcontainer
            {
                padding:0
                
            }
            
                    .promo1 h2 
            {
                text-align: center
            }
            
                      .promo1 h3      {
                text-align: center
            }
            
            .promo1 li
            {
                text-align: left
            }
            
        }
        
        @media screen and (max-width: 380px) {
         
        .hero-image {
            height:65%
        }   
            
        .promo1 h2
            {
                text-align: center
            }
            
                            .promo1 h3      {
                text-align: center
            }
            
              .promo1 li
            {
                text-align: left
            }
            
        .hero-text{
            top: 10%;
            left: 2%;
            padding: 5px;
        }
            
        .button
            {
            width:95%;
            
            }
            
         .secbutton
            {
            width:95%;
                
            }
                .headernav
            {
                background-color:white;
                margin: 0 auto;
                width: 150px;
                padding: 10px;
                text-align: center  
                
            }
               .headernavcontainer
            {
                padding:0
                
            }
        }
        
        @media screen and (max-width: 371px) {
            
        .hero-image {
            height:70%
        }
            
        .hero-text{
            top: 10%;
            left: 5%;
            padding: 5px;
        }
            
              .button
            {
            width:95%;
            
            }
            
         .secbutton
            {
            width:95%;
                
            }
            
                 .headernav
            {
                background-color:white;
                margin: 0 auto;
                width: 150px;
                padding: 10px;
                text-align: center  
                
            }
            
            .headernavcontainer
            {
                padding:0
                
            }
             .promo1 h2 
            {
                text-align: center
            }
            
            .promo1 h3      {
                text-align: center
            }
            
              .promo1 li
            {
                text-align: left
            }
        }