/*--------------------------------

  Global

----------------------------------*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video, p {

    margin          : 0;

    padding         : 0;

    border          : 0;

    vertical-align  : baseline;

    font-weight     : normal;

    

}





html,

button,

input,

select,

textarea {

    color : #777777;

    }







body {

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

     font-size   : 14px;

     line-height : 24px;

    }



audio,

canvas,

img,

video {

    vertical-align : middle;

    }







h1,h2,h3,h4,h5,h6{

    margin  : 0;

    padding : 0;

}



h1{

    color           : #2a90ce;

    font-family     : 'Roboto', sans-serif;

    font-size       : 50px;

    font-weight     : 300;

    text-transform  : capitalize;

    letter-spacing  : 1.5px;

    text-align      : center;

  }

h2{

    font-family     : 'Roboto', sans-serif;

    font-size       : 20px;

    text-transform  : capitalize;

    color           : #222222;

    letter-spacing  : 1px;

    text-align: center;

}



h3{

    font-size       : 14px;

}



h4{

    font-size       : 12px;   

}

h5{

    font-size       : 10px;   

}



h6{

    font-size       : 8px;   

}



p{

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

    font-size       : 14px;

    font-weight     : 400;

    color           : #777777;

}



ul,ol{

    list-style-type : none;

}



a,

a:active,

a:focus,

a.active {

    color               : #444444;

    text-decoration     : none !important;

    outline             : none;

    cursor              : pointer;

    -webkit-transition  : all ease 0.5s;

    -o-transition       : all ease 0.5s;

    transition          : all ease 0.5s;

    }

a:hover{

   color               : #0888d3;

}

img,

.img-responsive{

    width         : 100%;

}



.section-padding{

    padding       : 100px 0;

}

.short-des{

    margin-top    : 40px;

    margin-bottom : 20px;

    text-align    : center; 

}

textarea{

  resize          : none;

}



/*--------------------------------

  Bootstrap Carousel with fade effect

----------------------------------*/

.carousel-fade .carousel-inner .item {

  -webkit-transition-property: opacity;

  transition-property: opacity;

}

.carousel-fade .carousel-inner .item,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  opacity: 0;

}

.carousel-fade .carousel-inner .active,

.carousel-fade .carousel-inner .next.left,

.carousel-fade .carousel-inner .prev.right {

  opacity: 1;

}

.carousel-fade .carousel-inner .next,

.carousel-fade .carousel-inner .prev,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  left: 0;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

}

.carousel-fade .carousel-control {

  z-index: 2;

}

html,

body,

.carousel,

.carousel-inner,

.carousel-inner .item {

  height: 100%;

}

/*.item:nth-child(1) {

  background: #74C390;

}

.item:nth-child(2) {

  background: #51BCE8;

}

.item:nth-child(3) {

  background: #E46653;

}

*/

/*Typed JS*/

/* code for animated blinking cursor */

        .typed-cursor{

            opacity: 1;

            font-weight: 100;

            -webkit-animation: blink 0.7s infinite;

            -moz-animation: blink 0.7s infinite;

            -ms-animation: blink 0.7s infinite;

            -o-animation: blink 0.7s infinite;

            animation: blink 0.7s infinite;

        }

        @-keyframes blink{

            0% { opacity:1; }

            50% { opacity:0; }

            100% { opacity:1; }

        }

        @-webkit-keyframes blink{

            0% { opacity:1; }

            50% { opacity:0; }

            100% { opacity:1; }

        }

        @-moz-keyframes blink{

            0% { opacity:1; }

            50% { opacity:0; }

            100% { opacity:1; }

        }

        @-ms-keyframes blink{

            0% { opacity:1; }

            50% { opacity:0; }

            100% { opacity:1; }

        }

        @-o-keyframes blink{

            0% { opacity:1; }

            50% { opacity:0; }

            100% { opacity:1; }

        }



/*--------------------------------

  Header

----------------------------------*/

header{

    position: relative;

}

.navbar {

    border-radius: 0px;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 99;

}

.carousel-control.right {

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(37, 170, 225, 0.5) 100%);

}

.carousel-control.left {

    background-image: linear-gradient(to right, rgba(37, 170, 225, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

}

.navbar-brand{

    width:220px;

    height:67px;

    padding: 10px 15px;

}

.navbar-default{

    background: transparent;

    border-width: 0;

}

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

    color:#ffffff;

    text-transform: uppercase;

}

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

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

    color: #dddddd;

}



