/* ================================= 
  Base Element Styles
==================================== */

* {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	font-family: 'PT Sans', sans-serif;
	line-height: 1.6;
	color: #3a3a3a;
    font-size: 1.1em;
}

p {
	font-size: 1em;
	margin-bottom: 1.8em;
}
h1,
h2,
h3,
a {
	color: #4c4c4c;
}
h1,
h2,
h3,
h4 {
	margin-top: 0;
    
}

h4 {
	margin-bottom: .4em;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}




.btn-1 {
    padding: 10px 25px;
    border: 3px solid  #4c4c4c;
    background:none;
    border-radius: 7px;
    
}
.btn-1:hover {
    padding: 10px 25px;
    border: 3px solid  #4c4c4c;
    background:#4c4c4c;
    color: #fff;
    border-radius: 7px;
    Box-shadow: 0 0 7px #4c4c4c;
}
.btn-2 {
    padding: 10px 25px;
    border: 3px solid  #fff;
    color: #fff;
    background:none;
    border-radius: 7px;
    
}
.btn-2:hover {
    padding: 10px 25px;
    border: 3px solid  #cecece;
    background:#cecece;
    color: #4c4c4c;
    border-radius: 7px;
    Box-shadow: 0 0 7px #4c4c4c;
}
.btn-brochure {
    padding: 10px 25px;
    border: 3px solid  #4c4c4c;
    color: #fff;
    background: #4c4c4c;
    border-radius: 7px;
    margin-top: 20px;
    
    
}
.btn-brochure:hover {
    padding: 10px 25px;
    border: 3px solid  #fff;
    background:#fff;
    color: #4c4c4c;
    border-radius: 7px;
    Box-shadow: 0 0 7px #4c4c4c;
    
}
.btn-brochure-2 {
    padding: 10px 25px;
    border: 3px solid  #fff;
    color: #4c4c4c;
    background: #fff;
    border-radius: 7px;
    margin-top: 15px;
    
    
}
.btn-brochure-2:hover {
    padding: 10px 25px;
    border: 3px solid  #cecece;
    background:#cecece;
    color: #4c4c4c;
    border-radius: 7px;
    Box-shadow: 0 0 7px #4c4c4c;
    
}
.btn-brochure,
.btn-brochure-2 {
    margin-bottom: 40px;
}
video {
    border-radius: 7px;
    width: 100%
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cecece;
    margin: 1em 0;
    padding: 0; 
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
	font-size: 1.25em;
	margin: 0;
}
.main-nav {
	margin-top: 5px;
}

.name a,
.main-nav a {
    display: block;
    text-align: center;
    padding: 10px 15px;
}
	
.main-nav a {
    font-size: .95em;
    color: #4c4c4c;
    text-transform: uppercase;
    padding: 15px 20px
}

.main-nav a:hover {
    background: #4c4c4c;
    color: #fff;
    padding: 15px 20px;
        
}

 ul li ul.dropdown{
        width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        border-radius: 7px;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */ 
}
    ul li ul.dropdown li{
        display: block;
    }

/* ---- column styles ---- */






/* ---- Layout Containers ---- */

.main-header {
	padding-top: .5em;
	padding-bottom: 0;
    
}
.main-header {
    background: #fff;
}

