/*-somerleytonroad.com */

body {
  font-family: 'Raleway', sans-serif;
  position: relative;
  font-weight: normal;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;   overflow-y: scroll;
    padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  background: whitesmoke url(graph-2-12.png) repeat;
}


body * {
  text-shadow: none;
}


@media all and (min-width : 1600px) {
  body {
    width: 100%;
    margin: 0;
  }
}


/* width */
::-webkit-scrollbar {
  width: 14px;
}


/* Track */


/* Handle */
::-webkit-scrollbar-thumb {
  background: #454545;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: goldenrod;
}


/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}

h1 {
  font-size: 2em;
  padding: 64px 5% 0px 5%;
  color: black;
  font-weight: 400
}

h2 {
  font-size: 1.4em;
  color: goldenrod;
  padding: 0px 2.3% 0 23px;
  font-weight: normal;
  line-height: 1.4em;
}

h3 {
  font-size: 1.2em;
  line-height: 1.8em;
  padding: 0px 5% 0 5%;
  font-weight: 400;
  color: black;
}

h4 {
  font-size: .9em;
  padding: 10px 5% 10px 5%;
  color: #ccc;
  font-weight: 100;
}

h5 {
  font-size: 3em;
  padding: 0px 15% 0px 15%;
  color: #aaa;
  font-weight: 100;
  line-height: 1.8em;
}

@media all and (max-width : 768px) {
  h5 {
    font-size: 1.8em;
    padding: 0px 4.2% 0px 4.2%;
    color: #aaa;
    font-weight: 100;
    line-height: 1.8em;
  }
}

h6 {
  font-size: 0.95em;
  color: palegoldenrod;
  padding: 0 4.5%;
  letter-spacing: .2em;
  font-weight: 100;
}

p {
  font-size: .9em;
  margin: 0;
  padding: 0 5%;
  font-weight: 100;
  color: #eee !important;
  letter-spacing: 0.1em;
  line-height: 1.8em;
}

a,
a:link,
a:active,
a:visited {
  color:skyblue !important;
  text-decoration: none;
}

a:hover {
  color: white !important;
}

a {
  outline: none;
}

a:hover {
  color: #222;
  border-bottom: 0px;
  text-decoration: none;
  outline: none;
}


ul li {
  list-style-type: none;
  margin: 0 80px;
  color: #444;
  padding: 0 23px;
}


.sml {
  font-size: 0.23em;
  color: #c00;
}


.top {color: #fff;}

.spacer {
  padding: 2px;
  background: black;
  width: 100%;
}



hr {
  height: 32px;
  background: #ddd;
  border-top: #d5d5d5 12px solid;
  border-bottom: #e5e5e5 60px solid;
}


/*header */
.headertop {
  background: black;
  font-weight: normal;
  color: white;
  width: 100%;
  top: 0;
  height: 50px;
  padding: 14px 0 0px 0;
  position: fixed;
  z-index: 10;
  margin: 0;
}

@media all and (min-width : 1600px) {
  .headertop {
    margin: 0 5% 0 0;
	  padding: 20px 0 0px 0;
  }
}

.headertop a {
  border: 0;
  font-size:1.2rem !important;
  letter-spacing: 0.1rem;
  color: pink !important;
}

.headertop a:hover {
  color: white !important;
}

.headertop h1 {
  padding: 8px 16px 0 0%;
  font-weight: normal;
  margin: 0px;
  font-size: 1.2em;
  text-align: right;
  color: white;
  letter-spacing: .05em;
}


/*-- #intro ------------------*/

#intro {

  height: auto;
  margin: 100px 0 0 0;
  width: 100%;
  padding: 0;
}




#intro h2 {
  padding: 60px 15px 6px 4.5%;
}


#intro a {
  padding: 0 0 2px 4px;
}



@media all and (max-width : 768px) {
  #intro p {
    padding: 0 23px 2.3% 4.5%;
  }

  #intro h2 {
    padding: 0 0 0 4.5%;
  }
}


  #intro img {width: 98%; height: auto; margin: 0%; padding: 0; 
	box-shadow: 0px 0px 0px rgba(23, 23, 23, 0.5); 
	border: 1px solid white !important; 
	background:#c3c3c3;}
	

	@media all and (min-width : 1900px) {
    #intro img {width: 31%; height: auto; margin: 2% 1%; padding: 0%; }
    }

   @media all and (max-width : 1899px) {
   body {width: 100%; margin: 0 ;  }
   #intro img {max-width: 47%; height: auto; margin: 4% 1%; padding: 0; }
   }

   @media all and (max-width : 1300px) {
   #intro img {max-width: 98%; height: auto; margin:5% 1%; padding: 0; }	
   }


/*--#first ------------------*/

#first {
  background: black;
  height: 40px;
  margin: 0px;
  width: 100%;
  border: 0px;
  float: left;
  margin: 0;
}

#first a:hover {
  opacity: 1;
}

#first img {
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

/*#hide {display:none;}*/

.top {
  opacity: .8;
}

.news {
  width: 100%;
  height: auto;
  background: #100d30 url(bg_body-rock2.png)repeat;
  padding: 3.2% 0 0 0;
  text-align: left;
}

