/* GENERAL */

body {
    font-family: 'Lato', sans-serif;
    /* font-family: "Inria Serif",serif; */
    -webkit-animation: fadein s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


h4, h5, h6, p {
    font-family: 'Prata', serif;
}

h2 {
    font-size: 30px;
}

h5 {
    line-height: 1.7;
    margin-bottom: 30px;
}

a, a:link {
    color:inherit;
}

ul,ol {
    list-style:none;
}

section .heading {
    padding-top: 10vh ;
    text-align: center;
    padding-bottom: 80px;        
}

section .heading h2 {
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 32px;
}

button:hover {
    transform: scale(1.05);
}

figcaption {
    font-size:15px;
}

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


/* MENU ****************************/

.navbar {
    height: 8vh;
    text-align: center;
    background: #fff;
    margin-bottom: 0%;
    border-bottom: 1px solid rgba(44, 66, 105, 0.2);
}

.navbar-nav {
    height: 8vh;
    text-align: center;
    color: #2C4269;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

.navbar-collapse {
    margin-top: 12px;
    text-align: center;
    background-color: white;
}

.navbar-nav a, .navbar-nav a.active a {
    color: #2C4269 !important;
    width: 100%;
    height: 100%;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.navbar-nav  a:hover, .navbar-nav .active a {
    color: #fff !important;
    background-color: #2C4269 !important;
}

.navbar-default .navbar-toggler {
    border-style: none;
} 

.navbar-toggler {
    background-color: gainsboro;
    position: fixed;
    left: 45%;
}

.logoOne {
    width:50px;
    height:45px;
}

.logoTwo {
    width:55px;
    height:50px;
}

.icon-bar {
    background-color: #2C4269 !important;
}

.content-row {
    margin-bottom: 30px;
}

.content-row .title {
    margin-bottom: 20px;
    font-weight: bold;
}

.content-row img{
    cursor: pointer;
}



/* Home *********************************************************************** */


/* ABOUT ************************/

#about {
    width: 100%;
    min-height: 100vh;
    padding-top: 4vh ;
    color: #2C4269;
    background: url('../images/bg/wohl.PNG');
    background-repeat: no-repeat;
    background-size: contain;
}

.about-bg {
    background-color: rgba(255, 255, 255,0.9);
}

#about .heading h2 {
    color: #2C4269;
    text-transform: uppercase;
}

.top_container {
    position: relative;
    height: 75vh;
}

.home_title-separator {
    width:80%;
    height: 1px;
    background: white;
    margin-left: 10%;
    margin-bottom: 20px;
}

.home_top-title {
    padding: 24px 0px;
    background-color: rgba(0,87,146, 0.5);
    position: absolute;    
    text-shadow: 0px 0px 30px black;
    color: white;
    text-align: center;
    bottom: 0;
}

.main_title {
    letter-spacing: 16px;
    font-size: 35px;
}

.subtitle {
    letter-spacing: 3px;
    font-size: 30px
}

.about_carousel {
    width: 100%;
    height: 100%;
    top: 8vh;
    border-bottom: 1px solid #2C4269;
    background-color: #fff;
    position: absolute; 

}

.carousel-inner {
    width: 100%;
    height: 100%;
}

.carousel-item {
    width: 100%;
    height: 100%;
}

.carousel-item img {
    width: 100%; 
    
}

/* .carousel-control.left, .carousel-control.right {
    background-image: none;
    color: #2C4269;
} */

/* .carousel-indicators {
    bottom: 0px;
} */

/* .carousel-indicators li {
    border-color: #2C4269;
} */

/* .carousel-indicators li.active {
    background-color: #2C4269;
} */

.about-description h2 {
    color: #2C4269;
    margin-bottom: 24px;
    letter-spacing: 10px;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);    
}

.about-description h4 {
    font-size: 22px;
    line-height: 1.5;
}

.about_img {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
}

