@charset "utf-8";
/* CSS Document */


html {
  scroll-behavior: smooth;
}

* {box-sizing: border-box;}

body{
	margin:0px;
	padding:0px;	
	font-family: 'Roboto', sans-serif;
}

body {
	background-repeat: no-repeat;
	background-attachment: fixed;
        animation: fadein 2s;
}

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

.seccion {
	width:100%;
	height:10vh;
	padding-top:50px;
	padding-bottom:250px;
        height: calc(var(--vh, 1vh) * 100);
}

.seccion-gray {
	width:100%;
	height:100%;
	padding-top:50px;
	padding-bottom:250px;
}

.background-gray   { background-color:rgba(222,222,222,0.95);   }
.background-red    { background-color:rgba(255,210,210,0.99);  }
.background-orange { background-color:rgba(255,204,153,0.99);  }
.background-white  { background-color:rgba(255,255,255,0.99);  }
.background-green  { background-color:rgba(202,224,245,0.99);  }
.background-lime   { background-color:rgba(100,255,100,0.99);  }
.background-yellow { background-color:rgba(255,255,204,0.99);  }
.text-align { text-align:center !important; }


.blo1{	
	max-width:350px;
	margin:auto;
	text-align:left;	
}
	
	
.cincoEspacios{
	
	width:100%;
	height:50px;	
	display:block;
}	
	
.tresEspacios{
	
	width:100%;
	height:30px;	
	display:block;
}	
	
	
	
.menu	{
			
		
}

.menu li{
	list-style:none;
	float:left;
	height:40px;
	display:block;
	padding:20px;
}



/********************NAVIGATION  ***************/

#navigation{
	background-color:#EEE;
	width:100%;
	padding:10px;;
	overflow:auto;
	border-bottom: thin #9b4dca solid;
	
  position: fixed;
  top: 0;
  width: 100%;
	
}

#navigation ul{
	list-style-type:none;	
	padding:0px;
	margin:0px;
}

#navigation  li{
		list-style:none;
		float:left;
		margin:3px;
}


.color-white{
	color:#FFF;	
}



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


#navigation{
	background-color:#EEE;
	width:100%;
	padding:10px;;
	overflow:auto;
	border-bottom: thin #9b4dca solid;
  position: relative;

  top: 0;	
}


#navigation  ul {
	margin:auto;
}
#navigation  li{
		width:100%;
}



}


/******* boton flotante ******/
.btn-flotante{
	
	width:50px;
	height:50px;
	border-radius:50px 50px 50px 50px;
	background-color:#666;
	padding:15px;

        position:fixed;
        bottom:0x;
        right:20px;
}
.div100{
	
	justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;

}

.container2 {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
	position: relative;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
	
	position: relative;
bottom: 20px;
right: 20px;

}



/* BackToTop button css */
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#333;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}