#page_scroller {
    background: #FCA311;
}

.navbar-search-input::-webkit-input-placeholder {
    color: #FCA311;
}

.btn-view:hover {
    background: #e1a006;
}

.brand-box-2 h5 a{
    color: #FCA311;
}

.view-all ul li a:hover{
    background: #FCA311;
}

.agent-box .detail .contact p i{
    color: #FCA311;
}

.navbar-search-input:-moz-placeholder {
    color: #FCA311;
}

.navbar-search-input::-moz-placeholder {
    color: #FCA311;
}

.navbar-search-input:-ms-input-placeholder {
    color: #FCA311;
}

.navbar-search-open .navbar-search-icon {
    background: #FCA311;
}

.navbar-search-open .navbar-search-submit {
    background: #FCA311;
}

.dropdown-menu>li>a:hover {
    color: #FCA311;
    border-left: solid 5px #FCA311;
    background: #ffffff ;
}

.main-header .navbar-default .nav > li > a:hover {
    color: #FCA311;
}

.top-header .sign-in:hover{
    color: #FCA311;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    color: #FCA311 !important;
    background: transparent;
}

.btn-view {
    background: #FCA311;
}

.car-box .detail header h5 a {
    color: #FCA311;
}

.car-box .detail header .price {
    color: #FCA311;
}

.car-box .detail .facilities-list li i {
    color: #FCA311;
}

.btn-details {
    background: #FCA311;
}

.btn-details:hover {
    background: #e1a006;
}

.book-btn-l {
    border-right: 1px solid #e1a006;
}

.is-featured {
    background: #FCA311;
}

.overlap-btn {
    background: #FCA311;
    border: solid 2px #FCA311;
}

.overlap-btn:hover {
    background: #e1a006;
    border: solid 2px #e1a006;
}


.sub-footer form .button-small {
    border: solid 1px #FCA311 !important;
    background: #FCA311 !important;
}

.breadcrumb-area .btn-default:hover {
    background: #FCA311;
}

.block-heading h4 {
    color: #FCA311;
}

.block-heading .heading-icon{
    background: #FCA311;
}

.change-view-btn {
    color: #FCA311;
    border: solid 1px #FCA311;
}

.change-view-btn:hover {
    border: solid 1px #FCA311;
    background: #FCA311;
}

.active-view-btn {
    background: #FCA311;
    border: solid 1px #FCA311;
}

.active-view-btn:hover {
    border: solid 1px #FCA311;
    color: #FCA311;
}

.car-list-box .detail header h3 a {
    color: #FCA311;
}

.car-list-box .detail header .price {
    color: #FCA311;
}

.car-list-box .detail .facilities-list li i {
    color: #FCA311;
}

.pagination > li > a {
    color: #FCA311;
}

.pagination > li > a:hover {
    background: #FCA311;
}

.pagination > .active > a {
    background: #FCA311;
    border-color: #FCA311;
}

.pagination > .active > a:hover {
    background: #FCA311;
    border-color: #FCA311;
}

.helping-Center ul li i {
    background: #FCA311;
}

.slider.slider-horizontal .slider-selection {
    background: #FCA311;
}

.slider.slider-horizontal .slider-handle {
    background: #FCA311;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    color: #FCA311;
}

.bootstrap-select .dropdown-menu li a {
    color: #FCA311;
}

.checkbox-theme input[type="checkbox"]:checked + label::before {
    background-color: #FCA311;
    border-color: #FCA311;
}

.amenities-box ul li i {
    color: #FCA311;
}

.blog-box .btn {
    border: solid 1px #FCA311;
    color: #FCA311;
}

.blog-box .btn:hover {
    border: solid 1px #FCA311;
    color: #fff;
    background: #FCA311;
}

.book-btn {
    background: #FCA311;
    border: 1px solid #FCA311;
}

.features-opions ul li i {
    color: #FCA311;
}

.twitter-feed a {
    color: #FCA311;
}

.about-item .text h2:after {
    background-color: #FCA311;
}

.we-best .content i {
    background: #FCA311;
}

.we-best .content h4 {
    color: #FCA311;
}

.team-box .detail h3 a:hover{
    color: #FCA311;
}

.blog-box .detail .header a {
    color: #FCA311;
}

.categorie ul li a:hover{
    color: #FCA311;
}

blockquote {
    border-left: 4px solid #FCA311;
}

.comments-thread .title {
    color: #FCA311;
}

.btn-submit {
    background: #FCA311;
}

.breadcrumb-area ul li a:hover{
    color: #FCA311;
}

.btn-submit:hover{
	background: #FFAF2B; 
	color: #14213D;
}

