/* --------------------------------------------------------

__  ______  ________   _   _       _     _ _                   _     _           _ _           _ 
|  \/  ||  \/  |_   _| | | | |     | |   | (_)                 | |   (_)         (_) |         | |
| .  . || .  . | | |   | |_| | ___ | | __| |_ _ __   __ _ ___  | |    _ _ __ ___  _| |_ ___  __| |
| |\/| || |\/| | | |   |  _  |/ _ \| |/ _` | | '_ \ / _` / __| | |   | | '_ ` _ \| | __/ _ \/ _` |
| |  | || |  | |_| |_  | | | | (_) | | (_| | | | | | (_| \__ \ | |___| | | | | | | | ||  __/ (_| |
\_|  |_/\_|  |_/\___/  \_| |_/\___/|_|\__,_|_|_| |_|\__, |___/ \_____/_|_| |_| |_|_|\__\___|\__,_|
                                                     __/ |                                        
                                                    |___/                                         
name: Style Sheet for Metropolitan Health
version: 2.0
date: January 2019
author:  Sham Tabriz Ahmed	
email: shamsodien.ahmed@mmiholdings.co.za

Index
----------------------------------------------------------
1.  Variables
2.  Fonts
3.  Navigation
4.  Slider 
5.  Body
6.  Our Service Header
7.  Hello Doctor
8.  Start of About us
9.  Contact us
10. Under Construction
11. Footer
12. Media Queries
13. Grids
----------------------------------------------------------*/

/* --------------------------------------------------------
1. Variables 
----------------------------------------------------------*/
:root {
    --main-bg-color: #FFF; 
    --main-btn:#002856;
    --main-header:#1F7DCE;
    --font-body: 1.3rem;
}
#txtSearch{
    margin-top: 25px; 
    width: 93%;
}
/* --------------------------------------------------------
2. Fonts 
----------------------------------------------------------*/
@font-face {    
    font-family: GilNormal;
    /*src: url(/web/fonts/GillSans.otf );*/
    src: url("../fonts/GillSans.otf") ;
}

@font-face {
    font-family: GilBold;
    /*src: url(/web/fonts/GillSansBold.otf);*/
    src: url("../fonts/GillSansBold.otf");
}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 4rem;
	color: #d30f13;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  .forward-arrow {
    font-size: 2.5rem;
	color: #ffffff;
	margin: 20px 0 0 0;
  }

