/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    font-family: ‘Open Sans’, sans-serif !important;
    font-weight: 400 ;
    color: #000;
    line-height:1.6em;
}

html {
    width: 100%;
    height: 100%;
}

p{
  font-family: "Open Sans",sans-serif;
  font-size: 1.2em;
  line-height: 1.6em;
  letter-spacing: .8px;
  font-weight: 300;
  font-style: normal;
  color: #6a6a6a;
}

.description{
  font-family: "Open Sans",sans-serif;
  font-size: 1.2em;
  line-height: 1.6em;
  letter-spacing: .6px;
  font-weight: 300;
  font-style: normal;
  color: #6a6a6a;

}

.highlight {
  font-family: "Open Sans",sans-serif;
  font-size: 1.25em;
  line-height: 1.45em;
  letter-spacing: .9px;
  font-weight: 400;
  font-style: normal;
  color: #3a3a3a;
}

.italic{
  font-family: "Open Sans",sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #5a5a5a;

}


h1{
  font-family: "Montserrat", sans-serif;
  font-size: 42px;
  line-height: 1.7em;
  text-transform: none;
  letter-spacing: 1px;
  font-weight: 400;
  font-style: normal;
}

h3{
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1.3em;
  text-transform: none;
  letter-spacing: 0.8px;
  font-weight: 400;
  font-style: normal;
  olor: #337ab7;
}

.sec-heading{
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.6em;
    margin-top: 1em;
    color: #101010;
    font-family: "Montserrat", sans-serif;
    letter-spacing: .5px;

}

::selection {
  background: #d6d6d6; /* WebKit/Blink Browsers */
  color: f6f6f6;
}
::-moz-selection {
  background: #d6d6d6; /* Gecko Browsers */
}

/* mobile responsive consitions*/

@media(min-width:767px) {
    .navbar {
        padding: 0px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

}

@media(min-width:1200px){
    .headline h3 {
            font-size: 30px;
        }

    .headline{
        padding:250px 0;
    }

    .project-title{

    padding-top: 200px;
    padding-bottom: 40px;
    }

    /*.header-image-aboutme img{

    height:100%;
    width: 100%;
}*/
}

@media(max-width:1200px) {

    .headline h3 {
        font-size: 28px;
    }

    .headline{
        padding:200px 0;
    }

    .project-title{

    padding-top: 200px;
    padding-bottom: 40px;
    }

    /*.header-image-aboutme img{

    height:100%;
    width: 100%;
}*/

}

@media(max-width:991px) {

    .headline h3 {
        font-size: 24px;
    }

    .headline{
        padding:180px 0;
    }

    .project-title{

    padding-top: 180px;
    padding-bottom:30px;
    }

    #contact img {
    width: 25% !important;
    height: 25%;
    }
    /*.header-image-aboutme img{

    height:100%;
    width: 1000%;
}*/


}

@media(max-width:768px) {
    .container {
        margin: 0 15px;
    }

    .headline{
        padding:165px 0;
    }

    .project-title{

    padding-top: 160px;
    padding-bottom: 25px;
    }

    .project-title2 {
        font-size: 32px !important;
        line-height: 1.3em !important;
        letter-spacing: 0.9px !important;
        font-style: normal;
    }
    /*.header-image-aboutme img{

    height:80%;
    width: 80%;
}*/
}

@media(max-width:668px) {

    .headline h3 {
        font-size: 20px;
    }

    .headline{
        padding:160px 0;
    }

    .project-title{

    padding-top: 140px;
    padding-bottom: 20px;
    }

    #contact img {
    width: 50% !important;
    height: 50%;
    }

}

@media(max-width:640px) {
    .headline {
        padding: 75px 0 25px 0;
    }
    .headline{
            padding:150px 0;
        }

    .headline h3 {
        font-size: 20px;
    }

    .project-title{

    padding-top: 120px;
    padding-bottom: 20px;
    }
}

@media(max-width:375px) {

    .headline{
        padding:120px 0;
    }

    .project-title{

    padding-top: 100px;
    padding-bottom: 10px;
    }
    #contact img {
    width: 60% !important;
    height: 60%;
    }


}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */

/*======== overall website CSS=============*/

.full {
    /*background: url('#') no-repeat center center fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.page-title{

    text-transform: uppercase;
    color:#101010  ;
    font-size:2.2em;
    font-weight: 400;
    line-height:1em;
}

hr{
    border-top: 1px solid #dbdbdb;
    margin-top:0px;
    margin-bottom: 0px;
}

.btn{
    font-size: 1.30rem;
    color: #337ab7 ;
    font-weight: 400;
    text-transform: none;
    vertical-align: middle;
    line-height: 2rem;
    padding: 10px 18px;
    border-radius: 300px;
    display: inline-block;
    background-color:#fff;
    font-family: "Montserrat",sans-serif;
}

.btn2{
  font-size: 1.35rem;
  color: #337ab7 ;
  font-weight: 400;
  text-transform: none;
  vertical-align: middle;
  line-height: 2rem;
  padding: 10px 18px;
  border-radius: 300px;
  display: inline-block;
  background-color:#fff;
  font-family: "Montserrat",sans-serif;
  margin:right:10px;
}


.img-responsive{
  margin:auto;
}

.carousel-inner,.carousel,.item,/*.container,*/.fill {
  height:100%;
  width:100%;
}

.carousel-caption {
    position:absolute;
    right:15%;
    bottom:15px;
    /*padding-bottom:1em;*/
    color:#fff;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.6)
}

.carousel-indicators{
    bottom:10px;
}

.carousel-control.left {
    background-image:-webkit-linear-gradient(left,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    background-image:-o-linear-gradient(left,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.005)),to(rgba(0,0,0,.0001)));
    background-image:linear-gradient(to right,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat:repeat-x
}

.carousel-control.right{
    background-image:-webkit-linear-gradient(left,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    background-image:-o-linear-gradient(left,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.005)),to(rgba(0,0,0,.0001)));
    background-image:linear-gradient(to right,rgba(0,0,0,.005) 0,rgba(0,0,0,.0001) 50%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat:repeat-x

}
/*=============== Header==================*/

.header-image {
    display: block;
    width: 100%;
    text-align: center;
    background: url("images/main-cover.jpg") no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


#header-name{
    color:#000;
    letter-spacing: -1px;
    line-height: 2.5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;

}

#header-tag{
    color: #6a6a6a;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.1px;
    line-height: 2 rem;
    font-family: "Open Sans", sans-serif;

}

