@charset "utf-8";
/* CSS Document */

body, html {
	margin: 0;
	font-family: 'Hind', sans-serif;
}

.h1-hin-con{
	font-family: 'Hind', sans-serif;
	font-size: 24px;
	color: #FC0;
}
.h2-hin-con{
	font-family: 'Hind', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height:0px;
	color: #FFF;
}

.button {
	font-family: 'Hind', sans-serif;
	font-weight: 700;	
    background-color: #999;
    border: none;
    color: #fff;
    padding: 1px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

.button:hover {
	font-family: 'Hind', sans-serif;
	font-weight: 700;	
    background-color: #FC0;
    color: #666;
}

#imatica-logo{
	width:150px;
	position: fixed;
	top: 20px;
	left: 0px;
	z-index:100;
}

#iso{
	float:left; 
	width:172px;
	padding-top:40px;
	padding-left:160px;
}

#imatica-iso{
	width:172px;
}

hr {
    border: none;
    height: 1px;
    color: #999;
    background-color: #999;
}

#imgpres{
	position:relative;
	width:100%; 
	height:100vh;
	background-image:url(../im-img/img-portfolio/elmer-1.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:90%;
	z-index:97;	  
}

/*bots*/
  
#sticky {
	display: none;
}

#sticky.fixed {
	display: block;
	position: fixed;
	top: 110px;
	margin-right:15px;
	padding-left:30px;
	width: 100px;
	z-index: 98;
}

#bots{
	position: relative;
	text-align:center;
	white-space: nowrap;;
}



a{
	text-decoration:none;
	color:#333;
	font-size:18px;
	font-family: 'Cormorant', serif;
}


.item-i a p.n-i span{
	position: relative;
	content: 'I';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 2s;
}
.item-i:hover a p.n-i span{
	display: none;
	text-decoration:none;
}
.item-i:hover a p.n-i:after{
	content: 'Inicio';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}

/*bot marca*/
.item-m a p.n-m span{
	position: relative;
	content: 'M';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.item-m:hover a p.n-m span{
	display: none;
	text-decoration:none;
}
.item-m:hover a p.n-m:after{
	content: 'Marca';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}

/*bot grafica*/
.item-g a p.n-g span{
	position: relative;
	content: 'G';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.item-g:hover a p.n-g span{
	display: none;
	text-decoration:none;
}
.item-g:hover a p.n-g:after{
	content: 'Gráfica';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}
   .item-g a p.n-g span:active{
	color:#000;
	position: relative;
	content: 'ráfica';
	text-decoration:none;
  }

/*bot interactivo*/
.item-v a p.n-v span{
	position: relative;
	content: 'V';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.item-v:hover a p.n-v span{
	display: none;
	text-decoration:none;
}
.item-v:hover a p.n-v:after{
	content: 'Interactivo';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}

/*bot 3d*/
.item-d a p.n-d span{
	position: relative;
	content: '3';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.item-d:hover a p.n-d span{
	display: none;
	text-decoration:none;
}
.item-d:hover a p.n-d:after{
	content: '3D';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}

/*bot contacto*/
.item-m a p.n-c span{
	position: relative;
	content: 'C';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.item-c:hover a p.n-c span{
	display: none;
	text-decoration:none;
}
.item-c:hover a p.n-c:after{
	content: 'Contacto';
	font-style: italic;
	text-decoration:none;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Standard syntax */
@keyframes example {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Standard syntax */
@keyframes example2 {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

@media (pointer: coarse) {
  .item-i a p.n-i:after{
	color:#000;
	position: relative;
	content: 'nicio';
	text-decoration:none;
  }
  .item-m a p.n-m:after{
	color:#000;
	position: relative;
	content: 'arca';
	text-decoration:none;
  }
   .item-g a p.n-g:after{
	color:#000;
	position: relative;
	content: 'ráfica';
	text-decoration:none;
  }
  .item-v a p.n-v:after{
	color:#000;
	position: relative;
	content: 'nteractivo';
	text-decoration:none;
  }
  .item-d a p.n-d:after{
	color:#000;
	position: relative;
	content: 'D';
	text-decoration:none;
  }
  .item-c a p.n-c:after{
	color:#000;
	position: relative;
	content: 'ontacto';
	text-decoration:none;
  }
}
  
.plak{ 
	position: fixed;
	top: 0px;
	left: 30px;
	background: rgba(255, 255, 255, 0.85);
	width: 100px;
	height: 100vh;
	z-index: 96;
}

#worksCont{
	text-align: center;
	padding-top: 100px;
	padding-bottom: 120px;
	width:100%;
	line-height: 0.8;
	overflow:hidden;
	z-index:-100;
	background-image:url("../im-img/img-portfolio/Imatica_fnd.jpg");
	background-attachment:fixed;
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}

.cuota{
	align:left;
	height:80px;
	marging-right:5px;
}

#cita{
	display: table;
	margin: 0 auto;
	max-width:700px;	
}

.frase{
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
	
}

.firma{
	text-align: right;
	font-family: 'Hind', sans-serif;
	font-size: 24px;
	padding-right: 50px;
	font-style: normal;
	font-weight: 300;
}

#porid{
	border:none;
}

#pie{
	width:100%;
	display:inline-flex;
	background-color: #666;
}

#isopie{
	float:left;
	width:172px;
	padding-top:50px;
	padding-right:20px;
	padding-left:140px;
}

#hr{
	width:100%;
}

#contacto{
	float:left;
	width:60%;
	padding-top: 110px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:50px;
	background-color: #666;
}

.campo{
	width:100%;
}

#map{
	width:60%;
	padding-top: 120px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:0px;
	background-color: #666;
}