html, body {
	font-family: 'Vesper Libre', serif;
	height: 100%;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


body {
	font-family: Helvetica, "GilNormal", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
	font-size:  1.3rem; 
	line-height: 1.00;
	color: #606060;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	background-color: #fff; 
    font-weight: normal;
}

img {
	display: block;
    /*width: 35%;*/
}

.health-information img{
    width: 100%;
    height: 440px;
}

.paginationjs-pages ul li{
	display: inline-block;
	background: #bcbfbf;
    color: #ffffff;
    margin: 25px 5px;
}

.paginationjs-pages ul li a{
    color: #ffffff;
	padding: 10px;
	display: inline-block;
}

.paginationjs-pages ul li.active {
    background: #d40f14;
}

hr{
    border: solid 1px #7da1b2;
}

.logo a{
	background-image: url("../images/MHWiseAndWell/MHLogo.png");
	background-repeat: no-repeat;
	display: block;
	background-size: contain;
	width: auto;
	height: 90px;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

.banner-bg{
    background-image: url(../images/MHWiseAndWell/banner-gen-highres.jpg);
    background-repeat: no-repeat;
    background-size: 340%;
    height: 380px;
    position: relative;
    margin: 0 0 5% 0;
    background-position: 68% 100%;
}

.act-banner-bg{
    background-image: url(../images/MHWiseAndWell/GBV-Generic-Banner-2.png);
    background-repeat: no-repeat;
    background-size: 340%;
    height: 380px;
    position: relative;
    margin: 0 0 5% 0;
    background-position: 68% 100%;
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

.row-no-mb{
    margin-bottom: unset!important;
}

.float-right{
    float: right;
}

.text-align-left{
    text-align: left!important;
}

.margin-bottom-50{
    margin-bottom: 50px;
}

/* --------------------------------------------------------
3. Navigation
----------------------------------------------------------*/

nav {
    background-color: #fff;
    width: 100%;
    height: 155px;
    line-height: 30px;
}

nav ul {
	margin: 80px 0 0 0;
}

nav ul a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
	color: #003A5D;
	font-size: 1rem;
    display: block;
    padding: 0 15px;
	cursor: pointer;
    display: block;
    padding: 10px 15px;
    text-transform: uppercase;
}

nav .brand-logo {
    position: initial;
	margin-top: 25px;
}

nav .brand-logo img{
	position: relative;
    right: -55%;
	width: 70%;
	margin: 0;
}

nav ul a:hover {
	color: #2F4A6F;
	background-color: transparent;
}

nav ul a:active {
	color: #2F4A6F;
	background-color: transparent;
}	

nav .sidenav-trigger {
    float: left;
    position: relative;
    z-index: 1;
    height: 56px;
    line-height: 90px!important;
    margin: 0 18px;
    color: #1670b9;
}


.sidenav li > a {
	font-size: 1rem;
	font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    color: #4491D7;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    line-height: 48px;
	padding: 0 32px;
	text-transform: uppercase;
}   


.sidenav li > a:hover {
	color: #2F4A6F;
	background-color: transparent;
}

/* --------------------------------------------------------
    4. Slider 
----------------------------------------------------------*/

.slider .indicators {
    bottom: 30px;
    z-index: 100;
}

.slider .indicators .indicator-item.active {
    background-color: #4491D7;
}
.slider .indicators .indicator-item {
   margin: 0 10px;
   border-radius: 0;
   display: none;
}

.slider .slides li {
   /*height: 107%;*/
}

.slider .slides li img {
    background-position: bottom;
    background-repeat: no-repeat;
}

.sidenav-overlay{
    z-index: unset;
}

.slider .slides li .caption {
    top: 19%;
}

.caption h3{
	text-transform: uppercase;
	font-size: 26px;
	font-family: 'Vesper Libre', serif;
	line-height: 117%;
}

.caption h5{
	font-size: 14px;
	font-family: Helvetica, "GilNormal", Arial, "sans-serif";
	margin: 0 0 30px 0;
	color: #676767;
}

.health-information .header-background .caption h5{
	margin: 0;
}

/* --------------------------------------------------------
5. Body
----------------------------------------------------------*/
.header-background {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 165px;
}

.header-background-home {
	background-color: #FFFFFF;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 90px;/*height: 165px;*/
}

.header-background-small {
    background-color: #003A5D;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 165px;
	margin: -30px 0 0 0;
}

.header-background-hello-doctor{
    background-color: #64859a;
    background-size: 100%;
    background-repeat: no-repeat;
	height: 165px;
	padding: 20px 0 0 0;
}
.header-background-small .caption {
    color: #fff;
    position: relative;
    top: 80%;
    left: 15%;
    width: 70%;
    opacity: 1!important;
}
.header-background-small img{
    position: relative;
    top: 78px;
    right: 125px;
}

.header-background .caption {
    color: #00395d;
    position: absolute;
	top: 83%;
    bottom: 0;
    opacity: unset;
}

.health-information .header-background .caption {
	top: 87%;
	left: 11%;
}

.header-background-home .caption {
    color: #00395d;
    position: relative;
    top: 75%;
    left: 15%;
    width: 70%;
    opacity: unset !important;
}

.header-background img{
    position: relative;
    /*top: 78px;*/
    right: 125px;
}

/* --------------------------------------------------------
6. Our Service Header
----------------------------------------------------------*/
.custom-wrapper{
    width: 100% !important;
    max-width: 100%;
	background-color: #ebebeb;
	padding: 0 0 10% 0;
}

.custom-wrapper .row{
    /*padding-left: 20%;*/
}

.services-list{
    width: 100%;
    max-width: 100%;
}

.services-header{
    text-align: right;
    text-transform: uppercase;
    color: #003A5D;
    font-weight: 800;
    font-family: 'Vesper Libre', serif;
    font-size: 32px;
}

.services-header-para{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    margin: 5%;
    text-align: center;
}

/*.service-header-padding{
    padding: 75px !important;
}*/

.service-icon-padding{
    /*padding: 6% 0 0 6% !important;*/
}

.serviceicon{
    display: inline; 
    cursor: pointer;
}

.serviceicon img{
    width: 50%;
	margin: 5% auto;
}

/*.serviceicon img{
    width: 60%;
	margin: 10% 0 5% 10%;
}*/

.ourserviceicon img{
    width: 50%;
	margin: 0 auto;
}

.servicetext-sm{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    bottom: 55px;
    left: 84px;
    width: 48%;
}
.servicetext-md{
    font-family: GilBold;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    bottom: 55px;
    left: 84px;
    width: 48%;
}

.servicetext-bg {
    font-family: 'Vesper Libre', serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
}

.services-content-block{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 14px;
    color: #FFFFFF;
	line-height: 1.7;
}

.services-content-block h3{
    font-family: 'Vesper Libre', serif;
    font-size: 1.80rem;
}

.servicetext-bg a{
    color: #000;
}

.our-services img{
    width: 100%;
}

.services-blue-bgcolor{
    background-color: #00395d;
	margin-bottom: 20px;
}

.services-red-bgcolor{
    background-color: #d30f13;
	margin-bottom: 20px;
}

.services-grey-bgcolor{
    background-color: #bcbfbf;
	margin-bottom: 20px;
}

.our-services-modal h4 {
    color: #1F7DCE;
    text-transform: uppercase;
    font-weight: 800;
    font-family: 'Vesper Libre', serif;
    font-size: 22px;
}

.our-services-modal{
    font-size: 15px;
}


.our-services-modal ul:not(.browser-default) > li {
    list-style-type: initial;
}

.our-services-modal ul:not(.browser-default){
    padding-left: 15px;
}


.our-services-modal img{
    margin-bottom: 10px;
}

.our-services-title h4 {
    color: #1F7DCE;
    text-transform: uppercase;
    font-weight: 800;
    font-family: GilBold;
    font-size: 22px;
}

.our-services-title img{
    display: inline;
}

.our-services-title ul:not(.browser-default) > li {
    list-style-type: initial;
}

.our-services-title ul:not(.browser-default) {
    padding-left: inherit;
}

.our-services-title p{
    font-size: 15px;
}

.our-services-title ul{
    font-size: 15px;
}

.our-services-title .card{
    padding:40px;
    font-size: 22px;
}

.bold-services{
    font-size: 16px;
    font-family: 'Vesper Libre', serif;
}

.modal .modal-close{
    float: right;
}

.text-right {
    text-align: left;
}
.text-center {
    text-align: center;
}

.os-row-margin-left{
    margin-left: 150px!important;
}

/* --------------------------------------------------------
7. Hello Doctor
----------------------------------------------------------*/

.header-background-hello-doctor .tiny{
    position: relative;
    text-transform: none;
    float: right;
    font-size: 16px;
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    color: #fff;
    line-height: 20px;
}

.hello-doctor-inline{
    display: inline-block;
}

.header-background-hello-doctor span{
    color: #fff;
    font-size: 32px;
    font-family: 'Vesper Libre', serif;
    text-transform: uppercase;
    position: relative;
    line-height: 0.6;
}

.hello-doctor{
    width: 100%;
    padding-top: 20px;
}

.hello-doctor-text-header-app{
    font-family: GilBold;
    color: #fff;
    font-size: 14px;
    margin: 20px 0 10px 0;
    width: 168px;
    text-transform: uppercase;
}
.hello-doctor-text-header-app-tiny{
    color: #fff;
    font-size: 12px;
	margin: 0 0 20px 0;
}

img.responsive-hc-img, video.responsive-hc-video{
   	width: 100%;
    height: auto;
	margin: 20px 0;
}

.hc-blog-title{
    color: #1F7DCE;
    text-transform: uppercase;
    font-weight: 800;
    font-family: 'Vesper Libre', serif;
    font-size: 22px;
}

.p-hello{
    padding:20px!important;
}

.p-hello p{
    color: #000;
	font-size: 1.1rem;
}

#hc_app_blog .card{
    height: 415px;
}
#hc_app_act .card{
    height: 415px;
}
#hc_app_blog .card-date{
    font-size: 11px;
    color: #000;
}
#hc_app_act .card-date{
    font-size: 11px;
    color: #000;
}
#hc_app_blog .card-title{
    color: #1F7DCE;
    text-transform: uppercase;
    font-weight: 800;
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 15px;
    line-height: 16px;
    height: 45px;
}

