@import url('https://fonts.googleapis.com/css?family=Slabo+27px');


@import url('https://fonts.googleapis.com/css?family=Bellota+Text&display=swap');

body{
	font-family: 'Slabo 27px', serif;
	background: #222222;
	font-family: 'Bellota Text', cursive;
	/*background-image: url("../img/fondo.jpg");*/
}
/* animaciones */
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}


	@keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Firefox*/
	@-moz-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Safari y Chrome*/
	@-webkit-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
	}

	/* Opera */
	@-o-keyframes fadein {
	    from { opacity: 0; }
	    to   { opacity: 1; }
}

/* logo */
.contenedor-logo{
	padding: 0px;
}
.contenedor-logo .logo{
	width: 100%;
	height: 300px;
	border-left: 1px solid #F96D00;
	border-right: 1px solid #F96D00;
}

/*menu*/
.navbar{
	border-radius: 0px;
	border: 1px solid #F96D00;
	background: #222222;
	margin-bottom: 0px;
}
.navbar .navbar-brand{
	color: #F96D00;
}
.navbar .navbar-brand:hover{
	color: #F96D00;
}
.navbar .collapse .navbar-nav li a{
	color: white;
	font-size: 16px;
	cursor: pointer;
}
.navbar .collapse .navbar-nav li a .badge{
	background: black;
	color: #F96D00;
}
.navbar .collapse .navbar-nav li a:hover{
	color: #F96D00;
	background: black;
	animation: none;
}
.navbar .collapse .navbar-nav .novedades{
	animation: pulse 1s infinite;
	color: #F96D00;
}

.navbar .collapse .navbar-nav .dropdown-menu{
	background: black;
	border: 1px solid #F96D00;
}
.navbar .collapse .navbar-nav .dropdown-menu li a:hover{
	background:black;
	font-size: 15px;

}


.navbar .navbar-header .navbar-toggle{
	border: 1px solid #F96D00;
}

.noticias{
	border-bottom:1px solid #F96D00;
	border-left:1px solid #F96D00;
	border-right:1px solid #F96D00;
	padding: 0px;
	margin-bottom: 40px;
}
.noticias .noticias-title{
	background: rgba(0,0,0,0.4);
}
.noticias .noticias-title h4{
	color: #F96D00;
	text-align: center;
}
.noticias .texto-noticias{
	color: white;
	padding: 0px;
	padding-top: 10px;
	font-size: 16px;
}
.dropdown .dropdown-menu{
	transition: all 0.6s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}
.dropdown.open .dropdown-menu {
    max-height: 500px;
    opacity: 1;
}

/* mision */

.mision {
	

	/*animation: bounceIn 1s forwards;*/


	border: 1px solid #F96D00;
	padding: 50px;
 
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    							  /* Para que sea compatible con cualquier navegador:*/
    -webkit-animation: fadein 2s; /* Safari, Chrome */
       -moz-animation: fadein 2s; /* Firefox */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera */
            animation: fadein 2s;
	}


.mision h1{
	text-align: center;
	color: #F96D00;
}
.mision h2{
	text-align: center;
	color: white;
}
.mision p{
	text-align: justify;
	color: white;
	font-size: 20px;
}


/* contacto */
.contenedor-contacto{
	border: 1px solid #F96D00;
	animation: fadein 2s;
}
.form-contacto h1{
	text-align: center;
	color: #F96D00;
	margin-bottom: 20px;
	font-size: 25px;
}
.form-contacto h2{
	font-size: 20px;
	color: white;
	text-align: center;

}
.form-contacto input{
  display: block;
  margin-right: 20%;
  margin-left: 20%;
  width: 60%;
  font-size: 20px;
  border: none;
  border-bottom: 1px solid white;
  background: transparent;
  text-align: center;
  color: white;
}
.form-contacto input::placeholder{
	color: #F96D00;
}
.form-contacto input:focus{
	animation: bounceIn 1s forwards;
	outline: none;
	border: none;
	border-bottom:1px solid #F96D00;
	border-radius: 0px;
}
.mensaje{
  	margin-right: 20%;
  	margin-left: 20%;
 	width: 60%;
	height: 150px;
	background: transparent;
	border: 1px solid white;
	font-size: 20px;
	text-align: center;
	color: white;
	margin-bottom: 60px;
}
.mensaje::placeholder{
	color: #F96D00;
}
.mensaje:focus{
	outline: none;
	border: 1px solid #F96D00;
}
.form-contacto .limpiar{
	float: left;
	margin-left: 15%;
	margin-right: 10%;
	border: none;
	background: #393E46;
	width: 30%;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #F96D00;
	font-size: 20px;
}
.form-contacto .enviar{
	margin-right: 15%;
	border: none;
	background: #393E46;
	width: 30%;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #F96D00;
	font-size: 20px;
}
.form-contacto .enviar:hover{
	border: 1px solid white;
	animation: pulse 1s infinite;
}
.form-contacto .limpiar:hover{
	border: 1px solid white;	
	animation: pulse 1s infinite;
}
.form-contacto .fa-check{
	display: none;
	color: green;
}
.form-contacto .fa-pencil{
	color: #F96D00;
}
.form-contacto .fa-times{
	display: none;
	color: red;
}


