/* 
* Image design
* Footer design
* Artistic edges
*/

/* ===== Main menu ===== */

@media (min-width: 992px) {
	
header .navbar-nav .nav-link { 
	font-family: Merienda;
	font-size: 1.65vw;
	text-shadow:  -2px -2px 5px #000, 2px -2px 5px #000;
	line-height: 0.88;
	text-indent: -2.5vw;
	text-wrap: wrap;
	padding-left: 2.5vw;
	}
header .navbar-nav > li { 
	max-width: 18vw;
 }
header .navbar-nav .nav-link::first-line {
	font-size: 2.2vw;
}
}

/* ===== Subtitle on hero ===== */

#block-subtitle h2 {  /* Subtitle when over hero image */
  position: absolute;
  top: -300px;
  left: -2vw;
  width: 40vw;
  padding-left: 30px;
  font-size: 2.4vw;
  line-height: 1.8em;
  text-indent: -30px;
  color: #fff;
  text-shadow:  -2px -2px 5px #000, 2px -2px 5px #000;
  opacity: 0.75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media (max-width: 992px) {

#block-subtitle h2 {  /* Subtitle when over hero image */
  font-size: 5.5vw;
  top: -25 vw;
  width: 60vw;
  }

}

/* ===== Image design ===== */


.user-round-micro img {
	border-radius: 25px;
	box-shadow: 3px 3px 5px #666;
}
.user-round-mini img {
	border-radius: 50px;
	box-shadow: 3px 3px 5px #666;
}
.user-pictures-mini-round img {
	border-radius: 25px;
	box-shadow: 3px 3px 5px #666;
}

/* ----- Round user image and text adaptation in user presentation ----- */
.paragraph--type--user .field--name-field-picture,
.field  .field--name-field-picture {
	float: left;
	margin-right: 50px;
	shape-outside: circle();
	shape-margin: 6px;
}
.paragraph--type--user .field--name-field-picture img,
.field .field--name-field-picture img
 {
	margin-right: 40px;
	float: left;
	shape-outside:  border-box;
	shape-margin: 20px;
}
@media (max-width: 768px) {
.paragraph--type--user .field--name-field-picture,
.field  .field--name-field-picture {
	margin-right: -20px;
}

.paragraph--type--user .field--name-field-picture img,
.field .field--name-field-picture img {
	width: 60%;
	height: 60%;
	shape-margin: 10px;
	margin-right: -10px;
	margin-left: -15px;
}
}
	

/* ----- Round user image in profile ----- */

.path-user .field--name-field-picture,
.path-user .field--name-field-internal-picture {
}
.field--name-field-picture img,
.field--name-field-internal-picture img {
	border-radius: 200px;
	box-shadow: 2px 2px 5px #000;
	overflow: hidden;
}
.path-user .field--name-field-picture img,
.path-user .field--name-field-internal-picture img {
	float: none;
	position: absolute;
	z-index: 222;
	width: 15vw;
	max-width: 200px;
	top: -20vw;
	left: 5vw;
}
.path-user .field--name-field-internal-picture img {
	left: 25vw;
	top: -27vx;
}

