/* MOBILE */
* {
  margin: 0;
  padding-top: 0;
  -moz-box-sizing: border_box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@font-face {
font-family: testFont;
src: url('20542252197.ttf');
}
#middle {
font-family: testFont;
font-style: italic;
}
a:link {
  color: #d2650a;
  text-decoration: none;
  letter-spacing: 0.1em;
}

a:link img, a:visited img {
 text-decoration: none;
  border: none;
}

a:visited {
color: #d2650a;
text-decoration: none;
}

a:hover {
-webkit-text-fill-color: #ffffff; /* Will override color (regardless of order) */
-webkit-text-stroke: 2px 0 10px #9e9e9e;
text-shadow: 2px 0 6px black;
}

a:current {
-webkit-text-fill-color: #726f6f; /* Will override color (regardless of order) */
-webkit-text-stroke: 2px 0 10px #ffffff;
text-shadow: 2px 0 6px #d2640ad2;
letter-spacing: 0.1em;
}

.pad-left {
padding-left: 60px;
}

.right {
padding-right: 20px;
text-align: right;
font-size: 130%; /* in respect of retouch btm line*/
font-family: testFont;
}

h1 {
font-family: testFont;
font-size: 1.7em;
text-align: right;
padding-right: 20px;
}

h2 {
  font-size: 1.1em;
  text-align: right;
  padding-left: 20px;
}

h3 {
  font-size: 1.2em;
  margin-top: 20px;
  padding-left: 60px;
}

h6 {
font-size: 1.2em;
padding-left: 0.3em;
}

.bullet {
font-family: testFont;
font-size: 130%;
padding: 0 10px 10px 50px;
}

.bullet:before {
content: "- "
}

#page-nav {
  width: 100%;
  /* If you want the navigation bar to stick on top*/
  position: sticky;
  top: 0;
}

/* Hide Hamburger */
#page-nav label, #hamburger {
  display: none;
}

/* Menu Items */
#page-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#page-nav ul li {
  min-height: 50px;
  line-height: 28px;
  margin: auto 20px auto 20px;
  background-color: rgba(255, 255, 255, 0.808);
}

#page-nav ul li a {
  color: #d2650a;
}

.angle-right {
transform: rotate(4deg);
-ms-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-o-transform: rotate(4deg);
width: 80%;
}

.angle-left {
transform: rotate(358deg);
-ms-transform: rotate(358deg);
-moz-transform: rotate(358deg);
-webkit-transform: rotate(358deg);
-o-transform: rotate(358deg);
width: 80%;
}

.img-middle-1 {
  display: table-cell;
  width: 40%;
}

.img-middle-2 {
  display: table-cell;
  width: 60%;
}

.where {
  font-family: testFont;
  font-size: 12px;
  margin-left: 1px;
  margin-top: 60px;
}

                                /* [ M O B I L E ] */
                                /* [ M O B I L E ] */
                                /* [ M O B I L E ] */

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

  a:hover .menu{
    display: list-item;
    width: 100%;
    font-weight: normal;
    -webkit-text-fill-color: black; /* Will override color (regardless of order) */
    -webkit-text-stroke: none;
    text-shadow: none;
    text-decoration: none;
    background-image: linear-gradient(to bottom, #ffffff42 10%, #ffffffb2 50%, #ffffff9a 90%);
    }

  li current {
    display: none;
  }

  .wrapper {
    width: 100%;
    background-image: url(images/bg-5.png);
    background-size: auto;
    background-repeat: repeat-y;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }

  #container-simple{
    width: 100%;
  }
  
  #logo-field-wrapper {
    display: block;
    position: fixed;
    width: 100%;
    min-height: 150px;
  }

  .logo-field{
    width: 100%;
    top: 0;
    position: fixed;
  }


  /* this is only for the hamburger symbol */
  #page-nav label {
    position: fixed;
    display: inline-block;
    color: #d2650a;
    font-size: 3.2em;
    margin-top: 8px;
    margin-left: 10px;
    padding-bottom: 5px;
    background-color: rgba(255, 255, 255, 0.486);
  }

  /* Break down menu items into vertical */
  
  #page-nav ul li {
    display: block;
    position: relative;
    margin-bottom: 2px;
    font-size: 140%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 70px;
  }


  /* Toggle show/hide menu on checkbox click */
  #page-nav ul {
    display: none;
  }
  #page-nav input:checked ~ ul {
    width: 100%;
    display: block;
    padding-top: 120px;
  }


