@charset "UTF-8";

/* 

blue color - #00b2c6;
light blue: #66d1dd;

main grey - #3f3f3f;
dark grey - #292b2b;
grey -  dimgrey;
*/

/*
Raleway

Thin 100
Extra-Light 200
Light 300
Normal 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800  
Ultra-Bold 900
*/


/* =============== Body ===============*/

body {
font-family: 'Raleway', sans-serif;
font-size: 100%;	
line-height: 1.5;
color: #373a3c;
background-repeat: repeat;	
background-size: auto, cover;	
font-size: 14px;
background: #eee;
}

.wrapper{
padding: 4% 4%; 	
background: white;
border-radius: 4px;	
margin-top: 4%;	
margin-bottom: 2%;	
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2);	
}

.shadow {
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2);	
}
/* =============== Typography ===============*/

h1{
font-size: 36px;
color: #00b2c6;
font-weight: 300;	

}

h2{
font-size: 28px;
font-weight: 300;		
color: #00b2c6;
line-height: 30px;	
}

h3{
font-size: 20px;	
font-weight: 500;	

}

blockquote p {
font-size: 22px;
color: #00b2c6;
font-weight: 100;
text-align: center;
margin: 30px auto 30px auto;
max-width: 600px;	
}

.contact {
color: #00b2c6;
font-weight: 500;	
}

.contactinfo{
color:  #292b2b;
font-weight: 300;	
margin-right: 10px;	
}

.panel-title {
font-size: 18px;
}
/* =============== Logo ===============*/

nav .logo {
width: 70%;
display: block;
margin:  auto auto;	
vertical-align: middle;	
padding: 5%;
transition: all 1s ease-in-out;	
}

nav .logo:hover { transform: scale(1.1); }

.logo-main{
width: 300px;
height: auto;
display: block;
margin: 15% auto auto auto;
}

/* =============== Navigation ===============*/

nav .row{
background: -webkit-linear-gradient(#333, #2a2a2a); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#333, #2a2a2a); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#333, #2a2a2a); /* For Firefox 3.6 to 15 */
background: linear-gradient(#333, #2a2a2a); /* Standard syntax */	
}

nav .col-sm-4 {
background: #00b2c6;	
height: 100px;	

}

nav .col-sm-2 a {
font-size: 14px;	
color: white;	
display: block;
text-align: center;
text-decoration: none;		
}

nav .nav-item{
margin-top: 35px;
}


nav .col-sm-2{
height: 100px;
}

nav .col-sm-2:hover{
background: #292b2b;
border-bottom: 4px solid #00b2c6;	
color: #00b2c6;	
font-weight: 600;	
}

.current{
background: #313434;
border-bottom: 4px solid #00b2c6;	
color: #00b2c6;	
font-weight: 600;	
}

nav .fa-caret-down {
color: #00b2c6;
}

.link, .link:visited{
color: white;
font-weight: 700;	
display: inline-block;
margin: 1%;
padding: 2% 4% 2% 4%;
background: #00b2c6;	
text-decoration: none;	
border-radius: .25rem;
}



{
color: white;
font-weight: 700;	
display: inline-block;

background: #3f3f3f;
text-decoration: none;		
}


a, a:visited{
color: #00b2c6;
text-decoration: none;	
}

a:hover{
color: dimgrey;
}

/* =============== Dropdown ===============*/

.dropdown {
position: relative;	
z-index: 100;	
padding-left: 0px;
margin-left: 0px;
list-style: none;	
}

.drop-nav{
display: none;
background: #00b2c6;	
margin: 0px;
padding: 20px 0px 20px 0px;
margin-top: 30px;	
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

.dropdown:hover > .drop-nav {
display: block;	
}

.drop-nav ul, .drop-nav li{
list-style: none;
}

.drop-nav li a{
padding: 10px 0px 10px 0px;
font-weight: 300;
}

.drop-nav li a:hover{
font-weight: 700;
font-size: 14px;	
background: #66d1dd;	
padding: 10px 0px 10px 0px;
}


.dropdown ul:hover, .dropdown li:hover{
list-style: none;
}

/* =============== Jumbotron ===============*/

.home-hero {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
display: block;	
height: 600px;	
}

.jumbotron {
background-size: cover;
height: 500px;
overflow: hidden;
border-radius: 0 0 4px 4px;	
margin-bottom: 0px;	
position: relative;	
}


.leadership{
background-image: url(../hero/leadership.jpg); 
}

.about{
background-image: url(../hero/about.jpg); 
}

.analytics{
background-image: url(../hero/ananlytics.jpg); 
}

.contactus{
background-image: url(../hero/contact.jpg); 
}

.manufacturing{
background-image: url(../hero/manufacturing.jpg); 
}

.research{
background-image: url(../hero/research.jpg); 
}

.services{
background-image: url(../hero/services.jpg); 
}

.successstories{
background-image: url(../hero/successstories.jpg); 
}

.testimonials{
background-image: url(../hero/testimonials.jpg); 
}

.events{
background-image: url(../hero/events.jpg); 
}


.backgroundPattern{
background-color: rgba(0,0,0,.4);	
background-image: url(https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-diagonal-lines.png);
background-repeat: repeat;	
background-size: auto, cover;
position:absolute;
	
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.6;	

}

#video{
width: 100%;
height: 600px;
}

.jumbotron h1 {
color: #00b2c6;
text-align: center;
font-weight: 500;	
font-size: 2rem;
line-height: 2rem;	
margin-top: 15%;
margin-left: 5%;
margin-right: 5%;	
text-shadow: 0px 0px 10px rgba(0,0,0,1);		
transition: all 1s ease-in-out;	
}

.jumbotron h1:hover { transform: scale(0.9); }

.bracket-left{
height: 150px;	
margin-top: 85px;
float: right;
opacity: 0.5;	
}

.bracket-right{
height: 150px;	
margin-top: 85px;
float: left;
opacity: 0.5;	
}

.blue{
background: #00b2c6;
margin: 30px;	
padding: 20px;	
}

.blue p {
color: white;
display: block;
line-height: 18px;
font-size: 14px;	
margin-top: 0;
margin-bottom: 0;	
}



/* =============== Main ===============*/

#main .col-sm-4 h2{
color: #00b2c6;
}

#main .col-sm-4, #main .col-sm-8 {
padding: 3% 3% 3% 3%;
}

