* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font: 16px font-family:   Arial, sans-serif;
  background: #b0c4de;
}

section {
  width: 275px;
  background: #ecf0f1;
  padding: 0 20px 20px 20px;
  margin: 10px auto;
  text-align: center;
  border-radius: 5px;
}

span {
  display: block;
  position: relative;
  margin: 0 auto;
  top: -40px;
  height: 80px;
  width: 80px;
  /*background: url('http://aguaecosocial.com/wp-content/uploads/2015/03/Icono-Gota.png') center center no-repeat, #b0c4de;*/ 
  /*background: url('http://200.60.11.230/cortes/images/logo.png') center center no-repeat, #b0c4de;*/
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}

h1 {
  font-size: 24px;
  font-weight: 100;
  margin-bottom: 30px;
}

input {
  width: 100%;
  background: #fff;
  border: none;
  height: 50px;
  margin-bottom: 15px;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  padding: 5px 5px 5px 5px;
}

input:focus {
  outline: none;
}

select {
    padding:10px;
    margin: 0;
    margin-bottom: 10px;
    /*margin-top: -10px;*/
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    /*color:#888;*/
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    width: 100%;
}

button {
  width: 100%;
  height: 30px;
  border: none;
  background: #3498db;
  color: #ecf0f1;
  font-weight: 100;
  margin-bottom: 15px;
  border-radius: 5px;
  transition: all ease-in-out .2s;
  border-bottom: 3px solid #2980b9;
	height: 70px;
}

button:focus {
  outline: none;
}

button:hover {
  background: #2980b9;
}

h2 {
  font-size: .75em;
}

a {
  color: #e74c3c;
  text-decoration: none;
  transition: all ease-in-out .2s;
}

a:hover {
  color: #c0392b;
}

.container
{
  font-size: 14px;
  font-family:   Arial, sans-serif;
  color: #151515;
  width: 300px;
  background: #ecf0f1;
  padding: 0 20px 20px 20px;
  margin: 8px auto;
  text-align: center;
  border-radius: 5px;
}
.container2
{
  font-size: 14px;
  font-family:   Arial, sans-serif;
  color: #151515;
  width: 300px;
  background: #F5A9A9;
  padding: 0 20px 20px 20px;
  margin: 8px auto;
  text-align: center;
  border-radius: 5px;
}
.container3
{
  font-size: 14px;
  font-family:   Arial, sans-serif;
  color: #151515;
  width: 300px;
  background: #68B44C;
  padding: 0 20px 20px 20px;
  margin: 8px auto;
  text-align: center;
  border-radius: 5px;
}

/*CABECER*/
.wrap-around {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: 10px 10px 10px 10px;
  margin-left: -20px;
  margin-bottom: 10px;
  background: #ff0000;
  color: #fff;
  text-decoration: none;
  width: 300px;
  font-weight: bold;
}
 
