/*
* Smart - One page Template
* Version: 1.0
* Copyright 2014
* Created by: DamterThemes
* URL: http://damterthemes.com
* Designed and built based on Twitter Bootstrap 3.
*/

/*
**********************************************
**********************************************
CONTENTS:

01 General styles
02 Home
03 Features
04 About
05 Portfolio
06 Testimonials
07 Pricing
08 Contact
09 Footer

**********************************************
**********************************************
*/

/*
**********************************************
01 General Styles 
**********************************************
*/
body { font-family: Verdana, Geneva, sans-serif; top: 80px; font-size: 16px; }
/* Grid */
#main_container { padding: 0; margin: 0; width: 100%; background-color: #ffffff; }
.row { margin-right: 0; margin-left: 0; }
a, a:link { text-decoration: none !important; outline: 0; }
a:focus { outline: 0; }
h2.title { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 3em; color: #666666; }
h2.title-white { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 3em; color: #ffffff; }
h3.description-text { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.2em; color: #666666; }
hr { margin-bottom: 10px; margin-top: 10px; }
/* Google Fonts */
@font-face { font-family: 'pt_sansregular'; src: url('../fonts/pt_sans/pt_sans-web-regular-webfont.eot'); src: url('../fonts/pt_sans/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/pt_sans/pt_sans-web-regular-webfont.woff') format('woff'), url('../fonts/pt_sans/pt_sans-web-regular-webfont.ttf') format('truetype'), url('../fonts/pt_sans/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'robotoregular'; src: url('../fonts/roboto/roboto-regular-webfont.eot'); src: url('../fonts/roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'), url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), url('../fonts/roboto/roboto-regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; }
/* button */
.btn { font-family: 'Roboto', sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.btn:focus, .btn:hover { transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
/* .btn-custom-1 */
.btn-custom-1 { background-color: rgba(255,255,255,0); border: 2px solid rgba(255,255,255,1); color: #ffffff; margin-top: 10px !important;}
.btn-custom-1:hover, .btn-custom-1:focus, .btn-custom-1:active, .btn-custom-1.active { background: #ffffff; border: 2px solid rgba(255,255,255,1); color: #3399ff;}
.btn-custom-1.disabled:hover, .btn-custom-1.disabled:focus, .btn-custom-1.disabled:active, .btn-custom-1.disabled.active, .btn-custom-1[disabled]:hover, .btn-custom-1[disabled]:focus, .btn-custom-1[disabled]:active, .btn-custom-1[disabled].active, fieldset[disabled] .btn-custom-1:hover, fieldset[disabled] .btn-custom-1:focus, fieldset[disabled] .btn-custom-1:active, fieldset[disabled] .btn-custom-1.active { background-color: #ffffff; border: 2px solid rgba(255,255,255,1); }
/* .btn-custom-2 */
.btn-custom-2 { background-color: rgba(255,255,255,0); border: 2px solid rgba(92,182,248,1); color: #666666; }
.btn-custom-2:hover, .btn-custom-2:focus, .btn-custom-2:active, .btn-custom-2.active { color: #ffffff; }
/* .btn-custom-3 */
.btn-custom-3 { background-color: rgba(255,255,255,1); border: 1px solid rgba(204,204,204,1); color: #666666; }
.btn-custom-3:hover, .btn-custom-3:focus, .btn-custom-3:active, .btn-custom-3.active { color: #ffffff; }
.btn-custom-3.disabled:hover, .btn-custom-3.disabled:focus, .btn-custom-3.disabled:active, .btn-custom-3.disabled.active, .btn-custom-3[disabled]:hover, .btn-custom-3[disabled]:focus, .btn-custom-3[disabled]:active, .btn-custom-3[disabled].active, fieldset[disabled] .btn-custom-3:hover, fieldset[disabled] .btn-custom-3:focus, fieldset[disabled] .btn-custom-3:active, fieldset[disabled] .btn-custom-3.active { color: #ffffff; }
/* Center elements */
.div-center { text-align: center !important; vertical-align: middle; padding: 0; }
.div-center * { margin: 0 auto; }
/* navbar */
#topnav { position: fixed !important; }
.navbar { border-radius: 0; border: none; margin-bottom: 0; min-height: 80px !important; position: relative; }
.navbar-default { background-color: #ffffff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border-bottom: 2px solid #eeeeee; min-height: 80px !important; }
.navbar-default .navbar-brand { color: #444444 !important; font-size: 2em; }
.navbar-header { min-height: 80px !important; }
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-top: 10px; }
.navbar-nav > li > a { font-family: 'Roboto', sans-serif; line-height: 60px; padding-bottom: 10px; padding-top: 10px; }
.navbar-default .navbar-nav > li > a { font-family: 'PT Sans', sans-serif; color: #444444; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background: #ffffff; transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #ffffff; font-weight: 600; }
/* .navbar-toggle */
.navbar-default .navbar-toggle { border: 2px solid; background: #ffffff; border-color: #ffffff; margin-top: 20px; border-radius: 50%; padding: 9px 6px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff; color: #ffffff; border: 2px solid; border-color: #ffffff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.navbar-default .navbar-toggle .icon-bar { background-color: #999999; }
.navbar-collapse { background-color: #ffffff; }

/*
**********************************************
02 Home 
**********************************************
*/
#home-section { font-family: 'Roboto', sans-serif; background: url("../img/bg-home.jpg") #959396 no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 640px; padding: 50px 0 0 0; color: #ffffff !important; }
.home-color-bg { z-index: 1; width: 100%; height: 100%; }
.home-content {  position: absolute; width: 100%; }
#home-section .home-content h1 { text-align: center; font-size: 80px; color: #ffffff;  }
#home-section .home-content h3 { font-family: 'PT Sans', sans-serif; text-align: center; font-size: 50px; font-weight: 300; color: #ffffff;  }
#home-section .home-content p { margin-top: 40px; }
#home-section .home-content .btn { text-transform: uppercase; margin: 0 5px 0 5px; }

/*
**********************************************
03 Features 
**********************************************
*/
#features-section { padding: 80px 0 0 0; font-family: 'Roboto', sans-serif; }
.features { padding: 2em 0 0.5em; }
.features h3 a { transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.icon-circle { width: 120px; height: 120px; padding: 20px; line-height: 100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; margin: 0 auto; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.icon-circle .fa { color: #ffffff; font-size: 3em; }
.features p { color: #666666; font-size: 1em; width: auto; margin: 0 auto; }
p.feature-btn { margin-top: 15px; }
.newsletter { background-color: #f7f7f7; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 20px 5px 25px 5px; margin-top: 80px; }
.newsletter h3 { margin-bottom: 30px; }
.newsletter-form .form-control { height: 44px; background-color: #ffffff; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.newsletter-form .form-control:focus { background-color: #ffffff; border: 1px solid #cccccc; box-shadow: 0 0 5px 0 #e8e8e8 inset; }

/*
**********************************************
04 About 
**********************************************
*/
#about-section { background: #eeeeee; padding: 100px 0 140px 0; font-family: 'Roboto', sans-serif; color: #666666; }
.team-box-container img { border: 15px solid #ffffff; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
.team-box-container a { margin: 0 0 3px 6px; color: #ff8c00; font-weight: bold;}
.team-box { background-color: #ffffff; padding: 80px 10px 10px 10px; margin-top: -80px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

/*
**********************************************
05 Portfolio
**********************************************
*/
/* #our-works-section */
#portfolio-section { padding: 110px 0 130px 0; font-family: 'Roboto', sans-serif; }
#portfolio-section ul li { margin: 0; padding: 0; color: #000000; font-size: 0.8em; }
#portfolio-section ul li a { color: #000000 !important; outline: 0; }
#portfolio-section ul li a:focus { color: #ffffff !important; }
#portfolio-section ul li a:hover { color: #ffffff !important; }
#portfolio-section ul li a.active { color: #ffffff !important; text-decoration: none !important; }
#portfolio-section #filters { font-size: 1.5em; }

/* .thumbnail */ 
#portfolio-section .thumbnail { margin-bottom: 0; position: relative; border: none; border-radius: 0; padding: 0; /*opacity: 0.5;*/ transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
#portfolio-section .thumbnail:hover { background-color: transparent; border: none; opacity: 1; }
/* .work-description-container */
#portfolio-section .work-description-container .work-description-content { margin-top: 1rem; }
#portfolio-section .work-description-container .work-description-content h5 { color: #ffffff; font-family: 'PT Sans', sans-serif; font-weight: bold; font-size: 2.2rem; margin: 0; padding-left: 10px; padding-right: 10px; text-transform: capitalize; }
#portfolio-section .work-description-container .work-description-content p { color: #ffffff; font-family: 'PT Sans', sans-serif; font-size: 1.2rem; padding-left: 5px; padding-right: 5px; }
#portfolio-section .work-description-container .work-description-content .btn { border-radius: 50%; width: 45px; height: 45px; line-height: 44px; padding: 0; margin: 0; margin-top: 10%; font-size: 1rem;}
#portfolio-section .work-description-container { left: 0%; width: 100%; height: 100%; text-align: center; position: absolute; overflow: hidden; top: 0; left: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#portfolio-section .thumbnail:hover .work-description-container { width: 100%; height: 100%; background-color: transparent; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
#portfolio-section .box-work { margin-bottom: 28px; }
#container-our-works { min-height: 224px; display: block; margin-top: 20px; }
/* isotope items animation */
.isotope .isotope-item { -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -moz-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; -webkit-transition-property: -webkit-transform, opacity; }
.isotope-item { -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; z-index: 2; }

/*
**********************************************
06 Testimonials
**********************************************
*/
/* #testimonials-section */
#testimonials-section { font-family: 'Roboto', sans-serif; background-color: #eeeeee; padding: 110px 0 130px 0; }
.testimonials-content { width: 100%; height: auto; padding: 10px 10px 10px 10px; }
#testimonials-section img { padding: 5px; border: 5px solid #eeeeee; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; }
body #testimonials-section .testimonials:hover img { padding: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
.testimonials { display: inline-block; height: auto; position: relative; padding: 30px 20px; color: #909090; font-size: 16px; line-height: 20px; }
#testimonials-section hr { margin-top: 10px; margin-bottom: 10px; }
#testimonials-section p.client { margin-top: 20px; }
#testimonials-section a { font-family: 'PT Sans', sans-serif; font-weight: bold; }
#testimonials-section .client a { text-align: center; text-transform: uppercase; font-weight: bold; font-size: 20px; text-decoration: none; }
p.testimonial-text { font-family: 'PT Sans', sans-serif; color: #646267; }

/*
**********************************************
07 Pricing
**********************************************
*/
#pricing-section { padding: 100px 0 100px 0; font-family: 'PT Sans', sans-serif; }
#pricing-section h3 a { outline: 0; font-weight: 300; }
#pricing-section h3 a:hover { color: #3ea8f7; }
.pricing { margin-top: 40px; }
.pricing .plan { background: #eeeeee; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; list-style: none; padding: 0 0 20px; margin: 0 0 15px; text-align: center; }
.pricing .plan li { padding: 10px 15px; color: #666666; border-top: 2px solid #eeeeee; -webkit-transition: 300ms; transition: 300ms; }
.pricing .plan li.plan-details { padding: 18px 15px 0; }
.pricing .plan li.plan-price { margin: 0 auto; width: 160px; height: 160px; line-height: 145px; padding: 10px; border: 3px solid #eeeeee; margin-top: -50px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; font-size: 2.5em; }
body .pricing .plan:hover li.plan-price { border: 3px solid #eeeeee; }
.pricing .plan li span.plan-price-details { font-size: 18px !important; }
.pricing .plan li.plan-name { height: 100px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; border-top-right-radius: 10px; padding: 15px; font-size: 24px; line-height: 24px; color: #ffffff; border-top: 0; }
.pricing .plan li > strong { color: #ffffff; font-family: 'Roboto', sans-serif; }
.pricing .plan li.plan-action { margin-top: 10px; border-top: 0; }
.pricing .plan.featured { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.price { margin-top: 20px; }

/*
**********************************************
08 Contact
**********************************************
*/
/* #contact-section */
#contact-section { font-family: 'Roboto', sans-serif; background-color: #eeeeee; width: 100%; min-height: 250px; padding: 100px 0 80px 0; }
/* .contact-form-box */
.contact-form-box { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; }
/* .contact-form */
.contact-form { width: 100%; margin: 0 auto; padding: 0 10px 10px 10px; }
.contact-form .input-group { margin-bottom: 10px; }
.contact-form a { margin: 0 0 3px 6px; color: #ff8c00; font-weight: bold;}
.contact-form p { margin: 15px 0 3px 6px; color: #666666; }
.contact-form .form-control { height: 44px; background-color: #ffffff; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
.contact-form .form-control:focus { background-color: #ffffff; border: 1px solid #cccccc; box-shadow: 0 0 5px 0 #e8e8e8 inset; }
.inner-addon { position: relative; margin-bottom: 10px; }
.inner-addon .fa { position: absolute; font-size: 25px; padding: 10px; color: #cccccc; }
.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}
.left-addon input  { padding-left:  40px; }
.left-addon select  { padding-left:  40px; }
.right-addon input { padding-right: 30px; }
.contact-form input { border-radius: 10px; }
#contact-section textarea { border-radius: 10px; height: 130px; resize: none !important; line-height: 18px; padding: 15px 20px; text-indent: 20px; }
.contact-content { margin-top: 30px; }
#send-contact { margin-top: 10px !important; font-size: 1em; }
.info-contact { margin-top: 10px; padding: 20px; background: #ffffff; color: #333333; border: 1px solid #cccccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
.info-contact-icon i { width: 25px; text-align: center; }
.info-contact hr { border-color: #eeeeee; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
#contact-section .social-icon { margin-top: 25px; }
#contact-section .social-icon img { width: 50px; margin-bottom: 5px; opacity: 0.7; transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -webkit-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; }
#contact-section .social-icon img:hover { opacity: 1; }
.contact-form .admin{ color: rgba(0, 0, 0, .05); }
.contact-form .admin:hover{ color: rgba(0, 0, 0, .2); }
.contact-form .admin input{ opacity: .05; transition: opacity .2s; }
.contact-form .admin input:hover{ opacity: .2; transition: opacity .2s; }

/*
**********************************************
09 Footer
**********************************************
*/
footer { font-family: 'PT Sans', sans-serif; background: #ffffff; color: #333333; padding: 28px 0 30px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-top: 2px solid #eeeeee; }
footer h5 { font-weight: bold; text-transform: uppercase; padding-bottom: 10px; }
footer a { color: #333333 !important; padding: 0; line-height: 24px; }
.copyright { background-color: #ffffff; color: #333333; border-top: 1px solid #dbdbdb; padding: 25px 5px 0 5px; text-align: center; margin-top: 30px; }
.copyright p { margin: 0; padding: 0; }
.copyright a { color: #333333 !important; }

/*
**********************************************
06 VMV
**********************************************
*/
/* #vmv-section */
#vmv-section { font-family: 'Roboto', sans-serif; background-color: #eeeeee; }
.vmv-content { width: 100%; height: auto; padding: 10px 10px 10px 10px; }
#vmv-section img { padding: 5px; border: 5px solid #eeeeee; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; }
body #vmv-section .vmv:hover img { padding: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
.vmv { display: inline-block; height: auto; position: relative; padding: 30px 20px; color: #909090; font-size: 16px; line-height: 20px; }
#vmv-section hr { margin-top: 10px; margin-bottom: 10px; }
#vmv-section p.client { margin-top: 20px; }
#vmv-section a { font-family: 'PT Sans', sans-serif; font-weight: bold; }
#vmv-section .client a { text-align: center; text-transform: uppercase; font-weight: bold; font-size: 20px; text-decoration: none; }
p.vmv-text { font-family: 'PT Sans', sans-serif; color: #646267; }


input[type=file]::-webkit-file-upload-button {
    background: none;
    border-style: none;  
}



/*
**********************************************
07 Botón Flotante WhatsApp
**********************************************
*/

/*Estilos generales del boton whatsapp*/
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: breathe 2s ease-in-out infinite;
}

/*Estilos solo al icono whatsapp*/
.whatsapp-btn i {
  color: #fff;
  font-size: 24px;
  animation: beat 2s ease-in-out infinite;
  text-decoration: none;
}

/*Estilos con animation contorno respirando*/
@keyframes breathe {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*Estilos de animacion del icono latiendo*/
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/*
**********************************************
08 elaparador.com.mx
**********************************************
*/
/* #aparador-section */


#showAparadores{font-family: 'Roboto', sans-serif;}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
  }
  
  .card > hr {
    margin-right: 0;
    margin-left: 0;
  }
  
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
  }
  
  .card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
  }
  
  .card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
  }
  
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0;
  }
  
  .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
  }
  
  .card-title {
    margin-bottom: 0.75rem;
  }
  
  .card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
  }
  
  .card-text:last-child {
    margin-bottom: 0;
  }
  
  .card-link:hover {
    text-decoration: none;
  }
  
  .card-link + .card-link {
    margin-left: 1.25rem;
  }
  
  .card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
  }
  
  .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .card-footer:last-child {
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
  }
  
  .card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
  }
  
  .card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
  }
  
  .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    border-radius: calc(0.25rem - 1px);
  }
  
  .card-img,
  .card-img-top,
  .card-img-bottom {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
  }
  
  .card-img,
  .card-img-top {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
  }
  
  .card-img,
  .card-img-bottom {
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
  }
  
  .card-deck .card {
    margin-bottom: 15px;
  }
  
  @media (min-width: 576px) {
    .card-deck {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      margin-right: -15px;
      margin-left: -15px;
    }
    .card-deck .card {
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
      margin-right: 15px;
      margin-bottom: 0;
      margin-left: 15px;
    }
  }
  
  .card-group > .card {
    margin-bottom: 15px;
  }
  
  @media (min-width: 576px) {
    .card-group {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
    }
    .card-group > .card {
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
      margin-bottom: 0;
    }
    .card-group > .card + .card {
      margin-left: 0;
      border-left: 0;
    }
    .card-group > .card:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .card-group > .card:not(:last-child) .card-img-top,
    .card-group > .card:not(:last-child) .card-header {
      border-top-right-radius: 0;
    }
    .card-group > .card:not(:last-child) .card-img-bottom,
    .card-group > .card:not(:last-child) .card-footer {
      border-bottom-right-radius: 0;
    }
    .card-group > .card:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .card-group > .card:not(:first-child) .card-img-top,
    .card-group > .card:not(:first-child) .card-header {
      border-top-left-radius: 0;
    }
    .card-group > .card:not(:first-child) .card-img-bottom,
    .card-group > .card:not(:first-child) .card-footer {
      border-bottom-left-radius: 0;
    }
  }
  
  .card-columns .card {
    margin-bottom: 0.75rem;
  }
  
  @media (min-width: 576px) {
    .card-columns {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
      -webkit-column-gap: 1.25rem;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem;
      orphans: 1;
      widows: 1;
    }
    .card-columns .card {
      display: inline-block;
      width: 100%;
    }
  }