*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}html{font-family:Arial,sans-serif;font-size:137.5%;-webkit-font-smoothing:antialiased}p{line-height:1.5rem;margin-top:1.5rem;margin-bottom:0}ul,ol{margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ol ul,ul ol,ol ol{margin-top:0;margin-bottom:0}blockquote{line-height:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}table{margin-top:1.5rem;border-spacing:0;bordercollapse:collapse}table td,table th{padding:0;line-height:33px}code{vertical-align:bottom}
html{font-size:16px}@media (min-width:769px){html{font-size:18px}}@media (min-width:1025px){html{font-size:20px}}@media (min-width:1441px){html{font-size:22px}}h1,h2,h3,h4,h5,h6{font-family:sans-serif;margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.289rem;line-height:3.3rem}h2{font-size:1.8312rem;line-height:2.74rem}h3{font-size:1.464rem}h4{font-size:1,17,18rem}h5{font-size:1rem}h6{font-size:.9rem}sub{font-size:.6em}h1 sub,h2 sub,h3 sub,h4 sub,h5 sub,h6 sub{display:block}section{padding:2rem 0}
.grid{ margin:0; width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; padding:0 0 0 1rem } .grid>div{ box-sizing:border-box; padding:0 1rem 0 0 } .grid.grid-nopad{ padding:0; } .grid.grid-nopad, .grid>div.col-nopad{ padding:0; } .grid>div.col-pad{ padding-left:1rem; } .grid .col-100,.grid .col-12,.grid .col-25,.grid .col-33,.grid .col-50,.grid .col-66,.grid .col-75{ width:100% } @media(min-width:600px){ .grid .col-12,.grid .col-25,.grid .col-50,.grid .col-75{ width:50% } .grid .col-12.col-center,.grid .col-25.col-center,.grid .col-50.col-center{ margin:0 25% } } @media(min-width:768px){ .grid{ padding:0 0 0 3rem } .grid>div{ padding:0 3rem 0 0 }.grid>div.col-pad{ padding-left:3rem; } .grid .col-25{ width:25% } .grid .col-25.col-center{ margin:0 37.5% } .grid .col-33{ width:33.333333333333333333% } .grid .col-33.col-center{ margin:0 33.333333333333333333% } .grid .col-66{ width:66.66666666666666666666666% } .grid .col-66.col-center{ margin:0 17% } .grid .col-75{ width:75% } .grid .col-75.col-center{ margin:0 12.5% } } @media(min-width:1024px){  .grid .col-12{ width:12.5% } .grid .col-12.col-center{ margin:0 43.75% } } @media(min-width:1480px){ .grid{ padding:0 0 0 4rem } .grid>div{ padding:0 4rem 0 0 }.grid>div.col-pad{ padding-left:4rem; } } @media(min-width:1920px){ .grid{ padding:0 0 0 4rem } .grid>div{ padding:0 4rem 0 0 } }

/************************
 *		GLOBAL DEFAULTS
 ***********************/

@font-face {
    font-family: 'Roboto';
    src: url('/webfont/Roboto-Regular.woff2') format('woff2'),
        url('/webfont/Roboto-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Trueno';
    src: url('/webfont/TruenoLt.woff2') format('woff2'),
        url('/webfont/TruenoLt.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

body {
	background:#171819;
	padding-top:4rem;
	color:#FEFEFE;
	font-family:'Roboto', Arial;
}

h2,h3,h4 {
	font-family:'Trueno', Arial;
	color:#2bb08d;
}

a {
	color:#2bb08d;
}

ul {
	margin:.5rem 0 0 ;
	padding:0;
}

ul li {
	position:relative;
	list-style:none;
	margin-left:1rem;
}
	ul.dot li:before {
		position:absolute;
		display:inline-block;
		top:.6rem;
		left:-.8rem;
		width:.4rem;
		height:.4rem;
		content:'';
		border-radius:50%;
		background:#2bb08d;
	}
	ul.check li:before {
		position:absolute;
		display:inline-block;
		top:.4rem;
		left:-1rem;
		width:.6rem;
		height:.6rem;
		content:'';
		background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path fill="%232bb08d" d="m0 14 3-3 10 9L29 5l3 3-19 19"/></svg>');
		background-size:cover;
	}

.section {
	border-top:6px #2bb08d solid;
}


/************************
 *		FRAME
 ***********************/

#page-header {
	position:fixed;
	width:100%;
	top:0;
	height:4rem;
	background:#080808;
	z-index:999;
}

#nav-logo-link {
	display: block;
  float: left;
  width:5.3rem;
  padding: 10px 20px;
  text-decoration: none;
}

#nav-wrap {
	width:4rem;
	height:4rem;
	float:right;
}

#nav {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: #1f2124;
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  position:fixed;
  top:4rem;
  left:0;
  right:0;
}

#nav li a {
	display:block;
	text-align:center;
	font-size:1.2rem;
	line-height:4rem;
	text-decoration:none;
	color:#9ea8b3;
}

#nav-icon {
	height:4rem;
	width:4rem;
  cursor: pointer;
  display: inline-block;
  position: relative;
  user-select: none;
}

