.blank{
	background-color:rgba(37,37,37,0.6);
}

.seen{
	background-color: #fff !important;
}
.hidden{
	opacity:0;
}
.navbar-default{
	background-color:rgba(37,37,37,0.6);
	border-color:transparent;
}
nav{
	margin-bottom:0px;
}
.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a{
	color:#fff ;
	font-size:16px;
}
.fs18{
	font-size:18px !important;
	padding: 15px; 
	margin:0;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
	color:#4fc3f7 !important;
	font-weight:900 !important;
	background-color:transparent;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
	color:#4fc3f7 !important;
	font-weight:900 !important;
	background-color:transparent;
}

.m-header{
	border:0;
}

.logo{
}
.palr10p{
	padding-left:10%;
	padding-right:10%;
}
.palr30{
	padding-left:15px !important;
	padding-right:15px !important;
}
.row{
	margin-left:0px;
	margin-right:0px;
}

.col-xs-12{
	padding-left:0px;
	padding-right:0px;
}
.col-xs-6{
	padding-left:0px;
	padding-right:0px;
	margin-left:0px;
	margin-right:0px;
}
.gradient-layout{
	background: url('./../../images/esp8266-layout.jpg')
}
.gradient-layout::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(42, 122, 193, 0) 0, rgba(42, 122, 193, 0.8), rgba(42, 122, 193, 0.9), rgba(42, 122, 193, 1) 100%);
  height: 100px;
  width: 100%;
  content: '';
}	
.mato20{
margin-top:22px;
}
.navbar-brand > img{
display:inline;
}

.navbar-brand{
float:none;
}
.vertical-center{
	display: flex;
	justify-content:center;
	align-content:center;
	flex-direction:column;
}
.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.cBlue{
	color:#4fc3f7 !important;
}
.parallax {
    /* The image used */
    background-image: url("../images/hype31.jpg");

    /* Set a specific height */
    min-height: 500px; 
    padding-top:100px;
    padding-bottom:100px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.m-page{
	background-color:#fcfcfc;
	padding-top:100px;
	padding-bottom:100px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border-color:transparent;
}
.navbar-nav > li > a{
	margin: 10px 15px;
	padding: 2px;
}
.anim-color{
-webkit-transition: background-color 500ms ease-in,color 500ms ease-in;
    -moz-transition: background-color 500ms ease-in,color 500ms ease-in;
    -o-transition: background-color 500ms ease-in,color 500ms ease-in;
    transition: background-color 500ms ease-in,color 500ms ease-in;
}


.spam{
-webkit-transition: background-color 500ms ease-in,color 500ms ease-in;
    -moz-transition: background-color 500ms ease-in,color 500ms ease-in;
    -o-transition: background-color 500ms  ease-in,color 500ms ease-in;
    transition: background-color 500ms ease-in,color 500ms ease-in;
}

.animation-bar{
	animation: increase ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}

.animation-bar2{
	animation: increase2 ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}

.animation-bar-maxipod{
	animation: increase-maxipod ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
#headerMap {
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 2px solid #fff;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(0,0,0,.3);
        margin-bottom: 22px;
        text-align: center;
        cursor: pointer;
      }
      #headerMap p {
      margin: 0;
        padding-left: 5px;
        padding-right: 5px;
        color: rgb(25,25,25);
      }
#legend {
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 2px solid #fff;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(0,0,0,.3);
        margin-bottom: 22px;
        text-align: left;
      }
      #legend h3 {
      margin-top: 0;
        padding-left: 5px;
        padding-right: 5px;
        color: rgb(25,25,25);
      }
      #legend img {
        vertical-align: middle;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 40%;
        z-index:1005;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #c5c5c5;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
