html,body {
  margin: 0px;
  padding: 0px;
  letter-spacing: 0.2px;
  word-spacing: 0.5px;
  font-family: Armio, Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Didact Gothic', Arimo, Arial, Helvetica, sans-serif;
}
p {
  line-height: 23px;
}
a {
  color: #EB223E;
  text-decoration: none;
}
a:active {
  color: #3aa0f9;
}
ol {
  line-height: 23px;

}


.nav {
  display: flex;
  padding: 1em;
  margin: 0px auto;
  /* border-bottom: 1px solid #d8d8d8; */
}
#navPhoneMenu {
  display: none;
}
.navLogo img {
  margin: 5px;
}
.navLinks ul {
  margin: 8px 0px 0px 0px;
  padding: 0px;
}
.navLinks ul li {
  display: inline-block;
  padding: 0.5em;
}
.navLinks ul li a {
  text-decoration: none;
  color: #3a3a3a;
  font-weight: bold;
  transition: 0.1s ease-in-out;
}
.navLinks ul li a:hover {
  color: #EB223E;
  text-decoration: underline;
}
/* end of header naviagtion style */


/* start of footer navigation style */

.footer {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin: 150px 0px 0px 0px;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 1em 0em;
  border-top: 1px solid #d8d8d8;

}
.footerItem {
  width: 70%;
  margin: 0px auto;
}
.footerItem ul {
  margin: 0px;
  padding: 0px;
}
.footerItem ul li {
  list-style-type: none;
  line-height: 23px;
}
/* end of footer navigation style */








.mainContent {
  width: 90%;
  margin: 70px auto 0px auto;
}
.sailingContent {
  margin: 70px 0px;
}
/* end of default styling */







/* start of index.html */
.sailinHistoryImage {
float: right;  
}
.sailinHistoryImage p {
  font-size: 12px;
}


.sailinHistorytxt {
  width: 60%;
  line-height: 23px;
}

.basicTermsInfo ul {
  margin: 2em;
  padding: 0px;
}
.basicTermsInfo ul li {
  margin: 0.3em 0em;
  /* list-style-type: none; */
}
.basicTermsInfo ul li h3{
  margin: 0.3em 0em;
  padding: 0px;
}
.basicTermsInfo ul li p{
  margin: 0px;
  padding: 0px;
}
.sailingStratContent {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(2,1fr);
}
/* end of index.html styling */











/* start of wind.html */
.pointOfSail {
  grid-gap: 1em;
}
.pointOfSailItemImg{
  float: left;
  margin: 0px 0px 79px 0px;
}
/* end of wind.html */









/* start of terminology.html */

.sailing {
  overflow-x: scroll;
}
.sailingTerms {
  width: 250%;
  display: flex;
  padding: 2em;
}
.sailingTermsItem { 
  width: 100%;
  margin: 0em 3em 0em 0em;
}
.sailingTermsItem button {
  width: 72px;
  height: 29px;
  color: #fafafa;
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #EB223E;
  border: 1px solid #EB223E;
}
.sailingTermsItem button:hover {
  cursor: pointer;
  background-color: #d32828;
  border: 1px solid #d32828;
}
/* end of terminology.html */








/* start of rules/Regulation.html */
.rules {
  display: flex;
}
.rulesItem img {
  margin: 0em 2em 0em 0em;
}
/* end of rules/Regulation.html */








/* start of contact.html */
form {
  display: grid;
  grid-gap: 3em;
  grid-template-columns: repeat(2,1fr);
  width: 100%;
}
.formItemTitle {
  grid-column: span 2;
}
.formItemMessage {
  grid-column: span 2;
}
form input[type="text"] {
  width: 100%;
  height: 25px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 0em 1em;
}
form input[type="email"] {
  width: 100%;
  height: 25px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 0em 1em;
}
form input#message {
  width: 100%;
  height: 195px;
  border-radius: 3px;
}
form input#submitForm {
  width: 100px;
  border: 1px solid #d8d8d8;
  height: 35px;
  margin: 25px 0px 0px 0px;
  border-radius: 3px;
  transition: 0.2s ease-in;
}
form input#submitForm:hover {
  background-color: #3a3a3a;
  color: #fafafa;
  cursor: pointer;
}









/* start of media quires */


@media screen and (max-width: 1650px) {
  .pointOfSail {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr 1fr 1fr;
  }
  .pointOfSailItemImg {
    grid-row: span 3;
  }
}



@media screen and (max-width: 1400px) {
  .sailinHistoryImage {
    float: inherit;
    /* margin: 0px 0px 0px 51px; */
  }
  .sailinHistoryImage img {
    width: 100%;
  }
  .sailinHistorytxt {
    width: 100%;
  }
  .sailinHistorytxt p {
    line-height: 29px;
  }
}



@media screen and (max-width: 1200px) {
  .pointOfSail {
    display: block;
  }
  
  .sailinHistoryImage {
    float: inherit;
    margin: 0px 0px 0px 0px;
  }
}



@media screen and (max-width: 900px) {
  .nav {
    display: block;
    line-height: 35px;
  }
  #navPhoneMenu {
    display: inline-block;
    font-size: 25px;
    float: left;
  }
  
  .navPhoneMenu p:hover {
    cursor: pointer;
  }
  .navLogo {
    margin: 9px 0px 0px 0px;
  }
  #navLinks {
    display: none;
  }
  .navLinks ul li {
    display: block;
    border-bottom: 1px solid #d8d8d8; 
  }
  .pointOfSailItem {
    margin: 5em 0em;
  }

  .sailingStratContent {
    display: block;
  }
  .pointOfSailItemImg img {
    width: 100%;
    margin: 0.5em;
    float: inherit;
  }
  
  .sailingTerms {
    width: 90%;
    display: block;
  }
  
  .sailingTerms button {
    font-size: 10px;
    width: 50px;
    height: 25px;
    border-radius: 3px;
  }

  .rules {
    display: block;
  }
  .rulesItem img {
    width: 100%;
    margin: 0em 0em 0em 0em;
  }

  .footer {
    display: block;
  }
  .footerItem {
    margin-bottom: 20px;
  }

  form {
    display: block;
  }



}




@media only screen and (max-width: 600px) {
  .navLinks {
    display: none;
  }
  form {
    width: 95%;
  }
}
/* end of media quires */