@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 0px;
 /* height: 300px;  Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
#wrap {
	background: #FFF;
	width: 1600px; 
	margin: 0 auto;	
	top-margin: 0px;
	background-position: top center;
}
.some-page-wrapper {
  margin: -10px;
  background-color: red;
}
.gallery {
	border: 0px;
	} 
.gallery:hover{
	
	}
	.gallery-img {
		width: auto;
		display: inline-block;
		float:left;
		}
.gallery-description {
	padding: 15px;
	text-align: center;
	}	
*{
box-sizing: border-box;	
	}			
.responsive {
	padding: 0 0px;
	float: left;
	width: 50%;
	}
@media only screen and (max-width:700px) {
	.responsive {
		width: 50%;
		margin:0px 0;
		}
	}
@media only screen and (max-width:500px) {
	.responsive {
	width: 100%;
		}
		.gallery-img {
			width: auto;
			}
	}
.clearfix:after{
	content: "";
	display: table;
	clear:both;
	}	
.column {
	float: left;
	width: 50%;
	 display: flex;
  /*flex-direction: column;
  flex-basis: 100%;*/
  /*height: 430px;*/
 /* background-color: #c1001e;
	height:430px;
	width:100%;
	margin-top: -1px;*/
}
.row:after {
 /* display: flex;*/
  content:"";
  display: table;
  clear: both;
  /*flex-direction: row;
  flex-wrap: wrap;
  width: 100%;*/
}
#column-text-h {
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 45px;
	margin-top:  45px;
	margin-bottom: 45px;
	line-height: normal;
	}
#column-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 45px;
	margin-top: 40px;
	margin-bottom:40px;
	min-width: 400px;
		}
.column-image-blue {
	max-width: 100%;
	height: auto;
	background-image: url(images/nparcelplus.jpg);
	background-repeat: no-repeat;
	background-size: contain;
		}
.column-image {
	width:100%;
	max-width: 400px;
	height: auto;
	}		
/*.column {
	float: left;
	width: 50%;
	padding: 10px;
		}*/
/*.row:after {
  content: "";
  display: table;
  clear: both;
}*/
@media screen and (max-width: 600px) {
 .column{
	width: 100%; 
	 }
  .col-m-6 {
    width: 100%;
  }
}
.orange-column {
  background-color: orange;
  height: 100px;
}

/*.blue-column {
 background-color: blue;
  height:423px;
  width: 110%;
  margin-bottom: 0px;
}*/

.green-column {
  background-color: green;
  height: 100px;
  width: 110%;
}

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .column {
    flex: 1
  }

  .double-column {
    flex: 2
  }
}

/*clearfic (clear floats)*/

/*.column {
  float: center;
  width: 50%;
  padding: -1px;
  margin-top: 0px;
  margin-left: -1px;
  margin-right: 0px;
  margin-bottom:1px;
 
 	
	/*float: left;
	width: 100%;
	padding: 0px;
	flex: 50%;
	}

   .row::after {
  content: "";
  display: table;
  clear: both;
}
@Media screen and (max-width:500px){
	.column{
		width:100%;
		}
	}*/
.bblue-column {
	background-color: #133d77;
	height:651px;
	width:auto;
	margin-top: -10px;
	} 
#bblue-text-h {
	float:left;
	font-size:52px;
	font-weight:bolder;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  155px;
	}
#bblue-text-sh {
	float:left;
	font-size:38px;
	font-weight:200;
	color:#FFFFFF;
	font-family:"Arial", Helvetica, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  15px;
	}	
#bblue-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 55px;
	margin-bottom:20px;
	margin-top: 35px;
		}
.bgrey-column {
	background-color: #999999;
	height:430px;
	width:auto;
	margin-top: -10px;
	line-height:normal;
	} 
#bgrey-text-h {
	float:left;
	font-size:42px;
	font-weight:bold;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  60px;
	margin-bottom:10px;
	line-height:normal;
		}
#bgrey-text-sh {
	float:left;
	font-size:34px;
	font-weight:200;
	color:#FFFFFF;
	font-family:"Arial", Helvetica, sans-serif;
	text-align:left;
	margin-left: 50px;
	margin-top: 40px;
	line-height:normal;
	}	
#bgrey-text-p {
	float:left;
	font-size:28px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 50px;
	margin-bottom:10px;
	margin-top: 15px;
		}

.bwhite-column {
	background-color: #ffffff;
	height:651px;
	width:auto;
	margin-top: -10px;
	} 
#bwhite-text-h {
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#133d77;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  55px;
	line-height:normal;
	}
#bwhite-text-sh {
	float:left;
	font-size:36px;
	font-weight:200;
	color:#c1001e;
	font-family:"Arial", Helvetica, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  15px;
	line-height:normal;
	}	
#bwhite-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 55px;
	margin-bottom:20px;
	margin-top: 35px;
	line-height:normal;
		}
