/* CSS Document */

@font-face {
	font-family: "Roboto-Bold";
    src: url("Roboto-Bold.eot");
    src: url("Roboto-Bold.eot?#iefix") format("embedded-opentype"),
        url("Roboto-Bold.woff") format("woff"),
        url("Roboto-Bold.ttf") format("truetype"),
        url("Roboto-Bold.otf")  format('opentype');
    font-weight: 700;
}

@font-face {
	font-family: "Roboto-Light";
    src: url("Roboto-Light.eot");
    src: url("Roboto-Light.eot?#iefix") format("embedded-opentype"),
        url("Roboto-Light.woff") format("woff"),
        url("Roboto-Light.ttf") format("truetype"),
        url("Roboto-Light.otf")  format('opentype');
    font-weight: 300;
}

@font-face {
	font-family: "Roboto-Italic";
    src: url("Roboto-Italic.eot");
    src: url("Roboto-Italic.eot?#iefix") format("embedded-opentype"),
        url("Roboto-Italic.woff") format("woff"),
        url("Roboto-Italic.ttf") format("truetype"),
        url("Roboto-Italic.otf")  format('opentype');
    font-weight: 700;
}

.contenido_be article,
.contenido_be aside,
.contenido_be figure,
.contenido_be footer,
.contenido_be header,
.contenido_be menu,
.contenido_be nav,
.contenido_be section,
.contenido_be div,
.contenido_be img,
.contenido_be h1,
.contenido_be h2,
.contenido_be h3,
.contenido_be h4,
.contenido_be h5,
.contenido_be h6,
.contenido_be p,
.contenido_be span,
.contenido_be strong {
	display: block;
	font-family: "Roboto-Light",Arial,Helvetica,sans-serif;
	font-weight: 300;
	color: #666666;
    box-sizing: border-box;
}

/* Mixin itself */
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

/* Usage as a mixin */
.element {
  .clearfix();
}

.contenido_be strong,
.parrafo-m strong,
.titu-03a strong {
	font-family: "Roboto-Bold",Arial,Helvetica,sans-serif;
	font-weight: 700;
	box-sizing: border-box;
}

/* CONTENIDO */

.contenido-be {
	margin: 0 auto;
	width: 734px;
	color: #7d7d7d;
	overflow: hidden;
    box-sizing: border-box;
}


.contenedor-01,
.contenedor-02,
.contenedor-03,
.contenedor-04 {
	background-color: transparent;
	padding: 6% 8%;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}

.contenedor-01 {
	text-align: left;
	padding:0;
	background-color: #222222;
    width: 100%;
}

.contenedor-02 {
	background-image: url(../image/ima-06.jpg);
	background-repeat: no-repeat;
	padding: 7% 8% 6% 24%;
}

.contenedor-03 {
	padding: 4%;
	background-color: #ecf3fa;
}

.contenedor-04 {
	background-image: url(../image/ima-back.jpg);
	background-repeat: no-repeat;
    background-color: transparent;
    padding: 10px 28%;
}

.box-01 {
	width: 50%;
	display: inline-block;
	box-sizing: border-box;
}

.box-02 {
	width: 49%;
	display: inline-block;
	float: right;
	box-sizing: border-box;
}

.parrafo-m,
.parrafo-m2 {
	font-family: "Roboto-Light",Arial,Helvetica,sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #000000;
	text-align: justify;
	margin: 0 0 10px;
	box-sizing: border-box;
}

.parrafo-m2 {
	font-family: "Roboto-Italic",Arial,Helvetica,sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}

.titulo-01 {
	font-family: "Roboto-Bold",Arial,Helvetica,sans-serif;
	font-weight: 700;
	text-align: center;
	color: #0c1f6f;
	font-size: 24px;
	margin-top: 10px;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.btn-group-lg>.btn, .btn-lg {
    padding: 10px 16px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.text-boto-01,
.text-boto-02,
.text-boto-03,
.text-boto-04,
.text-boto-05 {
	font-size: 14px;
	cursor: auto;
	box-sizing: border-box;
	box-shadow: none;
}

.text-boto-01 {
	background-color: #2d1743;
	border-color: #2d1743;
}

.text-boto-02 {
	background-color: #156631;
	border-color: #156631;
}

.text-boto-03 {
	background-color: #005877;
	border-color: #005877;
}

.text-boto-04{
	background-color: #6a6b6c;
	border-color: #6a6b6c;
}

.text-boto-05 {
	background-color: #a32c21;
	border-color: #a32c21;
}

.text-boto-01:hover,
.text-boto-01:focus {
	background-color: #2d1743;
	border-color: #2d1743;
	opacity: 0.8;
}

.text-boto-02:hover,
.text-boto-02:focus {
	background-color: #156631;
	border-color: #156631;
	opacity: 0.8;
}

.text-boto-03:hover,
.text-boto-03:focus {
	background-color: #005877;
	border-color: #005877;
	opacity: 0.8;
}

.text-boto-04:hover,
.text-boto-04:focus {
	background-color: #6a6b6c;
	border-color: #6a6b6c;
	opacity: 0.8;
}

.text-boto-05:hover,
.text-boto-05:focus {
	background-color: #a32c21;
	border-color: #a32c21;
	opacity: 0.8;
}

.route_widget {
    width: 100%;
    margin-bottom: 48px;
    word-wrap: break-word;
    box-sizing: border-box;
}

#colophon {
    color: #fff;
    background-color: #222222;
    position: relative;
    padding: 0 40px;
    padding-top: 48px;
    font-size: 12px;
    line-height: 1.2em;
    box-sizing: border-box;
}

#colophon .box-01,
#colophon .box-02,
#colophon .box-03 {
    width: 210px;
    padding: 0 15px;
    float: left;
    box-sizing: border-box;
}

#colophon .route_widget .widget-title h4,
#colophon .route_widget .widget-title h5 {
    color: #fff;
}

.route_widget ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#colophon .route_widget ul li, #colophon .route_widget ul ul {
    border-color: #444444;
}

.route_widget ul li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
}

#colophon img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    box-sizing: border-box;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.aligncenter, .wp-caption.aligncenter {
    margin-top: 7px;
    margin-bottom: 7px;
}

/* CARROUSEL */
.carousel-indicators {
    left: 21%;
}
.carousel-indicators li {
    background-color: #f7d828;
    border: 1px solid #f7d828;
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
	.carousel-indicators {
	    bottom: 5px;}
}