/* Texto de las páginas que no sean la de inicio (sin animar)*/


.texto-referencias {
	border: solid 1px #F96D00;

}

.texto-referencias p{
	text-align: justify;
	color: white;
	font-size: 20px;
	padding: 30px 50px 50px 50px;

}

.texto-referencias h1{
	text-align: center;
	color: white;
	padding-top: 10px;
}
.texto-referencias h2{
	text-align: center;
	color: white;
}


/* pie de pagina */
.pie-pagina{
	border: 1px solid #F96D00;
	border-bottom: none;
	padding-bottom: 20px;
	margin-top: 50px;
}
.menu-pie h1{
	text-align: center;
	font-size: 25px;
	color: #F96D00;
}
.menu-pie a{
	display: block;
	margin: auto;
	text-align: center;
	color: white;
	font-size: 15px;
	cursor: pointer;
}
.menu-pie a:hover{
	color: #F96D00;
}
.info-pie h1{
	text-align: center;
	font-size: 25px;
	color: #F96D00;
}
.info-pie h2{
	text-align: center;
	font-size: 15px;
	color: white;
}
.info-pie .fa-at{
	color: #F96D00;
}
.info-pie a{
	color: #F96D00;
	font-size: 15px;
}
.info-pie .copy{
	font-size: 20px;
	margin-bottom: 20px;
}
.info-pie .btn-diseño{
	display: block;
	margin: auto;
	background:rgba(0,0,0,0.2);
	border:solid 1px #F96D00;
}
.info-sobremi h1{
	text-align: center;
	font-size: 25px;
	color: #F96D00;
}
.info-sobremi p{
	text-align: justify;
	color: white;
	font-size: 15px;
}
.info-sobremi a{
	display: block;
	margin: auto;
	text-align: center;
	color: #F96D00;
	font-size: 15px;
}

.menu-pie .listatemas {
	list-style: none;
	list-style-type: none;
}
.menu-pie .listatemas ul{
	list-style: none;
	width: 100%;
}

.menu-desplegable-pie {
	background: #222222;
	border: 1px solid #F96D00;
}
.menu-desplegable-pie li a{
	color: white;
	border: none;
}
.menu-desplegable-pie li a:hover{
	background: transparent;
	font-size: 15px;
	color: #F96D00;
}
.menu-pie a{
	color: white; 
}



/* modal de diseñadores */
#diseñador .modal-content{
	background: #222222;
	border: 2px solid #F96D00;
}
#diseñador .modal-header{
	border-bottom:  1px solid #F96D00;
	color: white;
}
#diseñador .modal-body{
	border-bottom:  1px solid #F96D00;
	color: white;
}
#diseñador .modal-footer{
	border: 0px;
}
#diseñador .modal-title{
	text-align: center;
}
#diseñador .close{
	color: white;
}
#diseñador .modal-footer .btn-default{
	background: transparent;
	color: white;
	border: 1px solid #F96D00;
}

/* modal de diseñadores */
#saludo .modal-content{
	background: #222222;
	border: 2px solid #F96D00;
}
#saludo .modal-header{
	border-bottom:  1px solid #F96D00;
	color: white;
}
#saludo .modal-body{
	border-bottom:  1px solid #F96D00;
	color: white;
}
#saludo .modal-footer{
	border: 0px;
}
#saludo .modal-title{
	text-align: center;
}
#saludo img{
	display:block;
	margin:auto;
	border:2px solid #F96D00;
	border-radius: 5px;
}
#saludo .close{
	color: white;
}
#saludo .modal-footer .btn{
	background: transparent;
	color: white;
	border: 1px solid #F96D00;
}




/* sobre mi */
.contenedor-sobremi{
	border: 1px solid #F96D00;
	padding: 20px;
	animation: fadein 2s;
}
.contenedor-sobremi .info-perfil img{
	border: 1px solid #F96D00;
	border-radius: 50%;
	height: 200px;
	width: 200px;
	display: block;
	margin: auto;
	border:2px solid #F96D00;
	border-radius: 5px;
}
.contenedor-sobremi .info-perfil h1{
	text-align: center;
	color: #F96D00;
	font-size: 40px;
}
.contenedor-sobremi .info-perfil h2{
	text-align: center;
	color: white;
	font-size: 35px;
}
.contenedor-sobremi .info-perfil p{
	color: white;
	text-align: justify;
	font-size: 18px;
}
.contenedor-sobremi .subtitulo-perfil{
	margin-bottom:30px;
}
.contenedor-sobremi .subtitulo-perfil img{
	border:0px;
	height: 50px;
	width: 50px;
	display:inline-block;
	vertical-align: sub;
}




