@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src:url('../fonts/brandon_grotesque_regular-webfont.eot');
    src:url('../fonts/brandon_grotesque_regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_regular-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_regular-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_regular-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_regular-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'brandon_grotesqueRgIt';
    src:url('../fonts/brandon_grotesque_regular_italic-webfont.eot');
    src:url('../fonts/brandon_grotesque_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_regular_italic-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_regular_italic-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_regular_italic-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_regular_italic-webfont.svg#brandon_grotesqueRgIt') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'brandon_grotesquethin';
    src:url('../fonts/brandon_grotesque_thin-webfont.eot');
    src:url('../fonts/brandon_grotesque_thin-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_thin-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_thin-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_thin-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_thin-webfont.svg#brandon_grotesquethin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesquethin_italic';
    src:url('../fonts/brandon_grotesque_thin_italic-webfont.eot');
    src:url('../fonts/brandon_grotesque_thin_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_thin_italic-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_thin_italic-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_thin_italic-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_thin_italic-webfont.svg#brandon_grotesquethin_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesquemedium';
    src:url('../fonts/brandon_grotesque_medium-webfont.eot');
    src:url('../fonts/brandon_grotesque_medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_medium-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_medium-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_medium-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_medium-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'brandon_grotesqueMdIt';
    src:url('../fonts/brandon_grotesque_medium_italic-webfont.eot');
    src:url('../fonts/brandon_grotesque_medium_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_medium_italic-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_medium_italic-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_medium_italic-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_medium_italic-webfont.svg#brandon_grotesqueMdIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesquebold';
    src:url('../fonts/brandon_grotesque_bold-webfont.eot');
    src:url('../fonts/brandon_grotesque_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_bold-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_bold-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_bold-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_bold-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesquebold_italic';
    src:url('../fonts/brandon_grotesque_bold_italic-webfont.eot');
    src:url('../fonts/brandon_grotesque_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_bold_italic-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_bold_italic-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_bold_italic-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_bold_italic-webfont.svg#brandon_grotesquebold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesqueblack_italic';
    src:url('../fonts/brandon_grotesque_black_italic-webfont.eot');
    src:url('../fonts/brandon_grotesque_black_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_black_italic-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_black_italic-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_black_italic-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_black_italic-webfont.svg#brandon_grotesqueblack_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_grotesqueblack';
    src:url('../fonts/brandon_grotesque_black-webfont.eot');
    src:url('../fonts/brandon_grotesque_black-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brandon_grotesque_black-webfont.woff2') format('woff2'),
        url('../fonts/brandon_grotesque_black-webfont.woff') format('woff'),
        url('../fonts/brandon_grotesque_black-webfont.ttf') format('truetype'),
        url('../fonts/brandon_grotesque_black-webfont.svg#brandon_grotesqueblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
    font-family: 'brandon_grotesque_regularRg';
    font-size:18px;
    color:#777777;
    padding-top:105px;
    font-weight:normal;
}
a {
    color: #00aaff;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #019ce9;
    text-decoration: underline;
}

.btn-blue {
    color: #fff;
    background-color: #00aaff;
    border-color: #00aaff;
}
.btn-blue:focus,
.btn-blue.focus {
    color: #fff;
    background-color: #00a5f8;
    border-color: #00a5f8;
}
.btn-blue:hover {
    color: #fff;
    background-color: #00a5f8;
    border-color: #00a5f8;
}
.btn-blue:active,
.btn-blue.active,
.open > .dropdown-toggle.btn-blue {
    color: #fff;
    background-color: #00a5f8;
    border-color: #00a5f8;
}

.btn-outline 
{
    background-color: transparent;
    color: inherit;
    border-width: 2px;
    -webkit-transition: all 0.75s;
    -moz-transition: all 0.75s;
    transition: all 0.75s;
}


.btn-outline.btn-square
{
    border-radius: 0;
}

.btn-outline.btn-primary
{
    color: #428bca;
}
.btn-blue.btn-outline
{
    color: #00aaff;
}

.btn-success.btn-outline 
{
    color: #5cb85c;
}

.btn-info.btn-outline 
{
    color: #5bc0de;
}

.btn-warning.btn-outline 
{
    color: #f0ad4e;
}

.btn-danger.btn-outline 
{
    color: #d9534f;
}
.btn-blue.btn-outline:hover,
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover
{
    color: #fff;
}

.btn-default.btn-outline:hover
{
    color: #666666;
}
.btn-circle {
    width: 45px;
    height: 45px;
    text-align: center;
    padding: 8px 10px;
    font-size: 20px;
    line-height: 1.33;
    border-radius: 30px;
}
.colorCycle-Primary { 
    background-color: #ffffff;
    border-width: 2px;
    color: #FFF;
    animation-name: primary-color;
    animation-duration:6s;
    animation-direction:alternate;
    animation-iteration-count:infinite;

    -webkit-animation-name: primary-color;
    -webkit-animation-duration:6s;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count:infinite; 
}

@keyframes primary-color {
    0% {background-color:  #3276B1;}
    25% {background-color: #255884;}
    50% {background-color: #99BBD8;}
    75% {background-color: #255884;}
}

@-webkit-keyframes Primary {
    0% {background-color: #3276B1;}
    25% {background-color:#255884;}
    50% {background-color:#99BBD8;}
    75% {background-color:#255884;}
} 


.colorCycle { 
    background-color: #ffffff;
    border-width: 2px;
    color: #FFF;
    animation-name: homeCycle;
    animation-duration:6s;
    animation-direction:alternate;
    animation-iteration-count:infinite;

    -webkit-animation-name: homeCycle;
    -webkit-animation-duration:6s;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count:infinite; 
}

@keyframes homeCycle {
    0% {background-color:#3276B1}
    25% {background-color:#255884;}
    50% {background-color:#CC3200;}
    75% {background-color: #47a447;}
}

@-webkit-keyframes homeCycle {
    0% {background-color:#006;}
    25% {background-color:#060;}
    50% {background-color:#CC3200;}
    75% {background-color:#603;}
} 

.navbar-brand {
    height:104px;
    padding: 8px 0 8px 15px;
}
.navbar-default {
    background-color: #fff;
    border-color: #e7e7e7;
}
.navbar-nav.main-menu{
    margin-top:30px;
}
.navbar-nav.main-menu > li {
    margin-left:5px;
    margin-right:5px;
}
.navbar-default .navbar-nav.main-menu > li > a {
    border-radius: 22px;
    color: #464242;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 20px;
    text-transform: uppercase;
}
.navbar-default .navbar-nav.main-menu > li > a:hover, .navbar-default .navbar-nav.main-menu > li > a:focus {
    background-color: #00aaff;
    color: #FFF;
}
.navbar-default .navbar-nav.main-menu > .active > a,
.navbar-default .navbar-nav.main-menu > .active > a:hover,
.navbar-default.main-menu .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav.main-menu > .current-menu-item > a,
.navbar-default .navbar-nav.main-menu > .current-menu-item > a:hover,
.navbar-default.main-menu .navbar-nav > .current-menu-item > a:focus 
{
    background-color: #00aaff;
    color: #FFF;
}
.banner-holder{
    position:relative;
}
.banner-holder figure{
    position:relative;
}
.banner-holder figure img{
    width:100%;
}
.banner-holder figure:after{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    content:" ";
    background-color:rgba(0,0,0,0.8);
}
.banner-txt{
    position:absolute;
    left:0;
    right:0;
    bottom:20%;
    text-align:center;
}
.banner-txt h4{
    font-size:36px;
    font-family: 'brandon_grotesquethin';
    font-weight:normal;
    margin:0 0 18px;
    color:#fff;
}
.banner-txt h1{
    font-size:66px;
    font-family: 'brandon_grotesquebold';
    font-weight:normal;
    margin:0 0 30px;
    color:#FFF;
}
.banner-txt h1 span{
    color:#00aaff;
}
.sec-white{
    background-color:#fff;
    padding:70px 0;
}
.sec-gray{
    background-color:#fafafa;
    padding:70px 0;
}
.imgHolder{
    display:block;
}
.imgHolder img{
    max-width:100%;
    margin:0 auto;
    display:block;
}
.para-holder h2{
    font-size:60px;
    color:#222222;
    font-family: 'brandon_grotesquethin';
    font-weight:normal;
    margin:30px 0 30px;
}
.para-holder h2 strong{
    font-family: 'brandon_grotesquebold';
    font-weight:normal;
}

.para-holder p{
    font-size:18px;
    color:#777777;
    line-height:24px;
    font-weight:normal;
    margin:0 0 30px;
}
.listHolder{
    margin:0 0 35px;
}
.listHolder .list-left{
    float:left;
    width:90px;
}
.listHolder .list-left i{
    width:70px;
    height:70px;
    border-radius:50%;
    background-color:#00a9ff;
    padding:16px;
    display:inline-block;
    position:relative;
    font-size: 30px;
    text-align: center;
}
.listHolder .list-left i:after {
    width:32px;
    height:32px;
    display:block;
    position:relative;
    background:url(../images/sprite.png) no-repeat left bottom;
    content:" ";
    margin:0 auto;
}
.home-icon{
    color:#fff;
    font-size:32px;
}

.listHolder .list-left i.wd:after{
    background-position:0 -170px;
}
.listHolder .list-left i.wdg:after{
    background-position:0 -68px;
}
.listHolder .list-left i.seo:after{
    background-position:0 -136px;
}
.listHolder .list-left i.andy:after{
    background-position:0 -34px;
}
.listHolder .list-left i.dm:after{
    background-position:0 -102px;
}
.listHolder .list-left i.ios:after{
    background-position:0 0;
}
.listHolder .list-right{
    margin-left:90px;
    line-height:18px;
}
.listHolder .list-right h3{
    font-size:22px;
    font-family: 'brandon_grotesquemedium';
    font-weight:normal;
    color:#222222;
    margin:0 0 10px;
}
.sec-white-padd10{
    padding: 10px 0;
}
.hd1{
    font-size:60px;
    margin:0 0 10px;
    font-family: 'brandon_grotesquethin';
    font-weight:normal;
    color:#222;
    text-align:center;
}
.hd1 strong{
    font-family: 'brandon_grotesquebold';
    font-weight:normal;
}

.sec-blue .hd1{
    color:#FFF;
    text-align:center;
}
.para22{
    font-size:22px;
    color:#959595;
    line-height:24px;
    margin-bottom:40px;
}
.sec-blue .para22{
    color:#d3d3d3;
}

/* ---- button ---- */

.button {
    display: inline-block;
    padding: 0.5em 2.2em;
    margin-bottom: 10px;
    background: none;
    border: none;
    border-radius:18px;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    font-weight:normal;
    height:36px;
}

.button:hover {
    background-color: #8CF;
    color: #222;
}

.button:active,
.button.is-checked {
    background-color: #00a9ff;
}

.button.is-checked {
    color: white;
}

.button:active {
    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {
    display:inline-block;
    /*border-radius: 0;*/
    margin-left: 0;
    margin-right: 1px;
}

/*.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }*/

/* ---- grid ---- */

.grid {
    max-width: 1200px;
}

/* clear fix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- .element-item ---- */

.element-item {
    position: relative;
    float: left;
    padding:3px;
    color: #262524;
}

.element-item img{
    width:100%;
}
.element-item > * {
    margin: 0;
    padding: 0;
}

.sort-by-button-group{
    text-align:center;
    margin-bottom:40px;
}

.element-item {
    float: left;
    width: 250px;
    height: 250px;
}

.element-item--width2 { width: 500px; }
.element-item--height2 { height: 500px; }





.demof {
    margin: 25px 0;
}
.demof ul {
    padding: 0;
    list-style: none;
}
.demof li {
    padding: 20px;

}
.demof li.odd {
    background: #fafafa;
}
.demof li:after {
    content: '';
    display: block;
    clear: both;
}

.demof li figure{
    width:234px;
    height:234px;
    padding:8px;
    overflow:hidden;
    border-radius:50%;
    background-color:#FFF;
    float:left;
}
.demof li figure img{
    max-width:220px;
    max-height:220px;
    border-radius:50%;
    width:100%;
}
.demof li .demof-rit{
    margin-left:274px;
    position:relative;
    margin-top:25px;
    margin-bottom:5px;
    border:solid 1px #e8e8e8;
    border-radius:6px;
    padding:30px 60px;
    font-size:26px;
    color:#777777;
    line-height:28px;
    background-color:#FFF;
}
.demof li .demof-rit:after{
    position:absolute;
    border:solid 20px transparent;
    border-right:solid 20px #FFF;
    left:-40px;
    top:50%;
    content:" ";
    width:0;
    height:0;
    z-index:1;
    margin-top:-20px;
}
.demof li .demof-rit:before{
    position:absolute;
    border:solid 20px transparent;
    border-right:solid 20px #e8e8e8;
    left:-41px;
    top:50%;
    content:" ";
    width:0;
    height:0;
    margin-top:-20px;
}
.demof .demof-rit a{
    font-size:26px;
    line-height:28px;
    color:#777;
    position:relative;
    font-weight:normal;
}

.demof .demof-rit a:hover{
    text-decoration:none;
}
.demof .demof-rit a p{
    font-size:26px;
    line-height:28px;
    color:#777;
    position:relative;
    font-weight:normal;
}
.demof .demof-rit a p:before{
    content:"“";
    position:relative;
}
.demof .demof-rit a p:after{
    content:'”';
    position:relative;
}
.demof .demof-rit a > span{
    font-size:20px;
    color:#00a9ff;
    position:relative;
    font-weight:normal;
}
.demof li.odd figure{
    float:right;
}
.demof li.odd .demof-rit{
    margin-right:274px;
    margin-left:0;
}

.demof li.odd .demof-rit:after{
    border:solid 20px transparent;
    border-left:solid 20px #FFF;
    left:auto;
    right:-40px;
}
.demof li.odd .demof-rit:before{
    border:solid 20px transparent;
    border-left:solid 20px #e8e8e8;
    left:auto;
    right:-41px;
}
.sec-blue{
    background-color:#00a9ff;
    padding:70px 0;
}
.team-holder{
    color:#FFF;
    margin-bottom:40px;
    text-align:center;
}
.team-holder figure{
    display:block;
    padding:8px;
    background-color:#FFF;
    width:236px;
    height:236px;
    margin:0 auto 15px;
    border-radius:50%;
}
.team-holder figure img{
    margin:0 auto;
    display:block;
    max-width:100%;
    border-radius:50%;
}
.team-holder a{
    color:#FFF;
}
.team-holder a:hover{
    text-decoration:none;
}
.team-holder h4{
    color:#FFF;
    font-size:18px;
    font-family: 'brandon_grotesquebold';
    font-weight:normal;
    margin:0 0 5px;
}
.team-holder h6{
    color:#FFF;
    font-size:16px;
    font-family: 'brandon_grotesque_regularRg';
    font-weight:normal;
    margin:0 0 10px;
}
.team-holder .team-social{
    display:block;
}
.team-holder .team-social a{
    display:inline-block;
    width:40px;
    height:40px;
    border:solid 2px #FFF;
    border-radius:50%;
    padding:6px;
    margin:0 2px;
}
.sec-footer{
    padding:70px 0 0;
    background-color:#01121b;
}
.footer-left{
}
.footer-left h3{
    color:#FFF;
    font-size:60px;
    font-weight:normal;
    font-family: 'brandon_grotesquethin';
    margin:0 0 15px;
}
.footer-left h3 strong{
    font-weight:normal;
    font-family: 'brandon_grotesquebold';
}
.footer-left h6{
    color:#FFF;
    font-size:18px;
    font-weight:normal;
    margin:0 0 44px;
    font-family: 'brandon_grotesque_regularRg';
    line-height:normal;
}
.footer-left ul{
    list-style:none;
    padding:0;
    margin:0;
}
.footer-left ul li{
    float:left;
    margin-bottom:30px;
    width:50%;
}
.footer-left ul li a{
    color:#FFF;
    font-size:18px;
    line-height:28px;
}
.footer-left ul li a i{
    margin-right:5px;
    vertical-align:top;
    font-size:28px;
    width:38px;
    text-align:center;
}
.red{
    color:red;
}
.form-area{
}
.copy-holder{
    margin:35px 0 0;
    border-top: solid 1px #022232;
    padding:15px 0;
    color:#FFF;
    font-size:16px;
    text-align:center;
    font-family: 'brandon_grotesquemedium';
    font-weight:normal;
}
/*
    font-family: 'brandon_grotesque_regularRg';
        font-family: 'brandon_grotesquethin';
    font-family: 'brandon_grotesquebold';
*/
/*span.bread-arrow, */
.breadcrumbbox span i.fa{
    padding: 0 10px;
}
.breadcrumbbox{
    font-size: 14px;
    margin: 0 0 10px 0px;
    background: #fbfbfb;
    border-bottom: 1px solid #efecef;
}
.breadcrumbbox .container {
    padding-top: 10px;
    padding-bottom: 10px;
}
.address-box {
    margin: 15px auto;
}
ul.contact-sm-links li {
    list-style: none;
    display: inline-block;
    margin: auto 5px;
    width: 40px;
    border: 1px solid #7dd4ff;
    border-radius: 50%;
    height: 40px;
    text-align: center;
    padding: 7px 0;
}
ul.contact-sm-links {
    padding: 0;
}
ul.contact-sm-links li:hover{
    background: #7dd4ff;
    border-color:#0af; 
}
ul.contact-sm-links li:hover a{
    color: #fff;
}
/* inner page banner & heading */
header.page-main-header {
    position: relative;
}
h1.inner-page-heading {
    position: absolute;
    top: 40%;
    width: 100%;
    font-size: 66px;
    text-transform: uppercase;
    font-family: brandon_grotesquebold;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* Inner page box container */
#innerpage-box{
    margin-top:50px;
}
.img-left{
    float: left;
    margin-right: 20px;
}
.img-right{
    float: right;
    margin-left: 20px; 
}

/* custom created  */
.featured-thumbnail img{
    width: 100%;
    height: auto;
}
.ml-10{margin-left:10px;}
.mr-10{margin-right:10px;}

.f12-captcha {display: block;width: 100%;color: #fff;}
.c-header .c-data, .c-reload, .f12c {width: 150px;color: #333;background: #fff;margin-right: 4px;line-height: 22px;padding-top: 5px;height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;}
.c-reload {width: 29px;padding: 1px 6px !important;align-content: center;}
.c-reload > a img {padding: 0px;margin: 0px auto 3px 0px;vertical-align: middle;line-height: 16px;}
.captcha-calculation {margin-left: 10px;font-size: 18px;font-weight: bold;}
.f12c{width:100%;}