body {
 
}
ul {
    list-style: none;
}
.absol {
  position: absolute;
  top: 10px;
  margin-left:20%;
  margin-right: 0;
  /*width: 200px;
  height: 100px;*/
  z-index:-50;
}



#content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
   
}
.contact{
   text-align: center;
    font-family: Arial;
    color: #0576b4;
    text-shadow: 3px 3px 3px gray;
    margin: 60px 0 0 0;
}
.contactph{
    text-align: center;
    font-family: Arial;
    color: #0576b4;
    
}

.contactimg{
    text-align: center;
    margin:80px 0 0 0;
}
#head_background {
    width: 80%;
    height:110px;
     margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}   
    


#nav_background{
    
    width:60%;
    height:40px;
    background-color: none; 
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}
    

#footer_background{
    
    width:  80%;
    height: 3em;
    
    background-color: #0576b4;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    border-radius:15px;
    
  
   
}
.face{
      float: right;
      margin-right: 10px;
      margin-top: 10px;
  }  

  .insta{
      float: right;
      margin-right: 20px;
      margin-top: 8px;
  }  
.rjlogo{
   width: 425px; 
}
.homeicon{
    
    float: right;
    margin: 5px 20px 0 0;
}


#nav {
    background-color: #0576b4; 
    border: none;
    color: white;
    padding: .5em .5em;
    text-align: center;
    text-decoration: none;
    display: block;
    font-family: Arial;
    font-size: 14px;
    border-radius : .5em; 
    float: right;
    margin: 5px 1em 0 0;
   
}

#nav:hover{
    background-color: #fff;
    color: #0576b4;
}
#column{
   
   float: left;
    width: 50%;
   
    
}
#columnl{
   
   float: left;
    width: 50%;
    height: 50%;
    
}
#columnr{
   
   float: right;
    width: 50%;
    height: 50%;
    
}

.h1_head{
    color: #0576b4;
    font-family: Arial;
    float: right;
    margin-right:2em;
   
    
}
.antcontact{
     float: left;
    margin-left: 18em;
    margin-top:  0;
}


.antlogo{
    
    float: left;
    margin-left: 18em;
    margin-top:  2em;
}



.p_support{
    color: gray;
    font-family: Arial;
    font-weight:  bold;
    font-size: 1em;
    text-align: center;
}

.copyright{
  font-family: Arial;
  color:  white;
  text-align: center;
  
  
}
.pinlog{
	display:block;
	width:35%;
	height:10%;
	padding:1.5em ;
    color:#0576b4;
    font-family: Arial;
    font-weight:  bold;
	background-color:white;
	overflow:hidden;
    border:3px solid #0576b4;
    border-radius:.5em;
    box-shadow: 3px 3px 3px gray;
    /*text-shadow: 3px 3px 3px gray;*/ 
    margin-left: auto;
    margin-right: auto;
    
	}

.marineh2{
    text-align: center;
    font-family: Arial;
    color: #0576b4;
    margin: 60px 0 0 0;
    
}
.supporth2{
    text-align: center;
    font-family: Arial;
    color: #0576b4; 
    
}

.ulbottom{
    font-family: Arial;
    font-weight: 500;
    color:  #535252;
    font-size: 14px;
    margin-left:0px;
   padding: 0 0 0 .5em;
   display: block;
    width: 150px;
    height: 120px;
    overflow: hidden;
    float: left;
   
}


.marineul {
    font-family: Arial;
    font-weight: 500;
    color: #535252;
    font-size: 14px;
    margin-left: 0px;
    padding: 0 0 0 .5em;
    display: block;
    width: 150px;
    height: 120px;
    overflow: hidden;
    float: left;
    
}
.marineimg{
    
    float:  right;
     margin:0 120px 0 50px;
    padding: 0 0 1em 0;
    width: 180px;
}

.serviceimg{
    float: right;
     margin:0 110px 0 60px;
    
    width: 160px;
}
#boatimg{
      float: right;
     margin:0 110px 0 60px;
   
   width: 160px; 
}

#location{
    color: gray;
    font-family: Arial;
    margin-left: 60px;
   
}

    
     
    


/* contact form css*/
.contactform {
width: 80%;
font-family: arial;
border: 2px solid #0576b4;
padding:10px 0 20px 0;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: 10px;
color:#0576b4;
font-size: 1.5em;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 20px;
box-shadow: 3px 3px 3px gray;


}
.contactformheader {
font-size:1.5em;
font-weight:bold;
padding-top:.5em;
padding-bottom:.5em;
text-align:center;
text-shadow: 3px 3px 3px gray; 
}
.contactformmessage {
text-align:center;
padding-bottom:.5em;
}
.contactform td {
padding:4px;
font-size:12px;
}
.contactform p {
padding:4px;
}
.contactform label {
padding:4px;
}
.contactform label {
padding-right:10px;
}
.required {
font-weight:bold;
}
.required_star {
font-weight:bold;
color:#F00;
}
.not-required {
font-weight:normal
}
.antispammessage {
padding:10px;
border-top:1px solid #AAA;
border-bottom:1px solid #AAA;
font-weight:bold 
}
.antispamquestion {
font-weight:normal;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 655px) {#nav{ width:15%; margin-top: .5em; }
#content{width: 100%;}#nav{font-size: 8px;}#columnl{margin-bottom:5px;width:100%;border:1px solid grey;}.marineul {margin-left: 50px;}.ulbottom{margin-left: 50px;}.serviceimg{margin:0 50px 0 0;} #boatimg{margin:0 50px 0 0;}
#location{float:left;font-size:  12px;}#columnr{width:100%;border: 1px solid grey;margin-bottom:5px;}}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 655px) {#footer_background{background: none;}.copyright{color: #0576b4;}.pinlog{display: none;}
}
@media only screen and (min-width: 600px){}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px){#content{width: 100% !important;}}
/* Large devices (laptops/desktops, 992px and up)*/
@media only screen and (max-width: 992px) {.homeicon{display: none;}.rjlogo{width:200px;}#location{font-size: 14px;margin-left: 40px;}
#content{width: 85%;}#column{width: 100%;}.serviceimg{margin:0 0 0 0;} #boatimg{margin:0 0 0 0;}.absol{top: 1px; width: 200px;margin-left: 20% !important;}}   
  
/* Extra large devices (large laptops and desktops, 1200px and up)*/ 
@media only screen and (max-width: 1200px){.absol{top: 1px; width: 200px;margin-left: 27%;}} 
@media only screen and (min-width: 992px) {#content{width: 80%;}.serviceimg{margin:0 20px 0 0;} #boatimg{margin:0 20px 0 0;}}
@media only screen and (min-width: 1400px) {#content{width: 60%;}.serviceimg{margin:0 50px 0 0;} #boatimg{margin:0 50px 0 0;}}
/*@media only screen and (min-width: 1600px) {#content{width: 60%;}.serviceimg{margin:0 50px 0 0;} #boatimg{margin:0 50px 0 0;}}*/