header .carousel-caption{

    bottom: auto;

    top: 30%;

}



.type-wrap{

    position: absolute;

    top: 35%;

    left: 0;

    width: 100%;

    text-align: center;

}

.type-wrap > span{

    color: #ffffff;

    font-size: 35px;

    text-shadow: 0 1px 1px rgba(0,0,0,0.5);

    text-transform: uppercase;

}

/*.button{

    float:none;

    display: block; 

    margin: 0 auto;

    max-width: 150px;

}*/



header .btn{

    background: transparent;

    text-transform: uppercase;

    border: 1px solid #ffffff;

    padding:8px 25px;

    color:#ffffff;

    text-shadow: 0 1px 1px rgba(0,0,0,0.7);

    font-weight: bold;

    -webkit-transition: all ease 0.50s;

    -moz-transition: all ease 0.50s;

    transition: all ease 0.50s;

}

header .btn:hover{

    background: #25AAE1;

    border: 1px solid #25AAE1;

    color:#ffffff;

    text-shadow: 0 1px 1px rgba(0,0,0,0.2);

}

.btn-nav{

    border-radius: 30px !important;

    margin-top:13px;

}

.btn-nav:hover{

    color:#25aae1 !important;

}

.btn{

    background: #25AAE1;

    border-radius: 0;

    color: #ffffff;

    font-size: 13px;

    text-transform: uppercase;

    padding: 3px 10px;

    -webkit-transition: all ease 0.50s;

    -moz-transition: all ease 0.50s;

    transition: all ease 0.50s;

}

.btn:hover,

.btn:focus{

    background: #62cbf6;

    color: #ffffff;

}

.slider-btn{

    margin-top: 40px;

}

.slider-btn .btn{

    margin:0 10px;

}



/*--------------------------------

  Banner

----------------------------------*/

.carousel-control .icon-prev,

.carousel-control .icon-next,

.carousel-control .glyphicon-chevron-left,

.carousel-control .glyphicon-chevron-right,

.carousel-control .glyphicon-menu-left,

.carousel-control .glyphicon-menu-right {

  position: absolute;

  top: 50%;

  z-index: 5;

  display: inline-block;

  margin-top: -10px;

  font-size: 40px;

}

.carousel-control .icon-prev,

.carousel-control .glyphicon-chevron-left,

.carousel-control .glyphicon-menu-left {

  left: 50%;

  margin-left: -10px;

}

.carousel-control .icon-next,

.carousel-control .glyphicon-chevron-right,

.carousel-control .glyphicon-menu-right {

  right: 50%;

  margin-right: -10px;

}

/*--------------------------------

  Testimonial

----------------------------------*/

.testimonial-wrapper{

    /*background: url('img/testimonial-back.jpg');*/

    background-size: cover;

    background-attachment: fixed;

    position: relative;

}

/*.testimonial-wrapper::before{

    content: " ";

    position: absolute;

    top: 0;

    left: 0;

    width:100%;

    height:100%;

    background: rgba(0,0,0,0.8);

}*/

.testimonial-wrapper h2{

    font-size: 30px;

    margin-bottom: 75px;

    font-weight: 500;

    color:#333333;

    text-transform: uppercase;

    position: relative;

}

.testimonial-wrapper h2::before{

    position: absolute;

    content: "";

    bottom: -10px;

    left: 50%;

    height: 2px;

    width: 200px;

    background: #333333;

    margin-left: -100px;

}

.testimonial-wrapper img{

    width: 17%;

    border-radius: 50%;

    border: 4px solid #dddddd;

    margin-right: 5% 

}

.testimonial-wrapper .contents{

    width: 75%;

    float: right;

}

.testimonial-wrapper .contents p{

    color: #444444;

    line-height: 24px;

    letter-spacing: 1px;

}

.testimonial-wrapper .contents .name{

    margin-top: 40px;

    text-transform: uppercase;

    font-size: 18px;

    font-weight: 500;

}

.testimonial-wrapper .carousel-indicators{

    bottom: -30px;

}

 .testimonial-wrapper .carousel-indicators .active{

    background: #939598;

}

