/* */
/* */
/* */
/* */
/* STYLE SHEET FOR index.html */
/* whh 2021.01.08 */
/* whh 2021.01.28  safari hides overflow:hidden completely */
/* whh 2021.03.02  LinkOne class added */
/* whh 2022.06.22  consolidated font-family and h1,h2,h3 ...  */
/* whh 2022.07.05  fixed hamburgermenu and button4  */
/* whh 2023.03.21  phone and email icon added */
/* whh 2023.03.21  .h tags added added */
/* whh 2024.01.09  change button styling */
/* whh 2024.01.24  update h1 */
/* whh 2024.01.24  moved all h, a, p, fontsizes to css/skeleton.css */
/* whh 2024.03.07  moved all table css to index-table.css and added link to the file here */
/* whh 2024.03.07  moved all buttons, mediaboxes, popup CSS to separate files */


/* links to other css files*/ 
/* links to other css files*/ 

@import "ohi-tables.css";
@import "ohi-buttons.css";
@import "ohi-mediaboxes.css";
@import "modal-popup.css";



@font-face {
  font-family:'Glyphicons Halflings';
  src: url('../assets/fonts/glyphicons-halflings-regular.woff');
  src: url('../assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/glyphicons-halflings-regular.ttf') format('truetype');
  }

@font-face {
  font-family:'fontawesome';
  src: url('../assets/fonts/fontawesome-webfont.woff');
  src: url('../assets/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/fontawesome-webfont.ttf') format('truetype');
  }

      .fa {
        font-family:'fontawesome';
        color: black;
        background-color: transparent;
      }


  body {
    background-color: white !important ;
    color: black ;
    font-family: 'Helvetica' ;
    font-weight: normal;
    line-height: normal;
  }


  body {
    margin-left: 0% !important ;
    margin-right: 0% !important ;
  }

/* text color for link in the page text */
/* text color for link in the page text */


   

    img#desktop {
      display:block !important;
    }

    img#tablet {
      display:none !important;
    }

    img#phone {
      display:none !important;
    }



      .responsive-image {
        position: relative;
        width: 100%!important;
        background-size: 100% 100%!important;
        z-index: 9;
      }

     .phone-icon {
        position:fixed;
        right:35%;
        float:right;
        margin-top:0% !important;
        width: 10vw  !important;
        min-width: 130px !important;

      }

      .email-icon {
        position:fixed;
        right:19%;
        float:right;
        margin-top:0% !important;
        width: 10vw  !important;
        min-width: 130px !important;
      }

      .logoham {
        position:fixed;
        right:3%;
        background-color: rgba(0, 0, 0, 0.0) !important;
        float:right;
        margin-top:-2px!important;
        width: 10vw  !important;
        min-width: 130px !important;

      }


      .logoham:hover {
      background-color: rgba(0, 0, 0, 0.4) !important;

      }



      .phone-icon:hover {
      color: #000000 !important;
      fill: #000000  !important;
      filter: invert(0.0) sepia(1) hue-rotate(20deg) saturate(1) brightness(1)!important;
      text-shadow: 0px 2px 3px #666633 !important;

      }


        .phone-number {
          padding-left: 10px;
          padding-right: 10px;
          font-size: 24px;
          color: white;
          position: fixed;
          right: 28%;
          bottom:75%;
          display: block;
          z-index: 999;
          border-radius: 2px;
          background-color: rgba(0,0,0,0.0);

        }

      .bg {
          display: none;
      }




      .email-icon:hover {
      color: #000000 !important;
      fill: #000000 !important;
      filter: invert(0.0) sepia(1) hue-rotate(20deg) saturate(1) brightness(1)!important;
      text-shadow: 0px 2px 3px #666633 !important;

      }

/* Hover over icon texty popup formatting */
/* Hover over icon texty popup formatting */

        a[title]:hover::after {
          content: attr(title) !important;
          position: fixed !important;
          top:16% !important;
          font-size: 16px !important;
          box-shadow: 0px 0px 0px !important;
          border: 3px !important;
          border-style: solid !important;
          padding:1% !important;
          color:beige;
          background-color: rgba(0, 0, 0, 1) !important;
        }