.comment .comment-body .date i{
    color: #FCA311;
}

.comment .comment-meta-reply a{
    background: #FCA311;
}

.faq-body .panel-body-2 span a{
    color: #e1a006;
}

.form-content-box .footer span a {
    color: #FCA311;
}

.error404-content h2 {
    color: #FCA311;
}

.featured-car-slider .details h4 a {
    color: #FCA311;
}

.featured-car-slider .details .price {
    color: #FCA311;
}

.btn-div a span {
    background: #FCA311;
}

.features-item .detail h4:after {
    background-color: #FCA311;
}

.features-item .detail h4 a:hover {
    color: #FCA311;
}

.panel-box .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background: #FCA311;
}

.banner .btn-default {
    border: solid 2px #FCA311;
    color: #FCA311;
}

.banner .btn-default:hover{
    background: #e1a006;
    border: solid 2px #e1a006;
}

.tags-box a:hover {
    background: #FCA311;
}

.nav>li>a:hover{
    background: #FCA311;
}

.opening-hours h3:after {
    background-color: #FCA311;
}

.about-text ul li i {
    color: #FCA311;
}

.our-serivce-2 .media .media-left i {
    background: #FCA311;
}

.panel-title i {
    color: #FCA311;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FCA311;
}

.sub-banner {display:none; top: -2000px}

.about-item h4 {
	font-size: 22pt;
	height: 50px; 
	font-family: 'Raleway', sans-serif !important;
	color: #14213D !important; 
}

.aboutProcess {
	display: inline-block; float: left;
	margin-top: -6px;
	margin-right: 12px;
	width: 44px; height: 44px;
	background-size: 40px;
	background-repeat: no-repeat; background-position: center center;
}
.aboutRegistro {background-image: url(../idximg/icons/aboutRegistro.png);}
.aboutActivar {background-image: url(../idximg/icons/aboutActivar.png);}
.aboutNegociar {background-image: url(../idximg/icons/aboutNegociar.png);}
.aboutRetoma {background-image: url(../idximg/icons/aboutRetoma.png);}
.aboutPropuesta {background-image: url(../idximg/icons/aboutPropuesta.png);}
.aboutOferta {background-image: url(../idximg/icons/aboutOferta.png);}
.aboutAdjudica {background-image: url(../idximg/icons/aboutAdjudica.png);}
.aboutVenta {background-image: url(../idximg/icons/aboutVenta.png); }
.aboutRetirar {background-image: url(../idximg/icons/aboutRetirar.png); }
.aboutConsigna {background-image: url(../idximg/icons/aboutConsigna.png); }
.aboutSeguimiento {background-image: url(../idximg/icons/aboutSeguimiento.png);}
.aboutAutoPuja {background-image: url(../idximg/icons/aboutPropuesta.png); }



@media (max-width: 768px) {
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover {
        color: #fff !important;
        background: #FCA311
    }

    .main-header .navbar-default .nav > li > a:hover {
        background: #FCA311;
        color: #fff;
    }

    .dropdown-menu>li>a:hover {
        color: #fff !important;
        border-left: solid 5px #FCA311;
        background: #FCA311 !important;
    }
}


.button-theme {
    background: #FCA311;
    border: 2px solid #FCA311;
}

.button-theme:hover {
    background: #e1a006;
    border: 2px solid #e1a006;
}

.out-line-btn {
    border: solid 2px #FCA311;
    color: #FCA311;
}

.out-line-btn:hover {
    border: solid 2px #e1a006;
    background: #e1a006;
    color: #fff;
}

.btn-outline {
    border: solid 1px #FCA311;
    color: #FCA311;
}

.btn-outline:hover {
    border: solid 1px #e1a006;
    background: #e1a006;
    color: #fff;
}

.border-button-theme {
    border: 2px solid #FCA311;
    color: #FCA311;
}

.border-button-theme:hover {
    background: #e1a006;
    border: 2px solid #e1a006;
    color: #fff !important;
}

#attrLoginUser{
	display: block;
	max-width: 450px;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 40px;
	z-index: 8000;
}

#attrLoginUser input[type='text'], #attrLoginUser input[type='password'] {
	display:block;
	font-family: 'Roboto', sans-serif;
	font-size: 11pt;
	font-weight:300; 
	border:none;
	border-radius: 0;
	background-color: #FFFFFF;
	color: #14213D;
	padding: 24px 16px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-moz-mac-menuselect: none;
} 
#attrLoginUser input[type='text']::-webkit-input-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='text']::-moz-placeholder {color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='text']:-ms-input-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='text']:-moz-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='password']::-webkit-input-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='password']::-moz-placeholder {color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='password']:-ms-input-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}
#attrLoginUser input[type='password']:-moz-placeholder { color: rgba( 20, 33, 61,0.65); font-weight: 300}

