<style>


  body {
    font: 400 15px/1.8 Lato, sans-serif;
    color: #777;
  }
  h4 {
    margin: 10px 0 30px 0;
    letter-spacing: 10px;      
    font-size: 20px;
    color: #111;
  }

  h2 {
    font-family: 'Bebas Neue';
    font-style: lowercase;
    font-size: 50px;
    color: #001652;
    line-height: 60px;
  }

  h3 {
  font-family: 'Bebas Neue';
  color: #0db14b;
  font-size: 9em;
  }

  h1 {
  font-family: 'Sensations', Arial, sans-serif;
  font: 800px;
  font-weight:normal;
  font-style:normal;

  }

  p {
  font-size: 2em;
  font-family: 'HELVETICANEUELTPRO-LT';
  }

  @font-face {
  font-family: 'Sensations';
  src: url('../font/Sensations.eot'); /* IE9 Compat Modes */
  src: url('../font/Sensations.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../font/Sensations.woff') format('woff'), /* Modern Browsers */
  url('../font/Sensations.woff2') format('woff2'),
  url('../font/Sensations.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../font/Sensations.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

  @font-face {
  font-family: 'HELVETICANEUELTPRO-LT';
  src: url('../font/HELVETICANEUELTPRO-LT.eot'); /* IE9 Compat Modes */
  src: url('../font/HELVETICANEUELTPRO-LT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../font/HELVETICANEUELTPRO-LT.woff') format('woff'), /* Modern Browsers */
  url('../font/HELVETICANEUELTPRO-LT.woff2') format('woff2'),
  url('../font/HELVETICANEUELTPRO-LT.otf')  format('truetype'), /* Safari, Android, iOS */
  url('../font/HELVETICANEUELTPRO-LT.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

  @font-face {
  font-family: 'HELVETICANEUELTPRO-BD';
  src: url('../font/HELVETICANEUELTPRO-BD.eot'); /* IE9 Compat Modes */
  src: url('../font/HELVETICANEUELTPRO-BD.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../font/HELVETICANEUELTPRO-BD.woff') format('woff'), /* Modern Browsers */
   url('../font/HELVETICANEUELTPRO-BD.woff2') format('woff2'),
  url('../font/HELVETICANEUELTPRO-BD.otf')  format('truetype'), /* Safari, Android, iOS */
  url('../font/HELVETICANEUELTPRO-BD.svg#svgFontName') format('svg'); /* Legacy iOS */
  }


  video {
    min-width: 100%;
    min-height: 100%;
  }


/*=========================
  Portada
 ================= */
  .responsive {
  width: 100%;
  height: auto;
  }

  #videowrapper{  
    position: relative;
    overflow: hidden;
  }

 #video{    
    width: 100%; 
    height: auto;
    margin: auto;
    display: block;
  }

  .container {
    padding: 80px 120px;
  }

  .portada{
   width: 100%;
   background-color: #001652;
  }

  .dis{
    height: 100%;
    width: 100%;
    padding-top: 50px;
    padding-right: 0px;
    padding-left: 0px; 
  }



/*=========================
  Inmobiliaria   .dis 45em
 ================= */

  .inmo{
  height: 13em;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  }

  .inmo h1{
  font-size: 7.5em;
  padding-top: 0.1em;
  color: #001652;
  }

/*=========================
  Inmobiliaria
 ================= */

  .fo {
    border-bottom: 6px solid #fff!important;
    border-top: 6px solid #fff!important;
}

/*=========================
  Contamos
 ================= */

  .cont{
  height: 23em;
  background-color: #e6e7e8;
  padding-top: 5em;
  padding-bottom: 5em;
  z-index: 999;
 }

 .cont span{
  color: #0db14b;
  background-color: #001652;
  padding-right: 0.3em;
  padding-left: 0.3em;
 }

 .containercont{
  background-color: #e6e7e8;
 }

 /*=========================
  Somos
 ================= */

 #somos{
  background-color: #001652;
 }

  .som h1{
  font-size: 7.5em;
  padding-top: 0.5em;
  color: #001652;
  }

  .som p{
  font-size: 2em;
  color: #001652;
  }

  .som {
  height: 50em;
  padding-right: 5.2em;
  padding-top: 8em;
  }

  .som2{
  padding-top: 9.5em;
  }

  .som2 img{
    width: 50%;
  }

  .circular--landscape {
  display: inline-block;
  position: relative;

  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

.content {
  color: white;
  font-size: 3em;
}

/*=========================
  Fotos
 ================= */

  .fo{
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }

  .fot1{
    padding-left: 0px;
    padding-right: 0px;
    width: 25%;
  }

  .fot2{
    padding-left: 0px;
    padding-right: 0px;
    width: 25%;
  }

  /*=========================
  Alquiler
 ================= */

  .alqui{
  height: 13em;
  background-color: #e6e7e8;
 }

  .alqui h1{
  font-size: 9em;
  color: #001652;
  }

  /*=========================
  Decadas
 ================= */  

 #decadas {
  height: 35em;
  background-image: url("../img/ima5.jpg");
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #001652;
  color: white;
  padding-top: 5em;
  padding-bottom: 5em;
 }

 .cartera span{
  color: #0db14b;
  font-size: 800%;
 }

  /*=========================
  Orgullo
 ================= */ 

 #orgullo{
  height: 35em;
  background-color: #fff;
  background-image: url("../img/ima4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
 }

 .org{
  padding-left: 0;
  padding-right: 0;
  height: 100%;
  background-image: url("../img/ima3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
 }

 .orgu {
  padding-left: 5.2em;
  padding-top: 12em; 
 }

  /*=========================
  Comunicate
 ================= */ 

  .comuni{
  height: 30em;
  background-color: #e6e7e8;
  padding-top: 3em;
  padding-bottom: 3em;
 }

  .comuni h1{
  font-size: 9em;
  color: #001652;
  }

  /*=========================
  Contacto
 ================= */ 

  .contact{
  height: 40em;
  background-color: #001652;
  padding-top: 3em;
  padding-bottom: 12em;
  display: inline-block;
  padding-right: auto;
  padding-right: auto;
  }

  .con{
    padding-left: 5em;
  }

  .contact2{
  width: 390px;
  padding-left: 1em;
  z-index: 999;
  }

  .contact1{
  width: 310px;
  z-index: 999;
  }

  .contact h1{
  font-size: 9em;
  color: #fff;
  padding-bottom: 0.2em;
  }

  .contact p{
  color: #fff;
  }
 
  .contact span{
    color: #fff;
    font-size: 1.3em;
    margin-left: 10px;
    font-family: 'HELVETICANEUELTPRO-LT';
    font-stretch: expanded;
  }

  .come{
  padding-right: 10em;
  padding-top: 1.3em;
  }

  /*=========================
  Colegio
 ================= */

  .coleg{
  height: 6.5em;
  background-color: #1e3d73;
  color: #fff;
  padding-right: 0px;
  padding-left: 0px;
 }

 .mat{
  padding-top: 3em;
 }

  .cole span{
    font-size: 1.5em;
    font-style: normal;
    font-family: arial;
  }



  .nav-tabs li a {
    color: #777;
  }
  
/*
  #googleMap {
    padding-left: 0px;
    padding-right: 0px;
  }  

  .mapouter{position:relative;text-align:right;height:500px;width:100%;}
  .gmap_canvas {overflow:hidden;background:none!important;height:500px;width:100%;}
*/


  .navbar {
    font-family: Montserrat, sans-serif;
    margin-bottom: 0;
    background-color: #004388;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity: 0.9;
  }
  .navbar li a, .navbar .navbar-brand { 
    color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
    color: #fff !important;
  }
  .navbar-nav li.active a {
    color: #fff !important;
    background-color: #023059 !important;
  }
  .navbar-default .navbar-toggle {
    border-color: transparent;
  }
  .open .dropdown-toggle {
    color: #fff;
    background-color: #555 !important;
  }
  .dropdown-menu li a {
    color: #000 !important;
  }
  .dropdown-menu li a:hover {
    background-color: red !important;
  }


/*=========================
  Icons
 ================= */

/* footer social icons */
ul.social-network {
  list-style: none;
  display: inline;
  margin-left:0 !important;
  padding: 0;
}
ul.social-network li {
  display: block;
  margin: 0 5px;
  padding-top: 20px;
}


/* footer social icons */
.social-network a.icoRss:hover {
  background-color: #F56505;
}
.social-network a.icoFacebook:hover {
  background-color:#5c5c8a;
  color: #3B5998;
}
.social-network a.icoTelefono:hover {
  background-color:#5c5c8a;
  color: #3B5998;
}
.social-network a.icoInstagram:hover {
  background-color:#cc00cc;
  color: #3B5998;
}

.social-network a.icoTwitter:hover {
  background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
  background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
  background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
  background-color:#007bb7;
}
.social-network a.icoWhatsapp:hover {
  background-color:#43d854;
}
.social-network a.icoSkype:hover {
  background-color:#00aff0;
}
.social-network a.icoBehance:hover {
  background-color:#0b7cff;
}
.social-network a.icoEnvelope:hover {
  background-color:#34495e;
}

.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i, 
.social-network a.icoWhatsapp:hover i, .social-network a.icoSkype:hover i, .social-network a.icoEnvelope:hover i,
.social-network a.icoBehance:hover i, .social-network a.icoInstagram:hover i, a.icoTelefono:hover i{
  color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
  color:#44BCDD;
}

.social-circle li a {
  display:inline-block;
  position:relative;
  margin:0 auto 0 auto;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  text-align:center;
  width: 40px;
  height: 40px;
  font-size:20px;
}
.social-circle li i {
  margin:0;
  line-height:40px;
  text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.social-circle i {
  color: #001652;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-network a {
 background-color: #fff;   
}

.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}


/*=========================
  Correo
 ================= */

address:after{ 
  /* \40 es un código para escribir el caracter '@' */ 
  content: "\40 distefanopropiedades.com"; 
}



/*=========================
  Captcha
 ================= */

#custom_captcha{
  color: #001652;
}

/*
.grecaptcha-badge {opacity:0}
*/

@media screen and (max-width: 1440px) {

  /*=========================
  Contacto
 ================= */ 
.dis {
  padding-top: 50px;
  padding-right: 0px;
  padding-left: 0px;
}

/*=========================
  Inmobiliaria
 ================= */
.inmo h1{
  padding-top: 0.1em;
  }

/*=========================
  Somos
 ================= */
.som {
  height: 45em;
  padding-right: 5.2em;
  padding-top: 8em;
  }

.som h1 {
  padding-top: 0.3em;
}

/*=========================
  Decadas
 ================= */

#decadas {
  height: 34em;
}

/*=========================
  Orgullo
 ================= */ 

 #orgullo{
  height: 29em;
 }

 .orgu {
  padding-top: 9em; 
 }