/*  screen sizes responsive for header Icons */
/*  screen sizes responsive for header Icons */
/*  screen sizes responsive for header Icons */

      @media only screen and (max-width: 1500px) {

                .phone-icon {
                  position:fixed;
                  right:35%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 130px !important;

                }

                .email-icon {
                  position:fixed;
                  right:19%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 130px !important;
                }

                .logoham {
                  position:fixed;
                  right:3%;
                  float:right;
                  margin-top:-2px!important;
                  width: 10vw  !important;
                  min-width: 130px !important;

                }


      }


      @media only screen and (max-width: 1150px) {


                .phone-icon {
                  position:fixed;
                  right:36%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 120px !important;

                }

                .email-icon {
                  position:fixed;
                  right:19%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 120px !important;
                }

                .logoham {
                  position:fixed;
                  right:2%;
                  float:right;
                  margin-top:-2px !important;
                  width: 8vw  !important;
                  min-width: 120px !important;


                }


      }


      @media only screen and (max-width: 960px) {


                body {
                  margin-left: 0% !important ;
                  margin-right: 0% !important ;
                }

                .phone-icon {
                  position:fixed;
                  right:37%;
                  float:right;
                  margin-top:-2px  !important;
                  width: 10vw  !important;
                  min-width: 120px !important;

                }

                .email-icon {
                  position:fixed;
                  right:20%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 120px !important;
                }

                .logoham {
                  position:fixed;
                  right:2%;
                  float:right;
                  margin-top:-2px !important;
                  width: 10vw  !important;
                  min-width: 120px !important;


                }



      }



      @media only screen and (max-width: 760px) {

                body {
                  margin-left: 0% !important ;
                  margin-right: 0% !important ;
                }


                .phone-icon {
                  position:fixed;
                  right:44%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 110px !important;

                }

                .email-icon {
                  position:fixed;
                  right:23%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 110px !important;
                }

                .logoham {
                  position:fixed;
                  right:2%;
                  float:right;
                  margin-top:-3px  !important;
                  width: 10vw  !important;
                  min-width: 110px !important;

                }



      }


      @media only screen and (max-width: 580px) {


                body {
                  margin-left: 0% !important ;
                  margin-right: 0% !important ;
                }

                .phone-icon {
                  position:fixed;
                  right:45%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 90px !important;

                }

                .email-icon {
                  position:fixed;
                  right:23%;
                  float:right;
                  margin-top:0% !important;
                  width: 10vw  !important;
                  min-width: 90px !important;
                }

                .logoham {
                  position:fixed;
                  right:1%;
                  float:right;
                  margin-top:-4px  !important;
                  width: 10vw  !important;
                  min-width: 90px !important;


                }


      }



      @media only screen and (max-width: 480px) {

                body {
                  margin-left: 0% !important ;
                  margin-right: 0% !important ;
                }

                .phone-icon {
                  position:fixed;
                  right:45%;
                  float:right;
                  margin-top:2% !important;
                  width: 10vw  !important;
                  min-width: 70px !important;

                }

                .email-icon {
                  position:fixed;
                  right:23%;
                  float:right;
                  margin-top:2% !important;
                  width: 10vw  !important;
                  min-width: 70px !important;
                }

                .logoham {
                  position:fixed;
                  right:1%;
                  float:right;
                  margin-top: 6px !important;
                  width: 10vw  !important;
                  min-width: 70px !important;

                }

      }

/*  END screen sizes responsive for header Icons */
/*  END screen sizes responsive for header Icons */
/*  END screen sizes responsive for header Icons */





/*  Media queries for adjusting to different screen sizes  */
@media only screen and (max-width: 360px) {

        body {
          margin-left: 0% !important ;
          margin-right: 0% !important ;
        }

        .phone-icon {
          position:fixed;
          right:33%;
          float:right;
          margin-top:5% !important;
          width: 10vw  !important;
          min-width: 65px !important;

        }

        .email-icon {
          position:fixed;
          right:10%;
          float:right;
          margin-top:5% !important;
          width: 10vw  !important;
          min-width: 65px !important;
        }

       .logoham {
          position:fixed;
          right:10%;
          float:right;
          margin-top:25% !important;
          width: 7vw  !important;
          min-width: 60px !important;
          min-height: 60px !important;
          box-shadow: 5px #FFFFFF !important;
        }

}


