@charset "UTF-8";

html, body, div, span, applet, object, iframe,
 p, blockquote, pre,
a, center, dl, dt, dd, ol, ul, li, article, aside,  footer, menu, nav,  section  {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;

 
}

  
body#portada ul#menu li:nth-child(1) a {
  background: white;
  color: #990000;

}
 

body#portada ul#menu li:nth-child(1) a,
body#sti ul#menu li:nth-child(2) a,
body#webs ul#menu li:nth-child(3) a,
body#fotociudades ul#menu li:nth-child(4) a,
body#fotocastellon ul#menu li:nth-child(5) a,
body#contacto ul#menu li:nth-child(6) a {
  background: white;
  color: #990000;

}

 h1.inicio {
	font: 1.3em 'antonioregular',serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%; color: #d40404; text-align:left; border-bottom:1px dotted #d40404
}
 
#menu {
  position: absolute;
  display: none;
  width: 100%;
  background-color: white;
 top:50px;
  border-bottom:1px dotted gray;
 
  
}

#menu li {
margin-right:0.7%;
  border-bottom: 1px solid #ddd;
   font-weight: 300;
  text-align: left;
  display: block;
  letter-spacing:2px;
  
}
 
  ul#menu li a {
 font: 1.5em 'antonioregular',serif;

margin : 5px;
display: block;
}

 ul#menu li a:hover {
  color: red;
 
display: block;
}

#menu li a {
  text-decoration: none;
   font: 1.4em 'antonioregular',serif;
  color: #000000;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

}
 

.menu-principal {
  width: 100%;
  height: 0px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.93);
  margin-top:20px;
}
 
.menu-principal li {
  background: rgba(255, 255, 255, 0.93);
}

.menu-scrolled .menu-principal {
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 4000;
  height: 0px;
    font: 0.7em 'antonioregular',serif;
    vertical-align: middle;
}

  
.menu-scrolled .menuimg.burger-closed {
  margin: 0;
  position: absolute;
  float: none;
  background: transparent no-repeat right url("../img/menu-on.png");
  width: 30px;
}
 
.menu-scrolled .menuimg.burger-closed span {

  background: transparent no-repeat right url("../img/menu-on.png");
  width: 30px;
}


.menuimg {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-transition: background-position 0.2s ease-in-out;
  -moz-transition: background-position 0.2s ease-in-out;
  -o-transition: background-position 0.2s ease-in-out;
  transition: background-position 0.2s ease-in-out;
  cursor: pointer;
  position: absolute;
  z-index: 40;
  top: 0px;
  left: 10px;
  float: none;
  height: 40px;
  width: auto;
  color: #fff;
  border: 0;
  background-color: transparent;
  margin-top: 0px;
    width: 30px;
    background: transparent no-repeat right url("../img/menu.png");
}

