body {
	margin: 0px;
    text-align: center;
    font-family: Verdana, Helvetica, Sans-Serif;
    background-color: #272727;
    color: #7e7e7e;
}

header {
  	width: 100%;
  	position: absolute;
    z-index:50;
   	left: 2em;
   	top: 7em;
}

header img{
	width: 10%;
	margin: 50px;
	float:left;

}


h1,a {
	color: white;
}


.d200x300{
	height: 300px;
	width: 200px;
}

.logoFixed{
	position: absolute;
	top: 5px;
	left:5px;
	height: 100px;
	width: 166px;
}

#share{
	margin: 20px; 	
}

#share div{
	display: block;
	margin:20px;	

}



.wa_btn {
	display: inline-block;
    width: 115px;
    height: 28px;
    text-align: center;
    border-radius: 5px;
    border: 1px;
    color: #4267b2;
    text-decoration:none;
}

.wa_btn img{
	width: 25px;
	height: 25px;
	vertical-align: text-top;

}

.wa_btn span{
	
	vertical-align: middle;

}



#changeFullScreenButton{
 	position: absolute;
    top: 5px;
    right: 5px;
    height: 60px;
    width: 60px;
    background-color: rgba(51,51,51,0.7);
    background-image: url("full.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    z-index:9999;
}

#changeHDButton{
 	position: absolute;
    top: 70px;
    right: 5px;
    height: 60px;
    width: 60px;
    background-color: rgba(51,51,51,0.7);
    background-image: url("hd.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    z-index:9999;
}

#changeVRButton{
	display: none;
 	position: absolute;
    top: 200px;
    right: 5px;
    height: 60px;
    width: 60px;
    background-color: rgba(51,51,51,0.7);
    background-image: url("vr.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    z-index:9999;
}

#changeDeviceOrientationButton{
	display: none;
 	position: absolute;    
    top: 135px;
    right: 5px;
    height: 60px;
    width: 60px;
    background-color: rgba(51,51,51,0.7);
    background-image: url("pan.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    z-index:9999;
}

#goHomeButton{
 	position: absolute;    
    top: 5px;
    left: 5px;
    height: 60px;
    width: 60px;
    background-color: rgba(51,51,51,0.7);
    background-image: url("home.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    outline: none;
    z-index:9999;
}


#container {
	margin: 0 auto;
}

#dollHouse svg{

	width: 100%;
	height: 100%;

}

.pinLink{
	width: 12px;
	height: 24px;
}

.half{

	width:47%;
	display: inline-block;
	margin: 20px 0px;
	vertical-align: top;

}

.half img{

	padding: 20px 0px;

}

.left{
	float: left;
	margin-right: 10px;
}

.right{
	float: right;
	margin-left: 10px;
}


.half p{
	text-align: justify;
    text-justify: inter-word;
    margin: 0px;
}

.lang img {
	height: 1em;
}

#YouTubeVideo{
	display: inline-block;
}

.topnav {
	display: block;
	overflow: hidden;
   	z-index: 50;
  	width: 100%;
	text-align: right;
    padding: 2em;
    margin-left: -2em;
    background-color: #272727;
    left:-2em;

}

.topnav a {
    float: right;
    display: block;
    text-decoration: none;
    padding: 15px 15px 15px 0;
    color: #7e7e7e;
}

.topnav a:hover {
    background-color: #ddd;
    color: #7e7e7e;
}

.tel{
	text-decoration: none;
}

/*
#actual{
    background-color: #ddd;
    color: black;
}*/

.topnav .icon {

    display: none;

}

.content{
	display: inline-block;
	width: 90%;
	margin: auto;
}

.content h1,h2{
	/*text-align: left; */
}

.content p{
	text-align:justify;
	margin: 1em 0px;
	line-height: 1.6;
}

.pin{

	width: 1em;

}

#slider {
	position: relative;	
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: auto;
	
}

#slider img{
	position: relative;	
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: auto;	
}


#handAnimation{

	position: absolute;
    top: 50px;
    left: 50px;
    opacity: 0.7;
    z-index:9999;

}

#handAnimation img{
	
    width: 212px;
    height: 84px;
   
}

#handAnimation p{
	
  color: #7e7e7e;
  text-shadow: 2px 2px 4px #000000;

}


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


*:focus{
    outline: none;
}

#cintaSlider {

	width: 100%;
	height: 100%;

}

#cintaSlider img {

 	width: 100%;
	height: 100%;

}


#sphereSlider {

	height: 90%;	
}



#quote {
	margin:10px 20%;	
	border-color: gray;
	border-width:  2px  0px;
	border-style: solid;
}