#map{
	width: 100%;
	height: 600px;
	background-color: grey;
}
#map2{
	width: 100%;
	height: 600px;
	background-color: grey;
}
.animation-bar-rpi-awakens{
	animation: increase-rpi-awakens ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-embedded{
	animation: increase-embedded ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-front-end{
	animation: increase-front-end ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-hc11{
	animation: increase-hc11 ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-esp8266{
	animation: increase-esp8266 ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-datalogger{
	animation: increase-datalogger ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.animation-bar-data-processing{
	animation: increase-data-processing ease-in-out 2s;
	animation-fill-mode: forwards;
	height:6px;
	background-color:transparent;
	position: absolute;
	width:0%;
	z-index:9999;
}
.anim-drop{
	-webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        animation-duration: 1s;
}

.round-border{
	border-radius:50%;
	border-color:black;
	border-width:2px;
	width:100%;
	height:100%;
}
.anim-throw{
	-webkit-animation-name: fadeOutUp;
        animation-name: fadeOutUp;
        animation-duration: 1s;
}
.cBlack{
	color:#000;
}
.cGray{
        color:#eaeaea;
}
.shadow {
  -moz-box-shadow:    0 8px 50px -5px #ccc;
  -webkit-box-shadow: 0 8px 50px -5px #ccc;
  box-shadow:         0 8px 50px -5px #ccc;
}
body{
    background-color:#f5f5f5;
    display: none;
}

.cbgGray{
	background-color:#eaeaea;
}
.cbghc11{
	background-color: rgb(255,241,250);
}
.cbgMaxipod{
	background-color: rgb(231,223,222);
}
.cbgimage-processing{
	background-color: rgb(255,250,255);
}
.left{
  border-bottom-right-radius: 45px;
  border-top-right-radius: 45px;
  width:45px;
  height:90px;
  display:inline-block;
  position:absolute;
  left:0px;
  top:calc(50% - 45px);
  padding-top:18px;
  padding-left:5px;
  font-size:40px;
  text-align:left;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.right{
  border-bottom-left-radius: 45px;
  border-top-left-radius: 45px;
  width:45px;
  height:90px;
  display:inline-block;
  position:absolute;
  right:0px;
  top:calc(50% - 45px);
  padding-top:18px;
  padding-right:5px;
  font-size:40px;
  text-align:right;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.esp8266:hover,esp8266:focus{
	background-color:rgb(48,155,150);
	color:white;
}
.esp8266{
  background-color:rgb(42,122,193);
}
.RPi:hover,.RPi:focus{
	background-color:rgb(42,122,193);
	color:white;
}
.coverageRight{
    background-color:rgb(42,122,193);
}
.coverageRight:hover, coverageRight:focus{
    color:white;
    background-color:rgb(227,58,81);
}
.coverageLeft{
    background-color:rgb(227,58,81);
}
.coverageLeft:hover, coverageLeft:focus{
    color:white;
    background-color:rgb(42,122,193);
}
.RPi{
  background-color:rgb(48,155,150);
}
.RPiRight:hover,.RPiRight:focus{
	background-color:rgb(227,58,81);
	color:white;
}
.RPiRight{
  background-color:rgb(48,155,150);
}
.hc11:hover,.hc11:focus{
	background-color:rgb(48,155,150);
	color:white;
}
.hc11{
  background-color:rgb(227,58,81);
}
.maxipod:hover,.maxipod:focus{
	background-color:rgb(0,105,91);
	color:white;
}
.maxipod{
  background-color:#777777;
}
.maxipodRight:hover,.maxipodRight:focus{
	background-color:#777777;
	color:white;
}
.maxipodRight{
  background-color:rgb(0,105,91);
}
.datalogger:hover,.datalogger:focus{
	background-color:rgb(227,58,81);
	color:white;
}
.datalogger{
  background-color:rgb(102,65,73);
}
.hc11Right:hover,.hc11Right:focus{
	background-color:rgb(102,65,73);
	color:white;
}
.hc11Right{
  background-color:rgb(227,58,81);
}
.imageProcessingRight:hover,.imageProcessingRight:focus{
  	background-color:rgb(42,122,193);
	color:white;
}
.imageProcessingRight{
  background-color:rgb(102,65,73);
}
.titanicLeft:hover,.titanicLeft:focus{
  	background-color:rgb(102,65,73);
	color:white;
}
.titanicLeft{
  background-color:rgb(42,122,193);
}
.button {
    background-color: #ffd54f; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}
.cbgesp8266{
	background-color:rgb(241,250,255);
}
.cbgfreesoccerlogos{
	background-color:rgb(239,235,239);
}
.cbgdatalogger{
	background-color:rgb(250,241,255);
}
.cbgrpi-awakens{
	background-color:rgb(241,255,250);
}

.cbgstatisticalarts{
	background-color:rgb(251,250,255);
}
.bsesp8266-round:hover{
	box-shadow: 0px 0px 20px #fff;
}
.bsesp8266-round{
	transition: box-shadow 0.3s ease-in-out;
}
.bsR-round{
	box-shadow: 0px 0px 20px #777;
	transition: box-shadow 0.3s ease-in-out;
}

.bsR-round:hover{
	box-shadow: 0px 0px 30px #000;
}
.button5 {
    background-color: rgb(250,241,255);
    color: black; 
    border: 2px solid rgba(62,25,33,1); 
    border-radius:10px;
}

.button5:hover {
    background-color: rgba(102,65,73,1); 
    color: white;
}
.button7 {
    background-color: rgb(239,235,239);
    color: black; 
    border: 2px solid black; 
    border-radius:10px;
}

.button7:hover {
    background-color: rgba(0,105,91,1); 
    color: white;
}
.button1 {
    background-color: rgba(241,237,234,1); 
    color: black; 
    border: 2px solid rgba(54,33,33,1); 
    border-radius:10px;
}

.button1:hover {
    background-color: rgba(87,72,69,1); 
    color: white;
}
.button4 {
    background-color: rgb(255,241,250);
    color: rgb(187,18,41); 
    border: 2px solid rgba(187,18,41,1); 
    border-radius:10px;
}

.button4:hover {
    background-color: rgb(227,58,81); 
    color: white;
}
.buttonGray {
    background-color:#eaeaea;
    color: #2f2f2f; 
    border: 2px solid black; 
    border-radius:10px;
}

.buttonGray:hover {
    background-color: #6f6f6f; 
    color: #eaeaea;
}
.button3 {
    background-color:rgb(241,255,250);
    color: rgb(8,101,100); 
    border: 2px solid rgba(8,101,100,1); 
    border-radius:10px;
}

.button3:hover {
    background-color: rgb(58,161,160); 
    color: white;
}
.button2 {
    background-color:rgb(241,250,255);
    color: rgb(4,82,153); 
    border: 2px solid rgba(14,92,163,1); 
    border-radius:10px;
}

.button2:hover {
    background-color: rgba(42,122,193,1); 
    color: white;
}
.pa80{
	padding-top:40px;
	padding-bottom:40px;
}
.pa0{
	padding:0;
}
.pat100{
	padding-top:100px;
}
.bg-hc11{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/hc11-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-heatmap{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/Heat-map-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-excel-vba{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/excel-vba-processing-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-coverage-analysis{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/coverage-analysis-wallpaper.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-datalogger{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/datalogger-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-statisticalarts{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/statistical_background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-image-processing{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/image-processing-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-titanic-kaggle{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/titanic_wallpaper_5.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-embedded{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/embedded-design-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-freesoccerlogos{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/freesoccerlogos-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-front-end{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/front-end-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-rpi-awakens{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/rpi-awakens-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-data-processing{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/data-processing-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-maxipod{
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/maxipod-bg-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg {
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/test.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bg-esp8266 {
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/esp8266-background.jpg');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-name: pulse;
    animation-duration: 25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.bgAbout {
    /* The image used */
    max-height:100%;
    height:100vh;
    width:100%;
    background-image: url('./../images/giphy.gif');
    position:relative;
    /* Full height */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.m-footer{
	padding-bottom: 30px;
	padding-top: 30px;
	background-color:#eaeaea;
}
.m-scene{
	height:100%;
}
.wrapper{
	top:30%;
	width:100%;
	text-align:center;
	position:absolute;
	
}
.wrapperAbout{
	top:40%;
	width:100%;
	text-align:center;
	position:absolute;
}


.wrapper h1, .wrapperAbout h1{
	font-size:10vh;
	padding-bottom:10px;
	letter-spacing:3px;
}

.wrapper h2, .wrapperAbout h2{
	font-size:25px;
}

.rMono{
	font-family:'Roboto Mono';
}

.rClassic{
	font-family:'Roboto';
}

.fw100{
	font-weight:100;
}
.fw300{
	font-weight:300;
}
.fw400{
	font-weight:400;
}
.fw700{
	font-weight:700;
}
.fw900{
	font-weight:900;
}

.fsi{
	font-style:italic;
}

.tac{
	text-align:center;
}

.tel{
	text-align:left;
}
.ter{
	text-align:right;
}
.pa20{
	padding-top:10px;
	padding-bottom:10px;
}
.fs2vh{
	font-size:3vh;
}
.cWhite{
	color:#fff;
}
.pa40{
	padding-top:20px;
	padding-bottom:20px;
}

.thumb48{
	width:48px;
	height:48px;
	margin-left:5px;
}

.thumb{
	width:32px;
	height:32px;
	margin-left:10px;
}


a:hover, a:focus{
	text-decoration:none;
}
@media screen and (max-width: 768px) { 
	.wrapper h1, .wrapperAbout h1{
		font-size:36px;
	}
	.wrapper{
		top:15%;
		width:100%;
		text-align:center;
		position:absolute;
	
	}
	.wrapperAbout{
		top:35%;
	}
	.linear:before,
	.linear:after,
	.linearWhite:before,
	.linearWhite:after {
	    width: 80px !important;
	}
}

@media screen and (max-width: 480px) { 
	.wrapper h1, .wrapperAbout h1{
		font-size:24px;
	}
	.wrapperAbout{
		top:42%;
	}
	.wrapper{
		top:35%;
		width:100%;
		text-align:center;
		position:absolute;
	
	}
	.linear:before,
	.linear:after,
	.linearWhite:before,
	.linearWhite:after {
	    width: 40px !important;
	}
}
.linear{
	text-align:center;
}
.linearWhite{
	text-align:center;
}
.mailLink{
	font-size:1.5em;
}
.linear:before,
.linear:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100px;
}

.linearWhite:before,
.linearWhite:after {
    background-color: #fff;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100px;
}
.linearWhite:before {
    right: 0.5em;
    margin-left: -50%;
}
.linearWhite:after {
    left: 0.5em;
    margin-right: -50%;
}
.linear:before {
    right: 0.5em;
    margin-left: -50%;
}
.linear:after {
    left: 0.5em;
    margin-right: -50%;
}
.containers {
  position: relative;
}
.boxing{
	box-shadow: 0px 2px 20px #aaaaaa;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
}

.containers:hover .overlay {
  opacity: .8;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}