* {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: 45px;
} 

h2,h3{
  font-size: 26px;
    padding:30px 20%;
    color: #0aa5de;
    text-shadow: 1px 1px #fff;
}

h3{
  font-size: 24px;
  color: #333;
  text-decoration:underline;
}

i{
  color:#0aa5de;
}

a.links{
  position:absolute;
    top:60px;
    left:20%;
}
a.links.r{
  left:auto;
    right:20%;
}


.send{
  background:#0aa5de;
    color:#fff;
    padding:10px 30px;
    border-radius:5px;
    text-align:center;
    display: inline-block;
    cursor:pointer;
}
.send.active{
  background:green;
}

.mainSite{
    background-color: #f2f2f2;
    border-top:2px dashed #0aa5de;
    padding:50px 0;
}

.mainSite.odd{
  background-color: #fcfcfc;
} 

.contactform{
  background-color: #f2f2f2;
    text-shadow: 1px 1px #fff;
    border: 1px solid #ccc;
    margin:0 17%;
    padding:20px 3%;
  
}

.mainSite p{

  text-shadow: 1px 1px #fff;
  padding:20px 20%;
}

.header {
  background-color: #fff;
  padding: 30px;
  text-align: center;
  height:200px; 

}

.images {
  width: 70%;
  margin:30px 15%;
}

.images img {

width:49%;
display:inline-block; 
vertical-align:top;

}

/*  css menu for large screen */
@media screen and (min-width: 1099px) {
.smallScreen{
  display: none;
}
    
.topnav {
  overflow: hidden;
  background-color: #0aa5de;
  text-align: center;
}
.topnav a {
  display: inline-block;
  color: #fff;
  font-weight:bold;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
.topnav a.active{
  background:#f2f2f2;
  color: #0aa5de;
}

.topnav a.home.active  {
  background:#fff;

}
.topnav a.odd.active  {
  background:#fcfcfc;
}
 .topnav .icon {
  display: none;
}   
}

/*  css menu for small screen */

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


.topnav {
  position:fixed;
    width:100%;
    background-color: #0aa5de;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  font-weight:bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 22px;

}

 .topnav .fa {
  color:#fff;

} 
  .mainImg,.largeScreen{
    display: none;
  }
  .topnav a {
    float: left;
    display: block;

    }

}

@media screen and (max-width: 1100px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
  float:right;
    display: block;
  }
}

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

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom:1px solid #fff;
  }
}



@media only screen and (max-width:800px) {
  /* For tablets: */
  
* {
    font-size: 22px;
} 
h2,h3{
    padding:30px 10px;
}

a.links{
    left:10px;
}
a.links.r{
    right:10px;
}


.mainSite p{
  padding:20px 10px;
}
.contactform{
    margin:0 5px;
    padding:20px 5px;
}
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
* {
    font-size: 22px;
} 
h2,h3{
    font-size: 26px;
    padding:20px;

}

h3{
  font-size: 24px;

}
.mainSite p{
  padding:20px;
}
.contactform{
    margin:0 5px;
    padding:20px 5px;
  
}

.images img {

width:90%;
margin:5px 0;

}


}






.content {

  display: none;
  background:#f2f2f2;

}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 55px;
}

#filler{
  height:55px;
  display:none;
}

.mainImg {
  float: left;
  width: 100%;
  height: 500px;
  background: url(https://storage.googleapis.com/urunga.appspot.com/static/presureSpray.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;

  }
  


.myProgress {
    width: 100%;
    margin: 0 auto;
} 
.progressBar {
    background-color: #0aa5de;
    height: 3px;
    width: 5%;
    position: fixed;
    top: 315px;
    transition: width 1500ms;
}
.msg {
    position: fixed;
    color: #0aa5de;
    font-weight:bold;
    width: 100%;
    text-align: center;
    top:275px
}
.progressBar.ready {
    width: 100%;
}


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: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}