/*
HEX COLOURS
#000000 - Black
#999999 - White
#e1b74e - Monday Cavers Gold
#116ed5 - GTS blue
#ff0000 - Red
#00ff00 - Green
#0000ff - Blue

CLASS SELECTORS
HTML: <div class="strip">
CSS: div.strip{
  background:#000000;
  color:#fff;
}
########################################################################################################*/
* {
  margin: 0;
  padding: 0;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
  }

/* START OF HEADER BAR  START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR START OF HEADER BAR */ 
.header {
  background-color: black;
  position: fixed;
  width: 100%;
  z-index: 5;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #000;
 }

.header li a {
  display: block;
  /*padding: 40px 10px 20px 10px;*/
  padding: 10px 10px 20px 10px;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #e1b74e;
}

header .highlight, header .current a{
  color:#e1b74e;
  font-weight:bold;
  font-size: 16px;
}

#logo {
  display: block;
  float: left;
  padding: 15px 20px;
  
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  float: right;
  /*padding: 28px 20px;*/
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .nav-icon {
  background: #e1b74e;
  display: block;
  height: 3px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 30px;
}

.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
  background: #e1b74e;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .nav-icon:before {
  top: 8px;
}

.header .menu-icon .nav-icon:after {
  top: -8px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 450px;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}

/* 48em = 768px @ 16pt font */

/*@media (min-width: 48em) { */

@media (min-width: 60em) {
  .header li {
    float: left;
  }
  .header li a {
    /*padding: 20px 20px;*/
    padding: 10px 20px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* END OF HEADER BAR */ 
/* START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT START OF MAIN CONTENT */ 

#divider{
  height: 30px;
  width: 100%;
  background-color: #e1b74e;
  color: black;
      }

  #divider p{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 5px 0px 0px 0px;
    letter-spacing: 2px;
      }

  #divider h1{
    font-size: 25px;
  }


  #divider-index{
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    letter-spacing: 5px;
    padding: 10px 0px 0px 0px;
      }


      #text-panel{
        border-style: solid;
        border-width: 1px;
        border-color: #e1b74e;
        border-radius: 20px;
        margin: 25px 20px 20px 20px;
        padding: 15px 25px 15px 25px;
          }

          
      #text-panel p{
        font-size: 18px;
        text-align: left;
        line-height: 1.5;

          }

          #text-panel h1{
            font-size: 20px;
            text-align: centre;
              }


#main {
  width: 100%;
  color: white;
  text-align: center;
  padding: 100px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

}

 #pages-frame {
  margin: 40px 40px 40px 40px;
  width: 250px;
  border-style: solid;
  border-width: 1px;
  border-color: #e1b74e;
  border-radius: 20px;
  }

  #pages-frame p{
    text-align: center;
    padding: 5px 5px 5px 5px;
    }

    #pages-frame h6{
      text-align: center;
      font-size: 14px;
      padding: 5px 5px 5px 5px;
      }

    #pages-frame img {
    width: 250px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

  }

    a{
      color: red;
      text-decoration: none;
  }

  /* START OF TRIPS  START OF TRIPS  START OF TRIPS  START OF TRIPS  START OF TRIPS  START OF TRIPS  START OF TRIPS  START OF TRIPS   */ 

  #trip-frame-lang{

    width: 90%;
    margin: 20px;
    padding: 20px 20px 10px 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #e1b74e;
    border-radius: 20px;
    
    justify-content: center;
    flex-wrap: wrap;
  }

  
  #trip-frame-lang h1{
    font-size: 20px;
  }

  #trip-frame-lang p{
    font-size: 18px;
  }



  #trip-frame{

    width: auto;
    margin: 6px;
    padding: 10px 20px 10px 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #e1b74e;
    border-radius: 20px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
  }

   #trip-details-block{
    /*background-color: blue;  ##################################################################### */
   padding: 10px 50px 10px 20px;
   width: 300px;


  }
  #trip-details-block ul{
    list-style-type: none;
    text-align: left;
  }

   #trip-name{
   font-size: 24px;
  }

   #trip-notes{
  color: #e1b74e;
  font-style: italic;
  }
/*##################################### */
   #trip-equip-block{
     /*background-color: brown; ##################################################################### */
     width: 300px;
    padding: 10px 20px 10px 20px;
    text-align: left;
    
   }

   #trip-equip li{
    list-style-type: square;
    margin: 3px 0px 0px 20px;
    text-align: left;
   }
   /*##################################### */
   #trip-links-block{
   /*background-color: cyan; ##################################################################### */
   width: 300px;
    padding: 10px 20px 10px 20px;
    text-align: left;
   }
   
   #trip-links li{
    list-style-type: none;
    text-align: left;
    padding: 5px;
   }

  #trip-thumb-block{
  /*background-color: darkorange;  ##################################################################### */
    width: 250px;
    display: flex;
    justify-content: center;

    padding: 10px 0px 10px 20px;
  }

  #trip-thumb img{
    width: 150px; 
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: #e1b74e;
 }

 /*
 iframe {
  margin-top: 10px;
width: 1500px;
height: 700px;
  } 
*/

#gts-topo{
  width: 95%;

  position: relative;
}
#gts-topo img {
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;

  border-style: solid;
  border-width: 2px;
  color: white;
}

#bookmarks{
  border-style: solid;
  border-width: 1px;
  border-color: #e1b74e;
  border-radius: 20px;
  margin: 25px 20px 20px 20px;
  padding: 15px 25px 15px 25px;
    }

    