.testimonial-wrapper .carousel-indicators li{

    border:1px solid #939598;

}

/*--------------------------------

  Clients

----------------------------------*/

.client-wrapper{

    background: #f5f5f5;

    padding: 50px 0;

}

.clients{

    text-align: center;

}

.clients li{

    display: inline-block;

    width:17%;

    margin: 15px 1.3%;

    

    border: 1px solid #dddddd;

}

.clients li img{

    padding:15px;

}

/*--------------------------------

  Portfolio

----------------------------------*/

.portfoliowrapper{

    background: #f5f5f5;

}

.folio-img{

    float:left;

    width:50%;

    position: relative;

}

/*.folio-img::before{

    position: absolute;

    content: "";

    background: rgba(8,142,218,0.5);

    width:100%;

    height:100%;

    top: 0;

    left: 0;

}*/

.folio-img:hover::before{

    position: absolute;

    content: "";

    background: rgba(0,0,0,0.4);

    width:100%;

    height:100%;

    top: 0;

    left: 0;

    z-index:99;

}

.folio-img .portlogo{

    position: absolute;

    top: 40%;

    width:70%;

    left:50%;

    margin-left:-35%;

    z-index: 999;

    display: none;



}

.folio-img:hover .portlogo{

    display: block;

}



.clearboth{

    clear: both;

}



/*--------------------------------

  Service

----------------------------------*/



.service-block{

    padding-top: 100px;

}

.service-block.black{

    background: #444444;

}

.service-block.blue{

    background: #25AAE1;

}

.service-block.purple{

    background: #8A63B3;

}

.service-block.green{

    background: #1DA158;

}

.service-block .contents{

    padding-top:100px;

    padding-bottom: 70px;

}

.service-block .contents h1{

    font-size: 40px;

    font-weight: bold;

    text-transform: capitalize;

    color:#ffffff;

}

.service-block .contents p{

    margin-top: 20px;

    color: #ffffff;

    letter-spacing: 1px;

    text-align: center;

}



/*--------------------------------

  Career

----------------------------------*/

.careerwrapper{

    position: relative;

}

.careerwrapper .form-wrapper{

    padding:30px;

}

.top-sec{

    background: url('img/career.jpg');

    padding:200px 0;

    background-size: cover;

    text-align: center;

}

.top-sec .contents{

    max-width: 720px;

    padding: 15px;

    margin:auto;

}

.top-sec .contents h1{

    font-size: 50px;

    font-weight: 600;

    color: #ffffff;

    text-shadow: 0 1px 1px solid rgba(0,0,0,0.3);

}

.top-sec .contents p{

    font-size: 24px;

    font-weight: 600;

    color:#ffffff;

    line-height: 35px;

    margin-top: 30px;

}

.btm-sec{

    background: #f8f8f8;

}

.btm-sec h1{

    color: #444444;

    font-size: 35px;

    text-transform: capitalize;

    font-weight: bold;

    margin-bottom: 50px;



}

.tabcontent{

    padding: 15px;

    background: #ffffff;

}

.tabcontent h2{

    text-align: left;

    color: #555555;

}

.tabcontent p{

    color: #999999;

    height:60px;

    line-height: 24px;

    overflow: hidden;

    margin: 15px 0 5px 0;

}

.tab-content{

    margin-top: 75px;

}

.tab-pane .contents{

    padding: 15px;

    background: #ffffff;

    margin:15px 0;

    border:1px solid #dddddd;

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

    -webkit-transition: all ease 0.50s;

    -moz-transition: all ease 0.50s;

    transition: all ease 0.50s;

}

.tab-pane .contents:hover{

    box-shadow: 0 1px 1px rgba(0,0,0,0.2);

}

.tab-pane .contents h2{

    font-size: 18px;

    /*font-weight: bold;*/

    text-align: left;

    color: #555555;

    text-transform: capitalize;



}

.tab-pane .contents p{

    color: #999999;

    line-height: 24px;

    overflow: hidden;

    margin: 15px 0 5px 0;

    letter-spacing: 0.7px;

}

.tab-pane .contents a{

    color:#25AAE1;

    text-transform: capitalize;

    margin-left: 20px;

}

.tab-pane a:hover{

    color: #62cbf6;

}

.form-wrapper{

    background: #ffffff;

    padding: 15px;

}

