@charset "utf-8";
/* CSS Document 
   Converged IT
   Developed By:Brainard Cureg Baccay
   Web-Designer/Front-end Developer
*/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

body {
    font: 1em/150% Open Sans, Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #E8E7E5;
    padding: 0px;
    margin: 0px;
    line-height: 22px;
    /**overflow-x: hidden;*/
}

.loading {
    background: url(../images/ajax-loader.gif) 50% 50% no-repeat!important;
    background-color: transparent!important;
    min-height: 280px;
    width: 100%;
    border: 0px solid red;
    position: relative;
    z-index: 1000!important;
}
h1 {
    font-size: 50px;
    line-height: 55px;
    color: #004CAA;
    font-weight: 100;
}

h2 {
    font-size: 33px;
    line-height: 40px;
    color: #fff;
    font-weight: 200;
}

h3 {
    font-size: 23px;
    line-height: normal;
    color: #333;
    font-weight: 400;how
}

span {
    padding: 2px 10px;
}

.center {
    margin:auto;
}
.spacer-center-vert {
   height:150px;
}
.show {
    display: block;
    visibility: visible;
}
.hide {
    display: none;
    visibility: hidden;
}
.center-txt-algn {
    text-align: center;
}

.left-txt-algn {
    text-align: left;
}

.clearfix {
    clear: both;
}

.left {
    float: left;
    text-align: left;
}

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

.full-width {
    width: 100%;
    padding: 0px;
}

.almost-full {
    width: 88%;
    padding: 5px;
}

.half-width {
    width: 48%;
    padding: 1%;
}

.almost-half {
    width: 28%;
    padding: 1%;
}

.border {
    border: 1px solid red;
}


.black {
    background-color: #000;
}

.colorgrey {
    background-color: #333;
}

.dark-gray {
    background-color: #202020;
}

.orange-bg {
    background-color: #FEA411;
}

.orange {
    color: #FEA411;
}

.blue {
    background-color: #0066FF;
}

.dark-blue {
    background-color: #0C3261;
}

.white-gutter {
    color: #fff;
    margin: 0px 30px 0px 10px;
}

.white {
    color: #fff;
    font-weight: 200;
}
.text-shadow
{
    text-shadow: 1px 1px 0 rgba(0,0,0,.70);
}
.color-black {
    color: #000;
}

.bg {
    background-color: #F0F0F0;
}

.bg-white {
    background-color: #fff;
}

.rounded-corners {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.transitions {
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}

.dotted {
    border-top: 1px dotted #999999;
}

.spacer {
    height: 5px;
}

.spacer-10 {
    height: 10px;
}

.spacer-20 {
    height: 20px;
}

.spacer-30 {
    height: 30px;
}

.spacer-50 {
    height: 50px;
}

.spacer-100 {
    height: 100px;
}
.spacer-170 {
    width:100%;
    height:170px;
    border:0px solid red;
}
.spacer-cheat {
    width:95%;
    height: 3000px;
    border:0px solid red;
}
.search-box {
    border: 0px;
    outline: none;
    padding: 6px 10px;
    width: 190px;
}

.text-box {
    border: 0px;
    outline: none;
    padding: 6px 4px;
    height: 23px;
    margin-top: 8px;
}

a {
    text-decoration: none;
}

.links {
    padding: 20px 70px;
    border: 2px solid #fff;
    text-align: center;

}

    .links:hover {
        background-color: #004FAE;
        -moz-opacity: 0.80;
        -khtml-opacity: 0.80;
        opacity: 0.80;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
        filter: alpha(opacity=80);
    }


.padding-5 {
    padding: 5px;
}

.margin-10 {
    margin: 10px;
}

.login {
    margin: 40px 0px 0px 30px;
}
    .mobile-elements {
        display: none!important;
        visibility:hidden;
    }
/****END GLOBAL CLASSES****/
.container {
    width: 1060px;
    margin: auto;
    border: 0px solid red;
}

.gutter {
    height:70px;
    position: fixed;
    top: 0px;
    z-index: 2;
}

.global-left {
    float: left;
}

.slider-wrapper {
    position: relative;
    background: url(../images/head-bg.jpg) top center no-repeat;
    background-color: #F0F0F0;
    border: 0px solid red;
    margin: 0px;
    height: auto;
}

.navigation, .navigation-footer {
    list-style-type: none;
}

    .navigation li, .navigation-footer li {
        display: inline;
    }

        .navigation li a {
            text-decoration: none;
            font-size: 15px;
            color: #000;
            padding: 5px 10px;
            line-height: 40px;
            margin: 0px 15px;
        }

        .navigation-footer li a {
            text-decoration: none;
            font-size: 14px;
            color: #000;
            padding: 3px 7px;
            line-height: 40px;
            margin: 0px 7px;
        }

            .navigation li a:hover, .navigation-footer li a:hover {
                color: #fff;
                background-color: #000;
            }

.logo {
    display: block;
    margin: -20px 0 0;
    width: 400px;
    position: absolute;
    top: 12%;
    z-index: 10;
    padding: 20px 10px 10px 50px;
}

#slider-load {
    border: 0px solid blue;
    margin-bottom: -60px;
}

