/*!
 * Start Bootstrap - Creative v5.0.2 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
 original fonts Merriweather, 'Helvetica Neue', Arial, sans-serif;
 */body,
 html {
     width: 100%;
     height: 100%
 }
 
 body {
     font-family: Georgia, "Times New Roman", Times, serif;
	 font-size: 1.1rem;
	 line-height: 1.6;
	 font-weight:normal;
	 text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
 }
 
 hr {
     max-width: 50px;
     border-width: 3px;
     border-color: #CC0000
 }
 
 hr.light {
     border-color: #fff
 }
 
 a {
     color: #CC0000;
     -webkit-transition: all .2s;
     transition: all .2s
 }
 
 a:hover {
     color: #CC0000
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }
 h4 {margin-top:2rem; margin-bottom:1rem;}
 
.bg-primary {
	background-color: #CC0000!important
}
.bg-dark {
     background-color: #000!important
}
.bg-phil {
     background: transparent url('../images/piano-bg.jpg') 0 0 no-repeat;
     background-size: cover;
     color:white;
}
.bg-con {
     background: transparent url('../images/music-bg.jpg') 0 0 no-repeat;
     background-size: cover;
     color:white;
}
.bg-dark {
    padding: 8rem 0 6rem 0;
} 
.text-subhead {
	 margin-bottom: 4rem;
     font-size: 1.5rem;
	 font-weight: 700;
	 text-transform: uppercase;
	 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	 text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
}
.margin-subhead {
	 margin-bottom: 1.5rem;
}
.container {
    max-width: 1380px;
}
section {
     padding: 8rem 0
}

#down-info a span, #down-phil a span, #down-bio a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 100%;
  box-sizing: border-box;
  background: transparent;
}
#down-info a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 28px;
  height: 28px;
  margin: -18px 0 0 -14px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
#down-phil a span::after, #down-bio a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 28px;
  height: 28px;
  margin: -18px 0 0 -14px;
  border-left: 4px solid #C00;
  border-bottom: 4px solid #C00;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
#down-info a:hover span::after {
  border-left: 4px solid #292D4C;
  border-bottom: 4px solid #292D4C;
  transition: all 0.2s ease 0s;
}
#down-bio a:hover span::after {
  border-left: 4px solid #222;
  border-bottom: 4px solid #222;
  transition: all 0.2s ease 0s;
}

#arrowup a span {
  position: absolute;
  top: -75%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 100%;
  box-sizing: border-box;
  background: transparent;
}
#arrowup a span::after {
  position: absolute;
  top: 70%;
  left: 50%;
  content: '';
  width: 28px;
  height: 28px;
  margin: -18px 0 0 -14px;
  border-left: 4px solid #C00;
  border-bottom: 4px solid #C00;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  box-sizing: border-box;
}
#down-phil a:hover span::after, #arrowup a:hover span::after {
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transition: all 0.2s ease 0s;
}
.arrow a:hover {
    transition: all 0.2s ease 0s;
}

.shorttop {
     padding-top: 4rem;
 }
.section-heading {
     margin-top: 0
}
 
::-moz-selection {
     color: #fff;
     background: #212529;
     text-shadow: none
}
 
::selection {
     color: #fff;
     background: #212529;
     text-shadow: none
}
 
img::-moz-selection {
     color: #fff;
     background: 0 0
}
 
img::selection {
     color: #fff;
     background: 0 0
}
 
img::-moz-selection {
     color: #fff;
     background: 0 0
}
 
img.logo {
  max-width: 100%;
  height: auto;
}

#mainNav {
     border-bottom: 1px solid rgba(33, 37, 41, .1);
     background-color: #fff;
     font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
     -webkit-transition: all .2s;
     transition: all .2s
}
 
#mainNav .navbar-brand {
	font-weight: 700;
	text-transform: uppercase;
	color: #CC0000;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
}
 
 #mainNav .navbar-brand:focus,
 #mainNav .navbar-brand:hover {
	color: #CC0000
 }
 
 #mainNav .navbar-nav>li.nav-item>a.nav-link,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
     font-size: .9rem;
     font-weight: 700;
     text-transform: uppercase;
     color: #212529
 }
 
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
	color: #CC0000
 }
 
 #mainNav .navbar-nav>li.nav-item>a.nav-link.active,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active {
	color: #CC0000!important;
	background-color: transparent
 }
 
 #mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover,
 #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover {
     background-color: transparent
 }
 
.btn-entrance {
	background-color: #cc0000;
	color: #fff;
}
.btn-entrance:active, .btn-entrance:focus, .btn-entrance:hover {
	background-color: #333;
	color: #fff;
}
 
 @media (min-width:992px) {
     #mainNav {
         border-color: transparent;
         background-color: transparent
     }
     #mainNav .navbar-brand {
         color: #CC0000
     }
     #mainNav .navbar-brand:focus,
     #mainNav .navbar-brand:hover {
         color: #CC0000
     }
     #mainNav .navbar-nav>li.nav-item>a.nav-link {
         padding: .5rem 1rem
     }
     #mainNav .navbar-nav>li.nav-item>a.nav-link,
     #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
         color: #212529
     }
     #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,
     #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
         color: #CC0000
     }
     #mainNav.navbar-shrink {
         border-bottom: 1px solid rgba(33, 37, 41, .1);
         background-color: #fff
     }
     #mainNav.navbar-shrink .navbar-brand {
	color: #CC0000
     }
     #mainNav.navbar-shrink .navbar-brand:focus,
     #mainNav.navbar-shrink .navbar-brand:hover {
         color: #CC0000
     }
     #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,
     #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus {
         color: #212529
     }
     #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover,
     #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover {
         color: #CC0000
     }
 }
 
 header.masthead {
     height: 100vh;
     min-height: 650px;
     background: transparent url('../images/Franco-Careccia-vocal-training.jpg') 30% top no-repeat;
     background-size: cover
 }
 header.entrance {
     height: 100vh;
     min-height: 650px;
     background: transparent url('../images/music-faded.jpg') center center no-repeat;
     background-size: cover
 }
 
 header.masthead hr {
     margin-top: 30px;
     margin-bottom: 30px
 }
 
 header.masthead h1 {
     font-size: 2rem
 }
 header.entrance h1 {
	 line-height: 2;
     font-size: 1rem;
	 font-weight: 300;
	 font-weight: normal;
	 color: black;
 }
 header.masthead p {
     font-weight: 300;
	 font-weight: normal;
 }
 
 @media (min-width:768px) {
     header.masthead p {
         font-size: 1rem
     }
 }
 
 @media (min-width:992px) {
     header.masthead {
         height: 100vh;
         min-height: 650px;
         padding-top: 0;
         padding-bottom: 0
     }
     header.masthead h1 {
         font-size: 3rem
     }
 }
 
 /* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
  .navbar-brand {
    width: 70%;
}
}
 
 @media (min-width:1200px) {
     header.masthead h1 {
         font-size: 4rem
		 line-height: 1;
     }
 }
 
 
 
 @media (min-width:768px) {
     
 }
 
 .text-primary {
	color: #CC0000!important
 }
 
 .btn {
     font-weight: 700;
     text-transform: uppercase;
     border: none;
     border-radius: 300px;
     font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
 }
 
 .btn-xl {
     padding: 1rem 2rem
 }
 
 .btn-primary {
     background-color: #CC0000;
     border-color: #CC0000
 }
 
 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
     color: #CC0000;
     background-color: #fff!important
 }
 
 .btn-primary:active,
 .btn-primary:focus {
     -webkit-box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .5)!important;
     box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .5)!important
 }