@charset "UTF-8";
/* CSS Document */
/* Tom Hunter Photography © */


html {
  scroll-behavior: smooth;
}
body {
	height: 100%;
	width: 100%;
	margin: 0;
    padding: 0;
	font-family: CenturyGothic;
	-webkit-text-size-adjust: none;
    text-size-adjust: none;
	font-weight: normal;
	overflow-x: hidden;
	background-image: url('art/blkwhtstrpesBlur_10op.jpg'); /* Replace with your actual path */
    background-position: center center; /* Centers the image */
	background-repeat: repeat; /* Repeats the stripe horizontally */
    background-color: #ffffff; /* Optional: backup color white, instead of black */
}

header {
	margin: 0;
	width: 100%;
    padding-top: 15px;
    padding-bottom: 30px;
	background-color: #222; /* Use backup color black, instead of white or nothing */

}
.headertitle {
font-size: 35px;
font-weight: bold;
line-height: 1.7;
}
.headerbiz {
font-size: 20px;
}
.indexbanner {
	width: 80%;
    margin: auto;
}
@media (max-width: 900px)  {
 
  .indexbanner{
    width: 100%;
    margin: auto;
  }      
}

nav {
	margin: 0;
	width: 100%;
	min-height:15px;
	float: left;
	border-top-style: solid;
	border-top-color: #CCC;
	z-index: 10;
	background-color: #FFF;
	box-shadow: inset  0  3px 6px -5px rgba(0,0,0,0.3),
                inset  0 -3px 6px -5px rgba(0,0,0,0.3);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DADADA;
}
nav-respon {
	margin: 0;
	width: 100%;
	float: left;
	z-index: 10;
	box-shadow:         inset  0  3px 6px -5px rgba(0,0,0,0.3),
                        inset  0 -3px 6px -5px rgba(0,0,0,0.3);
	background-color: #222;
}
nav-lower{
	margin: 0;
	width: 100%;
	min-height:100px;
	z-index: 6;
	padding-bottom: 35px;
	float: left;
	background-color: #FFF;
}

section-hero {
	width: 100%;
	min-height:100px;
	float: left;
	background-color: #fff;
	margin-bottom: -1px;
}
section-con {
	width: 100%;
	min-height:100px;
	float: left;
	background-color: #fff;
	margin-bottom: -1px;
}
footer {
	margin: 0;
	width: 100%;
	float: left;
	z-index: 6;
	padding-top: 30px;
	padding-bottom: 60px;
    background-color: #222;
}
section-main {
	margin: 0;
	float: left;
	color: #444;
	z-index: 7;
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
}
/* THE CONTAINER (class-element) is located 
is the StickySideBar.CSS*/


/* 4. Main Content Component - Left Side*/
/* 2. Clean up the Main Content styles */
.main-content {
  width: 100%;           /* Fills up its assigned grid track automatically */
  margin: 0;             /* Remove the auto margins here; the container handles it now */
  /* Remove max-width from here so the grid controls the sizing perfectly */
}

.content-placeholder {
  height: 200px; 
  background: #eaeaea; 
  margin-top: 20px; 
  padding: 20px;
}

#header {
    margin: 0;
	text-align: center;
	width: 100%;
}
#nav {
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	z-index: 11;
	width: 650px;
}
#p7TM3_1 {
	text-align: center;
}

#slidecontain {
	margin-right: auto;
	margin-left: auto;
    width: 100%;
}
#videoinfo {
	margin: 0;
	z-index:9999;
	color: #555;
    background-color: #f8f8f8;
	text-align: center;
	padding-top: 3px;
    padding-bottom: 3px;
	width: 100%;
}

#portname {
	text-align: center;
	color: #999;
	width: 100%;
	margin: 0%;

}

#bacontainer {
	position: relative;
	min-height:50px;
	font-size: 14px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
#content {
	margin: 0;
	min-width: 350px;
	min-height:200px;
	float: left;
	padding-left: 30px;
	padding-top: 80px;
	padding-right: 30px;
	padding-bottom: 30px;
	background-color: #FFF;
}
#content5 {
	margin: 0;
	width: 350px;
	min-height:200px;
	float: left;
	padding-left: 30px;
	padding-top: 80px;
	padding-right: 30px;
	padding-bottom: 30px;
	background-color: #FFF;
}
#contentab {
	width: 710px;
	min-height:200px;
	margin-left: 30px;
	margin-bottom: 40px;
	padding-top: 80px;
}
#bacontentab {
	width: 100%;
	min-height:200px;
	margin-bottom: 40px;
	padding-top: 80px;
	margin-right: auto;
	margin-left: auto;
}
#indletter1 {
	margin-right: auto;
	margin-left: auto;
	max-width:700px;
	min-width:400px;
	position: relative;
	font-size: 14px;
	text-align: left;
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 5px;
	color: #444;
	font-weight: normal;
}
#indletter2 {
	margin-right: auto;
	margin-left: auto;
	max-width:500px;
	min-width:500px;
	position: relative;
	font-size: 14px;
	text-align: left;
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 5px;
	color: #444;
	font-weight: normal;
}
#pricecontain {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 50px;
}
#pricecontain2 {
	width: 67%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 30px;
	padding-left: 30px;
}
#pricecol {
	margin: 0;
	clear: none;
	vertical-align: top;
	display: inline-block;
	padding-top: 80px;
	padding-bottom: 30px;
	padding-right: 30px;
	padding-left: 30px;
	color: #444;
}
#pricelowcon {
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	color: #444;
	background-color: #FFF;
}
/* NAVAGATION SQUARES */
#lowernavcon{
	max-width: 800px;
	min-height:100px;
	z-index: 7;
	margin-right: auto;
	margin-left: auto;
}

#squarenav{
	width: 200px;
	z-index: 10;
	margin: 20px;
	display: inline-block;
}
#squaretext{
	font-size: 18px;
	width: 100%;
	z-index: 11;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}
#squareimage{
	z-index: 11;
	box-shadow: 7px 7px 10px rgba(0,0,0,0.5);
	background-color: #444;
}
#squarepano{
	margin: 0;
	width: 250px;
	z-index: 10;
}

#footer {
	position: relative;
	margin-left: auto;
    margin-right: auto;
	font-size: 12px;
	text-align: left;
	color: #f8f8f8;
}