#copy{
	font-size:11px;
	color:#999;
	padding:10px 10px 10px 150px; 
	background-color: #666;
}
  
@media screen and (max-width: 768px) { 

  #imatica-logo{
	  top: 5px;
	  left:10px;
	  width:100px;
  }
  
  #iso{  
	  padding-top:10px;
	  padding-left:110px;
  }
  
  #sticky.fixed {
	padding-left:20px;
  }
  
  a{
	font-size:16px;
  }
  
  #bots{
	  font-size:14;
	  color:#000;
	  width:80px;
	  line-height: 0px;
	  top: -30px;
  }
  
  .plak{ 
	  top: 0px;
	  left:20px;
	  width:80px;
  }
  
  #imgpres{ 
	  width: 100%;
	  position: relative;
  }
  
  .workClimg{
	   height:100vh; 
  }

  #worksCont{
	  padding-top: 30px;
	  padding-bottom: 20px;
	  font-family: Hind, sans-serif;
  }
  
  #pie{
	  width:100%;
	  display:block;
  }
  #isopie{
	  float:none;
	  width:68%;
	  padding-right:10px;
	  padding-left:110px;
  }
  
  #contacto{
	  float: none;
	  width: 68%;
	  padding-top: 20px;
	  padding-left: 120px;
	  padding-right: 10px;
	  padding-bottom: 20px;
	  overflow: hidden;
	  background-color: #666;
	  color: #FFF;
  }
  
  #map{
	  float:none;
	  width:68%;
	  padding-top: 20px;
	  padding-left:120px;
	  padding-right:10px;
	  padding-bottom:20px;
	  overflow:hidden;
	  background-color: #666;
  }

  #copy{
	  padding:10px 10px 10px 120px;
  }
}
  
@media screen and (max-width: 480px) {

  #imatica-logo{
	  top: 10px;
	  left:0px;
	  width:100px;
  }
  
  #iso{  
	  width:172px;
  }
  
  #imatica-iso{
	  width:160px;
	  padding-top:10px;
	  padding-left:0px;
  }
  
  #sticky.fixed {
	  padding-left:10px;
  }
  
  #bots{
	  font-size:14;
	  color:#000;
	  width:80px;
	  line-height: 0px;
	  top: -30px;
  }
  
  a{
	  font-size:14px;
  }
  .item-i a p.n-i:after{
	color:#000;
	position: relative;
	content: 'nicio';
	text-decoration:none;
  }
  .item-m a p.n-m:after{
	color:#000;
	position: relative;
	content: 'arca';
	text-decoration:none;
  }
   .item-g a p.n-g:after{
	color:#000;
	position: relative;
	content: 'ráfica';
	text-decoration:none;
  }
  .item-v a p.n-v:after{
	color:#000;
	position: relative;
	content: 'nteractivo';
	text-decoration:none;
  }
  .item-d a p.n-d:after{
	color:#000;
	position: relative;
	content: 'D';
	text-decoration:none;
  }
  .item-c a p.n-c:after{
	color:#000;
	position: relative;
	content: 'ontacto';
	text-decoration:none;
  }
  
  .plak{ 
	  top: 0px;
	  left:10px;
	  width:80px;
	}
	
#imgpres{
	width:100%;
	/*background-image:url(../im-img/img-portfolio/elmer-1.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:90%;
	z-index:97;	  */
}
  
  #worksCont{
	  padding-top:0px;
	  padding-bottom:20px;
	  margin-top:-60px;
  }

  .cuota{
	  height:35px;
  }
  
  #cita{
	  display: table;
	  padding-left:110px;	
  }
  
  .frase{
	  font-family: 'Playfair Display', serif;
	  font-size: 18px;
	  font-weight: bold;
	  font-style: italic;
	  text-align: left;
	  
  }
  
  .firma{
	  text-align: center;
	  font-family: 'Hind', sans-serif;
	  font-size: 21px;
	  font-style: normal;
	  font-weight: 300;
  }
  
  #isopie{
	  float:none;
	  width:160px;
	  padding-right:10px;
	  padding-left:95px;
  }
  
  #contacto{
	  padding-right: 5px;
	  padding-left: 100px;
	  width: 62%;
  }
  
  #map{
	  padding-right: 5px;
	  padding-left: 110px;
	  width:56%;
  }

  #copy{
	  padding:10px 10px 10px 110px;
  }
}

@media (hover: none) {
	  
  .item-i a p.n-i:after{
	color:#000;
	position: relative;
	content: 'nicio';
	text-decoration:none;
  }
  .item-m a p.n-m:after{
	color:#000;
	position: relative;
	content: 'arca';
	text-decoration:none;
  }
   .item-g a p.n-g:after{
	color:#000;
	position: relative;
	content: 'ráfica';
	text-decoration:none;
  }
  .item-v a p.n-v:after{
	color:#000;
	position: relative;
	content: 'nteractivo';
	text-decoration:none;
  }
  .item-d a p.n-d:after{
	color:#000;
	position: relative;
	content: 'D';
	text-decoration:none;
  }
  .item-c a p.n-c:after{
	color:#000;
	position: relative;
	content: 'ontacto';
	text-decoration:none;
  }
}
/* CSS Document */