/* */
/* */
/* */
/* */
/* STYLE SHEET FOR index.php */
/* whh 2021.10.17 */
/* whh 2021.10.24 */
/* whh 2021.10... */


@font-face {
  font-family:'helveticalight';
  src: url('../assets/fonts/HelveticaNeueUltraLight.ttf');
  src: url('../assets/fonts/HelveticaNeueUltraLight.ttf?#iefix') format('truetype'), url('../assets/fonts/HelveticaNeueUltraLight.ttf') format('truetype');
  }

@font-face {
  font-family:'trench';
  src: url('../assets/fonts/trench100free.otf');
  src: url('../assets/fonts/trench100free.otf?#iefix') format('embedded-opentype'), url('../assets/fonts/trench100free.ttf') format('truetype');
  }



@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 {
        font-family:'trench';
        color: black;
        background-color: transparent;
      }

/* Default sizes browser HTML 4 apply
      h1 { font-size: 24px;}
      h2 { font-size: 22px;}
      h3 { font-size: 18px;}
      h4 { font-size: 16px;}
      h5 { font-size: 12px;}
      h6 { font-size: 10px;}
*/


      h1 {
        font-size: 80px !important;
      }

      h2 {
        font-size:80px !important;
        font-family:trench !important;
      }


      h3 {
        font-size:30px !important;
        font-family:trench !important;
      }

      h4 {
        font-size:32px !important;
        font-family:trench !important;
      }

 .trench {
    font-family: 'trench' !important;
    font-weight: bolder !important;
 }


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


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


    a {
    color: #2C3539 !important;


    }

    a:hover {
    color: #2aafaf !important;
    }



  /* The Modal (background) Safety Popup*/
  /* The Modal (background) Safety Popup*/
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Sit on top */
    padding-top: 20%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 3%;
    border: 1px solid #888;
    border-radius: 5px;
    width: 95%;
  }

  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 60px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  /* End popup stuff */
  /* End popup stuff */

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

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

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

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

.navemail {
  position:fixed;
  right:4%;
  background-color: transparent !important;
  float:right;

}

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

.icon:hover {
font-size: 48px;
  color: #2aafaf !important

}

.hamburger {

 background-color: #333;
 position: fixed;
 background-color:rgba(0,0,0,0.0);
 text-shadow: 0px 2px 3px #2aafaf !important

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


/* 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: 50px;
z-index: 10;
background-color:rgba(0,0,0,0.0);
text-shadow: 0px 2px 3px #2aafaf !important;
}

.hamburgertext:hover {
font-size: 48px;
  color: #2aafaf !important;

}

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

/* Style the hamburger  */
.hamburger a.icon {
 background: rgba(255, 255, 255, 1.0);
 color: #000 !important;
 display: block;
 position: fixed;
 /* top: 50%; */
 /* left: 90%; */
}

/* Add a grey background color on mouse-over */
.hamburger a:hover {
 background-color: #fff;
 color: #2aafaf !important;
}



/* Style the  menu */
.hamburgermenu {

 background-color: #333;
 color: #2aafaf !important;
 position: fixed;
 font-size: 24px;
 top: 20%;
 left:55%;
}

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

/* Style navigation menu links */
.hamburgermenu a {
 color: white !important;
 padding: 14px 16px;
 text-decoration: none;
 display: block;
}


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


.filebutton {
  padding-right:15%!important;
}

/* 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%;
}


/* site map footer */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 0px solid #ddd;
}

table, th, tr, td {
  border: 0px solid white;
    padding-bottom: 1em !important;
}

th, td {
  text-align: left;
  padding-left: 1%!important;
}

th {
  color: #2aafaf !important;
  font-weight: bold !important;
}

th a{
  color: #2aafaf !important;
  font-weight: bold !important;
}

th a:hover{
  color: #000 !important;
  font-weight: bold !important;
}

/*
tr:nth-child(even){background-color: #f2f2f2}
tr:nth-child(odd){background-color: #f2f2f2}
*/

