* {

}
body {
    background: #f2e8d8;
	font-family: sans-serif,Verdana;
    font-size: 1rem;
    line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

html{
}

h1{
	font-size:30px;
}

.logo-large {
height:110px; 
padding:5px;
}

.wrapper {
	position:relative;
	min-height: 100vh;
}

.main-cont{
	padding-bottom:236px;
	padding-top:110px;
}

.footer{
	background: #000; 
	padding-top:10px; 
	min-height:236px; 
	position:absolute; 
	bottom:0;  
	width:100%
}

.w3-medium-footer {
	font-size: 15px!important;
}

#navDemo{
	margin-top:110px;
    background: #f2e8d8;

}


.hexGridContainer {
 width:70%; 
 max-width:600px; 
 float:left; 
 margin:5% 0 5% 5%; 
}

.underHexGrid{
 width:70%; 
 max-width:600px; 
 float:left; 
 margin: 0% 5%; 
}

.hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
   display: table;
 text-align: center;
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 50.0%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-30deg) skewY(-30deg);
      -ms-transform: rotate3d(0,0,1,-30deg) skewY(-30deg);
          transform: rotate3d(0,0,1,-30deg) skewY(-30deg);
		  
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(30deg) rotate3d(0,0,1,-60deg);
        -ms-transform: skewY(30deg) rotate3d(0,0,1,-60deg);
            transform: skewY(30deg) rotate3d(0,0,1,-60deg);
}

/*** ----------------------- ***/

.hexh1 {
  width: 50%;
  height: 100%; 
  padding: 0!important;
  margin: 0!important;
  
  left: 100%; /* ----- */
  padding-right:0%; 
  font-size: 1.5em;
  box-sizing:border-box;
  background-color: #ffffff;
  font-weight: 300;

  -webkit-transition: left 0.2s; 
  -moz-transition: left 0.2s; 
  -ms-transition: left 0.2s; 
  -o-transition: left 0.2s; 
  transition: left 0.2s; 
}

.hexp {
  width: 0%;
  height: 100%; 
  padding: 0;
  margin: 0!important;
  top: 0%;
  padding-bottom:0%;
  left: 0%;
  padding-right:0%; /* ----- */
  font-size: 1.5em;
  box-sizing:border-box;
  background-color: #ffffff;
  font-weight: 300;
  -webkit-transition: padding-right 0.2s; 
  -moz-transition: padding-right 0.2s; 
  -ms-transition: padding-right 0.2s; 
  -o-transition: padding-right 0.2s; 
  transition: padding-right 0.2s; 
}


.hexm-logo {
	padding:0; 
	background-color: transparent; 
	background-image: url('/logo-milenkova-nohex.svg'), url('/logo-milenkova-nohex-120.png');  
	background-position: center center; 
	background-repeat: no-repeat; 
	background-size: 70%;
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/




  .hexGrid{
    padding-bottom: 18.0%
  }
  .hex {
    width: 33.33%; /* = 100 / 3 */
  }
  .hex.hex1{ /* first hexagon of even rows */
    margin-left:33.33%;  /* = width of .hex / 2  to indent even rows */
  }
  .hex.hex2{ /* first hexagon of even rows */
    margin-left:4.33%;  /* = width of .hex / 2  to indent even rows */
    margin-right:3.33%;  /* = width of .hex / 2  to indent even rows */
  }
  .hex.hex3{ /* first hexagon of even rows */
    margin-left:21.5%;  /* = width of .hex / 2  to indent even rows */
    margin-right:2.33%;  /* = width of .hex / 2  to indent even rows */
  }

.hexcont{
	clear: both;
	position: absolute;
	top:0;
	left:0;
	visibility:visible;
	width:90%;
	height:200%;
	margin:20% 0 0 10%;
	padding:0;
    vertical-align: middle;
	text-align: center; 
}

.hexa{
	top:0;
	left:0;
	width:90%;
	height:70%;
	position: absolute;
    vertical-align: middle;
	text-align: center;
	color:#fff;
	padding:0;
	margin:0;
	font-size: 1.2vw;
	display: flex;
    align-items: center;
	justify-content: center;
}

.hexa:focus { 
outline: 1px dotted transparent ; 
outline-offset:-15px;}


.hexa:hover {
  text-decoration: none;
}
.hexa:visited {
  text-decoration: none;
}
.hexa:link {
  text-decoration: none;
}

.coffe2 {
	width:auto; 
	max-height:750px; 
	border-right:1px solid transparent;
}


.footcardlink{
	position: absolute;
	top:0;
	left:0;
	visibility:visible;
	width:90%;
	height:90%;
	margin:5% 0 0 5%;
	padding:0;
	vertical-align: middle;
	text-align: center; 
}
.foota{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	vertical-align: middle;
	text-align: center;
	color:transparent;
	padding:0;
	margin:0;
}

.foota:focus { 
outline: 1px dotted transparent ; 
outline-offset:-15px;
}

.foota:hover, .foota:visited, .foota:link {
  text-decoration: none;
}



@media (max-width:600px) {
	.hexGridContainer {
		float:none; 
		margin:5% auto 5% auto;
		width:95%; 
	}
	.underHexGrid{
		width:95%; 
		float:none; 
		margin: 0% auto ; 
	}
	.hexa{
		font-size: 4vw;
	}
	.coffe2 {
		border-right:0px solid transparent;
		width:100%; 
		max-height: 100%;
		padding:5% 5% 0 5%;
	}
	.main-cont{
		padding-top:80px;
		padding-bottom:530px;
	}
	#navDemo{
		margin-top:80px;
	}
}
@media (max-width:992px) and (min-width:601px) {
	.w3-xxlarge { font-size:24px!important }
	.w3-large {font-size:15px!important }
	
	.hexGridContainer { 
		margin:5% auto 5% auto;
		width:95%; 
	}
	.hexa{
		font-size: 2vw;
	}
	.underHexGrid{
		width:95%; 
		margin: 0% auto ;
	}
	
	.w3-medium-footer {
		font-size: 12px!important;
	}
}