.menuimg img {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  width: 30px;
}

 
.menuimg.burger-closed {
  margin: 0;
  position: absolute;
  float: none;
} 

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fuentes/opensans-regular-webfont.eot');
    src: url('../fuentes/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/opensans-regular-webfont.woff') format('woff'),
         url('../fuentes/opensans-regular-webfont.ttf') format('truetype'),
         url('../fuentes/opensans-regular-webfont.svg#opensans-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bpreplayregular';
    src: url('../fuentes/bpreplay-webfont.eot');
    src: url('../fuentes/bpreplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/bpreplay-webfont.woff2') format('woff2'),
         url('../fuentes/bpreplay-webfont.woff') format('woff'),
         url('../fuentes/bpreplay-webfont.ttf') format('truetype'),
         url('../fuentes/bpreplay-webfont.svg#bpreplayregular') format('svg');
 	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-00FE;

}
 @font-face {
	font-family:'SweetSansPro-Light';
	src: url('../fuentes/SweetSansPro-Light_gdi.eot');
	src: url('../fuentes/SweetSansPro-Light_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fuentes/SweetSansPro-Light_gdi.woff') format('woff'),
		url('../fuentes/SweetSansPro-Light_gdi.ttf') format('truetype'),
		url('../fuentes/SweetSansPro-Light_gdi.svg#SweetSansPro-Light') format('svg');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'antoniobold';
    src: url('../fuentes/Antonio-Bold-webfont.eot');
    src: url('../fuentes/Antonio-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/Antonio-Bold-webfont.woff2') format('woff2'),
         url('../fuentes/Antonio-Bold-webfont.woff') format('woff'),
         url('../fuentes/Antonio-Bold-webfont.ttf') format('truetype'),
         url('../fuentes/Antonio-Bold-webfont.svg#antoniobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'antoniolight';
    src: url('../fuentes/Antonio-Light-webfont.eot');
    src: url('../fuentes/Antonio-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/Antonio-Light-webfont.woff2') format('woff2'),
         url('../fuentes/Antonio-Light-webfont.woff') format('woff'),
         url('../fuentes/Antonio-Light-webfont.ttf') format('truetype'),
         url('../fuentes/Antonio-Light-webfont.svg#antoniolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'antonioregular';
    src: url('../fuentes/Antonio-Regular-webfont.eot');
    src: url('../fuentes/Antonio-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/Antonio-Regular-webfont.woff2') format('woff2'),
         url('../fuentes/Antonio-Regular-webfont.woff') format('woff'),
         url('../fuentes/Antonio-Regular-webfont.ttf') format('truetype'),
         url('../fuentes/Antonio-Regular-webfont.svg#antonioregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


 input,select{vertical-align:middle}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#333;font:400 120% / 1.5 "SweetSansPro-Light",sans-serif;-webkit-transition:font-size 300ms;transition:font-size 300ms}.fade{opacity:0;position:relative;top:-10px;-webkit-transition:opacity 600ms,top 600ms;transition:opacity 600ms,top 600ms}.fade-load{opacity:1;top:0}@media (max-width:50em){body{font-size:100%}header{float:none;width:auto}}@media (max-width:30em){body{font-size:90%}}
body{
	padding:0;
	background-color:#FFFFFF;
	text-align:center;

}

header, nav, section, footer {
	display: block; z-index:200000;
	text-align:center;

}

html{
overflow-y:scroll;
overflow-x:hidden
}

/* 3.CABECERAS
---------------------------------------------------------------------- */

.logo { display:block; width:100%;  background-color:#363637; margin:0 auto;  top:0;
clear:both; z-index:1000; position:fixed; min-width:60px;   
}

.bajomenu{				
	padding-top: 1.6em; 
	margin-top: 1.6em; }

.limpiar{
clear:both;
}
.dcha{ float:right; margin:1%; width:90%; text-align:right}

.dcha img{margin-right:1%;}

a{
	color: #fff;
	text-decoration:none;
	outline:none;
	font-size:0.9em;

}


a:hover{
	color: #99020d;

}

a.enlace{
	color: #99020d;
	text-decoration: none;
	outline: none;
	font-size: 0.9em;

}


a:hover.enlace{
	color: black;
	font-weight:bold;

}

p{ line-height:inherit}

img {
	max-width: 100%;
	border:1px;
}

.nav {

width:100%;
text-align:center;
border-bottom:1px dotted #363637;
margin:0 auto;
padding-top:5px;
background-color: #fff;
clear:both;

}

.nav li{
width:auto;
text-align:center;
margin: 0 auto;
}

.menu{
	background-color:#eeecec;
	width:auto;
	margin:0 auto;

	}
.menu a {


	color:#737272;
	margin-right:1%;
		font: 13px/20px 'SweetSansPro-Ligh', sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;
text-transform:uppercase
	}
.menu a:hover{

	color:#000;
	border-bottom:2px solid black;
	}	
/*img:hover{opacity:0.5; }*/
#centrado{
	margin:0 auto;
}


.seccion{
	margin:0 auto;
	width: 100%;
	overflow: hidden;
	max-width: 1024px;
	min-width: 240px;

}

#contenedor{padding:5px 0;  width:100%; margin:0 auto;}

#contenedor .bloque{
	display: inline-block;	/* Es esencial para que se muestren los bloques en l�nea */
		max-width: 300px;
		min-width: 200px;
		text-align:left;
		margin:0 auto;
		margin:2%;
		padding:2%;
		vertical-align:top;
		font: 15px/25px 'SweetSansPro-Light';

	}
	
		
	
	#contenedor.bloque img{
		text-align:center;
		margin:0 auto;
	
	}
	
#contenedor .bloque1{
	display: inline-block;	/* Es esencial para que se muestren los bloques en l�nea */
		height:100%;
		max-width: 350px;
		min-width: 200px;
		text-align:left;
		margin:0 auto;
		margin-top:0;
		padding-top:0;
		margin: 2%;
		padding:2%;
		vertical-align:top;

		border-top:0;
		font: 0.9em 'SweetSansPro-Light';
 	
	}

#contenedor .bloque1 img{
		text-align:center;
		margin:0 auto;

	}
#contenedor .bloque1 h1{
	font: 1.4em 'antoniolight',serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%; color: #d40404; text-align:center;}


		
#contenedor .bloquecontacto{
display: inline-block;	/* Es esencial para que se muestren los bloques en l�nea */
		height:100%;
		max-width: 350px;
		min-width: 200px;
		text-align:left;
		margin:0 auto;
		margin-top:0;
		padding-top:0;
		margin: 2%;
		padding:2%;
		vertical-align:top;

		border-top:0;
	}
	

#container .bloquefoto{
	display: inline-block;	/* Es esencial para que se muestren los bloques en l�nea */
		max-width: 45%;
		min-width: 300px;
		margin:0 auto;
		text-align: left;
	
		padding:2%;
		vertical-align:top;
		font: 0.9em 'SweetSansPro-Light';
		background-color:#fff;
	}
