/* general */

body {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
}

h1, h2, h3 {
    font-family: Helvetica, Arial, serif;
    font-weight: 100;
}

h1 {
    font-size: 48px;
    color: #CF65A1;
}

h2 {
    font-size: 48px;
    color: #FD7BC0;
}

h3 {
    font-size: 24px;
    color: #FD7BC0;
}

.float-right {
    float: right;
    margin-left: 2em;
}

/* header */

#header {
    margin: 12px 0;
}

#header a {
    text-decoration: none;
}

#logo, #top-menu, #social-menu, #main-menu, #module-menu {
    text-align: center;
}

#logo {
    margin: 10px 0 10px;
}

#top-menu > div {
    position: relative;
    display: inline-block;
    margin-right: 10%;
    cursor: pointer;
}

#top-menu > a, #top-menu div > a {
    display: inline-block;
    padding: 6px 24px 6px 0;
    font-family: Helvetica, Arial, serif;
    font-weight: 100;
    letter-spacing: 4px;
    color: #CDCDCD;
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-info.png);
    background-position: center right;
    background-repeat: no-repeat;
    border-bottom: 1px solid #CDCDCD;
}

#top-menu div > a:first-child {
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-info-down.png);
}

.countries {
    display: none;
    position: absolute;
    z-index: 1;
    left: -50px;
    padding: 7px;
    box-shadow: 0 0 5px #999;
    -moz-box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
    background: #F6F6F6;
}

#top-menu > div:hover .countries, .countries:hover {
    display: block;
}

.countries ul {
    display: inline;
    float: left;
    width: 120px;
    margin: 0 0 0 0;
    padding: 0 3px 0 3px;
}

.countries ul li {
    list-style-type: none;
}

.countries ul li a {
    display: block;
    padding: 5px 10px;
    font-size: 12px;
    color: #333;
}

.countries ul li a:hover {
    text-decoration: none;
    color: #fff !important;
    background: #CF65A1;
}

#social-menu {
    margin: 20px 0;
}

#module-menu a {
    display: inline-block;
    margin-left: 0px;
    margin-right: 20px;
    font-weight: bold;
    color: #737778;
}

#main-menu a {
    color: #000;
    font-weight: bold;
}

/* main */

#main {
    border-top: 7px solid #CF65A1;
    background: #F0F0F0;
    background-image: url(/bundles/simbioticabti/images/distributor/bg-main.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    /*background-size: 100% auto;*/
}

#main p {
    color: #5F5E61;
}

#implantology, #regenerative, #corporate, #training, #research, #patients {
    display: none;
}

#implantology-card, #regenerative-card {
    position: relative;
    padding: 2em;
    min-height: 360px;
}

#implantology-card a.info, #regenerative-card a.info {
    position: absolute;
    right: 0;
    bottom: 2em;
}

#implantology-card h2, #regenerative-card h2 {
    font-size: 40px;
    color: #CF65A1;
}

#implantology-card.active, #regenerative-card.active {
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-down-rosa.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}

#implantology-card.active a.info, #regenerative-card.active a.info {
    display: none;
}

a.info, a.contact {
    display: inline-block;
    padding: 2px 24px 2px 8px;
    font-size: 12px;
    font-family: Helvetica, Arial, serif;
    font-weight: 300;
    text-decoration: none;
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-info.png);
    background-position: 90%;
    background-repeat: no-repeat;
}

a.collapse {
    float:left;
    display: inline-block;
    padding: 2px 8px 2px 24px;
    font-size: 12px;
    font-family: Helvetica, Arial, serif;
    font-weight: 300;
    text-decoration: none;
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-info-up.png);
    background-position: 10%;
    background-repeat: no-repeat;
}

#main a.info, #contact a.contact {
    color: #fff;
    background-color: #5F5E61;
}

#implantology, #regenerative {
    color: #5B5B5E;
    background: #F6F6F6;
}

#implantology h3, #regenerative h3 {
    display: inline-block;
    padding-right: 24px;
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-info.png);
    background-position: right;
    background-repeat: no-repeat;
}

#regenerative-items {
    text-align: center;
}

#regenerative-items div {
    display: inline-block;
    margin: 1em;
    font-weight: bold;
    color: #CF65A1;
    text-align: center;
}

#modules-cards {
    margin-top: 40px;
    background: #FFF;
    text-align: center;
}

#modules-cards a.info {
    position: absolute;
    right: 1.25em;
    bottom: 1.25em;
    color: #5F5E61;
    background-color: #E9E9E9;
}

#corporate-card, #training-card, #research-card, #patients-card {
    height: 100%;
}

#corporate-card div, #training-card div, #research-card div, #patients-card div {
    position: relative;
    min-height: 320px;
    padding: 0.75em 0.75em 3em;
    background: #F6F6F6;
    text-align: left;
    border-bottom: 20px solid #FFF;
}

#corporate-card h2, #training-card h2, #research-card h2, #patients-card h2 {
    font-size: 28px;
    color: #4F4E50;
}

#implantology a.collapse, #regenerative a.collapse, #corporate a.collapse, #training a.collapse, #research a.collapse, #patients a.collapse {
    color: #5F5E61;
    background-color: #E9E9E9;
}


#implantology a.info, #regenerative a.info, #corporate a.info, #training a.info, #research a.info, #patients a.info {
    color: #5F5E61;
    background-color: #E9E9E9;
}

#corporate-card.active div, #training-card.active div, #research-card.active div, #patients-card.active div {
    border-bottom: 20px solid #CF65A1;
}

#corporate-card.active div, #training-card.active div, #research-card.active div, #patients-card.active div {
    background-image: url(/bundles/simbioticabti/images/distributor/flecha-down-rosa-peq.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}

#corporate-card.active a.info, #training-card.active a.info, #research-card.active a.info, #patients-card.active a.info {
    display: none;
}

#corporate, #training, #research, #patients {
    color: #FFF;
    background: #CF65A1;
}

#corporate h2, #training h2, #research h2, #patients h2 {
    color: #F6F6F6;
}

#corporate h3, #training h3, #research h3, #patients h3 {
    color: #F6F6F6;
}

#implantology img, #regenerative img, #corporate img, #training img, #research img, #patients img {
    max-width:100%;
}

.company h3 {
    font-weight: 300;
    color: #4F4E50;
}

.company, .company a {
    color: #7E7D81;
}

.company a.web {
    font-weight: bold;
}

.company a.info {
    color: #5F5E61;
    background-color: #E9E9E9;
    margin-left: 10px;
    position: relative;
    top: -3px;
}

.company .logos img{
    margin-top: 1em;
    margin-bottom: 1em;
}

.company .company-img {
    max-width: 100%;
    display: block;
    margin:0px auto;
}

.company .bti-company-img{
    max-width: 123px;
    max-height: 92px;
    width:50%;
    margin: auto;
    display: block;
}

#contact {
    background: #CF65A1;
}

#contact .contact-block {
    padding: 15px 0;
}

#contact .contact-block p {
    font-weight: 400;
    color: #4F4E50;
}

#footer {
    padding: 1em 0;
    color: #FFF;
    background: #4F4E50;
    font-size: 12px;
    letter-spacing: 1px;
}

#footer a {
    color: #FFF;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .company .bti-company-img{
        width: 123px;
        height: 92px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #logo, #main-menu {
        text-align: left;
    }

    #top-menu, #social-menu, #module-menu {
        text-align: right;
    }

    #module-menu a {
        margin-left: 40px;
        margin-right: 0px;
    }
    #implantology-card, #regenerative-card {
        padding: 4em;
    }

    .company .bti-company-img{
        width: 123px;
        height: 92px;
    }
}