#hc_app_act .card-title {
    color: #1F7DCE;
    text-transform: uppercase;
    font-weight: 800;
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 15px;
    line-height: 16px;
    height: 45px;
}
#hc_app_act .card-description{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 14px;
}
#hc_app_blog .card-description{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 14px;
}
.card-image img{
    width: 100%!important;
    height: 175px;
}

.card .card-content p{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
}

.card .card-action{
    padding: 35px 0px;
}
/* --------------------------------------------------------
8. Start of About us
----------------------------------------------------------*/
.header-background-about{
    color: #fff;
    font-size: 32px;
    font-family: 'Vesper Libre', serif;
    text-transform: uppercase;
    line-height: 0.6;
    margin: 0;
}
.header-background-about .tiny{
    text-transform: none;
    font-size: 16px;
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    color: #FFFFFF;
}

.header-background-about  img {
    position: relative;
    left: 101px;
    top: 35px;
}

.header-background-about-p{
    text-align: justify;
    color: #FFF;
    font-size: 16px;
}

.p-about-r{
    padding: 0 0 0 15%; 
}
.p-about-l{
    padding: 0 15% 0 0; 
}

.p-about-header{
    padding: 0 15% 0 15%; 
}

.header-background-about span{
    line-height: 1.2;
}


/* --------------------------------------------------------
9 .Contact us
----------------------------------------------------------*/
.contact-header-mgtb{
   margin: 0 0 50px 0;
   padding: 0 30px 0 30px!important;
}