/*=========================
  Contacto
 ================= */

.con {
    padding-left: 1em;
}

.contact1 {
    width: 284px;
}

.contact2 {
    padding-left: 1em;  
    width: 390px;
}

.come {
    padding-right: 3em;
    padding-top: 1.3em;
}

}


@media screen and (max-width: 1200px) {

/*=========================
  Inmobiliaria
 ================= */
.inmo {
}

.inmo h1{
  padding-top: 0.1em;
  }

/*=========================
  Contamos
 ================= */
.cont {
    height: 20em;
    padding-top: 4em;
    padding-bottom: 5em;
}

/*=========================
  Somos
 ================= */
.som {
  height: 33em;
  padding-right: 3.2em;
  padding-top: 1em;
}

.som h1 {
  font-size: 6.5em;
  padding-top: 0.7em;
}

.som2 {
    padding-top: 5.5em;
}

.som2 img {
    width: 63%;
}

.som p {
    font-size: 1.6em;
    color: #001652;
}

/*=========================
  Alquiler
 ================= */
.alqui h1 {
    font-size: 8em;
}

.alqui {
    height: 12em;
}


/*=========================
  Decadas
 ================= */
#decadas {
  height: 25em;
  padding-top: 2em;
}

.cartera p{
  font-size: 1.8em;
}

