/*Estilos generales*/
*{
    margin: 0px;
    padding: 0px;
    font-size: 1em;
}
/*===========Fuente Dark-theme============*/
@font-face { 
    font-family: "Dark";
    src: url("../fonts/BLOODY.TTF");
}
/*===========Fuente Fire-theme============*/
@font-face { 
    font-family: "Fire";
    src: url("../fonts/Adventure_Time.ttf");
}
/*===========Fuente Nature-theme============*/
@font-face { 
    font-family: "Nature";
    src: url("../fonts/28-Days-Later.ttf");
}
/*===========Fuente Ocean-theme============*/
@font-face { 
    font-family: "Ocean";
    src: url("../fonts/Pacifico.ttf");
}
/*===========Fuente Sky-theme============*/
@font-face { 
    font-family: "Sky";
    src: url("../fonts/Carnivalee.ttf");
}
/*===========Fuente para toda la pagina============*/
@font-face { 
    font-family: "Myfont";
    src: url("../fonts/SourceSansPro-Regular.otf");
}
/*===========Fuente para títulos============*/
@font-face { 
    font-family: "MyfontTittles";
    src: url("../fonts/Kingthings_Calligraphica.ttf");
}
.textTittles{
    font-family: "MyfontTittles";
}
body{
    font-family: "Myfont";
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
      background-color:rgba(18, 28, 37,1);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    
    padding-top: 10px;
}
.nav{
    width: 100%;
    height: 70px;
    margin: 0px;
    padding:0px;
    background-color:rgba(18, 28, 37,1);
    color: #fff;
    position: relative;
   
   
}
ul#menu-scroll{
     width: 50%;
    height: 70px;
    margin: 0px;
    padding: 4px;
    border:1px solid #9F0;
	float:right;
}
div.nav-indicator{
    height: 10px;
    bottom: 0px;
    right: 0px;
    background-color: transparent;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
}
a.container-link:hover div.nav-indicator{
    background-color: rgba(211, 84, 0,1.0);
}
a.container-link:hover p.icon{
    opacity: 1;
}
p#nav-tex{
    width: 30%;
    height: 70px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-color: transparent;
    text-align: center;
    padding: 0px;
    font-size: 2.2em;
}




section{
    width: 100%;
    margin: 0;
    padding: 20px 0;
}
footer{
  background-color: rgba(89, 42, 15,1);
  color: #fff;
  margin: 0;
  padding: 40px 0;
  width: 100%;
}
.center-box{
    margin: 0px auto;
}
hr, .hrcolor {
height: 1px;
color: #333;
background-color: rgba(0, 0, 0, 0.3);
}
/*Estilos barra de menu*/

a.container-link{
   background-color: transparent;
    height: 70px;
    width: 16.6%;
    float: left;
    padding-top: 25px;
}
a.container-link:hover,a.container-link:focus{
    text-decoration: none;
    outline: none;
}
p.icon{
    text-align: center;
    color: #fff;
    opacity: .5;
    margin-bottom: 15px;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
}

