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


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

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

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

     .mbimgsize {
       width: 100%!important;
       height: 100%!important;
     }

     .media-box-text {
      width:100%;
      Height:800px;
      font-size: 1.5em;
      line-height: 1.5;
      font-weight: normal;
      margin: 13px 0px 13px 0 !important;
      color: #000;
     }

     .media-box-text p{
        margin-left: 2%;
     }


     /* 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: 60px !important;
     }


     h2 {
       font-size:60px !important;
       padding-top: 5%;
     }


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

     h4 {
       font-size:32px;
     }

     p {
       font-size:24px !important;

     }


     .button3{
       position: relative;
         width: 160px;
         height: 40px;
         font-size: 20px;
         z-index: 99;

     }

     .button4{
       position: relative;
         width: 160px;
         height: 40px;
         font-size: 20px;
         z-index: 99;

     }


          .media-box-container{
        	-webkit-border-radius: 0px;
        	   -moz-border-radius: 0px;
                    border-radius: 0px;

            -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.15);
               -moz-box-shadow: 0 0px 0px rgba(0,0,0,0.15);
                 -o-box-shadow: 0 0px 0px rgba(0,0,0,0.15);
                -ms-box-shadow: 0 0px 0px rgba(0,0,0,0.15);
                    box-shadow: 0 0px 0px rgba(0,0,0,0.15);
          }



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

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

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

       h2 {
         font-size:30px !important;

       }


       h3 {
         font-size:14px !important;

       }

       h4 {
         font-size:12px;

       }

       p {
         font-size:16px !important;


       }


       .media-box-text {
        width:100%;
        Height:500px;
        font-size: 1.5em;
        line-height: 1.5;
        font-weight: normal;
        margin: 13px 0px 13px 0 !important;

        color: #000;
       }

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


       .button3{
         position: relative;
           width: 120px;
           height: 35px;
           font-size: 12px;
           z-index: 99;

       }

       .button4{
         position: relative;
           width: 120px;
           height: 35px;
           font-size: 12px;
           z-index: 99;

     }

    }

     /*  Media queries for adjusting to different screen sizes  */
     @media only screen and (max-width: 580px) {
       .three {
         display:none !important;
       }
       .two {
         display:block;
       }
       h1 {
         font-size: 40px !important;
       }

       h2 {
         font-size:30px !important;

       }


       h3 {
         font-size:14px !important;

       }

       h4 {
         font-size:12px;

       }

       p {
         font-size:14px !important;


       }

       .media-box-text {
        width:100%;
        Height:450px;
        font-size: 1.5em;
        line-height: 1.5;
        font-weight: normal;
        margin: 13px 0px 13px 0 !important;
        color: #000;
       }


       .button3{
         position: relative;
           width: 110px;
           height: 35px;
           font-size:10px;
           z-index: 99;

       }

       .button4{
         position: relative;
           width: 110px;
           height: 35px;
           font-size:10px;
           z-index: 99;

     }

    }


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

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

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

       h2 {
         font-size:30px !important;

       }


       h3 {
         font-size:14px !important;

       }

       h4 {
         font-size:12px;

       }

       p {
         font-size:12px !important;


       }

       .media-box-text {
        width:100%;
        Height:400px;
        font-size: 1.5em;
        line-height: 1.5;
        font-weight: normal;
        margin: 13px 0px 13px 0 !important;
        color: #000;
       }


       .button3{
         position: relative;
           width: 100px;
           height: 35px;
           font-size: 12px;
           z-index: 99;
       }

       .button4{
         position: relative;
           width: 100px;
           height: 35px;
           font-size: 12px;
           z-index: 99;

         }


     }

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




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


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

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

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;

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


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



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

}

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

}



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



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

  }


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



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

  h3 {
    font-size:24px;

  }

  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;

  }


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

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


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

  }


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

  }

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


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

  }

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

  }


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

}