#main{
margin-top: 2rem;
margin-bottom: 2rem;	
}

.aside-icon{
width: 50%;
height: auto;
margin: auto auto;
display: block;	
}

.margin-right {
margin-right: 20%;
margin-top: 10%;	
}

.margin-left {
margin-left: 10%;
margin-top: 10%;	
}

.margin {
margin-top:5%;
margin-bottom:5%;	
}

.bracket-left-grey{
height: 150px;	
float: right;
opacity: 0.5;	
}

.bracket-right-grey{
height: 150px;	
float: left;
opacity: 0.5;	
}

/* =============== Image ===============*/

.outline{
outline: 5px white solid;
overflow: hidden;
display: block;	
}
.blue-row{
}

.blue-card{
border-right: 1px white solid;
box-sizing: border-box;	
color: #55595c;
height: 330px;
padding-top:10px;
}

.blue-card:last-child{
border: 0px white solid;
}

.blue-card h6{
color: #55595c;
margin-top:5%;  
margin-left:5%; 
margin-right: 5%;  
font-size: 14px;	 
} 

.blue-card h6:hover{
color:  #00b2c6;
} 

.blue-card p{
margin-left:5%; 
margin-right:5%; 
font-size: 12px;
letter-spacing: .5px;
color:  #00b2c6;	
}

.blue-card p:hover{
color:  #55595c;
}


/* =============== Form ===============*/

.form{
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
background-color: #fff;
background-image: none;
border: none;
border-radius: .25rem;
}

.input{
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
background-color: #f2f2f2;
background-image: none;
border: none;
border-radius: .25rem;
margin-bottom: 10px;
}



/* =============== Services ===============*/

#services .row{
background: #00b2c6;	

}

#services .row:first-child, #services .row:last-child{
height: 20px;	
}

#services .col-sm-3{
border-left: 1px solid #66d1dd;
padding: 0% 3%;
}

#services .col-sm-3:first-child{
border-left: 0px solid red;
}

#services p, #services a {
color: white;
text-align: center;
text-transform: uppercase;
font-size: 14px;
margin-top:20px;
text-decoration: none;	
}

#services .icon{
width: 60%;
padding-top: 10%;	
display: block;
vertical-align: middle;
margin:  auto;	
}

#services .grow{
transition: all 1s ease-in-out;	
}

#services .grow:hover { transform: scale(1.05); }

/* =============== Footer ===============*/