.about-boss {
    padding: 12px;
    background-color: white;
    font-family: 'Merienda', cursive;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.about-boss img {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.5);
}

.about-boss:hover {
    transition: .4s;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7);
}

.about-boss h4 {
    font-weight: bold ;
}

.about-boss h6 {
    font-weight: bold ;
    font-size: larger;
    color: rgb(192,192,192);
}


.about-boss p {
    font-size: 18px;
    font-style: italic;
}


/* Material ***********************/

#material {
    background-image: url('../images/bg/material.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#material .heading h2 {
    color: #fff;
}

.material-bg {
    height: 100%;
}

.material-title {
    font-family: 'Lato', sans-serif;
    color: #2C4269;
    font-weight: bold;
    letter-spacing: 3px;
}

.material-card {
    min-height: 720px;
    margin-bottom: 24px;
    opacity: 1;
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4);
}

.material-card img {
    width: 100%;
    height: 280px;
}

.material-card h5 {
    color: #2C4269;
    font-size: 24px;
}

.material-card button {
    position: relative;
}

.material-card .card-text {
    font-size: 18px;
    color: #2C4269;

}

.material-card:hover {
    transform: scale(1.03);
    transition: .6s;
    box-shadow: 0 0px 12px 0 rgba(234, 236, 238, 0.5);
}


.btn-material {
    display: inline-block;
    border-radius: 4px;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  
.btn-material span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.btn-material span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

.btn-material:hover span:after {
    opacity: 1;
    right: 0;
}

.btn-material:hover span {
    padding-right: 25px;
}


/* ourTeam ********************/

.ourTeam_card {
    margin-top: 12px;
    margin-bottom: 50px;
    padding-top: 24px;
}

.ourTeam_card:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform: scale(1.13);
    transition: .4s;
}

.ourTeam_card p {
    font-size: 18px;
    letter-spacing: 2px;
}

#ourTeam {
    background-color: rgba(255, 255, 255,0.9);
}

#ourTeam .heading h2 {
    color: #2C4269;
}

.ourTeam-title {
    font-family: 'Lato', sans-serif;
    color: #2C4269;
    font-weight: bold;
    letter-spacing: 2px;
}

.ourTeam_img {
    width: 220px;
    height: 220px;
}

.rounded-circle {
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.8);
}

    
/* Gallery ******************/

#gallery {
    background-image: url('../images/bg/gallery.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;

}

.img_gallery {
    margin-bottom: 8px;
}

.img_gallery img {
    box-shadow: 8px 8px 8px  rgba(0,0,0,0.8);
    cursor: pointer;
}

.img_gallery img:hover {
    transform: rotate(5deg);
}

.btn_gallery {
    margin: 50px  auto;
    box-shadow: 1px 1px 30px black;
}


/* Facility ********************/

#facility {
    color: #2C4269;
    background: url('../images/bg/facility.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#facility .heading h2 {
    color: #2C4269;
}

.facility_card {
    min-height: 500px;
    margin-bottom: 50px;
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.4);

}

.facility_card:hover {
    transform: scale(1.03);
    transition: .4s;
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.8);
}

.facility_card .card-title {
    font-size: 25px;
    letter-spacing: 4px;
}

.facility_card .card-text {
    font-size: 19px;
}

/* Contact ***********************/

#contact {
    min-height: 100vh;
    color: #2C4269;
}

.contact_form img {
    margin-bottom: 12px;
} 

#contact .heading h2 {
    color: #2C4269;
}

.contact_form h4{
    font-size: 22px;
    color: #2C4269;
    letter-spacing: 2px;

}

.contact_form h3{
    font-size: 24px;
    color: #2C4269;
    letter-spacing: 3px;

}

.contact_form h5{
    font-weight: 900;
    letter-spacing: 2px;
}

.contact_logo {
    width: 100px;
    height: 70px;
}

.contact_form {
    margin-bottom: 24px;
}

.contact_form h2{
    letter-spacing: 6px;
}


