/* ========================================================================== */
/*                                                                            */
/* ========================================================================== */

   .topbanner 
     {
     display: block;
     margin-left: auto;
     margin-right: auto;
     }

   
   .topsticky 
    {
     position: sticky;
    }
     
/* ========================================================================== */
/*                                                                            */
/* ========================================================================== */

/* ========================================================================== */
/*   setup different displays based on width                                 */
/* ========================================================================== */	

@media screen and (min-width: 1400px) {
    .widthdisplay .width_one{display:block;}
    .widthdisplay .width_two{display:none;}
    .widthdisplay .width_three{display:none;}
}
@media screen and (max-width: 1400px) {
    .widthdisplay .width_one{display:block;}
    .widthdisplay .width_two{display:none;}
    .widthdisplay .width_three{display:none;}
}

@media screen and (max-width: 1100px) {
    .widthdisplay .width_one{display:none;}
    .widthdisplay .width_two{display:block;}
    .widthdisplay .width_three{display:none;}
}

@media screen and (max-width: 642px) {
    .widthdisplay .width_one{display:none;}
    .widthdisplay .width_two{display:none;}
    .widthdisplay .width_three{display:block;}
}

/* ========================================================================== */
/*  under contruction figure/image                                            */
/* ========================================================================== */
   .underimage {
	margin: 0 auto 0 auto;
    max-width: 190px;
	padding: 5px 5px 5px 5px;
	}

/* ========================================================================== */
/*                                                                            */
/* ========================================================================== */
   .sidebar {
	float: right;
	max-width: 350px;
	border-top: thick black solid;
	border-bottom: thick black solid;
	line-height: 125%;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 10px;
	margin-bottom: 10px;
    background-color: #FAFFB8;
	}

/* ========================================================================== */
/*                 background-for the items for sale                          */
/* ========================================================================== */
   .itemsforsale {
     padding-top 20px; 
     background-color: #7C7C7C;
     color: green;
     font-family: "Palatino Linotype", Garamond, Bookman, Arial;
     font-size: calc(.9em + .9vw);
       }    
   .itemsforsalepics {
     border: thin solid black;
     padding-top: 10px;
     background-color: #DCDCDC;
        }
   .itemsforsaleresponsive {
     max-width: 100%;
     height: auto;
        }        
        

/* ========================================================================== */
/*     This is for a tree photo in the backgroung                             */
/* ========================================================================== */
   .treebackground {
     background-image: url('images/ArthurRockHorsetooth.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     max-width: 100%;
     height: auto;
       }
    
/* ========================================================================== */
/*     Horsetooth Reservoir March banner 01  backgroung                       */
/* ========================================================================== */
   .horse01background {
     background-image: url('images/Horsetoothbanner01_1400.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     max-width: 100%;
     height: auto;
       }

  .horseback01 {
      background-image: url('images/Horsetoothbanner01_2240.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      max-width: 100%;
      height: auto;
    }
     @media screen and (min-width: 1400px) {
     .horseback01 {
       background-image: url('images/Horsetoothbanner01_1400.jpg');
       }
      }
     @media screen and (max-width: 1120px) {
     .horseback01 {
      background-image: url('images/Horsetoothbanner01_1120.jpg');
      }
     }
    @media screen and (max-width: 900px) {
     .horseback01 {
      background-image: url('images/Horsetoothbanner01_900.jpg');
      }
     }
    @media screen and (max-width: 560px) {
     .horseback01 {
      background-image: url('images/Horsetoothbanner01_560.jpg');
      }
     }

  .horseback02 {
      background-image: url('images/Horsetoothbanner02_2240.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      max-width: 100%;
      height: auto;
    }
@media screen and (min-width: 1400px) {
  .horseback02 {background-image: url('images/Horsetoothbanner02_1400.jpg');}}
@media screen and (max-width: 1120px) {
  .horseback02 {background-image: url('images/Horsetoothbanner02_1120.jpg');}}
@media screen and (max-width: 900px) {
  .horseback02 {background-image: url('images/Horsetoothbanner02_900.jpg');}}
@media screen and (max-width: 560px) {
  .horseback02 {background-image: url('images/Horsetoothbanner02_560.jpg');}}
      
/* ========================================================================== */
/* ====== for embedding utube videos========================================= */
/* ========================================================================== */
  .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; 
	height: 0; 
	overflow: hidden;
	}

  .video-container iframe,
  .video-container object,
  .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}


/* ========================================================================== */
/*      Footer                                                                */
/* ========================================================================== */
   #footnav { 
        border:1px; 
        background-color:#F5F5F5; 
        color:white; 
        padding:5px;
        text-align:center; 
        font-size: calc(.85em + .85vw);
        } 
    #footnav a {
        text-decoration: none;
        }
    #footnav a:hover {
	text-decoration: underline;
        }
        
       
    .footnavsocial {
        max-width: 100%;
        height: auto;
        background-color:#2ED2FF;
        padding-bottom: 5px;
        padding-top: 5px;
        }
    .footnavsocial  a 
        {
        margin-left: 5px; 
        margin-right: 5px;
        background-color:#2ED2FF;
        }