body{font-family: 'Cabin', sans-serif;}

.nav-black{background:url('../marketingimages/navi-bg.jpg') repeat-x left top;
border-left: #fff 5px solid;
background: #363636;
    }
.navbar-wrapper{margin: 0;}

.navbar-nav > li {margin: 18px 0 0; border-bottom:  transparent;}
.navbar-nav > li a{color: #fff; text-transform: uppercase;}
.navbar-nav > li a:hover{background: transparent; border-bottom: #2aaf55 solid 2px;}
.navbar-nav > li:last-child{background: #28a751; border-radius: 4px; border-bottom: none;}

.navbar-toggle{background: #2fb358; margin-top: 28px;}
.navbar-toggle .icon-bar{color: #fff;}
.banner-gray{background: #e0e0e0; overflow: auto;}
.banner-gray-inner{ padding: 96px 0 10px; width: 100%; text-align: center;}
.banner-gray-inner {font-weight: bold;}
.lmore-btn{background: url('../marketingimages/lmore-btn-bg.png') repeat-x left;
           padding: 13px 31px;
           text-align: center;
           text-transform: uppercase;
           border: 0;
           color: #fff;
           border-radius: 4px;}
.lmore-blue-btn{background: url('../marketingimages/lmore-btn-bg-blue.png') repeat-x left;
           padding: 13px 31px;
           text-align: center;
           text-transform: uppercase;
           border: 0;
           color: #fff;
           border-radius: 4px;}
.banner-gray-inner h1{color: #3a3a3a; font-weight: 800; margin: 30px 0 37px; padding-top: 30px;}
.banner-gray-inner h2{color: #3a3a3a; font-weight: 400; }

.video-area{background: #505150; padding: 15px 0; overflow: auto;}

.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%;
}
.contact-today-container{
    text-align: center;
    padding: 28px 0;
    color: #3a3a3a;
    font-size: 18px;
}
.contact-today-container h2{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.contact-today-container ul{ float: left;}
.contact-today-container li{text-align: left;}
.ul-list{margin:20px auto; width:687px;}

.contact-today-container a{color: #e71d34;}

.entitles{background: #e2e0e1; padding: 20px; text-align: center; margin: auto; overflow: auto;}
.entitles h1{font-weight: bold; text-transform: uppercase; color: #000; text-align: center; font-size: 26px;}
.entitles p{color: #000; text-align: center; font-size: 18px;}
.entitles p img{text-align: center; margin: auto;}


.social-area{}
.social-area .fb{background: #335796; text-align: center; color: #fff; text-transform: uppercase; min-height: 70px; padding: 21px 0;}
.social-area .fb p {text-align: center;}
.social-area .fb p img {text-align: center; margin: auto;}

.social-area .twitter{background: #5c90cc; text-align: center; color: #fff; text-transform: uppercase; min-height: 70px; padding: 21px 0;}
.social-area .twitter p {text-align: center;}
.social-area .twitter p img {text-align: center; margin: auto;}

.social-area .linkedin{background: #2c2827; text-align: center; color: #fff; text-transform: uppercase; min-height: 70px; padding: 21px 0;}
.social-area .linkedin p {text-align: center;}
.social-area .linkedin p img {text-align: center; margin: auto;}

.footer-area{margin: 20px 0;}
.footer-area a{color: #e71d34}
.footer-area .last{text-align: right;}

.navbar-brand{height: auto;}
.navbar{margin-bottom: 0;}

#login-dp{
    min-width: 450px;
    padding: 14px 14px 0;
    overflow:hidden;
    background:#fff url(../marketingimages/login-top-arrow.png) no-repeat top center;;
    height: 350px;
    border-radius: 0;
    border-bottom: #1b9cd8 solid 7px !important;
    border: none;
}
#login-dp .top-arrow{
    background: url(../marketingimages/popo-top-arrow.png)no-repeat top; 
    position: absolute;
    top: -20px;
    width: 59px;
    height: 22px;
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:transparent;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}

#login-dp .form-control {
    height: 50px;
    border-radius: 0;
    box-shadow: none !important;
    text-align: center;
    background: #eeeeee;
    border: 0;
}
.popup-close{
    position: absolute;
    right: 0;
    top: -4px;
    background: #259c4c;
    border: none;
    padding: 10px 13px;
    color: #fff;
}
.title{text-align: center; font-size: 19px; margin: 0;}
.pop-login-btn{padding: 10px 36px; border: none;  font-weight: bold; text-align: center; text-transform: uppercase; color: #fff; background: url(../marketingimages/login-green.png) repeat-x left; border-radius: 4px; float: right;}
.pop-cancel-btn{padding: 10px 36px; border: none;  font-weight: bold; text-align: center; text-transform: uppercase; color: #fff; background: url(../marketingimages/cancel-gray.png) repeat-x left; border-radius: 4px;}
#login-dp .signup-pop{color: #2aaf55; text-decoration: none; font-size: 18px;}
#login-dp .fotgot-pop{color: #2aaf55; text-decoration: none; font-size: 14px;}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover{background: transparent;}
.inner-page-area{margin: 89px 0 0;}
.inner-top-blue{  background-image: -moz-linear-gradient( 90deg, rgb(46,130,179) 0%, rgb(54,155,213) 100%);
                  background-image: -webkit-linear-gradient( 90deg, rgb(46,130,179) 0%, rgb(54,155,213) 100%);
                  background-image: -ms-linear-gradient( 90deg, rgb(46,130,179) 0%, rgb(54,155,213) 100%);
                  padding: 10px 0; text-align: center; color: #fff; font-weight: bold; align-content: center; min-height: 137px;}
.inner-top-right-bg{background: url('../marketingimages/inner-banner-right.png') no-repeat left; padding: 31px 0 16px 16px; color: #fff; font-size: 14px; min-height: 137px;}

.inner-top-red{  
    background-image: -moz-linear-gradient( 90deg, rgb(155,26,36) 0%, rgb(189,30,43) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(155,26,36) 0%, rgb(189,30,43) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(155,26,36) 0%, rgb(189,30,43) 100%);
    padding: 10px 0; text-align: center; color: #fff; font-weight: bold; align-content: center; min-height: 137px;}

.inner-top-green{  
    background-image: -moz-linear-gradient( 90deg, rgb(39,150,73) 0%, rgb(46,175,85) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(39,150,73) 0%, rgb(46,175,85) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(39,150,73) 0%, rgb(46,175,85) 100%);
    padding: 10px 0; text-align: center; color: #fff; font-weight: bold; align-content: center; min-height: 137px;}

.inner-contant-container{
    text-align: center;
    padding: 28px 0;
    color: #3a3a3a;
    font-size: 18px;
}
.inner-contant-container h1{ color: #379ed8; font-size: 24px; }
.moredown{width: 45px; height: 44px; background: url(../marketingimages/downarrow.png) no-repeat; display: block; margin: auto;}


/* ============================================================
  GLOBAL
============================================================ */
.effects {
    padding-left: 15px;
}
.effects .img {
    position: relative;
    float: left;
    /*    margin-bottom: 5px;*/
    width: 25%;
    overflow: hidden;
}
/*.effects .img:nth-child(n) {
    margin-right: 5px;
}*/
.effects .img:first-child {
    /*    margin-left: -15px;*/
}
.effects .img:last-child {
    margin-right: 0;
}
.effects .img img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

.overlay {
    display: block;
    position: absolute;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

a.close-overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 45px;
    text-align: center;
    background-color: #000;
    cursor: pointer;
}
a.close-overlay.hidden {
    display: none;
}

a.expand {
    display: block;
    position: absolute;
    z-index: 100;
    text-align: center;
    color: #fff;
    line-height: 50px;
    font-weight: 500;
    font-size: 20px;

}
a.expand:hover {text-decoration: none ;}
.expand h1{font-size: 22px !important; line-height: 0; margin-bottom: 20px;}
.expand p{font-size: 18px !important; line-height: 20px;}
/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
}
#effect-1 .overlay a.expand {
    left: 0;
    right: 0;
    bottom: 50%;
    margin: 0 auto -30px auto;
}
#effect-1 .img.hover .overlay {
    height: 100%;
}

/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
#effect-2 .overlay {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
}
#effect-2 .overlay a.expand {
    left: 0;
    right: 0;
    top: 50%;
    margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
    height: 100%;
}

/* ============================================================
  EFFECT 3 - SLIDE IN LEFT
============================================================ */
#effect-3 .overlay {
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: 100%;
}
#effect-3 .overlay a.expand {
    top: 0;
    bottom: 0;
    left: 50%;
    margin: auto 0 auto -30px;
}
#effect-3 .img.hover .overlay {
    width: 100%;
}

/* ============================================================
  EFFECT 4 - SLIDE IN RIGHT
============================================================ */
#effect-4 .overlay {
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 100%;
}
#effect-4 .overlay a.expand {
    top: 0;
    bottom: 0;
    right: 50%;
    margin: auto -30px auto 0;
}
#effect-4 .img {
    overflow: hidden;
}
#effect-4 .img.hover .overlay {
    width: 100%;
}

/* ============================================================
  EFFECT 5 - ICON BORDER ANIMATE
============================================================ */
#effect-5 .overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}
#effect-5 .overlay a.expand {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#effect-5 .img.hover .overlay {
    opacity: 1;
}
#effect-5 .img.hover .overlay a.expand {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

/* ============================================================
  EFFECT 6 - ICON BOUNCE IN
============================================================ */
#effect-6 .overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}
#effect-6 .overlay a.expand {
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#effect-6 .img.hover .overlay {
    opacity: 1;
}
#effect-6 .img.hover .overlay a.expand {
    top: 50%;
    margin-top: -30px;
    opacity: 1;
}

.inner-top-blue-services{padding: 4px 0 24px;}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media only screen and (max-width: 1100px) {
    .effects {
        padding-left: 5px;
    }
    .effects .img {
        width: 50%;
    }
    .effects .img:nth-child(n) {
        margin-right: 5px;
    }
    .effects .img:first-child {
        margin-left: 0;
    }
    .effects .img:nth-child(2n-1) {
        margin-left: -5px;
    }
    .effects .img:nth-child(2n) {
        margin-right: 0;
    }
    .effects .img:last-child {
        margin-right: 0;
    }
}
@media only screen and (max-width: 520px) {
    .effects .img {
        width: 100%;
    }
    .effects .img:nth-child(n) {
        margin-right: 0;
    }
    .effects .img:first-child {
        margin-left: 0;
    }
    .effects .img:nth-child(2n-1) {
        margin-left: 0;
    }
    .effects .img:nth-child(2n) {
        margin-right: 0;
    }
    .effects .img:last-child {
        margin-right: 0;
    }
    .effects .img img {
        margin: 0 auto;
    }
}


.irol-services{}
.screen-shot{}
.screen-shot img{margin: 20px auto; text-align: center;}
.irol-solutions{}
.irol-solutions h1{color: #379dd8; text-transform: uppercase; text-align: center; font-size: 28px; font-weight: bold;}
.irol-solutions p{text-align: center; font-size: 18px;}
.solution-list {margin: 20px 0}
.solution-list ul li{font-size: 16px; margin: 15px 0}

.irol-customer{background:#3f3f3f; padding: 10px 0; width: 100%; float: left; min-height: 400px;}
.irol-customer h1{margin: 10px 10px 10px 20px; font-size: 26px; color: #379dd8;}
.irol-customer ul{}
.irol-customer li{margin: 15px 0; color: #fff; font-size: 18px;}
.customer-img{position: absolute; left: 15px; top: -10px;}

.contact{text-align: center; background: #e1e1e0; padding: 30px 0;}
.contact h1{color: #379dd8; text-transform: uppercase; text-align: center; font-size: 28px; font-weight: bold; margin-top: 0;}
.contact p{margin-bottom: 0; font-size: 26px; color: #000;}
.contact strong{color: #379dd8; margin-right: 10px; text-align: right;}


.contact-message{background: #414242;}
.contact-message .jumbotron {
    background: #414242;
    color: #FFF;
    border-radius: 0px;
}
.contact-message .jumbotron-sm { padding-top: 24px;
                                 padding-bottom: 24px; }
.contact-message .jumbotron small {
    color: #FFF;
}
.contact-message .h1 small {
    font-size: 24px;
}
.contact-message .well{
    background: #414242;
    border:none;
}
.contact-message input[type="text"] {height: 50px; border-radius: 0;background: #e1e1e1;}
.contact-message textarea {height: 175px; border-radius: 0;background: #e1e1e1;}
.contact-message h1{text-align: center; color: #3a9ad1; font-size: 23px; padding: 30px 0; margin: 0;}
.send-message{background: url('../marketingimages/contact-btn-bg.png') repeat-x left top; border: #000 solid 1px; color: #fff; text-align: center; text-transform: uppercase; padding: 10px 26px;}

.faq-left{background: #424343; padding: 20px 30px}
.faq-left h1{font-size: 18px; color: #389dd7;}
.faq-left h2{font-size: 16px; color: #ea253c;}
.faq-left ul{margin: 0; padding: 0;}
.faq-left li{color: #fff; margin: 10px 0; padding: 0; font-size: 16px;}



.faq-right{background: #e1e1e0;}
/*******************************
* Does not work properly if "in" is added after "collapse".
* Get free snippets on bootpen.com
*******************************/
.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #fff;
    background-color: #389dd7;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 18px;
}

.panel-title > a {
    display: block;
    padding: 15px;
    text-decoration: none;
}

.more-less {
    float: right;
    color: #fff;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
    background: #a6a5a5;
    color: #fff;
    font-size: 16px;
}

.gray-container-bg{
    background: #e2e0e1;
    padding: 20px;
}
.gray-container-bg p{text-align: center;}
.gray-container-bg img{margin: auto;}
.red-color-btn{background: url('../marketingimages/contact-btn-bg.png') repeat-x left top; border:none; color: #fff; text-align: center; text-transform: uppercase; padding: 10px 26px; 
               border-radius: 4px; margin: 10px 0;}
.gray-container-bg strong{color: #379dd8; font-size: 28px; }

.irol-left-img-layout{background:#e2e0e1; padding: 10px 0; width: 100%; float: left; overflow: hidden;}
.irol-left-img-layout h1{margin: 10px 10px 10px 20px; font-size: 26px; color: #379dd8;}
.irol-left-img-layout ul{}
.irol-left-img-layout li{margin: 15px 0; color: #000; font-size: 18px;}
.left-customer-img-left{position: absolute; left: 0; top: -10px;}




.irol-right-img-layout{background:#3f3f3f; padding: 10px 0; width: 100%; float: left; overflow: hidden;}
.irol-right-img-layout h1{margin: 10px 10px 10px 20px; font-size: 26px; color: #379dd8;}
.irol-right-img-layout ul{}
.irol-right-img-layout li{margin: 15px 0; color: #fff; font-size: 16px;}
.right-customer-img-right{position: absolute; right: 0; top: -10px;}


.irol-registration{background: #e2e0e1; overflow: auto;  padding: 20px;}
.irol-registration h1{color: #000; font-size: 18px; font-weight: bold;}

.irol-registration .form-control{height: 50px; border: none; box-shadow: none; border-radius: 0; }
.irol-registration p{font-size: 16px; text-align: left; color: #000;}

.form-buttons{margin: auto; text-align: center;}
.gray-btn{padding: 10px 36px; border: none; text-align: center; text-transform: uppercase; color: #fff; background: url(../marketingimages/cancel-gray.png) repeat-x left; border-radius: 4px;}


.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

.paypal-btn{background: url('../marketingimages/paypal.png') no-repeat left top; width: 268px; height: 48px; border: 0;}

.checkbox label, .radio label {padding-left: 0 !important; color: #000; font-size: 16px;}

.top-login{background:#e2e0e1 url(../marketingimages/login-left-arrow.png) left top no-repeat; height: 38px; }
.login-bg-arrow{color: #fff; margin-top: 9px;}
.top-register-button{ margin: 0; background: url(../marketingimages/register-red.png) repeat-x left top; color: #fff; text-align: center; padding: 10px 50px; display: inherit; position: absolute; top: 0; right: 0;}
.top-register-button:hover{color: #fff; text-decoration: none;}

.v-login{}
.v-login ul{padding: 5px 35px;}
.v-login li{ list-style: none; float: left;} 
.v-login input{border: none; border-bottom: #000 solid 1px; background: transparent; margin: 0 10px;}
.v-login label{font-weight: normal; vertical-align: baseline}
.v-login .login-now-btn{background: url(../marketingimages/login-round.png) no-repeat; width: 25px; height: 25px; border: none;}
.header-social {background: transparent !important;}
.header-social ul {margin: 2px 0; padding: 0;}
.header-social li {list-style: none; float: left; margin: 10px 5px;}

.nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent;
}


@media (min-width:220px) and (max-width: 800px) {
    .nav-black{/*background: #fff;*/}    
    #login-dp{min-width: 100% !important;}
    #login-dp .top-arrow{display: none;}
    .pop-login-btn{padding: 10px 30px;}
    .pop-cancel-btn{padding: 10px 30px;}
    #login-dp .signup-pop, #login-dp .fotgot-pop{color: #fff;}
    .popup-close{display: none;}
}
@media (min-width:220px) and (max-width: 800px) {
    .ul-list{width: 100%;}
    .footer-area .last {
        text-align: left;
    }

    .banner-gray-inner h1 {font-size: 22px;}
    .nav-black-mobile {/*background: #000;*/}
    .customer-img {position: inherit!important; left: 0!important; top: -10px !important;}
    .customer-img img{width: 100%;}

    .left-customer-img-left {position: inherit!important; left: 0!important; top: -10px !important;}
    .right-customer-img-right {position: inherit!important; left: 0!important; top: -10px !important;}

    .right-customer-img-right img{width: 100%}
    .left-customer-img-left img{width: 100%}

    .irol-right-img-layout{}

}

@media (min-width:768px) and (max-width: 1024px) {
    .nav>li>a {
        position: relative;
        display: block;
        padding: 8px 8px;
        font-size: 11px;

    }
}

@media (min-width:220px) and (max-width: 1023px) {
    .top-login{display: none;}
}

@media (min-width: 768px) and (max-width: 1024px) {

.navbar-brand img{width: 198px;}

}

@media (min-width: 320px) and (max-width: 640px) {

.navbar-brand img{width: 192px;}

.banner-gray-inner h1 {
    font-size: 14px;
}
.banner-gray-inner h2{
    font-size: 14px;
}
}