html {
 background-color:#fff;
  padding: 0;
  margin: 0;
scroll-behavior: smooth;  
scroll-margin-top: 40px;
}

body{
  font-family: 'Noto Sans', sans-serif;
  font-size: 18px;
  font-weight:normal;
  color:#000000;  
}

* {
  box-sizing: border-box;
}


.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

#topBackground {
width:100%;
height:auto;
margin:auto;
padding:35% 20px;
/*min-height:300px;*/
	background-image:url('images/ROYAL-HIGHLIGHT_JANE-ROUNDT.jpg');
	background-position:center;
	background-repeat:no-repeat;
  	background-size:cover;
	object-fit: contain;
border-top:10px solid black;	
border-bottom:10px solid black;	
} 

#topBackground h1{
	color:#ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	text-align:center;
	font-size:26px;
}

#topBackground h1 span {
	color:#ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	text-align:center;
	font-size:24px;
	font-weight:normal;
	line-height:1.25;
	padding:0px 15px;
	font-style:italic
}


.headerBackground {
	width:100%;
	display:block;
	margin:auto;
 	background-image:url('images/topBackground.jpg');
 	background-position:top right;
	background-repeat:no-repeat;
	background-size:cover;
	/*max-height:327px;*/
}


#navBackground {
	margin-top:0px;
  padding:10px;
}

.leftSpacer{
display:none;
}

.navContainer {
 width:100%;
}


.colBackground h1 {
text-align: center; background-color:rgba(0,0,0,0.80); 
padding:10px 5px; 
border-top:1px solid #9B5934; 
border-bottom:1px solid #9B5934;  
font-family: 'Raleway','Roboto', sans-serif;
  color:#0342AB;
  font-size: 25px;
}

h1{
  font-family: 'Raleway','Roboto', sans-serif;
  /*text-transform:uppercase;*/
  color:#0342AB;
  font-size: 25px;
  text-align:center;
}

h2{
  font-family: 'Raleway','Roboto', sans-serif;
  font-weight:700;
  color:#0342AB;
  font-size: 20px;
}

h3{
  font-family: 'Raleway','Roboto', sans-serif;
  font-weight:700;
  color:#fff;
  font-size: 22px;
}