.btn{
    background-color: #d40f14;
    font-family: 'Vesper Libre', serif;
}

.contact-us-header h3{
    color:#000000;
    text-transform: uppercase;
    font-weight: 800;
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 32px;
}

.contact-us-header p{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 16px;
    text-transform: none;
    color: #000;
}

.contact-us-header span{
    font-family: Helvetica, "GilNormal", Arial, "sans-serif";
    font-size: 16px;
    text-transform: capitalize;
}

.contact-us img{
    width: 100%;
}

.contact-us-header a{
    color: #d30f13;
	font-weight: bold;
}

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea{
    border: 1px solid #9e9e9e;
    margin-bottom: 30px;
}

textarea, input::placeholder {
    padding: 20px;
  }

textarea{
    height: 400px;
}

button, input, optgroup, select, textarea{
    font-family: GilNormal;
}


/* --------------------------------------------------------
10. Under Construction
----------------------------------------------------------*/
.underconstructiontext-bg{
    font-family: GilBold;
    font-size: 32px;
    text-transform: uppercase;
}

.under-construction img{
    width: 100%;
    height: 440px;
}

.underconstruct .card{
    padding: 10px;
}

/* --------------------------------------------------------
11. Footer
----------------------------------------------------------*/
.page-footer{
    background-color: #003A5D;;
    padding: 20px 0 10px;
	background-size: 100%;
    background-repeat: no-repeat;
	color: #051c53;
}

.nav-footer{
    display: -webkit-inline-flex;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 20px;
	color: #FFFFFF;
}

.nav-footer a{
	color: #FFFFFF;
}

.nav-footer li {
    padding: 0 15px 0 15px;
}
.address-details{
    font-size: 14px;
}
.address-details div{
    margin: 15px 0;
}
.address-details a{
    font-size: 14px;
    color: #051c53;
	font-weight: bold;
}
.address-details span{
    font-size: 2.5rem;
    color: #7DA1B2;
}
.footer-address-links a{
    font-size: 14px;
	color: #FFFFFF;
}

a[ id= "ewp" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

#copyright-info {
    background-color: #FFFFFF;
}

footer p.copyright{
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: #bcbfbf;
}

.met-ocsa-logo {
    /*position: absolute;
    right: 0;
    bottom: 20%;
	width: auto;*/
}

ul:not(.browser-default) > li {
    font-size: 1rem;
}

.upward-arrow {
	color: grey;
	opacity: 0.5;
	font-size: 3rem;
	position: absolute;
    right: 0;
    bottom: 0;
}

/* --------------------------------------------------------
12. Media Queries
----------------------------------------------------------*/

