html {height:100%; width:100%;} 
 body {
color:#ffffff;
background-image:url('-.jpg');
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
height: 100%;
padding:0; 
width:100%;}

	
/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/website-development-nz.jpg");

  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  width:300px;
}

a.button4{
 display:inline-block;
 padding:0.3em 1.2em;
 margin:0 0.1em 0.1em 0;
 border:0.1em solid rgba(255,255,255,0);
 border-radius:2em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
 text-align:center;
 transition: all 0.2s;
}
a.button4:hover{
 border-color: rgba(255,255,255,1);
}


.logo {
  text-align: left;

}

/*fonts-------------------------------------------*/

p{font-family: Arial;
color: #333333;
letter-spacing: 1px;
font-weight: 400;
font-size: 100%; 
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
vertical-align: 0%;
text-align: left;
padding: 0;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%}

h1{font-family: Arial;
color: #ffffff;
letter-spacing: 1px;
font-weight: 600;
font-size: 140%; 
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
text-align: center;
padding: 2%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%


}

h2{font-family: Arial;
color: #ffffff;
letter-spacing: 1px;
font-weight: 400;
font-size: 100%; 
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
text-align: center;
padding: 2%;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 4%


}

h3{font-family: Arial;
color: #ffffff;
letter-spacing: 1px;
font-weight: 400;
font-size: 80%; 
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
text-align: center;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%


}



a  {font-family: Arial;
color: #333333;
letter-spacing: 1px;
font-weight: 400;
font-size: 100%; 
font-style: normal; 
text-decoration: none;
vertical-align: 0%;
text-align: left;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%;
-webkit-text-size-adjust:auto;
-ms-text-size-adjust:auto;
-moz-text-size-adjust:auto;
text-size-adjust:auto;}

a:visited { }

a:hover {font-family: Arial;
font-weight: 500;
font-size: 100%;
font-style: normal; 
color: Red;
text-align: left;
text-decoration: none;
vertical-align: 0%;
text-align: left;
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
margin-bottom: 0%;
-webkit-text-size-adjust:auto;
-ms-text-size-adjust:auto;
-moz-text-size-adjust:auto;
text-size-adjust:auto;}


a:active { }



/*-----------------resize--------------------------*/


only screen and (min-width:768px) and (max-width:1000px) {

   body { 
      max-width: 1000px
	  
   }
}

@media only screen and (max-width: 767px) {

   html { 
      font-size: 1em
	  
   }
}


/*---------------------rsponsiv----------------------*/


/*---------------------script image----------------------*/
@media screen and (max-width:700px){
  img.responsive{width: 160px;
  margin-top: 1%;
  margin-left: 1%;}
}

@media screen and (min-width:700px){
  img.responsive{width: 260px;
  margin-top: 4%;
  margin-left: 4%;}
}

img.responsive{height: auto;}




@media screen and (max-width:700px){
  img.responsive2{width: 160px;
  margin-top: 1%;
  margin-left: 1%;}
}

@media screen and (min-width:700px){
  img.responsive2{width: 260px;
  margin-top: 4%;
  margin-left: 4%;}
}

img.responsive2{height: auto;}