.bwhite-img {
     display: block;
	 margin-left: auto;
	 margin-right: auto;
/*.clearfix { overflow: auto; } Try it Yourself » ...
.center { padding: 70px 0; border: 3px solid green; text-align: center; ...
.center { line-height: 200px; height: 200px;*/
	}		
.bred-column {
	background-color: #c1001e;
	height:651px;
	width:auto;
	margin-top: -10px;
	} 
#bred-text-h {
	float:left;
	font-size:52px;
	font-weight:bolder;
	color:#ffffff;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  155px;
	}
#bred-text-sh {
	float:left;
	font-size:38px;
	font-weight:200;
	color:#ffffff;
	font-family:"Arial", Helvetica, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  15px;
	}	
#bred-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 55px;
	margin-bottom:20px;
	margin-top: 35px;
		}
.bw-column-container {
	content-align: center;
	display: flex;	
	position: relative;
		}		
.bw-column {
	background-color: #ffffff;
	height:651px;
	width:auto;
	margin-top: -10px;
	display:block;
	} 
	
.bw-img {
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
    overflow: auto;
	padding: 10px 0;
   text-align: center;
   
	}	
#bw-text-h {
	float:left;
	font-size:52px;
	font-weight:bolder;
	color:#133d77;
	font-family:"Arial Black", Gadget, sans-serif;
	/*text-align:left;
	margin-left: auto;
	margin-right: auto;
	display: block;
	overflow: auto;
	padding: 20px 0;
	text-align: center;*/
	}
#bw-text-sh {
	float:left;
	font-size:38px;
	font-weight:200;
	color:#c1001e;
	font-family:"Arial", Helvetica, sans-serif;
	text-align:left;
	margin-left: 55px;
	margin-top:  15px;
	}	
#bw-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	margin-left: auto;
	margin-right:auto;
	display: block;
	overflow: auto;
	pading: 20px 0;
	text-align: center;
		}		

.blue-column {
	float:left;
	background-color: #133d77;
	height:426px;
	width:100%;
	margin-top: -1px;
	
	} 
.blue-text-h {
	display: flex;
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 35px;
	margin-top:  35px;
	line-height: normal;
	}
.blue-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 45px;
	margin-bottom:10px;
	min-width: 400px;
	
		}
.grey-column {
	float: left;
	background-color: #999999;
	height:426px;
	width:100%;
	margin-top: -1px;
	} 
.grey-text-h {
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 45px;
	margin-top:  45px;
	line-height: normal;
	}
.grey-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 45px;
	margin-bottom:20px;
	min-width: 400px;
		}
.red-column {
	float: left;
	background-color: #c1001e;
	height:426px;
	width:100%;
	margin-top: -1px;
	} 
		
.red-text-h {
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#FFFFFF;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 45px;
	margin-top:  45px;
	line-height: normal;
	}
.red-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 45px;
	margin-bottom:20px;
	min-width: 300px;
		}
.red-image-sml {
		float: right;
		margin-left: 550px;
		margin-top: 0px;	
			}
.white-column {
	float:left;
	background-color: #ffffff;
	height:426px;
	width:100%;
	margin-top: -1px;
	} 
#white-text-h {
	float:left;
	font-size:42px;
	font-weight:bolder;
	color:#133d77;
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
	margin-left: 45px;
	margin-top:  45px;
	line-height: normal;
	}
#red-text-p {
	float:left;
	font-size:32px;
	font-weight:100;
	color:#133d77;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	line-height:normal;
	margin-left: 45px;
	margin-bottom:20px;
	min-width: 300px;
		}
---		
@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
}	
 /*.row::after {  
    content: "";
    clear: both;
    display: table;
}*/
[class*="col-"] {
    float: left;
    padding: -5px;
}
.column-left {
	float: left;
	width:100%;
	padding: 0px;
	} 
.column-right {
	float: right;
	width:100%;
	padding: 0px;
	} 	
.image {
	width: 100%;
	height:auto;
	float: left;
	max-width: 800px;
	}
/*.grey-column{
	background-color: #666;
	height: 651px;
	}	*/
.first-container {
     background-color: #ffffff;
	 height: auto;
}
.header{
	display: flex;
  justify-content: space-between;
  align-items: center;	
	
	}
@media(max-width: 970px){
	.header {
	flex-direction: column;
	align-items: flex-start;	
		}
	}	
.second-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
   background-color: #c1001e;
   height:52px;
}


	/*margin: -10px;
	position:relative;
	position: 0px 0px 0px 0px;
	overflow:hidden;
	height:425px;
	width: auto;
	outline-offset:inherit;
  display: flex;
  justify-content: center;*/

 /* background-color: #133d77;

	padding: 0px;
  display: flex;
  justify-content: center;
  margin-top:inherit;
  margin-left:inherit;
  margin-right:inherit;
  margin-bottom:inherit;--*/