.contents {
    padding-top: 30px;
    text-align: left;
}

.login {
    padding: 5px 30px;
    margin-top: 10px;
}

    .login:hover {
        color: #fff;
        background-color: #004CAA;
    }


.social-media li a {
    margin: 0px 5px;
    width: 38px;
    height: 39px;
    float: left;
}

.fb {
    background: url(../images/social-media.png) -72px 0px no-repeat;
    display: block;
    width: 66px;
    height: 66px;
}

    .fb:hover {
        background: url(../images/social-media.png) -72px -66px no-repeat;
    }

.twitter {
    background: url(../images/social-media.png) 0px 0px no-repeat;
    display: block;
    width: 66px!important;
    height: 66px;
}

    .twitter:hover {
        background: url(../images/social-media.png) 0px -66px no-repeat;
    }

/*************ALL PAGES*************/
/*.header-static-img {
    background: url("images/1.jpg") repeat;
    position: fixed;
    height: 100%;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -1;
}*/
#gutter {
    z-index: 200;
}
#header-static-img {
    /*background: url(../images/benefits-bg.jpg) 50% 0 no-repeat fixed;*/
    background: url("images/random6.jpg") 50% 0 no-repeat fixed;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -1;
    border:0px solid red;


}
/* Skew the container one way */
.skew-neg {
  
}
/* And the child another way */

#who-we-are {
   background: url(../images/who-we-are-bg.jpg) 50% 0 no-repeat fixed;
    width: 100%;
    min-height: 1020px;
    padding: 0px 0 0 0;
    color: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border:0px solid red;

}
.right.right-text {
    width: 37%;
}

.spacer-center-vert.whoweare{
  height:0px !important;}


#stethoscope {
    background: url(../images/image3.png) center center no-repeat;
    height: 100%;
    position: relative;
    top:-70px;
}
.big-stethoscope {
    width: 500px;
    height: 520px;
    border: 0px solid red;
    position: relative;
}
.left-cicle {
    background: url(../images/image2.png) 0 0 no-repeat ;
    margin: 0 auto;
    z-index: 2;
    border: 0px solid red;
    position: absolute;
    width: 300px;
    height:50%;
    left: -60px;
    top:200px;
    padding:0px 0px 50px 0px;
}
.right-cicle {
    background: url(../images/image1.png) no-repeat;
    margin: 0 auto;
    z-index: 2;
    border: 0px solid red;
    position: absolute;
    width: 250px;
    height:80%;
    right: 0px;
    top:80px;
    padding:50px 0px 100px 0px;
}

#login {
    width: 100%;
}

#benefits {
    background: url(../images/benefits-bg1.jpg) no-repeat fixed;
    width: 100%;
    min-height: 580px;
    padding: 0px 0 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

img.small-icons {
    width: 40px;
    height: auto;
    cursor: pointer;
  
}

 #scrollinfo {
      position: fixed;
      bottom: 10px;
      left: 10px;
      visibility:hidden;
    }


/*IE 9 and above*/
@media screen and (min-width:0\0) {
    #video_background {
        min-width: 100%!important;
        min-height: 100%!important;
        width: auto;
        height: auto;
        max-width: 200%;
        margin: -5% 0% 0% 0%!important;
        overflow: hidden;
        border: 0px;
    }
}
#howto, #howto-mobile {
     background: url(../images/how-to-bg.jpg) 0 0 no-repeat fixed;
    background-color: #0C3261;
    color: #fff;
    width: 100%;
    min-height: 560px;
    padding: 0px 0 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    top:0px;
}