.form-wrapper .form-control{

    border-radius: 0;

    margin-bottom: 20px;

}            

.form-wrapper .form-control.custom{

    border-width: 0;

    box-shadow: none;

    width:auto;

    height:auto;

}

.form-wrapper span{

    font-weight: bold;

    color: #999999;

}

.careertab li{

    width:50%;

    float: left;

    text-align: center;

}

.careertab li .tabcontent h2{

    text-align: center;

}

.careertab li.active .tabcontent h2{

    text-align: center;

    color: #ffffff;

}

.careertab li.active .tabcontent p{

    color: #ffffff;

}

.careertab li.active .tabcontent{

    background: #25aae1;

}

.careertab li.active .btn, 

.careertab li.active .btn{

    background: #444444;

}

.careertab li.active .btn:hover, 

.careertab li.active .btn:focus{

    background: #000000;

}

.careertab li.active .highlight{

    text-align: center;

    color:#eeeeee;

    font-size: 14px;

    text-transform: uppercase;

    font-weight: 600;

    margin:0;

    height:auto;

    letter-spacing: 1px;

}

.careertab li .highlight{

    text-align: center;

    color:#777777;

    font-size: 14px;

    text-transform: uppercase;

    font-weight: 600;

    margin:0;

    height:auto;

    letter-spacing: 1px;

}

/*Contact*/

.contact-banner-top{

    text-align: center;

    background: url('img/contact.jpg');

    background-size: cover;

    position:relative;

    padding-top: 200px;

}

.contact-banner-top::before{

    content: " ";

    position: absolute;

    top:0;

    left: 0;

    width:100%;

    height: 100%;

    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(135deg, rgba(13, 98, 188, 0.85) 0%, rgba(134, 150, 69, 0.85) 100%) repeat scroll 0 0;

    background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgba(13, 98, 188, 0.85) 0%, rgba(134, 150, 69, 0.85) 100%) repeat scroll 0 0;

}

.contact-banner-top p{

    color: #ffffff;

    font-size: 40px;

    line-height: 40px;

    letter-spacing: 1px;

    text-transform: capitalize;

}

.contact-banner-top .highlight{

    color: #ffffff;

    font-size: 55px;

    font-weight: bold;

    line-height: 60px;

    margin-top:30px;

    position: relative;

}

.contact-banner-top .small-txt{

    margin-top: 50px;

    font-size: 18px;

    font-weight: 300;

}

.contact-banner-top .highlight::before{

    content: " ";

    position: absolute;

    bottom:-10px;

    left: 50%;

    width:100px;

    height: 100%;

    height:1px;

    background: #ffffff;

    margin-left: -50px;



}

.customcheckbox{

    border: 1px solid #cccccc; 

    margin:0 15px;

    padding:20px;

    border-radius: 4px;

    /*background: red;*/

    text-align: center;

    margin-bottom: 20px;

}

.customcheckbox li{

    width:30%;

    display: inline-block;

    margin: 1%;

}

.ac-custom label{

    color: #696969;

    font-size: 14px;

    background: #f3f3f3;

    border: 1px #f3f3f3;

    border-radius: 4px;

    text-transform: uppercase; 

    width:100%;

    line-height: 40px;
    padding: 5px 15px;

}

.ac-custom input[type="checkbox"]:checked + label, .ac-custom input[type="radio"]:checked + label{

    color: #ffffff;

    background: #25aae1;

    border: 1px #25aae1;

}

.customcheckbox p{

    margin-top: 10px !important;

    padding-bottom: 20px;

    border-bottom: 1px solid #eeeeee;

    font-size: 24px !important;

    font-weight: 300;

}



.ac-custom input[type="checkbox"], .ac-custom input[type="radio"], .ac-custom label::before{

    display: none;

}

.ac-custom svg{

    display: none;

}


address{

    margin-top: 50px;

}

address p{

    color: #ffffff !important;

    font-size: 18px !important;

    font-weight: 300 !important;

    margin-bottom: 15px;

}

address a{

    color: #ffffff;

    font-weight: 300 !important;

}

address a:hover{

    color: #cccccc;

}

.social li{

    display: inline-block;

    margin: 5px;

}

