/*
Design: mairead (November 2018), by David Mitchell - Stray Cat Web Development
*/

/*Font face - these are uploaded to hedgehogcycling /fonts folder*/





@font-face {
 font-family: 'latoregular';
 src: url('fonts/lato-regular.woff2') format('woff2'),
 
 url('fonts/lato-regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;

}





@font-face {
 font-family:'latobold';
 src: url('fonts/lato-bold.woff2') format('woff2'),
  
url('fonts/lato-bold.woff') format('woff'); font-weight: bold

 ; font-style: bold;

}





@font-face {
 font-family: 'latoitalic';
 src: url('fonts/lato-italic.woff2') format('woff2'),

url('fonts/lato-italic.woff') format('woff');
 font-weight: normal;
 font-style: italic;

}


/*!
CSS in Easy Steps reset
*/

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
abbr,acronym{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
ol,ul{list-style:none}
caption,th{text-align:left}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}


/*Body*/

body { background : #fff url(images/background-wildlife.jpg) top center no-repeat ; color : #404040 ; 
font-size : 1rem ; line-height : 1.3em ; 
font-family : 'latoregular', Verdana, Geneva, sans-serif }


/*Header*/

header p { font-family : Constantia, Palatino, serif ; color : #015249 ; font-size : 2.5rem ; 
line-height : 1.2rem ; margin-bottom : 1.4rem }
p.header a { color : #015249 }
p.header a:hover { color : #AA9655 ; text-decoration : none }


/*Navmenu*/

.navmenu { font-size : 1.2rem ; color : #015249 ; line-height : 1.4rem ; margin-top : 1.2rem }
.navmenu a { color : #AA9655 ; text-decoration : none }
.navmenu a:hover { color : black ; text-decoration : none }


/*General styles*/

h1, h2, h3, h4 { font-family : Constantia, Palatino, serif ; color : #015249 ; font-weight : 400 ; 
line-height : 1.4rem }

h1 { font-size : 2rem ; padding : 1.2rem 0 }
h2 { font-size : 1.5rem }
h3 { font-size : 1.3rem }
h4 { font-size : 1.1rem }

h2, h3, h4 { margin : 0 0 8px 0 }

h1 a { color : #015249 }
h1 a:hover { text-decoration : none }

h2 a { color : #015249 }
h2 a:hover { text-decoration : none }

h3 a { color : #015249 }
h3 a:hover { text-decoration : none }

p, ul, ol, dl, q, blockquote { margin :0 0 15px 0 }
ul.disc { list-style-type : disc }
ol.decimal { list-style-type : decimal }

a {color : #77693C ; text-decoration : none }
a:hover {color : black ; text-decoration : underline }
a:active {color : black ; text-decoration : underline }

img { max-width : 100% ; height : auto }


/*Header image and thumbnails*/

.headerimage {border-radius : 12px ; margin-bottom : 10px ; object-fit : contain }


/*Wrapper div*/

div#wrapper { margin : 40px auto 40px ; background : white ; max-width : 980px ; 
padding-left : 10px ; padding-right : 10px }


/*Mobile*/

@media screen and (max-width : 640px){
.column { display : block ; width : 100% }
.sidebar { display : none }
}


/*Tablet*/

@media screen and (min-width : 641px) 
{
.parent { display : flex }
.sidebar { display : display ; flex : 1 ; padding-right : 15px}
.main { flex : 3 ; padding-left : 10px }
.nested { display : flex }
.left { flex : 1 }
.right { flex : 1 }
}

/*Desktop*/

@media screen and (min-width : 1025px) 
{ 
.sidebar { flex : 1 }
.main { flex : 4 }
}


/*Styling for feature div */

.feature { background:#f2f2f2 ; padding:10px ; border : 2px #77693C solid; 
box-shadow : 5px 5px #C0B283 ; margin : 20px 0 }
.feature img { max-width : 100% }


/*Text classes*/

.aligncenter { text-align : center }
.slogan { color : #888 ; font-size : 1.2em ; font-family : 'latoitalic' ; font-style : italic }
.larger { font-size : 1.2em }
.smaller { font-size : 0.9em }


/*Figure and figcaption and arty image*/

figure { display : block ; margin : 0 0 15px 0 }
figcaption { font-size : 0.8rem }
img.arty {border : 1px solid #323232 ; padding : 3px ; background : #fff ; border-radius : 12px ;
box-shadow : 3px 3px 5px #808080 }


/*Menu list*/

ul.menu { padding : 10px 0 }
ul.menu li { font-size : 1.1em ; margin-bottom : 5px }
ul.menu a { color : #AA9655 }
ul.menu a:hover { color : black ; text-decoration : none }
ul.menu a:active { color : #800000 ; text-decoration : none }


/*Footer*/

footer { margin-top : 20px ; padding : 0.05cm 0 0.05cm 0; width : 80% ; margin : auto ; 
background-color : #f2f2f2 ; border : 2px #b3b3b3 dotted ; border-bottom : 0px }
footer p {text-align : center }