@charset "utf-8";
/* GRAB INNOVATIONAS AND SERVICES */

/*  STRUCTURE  */

body{
	margin: 0 auto;
	background-color: #ffffff;
	background-image: url(images/bg_snippet.jpg);
	background-repeat: repeat-x;
}

#all, nav, header, #content, #col1, #col2, #col3, #logo{
	margin: 0;
	padding: 0;
}

#all{
	margin: 0px auto 0px auto;
	width: 1050px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	}
	
nav{
	width: 1050px;
	height: 35px;
	background-color: #00416b;
	color: #ffffff;
}

header{
	width: 1050px;
	height: 160px;
}

#content{
	width: 1050px;
	padding-top: 30px;
}

#col1, #col2, #col3{
	width: 350px;
	float: left;
}

.hol{
	width: 100%;
	margin: 20px 0px 20px 0px;
	padding: 0px 100px 50px 100px;
	background-color: #ffffff;
	border: solid 5px #666666;
	clear: both;
}


.colhol{  			/*  holiday page 2018, 2021  */
	margin-bottom: 20px;
	width: 430	px;
	float: left;
	} 
	
.boxhol{			/*  holiday page 2018, 2021  */
	width: 100%;
	border: solid 5px #febd21;
	background-color: #ffffff;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

#blog{
	width: 600px;
	padding: 50px;
}

#sidebar{
	margin-top: 30px;
	width: 250px;
	padding: 24px;
	float: right;
}

.navigation{
	width: 600px;
	padding: 50px;
}

.box_blue{
	width: 310px;
	border: solid 5px #014c8d;
	background-color: #ffffff;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

.box_grey{
	width: 310px;
	border: solid 5px #bdbdbd;
	background-color: #ffffff;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

.box_grey_menu{
	width: 310px;
	border: solid 5px #bdbdbd;
	background-color: #eee;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

.box_yellow{
	width: 310px;
	border: solid 5px #febd21;
	background-color: #ffffff;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

#contact{
	width: 840px;
	margin: 20px 0px 20px 0px;
	padding: 0px 100px 50px 100px;
	background-color: #ffffff;
	border: solid 5px #666666;
	clear: both;
}

#contact_blue{
	width: 840px;
	margin: 20px 0px 20px 0px;
	padding: 0px 100px 50px 100px;
	background-color: #ffffff;
	border: solid 5px #014c8d;
}

#popup{
	width: 500px;
	height: 400px;
	padding: 20px;
	background-color: #FFC;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}


footer{
	width: 100%;
	padding: 20px 40px 80px 40px;
	background-color: #ddd;
	font-style: italic;
	font-size: 12px;
	clear: both;
}


/*   HEADINGS  */

h1{   /*  blue  */
	font-size: 24px;
	color: #014c8d;
	text-align: center;
}

h2{    /*  grey  */
	font-size: 24px;
	color: #bdbdbd;
	text-align: center;
}

h3{    /*  yellow  */
	font-size: 26px;
	color: #febd21;
	text-align: center;
}

h4{   /*  emphasis  */
	font-size: 18px;
	color: #333;
	text-decoration: none;
}

h5{
	font-size: 14px;
	font-style: italic;
	color: #444;
	text-align: center;
}

h6{   /*  emphasis, centered  */
	font-size: 18px;
	color: #333;
	text-decoration: none;
	text-align: center;
}

h7{   /*   blue   */
	font-size: 20px;
	color: #014c8d;
	text-decoration: none;
}

.indent5{  /* black text for first box  */
	font-size: 20px;
	color: #000;
	padding: 5px;
}

.indent20{   /* blue text for first box  */
	font-size: 20px;
	color: #014c8d;
	padding: 5px 5px 5px 20px;
}

.indent30{   /* blue text for first box  */
	font-size: 20px;
	color: #000;
	padding: 5px 5px 5px 35px;
}

ul a h4{
	text-decoration: none;
}

ul a:hover h4{
	text-decoration: none;
	color: #F90;
}


/*  INLINE  */

.indent{
	text-indent: 16px;
}

#all a{
	text-decoration: none;
	font-style: oblique;
}

#all a:hover{
	text-decoration: none;
	color: #F90;
	font-style: oblique;
}

