body{

	background-color: white;
	overflow-x:hidden;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

#phone img{
  
  width: 15%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  clear: initial;
}

#desktop img{
  width:50%;
  box-shadow: 4px 4px 10px #d6d6d6;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
}

#tablet img{

  width: 40%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  clear: initial;
}

.mySlides video{

    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:50%;
    height: auto;
    box-shadow: 4px 4px 10px #d6d6d6;

} 

* {
  box-sizing: border-box;
  background-color: transparent;
}

a{

	text-decoration: none;
	color: black;
	
}

.open-close-button {
  bottom: 2.5%;
  left: 1.5%;
  width: 6.2em;
  height: 6.2em;
  border: none;
  position: absolute;
  z-index: 1;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}
.open-close-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 80%;
  height: 9%;
  left: 11%;
  top: 47%;
}
.open-close-button:after {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 9%;
  height: 80%;
  left: 47%;
  top: 11%;
}
.open-close-button.open {
  background-color: transparent;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  
}
.open-close-button.open:after {
  background-color: transparent;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  
}
.open-close-button.open:before {


 
}


.container{
	
	width: 100%;
	background-color: white;
  height: 100%;
  margin: 0 auto;
  position: relative;	
}

#text{

	position: absolute;
	background-color: white;
	width: 22%;
	height: 60%;
	top: 70px;
	left: 2.2%;
	
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: black;
line-height: 27px;
z-index:-1;
}

.info{

border:none;
color: black;
background-color: transparent;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 60px;
left: 2%;
bottom: 1.5%;
position: absolute;
z-index:1;

}

.mySlides img{

	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*width:50%;*/
   /* height: auto;
    -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; */
}

.projectname{

color: transparent;
-webkit-text-stroke: 1.5px black;
font-weight: 800;
letter-spacing: 1.4px;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
position: absolute;
top: 2%;
left: 2%;
z-index: 1;


}

sup{
/*color: #ffdab9;*/
color: #dbc6b9;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 16px;

}

.back{
	-webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    float: right
}

.back img{

	right: 2%;
	top: 2%;
	position: absolute;
	width: 55px;
	height: 55px;
	
}

button:focus {outline:0;}

.prev {

border:none;
background-color: transparent;
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
position: fixed;
visibility: hidden;


}

.next{

border:none;
background-color: transparent;
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
position: fixed;
visibility: hidden;

}

#counter{
	color: black;
	position: absolute;
	letter-spacing: -2px;
	font-family:'Montserrat', sans-serif;
	font-size: 55px; 
	font-weight: 500;
	bottom: 2%;
	right: 2%;
}

@media screen and (max-width: 1184px){

.mySlides img{

	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*width:65%;
    height: auto;*/
}

.mySlides video{

    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:65%;
    height: auto;
    box-shadow: 4px 4px 10px #d6d6d6;

} 

#desktop img{
  width:65%;
    height: auto;
}

#phone img{
  
  width: 20%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
}

#tablet img{

  width: 50%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  /*margin-bottom: 70px;*/ 
}

#text{

	position: absolute;
	background-color: white;
	width: 30%;
	height: 60%;
	top: 70px;
	left: 2.2%;
	z-index:-1;
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: black;
line-height: 27px;
}

}

@media screen and (max-width: 870px){

.mySlides img{

	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*width:75%;
    height: auto;*/
}

.mySlides video{

    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:75%;
    height: auto;
    box-shadow: 4px 4px 10px #d6d6d6;

} 

#desktop img{
  width:75%;
    height: auto;
}


#phone img{
  
  width: 25%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
}

#tablet img{

  width: 65%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  /*margin-bottom: 70px;*/ 
}

#text{

	position: absolute;
	background-color: white;
	width: 35%;
	height: 60%;
	top: 60px;
	left: 2.2%;
	z-index:-1;
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 19px;
color: black;
line-height: 26px;
}

.back img{

	right: 2%;
	top: 2%;
	position: absolute;
	width: 40px;
	height: 40px;
	
}

.projectname{


font-family: 'Montserrat', sans-serif;
font-size: 40px;
position: absolute;
top: 2%;
left: 2%;
z-index: 1;


}

#counter{
	/*color: #ffdab9;*/
	color: black;
	position: absolute;
	/*letter-spacing: -4px;*/
	font-family:'Montserrat', sans-serif;
	font-size: 40px; 
	font-weight: 500;
	bottom: 1.5%;
	right: 2%;
}

.open-close-button {
  bottom: 2%;
  left: 1.3%;
  width: 5em;
  height: 5em;
  border: none;
  position: absolute;
  /*-moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);*/
}
.open-close-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 80%;
  height: 8.5%;
  left: 11%;
  top: 47%;
}
.open-close-button:after {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 8.5%;
  height: 80%;
  left: 47%;
  top: 11%;
}

}

@media screen and (max-width: 598px){

.mySlides img{

	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*width:90%;
    height: auto;*/
}

#desktop img{
  width:90%;
    height: auto;
}
.mySlides video{

    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:90%;
    height: auto;
    box-shadow: 4px 4px 10px #d6d6d6;

}

#phone img{
  
  width: 30%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
}

#tablet img{

  width: 80%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  /*margin-bottom: 70px;*/ 
}