img.borde { border:2px solid #338b26;}

img:hover.borde {border:2px solid #99020d;

-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}


.circular { max-width:250px;max-height:250px;overflow:hidden;-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;margin:0 auto 10px;transition:all 0.5s ease 0s;-webkit-transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-webkit-mask-image:-webkit-radial-gradient(circle, #fff, #000); }

img.circular { margin:0 auto; text-align:center; max-width:250px; max-height:250px; min-width:200px; min-height:200px; margin-left:20px; 

}

img:hover.circular { 

-moz-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-o-transform:scale(1.2);
	-ms-transform:scale(1.2);
	transform:scale(1.2);
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
	
#contenedor .bloquesec{
		display: inline-block;	/* Es esencial para que se muestren los bloques en l�nea */
		width:100%;
		max-width: 60%;
		min-width: 300px;
		text-align:left;
		margin:0 auto;
		vertical-align:top;
		font: 0.9em 'SweetSansPro-Light', Arial, Verdana;
		padding-top:2%;
		padding-bottom:2.5%;
		
	}	
	
#contenedor .bloquesec img{
	width:100%;
	max-width:590px;
	margin:0 auto;

padding-top:0;
	}	
	
 .bloquesec h2{
font: 1.2em 'SweetSansPro-Light',serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%; color: #2b2a2a; text-align:left; 
border-bottom:0;
font-weight:bold;


	}	
	
.bloquesec p{
	border-left: 1px solid gray;
	padding-left:2%;


	}	
.centrar{ text-align:center; margin:0 auto}
	
h1 {font: 1.3em 'antoniobold',serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%; color: #d40404; text-align:center;}

h2 
{
	font: 1.2em 'antonioregular',serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%; color: #d40404; text-align:left; border-bottom:1px dotted #d40404}

.espacio{ margin-top:0}

.resaltar{
color:#000;
font-weight:bold;
background-color:#FFFFFF;
padding:4px;
padding-left:0;

}

.resaltara{

color:#2f7bc6;
font-weight:bold;
background-color:#FFFFFF;
padding:4px;
padding-left:0;

}

.pie{
	text-align:center;
	color:#ffffff;
	font-size:0.75em;
	height:5%;
	clear:both;
	z-index:200000;
	margin-top:0.7em;
	margin-bottom:0.7em;
	font: 12px/22px 'SweetSansPro-Light';
	width:100%;
	background-color:#1b1b1b;

}

.clear{
clear:both;
}

.rayatop{

 border: 1px dotted #f47d00;
 width:100%;
 clear:both;

}

.raya{

 border: 1px dotted #338a26;
 width:100%;
 clear:both;

}

.imagen{
width:100%;
min-width:200px;

}
.texto{
font: 13px/22px 'SweetSansPro-Light'; 
text-align:left;	
	}


form{margin-bottom:2.25em}label{display:block;position:relative; width:70%; min-width:200px;}textarea,input{border:2px solid #ddd;border-radius:0;color:#999;display:block;font: 17px/25px 'antoniolight',serif;margin:0 0 .5em;padding:1em 1.25em;width:100%;-webkit-transition:border-color 300ms,color 300ms;transition:border-color 300ms,color 300ms;-webkit-appearance:none}textarea:focus,input:focus{border-color:#333;color:#333;outline:0}textarea{margin:0;min-height:7.5em;line-height:1.5;overflow:auto;resize:vertical}.arrow{border-top:9px solid #ddd;border-right:9px solid #ddd;border-bottom:9px inset transparent;border-left:9px inset transparent;display:block;position:absolute;right:0;top:0;-webkit-transition:border-color 300ms;transition:border-color 300ms}input:focus+.arrow,textarea:focus+.arrow{border-top-color:#333;border-right-color:#333}@media (max-width:30em){textarea,input{font-size:1.3em}}

.botonformu{
	border:0px;
	background-color:#FFF;
	text-align:right;
	cursor: pointer;

	}
	
.botonformu:hover{

	color:black;
	}

.cd-top {
  display: inline-block;
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background:  url(../img/flecha.png) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}


address:after{
/* \40 es un c�digo para escribir el caracter '@' */

content: "E-mail: info\40 stiwebs.com";
}

 
@media (min-width: 1px) {

  body.menu-scrolled {
    padding-top: 60px;
  }
}
@media (min-width: 481px) {

  body.menu-scrolled {
    padding-top: 60px;
  }
}
@media (min-width: 961px) {

  body.menu-scrolled {
    padding-top: 73px;
  }
}
 
 
@media (min-width: 961px) {

  .menuimg {
    display: none;
  }
}

 
@media (min-width: 1px) {

  #menu {
    margin: 40px 0;

  }
  
}

@media (min-width: 481px) {

  #menu {
    margin: 40px 0;
  }

}
@media (min-width: 760px) {

  #menu {
    margin: 40px 0;
  }
}
@media (min-width: 961px) {

  #menu {
    display: block !important;
    margin: 20px 0;
    text-transform: uppercase;
     padding: 0;
    position: relative;
    text-align: center;
 
  }
}
 

@media (min-width: 961px) {

  #menu li {
    padding: 0 0.9%;
    display: inline-block;
    border: none;
    text-align: center;
  }
}
 

@media (min-width: 961px) {
 
  .menu-principal li {
    background: transparent;
  }
}