body,
html{
    width:100%;height:100%
}

body{
    font-family:Merriweather,'Helvetica Neue',Arial,sans-serif
}

hr{
    max-width:50px;
    border-width:3px;
    border-color:#0070C0
}

hr.light{
    border-color:#D3D3D3
}

a{
    color:#0070C0;
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    transition:all .2s
}

a:hover{
    color:#0070C0
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}

.bg-primary{
    background-color:#0070C0!important
}

.bg-dark{
    background-color:#212529!important
}

.text-faded{
    color:rgb(255, 255, 255)
}

h2 {
    font-size: 20px;
  }


h3 {
    font-size: 30px;
  }


  section{
    padding:8rem 0
}

.section-heading{
    margin-top:0
}

::-moz-selection{
    color:#fff;
    background:#212529;
    text-shadow:none
}

::selection{
    color:#fff;
    background:#212529;
    text-shadow:none
}

img::selection{
    color:#fff;
    background:0 0
}

img::-moz-selection{
    color:#fff;
    background:0 0
}

#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;
    -moz-transition:all .2s;transition:all .2s
}

#mainNav .navbar-brand{
    font-weight:700;
    text-transform:uppercase;
    color:#0070C0;
    font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}

#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{
    color:#0070C0
}

#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:#0070C0
}

#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{
    color:#0070C0!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
}

@media (min-width:992px){
    #mainNav{
        border-color:transparent;background-color:transparent
    }
    #mainNav .navbar-brand{
        color:rgba(255,255,255,.8)
    }
    #mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{
        color:#fff
    }
    #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:rgba(255,255,255,.8)
    }
    #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{
        color:#fff
    }
    #mainNav.navbar-shrink{
        border-bottom:1px solid rgba(33,37,41,.1);background-color:#fff
    }
    #mainNav.navbar-shrink .navbar-brand{
        color:#0070C0
    }
    #mainNav.navbar-shrink .navbar-brand:focus,#mainNav.navbar-shrink .navbar-brand:hover{
        color:#0070C0
    }
    #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:#0070C0
    }
}

header.masthead{
    padding-top:10rem;
    padding-bottom:calc(10rem - 56px);
    background-image:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(../img/header.jpg);
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}

header.masthead hr{
    margin-top:30px;
    margin-bottom:30px
}

header.masthead h1{
    font-size:2rem
}

header.masthead p{
    font-weight:300
}

@media (min-width:768px){
    header.masthead p{
        font-size:1.15rem
    }
}

@media (min-width:992px){
    header.masthead{
        height:100vh;
        min-height:650px;
        padding-top:0;
        padding-bottom:0
    }
    header.masthead h1{
        font-size:3rem
    }
}

@media (min-width:1200px){
    header.masthead h1{
        font-size:4rem
    }
}

.service-box{
    max-width:400px
}

.portfolio-box{
    position:relative;
    display:block;
    max-width:650px;
    margin:0 auto
}

.portfolio-box .portfolio-box-caption{
    position:absolute;
    bottom:0;
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    opacity:0;
    color:#fff;
    background:rgba(0,112,192,.9);
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    transition:all .2s
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{
    position:absolute;
    top:50%;
    width:100%;
    transform:translateY(-50%);
    text-align:center
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{
    padding:0 15px;
    font-family:'Open Sans','Helvetica Neue',Arial,sans-serif
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{
    font-size:14px;
    font-weight:600;
    text-transform:uppercase
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{
    font-size:18px
}

.portfolio-box:hover .portfolio-box-caption{
    opacity:1
}

.portfolio-box:focus{
    outline:0
}

@media (min-width:768px){
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{
        font-size:16px
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{
        font-size:22px
    }
}.text-primary{
    color:#0070C0!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:#0070C0;border-color:#0070C0
}

.btn-primary:active,.btn-primary:focus,.btn-primary:hover{
    color:#fff;background-color:#0070C0!important
}

.btn-primary:active,.btn-primary:focus{
    box-shadow:0 0 0 .2rem rgba(0,112,192,.5)!important
}