/* Tabla de archivos */


.contenedor-observacion h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-observacion p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}
.contenedor-nov-academicos h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-nov-academicos p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-trabajos h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-trabajos p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-climatologia h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}
.contenedor-climatologia p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-poster h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}
.contenedor-poster p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-referencias h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-referencias p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-librosycomentarios h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-librosycomentarios p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-geoyotrasciencias h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-geoyotrasciencias p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}
.contenedor-diarios h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-diarios p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-proyectos h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-proyectos p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-informestecnicos h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-informestecnicos p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-videos h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-videos p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}

.contenedor-novedades h1{
	color: white;
	text-align: center;
	margin-bottom: 50px;
}

.contenedor-novedades p{
	color: white;
	text-align: justify;
	margin-bottom: 50px;
	font-size: 20px;
}


.tabla{
	border: 1px solid #F96D00;
	animation: fadein 2s;
}
.tabla thead{
	background-color: #1d1c1c;
}

.tabla thead tr td {
	color: white;
	text-align: center;
}
.tabla tbody tr td{
	background-color: #222222; 
	color: white;
	text-align: center;
}
.tabla tbody tr td a i{
	color: white;
}
.tabla tbody tr td a i:hover{
	color: #F96D00;
}
.tabla tfoot{
	background-color: #1d1c1c;
}

.tabla tfoot tr td  {
	color: white;
	text-align: center;
}
.tabla .fa-plus-circle{
	display: none;
	color: #F96D00;
	margin-left: 5%;
	margin-right: 5%;
}

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

	.tabla .fa-plus-circle{
		display: inline-block;
		color: green;
		margin-left: 5%;
		margin-right: 5%;
	}

	


}






/* gracias mensaje */

.contenedor-gracias{
	border: 1px solid #F96D00;
	animation: bounceIn 0.5s forwards;


}
.contenedor-gracias h1{
	text-align: center;
	color: white;
}
.contenedor-gracias h2{
	text-align: center;
	color: white;
}
.contenedor-gracias h3{
	text-align: right;
	color: white;
}
.contenedor-gracias a{
	border: none;
	background: #393E46;
	width: 30%;
	display: block;
	margin: auto;
	text-align: center;
	color: #F96D00;
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 20px;
	margin-bottom:20px;
	margin-top: 20px;
	text-decoration: none;
}
.contenedor-gracias a:hover{
	border: 1px solid white;
	animation: pulse 1s infinite;
}
.contenedor-gracias img{
	height: 70px;
	display: block;
	margin: auto;
}
#row-mail {
	margin: 15%;
}




@media (min-width: 1200px) {

}

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

@media screen and  (max-width: 767px){
	.contenedor-logo .logo{
		height: 100%;
	}
	.navbar .collapse .navbar-nav .novedades{
		color: #F96D00;
	}
	.navbar .collapse .navbar-nav li a:hover{
		background: none;
	}
	.navbar .collapse .navbar-nav li a:focus{
		background: black;
		color: #F96D00;
	}
	.mision {
		padding: 20px;
	}
	.mision p{
		font-size: 16px;
	}

}


/*@media (min-width: 576px) {  }*/



/* pagina 404 */
.contenedor-404{
	margin-top: 12%;
}
.contenedor-404 h1{
	font-size: 100px;
	text-align: center;
	color: white;
}
.contenedor-404 h1 .fa-exclamation-triangle{
	color: #F96D00;
	animation: pulse 1s infinite;
}
.contenedor-404 h2{
	font-size: 40px;
	text-align: center;
	color: white;
}
.contenedor-404 h3{
	font-size: 20px;
	text-align: center;
	color: white;
}
.contenedor-404 h3 a{
	font-size: 20px;
	text-align: center;
	color: #F96D00;

}

/* video */
.contenedor-seccionvideo{
	border: 1px solid #F96D00;	
}
.contenedor-seccionvideo h1{
	color: white;
	text-align: center;
}
.contenedor-video h2{
	text-align: center;
	color: #F96D00;
	font-size: 20px;
}
.contenedor-video{
	margin-bottom: 50px;
}
.contenedor-video video{
	width: 100%;
	animation: fadein 2s;
}

video{
	transition: 0.5s
}

video:hover{
	transform: scale(1.1);
}