/****************************
AUTOR: Kamel Chikhi
COPYRIGHT: IDP for TANGO
YEAR: 2016
VERSION: 1.0
PROJECT: Keytrade
DESCRIPTION: template
****************************/
/*
  Gray : #2c3b45
  blue : #00b3d9
  green : #4db07a

*/



@font-face {
    font-family: "Effra";
    font-style: normal;
    font-weight: 400;
    src: url("assets/fonts/Effra_W_Rg.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Effra_W_Rg.ttf") format("truetype"), url("assets/fonts/Effra_W_Rg.woff") format("woff");
}

body{background:#2c3b45;color:#fff;font-family: "Effra","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 22px;line-height: normal}
.td{display: table-cell; text-align: center; vertical-align: middle;}
.tr{display: table;}
.h1, h1 {font-size: 50px;}
.color-blue{color:#00b3d9}
.bg-color-blue{background:#00b3d9}
.alignLeft{text-align: left}
.alignCenter{text-align: center}
.flexcenter {-webkit-align-content: flex-start;align-content: flex-start;-webkit-align-items: center;align-items: center;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;height:100%}
.flexvcenter {-webkit-align-content: flex-start;align-content: flex-start;-webkit-align-items: center;align-items: center;display: -webkit-flex;display: flex;height:100%}
.mb10{margin-bottom: 10px;}

/*
  BOOTSTRAP
------------------------------ */
.form{padding:0 15px;transform:translateY(100%);-webki-transform:translateY(100%);opacity:0}
  .active .form{transform:translateY(0);-webki-transform:translateY(0);opacity:1}
.form-control{background-color: transparent;border:2px solid #fff; border-radius: 50px;font-size: 20px;height:50px;color:#fff;box-shadow:none!important;background-image: none;}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.form-control:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
.form-control:focus{border-color:#2c3b45;color:#2c3b45}
.form input.btn{font-size: 20px;height:50px;color:#00b3d9;background: #fff; text-transform: uppercase; text-align: left;border-radius:50px}
.form input.btn:hover{background: #2c3b45; color:#fff; }
.select-style {border: 1px solid #ccc;width: 100%;overflow: hidden;border-radius: 50px;font-size: 20px;height:50px;border:2px solid #fff;position: relative}
.select-style i{position: absolute;right: 18px;top: 14px;}
.select-style select {
    width: 130%;
    border: none!important;
    padding-top: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.select-style select:focus {
    outline: none;
}


.warning{background:rgba(255,255,255,0.2);padding: 30px 60px;border-radius:30px; display:none; position: absolute; top:50%;left:50%;text-align: center}
.btn-finish{background:#fff;color:#00b3d9;display: inline-block;font-size: 18px;margin:auto;border-radius:30px;padding: 6px 48px;}
.btn-finish:hover{background: #2c3b45; color:#fff}


.finish .form{
  -webkit-animation-duration: 0.8s;animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
  -webkit-animation-name: removeForm;animation-name: removeForm;
  -webkit-animation-delay: 0.5s;animation-delay: 0.5s;
}
@-webkit-keyframes removeForm {
  from {opacity: 1; transform: translateY(0%);-webkit-transform: translateY(0%);}
  to {opacity: 0; transform: translateY(-200%);-webkit-transform: translateY(-200%);}
}
@keyframes removeForm {
  from {opacity: 1; transform: translateY(0%);-webkit-transform: translateY(0%);}
  to {opacity: 0; transform: translateY(-200%);-webkit-transform: translateY(-200%);}
}

.finish .warning{
  -webkit-animation-duration: 0.8s;animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
  -webkit-animation-name: displayWarning;animation-name: displayWarning;
  -webkit-animation-delay: 0.5s;animation-delay: 0.5s;
  display: block;
  transform: translate(100%,-50%);-webkit-transform: translate(100%,-50%);
}

@-webkit-keyframes displayWarning {
  from {opacity: 0; transform: translate(-50%,100%);-webkit-transform: translate(-50%,100%); }
  to {opacity: 1; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
}
@keyframes displayWarning {
  from {opacity: 0; transform: translate(-50%,100%);-webkit-transform: translate(-50%,100%);}
  to {opacity: 1; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
}



/*
  HEADER
 ------------------------- */
 header.topbar{height:140px;border-bottom:1px solid #fff;position:fixed;top:0;left:0;right:0;z-index:3;background:#2c3b45 }
.topbar-logo{display: table;padding:40px 0 0 35px;}
header .btn-contact{position:absolute;top:0;right:0px;bottom:0px;background:#fff;width:100px;border-bottom:1px solid #2c3b45;color:#00b3d9;font-size: 35px;cursor:pointer}
  header .btn-contact:hover {background:#00b3d9;color:#fff;}
header .btn-contact .icon-cross{display: none}
header .btn-contact.open {color:#fff;background:#2c3b45;border-left:1px solid #1b2128}
  header .btn-contact.open .icon-cross{display: block}
  header .btn-contact.open .icon-phone{display: none}
header .btn-contact h3{position:absolute;z-index: 1;top:0px;right:100%;bottom:0;width:465px;font-weight:normal;margin:0;transform: translateY(-50%);-webkit-transform: translateY(-50%);opacity: 0}
header .btn-contact.open h3{transform: translateY(0);-webkit-transform: translateY(0);opacity: 1}

/*
  SIDEBAR
--------------------------- */
.sidebar{width:100px;position:absolute;top:0;bottom:0;z-index:2;font-size: 22px;opacity: 0}
  .sidebar div{padding: 0 10px 0 10px; text-align: center}
  .sidebar-right{right:0;background: #fff;color:#00b3d9;}
  .sidebar-left{left:0;background:#2c3b45;color:#fff;width:135px;}
  .sidebar img{width:50px!important;display: block;margin:auto;margin-bottom:20px}
  .active .sidebar{opacity: 1}

  /*
    SIDER
  --------------------------- */
  .slider{display: table;}
    .slider-item{width:100%;position: relative}

/*
  FOOTER
 ------------------------- */
 footer.footer{height:104px;padding:15px;border-top:1px solid #fff;position:fixed;bottom:0;left:0;right:0;z-index:3;background:#2c3b45;font-size: 11px;}
  .footer .abbl img{height:30px;margin-right:15px;}
    .footer .abbl p{float: left; margin: 0;line-height: 12px;}
  .footer .copyright{color:#6a7075}
    .footer .copyright a{color:#6a7075}
  .footer .qrcode{margin-top:-15px; margin-right:-15px;border-left: 1px solid #fff}
    .footer .qrcode img{height:100px}
    .footer .qrcode-caption{font-size:22px;text-align:right;margin-right:45px; padding-right: 40px; background: url(images/arrow-right.svg) no-repeat right center;}

/*
  ANIMATION
--------------------------- */
.animate, .btn{-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-ms-transition: all 0.8s ease;-o-transition: all 0.8s ease;transition: all 0.8s ease;}

.animated {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*
  fullscreen
---------------------------- */
.fullscreen{position: fixed;top:0;right:0;bottom:0;left:0; background:#2c3b45; z-index:1000;transform:translateY(100%);opacity: 0;border-top: 1px solid #fff;padding-top: 100px}
  .openfullscreen .fullscreen{transform:translateY(0%);opacity: 1;border-top: 0px solid #fff}
  .fullscreen .close-trigger{color:#fff; background:#00b3d9; position: absolute; top:0; right:0; width:50px; height:50px;text-align: center;line-height: 50px;cursor:pointer;width:100px;height:138px;line-height:138px}
  .openfullscreen .animate-wrapper{transform:translateY(-100%);opacity: 0}