#second-row {
  width: 100%;
  min-height: 80px;
  position: relative;
  background-image: url(images/2020_colour_city_2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}

.middle {
width: 88%;
margin: 0 auto;
position: relative;
font-family: testFont;
color: rgb(31, 30, 30);
font-style: italic;
border-right-width: 4px;
border-left-width: 4px;
border-style: solid;
border-image: linear-gradient(
  to bottom, 
  #d2650a,
  #290a59
  ) 1 100%;
}

.contact-form {
width: 100%;
min-height: 480px;
margin: 0 auto;
padding: 0 10% 0 10%;
font-size: 110%;
background-image: linear-gradient(to bottom, rgba(253, 251, 251, 0) 5%, rgba(250, 249, 249, 0.459) 20%, rgba(250, 249, 249, 0.459) 60%, rgba(253, 253, 253, 0) 80%); /* Standard syntax (must be last) */
}

.parent {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, auto);
grid-column-gap: 2px;
grid-row-gap: 2px;
}

.div3 { grid-area: 1 / 1 / 2 / 3;
  background-color: rgba(255, 255, 255, 0.486);
  color: #d2650a;
  font-size: 120%;
  padding-bottom: 8%;
  position: relative;
}
.div4 { grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div5 { grid-area: 2 / 2 / 3 / 3;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div6 { grid-area: 3 / 1 / 4 / 2;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div7 { grid-area: 3 / 2 / 4 / 3;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div8 { grid-area: 4 / 1 / 5 / 2;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div9 { grid-area: 4 / 2 / 5 / 3;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div10 { grid-area: 5 / 1 / 6 / 2;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 4%;
  padding-bottom: 4%;
}
.div11 { grid-area: 5 / 2 / 6 / 3;
  background-color: rgba(255, 255, 255, 0.171);
  padding-top: 8%;
  padding-bottom: 8%;
}
.div12 {display: none;}
.div13 { grid-area: 6 / 1 / 7 / 3;
  background-color: rgba(255, 255, 255, 0.486);
  color: #d2650a;
  padding-bottom: 10px;
}

#content-wrapper {
display: none;
}

#scroller {
display: block;
width: 100%;
margin: 0 auto;
}

#small {
display: inherit;
}

.small-content-wrapper {
width: 100%;
margin: 0 auto;
}

.small-container {
width: 96%;
margin: 0 auto;
display: block;
background-image: linear-gradient(to bottom, #ffffffb2 10%, #ffffff23 30%, #ffffffc9 45%, #ffffff23 80%, #ffffffd2 90%);
padding: 10px 20px 10px 20px;
border-right-width: 2px;
border-left-width: 2px;
border-style: solid;
border-image: linear-gradient(
  to bottom, 
  #d2650a,
  #290a59
  ) 1 100%;

}

h4 {
font-family: testFont;
padding: 10px 20px 10px 0;
font-size: 130%;
text-align: right;
}

h2 {
font-family: testFont;
padding: 10px 0 10px 0;
font-size: 160%;
border-top: #d2650a;
border-top-style: solid;
border-top-width: thin;
}

.margin-right {
margin: 10px auto 20px auto;
font-family: testFont;
text-align: justify;
font-size: 130%;
}


.content {
width: 100%;
position: relative;
padding-top: 100px;
margin: 0 auto;
}

.content h2 {
padding: 10px 20px 0;
font-family: testFont;
font-size: 1.4em;
letter-spacing: 0.1em;
background-color: rgba(255, 255, 255, 0.788);
float: right;
}

.content p {
padding: 0 20px 10px;
font-family: testFont;
font-size: 14px;
line-height: 24px;
background-color: rgba(255, 255, 255, 0.788);
text-align: justify;
float: right;
}

.makeover-mob {
display: block;
}


.img-logo {
padding-top: 10px;
padding-left: 24%;
width: 80%;
}

.img-me-wide {
width: 100%;
padding-top: 50px;
}

.img-map-wide {
width: 100%;
top: -50px;
}
.img-center {
position: relative;
top: 50%;
transform: translateY(-50%)
}

#footer {
width: 100%;
padding-left: 20px;
padding-right: 20px;
text-align: center;
font-family: testFont;
font-size: 12px;
line-height: 16px;
}
#slides-mobile {
width: 100%;
min-height: 100px;
padding-bottom: 20px;
}
/*contact*/

.contact-holder {
  width: 88%;
  position: relative;
  margin: 0 auto;
  font-family: testFont;
  font-style: italic;
  font-size: 14px;
  background-image: linear-gradient(to bottom, rgba(253, 251, 251, 0) 5%, rgba(250, 249, 249, 0.459) 20%, rgba(250, 249, 249, 0.459) 60%, rgba(253, 253, 253, 0) 80%); /* Standard syntax (must be last) */
  border-right-width: 4px;
  border-left-width: 4px;
  border-style: solid;
  border-image: linear-gradient(
    to bottom, 
    #d2650a,
    #290a59
    ) 1 100%;
  
  }
  .contact-web {
    width: 80%;
    margin: 0 auto;
    display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 90px repeat(4, 40px) 100px repeat(6, 65px);
  grid-column-gap: 0px;
  grid-row-gap: 0px; 
  font-family: testFont;
    }
  
    button {
      width: 6em;
      height: 1.5em;
      font-family: testFont;
      font-style: italic;
      font-size: 1.2em;  
  }
  
  
    input[type=submit] {
      width: 6em;
      height: 1.5em;
      font-family: testFont;
      font-style: italic;
      font-size: 1.2em;  
  }
  
  
    .div100 {
       grid-area: 1 / 1 / 2 / 3;
       } 
    .div14 {     
      font-family: testFont;
      grid-area:  2 / 1 / 3 / 2;
      }
  
    .div15 { 
      grid-area: 2 / 2 / 3 / 3;
     }
    .div16 { 
      font-family: testFont;
      text-align: left;
      grid-area: 3 / 1 / 4 / 2;
     }
    .div17 { 
      font-family: testFont;
      text-align: left;
      grid-area: 3 / 2 / 4 / 3;
      }
  
    
    .div18 { font-family: testFont;
      grid-area: 4 / 1 / 5 / 2;
     }
     .div23 { 
      font-family: testFont;
      font-size: 14px;
      text-align: left;
      grid-area: 4 / 2 / 5 / 3;
      } 
    .div19 { 
      font-family: testFont;
      grid-area: 5 / 1 / 6 / 2;
      }
     .div20 { 
      display: none;
      }
     .div99 { 
      text-align: left;
      font-family: testFont;
      grid-area: 6 / 1 / 7 / 3;
      }

     .div25 {
      grid-area: 7 / 1 / 8 / 2;
      font-family: testFont;
      font-style: italic;
      font-size: 14px;
      }
      .div27 {
      grid-area: 7 / 2 / 8 / 3;
      }

      .div21 { 
      font-family: testFont;
      text-align: left;
      grid-area: 8 / 1 / 9 / 2;
      }
      .div30 { 
        font-family: testFont;
        text-align: left;
        grid-area: 8 / 2 / 9 / 3;
       }

     
    .div33 {
      grid-area: 10 / 1 / 11 / 2;
      font-family: testFont;
  font-style: italic;
  font-size: 16px;
  
    } 
    .div35 {
      grid-area: 10 / 2 / 11 / 3;
    }  
   
    .div24 {
      grid-area: 9 / 1 / 10/ 2;
      font-family: testFont;
  font-style: italic;
  font-size: 16px;
    }
    .div32 {
      grid-area: 9 / 2 / 10/ 3;
    }
  
    .div26 {
      grid-area: 7 / 1 / 8 / 3;
    }
    .div34 {
      grid-area: 11 / 1 / 12 / 3;
    }
    .div90 {
      grid-area: 8 / 2 / 9 / 3;
    }
  
    .div45 {
      display: none;
    }
    
  }