/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/barlow-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/barlow-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/barlow-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/barlow-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/barlow-v12-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* saira-regular - latin */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/saira-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/saira-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/saira-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/saira-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/saira-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/saira-v14-latin-regular.svg#Saira') format('svg'); /* Legacy iOS */
}

* {font-size: 20px; font-family: "Barlow", sans-serif; line-height: 28px;  box-sizing: border-box;}

body {
  background-color: #e8eef7;
  padding: 10px 80px;
}

#song {
	background:url(images/veganflag.jpg);
	background-size: auto;
	background-position: center top;
	background-repeat: no-repeat;
}

.content {
	width: 88%;
	margin: 20px auto;
	padding: 25px;
	background-color: rgba(198, 207, 210, 0.9);
	border-radius: 7px;
	-webkit-box-shadow: 2px 2px 4px 0px rgba(36,33,36,1);
	-moz-box-shadow: 2px 2px 4px 0px rgba(36,33,36,1);
	box-shadow: 2px 2px 4px 0px rgba(36,33,36,1);
	height: 100%;
}

nav {font-weight:600; text-align:center; margin: auto; line-height: 35px; margin-top: -5px;}
nav a {margin-right: 28px; font-size: 20px;}
nav a:link, nav a:visited {color: #067A07;}
nav a:hover {text-decoration: overline; color: #02307D;}

a:link {color: #02307D; text-decoration: none;}
a:hover {color: #067A07; text-decoration: underline;}
a:active  {color: #417ebb; text-decoration: none;}

.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.clear {clear: both;}

.bold {font-weight: 600;}

h1 {font-size:  30px;  font-family: "Saira", sans-serif; color: #113543;} /* 13c679 */

h2 {font-size:  25px; color: #113543; margin: 0; line-height: 35px;}

h3 {font-size:  21px; color: #067a07;}

h4 {font-size:  18px;}

h5 {font-size:  18px;}

header {height: 55px;}

.logo {margin-left: -30px;}

section {clear: both; padding: 0 30px;}

.heading {margin: 0 auto; padding-bottom: 30px;}

footer {font-size: 12px; font-weight: 600; text-align: center;}

.cols {/*max-width: 1020px*/; display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}

.row {display:inline-block;}

.padtop {padding-top: 2rem;}

.songbox {margin: 30px 0;}

.style1 {font-size: 14px; font-weight: bold; }

.style2 {color: #990066}

.small {font-size: 11px;}

.smaller {font-size: 16px;}

.line {line-height: 30px}

.border {border: solid 1px #CC3366} 

iframe {margin: 0 auto; display:block;}

.patreon {margin-top: -6px; vertical-align: middle;}

.reverbnation {width:0px; min-width:80%; max-width:80%; margin-top: 20px;}
.reverbcaption {max-width:80%; margin: 10px auto 0; text-align: center;}

.picshadow 
{-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.6);
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.6);}

/* Mobile prep */
.nav {display: none;}

/* Mobile  */

@media only screen and (min-width: 1230px){
.heading {width: 77%;}
.logo img {width: 85%;}
img.responsive {max-width: 400px;}
}


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

/* Hide desktop nav */
.topnav {display: none;}

/* Mobile nav */
.nav-mobile {display: block; cursor: pointer; background: url(images/nav.png) no-repeat center center; background-size: 44px; opacity: 0.7; height: 60px; width: 60px; position: relative; z-index: 1000}
.nav {display: block; width: 100%; padding-top: 60px;}
.nav, .nav a {font-size: 18px;} 
.nav-list {display: none; background-color: rgb(126, 195, 202,0.85); padding: 0; margin: 0; list-style:none !important; position: relative; z-index: 1000;}
.nav > ul > li {border: solid #067A07; border-width: 1px 0 0 0; padding: 9px;}


/* Youtube videos */

.videowrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.logo img {width: 75%;}
img.responsive {width: 100%;}
}


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

body { padding: 10px 30px;}
.social {margin-top: 20px;}
.content {width: 94%;}
.reverbnation {min-width:89%; max-width:89%;}
.reverbcaption {max-width:89%;}
.nav-list {background-color: rgb(156,213,190,0.9);}
.intro {font-size: 24px;} 
}

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

.content {display:block; width: 98%;}
.pic {margin: 0 auto}
.reverbnation {min-width:97%; max-width:97%;}
.reverbcaption {max-width:97%;}
.logo img {width: 70%;}
h1 {padding-top: 20px;}
.intro {font-size: 22px;} 
}

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

.pic {width:100%;}
body { padding: 10px;}
nav a{font-size: 19px; line-height: 35px; margin-right: 20px;}
.logo img {width: 60%;}
h1 {font-size: 28px;}
h2, .intro {font-size: 20px;} 
}

/* Share buttons*/

.resp-sharing-button__link, .resp-sharing-button__icon {display: inline-block;}

.resp-sharing-button__link {text-decoration: none; color: #fff; margin: 0.5em;}

.resp-sharing-button {border-radius: 5px; transition: 25ms ease-out; padding: 0.2em 0.65em 0.4em;}

.resp-sharing-button__icon svg {width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top;}

.resp-sharing-button--small svg {margin: 0; vertical-align: middle;} /* Non solid icons get a stroke */

.resp-sharing-button__icon {stroke: #fff; fill: none;} /* Solid icons get a fill */

.resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {fill: #fff; stroke: none;}

.resp-sharing-button--twitter {background-color: #55acee;}

.resp-sharing-button--twitter:hover {background-color: #2795e9;}

.resp-sharing-button--pinterest {background-color: #bd081c;}

.resp-sharing-button--pinterest:hover {background-color: #8c0615;}

.resp-sharing-button--facebook {background-color: #3b5998;}

.resp-sharing-button--facebook:hover {background-color: #2d4373;}

.resp-sharing-button--tumblr {background-color: #35465C;}

.resp-sharing-button--tumblr:hover {background-color: #222d3c;}

.resp-sharing-button--reddit {background-color: #5f99cf;}

.resp-sharing-button--reddit:hover {background-color: #3a80c1;}

.resp-sharing-button--google {background-color: #dd4b39;}

.resp-sharing-button--google:hover {background-color: #c23321;}

.resp-sharing-button--email {background-color: #777;}

.resp-sharing-button--email:hover {background-color: #5e5e5e;}

.resp-sharing-button--whatsapp {background-color: #25D366;}

.resp-sharing-button--whatsapp:hover {background-color: #1da851;}