#quote p{
	font-style: italic;
}

#menuServicios{
	margin: 20px;
}


#socialMedia a{
	display: inline-block;
	text-decoration: none;
	color: white;
	margin: 10px;
}

#socialMedia img{
	width:64px;
	height:64px;
}

#servicios{
	width: 90%;
	margin: auto;
}

#servicios p{
	text-align: justify;
    text-justify: inter-word;
	margin: auto;
	width:425px;

}

#servicios img{
	margin:10px;
	width:200px;
	height:300px;
}


#menuServicios a{
	display: inline-block;
	text-decoration: none;
	color: white;
	margin: 10px;
}


#menuProyectos{
	margin-bottom: 5%;
	margin-top: 5%;
}


#menuProyectos a{
	display: inline-block;
	text-decoration: none;
	color: white;
	margin: 10px;
}

#menuProyectosm {
	display: none;
}

#menuProyectosm div{
	margin: auto;
}


#menuServiciosm {
	display: none;
}

#menuServiciosm div{
	margin: auto;
}


#menuProyectosIndex{
	margin-bottom: 5%;
	margin-top: 5%;
}


#menuProyectosIndex a{
	display: inline-block;
	text-decoration: none;
	color: white;
	margin: 10px;
}




hr { 
    display: block;
    width: 90%;
	margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    border-width: 2px;
    border-style: inset;
} 

#contacto{
	width: 90%;
	margin: auto;
	margin: 20px auto;
	margin-bottom: 1em;
    border-collapse: collapse;
    padding: 10px;

}




#nosotros{
	float:left;
	text-align: justify;
	width: 45%;
	padding-left: 10px;

}

#nosotros img{
	width: 90%;
	margin: auto;
	padding-top: 10%;
}

.half img{
	width: 100%;
	height: 100%
}

.half svg{
	width: 100%;
	height: 100%
}


#mapa {
	width:23%;
	display: inline-block;
	text-align: left;
}


#formulario {
	width:23%;
	float:right;
	margin-bottom: 0px;	
	text-align: left;
}

 input, textarea{
 	width: 80%;
 	margin: 10px;
 	font-size: 80%;
 	border-radius: 10px;
 	border-style: none;
    font-family: Verdana, Helvetica, Sans-Serif;
 }

#formulario h4{
 	margin-left: 10px;
 }

 #formulario input{
 	height: 2em;
 }

 #formulario input[type="submit"]{
 	width: auto;

 }

textarea:focus, input:focus{
    outline: none;
}


footer{
	width: 90%;
	margin: auto;
	text-align: left;
    border-collapse: collapse;
	font-size: 60%;
	padding: 10px;
	position: relative;
	bottom: 0px
}




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

	.logoFixed{
		position: absolute;
		top: 5px;
		left:5px;
		height: 50px;
		width: 83px;
	}

	header {
	  	width: 100%;
	  	position: absolute;
	    z-index:50;
	   	left: 2em;
	   	top: 3em;
	}


	.pinLink{
		width: 14px;
		height: 28px;
	}

	#socialMedia img{
		width:36px;
		height:36px;
	}

    span.break {
		display: block;
    }

    #nosotros{
    	display: block;
    	width: 97%;
    }

    #formulario, #mapa{
    	width: 47%;
    }

    .topnav{
    	padding-top: 0;
    	padding-bottom: 0;
    }


	.topnav a {display: none;}

	.topnav a.icon {
	    float: right;
	    display: block;
	}

	.topnav.responsive {position: static;}

  	.topnav.responsive a.icon {
    	position: absolute;
    	right: 0;
    	top: 10px;	
  	}

  	.topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
    	margin-left: 20%;
  	}

  	#nosotros img{
		padding-top: 0px;

	}

	.half{

		width: 100%;
		display: block;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	
	}

	.left{
		float:none;
	}

	.right{
		float:none;
	}

	#share div{
		display: block;
		margin:10px;	
	}

	#handAnimation img{
    	width: 106px;
    	height: 42px;
	}

	#handAnimation p{
    	font-size: xx-small;
	}


}


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

	.pinLink{
		width: 18px;
		height: 36px;
	}

	#menuProyectosIndex{
		display: none;
	}

	#menuServicios{
		display: none;
	}

	#menuProyectosm {
		display: block;
	}

	#menuServiciosm {
		display: block;
	}

    #formulario, #mapa{
    	width: 97%;
    	margin: auto;
    	display: block;
    	float:none;
    }

    #formulario input,  #formulario textarea{
 	width: 97%;
 	margin: 5px auto;
 
 	}

 	#servicios p{
		width: 90%;
	}
}