@media only screen and (min-width: 601px){
	
	.banner-bg{
		background-image: url("../images/MHWiseAndWell/banner-gen-highres.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		height: 380px;
		position: relative;
		margin: 0 0 5% 0;
    }
    
    .act-banner-bg{
        background-image: url("../images/MHWiseAndWell/GBV-Generic-Banner-2.png");
        background-repeat: no-repeat;
        background-size: cover;
        height: 380px;
        position: relative;
        background-position: right;
        margin: 49px 0 5% 0;
	}
	
	.slider .slides li .caption {
		left: 21%;
		width: 60%;
		margin: 0;
		top: 10%;
	}
	
	nav .brand-logo {
		margin-top: 0;
	}

	nav .brand-logo img {
		width: 100%;
		margin: 5% 0 0 0;
	}
	
	.container {
		width: 85%;
    }

    nav{
        height: 90px;
    }

    .navbar-fixed {
        height: 91px;
    }

    .gmap_canvas {
        overflow: hidden;
        background: none!important;
        height: 57%;
        width: 71%;
    }

    .nav-footer li {
        padding: 6px 15px 15px 0px;
        font-size: 11px;
    }

    .header-background .caption {
        color: #ffffff;
    	position: absolute;
		top: 80%;
    	bottom: 0;
        left: 15%;
        width: 70%;
        opacity: unset!important;
        transform: translateY(-50px)!important;
    }
	
	.header-background-small .caption {
		top: 95%;
	}
	
	.custom-wrapper {
		padding: 0 0 1% 0;
	}

    .os-row-margin-left {
        margin-left: 95px!important;
    }
	
	.upward-arrow {
		position: absolute;
		bottom: 0;
		right: -5%;
		color: grey;
		opacity: 0.5;
		font-size: 3rem;
		width: auto;
    	margin: 0;
	}
	
	.servicetext-bg{
		position: relative;
		/*bottom: 55px;*/
		left: 0;
		width: 100%;
	}
	
	.ourserviceicon img {
		width: 30%;
	}
	
	.text-right {
		text-align: right;
	}
    
}

@media only screen and (max-width: 600px) {
	
    nav {
        height: 90px;
    }
    .navbar-fixed {
        height: unset;
    }

    nav .sidenav-trigger i {
        height: 56px;
        line-height: 90px;
    }

    .service-header-padding {
        padding: unset!important;
    }
	.caption  h3{
		font-size: 19px;
	}
	.slides li .caption  h3{
		font-size: 27px;
	}

	.tap-target, .tap-target-wrapper {
		width: 600px;
		height: 600px;
    }
    .nav-footer {
        display: unset;
    }

    .hello-doctor{
        padding-top: 35px;
    }
    .header-background-hello-doctor{
        height: unset!important;
        background-size: unset;
        background-repeat: no-repeat;
        background-color: #1e7dce;
    }
    .header-background-hello-doctor .tiny{
        float: unset;
    }

    .os-row-margin-left {
        margin-left: 55px!important;
    }

    .p-about-r, .p-about-l{
        padding: unset;
    }

    .header-background-about img{
        display: none;
    }

    .header-background, .header-background-small {
        /*background-image: url(../images//MHWellness/title-header-background.jpg);*/
        background-size: unset;
        background-repeat: no-repeat;
    }
    .header-background .caption {
        color: #fff;
        opacity: unset!important;
        transform: translateY(-50px)!important;
    }

    .header-background-small .caption{
        transform: translateY(-71px)!important;
    }
    .nav-footer li {
        padding: 10px 15px 15px 0px;
    }
    .service-icon-padding{
        padding: unset!important;
    }

    .services-header{
        text-align: center;
    }

    .health-information img {
        width: 100%;
        height: 250px;
        padding-top: 91px;
    }

    .our-services img {
        width: 100%;
        height: 250px;
        padding-top: 91px;
    }

    .under-construction img {
        width: 100%;
        height: 250px;
        padding-top: 91px;
    }
    
    .contact-us img {
        width: 100%;
        height: 250px;
        padding-top: 91px;
    }

}

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

	.slider .slides {
		height: 400px!important;
    }

}

