html, body { height: 100%; }
.CarouseWraper { position: relative; height: 100%; width: 100%; }
.owl-carousel { height: 100%; width: 100%; background: url(../images/loading.gif) center center no-repeat; }
.owl-carousel { height: 100% !important; }
    .owl-carousel .item { width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
        .owl-carousel .item.one { background-image: url(../images/slide1.jpg); background-position: center center; }
        .owl-carousel .item.two { background-image: url(../images/slide2.jpg); background-position: center center; }
        .owl-carousel .item.three { background-image: url(../images/slide3.jpg); background-position: center center; }
		.owl-carousel .item.four { background-image: url(../images/slide4.jpg); background-position: center center; }
        .owl-carousel .item h1, .owl-carousel .item h2 { margin: 0; color: #ffffff; line-height: 1.4; }
        .owl-carousel .item h1 { font-size: 36px; font-weight: bolder; text-transform: uppercase; }
        .owl-carousel .item h2 { font-size: 24px; margin: 15px 0; }

.hovereffect h2 { font-size: 16px; padding:5px; margin: 0; white-space: pre; overflow: hidden; }
.hovereffect p { font-size: 12px; height: 36px; overflow: hidden; color: #333; }
.hovereffect { background: #fff; margin-bottom: 15px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }

    .hovereffect div:first-child { overflow: hidden; display: block; position: relative; }
    .hovereffect:hover { color: #FFF; box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3); }
        .hovereffect:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; }
    .hovereffect img { transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; }
    .hovereffect > div > .hoverlink { display: none; position: absolute; z-index: 9; left: 0px; right: 0px; bottom: 0px; top: 0px; background: rgba(0, 0, 0, 0.5); text-align: center; line-height: 260px; }
    .hovereffect:hover .hoverlink { display: block; }
.text-success { color: #0F9D58; }
#Top h1 { color: #fff; }
/* GLOBAL STYLES Dark #111 -  - Light #b0bec5  bright #009AAA*/
/* Padding below the footer and lighter body text */
body { font-family: 'PT Sans', sans-serif; color: #111; background: #f2f2f2; }
p, li, .table { font-size: 16px; color: #333; }
h1.lg { font-size: 5em; }
.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; }
.text-white { color: #ffffff !important; }
.bgwhite { background: #fff; }
.bggray { background: #eee; }
.bgblue { background: #009AAA; }
.relative { position: relative; }
.cyclotron { cursor: move; background-size: 100% auto; }
.slidercon { padding-top: 110px; }
.bg360 { background: url(../images/virtual_tour.jpg) repeat-x; }
.bgwebdesign { background: url(../images/bg-webdesign.png) center; background-size: cover; }
.bgvr { background: url(../images/bg-virtual-reality.jpg) center; background-size: cover; }
.bgcontact { background: url(../images/bg-contact.jpg) center; background-size: cover; }
.bgtemplates { background: url(../images/bg-templates.png) center; background-size: cover; }
.bgfeedback { background: url(../images/bg-feedback.png) center; background-size: cover; }
.bgdark p, .bgdark h1, .bgdark h2, .bgdark h3, .bgdark h4,.bgblue p, .bgblue h1, .bgblue h2, .bgblue h3, .bgblue ul li { color: #fff; }
.bgblue a, .bgdark a { color: #ddd; text-decoration: underline; }
.feedback h3, .feedback a { color: #009AAA; }
.bgfooter p, .bgfooter h1, .bgfooter h2, .bgfooter h3, .bgfooter h4,.bgfooter a { color: #ccc !important; }
.bgfooter { background: #000111; padding: 60px 0 40px 0; }
.bgfooter p, .bgfooter a { color: #ccc !important;font-size: 12px }
.bgfooter h1, .bgfooter h2, .bgfooter h3, .bgfooter h4 {color: #009AAA !important;font-size: 20px}
.bgfooter h5, .bgfooter h6 {color: #009AAA !important;font-size: 14px}
.bgfooter .nav>li>a{ padding: 10px 0}
.bgfooter .nav>li>a:hover, .bgfooter .nav>li>a:focus{ background: transparent; text-decoration: underline}
::selection { background: #009AAA; color: #FFFFFF; }
::-moz-selection { background: #009AAA; color: #FFFFFF; }
.sectiontitle { margin: 15px 0 35px 0; background: url(../images/title.png); padding: 10px; color: #009AAA; }
.text-primary { color: #009AAA; }
.dropdown-menu > li > a { padding: 10px 15px; }
.modal-content.trans h2 { color: #fff; font-size: 2em; text-transform: uppercase; }
.modal-content.trans p { color: #fff; font-size: 1.2em; }
/* CUSTOMIZE THE NAVBAR-------------------------------------------------- */
.sectionpad { padding: 120px 0; }
.padtop120 { padding: 120px 0 0; }
.padbot120 { padding: 20px 0 120px; }
.inpage { padding: 220px 0 10px; }
.pad10 { padding: 10px; }
.mar200 { margin: 20px 0; }
.mar020 { margin: 0 20px; }
.mar10 { margin: 10px; }
.pad15 { padding: 15px; }
.pad25 { padding: 25px; }
.pad250 { padding: 25px 0; }
.pad150 { padding: 15px 0; }
.pad400 { padding: 40px 0; }
.pad1000 { padding: 100px 0; }
.pad600 { padding: 60px 0; }
.pad0 { padding: 0; }
.mar0 { margin: 0; }
.martop10 { margin-top: 10px; }
.martop24 { margin-top: 24px; }
.martop30 { margin-top: 30px; }
.martop50 { margin-top: 50px; }
.marbot15 { margin-bottom: 15px; }
.box1 { padding: 20px; border: 2px solid #eee; margin-bottom: 10px; }
.card { background: #fff; margin-bottom: 15px; }
.card { transition: 2s ease all; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); }
    .card:hover .btn-inner, .card:focus .btn-inner { opacity: 1; transition: .3s ease all; }
    .card:hover, .card:focus { box-shadow: 0 10px 15px rgba(0, 0, 0, .5); transition: .3s ease all; }
    .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { margin: 0 0 15px; }
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.nav, .btn { text-transform: capitalize; }
.navbar-wrapper { position: fixed; z-index: 999; left: 0; top: 0; right: 0; background-color: #fff; padding: 20px 0 10px; transition: all 500ms ease-in-out; border-top: 3px solid #009AAA; }
    .navbar-wrapper.fixit { padding: 10px 0 6px; transition: all 500ms ease-in-out; border-top: 0; box-shadow: 0 0 10px rgba(0, 0, 0, .2); background-color: #fff; }
.navbar-brand { padding: 0px; height: 55px; transition: all 500ms ease-in-out; overflow: hidden; font-size: 2em; text-decoration: none; line-height: 40px; }
.navbar-brand img {height: 50px}
.navbar { margin: 0; }
.navbar-nav { margin: 0; }
.navbar-toggle { margin: 0; }
    .navbar-toggle .icon-bar { height: 4px; border-radius: 0; }
    .navbar-toggle .icon-bar { background: #fff; }
.navbar-wrapper.fixit .navbar-toggle .icon-bar { background: #222; }
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container { padding-right: 0; padding-left: 0; }
.navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; }
    .navbar-wrapper .navbar .container { width: auto; }
.navbar-nav > li > a { transition: all .3s ease; }
.navbar-wrapper.fixit .navbar-nav > li > a { transition: all .3s ease;}
    .navbar-wrapper.fixit .navbar-nav > li > a.btn-primary { color: #fff; }
.nav > li > a:hover, .nav > li > a:focus, .nav li.active a { background: rgba(0, 0, 0, 0.05); }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #009AAA; color: #fff }
a { color: #009AAA; text-decoration: underline }
    a:focus, a:hover { color: #999; text-decoration: none; }
hr { border-color: rgba(133, 133, 133, 0.3); border-style: dashed none none; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
.h1, .h2, .h3, .h4, .h5, .h6 { text-transform: uppercase; }
.lead { font-size: 18px; }
.btn-goto { margin: auto; text-align: center; color: #009AAA !important; border-radius: 50%; padding: 10px; width: 36px; height: 36px; display: block; }
    .btn-goto .glyphicon { width: 14px; -webkit-animation: 900ms bounce linear infinite; animation: 900ms bounce linear infinite; }
.btn { border: 0; transition: all .5s ease; padding: 10px 15px; }
    .btn.btn-default { background: #eee; color: #444 !important; }
    .btn.btn-primary { background: #009AAA; }
.btn-primary:hover, .btn-primary:focus { background: #009AAA; color: #fff !important; border: 0; }
/* CUSTOMIZE THE CAROUSEL-------------------------------------------------- */
.outt { display: none; }
.nav > li { margin-right: 10px; }
    .nav > li a { border-radius: 4px;text-decoration: none }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #FFF; cursor: default; background-color: #111; border: 1px solid #111; border-bottom-color: transparent; }
.nav > li > a:hover, .nav > li > a:focus, .nav li.active a { background: #009AAA; color: #fff;  }
.nav-tabs { border-bottom: 3px solid #111; }
    .nav-tabs > li > a:hover { border-color: #111; }
/* Since positioning the image, we need to help out the caption */
.carousel-caption { z-index: 10; bottom: 100px; text-shadow: none; color: #fff; text-align: left;left:15%; right: 40%; padding: 20px; background: rgba(0, 0, 0, .5) }
/* carousel-fade END */
.form-control { border-radius: 0px; border: 1px solid #ccc; height: 40px; background-color: #fff; color: #111; }
.form-horizontal .control-label { padding-top: 15px; }
/*owl-carousel*/
.whatwedo { text-align: center;}
.whatwedo img { width: 80%; margin: 0 auto; border-radius: 50%;transition: all ease .2s;}
.whatwedo:hover img { transform: scale(1.1); transition: all ease .5s;}
.whatwedo h2{ text-align: center; font-size: 14px}
.userlink{ background: #fff; border-radius: 3px; padding: 30px; margin-bottom: 30px}
.userlink:hover{transition: .3s ease all; background: #009AAA}
.userlink:hover h3, .userlink:hover p,.userlink:hover a {color: #fff}
.userlink>h3{height: 35px; font-size: 1.2em; color: #009AAA}
.userlink p, .userlink a{height: 36px; font-size: .75em; display: block}
.userimg { width: 120px; height: 120px; margin: auto; background-size: 100%; background-position: center; background-repeat: no-repeat}
.userimg img {border-radius: 50%;}
.SocialLinks { margin: 20px 0; padding: 0}
.SocialLinks li { list-style: none; display: inline-block ; margin-right: 10px}
.SocialLinks li img{ width: 40px}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    33% { transform: translateY(5px); }
    50% { transform: translateY(0px); }
    66% { transform: translateY(-5px); }
}

@media (max-width: 992px) {
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }
    .owl-carousel .item h1 { font-size: 2em; }
    .owl-carousel .item h2 { font-size: 1em; }
    .carnav { margin: auto; }
    footer { text-align: center; }
}

@media (max-width: 767px) {
    .carousel-caption {left:10%; right: 10%;  }
    .navbar-collapse, .navbar-collapse > div { height: 100% !important; position: fixed; z-index: 999; transition: all .3s ease; top: 0; }
    .navbar-collapse { width: 100%; background: RGBA(0, 0, 0, 0); left: 15px; }
        .navbar-collapse > div { width: 250px; left: -250px; background: #111; }
        .navbar-collapse.in { background: RGBA(0, 0, 0, 0.8); }
            .navbar-collapse.in > div { left: 0; }
        .navbar-collapse > div ul { margin: 0; }
    .navbar-nav > li { border-top: 1px solid #222; border-bottom: 1px solid #000; margin-right: 0; }
        .navbar-nav > li > a { padding: 20px; border-radius: 0; color: #fff; }
            .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav li.active a { border-left: 8px solid #009AAA; }
    .navbar-wrapper.fixit .navbar-nav > li > a { color: #fff; }
    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { color: #999; padding: 10px 40px; }
}

@media (max-width: 480px) {
	.navbar-brand img {
    height: 40px;
}
}