.main-footer {
	text-align: center;
}

        .banner {
    padding-top: 170px;
  height: 450px;
  background: linear-gradient(#cecece, transparent 50%),
              linear-gradient(0deg, #4c4c4c, transparent),
              #4c4c4c url('../imgs/facility2.jpg') no-repeat top;
            background-attachment: fixed;
  
  background-size: cover;
        border-bottom: 7px solid #cecece;
            margin-bottom: 60px;
}


.banner-left img {
    padding: 7px;
    border: 1px solid #fff;
    border-radius: 7px;
}

.col {
	padding-right: 1em;
	padding-left: 1em;
}

.main-footer {
	background: #1a1a1a;
    color: #fff;
	padding: 2em 0;
}
video {  
   width:100%; 
   max-width:700px; 
   height:auto; 
}
.left-4 img,
    .mid-left-4 img,
    .mid-right-4 img,
    .right-4 img {
        border: 7px solid #fff;
        border-radius: 7px;
    }


/* ---- ID selectors ---- */
#content1 {padding-bottom: 120px;
           }
#content2 {
    padding: 60px 0;
    background: #cecece;
    color: #4c4c4c;
}
#content3 {
    background-color: #4c4c4c;
    padding: 60px 0;
}
#content3 img {
    border-radius: 7px;
    box-shadow: 2px 2px 4px #4c4c4c;
    border: 3px solid #fff;
}
#exec {
    padding: 60px 0;
}
#exec img {
    float: left;
    padding: 15px 15px;
    border-radius: 7px; 
    border: 1px solid #cecece;
    margin-right: 15px;
    margin-bottom: 15px;
}
#team {
    padding: 60px 0;
    background: #cecece;
}
#products {
    padding-bottom: 60px;
}
#product-cont-2 {
    padding: 60px 0;
    background: #cecece;
    color: #4c4c4c;
    
}
#product-cont-3 {
    padding: 60px 0;
    background: #fff;
    color: #4c4c4c;
}
#product-cont-4 {
    padding: 60px 0;
    background: #4c4c4c;
    color: #fff;
}
#products img,
#product-cont-3 img,
#product-cont-5 img,
#product-cont-6 img,
#product-cont-7 img,
#product-cont-9 img{
    border-radius: 7px;
    padding: 10px;
    border: 1px solid #cecece;
}
#product-cont-2 img{
    border-radius: 7px;
    padding: 10px;
    border: 1px solid #4c4c4c;
}
#product-cont-6 img {
    border-radius: 7px;
    padding: 10px;
    border: 1px solid #4c4c4c;
}
#product-cont-4 img,
#product-cont-8 img{
    border: 1px solid #fff;
    border-radius: 7px;
    padding: 10px;
}
#product-cont-5 {
    padding: 60px 0;
}
#product-cont-6 {
    padding: 60px 0;
    background: #cecece;
    color: #4c4c4c;
}

#product-cont-7 {
    padding: 60px 0;
}
#product-cont-8 {
    padding: 60px 0;
    background: #4c4c4c;
    color: #fff;
}
#product-cont-9 {
    padding: 60px 0;
}
#matrixoi {
    padding-bottom: 60px;
}
#matrixoi img {
    border-radius: 7px;
}
#matrixoi-prod {
    background: #cecece;
    padding: 60px 0;
}
#matrixcellect {
    padding-bottom: 60px;
}
#dbmpuddy {
    padding: 60px 0;
    background: #cecece;
}

#dbmcrunch {
    padding: 60px 0;
}
#h1-title {
    padding-bottom: 60px;
}
#matrixoi-prod img {
    border: 7px solid #fff;
    border-radius: 7px;
}
#sports {
    padding: 0 0 60px 0;
    
}
#sports img {
    padding: 10px;
    border-radius: 7px;
    border: 1px solid #cecece;
}
#dermis {
    padding-bottom: 60px;
}
#dermis img {
    padding: 10px;
    border-radius: 7px;
    border: 1px solid #cecece;
}
#conventional {
    padding-bottom: 60px;
}
#conventional img {
    padding: 10px;
    border: 1px solid #cecece;
    border-radius: 7px;
}


/* ---- Page Elements ---- */

.logo img {
	width: 185px;
    height: 59px;
}

.headline {
	margin-bottom: 0;
}

.icon-location {
  width: 35px;
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 2;
}
.tagline {
    font-size: 1em;
}
.center {
    text-align: center;
    margin-bottom: 60px;
}
.white {
    color: #fff;
}
.grey {
    color: #4c4c4c;
}
.caps {
    text-transform: uppercase;
}

.content-right img {
    border-radius: 7px;
    padding: 10px;
    border: 3px solid #4c4c4c;
}

.red {
    color: red;
}
.hrline {
    border-bottom: 1px solid #cecece;
}
.product-title {
    width: 100%;
}
.padding-bottom {
    padding-bottom: 50px;
}
.top-pad {
    padding-top: 10px;
}
 .padding {
        margin-top: -2.2em;
        
    }
.radius {
    border-radius: 7px;
}
    .left-2-col img,
    .middle-2-col img,
    .right-2-col img,
    #dbmpuddy img {
       border-radius: 7px;
       border: 7px solid #fff;
       
    }
.anchor {
   position: relative;
   top: -75px;
}
.anchor-matrix {
    position: relative;
    top: -150px;
}
/* zoom gallery none*/

.zoom-gallery {
    display: none;
}
.previous {
    color: red;
}

/* ================================= 
  Progress Bar
==================================== */



/* ================================= 
  Media Queries
==================================== */