@media only screen and (min-width: 993px){
	
	.slides li .caption h3 {
		 font-size: 3rem;
	}
	
	.slider .slides li .caption {
		left: 31%;
		width: 40%;
		margin: 0;
		top: 5%;
	}
	
	h5.home {
		width: 90%;
	}
	
	nav .brand-logo {
		margin-top: 40px;
	}
	
	nav .brand-logo img {
		right: 0;
	}

    nav{
        height: 140px!important;
    }
	
	.ourserviceicon img {
		width: 100%;
	}
	
	.row .col {
		padding: 20px .75rem;
	}
	
    .navbar-fixed {
        height: 91px;
    }
	.service-icon-padding {
    	margin: 2% 0 0 0 !important;
	}
	
	.services-content-block{
		width: 70%;
		margin: 10% 0 0 0;
	}
	
	.health-information .header-background .caption {
		top: 80%;
		left: 11%;
	}

}

@media only screen and (min-width: 1200px){
	.slider .slides {
		height: 400px!important;
	}
	
	.slider .slides li .caption {
        left: 36%;
        width: 28%;
        text-align: justify;
        opacity: 0;
    }
	.header-background .caption {
		left: 15%;
		width: 70%;
		opacity: 1!important;
    }
	
	.header-background-home .caption, .health-information .header-background .caption {
		left: 15%;
		width: 70%;
		opacity: 1!important;
    }
    
    .contact-us img{
        width: 100%;
        height: 440px;
    }

    .os-blocks-p{
        padding: 100px 0 100px 0;
    }

    .os-blocks-mt{
        margin: 20px 0 0 0;
    }

    img.responsive-hc-img, video.responsive-hc-video {
        width: 55%;
        height: 270px;
        height: 270px;
        position: relative;
        left: 108px;
    }

    .gmap_canvas {
        overflow:hidden;
        background:none!important;
        height:60%;width:114%;
    }
    .nav-footer li {
        padding: 6px 25px 15px 0px!important;
        font-size: inherit!important;
    }

    nav{
        height: 140px!important;
    }

/*    .service-header-padding {
        padding: 75px !important;
    }*/
}


/* --------------------------------------------------------
13. Grids
----------------------------------------------------------*/

.row {
    margin-left: auto;
    margin-right: auto;
	position: relative;
}

.row:after {
    content: "";
    display: table;
    clear: both
}

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1rem;
    min-height: 1px;
}

.row .col[class*="push-"],
.row .col[class*="pull-"] {
    position: relative
}

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.offset-s1 {
    margin-left: 8.3333333333%
}

.row .col.pull-s1 {
    right: 8.3333333333%
}

.row .col.push-s1 {
    left: 8.3333333333%
}

.row .col.offset-s2 {
    margin-left: 16.6666666667%
}

.row .col.pull-s2 {
    right: 16.6666666667%
}

.row .col.push-s2 {
    left: 16.6666666667%
}

.row .col.offset-s3 {
    margin-left: 25%
}

.row .col.pull-s3 {
    right: 25%
}

.row .col.push-s3 {
    left: 25%
}

.row .col.offset-s4 {
    margin-left: 33.3333333333%
}

.row .col.pull-s4 {
    right: 33.3333333333%
}

.row .col.push-s4 {
    left: 33.3333333333%
}

.row .col.offset-s5 {
    margin-left: 41.6666666667%
}

.row .col.pull-s5 {
    right: 41.6666666667%
}

.row .col.push-s5 {
    left: 41.6666666667%
}

.row .col.offset-s6 {
    margin-left: 50%
}

.row .col.pull-s6 {
    right: 50%
}

.row .col.push-s6 {
    left: 50%
}

.row .col.offset-s7 {
    margin-left: 58.3333333333%
}

.row .col.pull-s7 {
    right: 58.3333333333%
}

.row .col.push-s7 {
    left: 58.3333333333%
}

.row .col.offset-s8 {
    margin-left: 66.6666666667%
}

.row .col.pull-s8 {
    right: 66.6666666667%
}

.row .col.push-s8 {
    left: 66.6666666667%
}

.row .col.offset-s9 {
    margin-left: 75%
}

.row .col.pull-s9 {
    right: 75%
}

.row .col.push-s9 {
    left: 75%
}

.row .col.offset-s10 {
    margin-left: 83.3333333333%
}