.social li a .fa{

    color: #ffffff;

    border: 2px solid #ffffff;

    border-radius: 50%;

    line-height: 48px;

    width:50px;

    font-size: 20px;

    text-align: center;

    cursor: pointer;

}

.social li a:hover .fa{

    background: rgba(255,255,255,0.3);

}

.backbtm{

    margin-top:30px;

}

.backbtm .fa{

    border: 2px solid #ffffff;

    padding:12px 10px;

    border-radius: 5px;

    font-size: 20px;

}

.contactwrapper{

    /*padding:100px 0;*/

    background: url('img/contact3.jpg');

    background-size: cover;

}

.contactcontents{

    padding:50px 100px 100px 100px;

    background: #ffffff;

    position: relative;

}

.contactcontents::before{

    content: "";

    top:-120px;

    position: absolute;

    left: 0;

    height:140px;

    width:100%;

    background-position: center;

    background-image: url('img/contact2.png');

    background-size: cover;

}

.contactwrapper h1{

    color:#464646;

    font-weight: 300;

    font-size: 35px;

    position: relative;

}

.contactwrapper h1::after {

    content: "";

    background-color: #2892cf;

    bottom: -30px;

    content: "";

    height: 1px;

    left: 50%;

    margin-left: -20px;

    position: absolute;

    width: 40px;

}

.contactwrapper p{

    color: #959595;

    text-align: center;

    font-size: 14px;

    margin-top: 60px;

}

.contactwrapper form{

    margin-top: 50px;

}

.contactwrapper .input-group{

    padding: 0 15px;

    margin-bottom: 20px;

}

.input-group-addon{

    text-transform: capitalize;

}

.input-group-addon sup{

    color: #25aae1;

}

.contactwrapper .form-control{

    height:50px;

}

.contactwrapper textarea.form-control{

    height: auto;

}

.btn.btn-big{

    padding:15px 25px;

    margin-top: 35px;

}



.demo-droppable {

    background: transparent;

    color: #fff;

    padding: 100px 0;

    text-align: center;

    cursor: pointer;

    border-radius: 5px;

    border: 5px dashed #cccccc;

  }

.demo-droppable p{

    margin-top: 0;

    font-size: 16px;

    /*font-weight: bold;*/

    text-transform: capitalize;

  }

.demo-droppable.dragover {

    background: #00CC71;

 }

.drag .head{

    color:#25aae1;

    text-transform: capitalize;

    font-size: 22px;

    text-align: center;

    margin-top: 40px;

    margin-bottom: 30px;

    /*font-weight: bold;*/

}

.output{

    margin-top:10px;

    height:30px;

}

.output p{

    margin-top:0;

    text-align: center;

}

/*Footer*/

footer{

    

}

.footer-top{

    padding:75px 0 50px 0;

    background: #191919;

    position: relative;



}

.footer-top::before{

    content: " ";

    background: #121212;

    position: absolute;

    top:0;

    left: 0;

    width:50%;

    height: 100%;



}

.footer-contents p{

    text-align: center;

    color: #555555;

    font-size: 14px;

    text-transform: uppercase;

    font-weight: bold;

    letter-spacing: 1.5px;

}

.footer-contents .head{

    color: #ffffff;

    margin-top: 30px;

    font-size: 35px;

    text-transform: capitalize;

}

.footer-contents .head a{

    color: #ffffff;

}

.footer-contents .head a:hover{

    color: #777777;

}

.footer-contents .arrow{

    text-align: right;

    margin-top: 15px;

}

.footer-contents .arrow a{

    color: #777777;

}

.footer-contents .arrow a:hover{

    color: #ffffff;

}

.footer-contents .arrow .fa{

    font-size: 22px;

}

.footer-bottom{

    background: #000000;

    color: #dddddd;

    border-top:1px solid #555555;

    text-align: center;

    line-height: 40px;

}

.footer-bottom a{

    color: #dddddd;

    text-transform: capitalize;

    letter-spacing: 1px;

}

.footer-bottom a:hover{

    color: #aaaaaa;

}



/*-----------------------------*/

/*.footer-top-inner h3,

.section-title{

    font-weight: 300 !important;

}*/

.home-testimonial-wrapper p{

    font-size: 15px;

    color: #333333;

    font-weight: 500;

}

.home-testimonial-wrapper h5{

    font-family: 'Josefin Slab', serif;

}