/*=========================
  Orgullo
 ================= */ 
 #orgullo{
  height: 21em;
 }

 .orgu {
  padding-top: 5em;
  padding-left: 4em; 
 }

 .orgu p{
  font-size: 1.8em;
 }

/*=========================
  Comunicate
 ================= */
.comuni {
    height: 25em;
    padding-top: 1.5em;
    padding-bottom: 3em;
}

.comuni p{
  font-size: 1.8em;
}

/*=========================
  Contacto
 ================= */

.con {
    padding-left: 3em;
}

.contact {
    height: 43em;
    padding-top: 1em
}

.contact1 {
    width: 300px;
}

.contact h1 {
    font-size: 8em
}

.contact2 {
    width: 390px;
    padding-left: 1em;
}

.come {
    padding-right: 6em;
    padding-top: 1.3em;
}

ul.social-network li {
    padding-top: 15px;
}

}

@media screen and (max-width: 768px) {

/*=========================
  Portada
 ================= */



/*=========================
  Inmobiliaria
 ================= */

.inmo {
    height: 10em;
}

.inmo h1 {
    font-size: 5.5em;
}

/*=========================
  Contamos
 ================= */

.cont{
    height: 33em;
    padding-right: 9em;
    padding-left: 9em;
    padding-top: 2em;
}

/*=========================
  Somos
 ================= */

.som {
    height: 28em;
}

.som h1{
    font-size: 6em;
    padding-top: 0.2em;
    color: #ccc;
}

.som p {
    font-size: 1.6em;
    color: #ccc;
}

.som2 img {
    width: 46%;
}

.org{
    height: 100%;
    background-image: url("../img/ima3_800.jpg");
}

/*=========================
  Alquiler
 ================= */

.alqui {
    height: 12em;
}

.alqui h1 {
    font-size: 5em;
    line-height: 0.9em;
}

/*=========================
  Decadas
 ================= */

#decadas 
    {height: 16em;
    background-image: url("../img/prueba800_1.jpg");
}

.cartera p {
    font-size: 1.6em;
}

.cartera h3{
    font-size: 7em;
}

/*=========================
  Orgullo
 ================= */

#orgullo {
    height: 19em;
    background-image: url("../img/ima4_800.jpg");
}