.img_contact {
    margin-bottom: 50px;
}

.img_contact img {
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.8);
}

.img_contact img:hover {
    transition: .4s;
    transform: scale(1.05);
    box-shadow: 0 0px 12px 0 rgba(0,0,0,1);
}

/* FOOTER **************************/

.footer {
    background: rgba(44, 66, 105, 0.95);
    padding: 20px 0 20px;
    color: white;
    font-family: 'Merienda', cursive;
}

.footer .glyphicon {
    font-size:  25px;
    margin: 20px;
    color: whitesmoke;
    height: 30px;
}

.footer .glyphicon:hover {
    font-size: 27px;
}

.footer h5 {
    letter-spacing: 2px;
}

.attribution {
    font-size: 10px;
}
 

/* Page *********************************************************************** */

section .title {
    letter-spacing: 2px;
}

.blue-divider {
    width:300px;
    height: 1px;
    background: #2C4269;
    margin: 0 auto;
    margin-bottom: 10px;
}

.blue-separator {
    width:100%;
    height: 1px;
    background: #c4dff6;
    margin: 30px 0;
}

.white-separator {
    width:100%;
    height: 1px;
    background: white;
    margin: 30px 0;
}

.white-divider {
    width:300px;
    height: 1px;
    background: #fff;
    margin: 0 auto;
    margin-bottom: 10px;
}

.section_container {
    padding: 50px 0px 50px 0px;
    background-color: whitesmoke;
    color: #2C4269;
}

.section_container .container {
    padding: 30px 24px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    border-radius: 5px;
}

.section_container img{
    box-shadow: 0 2px 15px 0 rgba(0,0,0,0.5);
}

.section_container img:hover{
    box-shadow: 0 2px 25px 0 rgba(0,0,0,0.7);
    transform: scale(1.04);
    transition: .4s;
}

.second_container {
    background: rgba(44, 66, 105, 1);
}

/* .second_container {
    padding: 60px 0px 30px 0px;
    background: rgba(44, 66, 105, 1);
    color: #fff;
} */

.second_container img{
    box-shadow: 0 2px 15px 0 rgba(255,255,255,0.2);
}

.second_container img:hover{
    box-shadow: 0 2px 25px 0 rgba(255,255,255,0.3);
    transform: scale(1.04);
    transition: .4s;
}

.third_container {
    padding: 60px 0px 30px 0px;
    background: #c4dff6;
    color: #2C4269;
}

.third_container img{
    box-shadow: 0 2px 15px 0 rgba(0,0,0,0.5);
}

.third_container img:hover{
    box-shadow: 0 2px 15px 0 rgba(0,0,0,0.9);
    transform: scale(1.04);
    transition: .4s;
}

.top_image {
    width: 100%;
    height: 100%;
}

.top-title {
    position: relative;
    background-color: rgba(0,87,146, 1);
    color: white;
    font-size: 40px;
    letter-spacing: 2px;
    padding-left: 12px;
    bottom: 0;
    width: 100%;
}

.content_top {
    position: relative;
    padding-top: 8vh;
    width: 100%;
    height: 50vh;
    margin-bottom: 48px;
}

.contact_card {
    border-radius: 5px;
    box-shadow: 0 0px 8px 0 rgba(0,0,0,0.7);
}

.contact_card .card-header {
    font-size: 22px;
    letter-spacing: 3px;
}

.contact_card .card-title {
    font-size: 20px;
}

.contact_card .card-text {
    font-size: 18px;
}

.contact_card:hover {
    transform: scale(1.03);
    transition: .4s;
}

/* Gallery Page *************************************************************** */

.gallery_top {
    position: relative;
    width: 100%;
}