a:link   {color: #0342AB; }
a:visited {color:#0342AB; text-decoration:none; }
a:active  {color:#0342AB; text-decoration:none; }
a:hover   {color:#6192E3; text-decoration: none; }

a:link.footer   {color: #0342AB; }
a:visited.footer {color:#0342AB; text-decoration:none; }
a:active.footer  {color:#0342AB; text-decoration:none; }
a:hover.footer   {color:#6192E3; text-decoration: none; }


a:link.nav    {color: #FFFFFF; text-decoration: none; font-family: 'Raleway', Arial, serif; font-size: 20px; }
a:visited.nav  {color:#FFFFFF; text-decoration:none; font-family: 'Raleway', Arial, serif; font-size: 20px; }
a:active.nav   {color:#FFFFFF; text-decoration:none; font-family: 'Raleway', Arial, serif; font-size: 20px; }
a:hover.nav    {color:#6192E3; text-decoration: none; font-family: 'Raleway', Arial, serif; font-size: 20px; }


a:link.sm    {color: #6192E3; text-decoration: none; font-family: Arial, serif; font-size: 8pt; }
a:visited.sm  {color:#6192E3; text-decoration:none; font-family: Arial, serif; font-size: 8pt; }
a:active.sm   {color:#6192E3; text-decoration:none; font-family: Arial, serif; font-size: 8pt; }
a:hover.sm    {color:#ffffff; text-decoration: none;	font-family: Arial, serif; font-size: 8pt;}


a:link.header    {color: #DEB76C; text-decoration: none; }
a:visited.header  {color:#DEB76C; text-decoration:none; }
a:active.header   {color:#DEB76C; text-decoration:none; }
a:hover.header    {color:#ffffff; text-decoration: none; }



section{
  padding-top:50px;
  padding-bottom:50px;
}


.mainContent{
	display:block;
	margin:auto;
	max-width:1300px;
	padding:30px;
}

hr{
	border:1px solid #9B5934;
}


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-left:auto;
	margin-right:auto;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

a:link.btn {
    /*display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;*/
    border: 1px solid #CCB066;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 2px;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
    background:#0342AB;
    color:#ffffff!important;
    font-weight:bold;
    word-wrap: break-word!important;
    overflow-wrap: break-word!important;
    font-family: 'Muli', sans-serif;
    text-decoration:none!important;	
}

a:hover.btn {
	border: 1px solid #CCB066;
	background-color:#804D09;
    color:#ffffff!important;
}

a:visited.btn {
    border: 1px solid #CCB066;
    color:#ffffff!important;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 2px solid #fff;
	background:#02317E;
    padding: 10px 16px;
    font-size: 20px;
    border-radius: 10px;
    color:#fff;
    font-family: 'Noto Sans', sans-serif;
    text-decoration:none!important;
}

.btn:hover{
  background-color:#000000;
  color:#ffffff;
}


/* Blog Button Container*/
.button-container {
	display:block;
	margin:auto;
	text-align:center;
}
.button-container input {
    display: inline;
    vertical-align: middle;
    margin: 0px 5px 10px 0px;
}
.button-container form, .button-container form div {
    display: inline;
}


.logo {
z-index:1000;
display:block;
margin:auto;
}


/* The Magic Float Center Code */
.float_center {
  float: right!important;

  position: relative!important;
  left: -50%!important; /* or right 50% */
  text-align: left!important;
}
.float_center > .child {
  position: relative!important;
  left: 50%!important;
}


/* Back to Top  */

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(97,146,227, 0.9);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    text-align:center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index:1000;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 0px;
    top: 10px;
    font-size: 30px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 2px;
}

/* end back to top  */

#stick{
	display:block;
}

.navbar-fixed-top {
  position: -webkit-sticky;
  position: -moz-sticky;
  position:-o-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
transition: height 0.5s;
}



#headerSlides {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
}

h2{
  font-family: 'Raleway','Roboto', sans-serif;
  font-weight:bold;
  color:#CDBBA4;
  font-size: 20px;
	/*padding:10px;
	background-image: url('images/footer2.jpg');	
 	margin-bottom:20px; */ 
}

.iconContainer {
/*background: url(images/metalroofs.jpg);*/
background-position:center;
transition: all 0.5s ease;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
	width:100%;
	display:block;
	margin:5px;
	padding:1px 0px 0px 0px;
}


.footercolumn{
	width:100%;
	padding:5px;
	text-align:center;
}

.blog {
	font-family: Arial, serif;
	font-size:14pt!important;
}

.blogItem{
	width:100%;
	padding:10px;
}

.blogItem img {
	width:100%;
	max-height:300px;
	overflow:hidden;
	object-fit: cover;
	top: 0;
    left: 0;
    border: 10px solid transparent;
    -webkit-border-image: url('images/border.png') 10 10 stretch;
   padding:2px;
   margin:5px;
   margin-bottom:20px;
   background:rgba(0,0,0,0.80);

}

.blogItem img:hover{
background-position: center;
     -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1); 
    transition: all 0.5s ease;
}


.blogItem h2 {
	font-family: Arial, serif;
	font-size:16pt;
	font-weight:bold;
	color:#0342AB;
	padding:0px;
	/*color:rgba(77,105,56,1);*/
}
.blogItem smallfont{
	font-size:11pt;
}

.author {
	color:#0342AB;
	font-size:16px;
}

.noImg {
	display:none;
}

@media only screen and (min-width: 600px) {
h2{
  font-size: 25px;
}
.iconContainer {
	width:48%;
	display:block;
	float:left;
	margin:.5%;
	padding:1px 0px 0px 0px;
}

.footercolumn {
	width:33%;
	float:left;
	padding:5px;
	text-align:center;
}
.footercolumn p{
	font-size:14px!important;	
}
.blogItem{
	width:48%;
	margin:0.5%;
	padding:10px;
	float:left;
}
.noImg {
	display:block;
	width:100%;
	height:250px;
	background-color:rgba(0,0,0,0.05);
}
}

@media only screen and (min-width: 800px) {

#topBackground {
padding:12% 10px;
/*min-height:300px;*/
	background-image:url('images/cuttingpic.jpg');
	background-position:center;
	background-repeat:no-repeat;
  	background-size:cover;
	object-fit: contain;
} 

#topBackground h1{
	font-size:28px;
}

#topBackground h1 span {
	font-size:26px;
}

#topBackground p{
	font-size:20px;
}

.iconContainer {
	width:24%;
	display:block;
	float:left;
	margin:.5%;
	padding:1px 0px 0px 0px;
	clear:right;
	height:300px;
	overflow:hidden;
}

.footercolumn p{
	font-size:15px!important;	
}
}

@media only screen and (min-width: 1000px) {
#topBackground h1{
	font-size:28px;
}

#topBackground h1 span {
	font-size:26px;
}

#topBackground p{
	font-size:24px;
}

.blogItem{
	width:32%;
	margin:0.5%;
	padding:10px;
	float:left;
	clear:right;
}
}

@media only screen and (min-width: 1400px) {

#topBackground h1{
	font-size:34px;
}

#topBackground h1 span {
	font-size:32px;
}
#topBackground p{
	font-size:28px;
}
}




/*-----Footer Styles----*/
#footer{
 background-image:url('images/bottomBackground.png');
   background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	padding:5px;
    width:100%;
    color:#000000;
}


/*-----Footer Paragraph Styles----*/
#footer p {
  color:#000000;
  font-weight:bold;  
  }

.copywrite {
  color:#ffffff!important;
  font-size: 8pt;
  font-family: Arial, sans-serif;
  text-align:center;
  padding-top:15px; 
}




.img{
	padding:5px;
	background:rgba(0,0,0,0.85);
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,1);
    -moz-box-shadow:    0px 0px 15px 0px rgba(0,0,0,1);
    box-shadow:         0px 0px 15px 0px rgba(0,0,0,1);
    margin:5px;
    border:1px solid #E0A211;
    /*border:2px dotted rgba(255,0,0,0.50);
   	border-style: solid;
    border: 10px solid transparent;
    -webkit-border-image: url('images/silverframe.png') 15 15 round;*/
}

.imgBlog {
	width:100%;
	max-width:600px;
   border:1px solid #ccc;
   padding:5px;
   margin:5px;
   margin-bottom:20px;
   background:#f2f2f2;
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   }


.smallFont {
	font-size: 12px;
	color:rgba(255,255,255,0.55);
}


/*MENU STUFF*/
#navBackground {
	background-color:rgba(0,0,0,1);
}
@media screen and (min-width:1000px) {

.logo {
z-index:1000;
margin-left:10px;
}

#navBackground {
	margin-top:-50px;
	background-color:rgba(0,0,0,0)
}

.leftSpacer{
  width:30%;
  float:left;
}

.navContainer {
 width:70%;
float:right;
}
}

@media screen and (min-width:1100px) {
#navBackground {
	margin-top:-60px;
}
}
@media screen and (min-width:1200px) {
#navBackground {
	margin-top:-60px;
}
.leftSpacer{
  width:35%;
  float:left;
}

.navContainer {
 width:65%;
float:right;
}
}



#hpBackground {
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(2,56,146,1) 40%, rgba(3,66,170,1) 50%, rgba(2,56,146,1) 60%, rgba(0,0,0,1) 100%);
padding: 30px;
}

.hp-container {
  display: flex;
  flex-wrap: wrap;
  margin-top:0px;
  margin-bottom:20px;
}

.hp-item {
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(216,221,226,1) 100%);
  padding: 20px;
  flex: 32%;
  margin:5px;
  padding:15px;
 border-radius:10px;
 color:#000000;
 text-align:center;
}


.hp-item h1{
    font-size:26px;
    padding:10px;
    color:#0342AB;
    border-bottom:1px solid #0342AB;
  text-align:center;
}

.hp-item p{
    text-align:left;
}

.hp-item ul{
	text-align:left;
	margin-left:30px;
}
.hp-item li{
	padding:5px;
	font-size:22px;
}

/* Responsive layout - makes a two column-layout instead of a three-column layout */
@media (max-width: 1000px) {
  .hp-item {
    flex: 48%;
  }
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 600px) {
  .hp-item {
    flex: 100%;
  } 
}