/* to manage image switching between Desktop and moblie */
/* to manage image switching between Desktop and moblie */
@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;
  font-family:trench;
  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;
    font-family:trench;
    background-color: transparent;

  }

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

  .mylinks a {
    font-size: 30px !important;
    line-height: .5em !important;
  }

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


  .galleryheading {
    font-size: 50px;
    color:rgba(84, 255, 112, 1.0);
    font-style: normal;
    font-weight: bold;
    font-family:trench;
    margin-left: 5%;

  }


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

a {
  color: black ;
  background-color: rgba(0,0,0,0.0);
  text-decoration: none !important;
}

a:link {
  color: rgba(108, 79, 61, 1.0);
  font-size: 16px; /* this sets the font-size for the Calendar picker dates */
  text-decoration: none !important;
}

a:hover {
  color:#2aafaf!important;
  text-decoration: none;
}


/* 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-family: trench !important;
  font-size: 32px;
  font-weight: bolder;
  color: black;
}

.listtext{
  font-family: trench !important;
  font-size: 40px !important;
  font-weight: bolder;
  color: black;
  padding: 1%;
}

.listtext a {
  font-family: trench !important;
  font-size: 40px !important;
  padding: 1%;
}

.linkstext{
  font-family: trench !important;
  font-size: 45px !important;
  font-weight: bolder;
  color: black;
}


.servicelist{
  font-family: trench !important;
  font-weight: bolder;
  color: black;
  padding: 1%;
}

.sitemaptext {
  font-family: trench !important;
  font-size: 18px !important;
  font-weight: bolder;
  width: 400px;
  color: black;
  padding: 1%;

}

.sitemaptext a {
  font-family: trench !important;
  font-size: 18px !important;
  font-weight: bolder;
  width: 400px;
  color: black;
  padding: 1%;

}





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


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



    .footer-image {
      background-image: url("../images/bannerchips2.png");
      background-color: #cccccc;
      height: 100px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }

    .footer-text {
      background-color: transparent !important;
      font-size: 24px;
      text-align: center;
      position: relative;
      top: 50%;
      color: #2aafaf !important;
    }

    .footer-text a{
      background-color: transparent !important;
      color: #2aafaf !important;
    }

    .footer-text a:hover {
      color: #000000 !important;
      text-decoration: none;
    }



/* 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;
  font-family:trench;
  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;
}



.btn-group-justified {
/* background-color: rgba(255, 255, 255, 1.0);      /*background-color: rgba(255, 255, 255, 0.10) */
background-color: rgba(255, 255, 255, 0.0);
display: table;
width: 100%;
border-collapse: separate;
table-layout: fixed;
align-items: center;
}

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

}


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

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

.upreload {
  right:8%;
}

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


/*  Specific CSS for ModernArtisan index.html  */
/*  Specific CSS for ModernArtisan index.html  */
/*  Specific CSS for ModernArtisan index.html  */
/*  Specific CSS for ModernArtisan index.html  */
/*  Specific CSS for ModernArtisan index.html  */


    html {
      scroll-behavior: smooth;
    }


    .wrapper {
      margin: 5% 15% 5% 15%;
    }

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

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


	/* == LETS MODIFY SOME STYLE FOR THE Modern Artist == */

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


.textcolour {
color:#2aafaf !important;

}