/*margin-top:10px;
 margin: -10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color: #ffffff;*/
   
         /*display: flex;
       align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
        margin: 2% 0% 0% 0%;
		padding: 0;
        min-height: 200px;
        background-color: #133d77;
       align-items: center;*/
	   
 .third-container {
    margin: 10px -10px 0px -10px;
	padding:0;
	outline-offset:inherit;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
	margin-bottom: 0px; 
	height:auto;

}
@media all and (max-width: 500px){
.third-container {
	display: flex;
	height: 50%;
	}
.whitetext-container {
	margin-top: 5%;
	margin-left: 5%;
	width: auto;
	height:auto;
	display: flex;
	justify-content: left;
	align-items: flex-start;
	background-color: #c1001e;
	}
.whitetext-container-b {
	margin-top: 45px;
	margin-left: 45px;
	width: auto;
	height: auto;
	display: flex;
	font-size:42px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	justify-content: left;
	color: #ffffff;
	}	
.whitetext-container-m {
	margin-top: 45px;
	margin-left: 45px;
	width: auto;
	height: auto;
	display: flex;
	font-size: 36px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	justify-content: left;
	line-height:normal;
	color: #ffffff;
	}		
.whitetext-container-s {
	display: flex;
	font-size: 36px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	justify-content: left;
	color: #ffffff;
	}		
/*.img-container {
  position: relative;
}

.img-center {
	position: absolute;
	left: 247px;
	top: 2px;
	width: 100%;
	text-align: center;
	font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  /*opacity: 0.3;*/
}
.img-container-red{
	background-color: #c1001e;
	}*/
/*.firstwo-container {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color:#ffffff;
  flex-wrap: wrap;
  height:auto;
}

.firstwo-grid {
  width: 100%;
  height: auto;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;
  background-color:#FFF;
  margin-top:0px;
  margin-bottom: 0px;
  padding: 0px;
 

     }
.firstwo-grid-box-first-item {
  order:1;
}

.firstwo-grid-box-last-item {
  order: 4;
}
.firstwo-grid-box-item {
  
  width: auto;
  height: auto;
}*/

.firstwo-container{
 margin-left: 0px;
 margin-bottom:  0px;
  padding: 0px;
  justify-content: center;
  align-items: flex-start;
  background-color:#133D77;
  width: auto;
  overflow: auto;
  display:inline-block;
	}
.firstwo-left{
	float: left;
	width: 50%;
	background: url(../images/nintproductst.jpg) no-repeat center center fixed;
	height: 100%;
	margin-top: 0px;
	margin-left: 0px;
	margin-right:auto;
	display:block;
	}
.firstwo-right{
	float: right;
	width: 50%;
	background: url(../images/nintproductsp.jpg) no-repeat center center fixed;
	height: 100%;
	width: 50%;
	display:block;
	}
#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}	
	
				
.third-container-column-right {
	/* display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color:#C1001E;*/
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #133d77;


}
.third-container-grid {
  width: 100%;
  height: auto;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.third-container-first-item {
  order: 1;
}

.third-container-last-item {
  order: 4;
}
.third-container-box-item {
  
  width: 945px;
  height: 425px;
}
@media screen and (max-width: 400px){
	.third-container-c
	.column-left {
	width: 100%;	
		}
	.column-right {
	width: 100%;	
		}	
	}

.breadcrumb-container {
	/*margin: 10px;
	padding: 10px;
	outline-offset:inherit;*/
	display: flex;
	justify-content: center;
	align-items: left; 
	background-color: #ffffff;
	height: 30px;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color: #999999;
	}
.breadcrumb-grid {
  width: 1000px;
  height: auto;
   display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }	
		}
.breadcrumb {
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-left: 5px;
	color: #cccccc;
	text-align: left;
}
.breadcrumb a {
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 5px;
	color: #999999;
	text-align: left;
}
@media all and (max-width: 500px){
.breadcrumb-container {
	font-size: 12px;
	display: flex;
	}
	.breadcrumb-grid {
		display: flex
		width: 100%;
		}
	.breadcrumb {
		font-size: 12px;
		width: 100%;}		
.breadcrumb li a {
	padding: 10px 0 10px 10px;
	}	
	}
	
/* Style the list */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}	
.column-grey {
	background-color:#666666;
	display: flex;
	align-items: left;
	justify-content: left;
	flex-direction: column;
	width: 100%;
	text-align:left;
	margin: 10% 10%;
	min-height: 200px;
	align-items: left; 
	}	
.white-text-header {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight:bolder;
	color: #ffffff;
	}
.white-text-sheader {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 44px;
	font-weight:bold;
	color: #ffffff;
	}
.white-text-content {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight:normal;
	color: #ffffff;
	}			
/*.content-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
   background-color: #FFFFFF;
   height:200px;
	margin-top: 20px;
	margin-left: 120px;
}*/


.content-container {
  margin: 10px 0px 10px -10px ;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color:#ffffff;
  flex-wrap: wrap;
  height:auto;
  width:100%;
}