.headline h3 {
    font-size: 1.6em;
    padding-top:1em;
    padding-bottom: 1em;
    line-height: 2.5rem;
    font-family: ‘Open Sans’, sans-serif !important;
    background: #fff;
    background: rgba(255,255,255,0.4);
}

#hero-tag{
    color: #888;
    font-weight: 300;
    font-family: ‘Open Sans’, sans-serif !important;
    text-transform: none;
    letter-spacing: 0px;

}

/*=============== Nav ==================*/

.nav a{
    cursor: pointer;
    color: #101010;
    font-family: "Montserrat", sans-serif;
}

.nav a:hover {
    color:#337ab7; <!--Enhanced focus indicator(CSS)-->
    border-bottom: 1px solid #101010;
}

.navbar-default {
    background: rgba(256,256,256,0.9);
}

.navbar{
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    margin:auto;
}

#float{

    float: right !important;
}

/*=============== Intro Section ==================*/


.intro-section {
    height: 100%;
    padding-top: 200px;
    text-align: center;
    background: #fff;
}

/*=============== About Section ==================*/

.about-section {
    /*height: 100%; */
    padding-top: 40px;
    text-align: left;
    /*background: #f6f6f6;*/
}

.about-section h1{
    padding-bottom: 30px;
    padding-top:15px;
}

#about h3{
    font-size: 1.6em;
    text-transform: none;
    font-style: italic;
    font-weight: 400;
    color: #C0C0C0;
}

#about span{
    font-weight: 400;
}

/*=============== Portfolio Section ==================*/

.portfolio-heading{
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.6em;
    margin-top: 1em;
    color: #101010;
}


.portfolio-subheading{
    text-transform: uppercase;
    color: #aaa;
    font-size: .8em;
    line-height: 0.5em;
    font-weight: 700;

}
.portfolio-text{
    font-weight: 300;
    line-height: 1.6em;
    /*margin-bottom: 5px;*/

}

.image-text{
    font-weight: 400;
    font-size: .9em;
    font-family: "Open Sans",sans-serif;
    letter-spacing: .8px;
    font-style: normal;
    color: #6a6a6a;
    margin-top: 2px;
    /*margin-bottom: 5px;*/

}

.portfolio-item {
    /*margin-bottom: 25px;*/
    margin:0px 0px;
    padding-right: 0px;
     padding-left: 0px;
}

.services-section {
    /*height: 100%; */
    padding-top: 40px;
    text-align: center;
    background: #fff;
}

.services-section h1{
    padding-bottom: 30px;
}

#services p{
  margin-bottom: 20px !important;

}

/*=============== Individual Projects Section ==================*/
.project-title{
    padding-top:200px;
    padding-bottom: 40px;
    color:#101010  ;
    font-size:2.2em;
    font-weight: 400;
    line-height:1.4em;
}

.project-title2{
    color:#337ab7  ;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    line-height: 1.5em;
    text-transform: none;
    letter-spacing: 1px;
    font-style: normal;
    margin-top:20px;
    margin-bottom:20px;
}

.header-image-askme{
    display: block;
    width: 100%;
    text-align: center;
    background: url('https://ridhimagupta.files.wordpress.com/2014/06/askme-mockup_highres.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header-image-freeads{
    display: block;
    width: 100%;
    text-align: center;
    background: url('https://ridhimagupta.files.wordpress.com/2015/01/freeads_mockup-e1423234261892.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header-image-delta{
    display: block;
    width: 100%;
    text-align: center;
    background: url('https://ridhimagupta.files.wordpress.com/2015/02/title-image.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header-image-about{
    display: block;
    width: 100%;
    text-align: center;
    background: url('https://ridhimagupta.files.wordpress.com/2015/02/title-image.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header-image-mayo{
    display: block;
    width: 100%;
    text-align: center;
    background: url('mayo/mayo_cover.png') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
/*=============== Contact Section ==================*/

.contact-section {
    text-align: center;
}

#contact img{
  width:60%;
  height:60%;
  /*padding-bottom: 20px;*/
}

.header-image-aboutme{
    display: block;
    width: 100%;
    text-align: center;
    background: url('https://images.unsplash.com/reserve/7MWItPwYTzOaKwG6SYLl_O14A0436.jpg?q=80&fm=jpg&s=4acbe934983a1867620ac53ddeae0b0f') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header-image-aboutme p{
    text-align: center;
    font-family: ‘Open Sans’, sans-serif !important;
    font-weight: 300 ;
    color: #000;
    line-height:1.7em;
}

.header-image-aboutme img{

    height:40%;
    width: 40%;
}



#footer {
    /*background: #101010 ;*/
    background: #f6f6f6;

}

#footer a{
    color: #444;
    padding: 0.8em;
    font-size: 1.6em;
}

#footer a:hover{
    color: #337ab7 ; <!--Enhanced focus indicator(CSS)-->
}


/*Video*/
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}