@font-face
{
    font-family: santor ;
    src: url(../fonts/santor.otf);
}

body
{
	margin: 0px;
	padding: 0px;
}

a
{
	text-decoration: none;
}

/*--------------------------------- NAVEGADOR ------------------------------------*/
header
{
	width: 100%;
	background: black;
	color: white;
	
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece que sea wrap*/
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-between;
	-webkit-justify-content:space-around;
	-ms-justify-content: space-between;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#logo
{
	height: 100px;
	width: 300px;
	background: url(../img/logo1.jpg) center no-repeat;
	text-align: center;
}

nav
{
	flex-grow: 1;
	font-family: santor;
	font-size: 2rem;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-between;
	-webkit-justify-content:space-between;
	-ms-justify-content: space-between;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

nav a
{
	color: white;
	flex-grow: 1;
	text-align: center;
}

nav a:hover
{
	background: rgb(233,205,122);
}

.menufixed
{
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    box-shadow: 0px 4px 3px rgba(0,0,0,.5);
}

/*--------------------------------- WRAPPER -------------------------------------*/
#wrapper
{
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

.iSection
{
	flex-grow: 1;
	width: 100%;
	height: 800px;
}

#slider
{
	background: DarkSlateGrey ;	
	/* background: url(../img/fondo1.jpg) no-repeat center; */
	/* background-size: cover; */
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content: space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#slider h1
{
	font-family: santor;
	font-size: 3.5rem;
	margin: 0px;
	color: white;
	line-height: 0px;
}

.iSection h2
{
	font-family: santor;
	font-size: 3rem;
	
}

.subIWrapper
{
	max-width: 1200px;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

.imagen
{
	width: 525px;
	height: 400px;
}

.texto
{
	background: rgba(255,255,255,0.5);
	width: 525px;
	height: 400px;
	font-family: santor;
	font-size: 1.5rem;
	text-align: center;
}

.texto h6
{
	font-size: 3rem;
	line-height: 10px;
}

.texto a
{
	margin-right: 25px;
	float: right;
	color: black;
}

#serviSection
{
	background: url(../img/fondo2.jpg) no-repeat center;
	background-size: cover;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content: space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#dosierSection
{
	background: url(../img/fondo3.jpg) no-repeat center;
	background-size: cover;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content: space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#dosierSection h2
{
	color: white;
}

#imgSlider
{
	background: url(../img/imagen1.jpg) center no-repeat;
}

#imgServicios
{
	background: url(../img/imagen2.jpg) center no-repeat;
}

#imgDosier
{
	background: url(../img/imagen3.jpg) center no-repeat;
}

/*---------------------------------- FOOTER -------------------------------------*/
footer
{
	background: black;
	color: white;
}

#footSection
{
	max-width: 1200px;
	margin: auto;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#footWrapper
{
	width: 100%;
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content:space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: flex-start;
	-webkit-align-items: flex-start;
	-ms-align-items: flex-start;
}

.footColumn h5
{
	font-family: santor;
	font-size: 1.5rem;
}

.footColumn ul
{
	list-style-type: none;
}

.footColumn ul li
{
	font-family: santor;
	font-size: 1.25rem;
}

.footColumn ul li a
{
	color: white;
}

.footColumn li img
{
	margin-right: 10px;
}

#footColumn3 ul li
{
	margin-bottom: 15px;
}

#direc, #phone
{
	display: inline-block;
}

#phoneIcon
{
	width: 32px;
	height: 32px;
}

.scrollup {
    height: 50px;
    width: 50px;
    background: url(../img/gotop.png) center no-repeat;
    bottom: 1.5em;
    color: white;
    cursor: pointer;
    display: none;
    padding: .25em .5em;
    position: fixed;
    right: 1.5em;
    z-index: 2;
}

/*---------------------------------- NOSOTROS -----------------------------------*/
#descrip
{
	background: url(../img/fondo4.jpg) center no-repeat;
	background-size: cover;

	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: center;
	-webkit-justify-content:center;
	-ms-justify-content: center;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
}

#nosCont
{
	width: 50%;
	background: rgba(255,255,255,0.7);
	padding: 25px;
	font-family: santor;
	font-size: 1.1rem;
	text-align: justify;
}

#dosier
{
	background: radial-gradient(#aaaaaa , #000000);
	background: -moz-radial-gradient(#aaaaaa , #000000);
	background: -webkit-radial-gradient(#aaaaaa , #000000);
}

#dosCont
{
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece que sea wrap*/
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content:space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	/*Define la distribución a lo largo de los ejes
	secundarios*/
	align-content: space-around;
	-webkit-align-content: space-around;
	-ms-align-content: space-around;
}

.dosElement img
{
	width: 400px;
	height: 300px;
}

#dosier h4
{
	width: 100%;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	color: white;
	font-family: santor;
	font-size: 2rem;
	text-align: center;
}

.dosElement h5
{
	text-align: center;
	color: white;
	font-family: santor;
	font-size: 1.25rem;
}

/*--------------------------------- SERVICIOS -----------------------------------*/
#wrapperS
{
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece que sea wrap*/
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content:space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	/*Define la distribución a lo largo de los ejes
	secundarios*/
	align-content: space-around;
	-webkit-align-content: space-around;
	-ms-align-content: space-around;

	background-color: grey;

	/* background-color: hsl(34, 53%, 82%);
	background-image: 
		repeating-linear-gradient
		(
			45deg, transparent 5px,
			hsla(197, 62%, 11%, 0.5) 5px,
			hsla(197, 62%, 11%, 0.5) 10px,                  
      			hsla(5, 53%, 63%, 0) 10px,
      			hsla(5, 53%, 63%, 0) 35px,
      			hsla(5, 53%, 63%, 0.5) 35px,
      			hsla(5, 53%, 63%, 0.5) 40px,
      			hsla(197, 62%, 11%, 0.5) 40px,
      			hsla(197, 62%, 11%, 0.5) 50px,
      			hsla(197, 62%, 11%, 0) 50px,
      			hsla(197, 62%, 11%, 0) 60px,                
      			hsla(5, 53%, 63%, 0.5) 60px,
      			hsla(5, 53%, 63%, 0.5) 70px,
      			hsla(35, 91%, 65%, 0.5) 70px,
      			hsla(35, 91%, 65%, 0.5) 80px,
      			hsla(35, 91%, 65%, 0) 80px,
      			hsla(35, 91%, 65%, 0) 90px,
      			hsla(5, 53%, 63%, 0.5) 90px,
      			hsla(5, 53%, 63%, 0.5) 110px,
      			hsla(5, 53%, 63%, 0) 110px,
      			hsla(5, 53%, 63%, 0) 120px,
      			hsla(197, 62%, 11%, 0.5) 120px,
      			hsla(197, 62%, 11%, 0.5) 140px       
      		),
		repeating-linear-gradient
		(
			135deg, transparent 5px,
			hsla(197, 62%, 11%, 0.5) 5px,
			hsla(197, 62%, 11%, 0.5) 10px, 
      			hsla(5, 53%, 63%, 0) 10px,
      			hsla(5, 53%, 63%, 0) 35px,
      			hsla(5, 53%, 63%, 0.5) 35px,
      			hsla(5, 53%, 63%, 0.5) 40px,
      			hsla(197, 62%, 11%, 0.5) 40px,
      			hsla(197, 62%, 11%, 0.5) 50px,
      			hsla(197, 62%, 11%, 0) 50px,
      			hsla(197, 62%, 11%, 0) 60px,                
      			hsla(5, 53%, 63%, 0.5) 60px,
      			hsla(5, 53%, 63%, 0.5) 70px,
      			hsla(35, 91%, 65%, 0.5) 70px,
      			hsla(35, 91%, 65%, 0.5) 80px,
      			hsla(35, 91%, 65%, 0) 80px,
      			hsla(35, 91%, 65%, 0) 90px,
      			hsla(5, 53%, 63%, 0.5) 90px,
      			hsla(5, 53%, 63%, 0.5) 110px,
      			hsla(5, 53%, 63%, 0) 110px,
      			hsla(5, 53%, 63%, 0) 140px,
      			hsla(197, 62%, 11%, 0.5) 140px,
      			hsla(197, 62%, 11%, 0.5) 160px       
  		); */
}

.serSection
{
	width: 400px;
	height: 400px;
	margin-top: 10px;
	margin-bottom: 10px;
	background: rgba(0,0,0,0.8);
}

.serSection h3
{
	font-family: santor;
	color: white;
	font-size: 2rem;
	margin: 25px;
}

.serSection p
{
	font-family: santor;
	margin: 20px;
	font-size: 1.1rem;
	text-align: justify;
	color: white;
}

.srvcImg
{
	width: 350px;
	height: 240px;
	margin: auto;
	background: grey;
}

#imgLisos
{
	background: url(../img/crml/Pinturas/Liso.jpg) center no-repeat;
	background-size: cover;
}

#imgMuro
{
	height: 220px;
	background: url(../img/crml/Pinturas/Muro2.jpg) center no-repeat;
	background-size: cover;
}

#imgEstucado
{
	height: 220px;
	background: url(../img/crml/Pinturas/Stuco.jpg) center no-repeat;
	background-size: cover;
}

#imgMarmol
{
	height: 220px;
	background: url(../img/crml/Pinturas/marmol.jpg) center no-repeat;
	background-size: cover;
}

#imgListas
{
	height: 240px;
	background: url(../img/crml/Pinturas/Patinas.jpg) center no-repeat;
	background-size: cover;
}

#imgTexturas
{
	height: 197px;
	background: url(../img/crml/Pinturas/terciopelo.jpg) center no-repeat;
	background-size: cover;
}

#imgPatinas
{
	background: url(../img/crml/Pinturas/Patina.jpg) center no-repeat;
	background-size: cover;
}

#imgBarnizados
{
	height: 177px;
	background: url(../img/crml/Pinturas/Lacado.jpg) center no-repeat;
	background-size: cover;
}

#imgObras
{
	height: 150px;
	background: url(../img/crml/Pinturas/Obra.jpg) center no-repeat;
	background-size: cover;
}

#imgMural
{
	height: 197px;
	background: url(../img/crml/Pinturas/FachadasIII.jpg) center no-repeat;
	background-size: cover;
}

#imgGrecas
{
	height: 197px;
	background: url(../img/crml/Pinturas/Greca.jpg) center no-repeat;
	background-size: cover;
}

#imgVinilos
{
	height: 243px;
	background: url(../img/crml/Pinturas/revestimiento.jpg) center no-repeat;
	background-size: cover;
}
/*--------------------------------- CONTACTO ------------------------------------*/
#contSection
{
	/*-------------------FLEXBOX-------------------*/
	/*define un contenedor flexible*/
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	/*Establece los ejes principales, definiendo la
	dirección en la que se colocan los elementos en
	el contenedor flexible*/
	flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	/*Define la alineación a lo largo de los ejes
	principales*/
	justify-content: space-around;
	-webkit-justify-content:space-around;
	-ms-justify-content: space-around;
	/*Define la alineación a lo largo de los ejes
	secundarios*/
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;

	font-family: santor;
	font-size: 1.25rem;
	color: white;
	background: radial-gradient(#aaaaaa , #000000);
	background: -moz-radial-gradient(#aaaaaa , #000000);
	background: -webkit-radial-gradient(#aaaaaa , #000000);
}

#contSection ul
{
	list-style-type: none;
}

#contSection li
{
	margin-bottom: 20px;
}

#contSection li img
{
	margin-right: 10px;
}