#nav-icon > span {
  background: #9ea8b3;
  display: block;
  height: .3rem;
  top:1.8rem;
  position: relative;
  transition: background .2s ease-out;
  width: 2.9rem;
}
#nav-icon > span:before,
#nav-icon > span:after {
  background: #9ea8b3;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

#nav-icon > span:before {
  top: .9rem;
}

#nav-icon > span:after {
  top: -.9rem;
}

#nav-btn {
  display: none;
}

#nav-btn:checked ~ #nav {
  max-height: 100%;
}

#nav-btn:checked ~ #nav-icon > span {
  background: transparent;
}

#nav-btn:checked ~ #nav-icon span:before {
  transform: rotate(-45deg);
}

#nav-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

#bar-wrap {
	text-align:center;
	background:#111;
	padding: .1rem 0 2rem;
}


@media (min-width: 48em) {
	#nav {
		top:0;
		position:relative;
	}
}


/************************
 *		SECTIONS
 ***********************/

/***	WELCOME  ***/
#welcome-center {
	padding:2rem .5rem;
	background:url('/img/background-top.jpg') no-repeat;
	background-size:cover;
}

#welcome-logo {
	width:10rem;
	height:10rem;
	max-width:60%;
	display:block;
	text-indent:-9999em;
	background:url('/img/logo-600x600.png') no-repeat;
	background-size:cover;
	margin:0 auto 2rem;
}

#welcome-wrap h2 {
	text-align:center;
}


/***	LESSONS ***/

#lessons-intro-wrap {
	background: #232426
}
#lessons-text-wrap {
	padding-top:1rem;
	padding-bottom:1rem;
}
#lessons-bg {
	background:url(/img/guitar.jpg) 60% no-repeat;
	background-size:cover;
}

#ul-adv {
	margin-bottom:2rem;
}

/*** CALL TO ACTION ***/

#cta-wrap {
	background:#2bb08d;
	text-align:center;
	padding:1rem 1rem 3rem;
	margin-top:2rem;
}
#cta-wrap, #cta-wrap h3, #cta-wrap a {
	color:#FFF;
}


/*** ABOUT ME ***/

#about-wrap {
}

#about-image {
	min-height:15rem;
	background:url(/img/leo-kraus.jpg) center no-repeat;
	background-size:cover;
}

#about-sign {
	margin:0 2rem 0 0;
	float:right;
	width:5rem;
	max-width:30%;
}

#about-text {
	padding:1rem 0 4rem;
}

/***	CONTACT ***/

#contact-wrap {
	padding:1rem 0;
}

#contact-form li {
	position:relative;
	padding-top: 1.6rem;
	margin: 0 0 .5rem 0;
}
#contact-form li.button {
	padding:0
}
#contact-form label {
	position:absolute;
	color:#FFF;
	top:0;
}
#contact-form input, #contact-form textarea {
	width:100%;
	outline:none;
	border:2px solid #FFF;
	border-radius:.3rem;
	padding:.5rem;
}
#contact-form button {
	padding:.5rem 1rem;
	border:0;
	cursor:pointer;
	color:#FFF;
	border-radius:.3rem;
	background:#2bb08d;
}
#contact-data {
	margin-top:4rem;
}

#contact-data li {
	margin:0;
}

#form-row-address {
	display:none;
}

#form-message {
	padding:1rem;
}
#contact-wrap span.small {
	font-size:.8em;
}

#contact-wrap.error #form-message {
	border:1px solid rgba(200,50,50,.5);
	background:rgba(200,50,50,.1);
	color:#FAA;
}
#contact-wrap.success #form-message {
	border:1px solid rgba(50,200,50,.5);
	background:rgba(50,200,50,.1);
	color:#AFA;
}
#contact-wrap.success form ul, #contact-wrap.success input, #contact-wrap.success textarea, #contact-wrap.success button {
	pointer-events: none;
	display:none;
}

/***		IMPRINT 	***/

#imprint-wrap {
	font-size:.8em;
	background:#000;
	color:#888;
	border:30px solid rgba(0,0,0,.4);
	max-height:0;
	transition:all 1s;
	overflow:hidden;
}
#imprint-wrap.visible {
	max-height:1000px;
}
#imprint-wrap h3, #imprint-wrap h4 {
	color:#888;
	margin:.5rem 0;
}
#imprint-wrap p {
	margin:0;
}


/* 48em = 768px */

@media (min-width: 48em) {
	#nav-logo {
		float:left;
	}
	#nav-wrap {
		float:right;
		width:80%;
	}
	#nav {
		background:none;
	}
  #nav li {
    float: left;
  }
  #nav li a {
    height:4rem;
    line-height:4rem;
    padding:0 1rem;
    font-size:.8em;
  }
  #nav {
    clear: none;
    float: right;
    max-height: none;
  }
  #nav-icon {
    display: none;
  }
  #welcome-wrap h2 {
  	max-width:60%;
  	margin:0 auto;
  }

	#lessons-text-wrap {
		padding-top:2rem;
		padding-bottom:2rem;
	}

	#about-text {
		padding:2rem 0 6rem;
	}

	#contact-wrap {
		padding:2rem 0;
	}

}