.content-grid {
	width: 960px;
	height: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: top;
	background-color:#FFF;
	margin-top:10px;
	margin-bottom: 10px;
	margin-left:0px;
	margin-right:0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
 

     }
.content-grid-box-first-item {
  order:1;
}

.content-grid-box-last-item {
  order: 4;
}
.content-grid-box-item {
  
  width: 240px;
  height: auto;
}

/*
.content-container {
  margin-left: 20px;
  padding: 20px;
  display: flex;
   flex-flow: row-wrap;
  justify-content: space-around;
  align-items: center;
  background-color:#FFFFFF;
  text-align:center;
}

.content-grid {
	 width: 960px;
  height:auto;
   display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;
/*  width: 800px;
  height:auto;
  margin:auto;
   display: flex;
  justify-content: center;
  flex-wrap: no-wrap;
 
  flex-direction: row;
  align-items: top;*/
     }
/*.content-first-item {
  order: 1;
}

.content-last-item {
  order: 4;
}
.content-item {
  
  width: 330px;
  height: 196px;
}
*/

.four-container {
	/* display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color:#C1001E;*/
	margin: 10px;
	padding: 0px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #c1001e;
  height: 120px;
}




.four-container-text{
	text-align: center;
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}	
.iframe-container {
	display: block;
	float:left;
	overflow: hidden;
	sandbox: 
    height: 36px;
	width:auto;
	border: none;
	background-color:transparent;
	margin: none;
	padding: none;
	border: none;
	line-height:none;
	}
.iframe {
	display: block;
	margin: none;
	padding: none;
	border: none;
	line-height: 0;
	float:left;
	}
.search {
  width: 100%;
  position: relative
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.searchwrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}		
.input[type=text] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('../images/searchicon.jpg') 0 0 no-repeat;
  background-position: 0px 0px; 
  background-repeat: no-repeat;
  padding: 2px 2px 2px 4px;
}
.tracktrace {
	background-image: url('../images/searchicon.jpg') 0 0 no-repeat;
	display: block;
	height: 23px;
	width: 22px;
	}
.bottom-two {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}	
	
.five-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: left;
  background-color: #ffffff;
  text-align:center;
 
}
.domprod-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #133d77;
}

.six-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #999999;
}
.seven-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #133d77;
}
.eight-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
 display: flex;
 float: center;
 justify-content: center;
    background-color: #333333;
	margin-bottom: 0px;
	font-size: 22px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	line-height: normal;
	content: wrap;
	text-align: center;

}

/*.eight-container {
	
	max-width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	backgound-color: #F6C;
	}
.eight-container-text {
	text-align: center;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	color: #ffffff;
	}	
*/
.eight-container-text {
	margin-top: 20px;
	margin-bottom: 20px;
	outline-offset:inherit;
  display: inline-block;
 float: center;
  justify-content: center;
    text-align: center;
	font-size: 22px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	line-height:normal;
}
@media screen and (max-width: 500px) {
	.eight-container-text {
	justify-content: center;
		width: 100%;	
		}
	}	
.nine-container {
	margin: -10px;
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #cccccc;
  height: 80px;
}

html {
    font-family: "Arial", helvetica, sans-serif;
	font-size:14px;
}
body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
p{
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
color:#666;
		}
a { 
	color: #FFFFFF;
	background-color: inherit;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	background-color: #inherit;
	text-decoration:none;
}
a:visited {
	color: #FFFFFF;
	background-color: #inherit;
	text-decoration: none;
}		
		

/*.wrap {
	background: #FFF;
	width: 90%; 
	top-margin: 0px;
	margin: 0 auto;	
	/*display: flex;
    flex-wrap: wrap;
	min-height: 100%;
	position:relative;
	background-position: top center;
	}*/
img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
  border: none;
 
}

.img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: auto;
	width: 50%;
	border: none;
		}

.image {
	height: auto;
	display: block;
	margin: auto;
	width: 50%;
	border: none;
	}

.imagecontainer {
	width: 100%;
    height: 520px;
    background-image:url('../images/testclean.jpg');
    background-repeat: no-repeat;
    background-size: contain;
   	}
	
.trackcontainer {
	width: 60%;
    height: 50px;
    background-color: #cccccc;
	top-margin: -30px;
    
	}
/*.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	}*/
	
		
.column{
	float: left;
	width: 50%;
	padding: 0px;
	}	
.row::after{
	content: "";
	clear: both;
	display: table;
	}	
@media screen and (max-width: 500px) {
	.column{
	width: 100%;	
		}
	}	
.pageicontainer {
	width: 100%;
    height: 257px;
    background-image: url('../images/sms.jpg');
    background-repeat: no-repeat;
    background-size: contain;
   
	}
.pink-container {
	background-color:#cccccc;
	padding: 20px 20px;
	display: flex;
	justify-content: center;
	}