#text{

	position: absolute;
	background-color: white;
	width: 50%;
	height: 70%;
	top: 56px;
	left: 3.2%;
	z-index:-1;
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 19px;
color: black;
line-height: 26px;
}

.back img{

	right: 3%;
	top: 2%;
	position: absolute;
	width: 35px;
	height: 35px;
	
}

.projectname{


font-family: 'Montserrat', sans-serif;
font-size: 35px;
position: absolute;
top: 2%;
left: 3%;
z-index: 1;


}

#counter{
	/*color: #ffdab9;*/
	color: black;
	position: absolute;
	/*letter-spacing: -4px;*/
	font-family:'Montserrat', sans-serif;
	font-size: 35px; 
	font-weight: 500;
	bottom: 1.5%;
	right: 3%;
}

.prev {

border:none;
background-color: transparent;
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 35px;
position: fixed;
visibility: hidden;

}

.next{

border:none;
background-color: transparent;
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 35px;
position: fixed;
visibility: hidden;

}


}

@media screen and (max-width: 412px){

#text{

	position: absolute;
	background-color: white;
	width: 70%;
	height: 60%;
	top: 53px;
	left: 3.2%;
	z-index:-1;
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 19px;
color: black;
line-height: 26px;
}

.open-close-button {
  bottom: 1.8%;
  left: 1.3%;
  width: 4em;
  height: 4em;
  border: none;
  position: absolute;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out,
  -webkit-transform 0.3s ease-in-out;
}

.open-close-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 80%;
  height: 7%;
  left: 11%;
  top: 48%;
}
.open-close-button:after {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 8%;
  height: 80%;
  left: 47%;
  top: 11%;
}

.open-close-button.open {
  background-color: transparent;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: -17%;
}

.open-close-button.open:after {
  background-color: transparent;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); 
}

#phone img{
  
  width: 30%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
}

#tablet img{

  width: 85%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  /*margin-bottom: 70px;*/ 
}

}

@media only screen and (device-width : 375px){

.wrapper{

  overflow-x:hidden;
  
}
.container{
  
  max-width: 100%; 
  background-color: white;
  height: 100%;
  margin: 0 auto;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

.open-close-button {
  bottom: 1.8%;
  left: 4%;
  width: 7.5em;
  height: 7.5em;
  border: none;
  position: absolute;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out,
  -webkit-transform 0.3s ease-in-out;
}

.open-close-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 80%;
  height: 7%;
  left: 11%;
  top: 48%;
}
.open-close-button:after {
  content: "";
  display: block;
  position: absolute;
  background-color: black;
  width: 7%;
  height: 80%;
  left: 47%;
  top: 11%;
}

.open-close-button.open {
  background-color: transparent;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: -17%;
  
}
.open-close-button.open:after {
  background-color: transparent;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}


#text{

	position: absolute;
	background-color: white;
	width: 70%;
	height: 70%;
	top: 95px;
	left: 5%;
	z-index:-1;
	
}

.explain{

font-weight: 300;
font-family: 'Montserrat', sans-serif;
font-size: 46px;
color: black;
line-height: 52px;
}

.info{

border:none;
color: black;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
left: 3%;
bottom: 3%;
position: absolute;
z-index:1;
}

.mySlides img{

	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*width:90%;
    height: auto;*/
}

#desktop img{
  width:90%;
    height: auto;
}

.mySlides video{

    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:90%;
    height: auto;
    box-shadow: 4px 4px 10px #d6d6d6;

}

#phone img{
  
  width: 30%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
}

#tablet img{

  width: 70%;
  -moz-box-shadow: 4px 4px 10px #d6d6d6; 
  -webkit-box-shadow: 4px 4px 10px #d6d6d6; 
  box-shadow: 4px 4px 10px #d6d6d6; 
  -moz-border-radius:20px; 
  -webkit-border-radius:20px; 
  border-radius:20px;
  /*margin-bottom: 70px;*/ 
}

.projectname{

color: transparent;
-webkit-text-stroke: 2.5px black;
font-weight: 800;
letter-spacing: 1.4px;
font-family: 'Montserrat', sans-serif;
font-size: 65px;
position: absolute;
top: 2%;
left: 5%;


}

sup{
/*color: #ffdab9;*/
color: #dbc6b9;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
letter-spacing: 0.5px;

}

.back{
	-webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    float: right
}

.back img{

	right: 5%;
	top: 2%;
	position: absolute;
	width: 65px;
	height: 65px;
	
}

button:focus {outline:0;}

.prev {

border:none;
background-color: transparent;
/*color: #ffdab9;*/
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
position: relative;
margin: 0 auto;
top: 8%;
margin-top: -8px;
visibility: hidden;
display: none;


}

.next{

border:none;
background-color: transparent;
/*color: #ffdab9;*/
color: black;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
position: relative;
margin: 0 auto;
top: 8%;
margin-top: -8px;
visibility: hidden;
display: none;
}


#counter{
	/*color: #ffdab9;*/
	color: black;
	position: absolute;
  /*letter-spacing: -4px;*/
	font-family:'Montserrat', sans-serif;
	font-size: 70px; 
	font-weight: 500;
	bottom: 2%;
	right: 5%;
}


}