estilo.css

@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css" );


* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: rgb(14, 26, 112);;
  color: #ffffff;
  padding: 15px;
}
img {
  max-width: 90%;
  height: auto;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li{
 cursor: pointer;
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li {
  background-color: #0099cc;
}
.menu .MiBotonUTNMenuInicioParaParcial{ 
  background-color: red !important;
   
}

.menu .MiBotonUTNMenuInicioParaParcial:hover {
  background-color: green !important;
}
.menu .MiBotonUTNMenuInicioNoParcial{ 
  background-color: blue !important;
   cursor: pointer;
}
.menu .MiBotonUTNMenuInicioNoParcial:hover {
  background-color: skyblue !important;
}
.menu .MiBotonUTNMenuEjercicios:hover{
 background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 16%, #2989d8 16%, #ffffff 36%, #ffffff 43%, #ebf709 48%, #ffffff 52%, #ffffff 61%, #207cca 82%, #207cca 99%, #207cca 99%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(16%,#2989d8), color-stop(16%,#2989d8), color-stop(36%,#ffffff), color-stop(43%,#ffffff), color-stop(48%,#ebf709), color-stop(52%,#ffffff), color-stop(61%,#ffffff), color-stop(82%,#207cca), color-stop(99%,#207cca), color-stop(99%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color:black;
}



.MiBotonUTNnav {
  
  /*text-transform: capitalize;*/
  border:hidden;
  width:100%;
  background:#f50056;
  margin:0 auto;
  margin-top:1%;
  padding:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}

.MiBotonUTNnav:hover{
  background:#1BA045;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  bottom: 0;
    width: 100%;
   /* position: fixed;*/
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}



//aca el viejo

* {
  margin:0;
  padding:0;
}

body {
  margin: 0 auto;
  color:#f0f0f0;
  background:#3f51b5;
  font-family:'Open Sans',sans-serif;
}

caption {
  font-size: 1.6em;
  font-weight: 400;
  padding: 10px 0;
}

.CajaUno {

  max-width: 30%;
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}

.CajaInicio {
  width:750px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}
.CajaEnunciado {
  max-width: 30%;
  border: dashed;
 position: fixed;
background: royalblue;
top: 0px;
width: 400px;
margin: 0;
padding: 10px;
/* margin-top: 8px; */
margin-bottom: 2%;
transition: opacity 1s;
-webkit-transition: opacity 1s;
border-radius: 15px;
-webkit-border-radius: 15px;
}
.CajaInicio h1{
  background:rgb(14, 26, 112);; 
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}
.CajaAbajo {
   margin-top: 100px;
  width:400px;
  top:0px;
left:0px;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}
.CajaArriva {
  margin-top: 20px;
  width:400px;
  top:0px;
  left:0px;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
}

.FormIngreso {
  
 background-color: #33b5e5;
  padding:6% 4%;
}

input[type="text"]{
  width:92%;
  background:#fff;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}
select{
  width:100%;
  background:#fff;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}


.MiBotonUTN {
  display:block;
  /*text-transform: capitalize;*/
  border:hidden;
  width:100%;
  background:#f50056;
  margin:0 auto;
  margin-top:1%;
  padding:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}

.MiBotonUTN:hover{
  background:#1BA045;
}
.MiBotonUTNJuego {
  
  /*text-transform: capitalize;*/
  border:hidden;
  width:32%;
  background:#f50056;
  margin:0 auto;
  margin-top:1%;
  padding:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}
.MiBotonUTNJuegoSecuencia {
  
 
  width:20% !important;
 font-size: 1em;
 font-weight: bold;
  color:black !important;;
 
}

.MiBotonUTNMenu {
  display:block;
  /*text-transform: capitalize;*/
  border:hidden;
  width:100px;
  background:#f50056;
  margin-top:1%;
  padding:6px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}

.MiBotonUTNMenu:hover{
 background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 16%, #2989d8 16%, #ffffff 36%, #ffffff 43%, #ebf709 48%, #ffffff 52%, #ffffff 61%, #207cca 82%, #207cca 99%, #207cca 99%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(16%,#2989d8), color-stop(16%,#2989d8), color-stop(36%,#ffffff), color-stop(43%,#ffffff), color-stop(48%,#ebf709), color-stop(52%,#ffffff), color-stop(61%,#ffffff), color-stop(82%,#207cca), color-stop(99%,#207cca), color-stop(99%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(45deg, #1e5799 0%,#2989d8 16%,#2989d8 16%,#ffffff 36%,#ffffff 43%,#ebf709 48%,#ffffff 52%,#ffffff 61%,#207cca 82%,#207cca 99%,#207cca 99%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color:black;
}

.MiBotonUTNLinea{
  max-width: 150px;
position: absolute;
  /*text-transform: capitalize;*/
  border:hidden;
  width:100%;
  background:#00A1F5;
  margin:0 auto;
  margin-top:30%;
  padding:10px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}
.MiBotonUTNLinea:hover{
  background:red;
  /*text-transform: uppercase;*/
}

.menu li  .MiBotonUTNMenuInicio {
  display:block;
 
  border:hidden;
  width:150px;
  background:blue !important;
  margin-top:1%;
  padding:6px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}
.menu li .MiBotonUTNMenuInicio:hover{
  background:#4a4a71 !important;
}

.MiBotonUTNMenuInicioParcial {
  display:block;
 
  border:hidden;
  width:150px;
  background:red;
  margin-top:1%;
  padding:6px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  transition:background .3s;
  -webkit-transition:background .3s;
}
.MiBotonUTNMenuInicioParcial:hover{
  background:green;
}




.CajaUno h1{
  background:#f50056; 
  padding:20px 0;
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}

.CajaUno a:hover {
  color:#f50056;
}



.CajaUno a {
  color:#DDDDDD;
}

.PiedraPapelTijera
{
  width: 100px;
  height: 100px;
  padding: 10px;

}

/* solo para github fork me*/
 .github-fork-ribbon {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;

  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: 2px 0;

  /* Set the base colour */
  background-color: #a00;

  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

  /* Add a drop shadow */
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);

  /* Set the font */
  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;

  z-index: 9999;
  pointer-events: auto;
}

.github-fork-ribbon a,
.github-fork-ribbon a:hover {
  /* Set the text properties */
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  text-align: center;

  /* Set the geometry. If you fiddle with these you'll also need
     to tweak the top and right values in .github-fork-ribbon. */
  width: 200px;
  line-height: 20px;

  /* Set the layout properties */
  display: inline-block;
  padding: 2px 0;

  /* Add "stitching" effect */
  border-width: 1px 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon-wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 9999;
  pointer-events: none;
}

.github-fork-ribbon-wrapper.right {
  right: 0;
}

.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  top: 42px;
  right: -43px;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

        .right .github-fork-ribbon {
                background-color: #333;
            }