.pink {
	width: 1050px;
	display: flex;
	justify-content: space-between;
	}		
/* Style inputs, select elements and textareas 
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}*/

/* Style the label to display next to the inputs 
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}*/

/* Style the submit button */
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #CCCCCC;
  color: black;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #133d77;
  color:#FFFFFF;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}







/*input[type=submit] {
  background-color: #CCCCCC;
  color: black;
  padding: 2px 2px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  float: right;
}*/

/* Style the container 
.formcontainer {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width 
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width 
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns 
.row:after {
  content: "";
  display: table;
  clear: both;
}
*/

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
/*.container {
	width: 100%;
	height:auto;
	background-size:contain;
	/*position: relative;*/
	}	*/
.pageimagecontainer {
	position: relative;
	}	
.bottomleft {
	position:absolute;
	bottom: 60px;
	left: 366px;
	font-size: 36px;
	color: #FFFFFF;
	font-weight:400;
	
	}	
.responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

and finally, we serve for every view-port the right image:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../imgages/testclean.jpg');
    }
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}

/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}

/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../imgages/mobile.jpg');
    }
} 
	}	
.wrapper {
	overflow:auto;
	}
.photo-grid-container {
  display: flex;
  justify-content: center;
}

.photo-grid {
  width: 1500px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
flex-direction: row-reverse;
   /* flex-direction: column;
   flex-direction: row;*/
   align-items: center; 
}
.first-item {
  order: 1;
}

.last-item {
  order: -1;
}
.photo-grid-item {
  border: 1px solid #fff;
  width: 750px;
  height: 460px;
  {
.footer {
  display: flex;
  justify-content: space-between;
}
.boximagecontainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /*background-image:url(../images/testcleantop.jpg);
  background-repeat:no-repeat;*/
}

.boximage {
  width: 970px;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.first-item {
  order: 1;
  
}

.last-item {
  order: 4;
}
.boximage-item {
  
  width: 330px;
  height: 33px;
}

}
.pageimagecontainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* {box-sizing: border-box;}
body { 
  margin: 0;
  font-family: Arial;
}
*/
/*.header {
  overflow: hidden;
  background-color: #FFFFFF;
  padding: 5px 5px;
}

.header a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 14px; 
  line-height: 25px;
  border-radius: 10px;
}

.header a.logo {
  font-size: 14px;
  font-weight: normal;
}

.header a:hover {
  background-color: #FFFFFF;
  color: #C1001E;
}

.header a.active {
  background-color: #FFFFFF;
  color: #C1001E;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}*/

/*.header {
	 max-width: 100%;
    height: auto;
	display: flex;
  justify-content: center;	

	/*max-width: 100%;
	height: 37px;
	margin: 5px, 5px; 
    padding:5px;
	display: flex;
    flex-wrap: wrap;*/	
 }
.hbox-item {
  
  width: 970px;
  height: 56px;
}

.hbox-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.hbox-grid {
  width: 970px;
  height:auto;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.first-item {
  order: 1;
}

.last-item {
  order: 4;
}
.hbox-item {
  
  width: 330px;
  height: 54px;
}
 
#nav {
	 max-width: 100%;
    height: auto;
	display: flex;
  justify-content: center;	
	font-family: "Arial", Helvetica,  sans-serif;
	color: #fff;
	text-decoration: none;
	background-color: #C1001E;
}

#menuwrapper {
	clear: both;
	width: 980px; height: 44px;
	top-margin: 340px;
	margin: 0px; 
	padding: 0px;
	background-color: #c1001e;	
	position: relative;
	color:#FFFFFF;
	z-index: 1000;
	/*background-image:url(../images/menuwaves.jpg); background-repeat:no-repeat;*/
} 
/* content */

#content-space {
	clear: both;
	width: 970px; height: 34px;
	top-margin: 10px; padding: 0px;
	background: #ffffff;
			
}
#content-wrap {
	float: left;
	position: relative;
	left: 50%;
	
	/*clear: both;
	align: centre;
	width: 945px; height: 235px;
	top-margin: 0; padding: 0;	
	background: #FFF;*/

}
#content-extra {
	clear: both;
	width: 945px; height: 10px;
	top-margin: 0px; padding: 0px;
	background-image:url(../images/blueback.jpg);
	background-repeat:repeat-y;
	background: #ffffff;
			
}
/*.menuwrapper {
	display: flex;
  flex-wrap: wrap;
   max-width: 100%;
  background-color: ##C1001E;
  height: 35px;
	/*clear: both;
	width: 945px; height: 40px;
	top-margin: 300px;
	margin: 0px; 
	padding: 0px;	
	background-color:#C1001E;
	background-repeat:no-repeat;*/
}
/*.nav {
	display: flex;
  flex-wrap: wrap;
   max-width: 100%;
  background-color: ##C1001E;
  height: 40px;
	}*/
