@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin-ext');



/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */



/* Global */





body {

    font-family: 'Open Sans', sans-serif;

    font-size: 17px;

    color: #2C3E50;

    font-weight: 300;



}



a {

    color: #2C3E50;



}



a:hover {

    color: #00A8B6;

    text-decoration: none;



}



a:link {

    text-decoration: none;

}



h1,
h2 {
    margin: 0;
    font-weight: 400;
}

h1.lg-heading,
h2.lg-heading {
    font-size: 5rem;
    margin-bottom: 15px;
    font-weight: 400;

}

h1.sm-heading,
h2.sm-heading {
    margin-bottom: 7rem;
    padding: 0.2rem 1rem;
    background: rgba(235, 235, 235, 0.5);
    font-weight: 300;
}

.text-secondary-color {
    color: #00a8b6;
}



h3 {

    font-weight: 300;

    font-size: 40px;

    margin-bottom: 100px;

    text-align: center;
    text-transform: uppercase;

}



h4 {

    font-weight: 300;

    font-size: 30px;

    text-align: center;

    margin-bottom: 30px;

}



label {

    color: #2C3E50;

    font-weight: 300;

}

.arrow {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20.5px;
    animation-name: arrowAnimate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    cursor: pointer;

}


/* keyframes arrow */

@keyframes arrowAnimate {
    0% {
        bottom: 30px;
    }

    50% {
        bottom: 40px;
    }

    100% {
        bottom: 30px;
    }
}







/* Layout */





.main-footer {

    background-color: #e9e9ea;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);



}



blockquote {

    font-size: 20px;

    text-align: left;

    margin-bottom: 100px;

    border-left: 6px solid #00A8B6;

}



blockquote small {

    color: #00A8B6;



}





/* Specific */





/* logo */



.navbar .logo {

    width: 200px;

    display: block;

    position: relative;
    margin-top: 4px;

}



.logo-sign {

    width: 20%;

    transition: all 0.4s ease;



}



.logo-name {

    position: absolute;
    width: 65%;
    top: 2px;
    left: 48px;
    animation-delay: .3s;

}



.logo-design {

    position: absolute;
    top: 28px;
    left: 44px;
    animation-delay: .6s;
    width: 25%;

}





/* logo end */





#content {

    text-align: center;

    color: #ffffff;

    padding-top: 30%;

    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4),

        0 8px 13px rgba(0, 0, 0, 0.1),

        0 18px 23px rgba(0, 0, 0, 0.1);

}



#content hr {

    width: 400px;

    border: 0;

    height: 1px;

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));



}



span.content-design {

    font-weight: 700;

    font-size: 3em;



}



span.content-ideas {

    font-weight: 300;

    font-size: 2em;



}






.navbar {

    padding: 15px 0;

    background-color: #ffffff;

    margin: 0;

    width: 100%;
    border-radius: 0;
    border: none;



}



.navbar-default .navbar-nav>li>a {
    color: #2C3E50;
}

.navbar-default .navbar-nav>li>a:hover {

    color: #00A8B6;


}

.navbar-default .navbar-collapse {
    border-color: #2C3E50;
}



.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {

    background-color: transparent;
    color: #00A8B6;

}



.navbar-default .navbar-toggle {

    background-color: transparent;

    border: transparent;



}



.navbar-default .navbar-toggle:hover {

    background-color: transparent;

}



.navbar-default .navbar-toggle:focus {

    background-color: transparent;

}







/* Animation*/

nav.navbar {

    -webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



nav.navbar.shrink {

    padding: 5px 0;

    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;



}



nav.shrink {

    min-height: 35px;

}

.shrink .logo-sign {

    width: 20%;

}



.shrink .logo-name {

    display: none;

}



.shrink .logo-design {

    display: none;

}



/* Animation End*/



button.navbar-toggle {

    margin-top: 25px;



}

section#home {
    position: relative;
    background-image: url("../img/office.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    padding: 15rem;
    min-height: calc(100vh - 60px);
    text-align: center;
}

section#home::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: -1;

}








#about-me {

    padding: 80px 0;

    background-color: #e9e9ea;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);





}



#services {

    padding: 80px 0;



}



#recent-work {

    padding: 80px 0;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);



}



#testimonials {

    padding-top: 80px;

    background-color: #f2f2f3;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);



}







#contact {

    padding: 80px 0;

}







#mix-it-up .mix {

    display: none;

}





#about-me-text {

    background-color: #ffffff;

    padding: 30px;

    border-radius: 3px;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);

}



.grey-border {

    border-radius: 5px;

    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);

    padding: 25px;

}





#recent-work p {

    margin: 10px 0;

}



#recent-work img:hover {

    opacity: 0.5;




}





/* Magnific PopUp*/



.mfp-with-zoom .mfp-container,

.mfp-with-zoom.mfp-bg {

    opacity: 0;

    -webkit-backface-visibility: hidden;

    /* ideally, transition speed should match zoom duration */

    -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

}



.mfp-with-zoom.mfp-ready .mfp-container {

    opacity: 1;

}