.orgu {
    padding-top: 3.5em;
    padding-left: 2em;
    padding-right: 17em;
}

.orgu p {
    font-size: 1.5em;
}

/*=========================
  Comunicate
 ================= */

.comuni {
    height: 21em;
    padding-top: 0.5em;
}

.comuni h1 {
    font-size: 6em;
}

/*=========================
  Contacto
 ================= */

.contact {
    padding-top: 0em;
    height: 60em;
}

.contact h1 {
    font-size: 8em;
    padding-bottom: 0.2em;
}

.contact1 {
    width: 360px;
}

.contact2 {
    width: 500px;
    padding-left: 1em;
    padding-bottom: 4em;
}

.come {
    padding-right: 1em;
    padding-top: 25.3em;
}

.contact span {
    font-size: 1.8em;
}

}


@media screen and (max-width: 558px) {

/*=========================
  Comunicate
 ================= */

.comuni h1 {
    font-size: 5em;
}

.comuni p {
    font-size: 1.5em;
}

/*=========================
  Contacto
 ================= */

.contact {
    padding-top: 0em;
    height: 66em;
}

.contact span {
    font-size: 1.3em;
}

/*=========================
  Colegio
 ================= */

.coleg {
    height: 5.2em;
}

.cole{
    padding-right: 0em;
    padding-left: 0em;
}

.cole img{
    width: 9em;
}

.cole span {
    font-size: 1.2em;
}

}


@media screen and (max-width: 480px) {

/*=========================
  Portada
 ================= */

.navbar-header img{
  width: 110px;
  padding-top: 0.4em;
  padding-left: 1.2em;
}

/*=========================
  Portada
 ================= */
.dis {
  height: auto;
}

/*=========================
  Inmobiliaria
 ================= */

.inmo {
    height: 14em;
    padding-left: 1em;
    padding-right: 1em;
}

.inmo h1 {
    font-size: 4.5em;
}

.cont{
  height: 23em;
  padding-right: 0em;
  padding-left: 0em;
  padding-top: 1em;
}

.cont h2{
  font-size: 44px;
  line-height: 55px
}

.contact h1 {
    font-size: 7em;
}

/*=========================
  Somos
 ================= */

.org{
    height: 51em;
    background-image: url("../img/ima2_425.jpg");
}

.som2 {
    padding-top: 5.5em;
}

.som2 img {
    width: 65%;
}

.som h1{
    font-size: 6em;
    padding-top: 0.2em;
    color: #fff;
}

.som {
    padding-right: 1.2em;
    padding-top: 0em;
    padding-right: 2em;
}

.som p {
    font-size: 1.6em;
    color: #fff;
}

/*=========================
  Alquiler
 ================= */

.alqui {
  height: 12em;
  padding-top: 0.6em;
}

.alqui h1 {
    font-size: 4.5em;
    line-height: 0.9em;
}

/*=========================
  Decadas
 ================= */

#decadas {
    height: 22em;
}