footer .row {
background: -webkit-linear-gradient(#3f3f3f, #2e2e2e); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3f3f3f, #2e2e2e); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3f3f3f, #2e2e2e); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3f3f3f, #2e2e2e); /* Standard syntax */	
}

footer .col-sm-3 {
padding: 1% 3%;
}

footer .descritpion {
font-size: 12px;
font-weight: 600;	
line-height: 18px;	
color: #00b2c6;
}

footer .descritpion1 {
font-size: 11px;
font-weight: 600;	
line-height: 18px;	
color: grey;
margin-top: 20px;	

}


footer .logo{
width: 90%;
padding-top: 20px;
transition: all 1s ease-in-out;	
}

footer .logo:hover { transform: scale(1.1); }

footer h3{
font-size: 18px;
font-weight: 400;	
color:  dimgrey;
border-bottom: 2px solid dimgrey;
padding-bottom: 20px;
margin-top: 20px;
margin-bottom: 20px;
display: block;		
}

footer h3 a{
color: #00b2c6;	
}

footer h3 a:hover{
color: #00b2c6;	
}

footer p {
color: dimgrey;
font-size: 14px;
line-height: 24px;
font-weight: 400;
}

footer a{
color: grey;
text-decoration: none;
}

footer a:hover{
color: #00b2c6;
font-weight: 600;	
text-decoration: none;
}

footer a:visited{
text-decoration: none;
}

footer a:link{
text-decoration: none;
}

footer address {
color: grey;
font-size: 14px;

}

.copyright {
background: #292b2b;
color:  dimgrey;
font-size: 14px;	
text-align: center;
padding: 15px 0px 5px 0px ;
border-radius: 0 0 4px 4px;	

}

.button {
color: #fff;

background: -webkit-linear-gradient(#00c1d7, #00b2c6); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#00c1d7, #00b2c6); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#00c1d7, #00b2c6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#00c1d7, #00b2c6); /* Standard syntax */	


border: none;
padding: 5px 30px 5px 10px;
border-radius: .25rem;
box-shadow: 0px 0px 15px rgba(29, 37, 47, 0.08);	
}

.button:hover {
color: #fff;

background: -webkit-linear-gradient(#3f3f3f, #2e2e2e); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3f3f3f, #2e2e2e); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3f3f3f, #2e2e2e); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3f3f3f, #2e2e2e); /* Standard syntax */	

border: none;
padding: 5px 30px 5px 10px;
}

.plus{
height: 12px; 
width:12px;
margin-right: 12px;	
}

/* =============== Images ===============*/

.img-container {
margin: 5px;
position: relative;	
overflow: hidden;

padding-bottom: 0px;	
line-height: 0px;	
border: 4px solid #fbfbf9;	
background: #fbfbf9;
}


.video{
position:absolute;
bottom: 10px;
text-align: center;
left: 10px;
right:10px;
display: block;	

box-shadow: 0px 0px 15px rgba(29, 37, 47, 0.08);	
height: 50px;
line-height: 50px;
color: white;
opacity: 0.8;
font-weight: 700;
	
background: -webkit-linear-gradient(#00c1d7, #00b2c6); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#00c1d7, #00b2c6); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#00c1d7, #00b2c6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#00c1d7, #00b2c6); /* Standard syntax */		
}

.video:hover {
position:absolute;
bottom: 10px;
text-align: center;
left: 10px;
right:10px;
display: block;	
	
text-decoration: none;
box-shadow: 0px 0px 15px rgba(29, 37, 47, 0.08);	
height: 50px;
line-height: 50px;
color: white;
	
background: -webkit-linear-gradient(#3f3f3f, #2e2e2e); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3f3f3f, #2e2e2e); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3f3f3f, #2e2e2e); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3f3f3f, #2e2e2e); /* Standard syntax */
}

.video:active, .video:link, .video:focus {
position:absolute;
bottom: 10px;
text-align: center;
left: 10px;
right:10px;
display: block;	
	
text-decoration: none;
box-shadow: 0px 0px 15px rgba(29, 37, 47, 0.08);	
height: 50px;
line-height: 50px;
color: white;
	

}


video{
height: auto;
width: 100%;
}
.img-responsive {
width:100%;
height: auto;
}

.img{
vertical-align: middle;
padding-bottom: 0px;	
}

.img-grow{
width: 100%;
height: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

filter: grayscale(70%);
-webkit-filter: grayscale(70%); 
}

.img-grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);

filter: grayscale(30%);
filter: gray; 
-webkit-filter: grayscale(30%);
filter: none;

transition: 1s ease;	
}

.greyscale{
filter: grayscale(50%);
-webkit-filter: grayscale(50%); 
}

/* =============== Animation ===============*/


.fade {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fade ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fade ease-in 1;
animation:fade ease-in 1;

-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1.5s;;
-moz-animation-duration:1.5s;
animation-duration:1.5s;
}


@-webkit-keyframes fade { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* =============== 5 Columns ===============*/

.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}

.col-xs-20 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-20 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-20 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-20 {
width: 20%;
float: left;
}
}

/* =============== Modal ===============*/

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
}


.modal-dialog {
	display: block;
    width: 80%;
	height: auto;
    margin: 30px auto;
}

.modal{
    background-color: #fff
}

.close{
font-size: 2rem;
font-weight: 500;	
}