/*@import url('../images/fonts/futura-book-bt.ttf');*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
  ---------------------------------------------
html {  scroll-behavior: smooth !important ;  }
body, div, img, a{margin:0; padding:0; font-family: 'Open Sans', sans-serif !important;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 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 {margin: 0;padding: 0;border: 0;font-size: 100% ;;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
body {font-family: 'Open Sans', sans-serif !important; background:#fff !important;
    line-height: 1; }
ol, ul {
    list-style: none; }
blockquote, q {
    quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none; }
table {
    border-collapse: collapse;
    border-spacing: 0; }
img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-drag: none;
  -webkit-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-touch-callout: none;
  -ms-touch-callout: none;
   touch-callout: none;
}
.cube-autotran {
  
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotatecube 40s infinite;
  -moz-transform-style: preserve-3d;
  -moz-animation: rotatecube 40s infinite;
}
.cube-autotran:hover {

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotatecube 60s infinite;
    -moz-transform-style: preserve-3d;
    -moz-animation: rotatecube 60s infinite;
}
@-webkit-keyframes  rotatecube {
  from { transform: rotateX(0) rotateY(0); }
  to   { transform: rotateX(360deg) rotateY(360deg);}
}

@-moz-keyframes rotatecube {
  from { transform: rotateX(0) rotateY(0); }
  to   { transform: rotateX(360deg) rotateY(360deg);}
}
.buttons-home{position: absolute ; right: 30px;}
.buttons-home a{ background: #e0e0e8 ; text-transform: uppercase; min-width: 120px; margin-top: 20px; font-weight: 600  ;
    color: #000000; border-radius: 8px; margin: 11px 5px;}
.buttons-home a:hover{background: #8eb8c4 ; }
/*.career-slide{position: absolute ; left:0; top:50px; background: #000000; padding: 10px; cursor: pointer;}
.career-slide h4{color: #ffffff; font-weight: 600;}*/
/*.career-slide:hover + .cube > div:first-child{
    transform: rotateX(-90deg) translate3d(0, 0, 175px) !important;
}*/

.body-background{background: var(--main-background-image) center fixed !important; background-size: cover !important; background-repeat: no-repeat !important;}
.overflow-auto{overflow: auto;}
.side-butterfly{position: absolute ; bottom: 15px ; left:280px; z-index: 2;  -webkit-animation: myfirst ; /* Safari 4.0 - 8.0 */
    /*-webkit-animation-direction: alternate;*/ /* Safari 4.0 - 8.0 */  animation: myfirst 50s infinite;  /*animation-direction: alternate;*/}
@-webkit-keyframes myfirst {
    0%   { left: 10px; top: 10px;}
    25%  { left: 85%; top: 10px;}
    50%  { left: 85%; top: 80%;}
    75%  { left: 10px; top: 80%;}
    100% { left: 10px; top: 10px;}
}

@keyframes myfirst {
    0%   { left: 10px; top: 10px;}
    25%  { left: 85%; top: 10px;}
    50%  { left: 85%; top: 80%;}
    75%  { left: 10px; top: 80%;}
    100% { left: 10px; top: 10px;}
}
.side{/*background: var(--cube-background-image) !important; background-size: cover !important; background-repeat: no-repeat;*/
    box-shadow: 1px 5px 60px -11px var(--cube-shadow);}
