@import 'https://fonts.googleapis.com/css?family=Kaushan+Script';

body {
    background-image: url(../img/fondoN.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
p{
    margin: 10px;
}
.y-line{
    box-shadow: 20px 0px 40px #000;
    background-color: yellow;
    height: 12px;
}
.navbar-inverse{
    background: transparent;
    border: 0px;
}
.nav{
    font-size: 1.2em;
}
.nav:hover{
    background: transparent;
}
.cuadro{
    background-color: rgb(215, 242, 250);
    border-radius: 3px;
    opacity: 0.8;
}
.title{
    font-family: 'Kaushan Script', cursive;
    font-size: 1.4em;
}
.contenido{
    background-color: #FFFFFF;
}
.conocenos{
    background-color: #FFFFFF;
    border-radius: 3px;
}
.chat{
    width: 70%;
    float: left;
}
.chicos img{
    width: 150px;
    float: left;
}
.b{
    margin-top: 230px;
}
.mensaje{
    width: 63%;
    float: left;
    font-size: 16px;
}
.ella{
    width: 75%;
    padding: 5px;
    position: relative;
    margin-right: 25%;
    background-color: rgba(255, 204, 255, 0.788);
    border-radius: 20px;
    -webkit-box-shadow: 8px 8px 50px rgba(200,60,60,.280);
    box-shadow: 8px 8px 50px rgba(200,60,60,.280);
}
.ella:before{
    content: "";
    width: 0;
    position: absolute;
    border-style: solid;
    border-width: 9px 18px 9px 0;
    border-color: transparent rgba(255, 204, 255, 0.788);
    top: 50px;
    left: -18px;
}
.el{
    width: 75%;
    padding: 5px;
    position: relative;
    margin-left: 25%;
    background-color: rgba(102, 204, 255, 0.741);
    border-radius: 20px;
    -webkit-box-shadow: 8px 8px 50px rgba(50,60,240,.280);
    box-shadow: 8px 8px 50px rgba(50,60,240,.280);
}
.el:before{
    content: "";
    width: 0;
    position: absolute;
    border-style: solid;
    border-width: 9px 0 9px 18px;
    border-color: transparent rgba(102, 204, 255, 0.741);
    top: 30px;
    right: -18px;
}
.system{
    width: 65%;
    padding: 5px;
    margin: 0 auto;
    background-color: rgba(153, 243, 144, 0.647);
    border-radius: 20px;
}
.intro{
    min-height: 500px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cobertura>div{
  background-color: rgba(0, 0, 0, 0.1);
  width: 40%;
  margin: 5%;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 10px 70px rgba(20, 20, 20, 0.4);
}
.cobertura>div>h3{
  text-align: center;
}
.message{
  width: 90%;
  margin: 0 auto;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-shadow: 0 10px 70px rgba(20, 20, 20, 0.4);
}
.menu-mensaje{
    width: 30%;
    float: left;
}
.menu-mensaje .mmenu{
    background-color: rgba(50, 153, 268, 0.250);
    cursor: pointer;
    width: 80%;
    padding: 2px;
    margin: auto auto;
    border-radius: 50px;
    -webkit-box-shadow: 9px 12px 66px -4px rgba(0, 0, 0,0.63);
    -moz-box-shadow: 9px 12px 66px -4px rgba(0, 0, 0,0.63);
    box-shadow: 9px 12px 25px -4px rgba(0, 0, 0,0.63);
}
.mmenu .cont{
    width: 95%;
    margin: auto auto;
    position: relative;
}
.mmenu h3{
  font-size: 20px;
}
.menu-mensaje .mmenu img{
    width: 50px;
    margin: 5px;
}
.punteado{
    border-style: dotted;
    border-color: grey;
}
.social img{
    width: 20px;
}
.submenu{
    float: left;
    width: 25%;
}
.datos, .datos a{
    color: grey;
    font-size: 10px;
}
.datos-ciudad, .datos-ciudad a{
    color: grey;
    font-size: 14px;
}
.doc, .doc a{
    color: grey;
    font-size: 12px;
}
.doc a:hover, .datos a:hover{
    color: black;
    text-decoration: none;
}
.service{
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-top: 40px;
    list-style: none;
}
.service li{
    list-style: none;
    margin-top: 5px;
}
.service li{
    margin-left: -70px;
}
.list a{
	font-size: 20px;
}
.sub-service{
	margin-left: -10px;
}
.sub-service a{
    font-size: 14px;
}

.return{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: gold;
	padding: 10px;
	border-radius: 50px;
}
.return a{
	color: cadetblue;
}

@media (min-width: 350px) and (max-width: 770px){
    .service li{
        display: inline-block;
        margin-right: 30px;
        margin-top: 5px;
        border: solid 1px;
        border-radius: 15px;
    }
    .menu-mensaje, .mmenu{
      float: none;
      width: 100%;
      margin: 0;
      margin-bottom: 2em;
    }
    .mmenu .cont{
        margin: auto auto;
        position: relative;
    }
    .mmenu h3{
      font-size: 18px;
    }
    .menu-mensaje .mmenu img{
        width: 50px;
        margin: 5px;
    }
    .chat, .mensaje{
      width: 100%;
      margin: 0;
      float: none;
    }
    .ella{
      width: 90%;
      margin-right: 10%;
    }
    .el{
      width: 90%;
      margin-left: 10%;
    }
    .chat .chicos{
      display: none;
    }
    .submenu{
        float: none;;
        width: 100%;
        margin: .8em;
    }
}
@media (min-width: 771px){
    .service .list{
        border-right: solid 1px;
        margin-right: -30px;
    }
}