/* ----- Hexagonal Image and text adaptation in node teaser ----- */
.node--view-mode-teaser .field--name-field-images .field__item {
	float: left;
    margin: 0 2vw 10px -50px;
    max-width: 50%;
}
.node--view-mode-teaser .field--name-field-images .field__item,
.hexagon-images .views-field-field-images .field-content {
	filter: drop-shadow( 3px 3px 4px  #444);
    shape-outside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.node--view-mode-teaser .field--name-field-images .field__item img,
.hexagon-images .views-field-field-images .field-content img {
	-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.hexagon-field {
	margin-right: -150px;
}
.hexagon-field .views-field-title,
.hexagon-field .views-field-field-date,
.hexagon-field .views-field-field-subtitle {
	position: absolute;
	top: 3px;
	font-size: .6em;
	width: 100%;
	text-align: center;
}
.hexagon-field .views-field-title {
	top: 7px;
	width: 100%;
	text-align: center;
}
.hexagon-field .views-field-field-subtitle {
	top: 175px;
	width: 100%;
	text-align: center;
	padding: 0 50px;
}
.hexagon-field .views-field-title h2 {
	font-size: 20px;
	color: #fff;
	text-shadow: 2px 2px 5px #000, -2px 2px 5px #000;
	padding: 0 35px;
}

.hexagon-field .views-field-field-date h4 {
	font-size: 18px;
	margin: 0;
	color: #fff;
	text-shadow: 2px 2px 5px #000, -2px 2px 5px #000;
}
.hexagon-field .views-field-field-subtitle .field-content {
	font-size: 12px;
	line-height: 1.2em;
	color: #fff;
	text-shadow: 2px 2px 5px #000, -2px 2px 5px #000;
}
.hexagon-field header {
	width: 200px;
	height: 600px;
	float: left;
	shape-outside: polygon(0 0, 200px 0, 200px 80px, 1px 80px, 1px 360px, 200px 360px, 200px 361px, 1px 361px, 1px 640px, 200px 640px, 200px 641px, 0px 641px);
}
.hexagon-field .views-row {
	 position: relative;
	 width: 250px;
	 display: inline-block;
	 margin: 0 150px -80px 0;
	 z-index: 33;
}
.hexagon-field .views-row .views-field {
}
@media (max-width: 992px) {

.hexagon-field {
	margin: 0;
	text-align:center;
}
.hexagon-field .views-field-title {
	top: 7px;
}
.hexagon-field .views-field-field-subtitle {
}
.hexagon-field .views-field-field-subtitle .field-content {
	font-size: 14px;
	line-height: 1.2em;
}

.hexagon-field header {
	display: none;
}
.hexagon-field .views-row {
	 width: 340px;
	 margin: 12px auto;    
}

}

/* ===== Footer ===== */

.footerwidget {
	background:url('grafics/clayback.jpg');
}
#footer .row .region .block {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10px;
	border: 1px solid #664422;
	box-shadow: 10px 10px 5px #996633;
}


/* ===== Bottom edge of Hero image ===== */

.edge {
	opacity: 0.4;
}
.edge-bottom {
	width: 100%;
	height: 125px;
	margin-top: -125px;
	background-image:url('grafics/edge1.png');
	background-position: -300px bottom;
	background-repeat:repeat-x;
}
.edge-bottom-1 {
  background-image:url('grafics/edge2.png');
  background-size: 50%;
}
.edge-bottom-2 {
  background-size: 45%;
}
.edge-bottom-3 {
  background-size: 40%;
}
.edge-bottom-4 {
  background-size: 35%;
}
.edge-bottom-5 {
  background-size: 30%;
  opacity: 0.7;
}
.edge-bottom-6 {
  height: 10px;
  margin-top: -4px;
  background: #fff;
  	opacity: 1;
  box-shadow: 0px 0px 10px #fff, 0px 0px 3px #fff;
}
.region-page-title h1, 
.h1 {
  background: url('grafics/titleback.png') center top no-repeat;
  /* background-size: 100% 450%; */
}


/* ===== Top edge of Footer */

#footer {  /* Brings edge to the front */
	position: relative;
	z-index: 10;
}
.footerwidget {
	position: relative;
	z-index: -1;
}
.xedge {
	opacity: 1;
	background-size: 50%;
}
.xedge-top {
	width: 100%;
	height: 124px;
	margin-bottom: -124px;
	background-position: -300px top;
	background-repeat:repeat-x;
}
.xedge-top-1 {
  height: 100px;
  margin-bottom: -100px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));background-position: 0 top;
  opacity: 1;
  display: none;

}
.xedge-top-2 {
    background-image:url('grafics/xedge1.png');
	background-position: 555px top;

}
.xedge-top-3 {
  background-image:url('grafics/xedge1.png');
	background-position: 300px top;
   display: none;
}
.xedge-bottom-4 {
  display: none;
  height: 10px;
  margin-top: 0;
  background: #fff;
  	opacity: 1;
  box-shadow: 0px 0px 10px #fff, 0px 0px 3px #fff;
}