#button-menu-mobil{
  position: absolute;
  right: 4%;
  top: 12px;
  color: #fff;
  border: none;
  background: transparent;
    font-size: 1.5em;
}
#button-menu-mobil:focus{
  outline: none;
}
#button-menu-mobil:active{
  background-color: transparent;
  box-shadow: none;
}
div#container-menu-mobile{
    width: 320px;
    background-color: rgba(89, 42, 15,1);
    height: 100%;
    position: fixed;
    left: -320px;
    z-index: 72;
    border-top: solid 1px rgba(255,255,255,.2);
    color: #fff;
    
}
a.link-mobile-menu{
    display: block;
    margin: 0px;
    padding: 10px 0px;
    color: #fff;
    -webkit-transition: opacity 1s;
    -webkit-transition: background-color 1s;
    -moz-transition: opacity 1s;
    -moz-transition: background-color 1s;
    -ms-transition: opacity 1s;
    -ms-transition: background-color 1s;
    opacity: .5;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
a.link-mobile-menu:hover{
    text-decoration: none;
    opacity: 1;
    background-color: rgba(211, 84, 0,.9);
    border: none;
}

ul#ul-Link-nenu-mobile a:first-child {
   border-top: 1px solid rgba(255,255,255,.2);
}
button#button-close-menu-mobile{
    background-color: transparent;
    color: #fff;
    border: none;
    font-size: 20px;
    position: absolute;
    right: 7px;
    top: 4px;
}
button#button-close-menu-mobile:focus, button#button-close-menu-mobile:active{
    outline: none;
}
/*Estilos Paleta de temas*/
#color-palette{
  width: 120px;
  height: 250px;
  color: #fff;
  position: fixed;
  top: 60%;
  right: -88px;
  z-index: 15;
}
#icon-palette{
  width: 32px;
  height: 32px;
  float: left;
  margin: 0;
  padding: 0;
  background-color: rgba(89, 42, 15,.9);
  border-radius: 3px 0 0 3px;
}
#img-icon-palette{
  width: 27px;
  height: 27px;
  background-image: url(../img/icon-color-palette.png);
  margin: 2.4px;
  cursor: pointer;
}
#tittle-palette{
    width: 100%; 
    height: 32px; 
    padding-top:5px; 
    background-color: rgba(89, 42, 15,.9); 
    margin:0px;
}
#container-palette{
  width: 88px;
  height: 100%;
  float: left;
  margin: 0;
  padding: 0;
 
}
#container-themes{
  width: 100%;
  height: 218px;
  background-color: red;
  margin: 0px;
  padding: 0px;
  border-radius: 0 0 0 3px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.theme{
  cursor: pointer;
  width: 37px;
  height: 37px;
  margin: 5px auto;
  border-radius: 4px;
}

/**************** body content***************/
.body-content{
    background-color: red ;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.description{
    color: #fff;
    border-radius: 7px;
    padding: 20px;
    background-color: rgba(0,0,0,.8);
}
.subdescription{
    color: #000;
}

#divpadre h3{
	color:#FFF;
	font-size: 2vw;
	}
#divpadre {
	position:absolute;
    height:60vh;
    width:100%;
    text-align:center;
	overflow:hidden;
    
}
#divhijo1 {
	float: left;
    height:60vh;
    width:32%;
    margin:0px auto;
    
}
#divhijo2 {
	float: left;
    height:60vh;
    width:30%;
    margin:0px auto;
   
}
#divhijo3 {
	float: left;
    height:60vh;
    width:32%;
    margin:0px auto;
   
}
#Inicio{
	padding:0;
	margin:0;
	}
#slider{
	overflow:hidden;
	height:60vh;
    width:100%;
	}
#cambiaslider{
	float: right;
	border-radius: 50%;
	border:none;
	background:#000;
	color:#FFF;
	opacity:0.7;
	font-size:1.5em;
	transform: translatey(-500%);
	z-index: 2147483647;
	}
#cambiasliderAnt{
	float: left;
	transform: translatey(-500%);
	border-radius: 50%;
	border:none;
	color:#FFF;
	font-size:1.5em;
	background:#000;
	opacity:0.7;
	z-index: 2147483647;
	}
.isq{
	float:right;
	}
.der{
	float:left;}
.limp{
	clear:both;}
.titulos{
	border-top: 4px solid #F60;
	background-color:#333;
	padding:10px 0; 
	margin:0;
	color:#FFF;
	}
.titulos2{
	
	background-color:#333;
	padding:10px 0; 
	margin:0;
	color:#FFF;
	}
.cuerpo{
	background-color:#CCC;
	padding:0;
	margin:0;
	}
.conflex{
   display:flex;
   display: -webkit-flex;
   justify-content: center;
   justify-content: -webkit-center;
   align-items:-webkit-center;
   align-items: center;
   flex-wrap: no-wrap;
   
  
  }	
.descripcion2{
	background-color:transparent;
	color:#FFF;
		}				
#cambiasliderAnt:hover,#cambiaslider:hover{
	opacity:1;}
	
.fondogris{
 background-color: rgba(0, 0, 0, 0.3);
}					
@media screen and (max-width: 768px) {
#slider, #divpadre {
	height:20vh;
    width:100%;
	}
#cambiaslider,#cambiasliderAnt {
	transform: translateY(-200%);
	
	}
#divhijo1, #divhijo2, #divhijo3{
	margin-top: 10%;
	}		
}
@media screen and (max-width: 600px) {
#slider, #divpadre {
	height:20vh;
    width:100%;
	}
#cambiaslider,#cambiasliderAnt {
	transform: translateY(-200%);
	
	}
#divhijo1, #divhijo2, #divhijo3{
	margin-top: 5%;
	}			

}