@media only screen and (max-width: 320px) {

        body {
          margin-left: 0% !important ;
          margin-right: 0% !important ;
       }

        .phone-icon {
          position:fixed;
          right:3%;
          float:right;
          margin-top:35% !important;
          width: 10vw  !important;
          min-width: 60px !important;
          background-color: rgba(0,0,0,0.5)  !important;

        }

        .email-icon {
          position:fixed;
          right:3%;
          float:right;
          margin-top:62% !important;
          width: 10vw  !important;
          min-width: 60px !important;
          background-color: rgba(0,0,0,0.5)  !important;                }

       .logoham {
          position:fixed;
          right:3%;
          float:right;
          margin-top:2% !important;
          width: 7vw  !important;
          min-width: 60px !important;
          background-color: rgba(0,0,0,0.0)  !important;
        }

}

@media only screen and (max-width: 200px) {

    body {
  margin-left: 0% !important ;
  margin-right: 0% !important ;
}

        .phone-icon {
          position:fixed;
          right:3%;
          float:right;
          margin-top:36% !important;
          width: 10vw  !important;
          min-width: 50px !important;
          background-color: rgba(0,0,0,0.5)  !important;

        }

        .email-icon {
          position:fixed;
          right:3%;
          float:right;
          margin-top:67% !important;
          width: 10vw  !important;
          min-width: 50px !important;
          background-color: rgba(0,0,0,0.5)  !important;                }

       .logoham {
          position:fixed;
          right:3%;
          float:right;
          margin-top:0% !important;
          width: 7vw  !important;
          min-width: 50px !important;
          background-color: rgba(0,0,0,0.0)  !important;
        }

      }

/*  END of screen sizes responsive for header Icons */
/*  END of screen sizes responsive for header Icons */
/*  END of screen sizes responsive for header Icons */


/*  Media queries for adjusting to different screen sizes  */
     @media only screen and (max-width: 980px) {

       img#desktop {
         display:none !important;
       }
       img#tablet {
         display:block !important;
       }
       img#phone {
         display:none !important;
       }


       .listtext{
        font-size:18px !important;
       }

    }




     @media only screen and (max-width: 580px) {
       .three {
         display:none !important;
       }
       .two {
         display:block;
       }


    }



     @media only screen and (max-width: 480px) {


       img#desktop {
         display:none !important;
       }
       img#tablet {
         display:none !important;
       }
       img#phone {
         display:block !important;
       }

     }


     @media only screen and (max-width: 380px) {


     }





 /* css for scroll up effect */
 /* css for scroll up effect */

     .module {
       min-height: 200px;
       background: white;
       position: relative;

       &:nth-child(even) {
         margin-right: 0;
       }

     }


     .come-in {
       transform: translateY(600px);
       animation: come-in 1.8s ease forwards;
     }
     .come-in:nth-child(odd) {
       animation-duration: 1.6s;
     }
     .already-visible {
       transform: translateY(0);
       animation: none;
     }

     @keyframes come-in {
       to { transform: translateY(0); }
     }


.white {
  background-color: white !important;
}

.black {
  background-color:transparent;
  color: black;
}

.turqoise {
  background-color:transparent;
  color: #666633 !important;
}


.logo1 {
  margin-top:-5% !important;
  width: 10vw  !important;
  min-width: 100px !important;

}


.navphone {
  position:fixed;
  right:24%;
  background-color: transparent !important;
  float:right;
}

.navemail {
  position:fixed;
  padding-top:3px;
  right:15%;
  background-color: transparent !important;
  float:right;

}


.navham {
  position:fixed;
  padding-top:3px;
  right:4%;
  background-color: transparent !important;
  float:right;

}

/* Style the hamburger */
/* Style the hamburger */
.icon {
font-size: 42px ;
  color: #000 !important;
  background-color: transparent!important;
  padding: 0px ;
  margin: 0px ;
}

