@charset "utf-8";
/* CSS Document */

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* Section general styling   */
section {
  text-align: center;
  padding: 10px 0;
}
/* Custom ultilities */
  /* Centered */
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .vertical-centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
  }

.creativity:before {							/*  inserts wide pix - required before featured-bg-image   */
	background: url("../pix/panorama.jpg");
	background-position: 50% 0;
}

/*   Section with featured background image. Every section which will have this
  class will get the effect with a background cover.  */

.featured-bg-image {
	position: relative;
	background-color: #cccccc;    /*   full width feature background & opacity   */
	color: white;
	min-height: 500px;      /*   full width feature height    */
	margin-top: 5%;
}
.featured-bg-image:before {
  content: '';			/* blank '' seems ok */
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;				/*  image opacity to show bgrnd #222222  */
}