.header{
	font-size: 20px;
	font-weight: 400;
	color: #333;
	text-align: right;
	padding-right: 40px;
}

.header-page{
	font-size: 48px;
	font-weight: 500;
	color: #014c8d;
	text-align: right;
	padding-right: 40px;
}

.header-page2{
	font-size: 36px;
	font-weight: 500;
	color: #014c8d;
	text-align: right;
	padding-right: 40px;
}

.text-heading{
	font-size: 20px;
	color: #014c8d;
	text-decoration: none;
	line-height: 1.2;
}

#content a{
	color: #014c8d;
}

.clear{
	clear: both;
}

.small{
	color: #039;
	float: right;
	padding-top: 40px;
}

#signature{
	color: #0753c4;
	font-style: italic;
	font-family: Tahoma, Geneva, sans-serif;
}

.small_note{
	font-size: 10px;
}

.emph{
	color: #014c8d;
	font-size: 18px;
}

.emph a:hover{
	text-decoration: none;
	color: #F90;
	font-style: oblique;
}

dialog {  
    width: 150px;  
    background:#e8e8e8;
    border: 1px solid #dadada;
    font-family:sans-serif;
    padding: 5px 10px 20px 20px;
} 

.error {
	font-size: 12px;
	font-style: italic;
	color: #C00;
}

/*   IMAGES   */

#logo{
	width: 300px;
	height: 150px;
	padding: 5px;
	float: left;
	
}

.blogo{
	width: 200px;
	height: 200px;
}

#techimage{   /*  do not change size  */
	width: 280px;
	height: 300px;
	border: none;
}

#roger{
	width: 130px;
	height: 150px;
	padding: 5px;
	float: right;
}

.img1{
	width: 200px;
	height: 300px;
	padding: 5px;
	float: right;
}


.img2{
	width: 260px;
	height: 100px;
	padding: 10px;
}

.img3{
	width: 200px;
	height: 100px;
	padding: 10px;
}

.img4{
	width: 400px;
	height: 350px;
	padding: 10px;
	float:right;
}

.img5{
	width: 150px;
	height: 150px;
	float: right;
	padding: 10px;
}

.img6{
	width: 300px;
	height: 200px;
	padding: 20px 4px 20px 4px;
}

.img6:hover{
	-webkit-transform: scale(2.0);
  -moz-transform: scale(2.0);
  -o-transform: scale(2.0);
  transform: scale(2.0);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;

}

.img7{
	width: 240px;
	height: 220px;
	padding: 10px 10px 10px 30px;
}

.img8{
	width: 165px;
	height: 165px;
	border: none;
	padding: 2px;
	float: right;
}

#small_logo{
	float: right;
	padding: 10px;
}

#linkedin{
	width: 60px;
	height: 46px;
	padding: 10px;
}

#ties{
	width: 700px; 
	height: 450px;
	padding: 10px 60px 10px 60px;
}

#mfglogo{
	width: 120px;
	height: 120px;
	padding: 10px;
}

#nspelogo{
	width: 290px;
	height: 85px;
}

#button_pic{
	width: 120px;
	height: 75px;
	float: right;
}



/*  NAVIGATION  */

nav ul{
 	list-style-type: none;
 	margin: 0;
 	padding: 5px 40px 0px 50px;
	float: right;
 }
 
nav ul li{
 	display: inline;
	color: #fff;
	float: left;
	position: relative;
 } 
 
nav a{
	color: #fff;
}
 
nav ul li a{
	margin: 0px 20px 0px 20px;
	font-size: 16px;
	color: #fff;
	font-weight: 300;
	text-decoration: none;
 }
 
nav ul li a:hover{
	color: #F90;
	font-size: 18px;
}

nav ul ul a{
	display: block;
	font-size: 16px;
	color: #014c8d;
	font-weight: 300;
	text-decoration: none;
}
	
nav ul ul{
	background: #eeeeee;
	width: 270px;
	text-align: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 10px;
	position: absolute;
	left: -9999px;
}
	