.wrap-around:hover {
  background: #add8e6;
  color: #235e71;
  font-weight: bold;
} 
b
{
  color: #235e71;
  font-weight: bold;
}
/**LOGO*/
.banner{
  position: relative;
  display: inline-block;
  margin-top: 15px;
  padding: 10px 10px 10px 10px;
  margin-left: -20px;
  margin-bottom: 10px;
  text-decoration: none;
  width: 275px;
  background: #add8e6;
  color: #235e71;
  font-weight: bold;
} 
/*botones*/
/*url(http://bit.ly/MKreRz) repeat-x*/
.button, .button:visited {
 background: #222;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}
.button:hover {
 background-color: #111;
 color: #fff;
}
.button:active {
 top: 1px;
}
.small.button, .small.button:visited {
 font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}
.green.button:hover {
 background-color: #749a02;
}
.red.button, .red.button:visited {
 background-color: #e62727;
}
.red.button:hover {
 background-color: #cf2525;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}
.blue.button:hover {
 background-color: #2575cf;
}


/*TEXTTO*/
.btn {
  border: none;
  color: white;
  overflow: hidden;
  /*margin: 1rem;*/
  padding: 5px 5px 5px 5px;
  /*padding: 0;*/
  text-transform: uppercase;
  /*width: 150px;*/
  height: 30px;
  
  &.color-1 {
    background-color: $color1;
  }
  
  &.color-2 {
    background-color: $color2;
  }
  
  &.color-3 {
    background-color: $color3;
  }
  
  &.color-4 {
    background-color: #82B627:
  }
}

.btn-border {
  
  &.color-1 {
    background-color: transparent;
    border: 2px solid $color1;
    color: $color1;
  }
  
  &.color-2 {
    background-color: transparent;
    border: 2px solid $color2;
    color: $color2;
  }
  
  &.color-3 {
    background-color: transparent;
    border: 2px solid $color3;
    color: $color3;
  }
  
  &.color-4 {
    background-color: transparent;
    border: 2px solid $color4;
    color: $color4;
  }
}

.btn-round {
  border-radius: 10em;
}
.material-design {
  position: relative;
  
  canvas {
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
  }
}


/**TABLAS*/
.cuadro table{
  border: 1px solid #E6E6E6;
  border-collapse: collapse;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #555; 
  margin-bottom: 5px;
  width: 100%;
  }
.cuadro th{
  border-collapse: collapse;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #555;
  }
.cuadro td{
  border: 1px solid #F2F2F2;
  border-collapse: collapse;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #1C1C1C;
  /*font-size:11px;*/
  }
.cuadro caption {
  padding:4px 10px 4px 10px;
  text-decoration: underline; 
  background-color:#fafafa; 
  color:#585858; 
  text-align: center;
  font-size:13px; 
  border: 1px solid #E6E6E6;
  }
.cuadro tbody td{
  padding: 4px 4px 4px 4px; 
  font-size: 15px;
  font-weight: bold;
  }
.cuadro thead th {
  text-align: center;
  font-size: 100% !important; 
  padding: 8px;
  }
.cuadro thead th.cab {
  background: #006699; 
  }
.cuadro thead th.cab2 {
  background: #fff;
  color: #000;
  }
.cuadro tbody tr { 
  background: #FCFDFE;
  }
.cuadro tbody tr:hover {
  background: #F7F9FC; /*#F5F6CE;*/
  }
.cuadro tbody tr.odd { 
  background: #F5FBEF;/*F7F9FC;*/ 
  }
.cuadro tbody tr.err td { 
  background: #E62727;/*F7F9FC;*/ 
  color: #fff;
  }
.cuadro tbody td.rev {
  color: #CF2525; 
  background-color: #ffe3df;  /*ERROR*/
  }
.cuadro tbody td.cor {
  color: #006699; 
  background-color: #e5f1f4;  /*ERROR*/
  }
.cuadro tbody td.fMes {
  color: #4F8A10; 
  background-color: #DFF2BF;   /*ERROR*/
  }
.cuadro tbody th {
  /*color: #CF2525;*/
  /*text-align: right;*/
  font-size: 18px;
  font-weight: normal;
  padding: 4px 4px 4px 4px; 
  /*background: #F5FBEF;*/
  /*text-decoration: underline;*/
  }
.cuadro tbody td.refMes {
  color: #9F6000; 
  background-color: #FEEFB3;    /*ERROR*/
  }
.cuadro tfoot th, tfoot td {
  font-size: 100%;
  }
.cuadro a{ 
  background: #67A03F;
  color:#FFFFFF; 
  text-decoration: none; 
  border-bottom: 1px solid #FFFFFF; 
  padding:3px 3px 3px 3px;
  }
.cuadro a:hover{
  background: #006699;
  }
.cuadro a:visited {
  background: #848484;
  }
.rojo thead th {
  background: #E63C1E;
  color: #FFFFFF;
  }
.verde thead th {
  background: #68B44C; /*99CC66*/
  color: #FFFFFF;
  }
.azul thead th {
  background: #006699;
  color: #FFFFFF;
  }
.gris thead th {
  background: #707070 ;
  color: #FFFFFF;
  }
  
.verde tbody th {
  background: #d9e2ff; /*99CC66*/
  /*color: #FFFFFF;*/
  /*text-align: left;*/
  font-size: 11px;
  border: 1px solid #c1c4d1;
  }
.verde tbody td {
  border: 1px solid #c1c4d1;

/*BOTONES*/
#next,
#prev {
    color: #333;
    display: inline-block;
    font: normal bold 4em Arial,sans-serif;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: auto;
}

#next,
#prev { padding: 0.5em 1.5em }

#next { text-align: right }

#next:before,
#next:after,
#prev:before,
#prev:after {
    background: #333;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
    content: "";
    display: block;
    height: 0.5em;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1em;
}

#prev:before,
#prev:after { left: 0 }

#next:before,
#prev:before {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#next:after,
#prev:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#prev:after,
#next:before { margin-top: -.36em }

#next:hover,
#next:focus,
#prev:hover,
#prev:focus { color: #c00 }

#next:hover:before,
#next:hover:after,
#next:focus:before,
#next:focus:after,
#prev:hover:before,
#prev:hover:after,
#prev:focus:before,
#prev:focus:after { background: #c00 }