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

body{
  overflow-x: hidden;
  font-family: 'Lato',sans-self;
  color: #505962;
}
.offset{
  padding: 30px
}
.navbar{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  background-color: rgba(0,0,0,0.6)!important;
}
.navbar-nav li{
  padding-right: 20px;
}
.navbar-dark .navbar-nav .nav-link{
  color: white;
  padding-top: 10px;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover{
  color: #1ebba3;
}

.home-inner{
  background-image: url(img/cotage.jpg);
}

.caption{
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 38%;
  z-index: 1;
  color: white;
}
.caption h1{
  font-size: 60px;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 1px 1px 5px black;
  padding-bottom: 8px;
}
.caption h3{
  font-size: 30px;
  text-shadow: 1px 1px 5px black;
  padding-bottom: 20px;
}
.btn-lg{
  border-width: medium;
  border-radius: 0;
  padding: 5px 6px;
  font-size: 30px;
}

.narrow h1{
  font-size: 30px;
  padding: 40px 0 10px 0;
}
.narrow h2{
  padding-bottom: 5px
}
.narrow img{
  width: 200px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 400px;
}

.fa-code{
  color: #e54d26;
}
.fa-bold{
  color: #563d7c;
}
.fa-css3{
  color: #2163af;
}
.fa-code,.fa-bold,.fa-css3{
  font-size: 60px;
  margin: 30px;
}

.card-img{
  font-size: 50px;
  padding: 20px 0;
  color: #FF8856;
}

.card h5{
  padding: 15px 0;
}

.fa-external-link-alt{
  font-size: 50px;
}
.fa-file-code{
  font-size: 50px;
}
.fa-envelope{
  font-size: 50px;
}
.fa-laptop-code{
  font-size: 47px;
}
.welcome p{
  padding: 15px 0;
}
.btn{
  padding: 10px 10px;
  margin: 1px 70px 30px 70px;
}


.box{
  margin-top: 30px;
  padding: 10px 150px;
}

footer{
  background-color: #444444;
}
footer p{
  color: white;
}
.fa-envelope{
  font-size: 55px;
  color: white;
}
.fa-twitter-square{
  font-size: 55px;
  color: white;
}
.fa-desktop{
  font-size: 55px;
  color: white;
}


/*============ 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) { ... }

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