body{
	background: #e9e9e9;
	font-weight: 400;
	font-size: 15px;
	color: #cccccc;
	overflow-y: scroll;
	overflow-x: hidden;
}


.cb-hg1{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg5.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 1;
    z-index: 1;

}
.cb-hg2{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg2.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 2;
	 -webkit-animation: imageAnimation 3s ease reverse;
    -moz-animation: imageAnimation 3s ease reverse;
    -o-animation: imageAnimation 3s ease reverse;
    -ms-animation: imageAnimation 3s ease reverse;
    animation: imageAnimation 3s ease reverse; 

}
.cb-hg3{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg4.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 3;
	    -webkit-animation: imageAnimation 3s ease 1s reverse;
    -moz-animation: imageAnimation 3s ease 1s reverse;
    -o-animation: imageAnimation 3s ease 1s reverse;
    -ms-animation: imageAnimation 3s ease 1s reverse;
    animation: imageAnimation 3s ease 1s reverse; 

}
.cb-hg4{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg3.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 4;
	    -webkit-animation: imageAnimation 3s ease 2s reverse;
    -moz-animation: imageAnimation 3s ease 2s reverse;
    -o-animation: imageAnimation 3s ease 2s reverse;
    -ms-animation: imageAnimation 3s ease 2s reverse;
    animation: imageAnimation 3s ease 2s reverse; 

}
.cb-hg5{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg5.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 5;
	    -webkit-animation: imageAnimation 3s ease 3s inherit;
    -moz-animation: imageAnimation 3s ease 3s inherit;
    -o-animation: imageAnimation 3s ease 3s inherit;
    -ms-animation: imageAnimation 3s ease 3s inherit;
    animation: imageAnimation 3s ease 3s inherit; 

}


/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    from { opacity:0; }
    to { opacity:1; }
}
@-moz-keyframes imageAnimation { 
    from { opacity:0; }
    to { opacity:1; }
}
@-o-keyframes imageAnimation { 
    from { opacity:0; }
    to { opacity:1; }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;}
    100% { opacity: 1}
}
@keyframes imageAnimation { 
    from { opacity:0; }
    to { opacity:1; }
}
.contact{ 
    width: 400px;
    height: auto;
    position: absolute;
    top: 25px;
    left: 60%;
	z-index:5
 
}
.contact img{ 
    width: 100px;
    height: auto;}
.icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left:15px;
  background-size: cover;
}
.icon-linkedin {
  background-image: url(../img/Linkedin.svg);
}
.icon-linkedin:hover,
.icon-linkedin:focus {
    background-image: url(../img/Linkedin_over.svg);
}
.icon-xing {
  background-image: url(../img/Xing.svg);
}
.icon-xing:hover,
.icon-xing:focus {
    background-image: url(../img/Xing_over.svg);
}

@media screen and (max-width: 1440px) { 
  .cb-hg1  {   background-size: cover; }
  .cb-hg2  {   background-size: cover; }
  .cb-hg3  {   background-size: cover; }
  .cb-hg4  {   background-size: cover; }
  .cb-hg5  {   background-size: cover; }

}
@media all and (max-width: 800px) { 
  .cb-hg1  {  background-image: url(../img/hg-Smartphone.png);
    background-size: contain;background-position: 50% 0% ; }
  .cb-hg2  {  background-image: url(../img/hg-Smartphone.png);
    background-size: contain; background-position: 50% 0% ;}
  .cb-hg3  {  background-image: url(../img/hg-Smartphone.png);
    background-size: contain; background-position: 50% 0% ;}
  .cb-hg4  {  background-image: url(../img/hg-Smartphone.png);
    background-size: contain;background-position: 50% 0% ; }
  .cb-hg5  {  background-image: url(../img/hg-Smartphone.png);
    background-size: contain;background-position: 50% 0% ;}
   .smart  {       width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 1;
    z-index: 11; }
	.contact{ 
    left: 50%;

 
}
}
@media screen 
and (orientation: portrait)  
and (min-resolution: 192dpi)
and (-webkit-min-device-pixel-ratio: 2)
{
.cb-hg1{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 1;
    z-index: 1;

}
.cb-hg2{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 2;
	 -webkit-animation: imageAnimation 3s ease reverse;
    -moz-animation: imageAnimation 3s ease reverse;
    -o-animation: imageAnimation 3s ease reverse;
    -ms-animation: imageAnimation 3s ease reverse;
    animation: imageAnimation 3s ease reverse; 

}
.cb-hg3{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 3;
	    -webkit-animation: imageAnimation 3s ease 1s reverse;
    -moz-animation: imageAnimation 3s ease 1s reverse;
    -o-animation: imageAnimation 3s ease 1s reverse;
    -ms-animation: imageAnimation 3s ease 1s reverse;
    animation: imageAnimation 3s ease 1s reverse; 

}
.cb-hg4{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 4;
	    -webkit-animation: imageAnimation 3s ease 2s reverse;
    -moz-animation: imageAnimation 3s ease 2s reverse;
    -o-animation: imageAnimation 3s ease 2s reverse;
    -ms-animation: imageAnimation 3s ease 2s reverse;
    animation: imageAnimation 3s ease 2s reverse; 

}
.cb-hg5{ 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
        background-image: url(../img/hg-Smartphone.png) ;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: 5;
	    -webkit-animation: imageAnimation 3s ease 3s inherit;
    -moz-animation: imageAnimation 3s ease 3s inherit;
    -o-animation: imageAnimation 3s ease 3s inherit;
    -ms-animation: imageAnimation 3s ease 3s inherit;
    animation: imageAnimation 3s ease 3s inherit; 

}
.contact{ 
    width: 60%;
    height: auto;
    position: absolute;
    top: 25px;
    left: 40%;
	z-index:5
 
}
.contact img{ 
    width: 250px;
    height: auto;}
.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-left:15px;
  background-size: cover;
}
.icon-linkedin {
  background-image: url(../img/Linkedin.svg);
}
.icon-linkedin:hover,
.icon-linkedin:focus {
    background-image: url(../img/Linkedin_over.svg);
}
.icon-xing {
  background-image: url(../img/Xing.svg);
}
.icon-xing:hover,
.icon-xing:focus {
    background-image: url(../img/Xing_over.svg);
}
}