/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */


@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,700);

* {
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
}
p:hover a{
  color:#3968a3;
}
p a{color:white;}
html, body{
  width:100%;
  
  /*height:100%;*/
}


body {
 /* font-family: 'Josefin Slab', serif;*/
  
  font-weight: 600;
  
  font-family: 'Roboto', sans-serif;
  padding:20px;/*40*/
  background: #eee;
  /*background: radial-gradient( #eee, #ccc);*/
  /*overflow: hidden;*/
  transition: 0.5s all;
}


.wrapper {
  transform-style: preserve-3d;
  margin: 0 auto;
  width:90%;
  height:1000px;
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  margin: auto;
}
/*
.wrapper:after {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  display: block;
  content: '';
  height: 22px;
  width: 100%;
  background: url('http://www.kikk.be/2015/files/templates/kikk2015/public/assets/images/floating-card-shadow.png') no-repeat;
  background-size: 100%;
}*/

/*.bloc:hover{
  background-size:100%;
  
}*/

.bloc {
  height: 100%;
  width: 100%;
  
  background: url(https://www.thekpagroup.com/wp-content/uploads/2019/08/bert1.jpg) no-repeat center;
  background-size:cover;
  position: relative;
}

.content {
  transform: translateZ(80px) scale(1);
  -webkit-transform: translateZ(80px) scale(1);
  height: 100px;
  width: 600px;
  position: absolute;
  margin:auto;
  top: 0px;
  right: 900px;
  bottom: 700px;
  left:100px;
  padding:20px;
  color: #000;
  z-index: 3;
}

.content2 {
  transform: translateZ(40px) scale(1);
  -webkit-transform: translateZ(40px) scale(1);
  background: #999;
  opacity: 0.4;
  left: -100px;
  padding: 0;
  z-index: 2;
}

.content p/*:nth-of-type(1) */{
  font-size:20px;
  line-height:60px;
  position: relative;
 
  top:20px;
  left:-80px;
}
/*.content p:nth-of-type(2) {
  position: absolute;
  bottom:250px;
  left:-80px;
  right: 100px;
}*/

/*////////////*/
/*.pulse {
  margin-left:43%;
  margin-top:32%;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3968a3;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse2 {
  margin-left:39%;
  margin-top:41%;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3968a3;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.6);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.6);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.6);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}*/
html{
/*height:100vh;*/
}
body{
/*min-height:100vh;*/
/*background: url(http://flowindie.us/bert1.jpg );
  background-size:cover;
  position: fixed;*/
}

#planp{
height:1080px;
margin-top:100vh;
width:100%
position:static;
}
#gly{
margin-top:10vh;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
   /* background-color: rgb(0,0,0); */ /* Fallback color */
    background-color: rgba(0,0,0,1); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    margin: 20vh auto;
    /*background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;*/
    max-width: 90%;
    width:90vw;
    max-height:95vh;
}

/* The Close Button */
.close {
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
    color: #aaaaaa;
    /*float: right;*/
    position:fixed; 
    top:40px;
    left:95vw;
    font-size: 20px;
    font-weight: bold;
    margin: 11px -10px;
}

.close:hover,
.close:focus {
    color: #3968a3;
    text-decoration: none;
    cursor: pointer;
}
.myBtn{

}
#myImg{
cursor:pointer;
}
/*.ima{
width:calc(100% - 30px);
margin:0 auto;
}*/
.ima{
max-width:calc(100% - 50px);
margin:0 auto;
max-height:90vh;
display:block;
}

.pinn{
  transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
  -webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
  margin-left:52%;
  margin-top:49%;
  display: block;
  height: 40px;
  position:absolute;
}
/*
.pinn:hover{
opacity:0.6;
}
.pinn2:hover{
opacity:0.6;
}
.pinn3:hover{
opacity:0.6;
}
.pinn4:hover{
opacity:0.6;
}
.pinn5:hover{
opacity:0.6;
}
.pinn6:hover{
opacity:0.6;
}
.pinn7:hover{
opacity:0.6;
}
.pinn8:hover{
opacity:0.6;
}*/
.pinn2{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:31%;
  margin-top:72%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn3{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:44%;
  margin-top:16%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn4{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:57%;
  margin-top:106%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn5{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:41%;
  margin-top:84%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn6{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:86%;
  margin-top:83%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn7{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:65%;
  margin-top:95%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn8{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:11%;
  margin-top:72%;
  display: block;
  height: 40px;
  position:absolute;
}
.pinn9{
transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
-webkit-transform: translateZ(20px) rotateX(-90deg) rotateY(50deg) rotateZ(6deg);
margin-left:27%;
  margin-top:54%;
  display: block;
  height: 40px;
  position:absolute;
}

.bloc2:hover{
  background-size:100%;
  
}

.bloc2 {

  height: 100%;
  width: 100%;
  background: url("btmplan.png") no-repeat center;
  background-size:100%;
  position: relative;
}

.content3 {
  transform: translateZ(80px) rotateY(8deg) rotateZ(-29deg) rotateX(-82deg)  scale(1);
  -webkit-transform: translateZ(80px) rotateY(8deg) rotateZ(-29deg) rotateX(-82deg) scale(1);
  height: 360px;
  width: 300px;
  position: absolute;
  margin:auto;
  top: 0px;
  right: 500px;
  bottom: 70px;
  left:100px;
  padding:20px;
  color: #000;
  z-index: 3;
}

/*.content2 {
  transform: translateZ(40px) rotateY(8deg) rotateZ(-29deg) rotateX(-82deg) scale(1);*/
 /* -webkit-transform: translateZ(40px) rotateY(8deg) rotateZ(-29deg) rotateX(-82deg) scale(1);*/
/*  -webkit-transform: translateZ(10px) rotateY(0deg) rotateZ(0deg)  scale(1);
  background: ;
  opacity: 1;
  left: -80px;
  padding: 0;
  z-index: 2;
}*/

.content3 p:nth-of-type(1) {
  font-size:20px;
  line-height:60px;
  position: absolute;
  top:20px;
  left:-80px;
}
.content3 p:nth-of-type(2) {
  position: absolute;
  bottom:250px;
  left:-80px;
  right: 100px;
}

.wrapper2 {

  transform-style: preserve-3d;
  margin: 0 auto;
  width:900px;
  height:1030px;
  position: static;
  top: 0;left: 0;right: 0;bottom: 0;
  margin: auto;
}

.cen {
   width: 80px;
   height: 80px;
   position: absolute;
   
}
.cen:hover{
-webkit-filter: contrast(150%); /* Safari 6.0 - 9.0 */
    filter: contrast(150%);
}

/*grid*/

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: calc(100% / 3); /* IE10 */
    flex: calc(100% / 3);
    max-width: calc(100% / 3);
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

@media (max-width: 800px) {
.close {
left:90vw;

}

.cen {
display: block;
    left: 0;
    right: 0;
    position: relative;

}

.mcen{

    top: 30px;
    left: 0;
    font-size: 25px;
    right: 0;
    color: #3968a3;
    display: block;
    position: relative;
    text-align: center;

}
.mcen:hover{
color:black;
}

    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    .wrapper{
    display:none!important;
    }
    #planp{
    display:none!important;
    height:0px;
    }
}
@media(max-width:1400px){
.content {
top:225px;
left:110px;
}
.content2{
left:35px;
}
.wrapper{
height:95vh;
}
}
@media (min-width:800px){
.moh{

display:none;
}}
.cen{
margin-left:auto;
margin-right:auto;
}

.column img:hover{

-webkit-filter: contrast(150%); /* Safari 6.0 - 9.0 */
    filter: contrast(150%);
}