@media (min-width: 769px) {

    body {
        padding-top: 147px;
    }

    .main-header {
        position: fixed;
        background: #fff;
        padding-bottom: .5em;
        box-shadow: 0 1px 4px rgba(0,0,0,.4);
        width: 100%;
        top: 0;
        z-index: 1000;
    }
    .container {
        width: 90%;
        margin: 0 auto;
    }

  /*  navigation   */

    .main-nav li {
        display: inline-block;
        padding-top: 10px;
        
        
        
    }
 

    .main-nav a {
    font-size: .95em;
    color: #4c4c4c;
    text-transform: uppercase;
        border-radius: 7px;
    
}

.main-nav a:hover {
    background: #4c4c4c;
    color: #fff;
    border-radius: 7px;
    
        
}
    ul li {
        position: relative;
    }

 ul li ul.dropdown{
        width: 300px; /* Set width of the dropdown */
        background: #fff;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        border-radius: 7px;
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */ 
        padding-top:none;
}
    ul li ul.dropdown li{
        display: block;
    }

    .tagline {
    font-size: 1.2em;
    }
    .logo {
        color: #4c4c4c;
    }
    .main-nav a {
        border: none;
    }

    .name {
           text-align: center;
           float: none;
       }
    .main-nav {
           text-align: center;
           float: none;
       }
    .padding-bottom {
    padding-bottom: 0;
}


    .banner-product {
    color: #fff;
    background: linear-gradient(#cecece, transparent 50%),
                linear-gradient(0deg, #4c4c4c, transparent), 
                #4c4c4c url('../imgs/facility2.jpg') no-repeat top;
    background-size: cover;
    background-attachment: fixed;
	padding: 3.2em 0;
	margin-bottom: 60px;
    height: 400px;
        border-bottom: 7px solid #cecece;
}
    .banner-sub {
    color: #fff;
        background: linear-gradient(#cecece, transparent 50%),
                    linear-gradient(0deg, #4c4c4c, transparent),
                    #4c4c4c url('../imgs/building2.jpg') no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        opacity: .8;
        padding: 3.2em 0;
        margin-bottom: 60px;
        height: 400px;
        border-bottom: 7px solid #cecece;
}
  .banner-reg {
    padding-top: 170px;
  height: 400px;
  background: #4c4c4c url('../imgs/RODAC 2.jpg') no-repeat center;
  
  background-size: cover;
      
        border-bottom: 7px solid #cecece;
            margin-bottom: 60px;
}  
    .zoom-gallery {
        display: inline-block;
    }
    .btn-brochure {
    
    margin-left: 5px;
    
}
    .btn-brochure-2 {
    
    margin-left: 5px;;
    
    
}
    
    /*--------- Floats -----------*/
      .col {
        float: left;
    }
    #product-cont-2 .col {
        float: right;
    }
    #product-cont-4 .col {
        float: right;
    }
    #product-cont-6 .col {
        float: right;
    }

   
     .content-left {width: 50%;
    }
    .content-right {width: 50%;
    }
    .banner-left {
        width: 70%;
    }
    .banner-right {
        width: 30%;
    }
    .product-left,
    .product-middle-left,
    .product-middle-right,
    .product-right {
        width: 50%;
    }
    .left,
    .right {
        width: 50%;
    }
    .left-2 {
        width: 70%;
    }
    .right-2 {
        width: 30%;
    }
    .row {
        width: 25%;
    }
     .left-2-col,
    .middle-2-col,
    .right-2-col {
        width: 33.33%;
        
    }
    .left-2-dbm,
    .right-2-dbm {
        width: 50%;
    }
    .left-col-2,
    .middle-col-2,
    .right-col-2 {
        width: 50%;
    }
    .left-4,
    .mid-left-4,
    .mid-right-4,
    .right-4 {
        width: 50%;
    }
    .about-right {
        padding-top: 47px;
    }
    .left-2-con,
    .right-2-con {
        width: 50%;
        
    }



/* ---- Float clearfix ---- */

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

}



@media (min-width: 1025px) {
    
     body {
        padding-top: 86px;
    }
	
    .container {
        width: 80%;
        max-width: 1150px;
    }
    .left-4,
    .mid-left-4,
    .mid-right-4,
    .right-4 {
        width: 33.33%;
    }
    .left-2-col,
    .middle-2-col,
    .right-2-col {
        width: 33.33%;
        
    }
    .padding {
        margin-top: -2.2em;
        
    }
    
    .name
     {
        float: left;
    }

    .main-nav {
        float: right;
    }
    .row {
        width: 25%;
    }
    
}