.textblack {
color:#000000 !important;

}

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

  .popglyphicon a:link {

            color:#2aafaf !important;
  }

  .popglyphicon a:visited {

            color:#2aafaf !important;
  }

  .popglyphicon a:hover {

      color:#2aafaf !important;
  }

  .popglyphicon a:active {

            color:#2aafaf !important;
  }

  .navglyphs {
    background-color: transparent;
      padding-top: 3.5%;
      font-size: 60px !important;
      background-color: transparent;
      text-shadow: 0px 2px 3px #2aafaf !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:19.2%!important;
    }





  /* ====================================================================== *
      END Special to this site MEDIA BOX THUMBNAIL not in mediaboxes.css
   * ====================================================================== */



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

  .mainbutton {
    border-color: black;
    color:#2aafaf ;
      box-shadow: 6px 6px 4px #2aafaf ;
  }

  .button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
    box-shadow: 2px 2px 2px #2aafaf ;

  }



  .button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
    box-shadow: 2px 2px 2px #2aafaf ;
  }

  .button1 {
    padding: 15px 25px;
    width:65%;
    height:100%;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 0px;
    box-shadow: 0px 6px 7px -4px #2aafaf ;
    -webkit-box-shadow: 0px 6px 7px -4px #2aafaf ;
  	   -moz-box-shadow: 0px 6px 7px -4px #2aafaf ;
    padding-bottom: 5px;



  }

  .button1:hover {
    color: #000000 !important;
    background-color: #ddd;
    box-shadow: 0px 6px 7px -4px #666 ;
    -webkit-box-shadow: 0px 6px 7px -4px #666 ;
       -moz-box-shadow: 0px 6px 7px -4px #666 ;
    border: none;

  }

  .button1:active {
    background-color: #ccc;
    color: #000000 !important;
    box-shadow: 0 2px #666;
    transform: translateY(4px);
  }


  .button2 {
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 0px;
    box-shadow: 0px 6px 7px -4px #2aafaf ;
    -webkit-box-shadow: 0px 6px 7px -4px #2aafaf ;
       -moz-box-shadow: 0px 6px 7px -4px #2aafaf ;
    padding-bottom: 5px;
  }

  .button2:hover {
    color: #fff !important;
    background-color: #ddd;
    box-shadow: 0px 6px 7px -4px #666 ;
    -webkit-box-shadow: 0px 6px 7px -4px #666 ;
       -moz-box-shadow: 0px 6px 7px -4px #666 ;

  }

  .button2:active {
    background-color: #ccc;
    color: #000000 !important;
    box-shadow: 0 2px #666;
    transform: translateY(4px);
  }







/*  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 #2aafaf !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 #2aafaf !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) {


  h3 {
    font-size:28px;
    font-family:trench;
  }


  /* 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;
  }

  .mylinks a {
    font-size: 25px !important;
    line-height: 0.4em !important;
  }

  .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 {
    top:45%;
    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 */
  }


  h1 {
    font-size: 60px !important;
  }

  h2 {
    font-size:60px !important;
    font-family:trench;
  }

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



  .sitemaptext {
    font-family: trench !important;
    font-size: 12px !important;
    font-weight: bolder;
    color: black;
    padding: 1%;

  }

  .sitemaptext a {
    font-family: trench !important;
    font-size: 12px !important;
    font-weight: bolder;
    color: black;
    padding: 1%;

  }

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

  }


  /* Style the  menu */
  .hamburgermenu {

   background-color: #333;
   color: #2aafaf !important;
   position: fixed;
   font-size: 24px;
   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 {
   color: white;
   padding: 14px 16px;
   text-decoration: none;


   display: block;
  }

}


@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) {

  h3 {
    font-size:24px;
    font-family:trench;
  }

  h4 {
    font-size: 24px !important;
  }

  .filebutton {
    padding-right:30%!important;
  }

  .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 #2aafaf !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;
    }

    .filebutton {
      padding-right:30%!important;
    }

  .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 {
    top:50%;
    right:15%;
    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 #2aafaf !important;

  }


  .footer-text {
    font-size: 16px;
  }


  /* Style the  menu */
  .hamburgermenu {

   background-color: #333;
   color: #2aafaf !important;
   position: fixed;
   font-size: 18px;
   top: 5%;
   left:30%
  }

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

  /* Style navigation menu links */
  .hamburgermenu a {
   color: white;
   padding: 14px 16px;
   text-decoration: none;
   display: block;
  }

  .mylinks a {
    font-size: 20px !important;
    line-height: 0.4em !important;
  }



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



}


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


  h4 {
    font-size: 20px !important;
  }


  .filebutton {
    padding-right:38%!important;
  }



  .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 #2aafaf !important;

  }

  h1 {
    font-size: 40px !important;
  }

  h2 {
    font-size:40px !important;
    font-family:trench;
  }


  .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: 20px;
  }

  .mylinks a {
    font-size: 18px !important;
    line-height: 0.3em !important;
  }

  .mylinksglyph {
    font-size: 40px;
  }

  .leftphoneicon {
    margin-left:0%!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 */
  }

}


@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;

  }

  .filebutton {
    padding-right:45%!important;
  }

  .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 */
  }

  .mylinks a {
    font-size: 16px !important;
    line-height: 0.2em !important;
  }

}