#comparison {
    background-color: #fff;
    margin-top:-50px;
}

#faq {
    background: url(../images/faq-bg.jpg) 50% 0 no-repeat fixed;
    width: 100%;
    min-height: 580px;
    padding: 0px 0 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact {
    background: url(../images/contact-bg.jpg) no-repeat fixed;
    width: 100%;
    min-height: 580px;
    padding: 0px 0 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


.phone-slider {
    background: url(../images/phone.png) 0 0 no-repeat;
    width: 328px;
    height: 450px;
    padding: 118px 31px;
    position: relative;
    bottom: 2px;
}
/*****FAQ**********/

#faq-accordion li {
    position: relative;
    overflow: hidden;
    margin-top: 5px;
}

.content {
    display: none;
    padding: 15px 5px;
}

.head {
    text-decoration: none;
    display: block;
}
/***MAP*****/
#map1, #map2, #map3 {
    width: 100%;
    height: 700px;
    z-index: 100;
    position: relative;
    margin-bottom:10px;
}


.mask {
    background: url(../images/mask-bg.png) repeat;
    position: relative;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

.heading-all-pages {
    background: url(../images/heading-allpages-bg.png) repeat-x;
}

.navigation-all-pages {
    list-style-type: none;
}

    .navigation-all-pages li {
        display: inline;
    }

        .navigation-all-pages li a {
            text-decoration: none;
            font-size: 18px;
            color: #fff;
            padding: 5px 10px;
            line-height: 40px;
            margin: 0px 15px;
        }

            .navigation-all-pages li a:hover {
                color: #fff;
                background-color: #000;
            }

#brey-gutter-navigation li.breynav-active a {
    color: #fff;
    background-color: #004FAE;
}

.all-pages-bg {
    background-color: #F0F0F0;
    min-height: 400px;
    width: 95%;
    margin: auto;
    padding: 30px 0px;
}
/****FORM******/
.form-wrapper {
	max-width:500px;
	width:95%;
	margin:0 auto;
	position:relative;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="password"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea {
	width:100%;
	box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
	border-radius:5px;
}
.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form input[type="url"]:hover,
.contact-form textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
.contact-form textarea {
	height:100px;
	max-width:100%;
}
.contact-form button[type="submit"] {
        cursor: pointer;
        width: 108%;
        border: none;
        background: #004FAE;
        background-image: linear-gradient(bottom, #004FAE 0%, #0058C4 52%);
        background-image: -moz-linear-gradient(bottom, #004FAE 0%, #0058C4 52%);
        background-image: -webkit-linear-gradient(bottom, #004FAE 0%, #0058C4 52%);
        color: #FFF;
        margin: 10px 0 5px;
        padding: 13px 0px;
        border-radius: 5px;
    }

        .contact-form button[type="submit"]:hover {
            background-image: linear-gradient(bottom, #0058C4 0%, #004FAE 52%);
            background-image: -moz-linear-gradient(bottom, #0058C4 0%, #004FAE 52%);
            background-image: -webkit-linear-gradient(bottom, #0058C4 0%, #004FAE 52%);
            -webkit-transition: background 0.3s ease-in-out;
            -moz-transition: background 0.3s ease-in-out;
            transition: background-color 0.3s ease-in-out;
        }

        .contact-form button[type="submit"]:active {
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        }


#jivescribe_enquiry_form, #transcription_form {
    -moz-border-radius: 6px;
    background: #fff;
    -webkit-border-radius: 6px;
    border: 1px solid #536376;
    -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
    -moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
    padding:20px 0px 20px 22px;
    width: 450px;
    position: relative;
    display: none;
}

    #jivescribe_enquiry_form #sign_up_form, #transcription_form #sign_up_form {
        margin-top: 2px;
    }

    #jivescribe_enquiry_form label, #transcription_form label {
        display: block;
        margin-bottom: 10px;
        color: #536376;
        font-size: .9em;
    }

        #jivescribe_enquiry_form label input, #transcription_form label input{
            display: block;
            width: 90%;
            height: 28px;
            background-position: -201px 0;
            padding: 2px 8px;
            font-size: 1.2em;
            line-height: 31px;
        }


/****POP UP**********/
/* 
	author: istockphp.com
*/
#backgroundPopup { 
	z-index:1000;
	position: fixed;
	display:none;
	height:100%;
	width:100%;
	background:#000000;	
	top:0px;  
	left:0px;
}
#toPopup {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 10px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    display: none;
	font-size: 14px;
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
    z-index: 1001;
    padding:25px 45px 25px 25px;
}

div.close {
    background: url(../images/closebox.png) no-repeat scroll 0 0 transparent;
    cursor: pointer;
    float: right;
    height: 30px;
    right: -65px;
    top:-45px;
    position: relative;
    width: 30px;
}
span.ecs_tooltip {
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    height: 16px;
    opacity: 0.7;
    padding: 4px 3px 2px 5px;
    position: absolute;
    right: -62px;
    text-align: center;
    top: -51px;
    width: 93px;
}

div#popup_content {
    margin: 4px 7px;
}
.desktop {
    display:normal;
    visibility:visible;
}
#video_background {

    width:100%;
     min-height: 100%;
    height: auto;
    margin:-1% -3% -2% -3%;
    overflow:hidden;
    border:0px;
  
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media screen and (max-width: 1380px) {
    .who-we-are {
        width: 90%!important;
    }

    .container, .half-width, .jivescribe-description {
        width: 85%;
        border: 0px solid red;
    }

    .contact-half-width {
        width: 40%;
        border: 0px solid red;
    }
}

