/**** Einar media queries here *****/
/***
If the browser
if min=1500
.parent .item 25% and only show 4 boxes

If min=800
.parent .item 50% and only show 2 boxes


If min=360
.parent .item 100% and only show one box


@media (min-width: 1500px) {

}

***/
/**** end media queries  *****/


a:link {color: #008cff;}

a:visited {color: #008cff;}

a:hover {color:red;}

body {
	font-family: 'Montserrat', sans-serif;
	display: block;
	margin: 8px;
	color: #008cff;

	/*** img/Nabarima-4 071.jpg   img/Flange+Mounted+Balanced+Head+Fairlead.png

	  background-image: url('img/Flange+Mounted+Balanced+Head+Fairlead.png');
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-position: 30% 20%;
***/

}

#sb_font {
	font-family: "Times New Roman", Times, serif;
}

.wrapper {
	margin: 5px;
	border-color: #008cff;
	border-style: solid;
	border-width: 10px;
	padding:	10px;
}

img {
	max-width:		100%;
	height: auto;
	width: auto;
}

header #logo {
	display: inline-block;
}



header .image {

	display: inline-block;
	width: 100%;
	margin-left: auto ;
  margin-right: auto ;
}



#phone {
	float: right;
	color: #008cff;
}

table, th, td {
   	border: 1px solid #008cff;
	text-align: center;
}


h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	line-height: .9em;
	text-transform: none;
	letter-spacing: 0px;
	font-weight: 100;
	font-style: normal;

	color: #008cff;
/*** Hide the float
	float:	left;
***/
	word-wrap: wrap;
}

h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	line-height: 1.1em;
	text-transform: none;
	letter-spacing: 1px;

	color: #008cff;
	word-wrap: wrap;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	color: #008cff;
	word-wrap: wrap;
}

#slogan {
	color: #008cff;
	text-align: center;
}

p {
	font-weight:	bold;
}

li {
	font-weight:	bold;
}



/*---- HIDE Start Navigation --

nav {
	float: 	right;
	padding:		25px 20px 0 0; /*-- top, right, bottom, left
}
#menu-icon {
	display:		hidden;
	width:		40px;
	height:		40px;
	background:		url(img/nav.png) center;
}
a:hover#menu-icon {
	border-radius: 	4px 4px 0 0;
}
ul {
	list-style-type: 	none;
}
nav ul li {
	font-family: 'Alegreya	Sans' , sans-serif;
	font-size: 	150%;
	display: 	inline-block;
	float: 	left;
	padding: 10px;
}
nav ul li a {
	color: #f5f5f5;
	text-decoration: 	none;
}
nav ul li a:hover {
	color:		#c3d7df;
}
.current {
		color:		#c3d7df;
}
-- END NAVIGATION STYLE --*/


p {
	font-family: 'Montserrat', sans-serif;
	color: #008cff;
}



.nav {
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	font-size: 160%;
	font-weight: bold;
	color: #008cff;
}




footer {
	font-family: 'Montserrat', sans-serif;
	font-size: 70%;
	text-align: 	center;
}


.about	{
	font-family: 'Montserrat', sans-serif;
	width: 70%;
	color: #008cff;
	margin-left: auto ;
  margin-right: auto ;
	padding: 10px;
	border-style: none;
	border-color: color: #008cff;
}




/****** main text info here ******/

.parent {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-left: auto ;
  margin-right: auto ;
}


/* small screens. */
@media only screen and (max-width: 800px) {
		.parent {
			flex-direction: column;
		}
		.parent .item {
		/* hide
		width: 25%;
		*/
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: color: #008cff;
	}




		.parent .item_c {
		/* hide
		width: 25%;
		*/
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: color: #008cff;
		text-align: center;
	}
		.parent .item_2 {
		/* hide
		width: 25%;
		*/
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: color: #008cff;
	}

		.parent .item_2b {
		/* hide
		width: 25%;
		*/
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: color: #ffffff;
	}

	.parent .item_2c {
	/* hide
	width: 25%;
	*/
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: color: #008cff;
	text-align: center;
}

	.parent .item_3 {
	/* hide
	width: 25%;
	*/
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: color: #008cff;
}


	.parent .item_3c {
	/* hide
	width: 25%;
	*/
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: color: #008cff;
	text-align: center;
}




.about	{
	width: 100%;
	/* hide
	color: #008cff;
	*/
	color: #ff0000;
	margin-left: auto ;
  margin-right: auto ;
	padding: 10px;
	border-style: none;
	border-color: color: #008cff;
}



}




/* large screens
@media only screen and (min-width: 901px) {
	.parent {
		flex-direction: row;
	}
}
*/

/* large screens */
@media only screen and (min-width: 801px) {
	.parent {
		display: flex;
		flex-wrap: wrap;

	}
	.parent .item {
		/* hide

		width:	300px;
		height: auto;
		width: auto;
		*/
		width: 17%;
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: #008cff;
	}

	.parent .item_c {
		/* hide

		width:	300px;
		height: auto;
		width: auto;
		*/
		width: 21%;
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: #008cff;
		text-align: center;
	}
		.parent .item_2 {
		/* hide

		width:	300px;
		height: auto;
		width: auto;
		*/
		width: 46%;
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: #008cff;
	}

		.parent .item_2b {
		/* hide

		width:	300px;
		height: auto;
		width: auto;
		*/
		width: 46%;
		color: #008cff;
		margin: 5px;
		padding: 10px;
		border-style: solid;
		border-color: #ffffff;
	}




	.parent .item_2c {
	/* hide
THIS IS THE SAME AS ITEM_2 BUT IT CENTERS THE CONTENTS.
	width:	300px;
	height: auto;
	width: auto;
	*/
	width: 46%;
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: #008cff;
	text-align: center;
}


	.parent .item_3 {
	/* hide

	width:	300px;
	height: auto;
	width: auto;
	*/
	width: 100%;
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: #008cff;
}

	.parent .item_3c {
	/* hide
THIS IS THE SAME AS ITEM_3 BUT IT CENTERS THE CONTENTS.
	width:	300px;
	height: auto;
	width: auto;
	*/
	width: 100%;
	color: #008cff;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-color: #008cff;
	text-align: center;
}

}

/* Make a place for a big background image in the header
.bigTime {

width: 100%;
color: #008cff;
margin: 5px;
padding: 10px;
border-style: solid;
border-color: color: black;
text-align: center;
}
 END of Make a place for a big background image in the header */


/****** END main text info  ******/



/**** flex-direction ****/

#logo {
	text-align: center;
/*** 	display: inline-block;  ***/
	width: 100%;
	margin-left: auto ;
  	margin-right: auto ;
  background-image: url("../img/stockvault-oil-platform133982b.jpg");
  /*** OTHER IMAGES HERE
bg_terminal_1700  
bg_sunset2_1700
  bg_ocean1_1700
  bg_terminal_1700
  ****/
  background-repeat: no-repeat;
  background-position: center;


}



/**** Not used
*****************************
.example-direction .parent {
  display: flex;
  flex-direction: row-reverse;
}

.example-direction .item {
  width: 50px;
}
*****************************
***************/

/**** Drop Down Menu
**********************/

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
		color: #008cff;
}

.dropdown:hover .dropdown-content {
    display: block;
		color: #008cff;
}

/**** End Drop Down Menu
**********************/
/**** SLIDESHOW HERE
**********************/

#slideshow {
  margin: 80px auto;
  position: relative;
  width: 250px;
  height: 400px;
  padding: 10px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0);
/**********
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
**********/
}

#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

/**** End SLIDESHOW
**********************/