.mfp-with-zoom.mfp-ready.mfp-bg {

    opacity: 0.8;

}



.mfp-with-zoom.mfp-removing .mfp-container,

.mfp-with-zoom.mfp-removing.mfp-bg {

    opacity: 0;

}



/* Magnific PopUp End*/



#consulting-icon,
#design-icon,
#development-icon {

    margin-bottom: 30px;



}



#development-icon {

    text-align: center;

    background-image: url("../img/development.svg");

    height: 128px;

    background-position: center;

    background-repeat: no-repeat;



}





.work-navigation {

    margin-bottom: 30px;

}



.work-navigation ul {

    margin: 0;

    padding: 0;

    list-style: none;

}





.work-navigation ul li {

    float: left;

    width: 150px;

}



.work-navigation ul li a {

    cursor: pointer;

    display: block;

    height: 38px;

    background-color: #ffffff;

    line-height: 38px;

    color: #333333;

    font-size: 18px;

    text-align: center;

    border: 1px solid #d9d9d9;

    border-radius: 2px;
    margin-right: 5px;



}





.work-navigation ul li a:hover {

    background-color: #f2f2f2;
}



.img-thumbnail {
    border-radius: 5px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, .20);
    border: none;


}





a.filter.active {

    color: #00A8B6;

}







.fa-cog {

    color: #00A8B6;

    font-size: 48px !important;

    margin-top: 20px;

}



.fa-quote-left {

    color: #00A8B6;

    margin-right: 10px;

    font-size: 18px !important;

}



#contact h5 {

    font-weight: 300;

    font-size: 20px;

    margin-bottom: 30px;



}



#contact .form-control {

    border-radius: 0;

    border: none;

    border: 1px solid #cfcfcf;

    box-shadow: none;

    font-size: 16px;

    margin-bottom: 10px;


}

#contact .form-control input:hover {
    border: 1px solid #00a8b6;

}



.rights-reservrd {

    background-color: #ffffff;





}









button.btn {

    background-color: #00A8B6;
    color: white;

    border: none;

    border-radius: 0;

    text-transform: uppercase;

}



button.btn:active:focus {

    outline: 0 none;

}



button.btn:hover {

    color: #ffffff;

    background-color: #009daa;

    transition: all 0.5s;

}





.alert-success {

    color: #00A8B6;

    background-color: #eee;



}

.error {
    color: #c30d23;
}


/*footer*/

.main-footer {
    background-color: #2c3e50;
    padding: 30px 0;
    position: relative;
}


.main-footer .back-to-top {
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid #ffff;
    background-image: url("../img/back-to-top-white.png");
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    position: absolute;
    right: 20px;
    bottom: 40px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.main-footer .back-to-top:hover {

    background-image: url("../img/back-to-top-blue.png");
    background-color: white;

}


.main-footer a {
    color: #00A8B6;

}

.main-footer .mail-copy {
    float: right;

}




.main-footer .soc-net {

    text-align: center;
    margin-bottom: 15px;
    float: left;

}

.main-footer p {
    text-align: right;
    font-size: 13px;
    color: #00A8B6;
    margin-bottom: 7px;
}

.main-footer .mail a:hover {
    color: white;

}

.main-footer .soc-net li {
    display: inline-block;

}

.main-footer .soc-net li a {
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    background-image: url("../img/soc-icons-final.png");
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.facebook {
    background-color: #34495e;
}

.instagram {

    background-color: #34495e;
    background-position: -40px 0;
}

.linkedin {
    background-color: #34495e;
    background-position: -80px 0;
}

.github {

    background-color: #34495e;
    background-position: -120px 0;
}

.facebook:hover {
    background-position: 0 -40px;
}

.instagram:hover {
    background-position: -40px -40px;
}

.linkedin:hover {
    background-position: -80px -40px;
}

.github:hover {
    background-position: -120px -40px;
}


.main-footer .soc-net li {
    margin-right: 3px;
}

.main-footer .soc-net li:last-child {
    margin-right: 10px;
}







/*footer end*/



/* Small devices (tablets, 768px and up) */



@media (max-width: 768px) {



    .work-navigation ul li {

        width: 100%;

        padding: 5px;

    }



    .logo {

        margin: 10px 0 0 18px;



    }

    .main-footer .soc-net {

        float: none;

    }

    .main-footer p {
        text-align: center;

    }

    .main-footer .mail-copy {
        float: none;

    }

    section#home {

        padding: 5rem;

    }

}



@media (min-width: 768px) {



    .work-navigation ul li:first-child {

        width: 150px;

    }

    .main-footer .back-to-top {
        right: 50%;
        bottom: 40px;
    }

    /* keyframes arrow */

    @keyframes arrowAnimate {
        0% {
            bottom: 35%;
        }

        50% {
            bottom: 40%;
        }

        100% {
            bottom: 35%;
        }
    }







}



/* Medium devices (desktops, 992px and up) */



@media (max-width: 992px) {



    #content {

        padding-top: 50%;

    }



}


@media (min-width: 1400px) {

    .main-footer .back-to-top {

        right: 40px;
        bottom: 40px;

    }

}