.gallery_container {
    background-image: url('../images/gallery/bg/gallery_bg.jpg');
    height: 100%;
    padding: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery-top-title {
    position: relative;
    background-color: rgba(0,87,146, 0.8);
    color: white;
    font-size: 40px;
    letter-spacing: 2px;
    padding-left: 12px;
    bottom: 0;
    width: 100%;
}

.gallery_container {
    padding-top: 65vh;
}

.first_gallery-container {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgba(255, 255, 255, 1);
}

.second_gallery-container {
    background: rgba(44, 66, 105, 0.8);
    padding-top: 50px;
    padding-bottom: 50px;
}

.third_gallery-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.fourth_gallery-container {
    background: rgba(196, 223, 246, 0.95);
    padding-top: 50px;
    padding-bottom: 25px;
}

.gallery_card-container {
    background-color: #d4d4d4;
}

.gallery_card-row {
    margin: 0px 12px;
    padding: 12px;
    border-radius: 3px;
    background: white;
    box-shadow: 0 0px 15px 0 rgba(0,0,0,0.8);
}


.gallery_card {
    margin-bottom: 24px;
}

.gallery_card img {
    width: 100%;
    height: 220px;
    box-shadow: 0 0px 6px 0 black;
}

.gallery_card img:hover {
    cursor: pointer;
    transform: scale(1.13);
    transition: .4s;
    box-shadow: 0 0px 8px 0 rgba(0,0,0,1);
}

.gallery_heading {
    margin-top: 12px;
    margin-bottom: 60px;
}

.gallery_heading-title {
    color: #2C4269;
}

.title_separator {
    width: 100%;
    height: 2px;
    background-color: #2C4269;
}

.bg-img_zoom_container { 
    display: none;
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.img-zoom_container {
    position: fixed;
    text-align: center;
    top:15%;
    left: 10%;
    width:80%;
    height: 80%;
}

.img-zoom_container img {
    border-radius: 8px;
    max-width: 100%;
    max-height: 100%;
}

.btn-close {
    position: absolute;
    margin-top: -10px;
    right: 0px;
}


/* MRI Page ******************************************************/

#mri_page {
    color: #2C4269;
}


#mri_page img {
    border-radius: 2px; 
}

/* Hypoxic *********************************************************/

.application-card {
    margin: 0px 100px;
    padding: 40px 0px;
    background-color: rgba(255,255,255,0.85);
    box-shadow: 0 0 20px rgba(0,0,0,0.6);

}

.contact_card-hypox {
    background-color: rgba(255,255,255,0.85);
}

.contact_card-hypox:hover {
    box-shadow: 0 0px 8px 0 rgba(0,0,0,1);
}

/* micro-ct ***********************************************/


.contact_card-micro {
    background-color: rgba(255,255,255,1);
    color: rgba(0,87,146, 1);
}

.contact_card-micro:hover {
    box-shadow: 0 2px 25px 0 rgba(255,255,255,0.3);
}

/* Responsive ***********************************************/

@media only screen and (max-width: 1024px)  {

    section {
        padding: 0px 8px;
    }

    section .heading h2 {
        letter-spacing: 4px;
        margin-bottom: 50px;
    }

    figcaption {
        font-size: 12px;
    }

    .top_container {
        padding-top: 9vh;
        height: 45vh;
    }

    .navbar {
        height: 9vh;
    }

    section .heading {
        padding-bottom: 40px;
    }

    .about-description h4 {
        font-size: 18px;
    }

    .about-bg {
        background-color: rgba(255, 255, 255,1);
    }

    .material-card {
        min-height: 750px;
    }

    .gallery_card img {
        height: 200px;
    }


    .content_top {
        height: 30vh;
    }

    .img-zoom_container {
        top:30%;
        width:90%;
        left: 5%;
    }
    
    .btn-close {
        position: absolute;
        top: -15px;
        right: -15px;
    }

    .mri-7t_img img {
        height: 180px;
    }

    .mri-3d_img img {
        height: 220px;
    }

    #us_page section img{
        height: 200px;
    }

    .application-card {
        margin: 0px 20px;
        padding: 10px 0px;
        background-color: rgba(255,255,255,0.85);
    }

}