#attrBtnLogin {
	display: block;
	position: absolute;
	top: 20px;
	right: 80px;
	font-family: "Roboto", sans-serif;  text-transform: uppercase; font-size: 11pt;
	outline: 0;  background: #FCA311; color: #fff;
	width: auto; height: 45px; margin: 0; padding: 14px 20px 6px 20px;
	-webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer;
	/*-khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;*/
	-webkit-appearance: none; -moz-appearance: none; -moz-mac-menuselect: none;
	z-index: 8000;
}
#attrBtnLogin:hover{
	background: #FFAF2B; 
	color: #14213D;
}

.attrLoginBox {
	min-width: 320px;
	max-width: 450px;
	margin: 20px auto;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	color: #0D182D;
}
.attrLoginBack {
	background-color: #0D182D !important;
	background-image: url(../idximg/logos/footer-logo.png) !important;
	background-size: 160px  !important;
	background-repeat: no-repeat  !important;
	background-position: center 20px  !important;
}
.attrLoginTitle {font-family: "Raleway", sans-serif; font-weight: 800 !important; font-size: 24pt !important;  color: #FCA311 !important; margin-top: 40px !important}
.attrLoginFooter {text-align: right !important; background-color: rgba(13, 24, 45, 0.4) !important;}

#attrLoginScroller {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
	cursor: pointer;
	color: #FFF;
	padding: 10px 11px;
	margin-right: 10px;
	font-size: 11pt;
	position: relative;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
	background: #FCA311;
}
#attrLoginScroller:hover{
	background: #FFAF2B; 
	color: #14213D;
}



.AttrOnMac {
	min-height: 500px;
	background-image: url(../idximg/AttrOnMac01.png);
	background-repeat: no-repeat; background-position: center center;
	background-size: contain;
}

.AttrProcessCircuit {position: relative; width: 100%; height: 720px; right: 0; bottom: 0; background-image: url(../idximg/grid/AttrTheCircuit.png); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-bottom: 40px}


@media (max-width: 992px) {
	.AttrProcessCircuit {height: 500px; }
	.attrLoginBox {
		min-width: 260px;
		max-width: 260px;
	}
}
@media (max-width: 766px) {
	.AttrProcessCircuit {height: 460px; }
	#attrLoginUser {
		top: -20px; right: auto;
		left: 50%; margin-left: -130px;
	}
	.banner  {display:none; top: -2000px}
	.sub-banner {display:block;}
}
@media (max-width: 600px) {
	.AttrProcessCircuit {height: 360px; }
	#attrBtnLogin{top: 10px;}
}
@media (max-width: 400px) {
	.AttrProcessCircuit {height: 240px; }
	.attrLoginBox { min-width: 260px; max-width: 340px; }
}
@media (max-width: 321px) {
	.AttrProcessCircuit {height: 200px; }
	.attrLoginBox { max-width: 280px; }
}
	