.news h1 {
  color: goldenrod;
  font-size: 1.6em;
}

.news h2 {
  color: gold !important;
  font-weight: 100;
}

.news p {
  line-height: 2.3em !important;
  padding: 0 !important;
}


/*------------ #display -----------------*/
#work {
  width: 60%;
  margin: 0 20% 5% 20%;
  background: transparent;
  height: auto;
  box-shadow: 0px 0px 60px rgba(23, 23, 23, .23);
}

#pic {
  width: 100%;
  height: auto;
  margin: 0;
  background: black !important;
  padding: 0;
}

#pic img {
  width: 100%;
  padding: 0;
}

#pic h2 {
  color: goldenrod;
  background: black;
  padding: 23px 0 2.3% 23px;
}

#pic p {
  color: white;
}

#pic2 {
  background: black !important;
}

#pic2 h2 {
  color: goldenrod;
}

#pic2 p {
  color: white;
}


.sub {
  width: 100%;
  height: 60px;
  padding: 0%;
  background: #000;
  margin: 0;
}

.sub h3,
.sub2 h3 {
  padding: 6px 16px 0px 0px;
  font-size: .9em;
  color: white;
  margin: 0;
  text-align: right;
}

.sub p {
  padding: 0px;
  font-size: .7em !important;
  color: #ccc;
  ;
}

.sub a:hover {
  color: #f00;
}

.sub2 {
  width: 100%;
  height: auto;
  padding: 0;
  background: #000;
  margin: 0;
}

@media all and (max-width : 1600px) {
  #work {
    width: 95%;
    margin: 0 2.5% 5% 2.55%;
    height: auto;
     padding: 0 0 12% 0;
  }

  .sub {
    height: 40px;
  }
}

@media all and (max-width : 800px) {
  #work {
    width: 95%;
    margin: 0 2.5% 5% 2.5%;
    height: auto;
  }
}

@media all and (max-width : 600px) {
  .sub {
    height: auto;
  }

  .sub h3 {
    padding: 0px 8px 14px 8px;
  }
}

@media all and (max-width : 480px) {
  #work {
    width: 100%;
    margin: 0 0% 5% 0%;
    height: auto;
  }
}

/*------------------ #second --------------*/
#second {
  background: black;
  height: auto;
  padding: 0;
  width: 100%;
  float: left;
  margin: 10% 0 0 0;
  border-top: 2px solid white;
}

#second h2 {
  padding: 12px 23px 12px 4.5%;
}

#second h3 {
  color: white;
  margin: 8px 9% 6px 4.5%;
  padding: 10px 0 0 0px;
}

#second h4 {
  font-size: .9em;
  padding: 6px 0px 0px 12px;
  color: #aaa;
  font-weight: 100;
}


/*------------ #footer -----------------*/
.footer {
  background: #222;
  float: left;
  width: 90%;
  text-align: right;
  height: auto;
  bottom: 0;
  padding: 2% 5%;
  margin: 0;
}

.footer.fixed {
  position: inherit;
  bottom: 0;
  left: 0;
}

.footer a {
  color: white;
  padding: 0 0 2px 0;
  border-bottom: 1px dashed white !important;
}

.footer a:hover {
  border: 0;
}

.footer h2 {
  padding: 0 0 0 23px;
}

.footer h3 {
  color: white !important;
  padding: 0;
}

.footer p {
  color: white;
  padding: 0%;
}


#blackbox2 {background: #c3c3c3; width: 100%; height: auto;}
/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ */

.toggle,
[id^=drop] {
  display: none;
}

nav {
  margin: 0;
  padding: 0;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  width: 2800px;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  z-index: 20;
  width: 2800px;
}

nav a {
  display: block;
  padding: 0 0 0 8px;
  background: transparent;
  color: black;
  font-size: .9em;
  line-height: 50px;
  text-decoration: none;
  border: 0 !important;
}

nav ul li ul li {
  background: black;
}

nav ul li ul li:hover {
  background: black;
}

nav a:hover {
  color: goldenrod
}

nav ul ul {
  display: none;
  position: absolute;
  top: 50px;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  width: 230px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li>a:after {
  content: ' ';
}

li>a:only-child:after {
  content: '';
}

/* Media Queries */
@media all and (max-width : 2768px) {

  .toggle+a,
  .menu {
    display: none;
  }

  .toggle {
    display: block;
    background-color: black;
    padding: 0;
    color: white;
    padding: 0 32px;
    line-height: 40px;
    text-decoration: none;
    border: none;
    margin: 0;
  }

  .toggle:hover {
    color: goldenrod;
  }

  [id^=drop]:checked+ul {
    display: block;
  }

  nav ul li {
    display: inline-block;
    width: 2800px;

  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 20px;
    color: white;
  }

  nav ul ul ul a {
    padding: 0 10px;
    color: white;
  }

  nav a:hover,
  nav ul ul ul a {
    background-color: black;
    color: goldenrod !important;
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: black;
    color: white;
  }

  nav ul ul {
    float: none;
    position: static;
    color: white;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
    color: white;
  }

  nav ul ul ul li {
    position: static;
  }
}


 @media all and (max-width : 330px) {
  nav {
    background: black;
  }

  nav ul li {
    display: block;
    width: 100%;
  }
}