@font-face {font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.otf")}

body{
      background-image: url('../img/back.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      font-family: "Montserrat";

}
html,body
{
  padding: 0;
  margin: 0;
}
#menu ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

#menu ul li {
    display: inline;
    padding-left: 100px;

}
#menu ul li:first-child {
    display: inline;
    padding: 0;
}

#menu ul li a {
    display: inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: 2px solid #333;
    transition: all 0.25s linear;
    font-family: "Montserrat";
}

#menu ul li a:hover {
    background-color: #111;
    border-bottom: 2px solid red;
}

.panel{
  width: 100%;
  margin-top: 40px;
  height: 500px;
  padding-top: 20px;
  opacity: 0.99;
}

.fixed-nav-bar{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;



}

#slider
{
  background-image: url('../img/s1.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  border-bottom-right-radius:20px;
  border-bottom-left-radius:20px;
}
#slider h2
{

  text-align: center;
  vertical-align: middle;
  line-height: 300px;
  font-size: 100px;
  color: white;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

}
#sobremi
{
  background-color:#213E4A;
  border-radius: 20px;


}
#sobremi h2
{
color: white;
text-align: center;
font-size: 50px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

}

#sobremi ul{

padding-top: 50px;
padding-left: 200px;


}
#portfolio
{
  width: 100%;
  margin-top: 40px;
  height: 1200px;
  padding-top: 20px;
  opacity: 0.99;

}
#portfolio h2{

  color: white;
  text-align: center;
  font-size: 50px;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

#portfolio h3{

  color: white;
  text-align: center;
  font-size: 25px;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}


#contacto
{
  background: #9c98a6;
  height: 700px;

}
#contacto h2
{
  color: white;
  text-align: center;
  font-size: 50px;
  text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

}


#piecito
{
  background: rgb(36, 33, 35);
  height: 100px;
  margin: 0;
  padding: 50px 0 0 25px;
}

#piecito span {

  font-family: "Montserrat";
  text-shadow: 1px 1px black;
  color: white;


}

#sobremi figure{
	border:3px solid #142830;
	float:right;
	height:300px;
	margin-left:15px;
	overflow:hidden;
	width:300px;
  border-radius: 500px;
  margin-right: 200px;
}

#sobremi figure:hover{
	-moz-box-shadow:0 0 10px #4D7788;
	-webkit-box-shadow:0 0 10px #4D7788;
	box-shadow:0 0 10px #4D7788;
}

#sobremi figure img{
  box-shadow: 10px 10px 5px #888;
}

#list3 { }
#list3 ul { color:#eee; font-size:18px; }
#list3 ul li {
  line-height:60px;
  font-size: 30px;
  text-shadow: -1px 0px 14px rgba(138, 177, 202, 0.83); }
#list3 ul li:before {
      content: "";
      border-color: transparent #111;
      border-style: solid;
      border-width: 0.35em 0 0.35em 0.45em;
      display: block;
      height: 0;
      width: 0;
      left: -1em;
      top:40px;
      position: relative;
  }

  .contacto
  {
    margin: 0 auto;
    width:250px;
    text-align: center;

  }
  .contacto input
  {

    border: 2px solid;
    border-radius: 10px;
    background-color: rgba(88, 92, 98, 0.36);

}

  textarea {

    border: 2px solid;
    border-radius: 10px;
    background-color: rgba(88, 92, 98, 0.36);

  }
  textarea:focus {

    outline: none !important;
    border:1px solid rgba(49, 115, 14, 0.66);
    box-shadow: 0 0 10px #719ECE;
    transition: border 1s;


  }
  .contacto button

  {
    border-radius: 10px;
    background-color: white;


  }
  #map{
    width: 100%;
    height: 300px;

  }