/*=========================
  Orgullo
 ================= */
.orgu {
    padding-left: 2em;
    padding-right: 2em;
}
 
#orgullo{
   height: 31em;
   background-image: url("../img/ima4_425.jpg");
 }

.orgu p {
    padding-right: 7em;
}

/*=========================
  Comunicate
 ================= */

.comuni {
    height: 27em;
}

.comuni h1 {
    font-size: 7em;
    line-height: 0.8em;
}

.comuni p {
    padding-right: 2em;
    padding-left: 2em;
}

/*=========================
  Contacto
 ================= */

.contact {
    height: 66em;
}

.con {
    padding-left: 0em;
}

.come {
    padding-top: 26.3em;
}

.contact1 {
    width: 390px;
}

.contact2 {
    width: 390px;
    padding-left: 1em;
    padding-bottom: 2em;
}



/*=========================
  Colegio
 ================= */

.coleg {
    height: 5.2em;
}

.cole{
    padding-right: 0em;
    padding-left: 0em;
}

.cole img{
    width: 9em;
}

.cole span {
    font-size: 1.2em;
}

}

@media screen and (max-width: 375px) {

/*=========================
  Inmobiliaria
 ================= */

.inmo {
    height: 13em;
}

.inmo h1 {
    padding-top: 0em;
}

/*=========================
  Alquiler
 ================= */

.alqui {
    height: 15em;
    padding-top: 0.1em;
}

.cartera h3{
    font-size: 6em;
}

/*=========================
  Orgullo
 ================= */

#orgullo {
    height: 29em;
}

.orgu p {
    padding-right: 3em;
}

/*=========================
  Comunicate
 ================= */

.comuni p {
    padding-right: 1em;
    padding-left: 1em;
}

/*=========================
  Contacto
 ================= */

.con {
    padding-left: 0em;
}

.contact1 {
    width: 360px;
}

.contact2 {
    width: 360px;
}

.contact span {
    font-size: 1.1em;
}

/*=========================
  Colegio
 ================= */

.cole span {
    font-size: 1em;
}

@media screen and (max-width: 320px) {

/*=========================
  Orgullo
 ================= */

.cont {
    height: 30em;
}

/*=========================
  Somos
 ================= */

.som2 {
    padding-top: 3.5em;
}

.som h1 {
    font-size: 5em;
    padding-top: 0.1em;
}

.som p {
    font-size: 1.4em;
}

.org {
    height: 40em;
}

/*=========================
  Orgullo
 ================= */

#orgullo {
    height: 25em;
}

.orgu p {
    font-size: 1.4em;
    padding-right: 2em;
}

.orgu {
    padding-left: 1.2em;
    padding-right: 1em;
}

.orgu {
    padding-top: 1em;
}

/*=========================
  Alquiler
 ================= */

.cartera h3{
    font-size: 5em;
}

/*=========================
  Comunicate
 ================= */

.comuni h1 {
    font-size: 6em;
    line-height: 0.7em;
}

.comuni p {
    font-size: 1.6em;
    padding-right: 1em;
    padding-left: 1em;
}

.comuni {
    height: 26em;
}

/*=========================
  Contacto
 ================= */

.contact h1 {
    font-size: 6em;
}

.con {
    padding-left: 0em;
}

.contact {
    height: 64em;
}

.contact1 {
    width: 300px;
}

.contact2 {
    width: 300px;
}

.contact span {
    font-size: 0.9em;
}

/*=========================
  Colegio
 ================= */

.coleg {
    height: 4.2em;
}

.cole img{
    width: 7em;
}

.cole span {
    font-size: 0.8em;
}

}
  </style>