@font-face {
  font-family: feroniawide;
  src: url("/fonts/feroniafont.ttf");
}

@font-face {
  font-family: feroniaclose;
  src: url("/fonts/feroniaclose.ttf");
}

body {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 0%;
    margin-bottom: 0%;
    padding: 0%;
    background-color: #D0D3C5;
    font-family: Arial, sans-serif;
    background-image:  url("/images/bgvert3.png");
     background-repeat:  repeat-y;
    background-size:  100%;
    background-origin:  content-box;
    background-position-x:  center;
    background-position-y:  top;
}

.content {

   background-color: #475D3F;;
   float: right;
   width: 100%;
   border-top-width: 0px;
  border-top-style: solid;
  border-top-color: #29291F;
}

.head {
    background-color: #29291F;
    //height; 100ch;
    //background-image: url("/images/bggreendark.png");
   // opacity: 0.3;
    background-repeat: no-repeat;
    background-size: 100%;
    //background-origin: content-box;
    //background-position: center;

    #padding: 2%;
}

/* Create three equal columns that floats next to each other */
.column {
   float: left;
   width: 33.33%;
  // padding: 10px;
}

.infoboxcolumn {
   float: left;
   width: 50%;
  // padding: 10px;
}

.infoboxcolumnoffset1 {
   float: left;
   width: 70%;
  // padding: 10px;
}

.infoboxcolumnoffset2 {
   float: left;
   width: 30%;
  // padding: 10px;
}

#col1 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
}
#col2 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
}
#col3 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
}

#col11 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
   display: table-cell;
   padding-top: 0px;
}
#col22 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
   display: table-cell;
    padding-top: 20px;
}
#col33 {
  background-color: #24351B;
  height: 150px;
   text-align: center;
   display: table-cell;
    padding-top: 0px;
}

.landing {
    float: left;
    width: 50%;
    height: 125ch;
    padding: 0px;
    background-image: url("/images/bggreentop6.png");
    background-repeat:  no-repeat;
    background-size:  100%;
    background-origin:  content-box;
    background-position-x:  center;
    background-position-y:  top;
    text-align: center;
    opacity: 1;

    //background-color: #475D3F;
}

.blurb {
  //float: left;
  margin: auto;
  width: 50%;
  padding: 15px;
  text-align: center;
}

/* Create three equal columns that floats next to each other */
.landingcolumn {
    float: left;
    width: 50%;
    height: 125ch;
    padding: 0px;

    text-align: center;

    background-image:  url("/images/logocentered.png");

    background-repeat:  no-repeat;
    background-size:  100%;
    background-origin:  content-box;
    background-position-x:  center;
    background-position-y: top;

    text-align: center;
    opacity: 1;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  //position: absolute;
  //position-right: -38px;
  //background-color: #75846C;
  min-width: 160px;
 // box-shadow: 0px 100px 108px 106px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.pagedropdown {
  position: relative;
  display: inline-block;
}

.pagedropdown-content {
  display: none;
  //position: absolute;
  //position-right: -38px;
  background-color: #75846C;
  min-width: 160px;
  box-shadow: 0px 1px 0px 12px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  border-radius: 25px;
     text-shadow: 2px 2px 4px #000000;
}

.pagedropdown:hover .pagedropdown-content {
  display: block;
}



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

.main {
    background-color: #24351B;
    //padding: 2%;
    margin-top: 10px;
    height: 23ch;
}

.mainb {
    background-color: #24351B;
    //padding: 2%;
    margin-top: 10px;
    height: 55ch;
}

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

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

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


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

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

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

.foot {
    background-color: #red;
    #padding: 2%;
}

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

h1 {
    font-family: feroniaclose;
    color: #F3F1C4;
    font-size: 500%;
      font-style: normal;
      font-weight: normal;
         text-shadow: 2px 2px 4px #000000;

}
h1.landingtitle {
    font-family: feroniaclose;
    color: #F3F1C4;
    font-size: 500%;
      font-style: normal;
      font-weight: normal;
      padding-left: 1%
         text-shadow: 2px 2px 4px #000000;


}

h2{
    font-family: feroniawide;
    color: #F3F1C4;
    font-size:500%;
      font-style: normal;
      font-weight: normal;
         text-shadow: 2px 2px 4px #000000;


}

h3{
    font-family: feroniaclose;
    color: #F3F1C4;
    font-size: 500%;
      font-style: normal;
      font-weight: normal;
      margin-bottom: 0%;
      margin-top: 0%;
         text-shadow: 2px 2px 4px #000000;


}

h3.page{
    font-family: feroniaclose;
    color: #F3F1C4;
    font-size: 500%;
      font-style: normal;
      font-weight: normal;
      margin-bottom: 0%;
      margin-top: 0%;
      float: left;
      margin-left: 3%;
         text-shadow: 2px 2px 4px #000000;


}

a:link {
  text-decoration: none;
  color: #F3F1C4;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

a.menulink:link, a.menulink:visited {
  color: #F3F1C4
}
a.mainlink:link, a.mainlink:visited {
  color: #F3F1C4
}

p {
    color: #F3F1C4;
    font-size: 20pt;
       text-shadow: 2px 2px 4px #000000;
}

hr {
  color: #F3F1C4;
  width: 88%;
     box-shadow: 2px 2px 4px #000000;
}

.infobox {
   background-color: #475D3F;;
   float: right;
   width: 100%;
   border-top-width: 10px;
  border-top-style: solid;
  border-top-color: #29291F;
}



img.infoboximg {
  float: right;
 display: inline;
 // height: 33.3%;
  width: 100%;
}

img.testimonialimg {
 // float: right;
 //display: inline;
 // height: 33.3%;
 width: 100%;
}

/* Social media table styling - based on pagedropdown but always visible */
.social-table {
    background-color: #75846C;
    min-width: 160px;
    box-shadow: 0px 1px 0px 12px rgba(0,0,0,0.2);
    padding: 12px 16px;
    border-radius: 25px;
    text-shadow: 2px 2px 4px #000000;
    border-collapse: collapse;
    width: 90%;
    margin: 3ch auto; /* Center the table */
}

.social-table td {
    padding: 12px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F1C4; /* Horizontal lines like HR tags */
}

.social-table tr:last-child td {
    border-bottom: none; /* Remove border from last row */
}

.social-table img.soclink {
    width: 40px;
    height: 40px;
    margin-right: 0;
}

.social-table p.infoboxtext {
    margin: 0;
    padding-left: 15px;
}


p.infoboxtext{
  color: #F3F1C4;
  float: left;
  width: 100%%;
  margin-left: 3%
}

a[href="mailto:sales@feroniait.co.uk"] {
  color: #F3F1C4;
}

table {
    width: 100%;
    border-collapse: collapse; /* Removes spacing between cells */
}

td {
    padding: 5px; /* Control the padding yourself */
    vertical-align: middle; /* Aligns image and text */
}

img.soclink {
    width: 50px; /* Or whatever size you want */
    height: 50px;
    margin-right: 15px; /* Space between image and text */
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:1376px) {
  .column {
    width: 100%;
  }

  .landing {
    width: 100%;
  }

  .landingcolumn {
    width: 100%;
  }

  .infoboxcolumn {
    width: 100%
  }

  h1 {
    display: none;
  }

}