.body { 
	
margin: 5px;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #999999;
	background-size:cover;
	text-align:left;
	
}

}
.bread-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.bread-grid {
  width: 960px;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.first-item {
  order: 1;
}

.last-item {
  order: 4;
}
.bread-item {
  
  width: 960px;
  height: 40px;
}	 
	 
.breadnav {
	font-size: 14px;
	color: #808080;
	text-align: left;
}	
.breadnav a {
	color: #133d77;
	}
.breadnav hover {
	color: #c1001e;
	
	}	
.openspace{
	display: flex;
	flex-wrap: wrap
	 max-width: 90%;
    height: 45px; 
	clear: both;
	font-size:10px;
	text-align:left;
	background: #ffffff;
	}
.content-space {
	max-width: 90%;
    height: auto;
    display: flex;
    justify-content: left;
	font-size:10px;
	text-align:left;
			
}

.page {
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
  margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-color: #999999;
  
}
.philimg {
    max-width: 100%;
    height: auto;
}
.illustration  {
	width:100%;
	display: block;
	}
.section-content{
	width: 100%;
    height: auto;
display: flex;
  justify-content: center;
	}	
.content-image{
	max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
	
}
#content-page {
	float: left;
	position: relative;
	left: -50%;
	
	
	/*float:center;
	width: 960px;
	top: 10px; 
	background: #FFF;*/
	/*background-image:url(../images/blueback.jpg);
	background-repeat:repeat-y;
	padding: 0;  */  
	/*	font-family:Arial, Helvetica, sans-serif;
		font-size:12px;  
	text-align: left;*/
	}
.content {
    width:90%;
	float: center;
	/*margin-left:auto;
	margin-right:auto;*/
	background-image: url("images/test1.jpg");
    background-repeat: no-repeat;
	
	background-size:contain;
     max-width: 100%;
    height: auto; 
	vertical-align:middle;
	box-sizing:border-box;
}

.body { 
	
margin: 5px;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #999999;
	background-size:cover;
	text-align:left;
	
}
#content {
    max-width:100%;
	float: center;
	/*margin-left:auto;
	margin-right:auto;*/
	background-image: url("images/test1.jpg");
    background-repeat: no-repeat;
	
	background-size:contain;
     max-width: 100%;
    height: auto; 
	vertical-align:middle;
	box-sizing:border-box;
}
.content.p {
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
color:#666;

		}
.content.a { 
	color: #C1001E;
	background-color: inherit;
	text-decoration: none;
}
.content.a:hover {
	color: #133D77;
	background-color: inherit;
	text-decoration:none;
}
.content.a:visited {
	color: #999999;
	background-color: inherit;
	text-decoration: none;
}	
.myLink {
	max-width: 100%;
	color: #C1001E;
	float: center;
	text-decoration:none;
	font-weight:bold;
		}
.myLink:hover {
	color: #C1001E;
	background-color: inherit;
	text-decoration: none;
	}	
.myLink:a {
	color: #C1001E;
	}		
.myLink:visited {
	color: #133D77;
	}	
	}
.myLinkb {
	max-width: 100%;
	color: #ffffff;
	float: center;
	text-decoration: none;
	
		}
.myLinkb:hover {
	color: #cccccc;
	background-color: inherit;
	text-decoration: none;
	
	}	
.myLinkb:a {
	color: #ffffff;
	
	}		
.myLinkb:visited {
	color: #ffffff;
	
	}	
	}	
	
/*#image-inner {
	display: block;
	height: 0;
	padding-top: 54%;
	}*/
/*#contentpage {
    background-image: url("images/pageimage1.jpg");
    background-repeat: no-repeat;
     max-width: 100%;
    height: 260px; 
}*/
.target-ratio-resize {
	max-width: 960px; /* actual img width */
	max-height: 150px; /* actual img height */
	*height: 150px; /* actual img height - IE7 */
	background-image: url(images/testclean.jpg);
	background-size: cover;
	background-position: center;
}
.target-ratio-resize:after {
	content: " ";
	display: block; 
	width: 100%; 
	padding-top: 33.333%; /* 3:1 ratio */
}
.illustration img {
  width: 100%;
  display: block;
}
.article{
	margin-left:auto;
	margin-right:auto;
	max-width: 100%;
    height: auto; 
	display: flex;
	justify-content: left;
	align-items: center;
	margin: 5px;
	padding: 5px;
	background-color: #999;
		}
.image-wrapper{
		/*max-width: 100%;
		height: auto;*/
		position: relative;
		width:970px;
		max-width:100%;
		height: auto;
		display: block;
		margin: auto;
		width:50%;	
		/*	max-height: 90%;
  max-width: 90%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;*/
		
		
			}
.image-wrapper p {
	position: absolute;
	left: 0;
	top: 250px;
	padding: 10px;
	width:400px;
	color:#fff;
	margin: 5px;
	font-size:48px;
	font-weight:400;
	color:#FFF;
			}	
.img{
	max-width: 100%;
	height:auto;
	}	