.icon:hover {
font-size: 48px;
color: #666633 !important;
fill: #666633;
filter: invert(0.0) sepia(1) hue-rotate(20deg) saturate(1) brightness(1);
text-shadow: 0px 2px 3px #666633 !important;

}




/* Hide the links inside the hamburger  (except for logo/home) */
.hamburger #myLinks {
 display: block;

}

/* Style hamburger  links */

.hamburgertext {
position: fixed;
font-size: 20px !important;
margin-top: 55px;

z-index: 10;
background-color:rgba(0,0,0,0.0);
text-shadow: 0px 2px 3px #666633 !important;
}

.hamburgertext:hover {
font-size: 48px;
color: #666633 !important;
text-shadow: 0px 2px 3px #666633 !important;
}


.hamburger {

 position: fixed;
 top:20% !important;
 background-color:rgba(255, 255, 255, 0.0) !important;
 text-shadow: 0px 2px 3px #666633 !important;

 /* top: 50%; */
 /* left: 90%; */
}

.hamburger a {
 color: black;
 padding: 0;
 text-decoration: none;
 font-size: 14;
 display: block;
}

/* Style the hamburger  */
.hamburger a.icon {
 background-color: rgba(102, 102, 51, 1.0)!important;
 color: #fff !important;
 fill: #666633;
 display: block;
 position: fixed;
 /* top: 50%; */
 /* left: 90%; */
}

/* Add a grey background color on mouse-over */
.hamburger a:hover {
 background-color: rgba(102, 102, 51, 1.0)!important;
 fill: #666633;
 color: #666633 !important;
}



/* Style the menu */
.hamburgermenu {
 background-color: #333;
 position: fixed;
 z-index:99999;
 top: 15%;
 left:40%;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.hamburgermenu #myLinks {
 display: none;
}

/* Style navigation menu links */
.hamburgermenu a {
z-index:99999;
 color: white !important;
 text-decoration: none;
 font-size: 18px;
 line-height: 150%;
 padding-left: 14px;
 padding-right: 10px;
 display: block;
}


/* Add a grey background color on mouse-over */
.hamburgermenu a:hover {
 background-color: #ddd;
 color: black;
}


/* Main content startup */

.openstartpage {

  background-color:white!important;
  margin-bottom: 0;
  padding-bottom: 0;
  z-index:5;
}


 .opencontentdiv {
   position:relative;
   margin-bottom: 0%;
   margin-top:70%;
   z-index:10;
   padding-top:0%;"
}

.opencontentdivsub {
  position:relative;
  margin-bottom: 0%;
  margin-top:20%;
  z-index:10;
  padding-top:0%;
}


/* to manage image switching between Desktop and mobile */
/* to manage image switching between Desktop and mobile */
@media screen and (max-width: 320px) {
    .hide { display: none; }
}


.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;
}

  /* it's your call what the break point is */
  @media screen and (max-width: 737px) {
      .show-on-desktop {
        display: none;
  }
}

/* show differnet image depending on desktop ot mobile screen size */
/* show differnet image depending on desktop ot mobile screen size */
.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;
}


  /* it's your call what the break point is */
  @media screen and (max-width: 736px) {
    .show-on-mobile {
      display: block;
  }
}




