@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
margin: 0;
padding: 0;
border: 0;
color: #5a5a5a;
}
nav {
background: #60645e;
}
ul {
list-style-image: url('../imagenes/layout/icon-li.png');
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 2rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
object-fit: cover;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
.top{
margin: 5px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
/* Lista------------------------- */
.ul {
list-style-image: url('../imagenes/layout/icon-li.png');
}
/*Boxes*/
.block-boxes { padding-top: 8px;}
.block-boxes-head h2 {margin: 0 0 10px 0; font-size: 36px; color: #333333; font-weight: 300;}
.block-boxes-head p {margin: 0 0 35px 0; font-size: 18px; color: #4f5254; line-height: 1.7; letter-spacing: 1px;}
.block-box { background: #fff; margin-bottom: 44px; padding: 15px; border: 1px solid #ebeced;}
.block-box figure {margin: 0;}
.block-box-data { padding: 20px 0px 20px 0px; min-height: 185px;}
.block-box-data h3 {margin: 0 0 10px 0; font-size: 24px; color: #0275d8; font-weight: normal; text-transform: uppercase;}
.block-box-data p {margin: 0; text-align: center;}
.block-box-btn {display: block; border-top: 1px solid #ebeced; border-bottom: 1px solid #ebeced; text-align: center; height: 48px; color: #ffb375; font-size: 20px; line-height: 48px;}
/*.block-box-btn:hover .a {transition: all .3s ease;}*/
.block-box-btn:hover .a { text-decoration: none;}
.block-box-btn:hover { background: #fab012; color: #fff; text-decoration: none;}
/*.block-box-btn:hover .a {transform: rotate(-90deg);}*/
.block-box { background: #F9FAFB;}
/**/
.hightlight-box-pic {min-height: 400px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.hightlight-box-pic a {display: block; height: 100%;}
.hightlight-box-data {padding-left: 15px; padding-top: 15px; padding-right: 30px; padding-bottom: 30px;}
.hightlight-box-data h3 {margin: 0 0 15px 0; font-weight: 300; font-size: 35px; color: #ff9900; text-transform: uppercase;}
.hightlight-box-data h4 {margin: 0 0 15px 0; font-size: 22px; color: #999999;}
.hightlight-box-data p {margin: 0 0 38px 0;}
.hightlight-box-data-icon-btn { display: flex; align-items: center; color: #4f5254;}
.hightlight-box-data-icon-btn:hover {color: #000; text-decoration: none;}
.hightlight-box-data-icon-btn span {display: inline-block; border: 1px solid #ffcf0d; border-radius: 100%; width: 64px; height: 64px; text-align: center; line-height: 64px; font-size: 20px; margin-right: 10px;}
.hightlight-box-data-icon-btn .fas {margin-left: 5px;}
.hightlight-box-data-btn {display: block; width: 200px; height: 30px; background: #9a9a9a; text-align: center; border: 1px solid #fab012; color: #fff; line-height: 30px;}
.hightlight-box-data-btn .fas {transition: all .3s ease;}
.hightlight-box-data-btn:hover {background: #fab012; color: #fff;}
.hightlight-box-data-btn:hover .fas {transform: rotate(-90deg);}
/**/
.modal-content-video {background-color: #37383d;}
.modal-content-video .modal-header {border-bottom: 1px solid #666;}
.modal-content-video .modal-title {color: #fff;}
.modal-content-video .close {color: #fff;}
/**/
.card-img-top{
width: 100%;
cursor: pointer;
transition: 1s;
}
.card-img-top:hover{
transform: scale(1.1);
}
/* jumbotron
------------------------- */
:root {
--jumbotron-padding-y: 3rem;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 0);
padding-bottom: calc(var(--jumbotron-padding-y) * 1);
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
.modal-content{
max-width: 500px;
}
footer {
background: #60645e;
padding-top: 3rem;
padding-bottom: 3rem;
margin-top: 7rem;
}
footer p {
margin-top: .35rem;
margin-bottom: .50rem;
}
footer p a {
color: #fab012;
text-decoration: none;
}
footer p a:hover {
color: #fcddce;
text-decoration: none;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 45px;
color: #fab012;
}
}
@media (min-width: 62rem) {
.featurette-heading {
margin-top: 4rem;
}
}
@media screen and (max-width:992px) {
.display-4 {
font-size: 3rem;
}
}
@media screen and (max-width:480px) {
.display-4 {
font-size: 2.25rem;
}
h3 {
font-size: 1.50rem;
}
.jumbotron-heading {
font-size: 2.07rem;
}
.block-box-btn {display: block; background: #fab012; color: #fff; text-decoration: none; /*text-align: center; height: 48px; color: #ffb375; font-size: 20px; line-height: 48px;*/}
}
.featurette-heading {
font-size: 35px;
color: #fab012;
}
.featurette .lead {
font-size: 16px;
}
.featurette-divider {
margin: 2rem 0; /* Space out the Bootstrap
more */
}