/*.img {
	max-height: 90%;
  max-width: 90%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}*/
				
.img-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
 
}

.img-grid {
  width: 960px;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }		

.first-item {
  order: 1;
}

.last-item {
  order: 4;
}
.box-item {
  
  width: 960px;
  height: 554px;
}
.box-containered {
  
  margin: -10px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color: #C1001E;
   height:auto;
}
.box-containeredp {	   
   font-family:Arial, Helvetica, sans-serif;
   color:#FFFFFF;
   font-size:14px;
   }
.box-containerblue {
  display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color:#133D77;
   }   

.box-containergrey {
  display: flex;
  justify-content: center;
  align-items: flex-start;
   background-color:#CCCCCC;
   }

.grey-container {
	background-color:#CCCCCC;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	}
.bottom-container {
	margin: -10px;
	padding: -10px;
	outline-offset:inherit;
  display: flex;
  justify-content: center;
  background-color: #999999;
}
.box-container {
  margin: -10px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color:#133d77;
  margin-bottom: 100px;
  color: #fffff;
}

.box-grid {
  width: 960px;
  height:auto;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.first-item {
  order: 1;
}

.last-item {
  order: 4;
}
.box-item {
  
  width: 330px;
  height: 196px;
}
.first-longbox {
	order: 1;
	}
.last-longbox {
	order: 4;
	}	
.longbox {
	width: 485px;
	height: 200px;
	}	
.twrapper {
	position: relative;
	padding-bottom: 0.75%;
	padding-top: 150px;
	height: 0;
	overflow: hidden;
	}
.twrapper-iframe{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 50%;
	background-color: #FFFFFF;
	}	
.intrinsic-container {
	position: relative;
	height: 100%;
	overflow: hidden;
	padding-bottom: 50%;
	width: 100%;
	display: block;
	margin: auto;
	border:none;
	}
	/*  16x9 Aspect Ratio*/
.intrinsic-container-16x9{
	padding-bottom: 10%;
	 border:none;
	}	
	/* 4x3 Aspect Ration*/
.intrinsic container-4x3{
	padding-bottom: 10%;
	 border:none;
	}	
.intrinsic-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	 border:none;
	 display: flex;
	}	
--
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}


----	
/*.footer {
  display: flex;
  justify-content: space-between;
}*/
.red-container {
	float: center;
	background-color:C1001E;
	}
.city-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color:#666666;
  height:50px;
}

.city-container-text{
	float:center;
	font-size:28px;
	font-weight:200;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center; 
}
#city-container-text a {
	float:center;
	font-size:26px;
	font-weight:300;
	color:#FFFFFF;
	text-align:center;
	text-transform:lowercase;
	
	}
.city-grid {
  width: 960px;
   display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: top;

     }
.first-item {
  order: 1;
}

.last-item {
  order: 4;
}
.city-item {
  
  width: 330px;
  height: 33px;
}


.citywrapper {
position: relative;
		width:970px;
		max-width:100%;
		height: auto;
		display: block;
		margin: auto;
		width:50%;	
		justify-content: center;
}
.city {
	/* display: flex;
    flex-wrap: wrap;
	float: left;
    margin: 4px;
	padding: 4px;
    max-width: 100%;
    height:auto;
	background-size: contain;*/
	
	float: left;
	top: 0px;
    padding: 0px;
   width: 230px;
    height: 30px;
    font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#133D77;
	background-color:#FFFFFF;
	box-sizing: border-box;
	
}
.rightbar {
	float: right;
	top: 0px;
	width: 314px;
    height: 225px;
    padding: 0px;
	background-color:#FFF;
    box-sizing: border-box;
				
}
#section {
	margin: 10px;
	padding: 10px;
	background-color: #69F;
	display: flex;
	justify-content: center;
	align-items: left; 
		}
.article {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 230px;
  height: 230px;
  border: 1px solid black;
} 
#article-right {
  float: left;
  margin: 10px;
  padding: 10px;
  width: 230px;
  height: 230px;
  border: 1px solid red;
  
} 
		