/*our products*/
.our-products{padding: 50px 20px;  text-align: center;}
.our-products h1{color: #000; font-size: 40px; font-weight: 500; text-align: center; margin-bottom: 50px}
.our-products img{width: 120px}
.our-products p{margin:20px 0; font-size: 10px; color: #000; text-rendering: optimizeLegibility; font-weight: 600; margin-bottom: 40px;}
/*our products end*/
/*our services*/
.our-services{padding: 30px 20px;  text-align: center;}
.our-services h1{color: #000; font-size: 40px; font-weight: 500; text-align: center; margin: 10px 0 45px 0}
.our-services img{width: 40px}
.our-services h3{margin:10px 0 5px !important; font-size: 12px; color: #000; text-rendering: optimizeLegibility; font-weight: 600; margin-bottom: 60px;}
.our-services p{margin:5px 0 50px 0 !important; font-size: 10px; color: #000; text-rendering: optimizeLegibility; font-weight: 600; }
/*our services end*/
/*our home*/
.our-home{padding: 25px 20px;  text-align: center;}
.our-home img{width: 170px;}
.our-home h4{position: relative ;font-size: 12px ; width: 60%; margin: 0 auto; color: #000; text-indent: 5px; font-weight: 600; margin-bottom: 25px ; line-height: 15px;}
.our-home h4 span.left{font-size: 35px; font-weight: bold; position:absolute; top :1px; left: -7px;}
.our-home h4 span.right{font-size: 35px; font-weight: bold; position:absolute; bottom :-12px; right: -10px}
.under-codelogo hr { margin-top: 10px; margin-bottom: 20px; border: 0; border-top: 1px solid #000; width: 50%;}
.core-values{width: 100% ; text-align: center; }
.core-values .value{min-width: 120px ; height: 40px; text-align: center ; margin: 10px ; display: inline-block; background: #beb3ab; padding-top: 12px; color: #000;}
.core-values .full-width{width:265px;}
/*our home end*/
/*our client*/
.our-client{padding: 25px 20px;  text-align: center;}
.our-client h1{color: #000; font-size: 40px; font-weight: 500; text-align: center; margin: 10px 0 45px 0}
.client-image img{height: 80px; margin: 15px;}
.our-client .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    margin-right: -55px; width: 20px; color:#000; height: 20px;font-size: 20px; opacity: 1 !important;}
.our-client .carousel-control .glyphicon-chevron-left, .carousel-control .icon-previous {
    margin-left: -55px; width: 20px; color:#000; height: 20px; font-size: 20px; opacity: 1 !important;}
.our-client .carousel-control{opacity: 1;}
.our-client .carousel-control.right ,.our-client .carousel-control.left{background-image: none;}
.our-client .carousel-indicators {bottom: -20px;  }
.our-client .carousel-indicators li {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 10px;
}
.our-client .carousel-indicators .active {
    width: 5px;
    height: 5px;
    background-color: #fff !important;
    border: 1px solid #fff !important;}
/*our client end*/
/*career*/
.heading-code{padding: 15px 0; background: rgba(255,255,255,0.4);}
.buttonback{margin:5px 0 0 15px ;float:left;}
.buttonback a{font-size:3em ;color: #000000;}
.buttonback a:hover{color:#8eb8c4;}
.heading-code h2{text-align:center; font-size: 55px ; letter-spacing: 1px; color: #000000;}
.open-positions{background: rgba(255,255,255,0.4); min-height: 200px ; margin-top: 50px; padding: 20px; border-radius: 20px; }
.heading-positions{text-align: center;}
.open-positions .heading-positions h2{font-size: 35px; margin: 15px; color: #000000;}
.open-positions .heading-positions p{background: #e0e0e8;margin: 30px auto; font-weight: 500; letter-spacing: 1px ;
    color: #000000; border-radius: 10px; padding: 10px 30px 13px 30px ; font-size: 35px; width: intrinsic; width: -moz-max-content; width: -webkit-max-content; }
.mx-auto{margin: 0 auto;}
.careerapply-btn{background: #e0e0e8; width: 100%; margin: 0 15px; font-weight: 500; border: 0 !important; letter-spacing: 1px ;
     border-radius: 10px; padding: 0 30px 3px 30px ; font-size: 20px; height: 40px;}
.careerapply-btn:hover{background:#8eb8c4;}
.open-positions .panel-group {margin-bottom: 10px !important; }
.open-positions .panel-group .panel{border-radius: 10px !important; margin: 0 0 10px 0; min-height: 40px; border: 0 !important; background-color: #e0e0e8; }
.open-positions .panel-group .panel .panel-heading{border-radius: 10px !important; min-height: 40px; color: #333 !important; background-color: #e0e0e8; cursor: pointer; }
.open-positions .panel-group .panel .panel-heading .panel-title{/*display: inline-block;*/ }
.open-positions .panel-group .panel .panel-heading.accordion-toggle::before, .open-positions #accordion .panel-heading[data-toggle="collapse"]::before  {
    float: right;
    content: '\f0d7';
    font-family: 'FontAwesome';
    font-size: 1.5em;
}
/*.open-positions .panel-group .panel .panel-heading.accordion-toggle.collapsed::before, .open-positions #accordion .panel-heading.collapsed[data-toggle="collapse"]::before  {
    content:"\f0d7";
}*//*
.open-positions .panel-group .panel .panel-heading i{float: right;}*/
.open-positions .panel-group .panel .panel-body {border-top-color: #eeeeee !important; letter-spacing: 1px; word-spacing: 4px;
    line-height: 150%; text-align: justify; }
.open-positions .panel-group .panel ul , .open-positions .panel-group .panel ol   { margin-left: 30px }
.open-positions .panel-group .panel ul li { list-style: disc;text-align: initial; }
.open-positions .panel-group .panel ol li { list-style: decimal; }
.open-positions .panel-group .panel p { margin: 10px 0 !important;}
.open-positions .panel-group .panel p strong { font-weight: 600;}

/*career*/
/*contact page*/
.contact-panel{background: rgba(255,255,255,0.4);text-align: center; min-height: 200px ; margin-top: 40px; margin-bottom: 40px; padding: 15px; border-radius: 20px; }
.contact-panel .section-contact{ margin: 15px 0 30px 0; }
.contact-panel .section-contact p{ font-size: 18px; margin: 10px auto; ;background: #e0e0e8; padding: 10px 20px ; border-radius: 10px; width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */  width: -webkit-max-content; }
.contact-panel .section-contact img{ width: 55px; margin:10px; }

/*contact page*/
/*contactus*/
.contact-us{padding: 20px 20px;  text-align: center;}
.contact-us h1{color: #000; font-size: 40px; font-weight: 500; text-align: center; margin: 10px 0 20px 0}
.contact-us h3{color: #000; font-size: 20px; font-weight: 600; text-align: center; margin: 30px 0 15px 0}
.contact-us button{height:30px; color: #000 ; border-radius: 5px; background: #fff;  border: none; margin: 0 0 30px 0; font-style: italic;}
.getintouch{margin-top:15px ; padding:7px 0;}
.getintouch img{width: 30px ; margin: -10px 5px; display: inline-block;}
.getintouch p{color: #000 ; font-size: 14px; display: inline-block;}
.getintouch-share{margin-top:10px ;padding:10px 0;}
.getintouch-share img{width: 40px ; margin: 10px 5px; display: inline-block;}
/*contactus end*/
/*our culture*/
.our-culture{padding: 30px 20px;  text-align: center;}
.our-culture h1{color: #000; font-size: 40px; font-weight: 500; text-align: center; margin: 10px 0 40px 0}
.our-culture .carousel{width: 90%; margin: 0 auto; }
#culture-culture img{ height: 240px ;color: #000; width: 100%; border: 5px solid #000000;}
.our-culture .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
    margin-right: -55px; width: 20px; color:#000; height: 20px;font-size: 20px; opacity: 1 !important;}
.our-culture .carousel-control .glyphicon-chevron-left, .carousel-control .icon-previous {
     margin-left: -55px; width: 20px; color:#000; height: 20px; font-size: 20px; opacity: 1 !important;}
.our-culture .carousel-control{opacity: 1;}
.our-culture .carousel-control.right ,.our-culture .carousel-control.left{background-image: none;}
.our-culture .carousel-indicators {bottom: -50px;  }
.our-culture .carousel-indicators li {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 10px;
}
.our-culture .carousel-indicators .active {

    width: 5px;
    height: 5px;
    background-color: #fff !important;
    border: 1px solid #fff !important;

}
/*our culture end*/
.modal {
    text-align: center;
    padding: 0!important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
    background: url("../images/side-background.jpg") !important; background-size: cover !important; background-repeat: no-repeat;
}

.modal-dialog {
    width:30%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    }
.modal-content {
    background: url("../images/side-background.jpg") !important; background-size: cover !important; background-repeat: no-repeat;
}
.modal-backdrop.in{opacity: 0.3 !important;}
.popup-detail {
    padding: 0 30px 30px;
}
.popup-detail h4 {

    font-size: 20px;
    color: #000000;
    padding: 20px 0 10px;
    font-weight: 600;
    margin-bottom: 20px;

}
input.field4 {

    background: url(../images/men-icon.png) no-repeat 15px 8px #FFFFFF !important;
    width: 100%;
    height: 40px;
    padding: 0 20px 0 55px;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}
input.field5 {

    background: url(../images/email-icon.png) no-repeat 15px 8px #FFFFFF !important;
    width: 100%;
    height: 40px;
    padding: 0 20px 0 55px;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}
input.field6 {

    background: url(../images/contact-icon.png) no-repeat 15px 8px #FFFFFF !important;
    width: 100%;
    height: 40px;
    padding: 0 20px 0 55px;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}
input.field7 {

    width: 100%;
    height: 40px;
    padding: 0 0 0 5px;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}

select.select-field {

    width: 100%;
    height: 40px;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}
.popup-detail .file {

    background: url(../images/file-icon.png) no-repeat 15px 8px #FFFFFF !important;
    padding: 8px 0 8px 50px;
    width: 100%;
    margin: 12px 0 3px;
    border: 0;
    border-radius: 5px;

}
.popup-detail input.submit {

    background: var(--post-btncolor) none repeat scroll 0 0;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 33px;
    margin:12px 0 3px;
    padding: 0 !important;
    text-shadow: inherit;
    width: 107px;

}
.error{color:red !important;}
.bg-white{background: #fff !important;}
.open-position{padding:15px; max-height:250px;  overflow-y: auto;}
#applyModal h1{text-align: center; margin: 15px 0; font-size: 24px; font-weight: bold;}
#applyModal hr{width: 50%; border-top: 1px solid #000;}
.post-apply{padding: 10px; width: 100%; min-height: 55px;}
.post-apply p{float: left; margin-top: 15px; width: 70%; transform: translateY(-50%);}
.post-apply a{float: right; border: 1px solid #000; color: #000; height: 30px; padding: 2px 12px;}
.post-apply a:hover{background: #8eb8c4;}
.modal-close{position: absolute; top: -10px; right: -15px; cursor: pointer;}
#open-position-Modal h1{font-size: 26px; text-align: center; font-weight: bold;  margin-top: 20px;}
#open-position-Modal hr{border-top: 1px solid #463434; width: 60%;}

/* Paste this css to your style sheet file or under head tag */
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    display: table;
    text-align: center;
    vertical-align: middle;
    background:/*url(../images/loader.gif) no-repeat center center*/ #000000;
}
.loader-inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#load img{margin-bottom: 50px; margin: 20px auto;}

@media (max-width: 640px) {
    .body-background{height: 100%; background: var(--main-background-image) center fixed !important; background-size: cover !important; background-repeat: no-repeat !important;}
    #wrapper { padding-top: 10%; /* animation: scale 10s linear infinite; */ }
    .side{box-shadow: none; }

    /*our client*/
    .our-client h1{font-size: 32px;}
    .client-image img {height: 70px;}
    /*our client end*/
    /*our services*/
    .our-services h1{font-size: 32px;}
    .our-services img {
        width: 35px;
    }
    .our-services h3 {font-size: 9px;}
    .our-services p {font-size: 9px;}
    /*our services end*/
    /*our products*/
    .our-products{padding: 30px 10px;}
    .our-products h1{font-size: 32px; margin-bottom:30px;}
    /*our products end*/
    /*contactus*/
    .contact-us h1{font-size: 32px;}
    .getintouch-share img {
        width: 30px;
        margin: 0 5px;
    }
    /*contactus end*/
    /*home*/
    .our-home img { width: 150px; }
    .our-home h4{width: 100%; margin-bottom:5px;}

    /*home end*/
    /*our culture*/
    .our-culture h1{font-size: 32px;}
    .our-culture .carousel-indicators {
        bottom: -30px;
    }
    /*our culture end*/
    .side-butterfly{width:50px ;  }
    .modal-dialog{width: 90% ; margin:5px;}
    .open-position{padding:0;}
    .post-apply a{ height:24px; padding: 2px 6px; font-size: 12px;}
    .post-apply p{width: 75% ; margin-top:2px ;transform: none;}
    .popup-detail { padding: 0 10px; }
    .code-logo{width: 70%;}
    /*contact page*/
    .contact-panel .section-contact{ margin: 15px 0 30px 0; }
    .contact-panel .section-contact p{ font-size: 14px; margin: 10px auto; padding: 10px 10px ; border-radius: 10px;
        width: intrinsic; /* Safari/WebKit uses a non-standard name */  width: -moz-max-content;    /* Firefox/Gecko */  width: -webkit-max-content; }
    .contact-panel .section-contact img{ width: 40px; margin:10px; }

    /*contact page*/
    /*career*/
    .buttonback { margin: 3px 0 0 15px;}
    .buttonback a{font-size:2em }
    .heading-code h2{font-size: 35px ;}
    .open-positions{background: rgba(255,255,255,0.4); margin-top: 30px; padding: 10px;}
    .open-positions .heading-positions h2{font-size: 20px; margin: 10px;}
    .open-positions .heading-positions p{ margin: 15px auto; padding: 10px 30px 12px 30px ; font-size: 20px; }
    .careerapply-btn{background: #e0e0e8; width: 180px; margin: 0 -15px 10px; font-weight: 500; border: 0 !important; letter-spacing: 1px ;
        border-radius: 10px; padding: 0 30px 3px 30px ; font-size: 18px; height: 40px; float: right;}

    /*career*/

}
@media screen and (min-width: 641px) and (max-width: 1024px) {

    .body-background{height:100%; background: var(--main-background-image) center fixed !important; background-size: cover !important; background-repeat: no-repeat !important;}

    /*our services*/
    .our-services h1{font-size: 32px;}
    .our-services h3 {font-size: 10px;}
    /*our services end*/
    /*our products*/
    .our-products{padding: 30px 10px;}
    .our-products h1{font-size: 32px; margin-bottom:30px;}
    /*our products end*/
    /*contactus*/
    .contact-us h1{font-size: 32px;}
    .getintouch-share img {
        width: 30px;
        margin: 0 5px;
    }
    /*contactus end*/
    /*home*/
    .our-home img { width: 150px; }
    .our-home h4{width: 100%; margin-bottom:5px;}

    /*home end*/
    /*our client*/
    .client-image img { height: 72px; margin: 10px;  }
    /*our client end*/
    /*our culture*/
    .our-culture h1{font-size: 32px;}
    .our-culture .carousel-indicators {
        bottom: -30px;
    }
    /*our culture end*/

    .modal-dialog{width: 60% ; margin:5px;}
    .open-position{padding:0;}
    .post-apply a{ height:24px; padding: 2px 6px; font-size: 12px;}
    .post-apply p{width: 70% ; margin-top:2px ;transform: none;}
    .popup-detail { padding: 0 20px; }
    .code-logo{width: 70%;}
    /*career*/
    .buttonback { margin: 3px 0 0 15px;}
    .buttonback a{font-size:2em }
    .heading-code h2{font-size: 35px ;}
    .open-positions{background: rgba(255,255,255,0.4); margin-top: 30px; padding: 10px;}
    .open-positions .heading-positions h2{font-size: 20px; margin: 10px;}
    .open-positions .heading-positions a{ margin: 15px; padding: 10px 30px 12px 30px ; font-size: 20px; }
    .careerapply-btn{background: #e0e0e8; width: 180px; margin: 0 -15px 10px; font-weight: 500; border: 0 !important; letter-spacing: 1px ;
        border-radius: 10px; padding: 0 30px 3px 30px ; font-size: 18px; height: 40px; float: right;}

    /*career*/
}