.eMailContainer {display: block; width: 100%; text-align: center; padding: 40px 0 60px 0}
.eMailButton {display: inline-block; float: inherit; padding: 30px; width: auto; margin: 0 auto; font-family: 'Raleway', sans-serif; font-size: 26pt; font-weight: 800; color: #F3F4F5; border: 1px solid #F3F4F5; border-radius: 20px; cursor: pointer}
.eMailButton:hover{background-color: #FCA311; border-color:  #FCA311; color: #394869; }

@media (max-width: 660px) {
	.eMailButton {font-size: 20pt; }
}
@media (max-width: 500px) {
	.eMailContainer {padding: 30px 0 50px 0}
	.eMailButton {font-size: 18pt; padding: 20px 0; width: 100%}
}
@media (max-width: 450px) {
	.eMailButton {font-size: 16pt;}
}
@media (max-width: 400px) {
	.eMailContainer {padding: 20px 0 40px 0}
	.eMailButton {font-size: 14pt; font-weight: 500;  }
}
@media (max-width: 310px) {
	.eMailContainer {padding: 10px 0 20px 0}
	.eMailButton {font-size: 11pt;  }
}

.ContactContainer {display: table; width: 100%; text-align: left; padding: 20px 0; border-bottom: 1px dashed #66718B;}
.ContactIcon {display: inline-block; float: left; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: 60%; padding: 0; margin: 0}
.IconAddress {background-image: url(../idximg/icons/ContactAddress.png);}
.IconPhone {background-image: url(../idximg/icons/ContactPhone.png);}
.IconSupport {background-image: url(../idximg/icons/ContactSupport.png);}
.ContactAddress {display: inline-block; float: left; height: 60px; vertical-align: middle; font-size: 14pt; font-weight: 300; color: #F3F3F5; padding-left: 20px}
.ContactPhone a {display: inline-block; float: left; height: 60px; vertical-align: middle; font-size: 22pt; font-weight: 200; color: #F3F3F5; text-decoration: none; padding-left: 20px; padding-top: 10px}
@media (max-width: 510px) {
	.ContactAddress {margin-bottom: 20px;}
}
@media (max-width: 390px) {
	.ContactAddress {font-size: 12pt; }
	.ContactPhone a {font-size: 18pt; }
}
@media (max-width: 321px) {
	.ContactAddress {font-size: 11pt; }
	.ContactPhone a {padding-left: 10px; font-size: 16pt; }
}




		
/* ------------------------------------------------------------------- 
 * ## main navigation 
 * ------------------------------------------------------------------- */
.header-nav {
  z-index: 10000;
  font-size: 1.6rem;
  line-height: 1.875;
  padding: 3.6rem 3rem 3.6rem 6rem;
  height: 100%;
  width: 50%;
  background: #081228;
  color: rgba(255, 255, 255, 0.25);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
  transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
}

.header-nav a,
.header-nav a:visited {
  color: rgba(255, 255, 255, 0.5);
}

.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active {
  color: white;
}

.header-nav h3 {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .4rem;
  margin-bottom: 7.2rem;
  margin-top: 1.2rem;
  padding-right: 140px;
  color: #FCA311;
  position: relative;
}

.header-nav h3::after {
  content: "";
  display: block;
  height: 1px;
  width: 110px;
  background-color: #FCA311;
  position: absolute;
  top: 50%;
  right: 0;
}

.header-nav p {
  font-family: "Roboto", sans-serif;

  margin-bottom: 2.7rem;
}

.header-nav__content,
.header-nav h3 {
  left: 100px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.header-nav__content {
  position: relative;
  max-width: 300px;
}

.header-nav__list {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1.286;
  margin: 0 0 4.2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: ctr;
}

.header-nav__list li {
  padding: .9rem 0;
}

.header-nav__list a {
  display: block;
  color: #FFFFFF;
  position: relative;
}

.header-nav__list a::before {
  display: block;
  content: counter(ctr, decimal-leading-zero) ".";
  counter-increment: ctr;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: relative;
}

.header-nav__list a:hover::before {
  color: #FCA311;
}

.header-nav__list .current a::before {
  color: #FCA311;
}

.header-nav__social {
  list-style: none;
  display: inline-block;
  font-size: 2.4rem;
  margin: 0;
}

.header-nav__social li {
  display: inline-block;
  margin-right: 12px;
  padding-left: 0;
}

.header-nav__social li a {
  color: rgba(255, 255, 255, 0.15);
}

.header-nav__social li a:hover,
.header-nav__social li a:focus {
  color: white;
}

.header-nav__social li:last-child {
  margin: 0;
}

.header-nav__close {
  z-index: 10001;
  display: block;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 39px;
  right: 30px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.header-nav__close span::before,
.header-nav__close span::after {
  content: "";
  display: block;
  height: 2px;
  width: 16px;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 7px;
  margin-top: -1px;
}

.header-nav__close span::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.header-nav__close span::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* menu is open
 * ----------------------------------------------- */
.menu-is-open .header-nav {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}

.menu-is-open .header-nav .header-nav__content,
.menu-is-open .header-nav h3 {
  opacity: 1;
  visibility: visible;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  left: 0;
}

/* ------------------------------------------------------------------- 
 * ## mobile menu toggle 
 * ------------------------------------------------------------------- */
.header-menu-toggle {
  width: 48px;
  height: 45px;
  line-height: 45px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5rem;
  color: #14213D;
  background-color: #FCA311;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: fixed;
  right: 20px;
  top: 20px;
}

.header-menu-toggle.opaque {
  background-color: #FCA311;
}

.header-menu-icon {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: -1px;
  right: auto;
  bottom: auto;
  background-color: white;
  position: absolute;
  left: 11px;
  top: 50%;
}

.header-menu-icon::before,
.header-menu-icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}

.header-menu-icon::before {
  top: -9px;
}

.header-menu-icon::after {
  bottom: -9px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * header
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
  .header-logo {
    left: 60px;
  }

  .header-menu-toggle {
    right: 20px;
  }

}

@media only screen and (max-width:900px) {
  .header-nav h3 {
    padding-right: 0;
  }

  .header-nav h3::after {
    display: none;
  }

  .header-nav__content {
    max-width: 280px;
  }

  .header-nav__list {
    font-size: 2.5rem;
  }

  .header-nav__list li {
    padding: .6rem 0;
  }

}

@media only screen and (max-width:800px) {
  .header-logo {
    left: 40px;
  }

  .header-nav {
    width: calc(100% - 80px);
    padding: 3.6rem 3rem 3.6rem 5rem;
  }

  .header-menu-toggle {
    right: 20px;
  }

}

@media only screen and (max-width:600px) {
  .s-header {
    height: 90px;
    top: 12px;
  }

  .header-nav {
    padding: 3.6rem 3rem 3.6rem 4rem;
  }

  .header-menu-toggle {
    top: 10px;
    right: 20px;
  }

}

@media only screen and (max-width:400px) {
  .s-header {
    top: 6px;
  }

  .header-logo {
    left: 30px;
  }

  .header-logo img {
    width: 150px;
    height: 35px;
  }

  .header-nav {
    width: calc(100% - 40px);
  }

  .header-nav h3 {
    margin-bottom: 6rem;
  }

  .header-nav__list {
    font-size: 2.2rem;
  }

  .header-menu-toggle {
    top: 10px;
    right: 20px;
  }

  .header-nav__social {
    font-size: 2.2rem;
  }

}




















		
/* ------------------------------------------------------------------- 
 * ## Contact Form
 * ------------------------------------------------------------------- */
.contactForm-nav {
  z-index: 10000;
  font-size: 1.6rem;
  /*line-height: 1.875;*/
  padding: 3.6rem 3rem 3.6rem 6rem;
  height: 100%;
  width: 50%;
  background: #081228;
  color: rgba(255, 255, 255, 0.45);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
  transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
}

.contactForm-nav h3 {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .4rem;
  margin-bottom: 7.2rem;
  margin-top: 1.2rem;
  padding-right: 140px;
  color: #FCA311;
  position: relative;
}

.contactForm-nav h3::after {
  content: "";
  display: block;
  height: 1px;
  width: 110px;
  background-color: #FCA311;
  position: absolute;
  top: 50%;
  right: 0;
}

.contactForm-nav span {
  font-family: "Roboto", sans-serif;
  margin-bottom: 2.7rem;
}

.contactForm-nav__content,
.contactForm-nav h3 {
  left: 100px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.contactForm-nav__content {
  position: relative;
  max-width: 300px;
}

.contactForm-nav__close {
  z-index: 10001;
  display: block;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 39px;
  right: 30px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.contactForm-nav__close span::before,
.contactForm-nav__close span::after {
  content: "";
  display: block;
  height: 2px;
  width: 16px;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 7px;
  margin-top: -1px;
}

.contactForm-nav__close span::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.contactForm-nav__close span::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* menu is open
 * ----------------------------------------------- */
.form-is-open .contactForm-nav {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}

.form-is-open .contactForm-nav .contactForm-nav__content,
.form-is-open .contactForm-nav h3 {
  opacity: 1;
  visibility: visible;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  left: 0;
}

/* ------------------------------------------------------------------- 
 * ## mobile menu toggle 
 * ------------------------------------------------------------------- */

.contactForm-menu-icon {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: -1px;
  right: auto;
  bottom: auto;
  background-color: white;
  position: absolute;
  left: 11px;
  top: 50%;
}

.contactForm-menu-icon::before,
.contactForm-menu-icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}

.contactForm-menu-icon::before {
  top: -9px;
}

.contactForm-menu-icon::after {
  bottom: -9px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * contactForm
 * ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {


}

@media only screen and (max-width:900px) {
  .contactForm-nav h3 {
    padding-right: 0;
  }

  .contactForm-nav h3::after {
    display: none;
  }

  .contactForm-nav__content {
    max-width: 280px;
  }

}

@media only screen and (max-width:800px) {

  .contactForm-nav {
    width: calc(100% - 80px);
    padding: 3.6rem 3rem 3.6rem 5rem;
  }


}

@media only screen and (max-width:600px) {
  .s-contactForm {
    height: 90px;
    top: 12px;
  }

  .contactForm-nav {
    padding: 3.6rem 3rem 3.6rem 4rem;
  }

}

@media only screen and (max-width:400px) {
  .s-contactForm {
    top: 6px;
  }

  .contactForm-nav {
    width: calc(100% - 40px);
  }

  .contactForm-nav h3 {
    margin-bottom: 3rem;
  }


}