/** * Pagina completa */
body { 
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, 1) 0%, rgba(41, 62, 107, 1) 100%) repeat scroll 0 0; 
     margin: 0;
     line-height: 20px;
     font-size: 14px;
     color: #5c5b5b;
     font-family: Arial, Helvetica, sans-serif;
     -ms-word-wrap: break-word;
     word-wrap: break-word;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding-top: 110px; /* Relleno superior igual a la altura de la cabecera*/

}

/** * Aplica para todos los elementos como usar *.* */
 * {
     margin: 0;
     padding: 0;
     outline: none;
}

/** * Aplica para todas las img */
img {
     height: auto;
     max-width: 100%;
     vertical-align: middle;
     animation-duration: 3s;
     animation-name: opaInOut;
     
}

@keyframes opaInOut {
  0% {
  opacity:0;
}
25% {
opacity:0.2;
}
50% {
opacity:0.5;
}
75% {
opacity:0.7;
}
100% {
opacity:1;
}
}

/** * Aplica para todas las ligas */
 a {
     color: #000000;
     text-decoration: none;
}
 a:hover {
     color: #282828;
}

/** * Aplica para el encabezado */
header {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, 1) 0%, rgba(41, 62, 107, 1) 100%) repeat scroll 0 0; 
     width: 100%;
     z-index: 999;
     position: relative;
     height:auto;
     font-family: 'Assistant';
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */

}

/** * Aplica para los contenidos */
.container {
     width: 95vw;
     margin: 0 auto;
     position: relative;
}
/** * Aplica para los temas dentro despues de contenidos 
#temas{width:100%;} */
#temas{
    margin:0 auto;
    
}
.contenedorfoto {
   margin-left: 30px;
   width: 300px;
   float:left;
   margin: 0 auto;
   padding:30px 0 10px 30px;
}


/** * Agrega un margen a la izquierda de 10px */
 .mleft {
     width: 30px;
     float: left;
     z-index: 999;
     padding:30px 0 10px 0;
     height:auto;
}
/** * Controla los flotantes, both no deja que esten a la derecha e izquierda */
 .clear {
     clear: both;
}
 .clearl {
     clear: left;
}
 .clearr {
     clear: right;
}
/** * Aplica para el Logo */
 .logo {
     width: 170px;
     float: left;
     z-index: 999;
     padding:30px 0 10px 0;
     height:auto;
}
 .logo a {
     color: #dedede;
}
.logo p {
     font-size: 14px;
     text-align: left;
     font-family: 'Assistant', sans-serif;
     color: #54be73;
}
.logo img {
     height: auto;
     width: auto;
     max-height: 60px;
     max-width: 266px;
}
.logo h2 {
     font-weight: 700;
     margin: 0;
     color: #54be73;
     font-size: 32px;
     text-align: left;
     line-height:22px;
     font-family: 'Merriweather', serif;
}
.logo h2 span{
     color:#ffffff;
}
/** * Aplica para el tema adentro de la imagen */
#tema {
    position: absolute;
    top:10vw; 
    left: 10px;
    height: auto;
    width: calc(20em + 1vw);
	border-radius: 15px;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, .7) 0%, rgba(41, 62, 107, .7) 100%) repeat scroll 0 0; 
	/*background-color: rgb(0,0,255);
    background-color: rgba(0,0,255,.7);*/
    border: 3px black double;
    box-shadow: 6px 6px 6px gray;
    /* -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -mos-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s; 
    animation: go-left-right 3s infinite alternate; ESTA LINEA HACE QUE SE MUEVA EL DIV DE IZQUIERDA A DERECHA INFINITAMENTE*/ 
	
}
	#tema p {
	 font-weight: 700;
    margin-left: 10px;
     /*margin: 0;*/
     color: #FFF;
     font-size:  calc(1em + 1vw);
     text-align: left;
     line-height: calc(1em + 1vw);
     font-family: 'Merriweather', serif;
     animation-duration: 3s;
     animation-name: slidein; /* llamara el Keyframe para animar*/

	}
	
	@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 10px;
    width: 100%;
  }
}

@keyframes go-left-right {        /* dale un nombre: "go-left-right" */
    from { left: 0px; }             /* animar desde la izquierda: 0px */
    to { left: calc(100% - 50px); } /* animar a la izquierda: 100%-50px */
  }
  
/** * Aplica para el tema about adentro de la imagen */
#temaa {
    position: absolute;
    top:10vw; 
    left: 10px;
    height: auto;
    /*width: calc(80em + 1vw);*/
    width: 90%;
	border-radius: 15px;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, .7) 0%, rgba(41, 62, 107, .7) 100%) repeat scroll 0 0; 
	/*background-color: rgb(0,0,255);
    background-color: rgba(0,0,255,.7);*/
    border: 3px black double;
    box-shadow: 6px 6px 6px gray;
    /* -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -mos-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s; */
	
}
	#temaa p {
	 /*font-weight: 700;*/
	 font-size: 5em;
    margin-left: 10px;
     /*margin: 0;*/
     color: #FFF;
     font-size:  calc(1em + 1vw);
     text-align: left;
     line-height: calc(1em + 1vw);
     font-family: 'Merriweather', serif;
     animation-duration: 3s;
     animation-name: slidein; /* llamara el Keyframe para animar*/

	}
	
#temaa p img {
  padding:10px 10px 10px 10px;
  width: 10%;
  height: auto;

}

/** * Aplica para la galeria de servicios */

.gallery {
 background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(59, 89, 151, 1) 0%, rgba(41, 62, 107, 1) 100%) repeat scroll 0 0; 
  border: 1px solid #ccc;
  width: 200px;
  margin: 0 auto;
}

.gallery:hover {
  border: 1px solid #777;

}

.gallery img {
  padding:10px 0 10px 20px;
  width: 80%;
  height: auto;

}
.gallery img:hover {
/*filter: grayscale(80%);
 padding:10px 0 10px 20px;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;*/
-webkit-transform:scale(1.1);
transform:scale(1.1);
transition:all .5s ease-in-out;
}

.desc {
  padding: 15px;
  text-align: center;
  color: #FFF;
}

/** * Aplica para el pie de pagina */

#main-footer {
    position:fixed;
    left:0px;
    bottom:0px;
	background: #333;
	color: white;
	text-align: center;
	padding: 10px;
	margin-top: 40px;
	width:100%;
}
	#main-footer p {
	margin: 0;
	}
	
	#main-footer a {
		color: white;
	}