body {
    font-family: "Arial", Helvetica, sans-serif;
	font-size: 14px;
	text-align: left;
	margin: 10px 10px;
	height: 100%;
	background-color:#FFFFFF;
}
---
h1 {
	font: bold 24px, 'Arial', Helvetica, Sans-serif;
	color: #C1001E;	
}
h1 { font-size: 24px; color: #C1001E;} 
h2 { font-size: 18px; color: #133D77;}
h3 { font-size: 18px; color: #C1001E; font-weight:200; }
h4 { font-size: 14px; color: #C1001E; }
h5 { font-size: 14px; color: #133D77;}
h6 { font-size: 10px; color: #133D77; }
h7 { font-size: 12px; color: #808080; }
 h1, h2, h3, h4, h5, h6 {
	margin: 10px 0px;
	text-align: left;

	
	
}
h7 {
	text-align:center;
	}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#808080;
	align: left;
	text-align: left;
	margin: 10px 15px;
	font-weight: normal;
	line-height:normal;
	text-wrap:normal;
	white-space:normal;
}
p.blocktext {
	margin-left: auto;
	margin-right:auto;
	width:12em;
	
	}
p.center {
	text-align:center;
	}	

--






h1 {
  font-family: "arial", helvetica, sans-serif;
  font-weight:400;
  line-height: 1;
  margin: 10px 0;
  color: #C1001E;
}
 h2 {
	font-family: 'Arial', Helvetica, Sans-serif;
	color: #133D77;
	font-weight:400;
  line-height: 1;
  margin: 10px 0;	
}
h1 { font-size: 24px; color: #C1001E; font-weight:400; font-family:Arial, Helvetica, sans-serif; }
h2 { font-size: 18px; color: #133D77; font-weight:400; font-family:Arial, Helvetica, sans-serif; }
h3 { font-size: 18px; color: #C1001E; font-weight:400; font-family:Arial, Helvetica, sans-serif;}
h4 { font-size: 16px; color: #C1001E; font-weight:400; font-family:Arial, Helvetica, sans-serif; }
h5 { font-size: 16px; color: #133D77; font-weight:800; font-family:Arial, Helvetica, sans-serif; }
h6 { font-size: 12px; color: #133D77; font-weight:400; font-family:Arial, Helvetica, sans-serif;}
h7 { font-size: 12px; color: #808080; font-weight:200; font-family:Arial, Helvetica, sans-serif;}
 h3 {
	margin: 10px 0px;
	font-size: 18px;
	font-weight: 400; 
	 }
 h4, h5 {
	margin: 10px 0px;
	font-size: 16px;
	font-weight: 800;
}
h6,h7 {
	margin: 10px 0px;
	font-size: 12px;
	font-weight: 400; 
	}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}


.img {
	max-width: 100%;
	height: auto;
}
@media screen{
		img {
		width: auto; 	
			}
		} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}  
  
}
/*smaller than 400px*/
body{
	/* [disabled]background-image: url('images/frontsml.jpg'); */
	}
/*400px or larger*/
@media only screen and (min-width:400px){
	body {
	content-image: url('images/front1.jpg');	
		}
	}

img.displayed {
	display:block;
	margin-left:auto;
	margin-right:auto;
	}


#feature-1 {
  background-color: #F5CF8E;
  max-width: 960px;
}

.feature-2 {
  background-color: #F09A9D;
}

.feature-3 {
  background-color: #C8C6FA;
}

#sign-up {
  background-color: #133D77;
  height: 210px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  padding: 5px;
  right: 0px;
  background-image:url(../images/feedback.jpg) 00 no-repeat;
  height: 55px;
  width: 107px;
 content-align: right;
  
/* background-color: #c1001e;
  border: 2px solid #4CAF50;*/
}
.footer-container{
	background-color: #CCCCCC;
	display: flex;
	height:auto;
	}
.footer { 
	 /*max-width: 80%;
    height: auto;
	display: flex;
  justify-content: center;*/
  	/*margin: -10px;
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	outline-offset:inherit;
  
  height: 80px;*/
/* height: auto;
	display: flex;
  
margin:auto;*/
/*float: left;
	width: 970px; 
	height: 54px;
	font-size: 14px;
	color: #808080;
	text-align:center;
	text-transform:capitalize;
	
	background-color: #666666;	*/
	
padding:1rem 0;
justify-content: center;
  background-color: #666666;
}
.footer-text a {
	float:center;
	font-size:22px;
	font-weight:300;
	color:#FFFFFF;
	text-align:center;
	text-transform:lowercase;
	
	}
#footer-text{
	float:center;
	font-size:22px;
	font-weight:300;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center; 
}
#footerempty { 
	float: left;
	width: 947px; 
	height: 54px;
	font-size: 11px;
	color: #808080;
	text-align:center;
	text-transform:capitalize;	
}	
.footer {
 /*max-width: 100%;
    height: auto;
	display: flex;
  justify-content: center;
 background-color:#cccccc;
margin:auto auto 0 auto;*/
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #666666;
color: white;
text-align: center;
justify-content: center;
height: 140px;
}
.footer-text{
	Text-align: center;
	font-size: 22px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}	
	
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}	
	
/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
    background-color: #FFFFFF; 
	.container-eight-text{
		text-align: left; 
		}
   .footer-text {
	   text-align:left;
	   }
  
  }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  .body,
  .footer {
    width: 100%;
  }
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .header {
    height: 80px;
  }
  .sign-up {
  height: 200px;
  order: 1;
}
 .content {
  order: 2;
}
  .footer{
}
 .row  {
	
}
/* Extra small devices (phones, 600px and down) */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

@media only screen and (max-width: 600px) {
	.body {width:50%;}
	} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .body {width: 100%;}
} 
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}