/* for 980px or less */
@media screen and (max-width: 980px) {

    .container, .half-width, .jivescribe-description{
        width: 85%;
        min-width:50px;
        border:0px solid red;
    }
    .jivescribe-description {
       margin-top:-100px!important;
       margin-bottom:100px;
    }
    #stethoscope {
        margin:auto!important;
        border:0px solid red;
        float:none;
    }

   
}
@media screen and (max-width: 1000px) {
.left-cicle {
     right:-1%;
}
.right-cicle {
     left:75%;
     top:55%;
}
    #howto {
     background: url(../images/how-to-bg.jpg) 0% 0 no-repeat fixed!important;
}
  .desktop {
        display: none!important;
        visibility:hidden;
    }
    .mobile-elements {
        display: block!important;
        visibility: visible;
        width:97%;
        height:auto;
    }

       #stethoscope {
        width: 90%;
        border: 0px solid red;
    }
    .big-stethoscope {
        width: 90%;
        height: auto;
        border: 0px solid red;
        position: relative;
        margin-bottom: 150px;
    }

    #stethoscope {
        background: none;
        height: auto;
        position: relative;
        top: 50px;
    }
  
    
    #carousel, .on-morrored {
        width: 90%;
        border: 0px solid red;
        margin: auto;
    }
    .left {
        width: auto;
        float: none;
        border: 0px solid red;
    }

    .right {
        width: auto;
        float: none;
        border: 0px solid blue;
    }
    .left-cicle, .right-cicle {
    display:none;
    }

}
/* for 700px or less */
@media screen and (max-width: 700px) {
      
 
    #slider-load {
        padding-top: 30px;
    }

    .logo {
        display: none;
    }
    .navigation {
        display: none;
    }

    .white-gutter {
        color: #ccc;
        margin: 0px 5px 0px 2px;
    }

    .jivescribe-description {
        width: 90%!important;
    }
}
@media screen and (max-width: 550px) {
    .infographs {
        display: none!important;
        visibility:hidden!important;
    }
}
/* for 480px or less */
@media screen and (max-width: 480px) {
    #who-we-are {
    background-image:none;
    background-color:#1778ED;
}
#benefits {
    background-image:none;
     background-color:#252525;
}
#howto, #howto-mobile {
     background-image:none;
     background-color:#09254A;
}
#faq {
    background-image:none;
    background-color:#DEDEDE;
}
#contact {
   background-image:none;
   background-color:#272727;
}

     .gutter, #header-static-img {
        position:fixed!important;
      
    }
    .login-link {
        float: none!important;
        position:relative;
        bottom:-20px!important;
    }

    .flex-caption {
        margin-top: 35%;
    }
    .phone-slider {
    background:none;
    width: 97%;
    height: 400px;
    padding:30px 5px;
}
    .on-morrored {
        margin-top: 10px;
    }
    .enquiry-btn {
        width: 50px;
        padding:15px 10px;

    }
}