@charset "utf-8";
/* CSS Document */

<style>



    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 0px;
      color: #5a5a5a;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    
    .carousel .container {
      position: relative;
      z-index: 9;

    }
	


    /*.carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: inherited;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 570px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 570px;
    }
    */
     .carousel .imgrasca {
      position: relative;
      top: auto;
      left: auto;
      width: 150px;
      min-width: inherit;
      height: 49px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 400px;
      padding: 0 20px;
      margin-top: 100px;
      margin-left: 15px;
    }
    .carousel-caption h1 {
	
		font-family:'roboto_slabregular';
		color: #fff;
		font-size: 50px;
		margin-top: -30px;
		font-weight: bold;
}

    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size:24px;
      font-weight: normal;
    }
    
    .carousel-caption .leadblack {
      margin: 0;
      line-height: 1.25;
      color: #4b4b4b;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      font-size: 22px;
    }
    
    .carousel-caption .leadblacksub {
      margin: 0;
      line-height: 1.25;
      color: #4b4b4b;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      font-size: 15px;
    }
    
    .carousel-caption .btn {
      margin-top: 10px;
    }


    /*  CSS BACKGROUNDS */
    
    .blue {
      background: url(../img/fondo_azul.gif) repeat;
      margin-left: auto;
      margin-right: auto;
    }
     .blue p, h2, h5{
      font-family: 'robotomedium', serif;
      color: #383b3d;
    }
	.blue p.text{
	line-height: 20pt;
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
	font-family: 'robotolight';
	font-size: 16px;
	color: #383b3d;
	}
	.blue p.textw{
	line-height: 20pt;
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
	font-family: 'robotolight';
	font-size: 16px;
	color: #FFF;
	}
    
    .red {

      background: url(../img/fondo_download.png) repeat;
      margin-left: auto;
      margin-right: auto;
      font-family: 'robotomedium', serif;
	  min-height: 200px;
      
    }
     .red p{
      font-size: 18px;
      color: white;
      text-shadow: 1px 1px #575757;    
      
    }
    
    .redfont {
    color: #dc4f46;
    font-family: 'roboto_slabregular', serif;
    font-size:34px;
	text-align: center;
    
    }
	

    
    .whitefont {
    color: white;
    font-family: 'roboto_slabregular', serif;
    text-shadow: 1px 1px #575757;    
    }
    .rafa {

    color: white;
    font-family: 'roboto_slabregular', serif;
    text-shadow: 1px 1px #575757;
    font-size:32px;
	text-align: center;

}

    .rafa1 {

    color: white;
    font-family: 'robotothin', serif;
    text-shadow: 1px 1px #575757;
    font-size:24px;
	text-align: center;

}

    .rafa2 {

    color: #333333;
    font-family: 'roboto_slabregular', serif;
    font-size:18px;

}

	
	.logosmobiler {
	
	text-align: center;
	
	}
	.logosmobilel img{
	
	float: left;
	margin-left: 20px;
	
	}


    .middlearrow {
      background: url(../img/flecha_download.png) no-repeat;
    }
    
    .font18 {
	margin-top: 10px;
	margin-bottom: 10px;
    font-family: 'robotothin', serif;
    font-size: 24px;
	text-align: center;
    }
	.font18c {
	margin-top: 10px;
	margin-bottom: 10px;
    font-family: 'robotothin', serif;
    font-size: 22px;
	text-align: center;
	color: #333;
    }
    .logo {
    background: url(../img/logo_rubit.png) no-repeat;
    /*height: 87px;*/
    }
	
	.marginTop50 {margin-top:50px;}
    
    .pheader{
    font-size: 18px;
    /*color: #148d96;*/
    /*text-shadow: 1px 1px #ededed;    */
    font-family: 'roboto_slabregular', serif;
    /*margin-top: 30px;*/
    cursor: pointer;
    text-align: center;
    }
    .pheader:hover{
       cursor: pointer;
       text-align: center;
       color: #148d96;
    }
	
	/*.pheader{
    font-size: 16px;
    color: #148d96;
    text-shadow: 1px 1px #ededed;    
    font-family: 'roboto_condensedbold', serif;
    margin-top: 30px;
    cursor: pointer;
    text-align: center;
    }
    .pheader:hover{
       text-shadow: none;    
       cursor: pointer;
       text-align: center;
       color: white;
       background: #148d96;
       
       
    }*/
	.aheader{
    font-size: 16px;
    color: #148d96;
    text-shadow: 1px 1px #ededed;    
    font-family: 'roboto_condensedbold', serif;
    margin-top: 30px;
    cursor: pointer;
    text-align: center;
    }
    .aheader:hover{
       text-shadow: none;    
       cursor: pointer;
       text-align: center;
       color: white;
       background: #148d96;
       
       
    }
    .separation {
        background: url(../img/linea_separacion_menu.png) no-repeat;
    }
    
    .bggray{
    background-color: #fafafa;
    }
	.bggray2{
    background-color: #ececec;
    }
	.bgptr13{
    background: #379ea3 url(../img/pattern_13.jpg) repeat ;
    }
    .bgptr19{
	background: #379ea3 url(../img/pattern_19.jpg) repeat ;
	min-height: 535px;
	}
	
	.bgptr21{
	background: #379ea3 url(../img/pattern_21.jpg) repeat ;
	min-height: 535px;
	}
	
	.bgptr24{
	background: #379ea3 url(../img/pattern_24.jpg) repeat ;
	min-height: 535px;
	}
	
	.white{
	color: #FFF;
	font-family: 'roboto_slabregular', serif;
	}
	
    .cloud {
    background-color: #d0e2e2;
    }
    .clouds {
    background: url(../img/nubes_repeticion.png) repeat-x;
    }
    
    .bgfooter{
    background: #379ea3 url(../img/fondo_pie.png) repeat;
    }
    
    
    .bginput {
    background-color: #9acdd0;
    width: 100%;
    height: 35px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
    
    .bgtextarea {
    background-color: #9acdd0;
    width: 100%;
    height: 100px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
   .bgtextareab {
    background-color: #9acdd0;
    width: 100%;
    height: 270px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

	.btnpublish {
		
	display: inline-block;
	padding: 0.4em 0.9em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	vertical-align: middle;
	margin-bottom: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: #127eaf;
	background: -webkit-linear-gradient(top, #25a8e3 0%, #1c92c8 49%, #188bc1 51%, #127eaf 100%);
	background: -moz-linear-gradient(top, #25a8e3 0%, #1c92c8 50%, #188bc1 50.1%, #127eaf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff25a8e3', endColorstr='#ff127eaf', GradientType=0);
	border-color: #127eaf #1878a5 #126a94 #1878a5;
	-webkit-box-shadow: inset 0 0 0.2em rgba(255,255,255,0.5),0 1px 2px rgba(0,0,0,0.15),0 0 0 #000;
	box-shadow: inset 0 0 0.2em rgba(255,255,255,0.5),0 1px 2px rgba(0,0,0,0.15),0 0 0 #000;
	font-size: 14px;
	line-height: normal;
	font-weight: 500;
	color: #fff;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
	cursor: pointer;
		
	}
	
	.bgslide {
	    background: url(img/slidebg.jpg) repeat;
	
	}
	
	.slidef {
		
		height: 600px;
	    background: url(../img/slidef.png) no-repeat;
	
	}
	
	footer p {
	    font-family: 'rorobotothin', serif;
		color: #333333;
	}
	
	.alignleft{
     line-height: 20pt;        /* para la separacion entre lineas */  
	text-align: left;

	}
	
	.alignright {
	line-height: 20pt;        /* para la separacion entre lineas */  
	text-align: right;
	}

    /* MARKETING CONTENT
    -------------------------------------------------- */
   
    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
color: #383b3d;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
font-family:'robotolight';

font-size:18px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 40px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      /*padding-top: 120px;*/ /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      /*margin-top: -120px;*/ /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
	  color: #148d96;
	  font-family: 'roboto_slabregular', serif;
    }
	
     .featurette-heading-h3 {
      font-size: 24px;
      letter-spacing: -1px;
	  color: ##5a5a5a;
	  font-family: 'roboto_slabregular', serif;
    }
	
	.form-signin {
	  max-width: 330px;
	  padding: 15px;
	  margin: 0 auto;
	}
	.form-signin .form-signin-heading,
	.form-signin .checkbox {
	  margin-bottom: 10px;
	}
	
	.form-signin-heading-color{
	color: #148d96;
	font-family: 'roboto_slabregular', serif;
	text-align: center;
	}
	
	.form-signin .checkbox {
	  font-weight: normal;
	}
	.form-signin .form-control {
	  position: relative;
	  font-size: 16px;
	  height: auto;
	  padding: 10px;
	  -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
			  box-sizing: border-box;
	}
	.form-signin .form-control:focus {
	  z-index: 2;
	}
	.form-signin input[type="text"] {
	  margin-bottom: -1px;
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
	}
	.form-signin input[type="password"] {
	  margin-bottom: 10px;
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
	}
	
	.centerimg{
	  text-align: center;
	  }
	.centertext{
	  text-align: center;
	}
	.text-align-center{
	  text-align: center;
	}


    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      /*.carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }*/

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }

      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 50%;
        padding: 0 30px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }
      .carousel-caption .leadsub{
        font-size: 16px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }
	  
	  
	  
	  .messagebusiness {
	  height: 300px;
	  }
	  
	  .largeButtonBusiness{
	  width: 300px;
	  }
	  
	  

    }
	
	.no-dots-list {list-style: none;}
	  
	li {
	font-family: 'roboto_slabregular', serif;
	line-height: 26px;
	font-size: 14px;
	color #5a5a5a;
	}
	
	.lead2 {
  margin-bottom: 20px;
  font-size: 15.099999999999998px;
  font-weight: normal;
  line-height: 1.4;
  font-family: 'robotolight';

}

@media (min-width: 768px) {
  .lead2 {
    font-size: 19px;
  }
}

.alead {
  margin-bottom: 20px;
  font-size: 15.099999999999998px;
  font-weight: bolder;
  line-height: 1.4;
  font-family: 'robotolight';
  cursor: pointer;
  color: #428bca;
  text-decoration: underline;
}

.greenrubit{
	color: #148d96;
	font-weight: bolder;
}

@media (min-width: 768px) {
  .alead {
    font-size: 19px;
  }
}


/*****      franquicias        ******/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

}
.fadeone07 {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fadeone14 {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}

.fadeone21 {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
animation-delay: 2.1s;
}

.fadeone28 {
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
animation-delay: 2.8s;
}
  
h1.titlef {
		font-family:'roboto_slabregular';
		color: #fff;
		font-size: 60px;
		font-weight: bold;
		text-align: center;
}  
h2.subtitlef {
		font-family:'roboto_slabregular';
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-top: 10px;
}

h2.subtitlefoursteps {
		font-family:'roboto_slabregular';
		color: #148d96;
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-top: 10px;
}
.resize75p {
	width: 75%;
	height: 75%;
	margin-top: 10px;
}
li .ticf {
background: url("../img/tic-green.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 15px;
margin: 7px 10px 0 0;
width: 18px;
}
li.goals {
margin-bottom: 20px;
font-size: 24px;
font-weight: normal;
line-height: 1.4;
font-family: 'robotolight';
padding: 0;
list-style: none;

}
ul.goals{
margin: 0;
padding: 0;
list-style: none;
}
li .ticred {
background: url("../img/tic-red.png") no-repeat scroll 0 0 transparent;
display: block;
float: left;
height: 15px;
margin: 7px 10px 0 0;
width: 18px;
}

#objetivos p.padding3f {
padding: 10px 15px;
box-sizing: border-box;
cursor: pointer;
}
#objetivos p.padding3f:hover{
padding: 10px 15px;
box-sizing: border-box;
cursor: pointer;
background-color: #f3f3f3;

}
#comofunciona p.selected{
color: #fff;
background-color: #148d96;
padding: 10px 15px;
box-sizing: border-box;
cursor: pointer;
}
#comofunciona p.selected:hover{
background-color: #148d96;
}
    </style>