@media only screen and (max-width: 745px) {


    .logoOne {
        width:45px;
        height:40px;
    }

    .logoTwo {
        width:50px;
        height:45px;
    }

    .top_container {
        padding-top: 8vh;
        height: 42vh;
    }

    .home_top-title {
        padding: 12px 8px;
    }

    .carousel-item img {
        min-height: 100%; 
    }
    
    .main_title {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .about_carousel {
        height: 90%;
    }

    .about-description h2 {
        font-size: 24px;
        margin-bottom: 32px;
        letter-spacing: 1px;
        text-shadow: 2px 4px 3px rgba(0,0,0,0.3);    
    }

    .about-boss {
        text-align: center;
    }

    .about-boss h4 {
        font-size: 24px;
    }

    .about-boss img {
        margin-bottom: 24px;
    }

    .heading h2 {
        font-size: 26px;
    }

    .about-boss {
        margin-bottom: 24px;
    }

    .material-card {
        min-height: 650px;
        margin-left: 12px;
        margin-right: 12px;
    }

    #contact h2{
        font-size: 25px;
    }

    #contact h4{
        font-size: 20px;
    }

    .contact_form h4, h5{
        text-align: center;
    }

    .contact_form h3 {
        margin-bottom: 30px;
    }

    .contact_form h2,h3 {
        text-align: center;
    }
    
    .logos img {
        width: 98%;
    }

    .content_top {
        margin-bottom: 24px;
        height: 40vh;
    }

    .content-row h5 {
        text-align: left;
    }

    .content-row h5 {
        font-size: 18px;
    }
    
    .top-title {
        background-color: rgba(0,87,146, 1);
        color: white;
        font-size: 30px;
        letter-spacing: 2px;
        padding-left: 12px;
        bottom: 0;
        width: 100%;
    }

    section .title {
        letter-spacing: 1px;
        font-size: 24px;
    }

    .content-row figcaption {
        margin-bottom: 30px;
    }

    .content-row img{
        height:250px; 
    }

    #material .container {
        padding: 8px;
    }

    #facility .container {
        padding: 8px;
    }

    .ourTeam_img {
        width: 180px;
        height: 180px;
    }

    .ourTeam-title {
        letter-spacing: 2px;
        font-size: 24px;
    }

    .gallery_card img {
        height: 200px;
    }

    .gallery_card-row {
        margin: 0px 0px;
        padding: 0;
    }

    .facility_card {
        margin: 12px;
    }

    .img-zoom_container {
        top:20%;
        width:90%;
        left: 5%;
    }

    .btn-close {
        top: -20px;
        right: -20px;
    }

    .us-3d_img img{
        height: 200px;
    }

    .mri-7t_img img {
        height: 150px;
    }

    .mri-pet_img img {
        height: 400px;
    }

    .mri-3d_img img {
        height: 320px;
        margin-bottom: 12px;
    }

    .ivis-3d_img img {
        height: 230px;
    }

    .micro_ct-xray_img img{
        height: 480px;
    }

    .btn-close {
        margin-right: 5px;
        font-size: 12px;
    }
   
    .application-card {
        margin: 0px 8px;
        padding: 8px 0px;
        background-color: rgba(255,255,255,0.85);
    }

    .content-img {
        margin-bottom: 12px;
    }

    .section_container {
        padding: 42px 12px;

    }

    .mri_image-top {
        content: url('../images/mri/mri_bg2.jpg');
    }

    .us_image-top {
        content: url('../images/us/us_bg2.jpg');
    }

    .ivis_image-top {
        content: url('../images/ivis/ivis_bg2.jpg');
    }

    .ct_image-top {
        content: url('../images/ct/ct_bg2.jpg');
    }

    .micro-ct_image-top {
        content: url('../images/micro-ct//micro-ct_bg2.jpg');
    }

    .hyp_image-top {
        content: url('../images/hypoxic_chambers/hyp_bg2.jpg');

    }
}