#bookmarks p{
  font-size: 16px;
  text-align: left;
  line-height: 1.5;

    }

  /* END OF TRIPS  END OF TRIPS END OF TRIPS END OF TRIPS END OF TRIPS END OF TRIPS END OF TRIPS END OF TRIPS END OF TRIPS    */

  /* START OF TOPOS */
#box-topo {
  margin: 2px;
  border: 10px;
  width: 140px;
  text-align: center;
  padding: 20px;
  color: #fff;

  }

  #box-topo img {
    border-style: solid;
  border-width: 1px;
  border-color: white;
  }

  
  #box-topo h6 {
    font-size: 12px;
  }

 #topo-pages{
    text-align: center;
   }
/* END OF TOPOS */



 #step-frame{
  width: 350px;
  margin: 10px 40px 10px 40px;
  border-style: solid;
  border-width: 1px;
  border-color: #e1b74e;
  border-radius: 20px;
  text-align: center;
 }

 #step-frame img{
  width: 350px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
 }

#step-frame p{
  color: white;
  padding: 10px;
     }

#step-frame a{
      text-decoration: none;
      color: red;
    }

    span{
      font-size: 14px;
  }
  /* START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG START OF BLOG */ 

  #blog-year-index{
    color: white;
    width: 100%;
    padding: 0px 0px 0px 0px;
  }

  #blog-year-index li{
    display: inline;
    padding: 0px 20px 0px 20px;
  }

  #current{
    color:#e1b74e;
    font-size: 30px;
    letter-spacing: 2px;
  }

  #other-year{
    color:red;
    font-size: 15px;

  }

  #blank{
    color:black;
    font-size: 15px;
  }


  #blog-frame{
    background-color: white;
    color: black;
    width: 450px;
    margin: 25px;
    border-style: solid;
    border-radius: 20px;
    text-align: left;
    font-size: 18px;
    padding: 10px 10px 10px 10px;
   }



   #blog-header{
    width: 100%;
    display:flex;
   }

   #blog-date{
    width: 50%;
    font-size: 30px;
    text-align: center;
    align-self: center;
       }

  #blog-date h2{
    font-size: 20px;
       }

       #blog-date h3{
        font-size: 12px;
        padding: 30px 0px 0px 0px;
           }

   #blog-image {
    padding: 10px 0px 10px 0px;
    width: 50%;
    

      }
  

   #blog-image img{
    width: 200px;
    height: 200px;
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    border-color: red;

       }

    /* END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG END OF BLOG */ 
    /* START OF FOTOS START OF FOTOS START OF FOTOS START OF FOTOS START OF FOTOS START OF FOTOS START OF FOTOS START OF FOTOS  */ 
    #foto {

      margin: 10px;
      border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    border-color: #e1b74e;
    }

    #foto img{
    border-radius: 15px;
    width: 100%;
    }

    #foto p{
    text-align: right;
    font-size: 12px;
    padding: 0 10px 5px 0;
      }


    /* END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS END OF FOTOS   */ 

    footer {
      background-color: black;
      color: #e1b74e;
      width: 100%;
      text-align: center;
      font-size: 12px;
      padding: 10px 0 10px 0;
  } 

  .anchor {
    position:relative;
    top:-120px; /* or whatever value you need */
}




 
  /* START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES START OF MEDIA QUERIES */ 

   /*@media(max-width: 768px){*/ 

    @media(max-width: 768px){


        /*#logo img{
        max-width: 100px;
              }*/
    
              #logo img{ 
                  display: block;
                  width: 100%;
                  max-width: 250px; /* change this to whatever you want the 'standard' size to be */
                  height: auto;
                }
             
    
    
          #divider-index{
            height: 20px;
            font-size: 12px;
            letter-spacing: 2px;
            padding: 0px 0px 0px 0px;
          }
    
    
          #text-panel{

            margin: 10px;
                      }
    
              
          #text-panel p{
            font-size: 15px;
            line-height: 1.2;
              }

              
          #text-panel h1{
            font-size: 16px;
            text-align: centre;
              }
    
              
    #divider{
      height: 25px;
        }
    
        #divider p{
          font-size: 12px;
          letter-spacing: 1px;
              }


    
              span{
                font-size: 8px;
            }
    
            .header li a {
              padding: 20px 10px 20px 25px;
              text-decoration: none;
              color: white;
              font-size: 12px;
            }
    
            #pages-frame {
              margin: 20px 40px 10px 40px;

              }
    
              #divider-index p{
                font-size: 12px;
                padding: 0px 0px 0px 0px;
                letter-spacing: 2px;
                        }
    
     #trip-frame-lang h1{
        font-size: 16px;
             }
                      
      #trip-frame-lang p{
       font-size: 15px;
            }


                        
      #trip-name{
        font-size: 22px;
      }
    

      #trip-frame{
        width: 80%;
    }
    
    #trip-details-block{
      /*background-color: blue;  ##################################################################### */
     padding: 10px 10px 10px 10px;
    }
    
    
    
    
      #blog-frame p{
        font-size: 15px;
       }
    
      #blog-image img{
        width: 150px;
        height: 150px;
    
    
           }
    
    
     #blog-date{
        font-size: 20px;
           }
    
      #blog-date h2{
        font-size: 16px;
           }
    
      #blog-date h3{
            font-size: 12px;
            padding: 30px 0px 0px 0px;
               }
    
      footer {
          font-size: 14px;
    
            }  
    
    
    
    }