nav ul ul li{
	padding: 7px;
	float: none;
}

nav ul li:hover ul{
	left: 0;
}

nav ul ul li:hover a{
	color: #f90;
}


footer ul{
	list-style-type: none;
 	margin: 0;
 	padding: 0;
}


footer ul li {
 	display: inline;
	float: left;
}

footer ul li a {
 	display: block;
	margin: 0px 30px 0px 30px;
	text-decoration: none;
	color: #444;
}

footer ul li ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer ul li ul li{
	display: list-item;
	float: none;
	text-indent: 30px;
	}
	
footer ul li ul li ul li{
	display: list-item;
	float: none;
	text-indent: 60px;
	}
	
footer ul li a:hover{
	color: #9d8d72;
	font-size: 12px;
}

#button a{   /*  BUTTON  */
	display: block;
	width: 200px;
	margin-right: 20px;
	text-decoration: none;
	border: 1px solid #bdbdbd;
	text-align: left;
	color: #333;
	font-size: 18px;
	padding: 12px 12px 12px 30px;
	position: relative;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-image: -moz-linear-gradient(#bdbdbd, #efefef);
	background-image: linear-gradient(#bdbdbd, #efefef);
}

#button{   /*  BUTTON  */
	display: block;
	width: 200px;
	margin-right: 20px;
	text-decoration: none;
	border: 1px solid #bdbdbd;
	text-align: center;
	color: #333;
	font-size: 18px;
	padding: 12px 12px 12px 12px;
	position: relative;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-image: -moz-linear-gradient(#bdbdbd, #efefef);
	background-image: linear-gradient(#bdbdbd, #efefef);
}


#button_hol a{   /*  holiday BUTTON  */
	display: block;
	width: 250px;
	margin-right: 20px;
	text-decoration: none;
	border: 1px solid #febd21;
	text-align: left;
	color: #333;
	font-size: 18px;
	padding: 12px 12px 12px 30px;
	position: relative;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-image: -moz-linear-gradient(#ffce59, #ffe19a);
	background-image: linear-gradient(#ffce59, #ffe19a);
}

#button_paper a{   /*  holiday BUTTON  */
	display: block;
	width: 30px;
	margin-right: 20px;
	text-decoration: none;
	border: 1px solid #febd21;
	text-align: left;
	color: #333;
	font-size: 18px;
	padding: 12px 12px 12px 30px;
	position: relative;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-image: -moz-linear-gradient(#ffce59, #ffe19a);
	background-image: linear-gradient(#ffce59, #ffe19a);
}




/*  FORMS  */

.label {
	float: left;
	text-align: right;
	margin-right: 10px;
	width: 200px;
	font-style: italic;
	font-size: 14px;
	}
	
.label2 {
	float: left;
	text-align: left;
	margin-right: 10px;
	width: 200px;
	font-style: italic;
	font-size: 14px;
	}

.formbox{
	background-color: #FFC;
	border: solid 2px #febd21;
	
}

/*  ALT BOX  */

#alt_box{
	width: 310px;
	border: solid 5px #bdbdbd;
	background-color: #ffffff;
	margin: 5px;
	padding: 5px 10px 20px 10px;
}

.center{
	text-align: center;
}

.alt_h1{    /*  blue re logo  */
	color: #0079c2;
	font-size: 24px;
	text-align: left;
	line-height: 0.6;
}
	
.alt_h2{       /*  black  */
	color: #000;
	font-size: 20px;
	text-align: left;
	line-height: 0.6;
}

.alt_h3{    /*  grey  */
	font-size: 24px;
	color: #bdbdbd;
	text-align: center;
	line-height: 0.9;
}

.alt_h4{    /*  red  */
	font-size: 20px;
	color: #f40009;
	text-align: center;
	line-height: 0.9;
}

#safetylogo{
	width: 300px; 
	height: 76px;
	pading: 5px;
}
	
/*   Holiday Slide show   */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 700px;
  position: relative;
  margin: auto;
  padding-top: 15px;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}  */

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}