/* Landing Point video */
/* Landing Point video */

  .landingimage {
  position:fixed;
  height: 100%;
  width: 100%;
  top:2%;
  z-index:-1;
  }

  .landinggiff {
  position:fixed;
  height: 100%;
  width: 100%;
  top:2%;
  z-index:-2;
  }



  .imagesvg {
  margin-top: -15%;
  background-color: transparent;
  }

  .responsive-image {
		position: relative;;
		width: 100%;
		background-size: 100% 100%;
		z-index: 9;
	}


	.logoheading {
		position: relative;
    margin-top: 1%;
    background-color: transparent;
		z-index: 8;
		float: left;
	}

	.logo {
    position: inherit;
		height: 60px;
		width: 60px;
		z-index: 8;
	}


  .explorer {
    position: relative;
    margin-top: 32%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorer2 {
    position: relative;
    margin-top: 30%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 20%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .explorersubdir {
    position: relative;
    margin-top: 2%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .scrollText {
    position: relative;
    margin-top: 32%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .mainimage {
    height: auto;
    width:100%;
  }



  .home {
    font-size: 30px;
    color: transparent !important;
  }

  .padtop {
    margin-top: 10%;
  }

  .showbutton {
    width:200px;
  }


.serviceheading {
  font-size: 90px;
  color: rgba(84, 255, 112, 1.0); /* red #e20202;  green #54ff70; orange #dd4f0d; orange #dd790d: */
  font-style: normal;
  font-weight: bold;

  background-color: transparent;
}


  .myphotos{
    font-size: 120px;
    color: rgba(84, 255, 112, 1.0); /* red #e20202;  green #54ff70; orange #dd4f0d; orange #dd790d: */
    font-style: normal;
    font-weight: bold;

    background-color: transparent;

  }

  .mylinks{
    font-size: 40px;
    color: rgba(84, 255, 112, 1.0); /* red #e20202;  green #54ff70; orange #dd4f0d; orange #dd790d: */
    font-style: normal;
    font-weight: bold;

  }

  .mylinksglyph {
    color:black;
    font-size: 70px;
    text-shadow: 0px 3px 4px #666633;
  }


  .galleryheading {
    font-size: 50px;
    color:rgba(84, 255, 112, 1.0);
    font-style: normal;
    font-weight: bold;

    margin-left: 5%;

  }



/* all hover and link elements behavour defined for images */
/* all hover and link elements behavour defined for images*/

.picture a {
color: rgba(35, 107, 175, 0.8)!important;
background-color: transparent !important;
}

.picture a:link {
  color: #fff;
  font-size: 24px;
}

.picture a:hover {
  color:red !important;
  text-decoration: none;
}

.picture {
  background-color:#fff !important;
}


/* PHOTO GALLERY */
/* PHOTO GALLERY */
.my-gallery {
  background-color: transparent;
  width: 100%;
  float: left;
  margin-left: 5%;
}
.my-gallery img {
  width: 100%;
  height: auto;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}


/* TITLE HEADINGS*/
/* TITLE HEADINGS*/


.headertext{

  font-size: 32px;
  font-weight: bolder;
  color: black;
}

.listtext{

  font-size: 40px !important;
  font-weight: bolder;
  color: black;
  padding: 1%;
}

.listtext a {

  font-size: 40px !important;
  padding: 1%;
}

.linkstext{

  font-size: 45px !important;
  font-weight: bolder;
  color: black;
}


.servicelist{

  font-weight: normal;
  color: black;
  padding: 1%;
}

.headingsize {
  font-size: 16px !important;
}




/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
  .tcolumn {
    width: 100% !important;
  }
}


.headerservice {
  font-size: 20px;
  background-color: transparent;
  color: black;
  position:relative;
  overflow: visible;
}


/* The footer */
/* The footer */



    .footer-image {

      position:relative;
      z-index: 25 !important;
      background-color: #e8aa54;
      height: 100px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }



/* BUTTONS HOVER SHADOW AND LAUNCH - ABOUT PHONE EMAIL */
/* BUTTONS HOVER SHADOW AND LAUNCH - ABOUT PHONE EMAIL */
/* BUTTONS HOVER SHADOW AND LAUNCH - ABOUT PHONE EMAIL */

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;

  color: rgba(108, 79, 61, 1.0)!important ;
  font-size: 32px ;
  line-height: normal;
  padding-left: 4%;
  background-color: transparent;
}

ul.img-list li {
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
}

span.text-content {
background: rgba(0,0,0,0.5);
color: black;
font-weight: bolder;
cursor: pointer;
display: table;
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 50px;
}

span.text-content span {
display: table-cell;
text-align: center;
vertical-align: bottom;
}


ul.img-list li:hover span.text-content {
opacity: 1;

}

span.text-content {
background: rgba(0,0,0,0.5);
margin-top: -2%;
margin-left: -5%;
height: 70px;
width: 220px;
margin-top: 0%;
color: black;
cursor: pointer;
display: table;
left: -2%;
position: absolute;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}



.panel-body .publish {
color: #000 ;
font-size:12px ;
}

.cd-panel-content h1{
color: #000;
font-size: 24px;
}

.upreload {
  right:8%;
}

.upreloadham {
  right:8%;
  padding-top:0;
  padding-bottom:0;
}



    html {
      scroll-behavior: smooth;
    }

/* margin top right bottom left */

    .wrapper {
      margin: 0% 0% 0% 0%;
    }

    .wrappertop {
      position: relative;
      margin: 1% 5% 0 5%;
        z-index: 25;
      }




/* to ensure gif keps playing */
  img{transform: none; -webkit-transform:none;}



		/* Push the search field to the right */
		#search{
  			float: right;
  		}


.textcolour {
color:#666633 !important;
margin-left: 50px;
margin-right: 50px;

}

.popglyphicon {
  font-size: 50px;
  color:black;
  background-color: transparent;
}

  .popglyphicon a:link {

            color:#666633 !important;
  }

  .popglyphicon a:visited {

            color:#666633 !important;
  }

  .popglyphicon a:hover {

      color:#666633 !important;
  }

  .popglyphicon a:active {

            color:#666633 !important;
  }

  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 60px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }

    .navglyphs a:link {
        text-decoration: none !important;
    }

    .navglyphs a:visited {
        text-decoration: none !important;
    }

    .navglyphs a:hover {
        text-decoration: underline !important;
    }

    .navglyphs a:active {
        text-decoration: underline !important;
    }


    .leftphoneicon {
      margin-left:35%!important;
    }




  


	iframe {
		height: 100%!important;
		width: 100%!important;
		border:none!important;
    margin: 0 !important;
    overflow:hidden;
	}

  



