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

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

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


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

      h4 {
        font-size:32px;
        font-family:;
      }



  body {
    background-color: white !important ;
    color: black ;
    font-family:  ;
    font-weight: ;
    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: #666633 !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: #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;
 color: #666633 !important;
 position: fixed;
 z-index:9999;
 font-size: 18px !important;
 top: 20%;
 left:60%;
}

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

/* Style navigation menu links */
.hamburgermenu a {
 color: white !important;
 font-size: 18px !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;
}


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

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

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

th a{
  color: #666633 !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;
    color: rgba(84, 255, 112, 1.0); /* red #e20202;  green #54ff70; orange #dd4f0d; orange #dd790d: */
    font-style: normal;
    font-weight: bold;
    font-family:trench;
  }

  .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;
    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: 24px;
  text-decoration: none !important;
}

a:hover {
  color:#666633!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%;
}


.tablestuff {
    overflow-x:auto !important;
    table-layout: fixed;
    width:98% !important;
}



.sitemaptext {
  position: relative !important;
  z-index:10 !important;
  font-family: trench !important;
  font-size: 18px !important;
  font-weight: bolder;
  color: black;
  padding: 5%;

}

.sitemaptext a {
  position: relative !important;
  overflow-x:auto !important;
  z-index:10 !important;
  font-family: trench !important;
  font-size: 18px !important;
  font-weight: bolder
  color: black;
  padding: 5%;

}





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


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



    .footer-image {

      /* background-image: url("../images/bannerchips.png");  */
      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;
  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%;
  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:#666633 !important;

}

.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;
    }



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

		/* Add some border-radius to the boxes  */
		.media-box-container{
			-webkit-border-radius: 0px;
			   -moz-border-radius: 0px;
		            border-radius: 0px;
        }

        /* Apply some style to the social icons */


        .fa {
        margin-top: 20px !important;
        height: 90px !important;
        width: 90px !important;
        font-size: 5.0em !important ;
		line-height: 1.4em !important ;
		vertical-align: 50% !important ;


        }

        .media-box-footer{
			padding: 10px 20px;
		}
		.media-box-footer a{
			color: #BDBDBD;
			font-size: 11px;
			text-decoration: none;
		}

		.media-box-footer a:hover{
			cursor: pointer;
			color: #6D6D6D;
		}

		/* Remove the margin-bottom of the text */
		.media-box-content .media-box-text{
			margin-bottom: 0 !important;
		}

		/* hide no more entries button */
		.media-boxes-no-more-entries{
			display: none;
		}

		          /* to force 4 columns in Media Boxes on android */
  		body{
    		margin: 200;
    		 min-height: 400px;
     		 overflow-y: scroll;
		}



  .media-box-image{
    position: relative;
    overflow: display;
    width: 100%;
    height: 100%;

  }

  /* Hack to center the image */
  .media-box-image div[data-width][data-height]{
    position: relative;

  }
  .media-box-image div[data-width][data-height] img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
  }
  /* End Hack */

  .media-box .media-box-image img{
    width: 100%;
    max-width: 100%;
    display: block;
  }

  .media-box img{
    max-width: 100%;
  }





  /* ====================================================================== *
      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:#666633 ;
      box-shadow: 6px 6px 4px #666633 ;
  }

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

  }



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

  .button1 {
    padding: 15px 25px;
    width:40%;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 0px;
    box-shadow: 0px 6px 7px -4px #666633 ;
    -webkit-box-shadow: 0px 6px 7px -4px #666633 ;
  	   -moz-box-shadow: 0px 6px 7px -4px #666633 ;
    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 #666633 ;
    -webkit-box-shadow: 0px 6px 7px -4px #666633 ;
       -moz-box-shadow: 0px 6px 7px -4px #666633 ;
    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 #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) {


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

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


  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-size: 12px !important;
    padding: 1%;

  }

  .sitemaptext a {
    font-size: 12px !important;
    padding: 1%;

  }

  .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 {

   background-color: #333;
   color: #666633 !important;
   position: fixed;
   font-size: 16px !important;
   left:40%;
   top:15%;
  }

  /* Style navigation menu links */
  .hamburgermenu a {
   color: white;
   font-size: 14px !important;
   line-height: 14px !important;
   padding: 5px 15px;
   text-decoration: none;
   display: block;
  }

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


}


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


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

  }

  .footer-image {

    /* background-image: url("../images/bannerchips.png");  */
    background-color: #e8aa54;
    height: 60px !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

  }


  /* Style the  menu */
  .hamburgermenu {

   background-color: #333;
   color: #666633 !important;
   position: fixed;
   font-size: 14px !important;
   top: 10%;
   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;
   font-size: 14px !important;
   line-height: 14px !important;
   padding: 5px 15px;
   text-decoration: none;
   display: block;
  }

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


  .sitemaptext {
    font-size: 12px !important;
    padding: 1%;

  }

  .sitemaptext a {
    font-size: 12px !important;
    padding: 1%;

  }


}


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


  h4 {
    font-size: 20px !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 #666633 !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: 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 */
  }

  .sitemaptext {
    font-size: 12px !important;
    padding: 1%;

  }

  .sitemaptext a {
    font-size: 12px !important;
    padding: 1%;

  }

}


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


  .sitemaptext {
    font-size: 12px !important;
    padding: 0%;

  }

  .sitemaptext a {
    font-size: 12px !important;
    padding: 0%;

  }



}