body {
/*	background-image: url("../images/bg.jpg");*/
	background-color: #ffffff;
/*	background-repeat: no-repeat;
    background-attachment: fixed;*/
}

.footer {
/*  position: absolute;*/
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #cc0000;
}

.tn {
	padding-left: 4px; 
	padding-right: 4px; 
}

/*
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
*/
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
.imgf {
  opacity: 0.2;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

.r-red { border:10px solid #ff3300; }
.r-blue { border:10px solid #3366ff; }

.r-red2 { border:3px solid #ff3300; }
.r-blue2 { border:3px solid #3366ff; }

.r-red2-king {
  border: 3px solid #ff3300; 
  outline: 3px solid #ffcc00;
}
.r-blue2-king {
  border: 3px solid #3366ff; 
  outline: 3px solid #ffcc00;
}

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

.circular--landscape75 {
  display: inline-block;
  position: relative;
  width: 75px;
  height: 75px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape75 img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}
._blink {
  animation: blinker 0.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.hexr {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 150px;
  width: 129.9px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexb {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 150px;
  width: 129.9px; /* width * 0.866 */
  background: blue;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexr-background {
  position: absolute;
  background-color: #ff9999; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 146px; /* container height - (border thickness * 2) */
  width: 125.9px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexb-background {
  position: absolute;
  background-color: #3399ff; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 146px; /* container height - (border thickness * 2) */
  width: 125.9px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}


/* mobile */
.hexr-m {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 120px;
  width: 103.92px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexb-m {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 120px;
  width: 103.92px; /* width * 0.866 */
  background: blue;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexr-background-m {
  position: absolute;
  background-color: #ff9999; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 116px; /* container height - (border thickness * 2) */
  width: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexb-background-m {
  position: absolute;
  background-color: #3399ff; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 116px; /* container height - (border thickness * 2) */
  width: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}


/* end */


.hexm {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 320px;
  width: 277.12px; /* width * 0.866 */
  background: #00ff00;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexm-background {
  position: absolute;
  background-color: #000000; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 316px; /* container height - (border thickness * 2) */
  width: 273.12px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexmr {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 320px;
  width: 277.12px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexmr-background {
  position: absolute;
  background-color: #000000; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 316px; /* container height - (border thickness * 2) */
  width: 273.12px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexmb {
  display: block;
  margin: 0 auto;
  position: relative;
  height: 320px;
  width: 277.12px; /* width * 0.866 */
  background: blue;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hexmb-background {
  position: absolute;
  background-color: #000000; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  height: 316px; /* container height - (border thickness * 2) */
  width: 273.12px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}


.hex img {
  position: absolute;
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.zoom {
/*  padding: 50px;	*/
/*  background-color: green; */
  transition: transform .4s; /* Animation */
/*  width: 200px;
  height: 200px;*/
  margin: 0 auto;
}

.zoom2 {
/*  padding: 50px;	*/
/*  background-color: green; */
  transition: transform .4s; /* Animation */
/*  width: 200px;
  height: 200px;*/
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom2:hover {
  transform: scale(3.0); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}