.row .col.pull-s10 {
    right: 83.3333333333%
}

.row .col.push-s10 {
    left: 83.3333333333%
}

.row .col.offset-s11 {
    margin-left: 91.6666666667%
}

.row .col.pull-s11 {
    right: 91.6666666667%
}

.row .col.push-s11 {
    left: 91.6666666667%
}

.row .col.offset-s12 {
    margin-left: 100%
}

.row .col.pull-s12 {
    right: 100%
}

.row .col.push-s12 {
    left: 100%
}

@media only screen and (max-width: 600px) {
	.row .col {
		padding: 0 .75rem;
	}
}

@media only screen and (min-width: 601px) {
    .row .col.m1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.offset-m1 {
        margin-left: 8.3333333333%
    }
    .row .col.pull-m1 {
        right: 8.3333333333%
    }
    .row .col.push-m1 {
        left: 8.3333333333%
    }
    .row .col.offset-m2 {
        margin-left: 16.6666666667%
    }
    .row .col.pull-m2 {
        right: 16.6666666667%
    }
    .row .col.push-m2 {
        left: 16.6666666667%
    }
    .row .col.offset-m3 {
        margin-left: 25%
    }
    .row .col.pull-m3 {
        right: 25%
    }
    .row .col.push-m3 {
        left: 25%
    }
    .row .col.offset-m4 {
        margin-left: 33.3333333333%
    }
    .row .col.pull-m4 {
        right: 33.3333333333%
    }
    .row .col.push-m4 {
        left: 33.3333333333%
    }
    .row .col.offset-m5 {
        margin-left: 41.6666666667%
    }
    .row .col.pull-m5 {
        right: 41.6666666667%
    }
    .row .col.push-m5 {
        left: 41.6666666667%
    }
    .row .col.offset-m6 {
        margin-left: 50%
    }
    .row .col.pull-m6 {
        right: 50%
    }
    .row .col.push-m6 {
        left: 50%
    }
    .row .col.offset-m7 {
        margin-left: 58.3333333333%
    }
    .row .col.pull-m7 {
        right: 58.3333333333%
    }
    .row .col.push-m7 {
        left: 58.3333333333%
    }
    .row .col.offset-m8 {
        margin-left: 66.6666666667%
    }
    .row .col.pull-m8 {
        right: 66.6666666667%
    }
    .row .col.push-m8 {
        left: 66.6666666667%
    }
    .row .col.offset-m9 {
        margin-left: 75%
    }
    .row .col.pull-m9 {
        right: 75%
    }
    .row .col.push-m9 {
        left: 75%
    }
    .row .col.offset-m10 {
        margin-left: 83.3333333333%
    }
    .row .col.pull-m10 {
        right: 83.3333333333%
    }
    .row .col.push-m10 {
        left: 83.3333333333%
    }
    .row .col.offset-m11 {
        margin-left: 91.6666666667%
    }
    .row .col.pull-m11 {
        right: 91.6666666667%
    }
    .row .col.push-m11 {
        left: 91.6666666667%
    }
    .row .col.offset-m12 {
        margin-left: 100%
    }
    .row .col.pull-m12 {
        right: 100%
    }
    .row .col.push-m12 {
        left: 100%
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.offset-l1 {
        margin-left: 8.3333333333%
    }
    .row .col.pull-l1 {
        right: 8.3333333333%
    }
    .row .col.push-l1 {
        left: 8.3333333333%
    }
    .row .col.offset-l2 {
        margin-left: 16.6666666667%
    }
    .row .col.pull-l2 {
        right: 16.6666666667%
    }
    .row .col.push-l2 {
        left: 16.6666666667%
    }
    .row .col.offset-l3 {
        margin-left: 25%
    }
    .row .col.pull-l3 {
        right: 25%
    }
    .row .col.push-l3 {
        left: 25%
    }
    .row .col.offset-l4 {
        margin-left: 33.3333333333%
    }
    .row .col.pull-l4 {
        right: 33.3333333333%
    }
    .row .col.push-l4 {
        left: 33.3333333333%
    }
    .row .col.offset-l5 {
        margin-left: 41.6666666667%
    }
    .row .col.pull-l5 {
        right: 41.6666666667%
    }
    .row .col.push-l5 {
        left: 41.6666666667%
    }
    .row .col.offset-l6 {
        margin-left: 50%
    }
    .row .col.pull-l6 {
        right: 50%
    }
    .row .col.push-l6 {
        left: 50%
    }
    .row .col.offset-l7 {
        margin-left: 58.3333333333%
    }
    .row .col.pull-l7 {
        right: 58.3333333333%
    }
    .row .col.push-l7 {
        left: 58.3333333333%
    }
    .row .col.offset-l8 {
        margin-left: 66.6666666667%
    }
    .row .col.pull-l8 {
        right: 66.6666666667%
    }
    .row .col.push-l8 {
        left: 66.6666666667%
    }
    .row .col.offset-l9 {
        margin-left: 75%
    }
    .row .col.pull-l9 {
        right: 75%
    }
    .row .col.push-l9 {
        left: 75%
    }
    .row .col.offset-l10 {
        margin-left: 83.3333333333%
    }
    .row .col.pull-l10 {
        right: 83.3333333333%
    }
    .row .col.push-l10 {
        left: 83.3333333333%
    }
    .row .col.offset-l11 {
        margin-left: 91.6666666667%
    }
    .row .col.pull-l11 {
        right: 91.6666666667%
    }
    .row .col.push-l11 {
        left: 91.6666666667%
    }
    .row .col.offset-l12 {
        margin-left: 100%
    }
    .row .col.pull-l12 {
        right: 100%
    }
    .row .col.push-l12 {
        left: 100%
    }
}

@media only screen and (min-width: 1201px) {
    .row .col.xl1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.xl12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
    .row .col.offset-xl1 {
        margin-left: 8.3333333333%
    }
    .row .col.pull-xl1 {
        right: 8.3333333333%
    }
    .row .col.push-xl1 {
        left: 8.3333333333%
    }
    .row .col.offset-xl2 {
        margin-left: 16.6666666667%
    }
    .row .col.pull-xl2 {
        right: 16.6666666667%
    }
    .row .col.push-xl2 {
        left: 16.6666666667%
    }
    .row .col.offset-xl3 {
        margin-left: 25%
    }
    .row .col.pull-xl3 {
        right: 25%
    }
    .row .col.push-xl3 {
        left: 25%
    }
    .row .col.offset-xl4 {
        margin-left: 33.3333333333%
    }
    .row .col.pull-xl4 {
        right: 33.3333333333%
    }
    .row .col.push-xl4 {
        left: 33.3333333333%
    }
    .row .col.offset-xl5 {
        margin-left: 41.6666666667%
    }
    .row .col.pull-xl5 {
        right: 41.6666666667%
    }
    .row .col.push-xl5 {
        left: 41.6666666667%
    }
    .row .col.offset-xl6 {
        margin-left: 50%
    }
    .row .col.pull-xl6 {
        right: 50%
    }
    .row .col.push-xl6 {
        left: 50%
    }
    .row .col.offset-xl7 {
        margin-left: 58.3333333333%
    }
    .row .col.pull-xl7 {
        right: 58.3333333333%
    }
    .row .col.push-xl7 {
        left: 58.3333333333%
    }
    .row .col.offset-xl8 {
        margin-left: 66.6666666667%
    }
    .row .col.pull-xl8 {
        right: 66.6666666667%
    }
    .row .col.push-xl8 {
        left: 66.6666666667%
    }
    .row .col.offset-xl9 {
        margin-left: 75%
    }
    .row .col.pull-xl9 {
        right: 75%
    }
    .row .col.push-xl9 {
        left: 75%
    }
    .row .col.offset-xl10 {
        margin-left: 83.3333333333%
    }
    .row .col.pull-xl10 {
        right: 83.3333333333%
    }
    .row .col.push-xl10 {
        left: 83.3333333333%
    }
    .row .col.offset-xl11 {
        margin-left: 91.6666666667%
    }
    .row .col.pull-xl11 {
        right: 91.6666666667%
    }
    .row .col.push-xl11 {
        left: 91.6666666667%
    }
    .row .col.offset-xl12 {
        margin-left: 100%
    }
    .row .col.pull-xl12 {
        right: 100%
    }
    .row .col.push-xl12 {
        left: 100%
    }
}