html{width:100%;height:100%}body{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.navbar-toggler {top: 10px;border-radius: .25rem;position: absolute;right: 20px; } .section-heading{font-size: 3.5rem; font-family: 'Playball', cursive; } hr{max-width:50px;border-width:3px;border-color:#33617b}hr.light{border-color:#fff}a{color:#a1a1a1;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}a:hover{color:#33617b}h1,h2,h3,h4,h5,h6{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}.bg-primary{background-color:#33617b!important}.bg-dark{background-color:#33617b!important} .text-shadow {text-shadow: 0 0 5px black, 0 0 5px black} .text-faded{color:rgba(255,255,255,.7)}section{padding:5rem 0}.section-heading{margin-top:0}::-moz-selection{color:#fff;background:#33617b;text-shadow:none}::selection{color:#fff;background:#33617b;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:#f5f5f7;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:#000;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:#fff}#mainNav .navbar-nav>li.nav-item>a.nav-link,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus{font-size:.8rem;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:#000}#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover,#mainNav .navbar-nav>li.nav-item>a.nav-link:hover{color:#000}#mainNav .navbar-nav>li.nav-item>a.nav-link.active,#mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active{color:#fff!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:#00000070}#mainNav .navbar-brand{color:rgba(255,255,255,.7)}#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,.7)}#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:#000000b0}#mainNav.navbar-shrink .navbar-brand{color:#fff}#mainNav.navbar-shrink .navbar-brand:focus,#mainNav.navbar-shrink .navbar-brand:hover{color:#fff}#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link,#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{color:#bdbdbd}#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:#fff}}header.masthead hr{margin-top:30px;margin-bottom:30px}header.masthead h1{font-size:4rem}header.masthead p{font-weight:300}@media (min-width:768px){header.masthead p{font-size:1.15rem}}@media (min-width:992px){header.masthead{height:auto;min-height:auto;padding-top:0;padding-bottom:0}header.masthead h1{font-size:3rem}}@media (min-width:1200px){header.masthead h1{font-size:5rem}}.service-box{max-width:400px}.portfolio-box{border: 2px solid white; 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(21, 9, 6);-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:0.3}.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:#666 !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:#33617b;border:1px solid #33617b}

.btn-primary:active,.btn-primary:focus,.btn-primary:hover{
    color: #33617b;
    background:#fff;
    border: 1px solid#33617b;
}

.logo {
    width: 500px; 
}

.btn-primary:active,.btn-primary:focus {
    color:#33617b;
    background:#fff;
    border: 1px solid #33617b;
}

header.masthead {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.masthead::before {
    content: "";
    position: absolute;
    left: 0; 
    right: 0;
    top: 0; 
    bottom: 0;
}

.bg-light {
    background-color: #33617b  !important;
}
.menu-box h2 {
    font-family: Playball;
    font-size: 2.5rem;
}
.menu-box {
    padding: 30px;
    box-shadow: 0 0 5px #ddd;
    position: relative;
    overflow: hidden; 
}
.menu-box::before {
    background-color: #ddd;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;
    z-index: -1;
    transition: .5s;
}
.menu-box:hover::before {
    bottom: 0;
}

.menu-box:hover .btn-primary {
    color:#33617b;
    background:#fff;
    border: 1px solid #33617b;
}

footer a {
    color: #222;
}
footer a:hover {
	color: #333; 
}
@media screen and (max-width: 736px) {
    
    .head {
        margin-top: 90px
    }

    .head img {
        transform: scale(1.5);
    }
    
    
    .logo {
        width: 90%; 
    }
    .portfolio-box {
        margin: 8px 16px;
    }
}