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

.gray {
	box-shadow: 0px 2px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:5px;
	border:2px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:13px 47px;
	text-decoration:none;
}
.gray:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-color:#e9e9e9;
}
.gray:active {
	position:relative;
	top:1px;
}


.red {
	box-shadow: 2px 2px 2px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:5px;
	border:2px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:12px 48px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
.red:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
.red:active {
	position:relative;
	top:2px;
}

.blue {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:12px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.blue:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.blue:active {
	position:relative;
	top:1px;
}

.white {
	box-shadow:inset 3px -1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:4px;
	border:2px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:10px 32px;
	text-decoration:none;
}
.white:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.white:active {
	position:relative;
	top:1px;
}


/*
 -------------------------------- 
Codigo menu flotantes
 --------------------------------
*/


#mySidenav a {
  position: fixed;
  right: -120px;
  z-index: 12899;
  padding: 15px;
  width: 160px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 10px 50px 5px 0;
   transition: all 0.5s ease-in-out;
  box-shadow: 0 6px 14px 0 #666;
}

#mySidenav a:hover {
  right: 0;
}

#about {
  bottom: 20px;
  background-color: #4CAF50;
}

#blog {
  bottom: 80px;
  background-color: #2196F3;
}

#projects {
  bottom: 140px;
  background-color: #f44336;
}

#contact {
  bottom: 200px;
  background-color: #555
}


/*
 -------------------------------- 
Codigo menu flotantes celular
 --------------------------------
*/


#mySidenav2 a {
  position: fixed;
  right: -120px;
  z-index: 2899;
  padding: 15px;
  width: 160px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 10px 50px 5px 0;
   transition: all 0.5s ease-in-out;
  box-shadow: 0 6px 14px 0 #666;
}

#mySidenav2 a:hover {
  right: 0;
}

#about2 {
  bottom: 20px;
  background-color: #4CAF50;
}

#blog2 {
  bottom: 20px;
  background-color: #2196F3;
}

#projects2 {
  bottom: 80px;
  background-color: #f44336;
}

#contact2 {
  bottom: 140px;
  background-color: #555
}

/*
 -------------------------------- 
Blinking
 --------------------------------
*/
     .blink {
        animation: blinker 3.6s linear infinite;
        color: #1c87c9;
        font-size: 30px;
        font-weight: bold;
        font-family: sans-serif;
      }
      @keyframes blinker {
        50% {
          opacity: 0;
        }
      }
      .blink-one {
        animation: blinker-one 6s linear infinite;
      }
      @keyframes blinker-one {
        20% {
          opacity: 0;
        }
      }
      .blink-two {
        animation: blinker-two 5.4s linear infinite;
      }
      @keyframes blinker-two {
        100% {
          opacity: 0;
        }
      }