@import url('https://fonts.googleapis.com/css?family=Lora:400,700&display=swap');

body{
  overflow-x: hidden;
  font-family: 'Lora', serif;
  color: #333333;
}
div{
  /* border: 1px solid #07a6fc; */
}
.offset:before{
  display:block;
  content:"";
  height: 4rem;
  margin-top: -4rem;
}
.offset{
  border-top: 10px solid #e81a5f;
}
.narrow {
  width: 75%;
  margin: 1.5rem auto;
  padding-top: 2rem;
  padding-bottom: 5rem;
 }
h2{
  font-size: 3.0rem;
  margin-bottom: 2rem;
}

/* Transition elsements */
a,
.btn {
  transition: all 0.125s ease-in-out 0s;
}


 /* navbar */
 .fixed-top {
    z-index: 9999;
}
.navbar{
  text-transform:uppercase;
  /* background: #e81a5f; */
  background: rgba(232,26,95,0.6)!important;
  color: #fff;
  padding-left:3rem;
  padding-right: 3rem;
}
.navbar-brand img{
  height:2rem;
}
.navbar-nav li{
  padding-right: .7rem;
}
.navbar-dark .navbar-toggler .navbar-toggler-icon{color: #fff;}
.navbar-dark .navbar-nav a.nav-link{
  color: #fff;
}

.navbar-dark .navbar-nav a.nav-link.active,
.navbar-dark .navbar-nav a.nav-link:hover{
  color: #07a6fc;
}

/* Landing */
.home-inner{
  background-image: url(../images/main.jpg);
}
.caption{
  width:100%;
  max-width: 100%;
  position: absolute;
  top:45%;
  z-index: 1;
  color:white;
}
.caption h1{
  font-size: 3.8rem;
  letter-spacing:  .3rem;
  padding-bottom: 1rem;
}
.caption h3{
  font-size: 1.4rem;
  line-height: 2.6rem;
  padding-bottom: 1.6rem;
}



/* About */
.aboutimg{
  width:100%;
  border-radius: 50%;
}
#about h3{  
  font-size: 2.0rem;
  letter-spacing:  .3rem;
  padding-bottom: 1rem;
}
#about .lead{
  font-size: 1.0rem;
  letter-spacing:  .3rem;
  padding-bottom: 1rem;

}


/* Works */

/* Cards */
.card{
  text-align: center;
  height: 100%;

}
.card-body hr{
  border-top:1px solid #f06e9a;
  width: 50%;
}
h4{
  font-size: 1.8rem;
  padding-top: 1.6rem;
  padding-bottom: 1.0rem;

}
.card-price{
  font-size: 1.4rem;
}
.card-lead{
  font-size: 1.0rem;
  line-height: 1.6rem;
  padding-bottom: .8rem;
}
.card-text{
  font-size: .8rem;
  line-height: 1.4rem;
  text-align: left;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1.8rem;
}




/* Contact  */
form{
  width: 75%;
  margin: 0 auto;
}
.btn-primary{
  background-color: #e81a5f;
  border-color: #e81a5f;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: #f06e9a;
  border-color: #f06e9a;
}

.col-auto {
  text-align: center;
}

/* Footer  */

footer{
  height: 500px;
  width: 100%;
  background-image: url(../images/footer.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  border-top: 10px solid #e81a5f;
  padding-top:250px;
  color: white;
  text-align: center;

}
footer a {
  color:white!important;
}
footer .svg-inline--fa{
  display: block;
  font-size:2rem;
  width: 5rem;
  height: 2rem;
  background: #ffffff;
  text-align: center;
  color: #e81a5f;
  /* line-height: 2rem; */
  border-radius: 50%;
  margin: 10px auto 0 auto;
  padding: 5px;
  transition: color .5s ease-in-out,background-color .5s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}
footer .svg-inline--fa:hover,
footer .svg-inline--fa:focus
{
  background: #e81a5f!important;
  color: #ffffff;
}
.totop{
  text-align: center;
  padding: 2rem;
}
.totop a {
  color:#cccccc!important;
  font-size:2rem;
}
.totop a:hover,
.totop a:focus {
  color:#dddddd!important;
  font-size:2rem;
}
/* Media Queries */
@media(max-width:767px){

}
/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/