/*  Media queries for adjusting to different screen sizes  */
/*  Media queries for adjusting to different screen sizes  */
/*  Media queries for adjusting to different screen sizes  */
/*  Media queries for adjusting to different screen sizes  */


/*  Media queries for adjusting to different screen sizes  */
@media only screen and (max-width: 1680px) {

  .explorer {
    position: relative;
    margin-top: 30%!important;

  }

  .explorer2 {
    position: relative;
    margin-top: 38%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 25%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .explorersubdir {
    position: relative;
    margin-top: 3%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .landingimage {
  position:fixed;
  height: 100%;
  width: 100%;
  top:1%;
  margin-left: 0;
  margin-right: 0;
  z-index:-1;
  }

  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 60px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }


}

@media only screen and (max-width: 1280px) {

  .serviceheading {
    font-size: 70px;
  }

  .myphotos{
    font-size: 140px;
  }

  .mylinks{
    font-size: 40px;
  }

  .mylinksglyph {
    font-size: 70px;
  }

  .headersmall a {
  color: rgba(255, 255, 255, 1.0)!important;
  background-color: rgba(0,0,0,0.4) !important;
  font-size: 32px;
  line-height: 28px;
  }

  .headersmall a:link {
    color: #fff;
    font-size: 32px;
    line-height: 28px !important;
  }

  .listtext {
      font-size: 35px !important;
    }

  .listtext a {
    font-size: 35px !important;

  }


    span.text-content {
    margin-top: -2%;
    margin-left: -5%;
    height: 70px;
    width: 220px;
    }


    .landingimage {
    position:fixed;
    height: 90%;
    width: 90%;
    top:6%;
    margin-left: 0;
    margin-right: 0;
    z-index:-1;
    }

   .landinggiff {
    position:fixed;
    height: 90%;
    width: 90%;
    top:6%;
    margin-left: 0;
    margin-right: 0;
    z-index:-2;
    }

  .explorer {
    position: relative;
    margin-top: 40%!important;
  }

  .explorer2 {
    position: relative;
    margin-top: 50%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 40%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorersubdir {
    position: relative;
    margin-top: 4%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 60px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }


}

/*  Media queries for adjusting to different screen sizes  */
/* for a portrait screen */
/* for a portrait screen */
@media screen and (max-height: 736px) {

  .mylinks{
    font-size: 18px !important;
  }

  .mylinksglyph {
    font-size: 60px;
  }
}



/*  Media queries for adjusting to different screen sizes  */
@media only screen and (max-width: 980px) {



  /* Landing Point video */
  /* Landing Point video */

    .landingimage {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-1;
    }

    .landinggiff {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-2;
    }


  .landingfooter {
    position: fixed;
    margin-top:55%;
  }

  .serviceheading {
    font-size: 50px;
  }

  .myphotos{
    font-size: 100px;
  }

  .mylinks{
    font-size: 30px;
  }

  .mylinksglyph {
    font-size: 60px;
  }


  .panel-title {
    color:#97ad91 ;
    font-size: 24px !important;
  }

  .headersmall a {
  color: rgba(255, 255, 255, 1.0)!important;
  background-color: rgba(0,0,0,0.4) !important;
  font-size: 24px;
  line-height: 24px;
  }

  .headersmall a:link {
    color: #fff;
    font-size: 24px;
    line-height: 24px !important;
  }

  span.text-content {
  margin-top: -2%;
  margin-left: -5%;
  height: 70px;
  width: 210px;
  }


  .upreload {
    right:10%;
  }

  .upreloadham {
    right:10%;
    padding-top:1%;
    padding-bottom:6%;
  }


  .explorer {
    position: relative;
    margin-top: 50%!important;

  }

  .explorer2 {
    position: relative;
    margin-top: 60%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 44%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorersubdir {
    position: relative;
    margin-top: 5%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .listtext{
    font-size: 30px !important;
  }
  .listtext a {
    font-size: 30px !important;
  }



  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 55px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }


  /* Style the  menu */
  .hamburgermenu {
   left:30%;
   top:15%;
  }

  .hamburgermenu a {
   font-size: 18px !important;
   line-height: 180% !important;
  }



}


@media only screen and (max-width: 768px) {

  .popglyphicon {
    font-size: 30px;

  }

}


/*  Media queries for adjusting to different screen sizes  */
@media only screen and (max-width: 736px) {



  .explorer {
    position: relative;
    margin-top: 60%!important;

  }

  .explorer2 {
    position: relative;
    margin-top: 120%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 60%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .explorersubdir {
    position: relative;
    margin-top: 6%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .giffy {
  margin-left: 25%!important;
  }

  .giffymask {
  margin-left: 25%!important;
  }


  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 45px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }

  .leftphoneicon {
    margin-left:19%!important;
  }

}

/*  Media queries for adjusting to different screen sizes  */
@media only screen and (max-width: 600px) {
  /* Landing Point video */
  /* Landing Point video */

    .landingimage {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-1;
    }

    .landinggiff {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-2;
    }



  .explorer {
    position: relative;
    margin-top: 70%!important;

  }

  .explorer2 {
    position: relative;
    margin-top: 120%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 60%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .explorersubdir {
    position: relative;
    margin-top: 7%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .logoheading {
		position: relative;
    margin-top: 0;
    margin-left: 0;
    background-color: transparent;
		z-index: 5;
		float: left;
	}


  .serviceheading {
    font-size: 50px;
  }

  .myphotos{
    font-size: 70px;
  }

  .mylinks{
    font-size: 30px;
  }

  .mylinksglyph {
    font-size: 50px;
  }

  .panel-title {
    color:#97ad91 ;
    font-size: 20px !important;

  }

  .headersmall a {
    color: rgba(255, 255, 255, 1.0)!important;
    background-color: rgba(0,0,0,0.4) !important;
    font-size: 20px;
    line-height: 20px;
  }

  .headersmall a:link {
    color: #fff;
    font-size: 20px;
    line-height: 20px !important;
  }

  span.text-content {
    margin-top: 0%;
    margin-left: -10%;
    height: 70px;
    width: 200px;
  }

  .upreload {
    right:20%;
  }

  .upreloadham {
    right:20%;
    padding-top:1%;
    padding-bottom:7%;
  }

  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 32px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }


  /* Style the  menu */
  .hamburgermenu {
   top: 10%;
   left:30%;
  }

  .hamburgermenu a {
   font-size: 18px !important;
   line-height: 180% !important;
  }


  .leftphoneicon {
    margin-left:18%!important;
  }



}


@media only screen and (max-width: 480px) {


  .btn-group{
  padding-left: 1%;
  margin: 0px auto ;

  }

  /* PHOTO GALLERY */
  /* PHOTO GALLERY */
  .my-gallery {
    background-color: transparent;
    width: 100%;
    float: left;
    margin-left: 15%;
  }


    .landingimage {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-1;
    }

    .landinggiff {
    position:fixed;
    height: 100%;
    width: 100%;
    top:15%;
    margin-left: 0;
    margin-right: 0;
    z-index:-2;
    }


  .landing {
  position:fixed;
  left:0;
  top:0;
  z-index:9;
  }


  .landingfooter {
    position: fixed;
    margin-top:75%;
  }

  .logoheading {
    margin-top: 3%;
	}

  .logo {
		height: 60px;
		width: 60px;
	}


  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 28px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #666633 !important;

  }


  .listtext{
    font-size: 25px !important;
    padding: 0%;
  }

  .listtext a {
    font-size: 25px !important;
    padding: 0%;
  }


  .serviceheading {
    font-size: 40px;
  }

  .myphotos{
    font-size: 35px;

  }

  .mylinks{
    font-size: 14px;

  }


  .mylinksglyph {
    font-size: 40px;
  }

  .leftphoneicon {
    margin-left:18%!important;
  }


  .galleryheading {
    font-size: 30px;
  }

  .panel-title {
    font-size: 18px !important;
    background-color:rgba(21, 104, 35, 0.0) !important;
  }

  span.text-content {
    margin-top: 0%;
    margin-left: -10%;
    height: 40px;
    width: 200px;
  }

  .headersmall a {
    color: rgba(255, 255, 255, 1.0)!important;
    background-color: rgba(0,0,0,0.4) !important;
    font-size: 18px;
    line-height: 18px;
  }

  .headersmall a:link {
    color: #fff;
    font-size: 18px;
    line-height: 18px !important;
  }

  .upreload {
    right:20%;
  }

  .upreloadham {
    right:20%;
    padding-top:0;
    padding-bottom:8%;
  }


  .explorer {
    position: relative;
    margin-top: 60%!important;
  }

  .explorer2 {
    position: relative;
    margin-top: 120%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 60%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorersubdir {
    position: relative;
    margin-top: 6%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .hamburgermenu {
   top: 4%;
   left:30%;
  }

  .hamburgermenu a {
   font-size: 18px !important;
   line-height: 180% !important;
  }

}


@media only screen and (max-width: 380px) {



  .panel-title {
    font-size: 18px !important;
    background-color:rgba(21, 104, 35, 0.0) !important;
  }


  .serviceheading {
    font-size: 30px;
  }

  .myphotos{
    font-size: 25px;

  }



  .explorer {
    position: relative;
    margin-top: 70%!important;
  }

  .explorer2 {
    position: relative;
    margin-top: 120%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorerJanka {
    position: relative;
    margin-top: 70%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }

  .explorersubdir {
    position: relative;
    margin-top: 7%;
    z-index: 99 !important; /* side panel has z-index of 10 and 20 */
  }


  .hamburgermenu {
   top: 5%;
   left:30%;
  }

  .hamburgermenu a {
   font-size: 16px !important;
   line-height: 180% !important;
  }


}

/* hamburgermenu for landscape phone and tablet*/
/* For Tablet */


@media screen and (min-width:768px) and (max-width:1280px) and (orientation:landscape){

  .hamburgermenu {
   top: 1%;
   left:30%;
  }

  .hamburgermenu a {
   font-size: 16px !important;
   line-height: 180% !important;
  }

}

/* mobile */

@media screen and (min-width:180px) and (max-width:767px) and (orientation:landscape) {

  .hamburgermenu {
   top: 1%;
   left:30%;
  }

  .hamburgermenu a {
   font-size: 14px !important;
   line-height: 150% !important;
  }

}


/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {

}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {

}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {

}