@import url('revolution-slider.css');

/*------------------------------------------------------------------
[Layout]

* body
+ wrapper / #wrapper
+ content-wrapper /
+ container /
- header
-header-wrapper
-header-top
-main-nav-bar
-banner-section
-service-section
-about-section
-products-section
-section-welcome
-call-to-action
-clients-section
-footer-section
-footer-top
-footer-area


-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color codes]


# Background   : #f5f5f5
# Content      : #999999
# Header h1    : #ffffff
# Header h2    : #ffffff
# Footer       : #E7E7E7

# a (standard) : #ffffff
# a (visited)  : #9ED154
# a (active)   : #9ED154
-------------------------------------------------------------------*/


/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
color : #5555555;
}

html {
font-size   : 14px;
line-height : 1.5em;
}


body {font-family: 'Open Sans', sans-serif;color: #666;font-weight                : 400;font-style                 : normal;font-size                  : 1rem;line-height                : 1.5em;background: #f3f2f2;-webkit-text-size-adjust   : 100%;-webkit-overflow-scrolling : touch;-webkit-font-smoothing     : antialiased !important;}

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
background  : #B3D4FC;
text-shadow : none;
}

::selection {
background  : #B3D4FC;
text-shadow : none;
}


/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/

audio,
canvas,
img,
video {
vertical-align : middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
border  : 0;
margin  : 0;
padding : 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
resize : vertical;
width:100%;
border: 1px solid #e8e8e8;
}

p, ul, ol, pre, table, blockquote {
margin-top: 1rem;
}
ul ul, ol ol, ul ol, ol ul {
margin-top: 0;
margin-bottom: 0;
}
hr {
border: 1px solid;
margin: -1px 0;
}
a,
a:active,
a:focus,
a:active {
text-decoration : none !important;
outline         : none
}

a {
color: #2244a7;
text-decoration : none;
transition      : all 0.2s ease 0s;
}

a:hover,
a:focus {
color           : #006ab4;
text-decoration : underline;
}

ul {
margin     : 0;
padding    : 0;
list-style : none
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {color: #333;margin      : 0;}

h1 {
font-weight: 600;
font-style: inherit;
font-size: 2.571rem;
line-height: 1.111em;
}

h2 {
font-weight: 600;
font-style: inherit;
font-size: 2.143rem;
line-height: 2.5rem;
color: #2244a7;
}

h3 {
font-weight: 600;
font-style: inherit;
font-size: 1.714rem;
line-height: 1.875rem;
margin: 0rem ;
color: #2244a7;
margin-top: 1rem;
margin-bottom: 2rem;
}
h4 {
font-weight: 600;
font-style: inherit;
font-size: 1.286rem;
line-height: 1.875rem;
margin: 0rem;
}
img{
max-width : 100%;
width : 100%;
}

input:focus,
select:focus,
button:focus{
box-shadow: none;
outline: none;
border: none;
}

section:focus{
outline: none !important;
}

.btn{
background:#2244a7;
color:#ffffff;
border-radius: 0;
-webkit-transition         : all 0.3s ease 0s;
-moz-transition            : all 0.3s ease 0s;
-o-transition              : all 0.3s ease 0s;
transition                 : all 0.3s ease 0s;
}

.btn:hover, .btn-default:hover{
background: #f6241b;
color:#ffffff;
border-color:#f6241b;
}
.btn-default.focus, .btn-default:focus {
color: #ffffff;
background-color: #f6241b;
border-color: #f6241b;
}


.no-padding{
padding: 0 !important;
}

.no-padding-right{
padding-right: 0 !important;
}

.header-wrapper{
margin-bottom: 30px;
}

.primary_color{
	color: #2244a7;
}

/* ---------------
* Preloader
* ---------------*/
.preloader{
position: fixed;
height: 100vh;
width: 100vw;
z-index: 99999;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;

border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}

@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}



/* Header
-------------------------------------------------------------- */
.site-header {
position: relative;
}

.site-header .main-header {
background-color: #fff;
-webkit-transition: all ease .238s;
-moz-transition: all ease .238s;
transition: all ease .238s;
}

/* Sticky */
.site-header.sticky {position: relative;width: 100%;z-index: 9;}

.site-header.float .main-header {
position: fixed;
left: 0;
top: 0;
z-index: 9;
width: 100%;
background-color: rgba(255, 255, 255, 0);
}

.header-small .site-header.float .main-header {
background-color: #12548c;
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.3);
}

/* ---------------
* Nav
* ---------------*/
.main-header .logo {
float: left;
}

.main-header .logo a {
margin-top: 18px;
display: inline-block;
height: 43px;
line-height: 43px;
width: auto;
}

.main-header .logo a img {height: auto;width: 230px;}

#main-nav {
float: right;
}

#main-nav ul {
margin: 0;
}

#main-nav ul li {
position: relative;
list-style: none;
}

#main-nav > ul > li {
display: inline-block;
padding: 0 20px;
}

#main-nav > ul > li:last-child {
padding-right: 0;
}

#main-nav > ul > li > a {
position: relative;
color: #fff;
display: inline-block;
font-family: "Roboto Slab", sans-serif;
font-size: 20px;
line-height: 50px;
font-weight: 400;
padding: 15px 0;
}

#main-nav > ul > li > a:after {
width: 0;
content: "";
display: block;
height: .1875rem;
background: #ffffff;
position: absolute;
bottom: 0;
right: 0;
left: 50%;
top: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: width .7s cubic-bezier(.785,.135,.15,.86);
-o-transition: width .7s cubic-bezier(.785,.135,.15,.86);
transition: width .7s cubic-bezier(.785,.135,.15,.86);
}


#main-nav > ul > li > a:hover:after {
width: 100%;
}

#main-nav > ul > li > a:hover,
#main-nav > ul > li.active > a {
color: #ffffff;
}

#main-nav ul li ul {
z-index: 99999;
width: 200px;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
text-align: left;
margin-left: -16px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
visibility: hidden;
box-shadow: 0 2px 10px rgba(6, 6, 6, 0.3);
-webkit-transition: all ease .238s;
-moz-transition: all ease .238s;
transition: all ease .238s;
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
transform: translateY(5px);
}

#main-nav ul li ul:before {
content: "";
position: absolute;
left: 0;
top: -1px;
width: 100%;
height: 1px;
background-color: #2244a7;
}

#main-nav ul li ul li ul {
width: 200px;
left: 100%;
top: 0;
margin-left: 0;
-webkit-transition: all ease .238s;
-moz-transition: all ease .238s;
transition: all ease .238s;
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
transform: translateX(5px);
}

#main-nav ul.sub-menu li.has-sub:after {
content: "\f105";
font-family: "FontAwesome";
position: absolute;
right: 14px;
top: 12px;
-webkit-transition: color ease .238s;
-moz-transition: color ease .238s;
transition: color ease .238s;
}

#main-nav li:hover > ul {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
visibility: visible;
-webkit-transition: all ease .238s;
-moz-transition: all ease .238s;
transition: all ease .238s;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}

#main-nav .sub-menu li a {
font-family: "Roboto Slab", sans-serif;
color: #2244a7;
display: block;
padding: 0 29px;
line-height: 50px;
border-top: 1px solid #e5e5e5;
-webkit-transition: all ease .238s;
-moz-transition: all ease .238s;
transition: all ease .238s;
}

#main-nav .sub-menu li:first-child > a {
border-top: 0;
}

#main-nav .sub-menu li:hover > a {
color: #fff;
background-color: #006ab4;
}

#main-nav .sub-menu li:hover:after {
color: #fff;
}

/* Right Menu */
#main-nav > ul > li.right-menu > ul {
left: auto;
right: -16px;
text-align: right;
}

#main-nav > ul > li.right-menu > ul li ul {
left: auto;
right: 100%;
}

#main-nav > ul > li.right-menu li.has-sub:after {
content: "\f104";
right: auto;
left: 14px;
top: 12px;
}


/* ---------------
* Header Top
* ---------------*/
.header-top{
padding: 30px;
}

.header-top .phone,
.header-top .location{
margin:10px 0;
}

.header-top .phone p,
.header-top .location p{
padding: 0;
margin:0;
}

.header-top .phone{
text-align: right;
}

.header-top .phone strong{
font-size: 20px;
color: #325d82;
}

.header-top .location {
text-align: right;
font-size: 13px;
}

@media (max-width: 600px){
.header-top .location,
.header-top .phone {
text-align: left;
}
}


.slotholder:before {
content:"";
display: block;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
}

.slotholder:after {
content:"";
display: block;
position: absolute;
z-index: 1;
top: 0;
height:120px;
right: 0;
left: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+15,000000+100&0.7+1,0.6+16,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 1%, rgba(0,0,0,0.61) 15%, rgba(0,0,0,0.6) 16%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 1%,rgba(0,0,0,0.61) 15%,rgba(0,0,0,0.6) 16%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 1%,rgba(0,0,0,0.61) 15%,rgba(0,0,0,0.6) 16%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

/*----------------------------
Navigation  bar Style
-----------------------------*/
.main-nav-bar{background: #2344a7;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color:transparent;
}
.navbar-collapse,
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar{
margin:0;
min-height: 0;
border: 0;
}
.main-nav{
}
.main-nav li{
display:inline-block;
}
.main-nav li a{
font-family: 'Raleway', sans-serif;
font-size:1rem;
margin-bottom: 0;
padding: 15px;
font-weight: 400;
color: rgba(255,255,255, .8);
}
.main-nav li a:hover, .main-nav li a:focus{
color:#ffffff;
background: transparent;
}

/*---------------------------
Dropdown menu style
-------------------------*/
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
background-color: transparent;
border-color: none;
}
.main-nav .dropdown-menu{
min-width:250px;
background: #55595d;
border-radius: 0;
left: 0px !important;
margin-top: 0;
display:block;
visibility: hidden;
opacity: 0;
border: 0;
padding: 20px 0;
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-ms-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all 0.3s ease 0s;
}

.main-nav .dropdown-menu li{
display: block;
}
.main-nav .dropdown-menu li a{
color: #999;
display: inline-block;
padding: 8px 30px;
}
.main-nav .dropdown-menu li a:hover{
color:#fff;
background: transparent;
}
.main-nav .dropdown:hover .dropdown-menu{
display:block;
opacity: 1;
visibility: visible;
left:17px !important;
}

.header-search{
position: relative;
}

.header-search input{
height:50px;
border: 0px;
border-radius: 0px;
background: rgba(0,0,0,.5);
padding: 0 60px 0 20px;
}


.header-search button{
position: absolute;
right: 0;
top:0;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
background: transparent;
border: 0;
padding: 0;
}

/* Extra small devices (phones, less than 768px) */
@media (max-width : 767px) {
.logo{
margin-bottom: 15px;
}
.header-wrapper {
padding: 0;
}
.provider,
.menu-facturur,
.certifier,
.login-register{
text-align: left;
}
.login-register{
float:left !important;
}
.navbar-default .navbar-toggle {
padding: 0 .5em;
top: -6px;
}
.main-nav-bar{position:absolute;top: 18px;right: 2rem;}

}

@media(min-width: 991px) and (max-width: 1199px){
.provider,
.menu-facturur,
.certifier,
.login-register{
margin-right:.5em;
}
}


/* Revolution Slider
-------------------------------------------------------------- */
.main-slider{
position:relative;
width:100%;
height:auto;
margin-top:0px;
margin-bottom:50px
}

.main-slider .roll-banner-h1,
.main-slider .roll-banner-h2,
.main-slider .roll-banner-h3 {font-family: "Roboto Slab", sans-serif;font-weight: 300;color: #ffffff;}

.main-slider .roll-banner-h1 { font-size: 36px; line-height: 36px !important;}
.main-slider .roll-banner-h2 { font-size: 36px; }
.main-slider .roll-banner-h3 { font-size: 25px; }

.main-slider .roll-banner-h1 strong,
.main-slider .roll-banner-h2 strong,
.main-slider .roll-banner-h3 strong {
font-weight: 700 !important;
}

.main-slider .roll-banner-h1.text-white,
.main-slider .roll-banner-h2.text-white,
.main-slider .roll-banner-h3.text-white,
.main-slider .roll-banner-p.text-white { color: #fff; text-shadow: 0px 1px 2px rgba(0,0,0,0.3);}

.main-slider .roll-banner-h1.white-bg { background-color: #fff; color: #2244a7; padding: 27px 20px 36px; }
.main-slider .roll-banner-h2.white-bg { background-color: #fff; color: #2244a7; padding: 20px; }
.main-slider .roll-banner-h3.white-bg { background-color: #fff; color: #2244a7; padding: 18px 20px; }
.main-slider .roll-banner-p.white-bg { background-color: #fff; color: #2244a7; padding: 18px }

.main-slider .roll-banner-h1.color-bg { background-color: #006ab4; color: #fff; padding: 22px 20px 36px; }
.main-slider .roll-banner-h2.color-bg { background-color: #006ab4; color: #fff; padding: 20px; }
.main-slider .roll-banner-h3.color-bg { background-color: #006ab4; color: #fff; padding: 18px 20px; }
.main-slider .roll-banner-p.color-bg { background-color: #006ab4; color: #fff; padding: 18px }

.main-slider .roll-banner-p.size-2 {
font-size: 16px;
}

.main-slider .roll-btn {font-family: "Roboto Slab", sans-serif;background-color: #12538b;color: #fff;padding: 15px 70px;transition: all ease .238s !important;border-radius: 2px;}

.main-slider .roll-btn:hover {background-color: #1661a2;color: #fff;}

.main-slider .roll-btn.color2 {
background-color: #006ab4;
}

.main-slider .roll-btn.border {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
}

.main-slider .roll-btn.border:hover {
background-color: #fff;
color: #2244a7;
}

.main-slider .roll-btn.color2:hover {
background-color: #2244a7;
}

.main-slider .tp-bannertimer {
background: url(../img/slides/timer.png);
}

/* Arrows */
.main-slider .tparrows {
background-color: rgba(230, 234, 243, 0.5);
transition: all ease .238s !important;
}

.main-slider .tparrows:hover {
background-color: #2244a7;
transition: all ease .238s !important;
}

.main-slider .tparrows:before {
font-size: 13px;
line-height: 42px;
}

.hero-punchline {
color: rgba(255, 255, 255, 0.95);
line-height: 24px !important;
}

@media (max-width : 767px) {
.main-slider .roll-banner-h1{
	line-height: 24px !important;
	text-align: right;
}
}

@media (max-width : 425px) {
.main-slider .roll-banner-h1{
	line-height: 14px !important;
	text-align: right;
}
}

/*---------------------------
menu
--------------------------*/
.header{position: absolute;width: 100%;z-index: 999;}
.header-top div:first-child{
display: flex;
justify-content: center;
align-items: center;
}

.header-top #menu-hero{
display: flex;
justify-content: space-between;
align-items: center;
}
.forcefullwidth_wrapper_tp_banner{
margin-bottom: 5.143em !important;
}


/*---------------------------
offcanvas-menu
--------------------------*/
.offcanvas-menu {}
.offcanvas i{font-size:18px;color:rgba(255,255,255, .8);}
.offcanvas button{
margin:0;
border: 0;
width: 40px;
height: 40px;
line-height: 44px;
padding: 0;
}
.navbar-header .navbar-toggle:focus,
.navbar-header.navbar-toggle:hover {
background-color: transparent;
}


#menu{
margin:30px;
}

#menu>li {line-height: 40px;border-bottom: 1px solid rgba(255, 255, 255, 0.21);}
#menu>li:last-child {
border-bottom: 0;
}
#menu>li ul li{
margin-left: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#menu li a {display: block;text-decoration: none;color: #ffffff;text-transform: uppercase;font-weight: 600;}
#menu li a:hover,
#menu li.active a {
color: #fff;
}

.offcanvas-menu .close {
position: absolute;
right: 0;
color: #fff;
text-shadow: none;
filter: alpha(opacity=100);
opacity: 1;
width: 44px;
height: 38px;
-webkit-transition      : all 0.3s ease 0s;
-moz-transition      : all 0.3s ease 0s;
-o-transition      : all 0.3s ease 0s;
transition      : all 0.3s ease 0s;
}
.offcanvas-menu .close:hover {
opacity: .5;
}

/*----------------------------------------------
Banner-section
------------------------------------------*/

.banner-section{
position: relative;
height:650px;
margin-bottom: 30px;
}
.banner-caption{
text-align:center;
position:absolute;
background: rgba(50, 92, 130, 0.);
width:50%;
padding:60px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
.banner-caption h1{
color:#ffffff;
}
.banner-caption p{
color:#ffffff;
}
.carousel-inner .item img{
height:650px;
width:  100%;
filter:  grayscale;
}
@media(max-width: 767px){
.banner-caption{
width: 18.857em;
padding:1.000em;
}
}

/*--------------------------------------
Services-section
---------------------------------*/
.service-list{
position: relative;
margin-bottom: 30px;
}
.service-list::before{
content: '';
position: absolute;
width:100%;
height:100%;
z-index: 9;
-webkit-transition:background  .3s;
-moz-transition:background  .3s ;
-ms-transition:background  .3s ;
-o-transition:background  .3s ;
transition:background  .3s ;
opacity:0;
transition: opacity .5s;
}
.service-list:hover::before{
background: -webkit-linear-gradient(top right,rgba(252, 83, 76, 0) 0%,rgb(51, 91, 130) 100%);
background: -o-linear-gradient(top right,rgba(252, 83, 76, 0) 0%,rgba(249, 197, 53, .8) 100%);
background: -moz-linear-gradient(top right,rgba(252, 83, 76, 0) 0%,rgba(249, 197, 53, .8) 100%);
background: linear-gradient(top right,rgba(252, 83, 76, 0) 0%,rgba(249, 197, 53, .8) 100%);
opacity: 1;
}
.service-caption{
position: absolute;
left:0;
bottom:0;
z-index: 10;
}
.service-caption{padding: 0px 30px 20px 30px;display: flex;height: 100%;align-items: flex-end;width:  100%;}

.service-left{float:left;width: 100%;}
.service-left h2{
color:#ffffff;
line-height:  28px;
}
.service-left p{
color:#ffffff;
}
.service-left .gallery-CTA {
color: #fff;
font-weight: 600;
text-transform: uppercase;
height: 0px;
line-height: 25px;
transition: all .3s ;
opacity: 0;
}

.service-list:hover .gallery-CTA {
height: 25px;
opacity: 1;
}

.service-right{
color:#ffffff;
float:right;
text-align: right;
width:50%;
}
.service-right a{
color: #333;
background: #fff;
padding: 8px 20px;
margin-top: 4.25em;
display: inline-block;
}
.service-right a i{
font-size: 1.714rem;
}
.service-right a:hover{
background: #327ab7;
color: #fff;
}

@media(max-width: 767px){
.service-left{
width: 84%;
}
.service-right {
width: 16%;
}
}

@media(min-width: 768px) and (max-width: 991px){
.service-left h2{
	font-size: 18px;
}
.service-left p {
    font-size: 14px;
    line-height: 18px;
}
}

@media(max-width: 991px){
.service-left{
width: 80%;
}
.service-right {
width: 20%;
}
}

/*-----------------------------------------------------
section-Chi Siamo
-------------------------------------------*/
.section-welcome{
margin-bottom:2.143em;
overflow: hidden;
}
.welcome{
background: #ffffff;
}
.welcome-details{
padding:30px;
display: inline-block;
}
.welcome-details a{
background: #55595d;
color: #ffffff;
text-transform: uppercase;
padding: 4px 12px;
margin-top: 20px;
display: inline-block;
}
.welcome-details a:hover{
background: #2244a7;
}
.hiring-tab{overflow: hidden;position: relative;background: #f3f3f2;}
.hiring-tab .nav-tabs{
/* float: left; */
width: 100%;
border-bottom: 0;
background: #f5f5f5;
display:  flex;
flex-direction:  row;
}
.hiring-tab .tab-content{float: right;width: 100%;background: #ffffff;}
.hiring-tab .nav-tabs li {
float: none;
border-top: 0;
width:  50%;
text-align:  center;
}
.hiring-tab .nav-tabs li:last-child a{
box-shadow: none;
}
.hiring-tab .nav-tabs li a{border-radius: 0;margin: 0;color: #55595d;padding: 20px 20px;border: 0 !important;/* box-shadow: 0 1px 0 rgba(0,0,0,.1); */}
.hiring-tab .nav-tabs li.active{
cursor: default;
background-color: 0 1px 0 rgba(0,0,0,.1);
border: 0px;
}
.hiring-tab .nav-tabs li.active a{
border: 0;
}
.hiring-tab .nav-tabs li.active a:hover {
color: #55595d;
cursor: default;
background-color: #fff;
border: 0px;
border-bottom-color:  0;
}
.tab-content-details{background: #ffffff;padding: 13px 30px 35px 30px;min-height: 508px;}
.tab-content-details ul li:before {font-family: FontAwesome;content: "\f192";position: absolute;left: 0;top: 1px;color: #12538b;}
.tab-content-details ul ul{margin-top: 5px;padding-left: 20px;}
.tab-content-details ul ul li:before {
font-family: FontAwesome;
content: "\f10c";
}
.tab-content-details ul li{margin-top: 0;padding-left: 23px;position: relative;}
.tab-content-details h4{
margin-bottom: 1.1em;
}
.hiring-tab .tab-content:focus{
outline: none;
}

.tab-content>.active:focus{
outline: none;
}

@media(max-width: 767px){

	.hiring-tab {
	    padding-top: 30px;
	}
	.hiring-tab .nav-tabs li a{
		padding: 10px 6px;
	}
}


/*---------------------------------------------------
Certificazioni
----------------------------------------------*/
.call-to-action{
margin-bottom: 5.143em;
overflow: hidden;
background: #ffffff;
/* box-shadow: 0px 8px 20px rgba(85, 89, 93,0.2); *//* -webkit-box-shadow: 0px 8px 20px rgba(85, 89, 93,0.2); */
-moz-box-shadow: 0px 8px 20px rgba(85, 89, 93,0.2);
margin-top: 30px;
}
.action-serve{
	background: #12538b;
	padding: 3.571em 2.143em 2.143em;
	min-height: 325px;
}
.action-serve h3{
color:#ffffff;
line-height: 1.250em;
}

.action-serve img{
	margin-left: auto;
	margin-right: auto;
	max-width: 55%;
}

.action-serve h4{
color:rgba(255, 255, 255, .9);
line-height: 2.222em;
}
.action-serve p{
color:rgba(255, 255, 255, .9);
}
#action-testimonial{
padding:3.571em 3.571em 3.2em 1.286em;
position: relative;
}
.client-thumb{
width:20%;
}
.client-comments{
width:80%;
position: relative;
}
#action-testimonial .owl-controls{
text-align: left;
position: absolute;
bottom: 15%;
left: 150px;
}
#action-testimonial .owl-controls .owl-page span{
width:4px;
height:4px;
background:#919191;
}
#action-testimonial .owl-controls .owl-page.active span{
background:#2244a7;
}
.client-comments p{
font-size: 1.143rem;
font-weight:600;
font-style: italic;
letter-spacing:.5px;
}
.client-comments p::before{
content: "\f10d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: .5rem;
color: #919191;
vertical-align: super;
}
.client-comments p::after{
content: "\f10e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: .5rem;
color: #919191;
vertical-align: super;
}
.client-comments .name{
display: block;
font-weight: 600;
font-size: 0.857rem;
}
.client-comments .designation{
font-size: 0.714rem;
margin-top: -5px;
display: inherit;
}

@media(max-width: 991px){
.client-thumb{
display:none;
}
#action-testimonial .owl-controls{
text-align: center;
position: static;
}
}

@media(min-width: 991px) and (max-width: 1200px){
	.action-serve{
		min-height: 362px;
	}

	.action-serve img{
		margin-left: auto;
		margin-right: auto;
		max-width: 80%;
	}
}

@media (max-width: 991px){
	.action-serve{
		min-height: 235px !important;
		height: 235px;
		overflow: hidden;
	}

	.action-serve img{
		margin-left: auto;
		margin-right: auto;
		max-width: 50%;
	}
}


/*--------------------------------------------
Attachment Section
----------------------------------------*/

.attachment-section {
	margin-bottom: 5.143em;
}

.attachment-container {
    background: #ffffff;
    position: relative;
    display: flex;
}

.attachment-container .icon {
    background: #12538b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 20px;
    transition: all ease .238s !important;
}

.attachment-container .icon svg {
    width: 50px;
    height: 50px;
    transition: all ease .238s !important;
}

.attachment-container .icon svg * {
	fill: #fff;
}

.attachment-container .icon:hover {
    background-color: #1661a2;
}

.attachment-container .icon:hover svg {
	transform: scale(1.1,1.1)
}

.attachment-container h4 {
    padding: 20px 30px;
    margin: 0;
    color: #12538b;
}

@media (max-width: 767px){

	.attachment-container {
		flex-direction: column;
		text-align: center;
		padding: 30px;
		align-items: center;
	}

	.attachment-container .icon {
		width: 90px;
		border-radius: 50%;
	}

	.attachment-container h4 {
		padding: 0;
		margin-top: 30px;
	}

}


/*--------------------------------------------
Contact Form
----------------------------------------*/

.send-wrap{
	text-align: right;
}

.mandatory{
	font-size: 12px;
	margin-top: -5px;
}

.contact{
padding-bottom: 80px;
background: #fff;
padding-top: 80px;
}

.recaptcha{
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.roll-titlebox{
margin-bottom: 50px;
}

.contact-form .contact-form-info img{
	width: 200px;
	margin-bottom: 20px;
}

.contact-form .contact-form-info p{
	margin-top: 0;
}

.contact-form .contact-form-info button{
	margin-top: 15px;
}


@media (max-width: 425px){
	.recaptcha{
		flex-direction: column;
	}
	.send-wrap {
	    text-align: left;
	    margin-top: 10px;
	}
	.mandatory {
	    margin-bottom: 10px;
	}
}


@media(max-width: 768px){
.contact {
    padding-bottom: 40px !important;
}
.contact-form .no-padding-right{
	padding-right: 15px !important;
}
.contact-form .contact-form-info {
    text-align: left;
    margin-top: 30px;
}

}


button,
input {
line-height: normal;
}

input,
textarea {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); /* Removing the inner shadow on iOS inputs */
}

textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
vertical-align: top; /* Improves readability and alignment in all browsers */
height: 146px !important;
}

input[type="checkbox"] {
display: inline;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
line-height: 1;
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
border: 0;
}

input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
width: 100%;
background-color: #fff;
border: 1px solid #e1e1e1;
line-height: 22px;
width: 100%;
height: auto;
padding: 13px 19px;
margin-bottom: 10px;
border-radius: 0;
-webkit-appearance: none;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border ease .238s;
-moz-transition: border ease .238s;
transition: border ease .238s;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
outline: 0;
border-color: #7e8186;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {background-color: #12538b;color: #fff;padding: 18px 35px;font-family: "Roboto Slab", sans-serif;-webkit-transition: all ease .238s;-moz-transition: all ease .238s;transition: all ease .238s;font-size: 18px;border-radius: 2px;margin-top: 5px;}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {background-color: #1661a2;outline: 0;}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
background-color: #006ab4;
outline: 0;
}

/*------------------------------------------------
Contact Form - Alert
------------------------------------------*/
.alert-field::-webkit-input-placeholder {
color: #dd473c !important;
}
.alert-field::-moz-placeholder {
color: #dd473c;
}
.alert-field:-ms-input-placeholder {
color: #dd473c;
}
.alert-field:-moz-placeholder {
color: #dd473c;
}

/*------------------------------------------------
Map
------------------------------------------*/

.map-area{
position:relative;
padding-top:4.286em;
}
#map {
height     : 400px;
}

@media(max-width: 767px){
#phone, #subject{
width:100%;
margin:0 0 2.2em 0;
}
.contact-us .get-in-Touch h4{
margin-top:2.2em;
}
}
@media(min-width: 768px) and (max-width: 1199px){
#subject {
margin-left: .6em;
}
}

/*--------------------------------------------
Footer
----------------------------------------*/

.footer-section{
	/* margin-bottom:40px; */
	padding: 30px 40px 40px 40px;
	background: #386892;
    color: #fff;
}

.footer-section p{
margin: 0;
}

.footer-section h4{
color: #fff;
margin-bottom: 10px;
}

.footer-section a{
color: #fff;
}

.footer-section a:hover, .footer-section h4:hover{
color: #f3f2f2;
}

.footer-top h4{
color:#ffffff;
margin-bottom: 1.667em;
}
.footer-top p{
color:rgba(255, 255, 255, .5);
}
.footer-top .about a{
color:#ffffff;
}

.copyright p{
color: rgba(255, 255, 255, .5);
margin: 0;
}

.footer-social{
text-align: right;
}
.footer-social ul li{
display:inline-block;
}
.footer-social ul li a{
display:block;
color: rgba(255, 255, 255, .5);
padding-right:2.143em;
}
.footer-social ul li a:hover{
color:#ffffff;
}
.footer-social ul li a i{
padding-right:.825em;
}
@media(max-width: 767px){
.about, .news, .services{
margin-bottom:3.571em;
}
.footer-social{
text-align: left;
margin-top: 1.071em;
}
}

@media(min-width: 768px) and (max-width: 1024px){
.footer-social ul{
text-align: center;
}
}

@media(max-width: 1024px){
	.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
		max-width: 40%;
	}
}

/*---------------------------------------
Bottom to top
----------------------------------------*/
#toTop {
position: fixed;
bottom: 1.667em;
right: 2.8em;
color: #ffffff;
cursor: pointer;
display: none;
z-index: 9999;
width: 50px;
height: 50px;
background: rgba(85, 89, 93, 0.5);
text-align: center;
line-height: 28px;
padding: 10px;
border-radius: 50px;
}
#toTop i{
font-size: 2rem;
}

/*------------------------------------------------
Photo Swipe
------------------------------------------------*/
.pswp--animate_opacity,
.pswp__bg,
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right{
-webkit-transition: opacity 333ms cubic-bezier(.4,0,.22,1);
transition: opacity 333ms cubic-bezier(.4,0,.22,1);
}


/**

Offcanvas

styling: selectors

.offcanvas-contents

*/

.offcanvas-wrapper,
.offcanvas-pusher,
.offcanvas-contents {
    height : 100%;
    }

.offcanvas-contents {
    /* overflow-y : scroll;
 background : #f3efe0; */
    }

.offcanvas-open .offcanvas-contents,
.offcanvas-open .offcanvas-contents-inner {

    }

.offcanvas-html-open, .offcanvas-body-open {
    height : 100%
    }

.offcanvas-contents,
.offcanvas-contents-inner {
    position : relative;
    }

.offcanvas-wrapper {
    /* position: fixed; */
    overflow : auto;
    }

.offcanvas-pusher {
    position           : relative;
    left               : 0;
    z-index            : 99;
    height             : 100%;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

 .header::after {
    position: fixed;
    top                : 0;
    right              : 0;
    width              : 0;
    height             : 0;
    background: rgba(0, 0, 0, 0.81);
    content            : '';
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -moz-transition    : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -o-transition      : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    z-index: 9;
    }

.offcanvas-open  .header::after {
    width              : 100%;
    height             : 100%;
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition    : opacity 0.5s;
    -o-transition      : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-container {
    position: fixed;
    top                : 0;
    left               : 0;
    z-index: 10;
    visibility         : hidden;
    width: 50%;
    height: 100vh;
    background: #2344a7; /* Will Change */
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
    }

.offcanvas-container::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 100%;
    height             : 100%;
    background         : rgba(0, 0, 0, 0.5);
    content            : '';
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition    : opacity 0.5s;
    -o-transition      : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-open .offcanvas-container::after {
    width              : 0;
    height             : 0;
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -moz-transition    : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -o-transition      : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

.offcanvas-container > div {
    overflow-y : scroll;
    overflow-x : hidden;
    height     : calc(100% - 0px);
    visibility : visible;
    }

.offcanvas-container > div::-webkit-scrollbar {
    width : 0px;
    }

/*.offcanvas-container > div::-webkit-scrollbar{
    width: 5px;
}

.offcanvas-container > div::-webkit-scrollbar-track{
    background-color: #1F1F23;
}

.offcanvas-container > div::-webkit-scrollbar-thumb{
    background-color: #808080;
}*/

.offcanvas-left .offcanvas-container {
    left : 0;
    }

.offcanvas-right .offcanvas-container {
    left  : auto;
    right : 0;
    }

/* Individual effects */

/*
 Effect 1: Slide in on top
 Name: slide-in-on-top
*/

.offcanvas-left.slide-in-on-top.offcanvas-open .offcanvas-container,
.offcanvas-right.slide-in-on-top.offcanvas-open .offcanvas-container {
    visibility        : visible;
    -webkit-transform : translate3d(0, 0, 0);
    -moz-transform    : translate3d(0, 0, 0);
    -ms-transform     : translate(0, 0);
    -o-transform      : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
    }

.offcanvas-left.slide-in-on-top .offcanvas-container {
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.slide-in-on-top .offcanvas-container {
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.slide-in-on-top .offcanvas-container::after {
    display : none;
    }

/* Effect 2: Reveal : done */

.offcanvas-left.reveal.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.reveal.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.reveal .offcanvas-container {
    z-index    : 0;
    visibility : hidden;
    /*opacity: 0;*/
    }

.reveal.offcanvas-open .offcanvas-container {

    z-index            : 1;
    visibility         : visible;
    /*opacity: 1;*/
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

.reveal .offcanvas-container::after {
    display : none;
    }

/* Effect 3: Push done */

.offcanvas-left.push-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.push-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.push-down .offcanvas-container {
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.push-down .offcanvas-container {
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.push-down.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

.push-down .offcanvas-container::after {
    display : none;
    }

/* Effect 4: Slide along : done*/

.offcanvas-left.slide-along.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.slide-along.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.slide-along .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(-50%, 0, 0);
    -moz-transform    : translate3d(-50%, 0, 0);
    -ms-transform     : translate(-50%, 0);
    -o-transform      : translate3d(-50%, 0, 0);
    transform         : translate3d(-50%, 0, 0);
    }

.offcanvas-right.slide-along .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(50%, 0, 0);
    -moz-transform    : translate3d(50%, 0, 0);
    -ms-transform     : translate(50%, 0);
    -o-transform      : translate3d(50%, 0, 0);
    transform         : translate3d(50%, 0, 0);
    }

.slide-along.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -webkit-transform 0.5s;
    -ms-transition     : -webkit-transform 0.5s;
    -o-transition      : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.slide-along .offcanvas-container::after {
    display : none;
    }

/* Effect 5: Reverse slide out  done */
.offcanvas-left.reverse-slide-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.reverse-slide-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.reverse-slide-out .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(50%, 0, 0);
    -moz-transform    : translate3d(50%, 0, 0);
    -ms-transform     : translate(50%, 0);
    -o-transform      : translate3d(50%, 0, 0);
    transform         : translate3d(50%, 0, 0);
    }

.offcanvas-right.reverse-slide-out .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(-50%, 0, 0);
    -moz-transform    : translate3d(-50%, 0, 0);
    -ms-transform     : translate(-50%, 0);
    -o-transform      : translate3d(-50%, 0, 0);
    transform         : translate3d(-50%, 0, 0);
    }

.reverse-slide-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

/* Effect 6: Rotate pusher   done */

.rotate-pusher.offcanvas-wrapper {
    -webkit-perspective : 1500px;
    -moz-perspective    : 1500px;
    -ms-perspective     : 1500px;
    -o-perspective      : 1500px;
    perspective         : 1500px;
    }

.offcanvas-left.rotate-pusher .offcanvas-pusher {
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-perspective      : 1200px;
    -moz-perspective         : 1200px;
    -ms-perspective          : 1200px;
    -o-perspective           : 1200px;
    perspective              : 1200px;

    /* -webkit-transform-style  : preserve-3d;
     transform-style          : preserve-3d;*/
    }

.offcanvas-right.rotate-pusher .offcanvas-pusher {
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;

    -webkit-perspective      : 1200px;
    -moz-perspective         : 1200px;
    -ms-perspective          : 1200px;
    -o-perspective           : 1200px;
    perspective              : 1200px;

    /*-webkit-transform-style  : preserve-3d;
    transform-style          : preserve-3d;*/
    }

.offcanvas-left.rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0) rotateY(-15deg);
    -moz-transform    : translate3d(300px, 0, 0) rotateY(-15deg);
    -ms-transform     : translate3d(300px, 0, 0) rotateY(-15deg);
    -o-transform      : translate3d(300px, 0, 0) rotateY(-15deg);
    transform         : translate3d(300px, 0, 0) rotateY(-15deg);
    }

.offcanvas-right.rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0) rotateY(15deg);
    -moz-transform    : translate3d(-300px, 0, 0) rotateY(15deg);
    -ms-transform     : translate3d(-300px, 0, 0) rotateY(15deg);
    -o-transform      : translate3d(-300px, 0, 0) rotateY(15deg);
    transform         : translate3d(-300px, 0, 0) rotateY(15deg);
    }

.offcanvas-left.rotate-pusher .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0);
    -moz-transform           : translate3d(-100%, 0, 0);
    -ms-transform            : translate(-100%, 0);
    -o-transform             : translate3d(-100%, 0, 0);
    transform                : translate3d(-100%, 0, 0);
    -webkit-transform-origin : 100%;
    -moz-transform-origin    : 100%;
    -ms-transform-origin     : 100%;
    -o-transform-origin      : 100%;
    transform-origin         : 100%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.rotate-pusher .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0);
    -moz-transform           : translate3d(100%, 0, 0);
    -ms-transform            : translate(100%, 0);
    -o-transform             : translate3d(100%, 0, 0);
    transform                : translate3d(100%, 0, 0);
    -webkit-transform-origin : 0%;
    -moz-transform-origin    : 0%;
    -ms-transform-origin     : 0%;
    -o-transform-origin      : 0%;
    transform-origin         : 0%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.rotate-pusher.offcanvas-open .offcanvas-container {
    visibility        : visible;
    -webkit-transform : translate3d(-100%, 0, 0) rotateY(15deg);
    -moz-transform    : translate3d(-100%, 0, 0) rotateY(15deg);
    -ms-transform     : translate3d(-100%, 0, 0) rotateY(15deg);
    -o-transform      : translate3d(-100%, 0, 0) rotateY(15deg);
    transform         : translate3d(-100%, 0, 0) rotateY(15deg);
    }

.offcanvas-right.rotate-pusher.offcanvas-open .offcanvas-container {
    visibility        : visible;

    -webkit-transform : translate3d(100%, 0, 0) rotateY(-15deg);
    -moz-transform    : translate3d(100%, 0, 0) rotateY(-15deg);
    -ms-transform     : translate3d(100%, 0, 0) rotateY(-15deg);
    -o-transform      : translate3d(100%, 0, 0) rotateY(-15deg);
    transform         : translate3d(100%, 0, 0) rotateY(-15deg);
    }

.rotate-pusher .offcanvas-container::after {
    display : none;
    }

/* Effect 7: 3D rotate in done */

.offcanvas-left.three-d-rotate-in.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -mos-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.three-d-rotate-in.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.three-d-rotate-in .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.three-d-rotate-in.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.three-d-rotate-in.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.three-d-rotate-in .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(-100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;
    /* -webkit-transform-style  : preserve-3d;
     transform-style          : preserve-3d;*/
    }

.offcanvas-right.three-d-rotate-in .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(100%, 0) rotateY(90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(90deg);
    transform                : translate3d(100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    /* -webkit-transform-style  : preserve-3d;
     transform-style          : preserve-3d;*/
    }

.offcanvas-left.three-d-rotate-in.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(-100%, 0, 0) rotateY(0deg);
    -mos-transform     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(-100%, 0) rotateY(0deg);
    -o-transform       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.three-d-rotate-in.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(100%, 0) rotateY(0deg);
    -o-transform       : translate3d(100%, 0, 0) rotateY(0deg);
    transform          : translate3d(100%, 0, 0) rotateY(0deg);
    }

/* Effect 8: 3D rotate out  done */

.offcanvas-left.three-d-rotate-out.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.three-d-rotate-out.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.three-d-rotate-out .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.three-d-rotate-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.three-d-rotate-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.three-d-rotate-out .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(-100%, 0) rotateY(90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.three-d-rotate-out .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.three-d-rotate-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(-100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(-100%, 0) rotateY(0deg);
    -o-transform       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.three-d-rotate-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(100%, 0) rotateY(0deg);
    -o-transform       : translate3d(100%, 0, 0) rotateY(0deg);
    transform          : translate3d(100%, 0, 0) rotateY(0deg);
    }

.three-d-rotate-out .offcanvas-container::after {
    display : none;
    }

/* Effect 9: Scale down pusher  done */
.scale-down-pusher.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.scale-down-pusher .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.scale-down-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(0, 0, -300px);
    -moz-transform    : translate3d(0, 0, -300px);
    -ms-transform     : translate3d(0, 0, -300px);
    -o-transform      : translate3d(0, 0, -300px);
    transform         : translate3d(0, 0, -300px);
    overflow          : hidden;
    }

.offcanvas-left.scale-down-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.scale-down-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.scale-down-pusher.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -webkit-transform 0.5s;
    -ms-transition     : -webkit-transform 0.5s;
    -o-transition      : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.scale-down-pusher .offcanvas-container::after {
    display : none;
    }

/* Effect 10: Scale up  done */

.scale-up.offcanvas-wrapper {
    -webkit-perspective        : 1000px;
    -moz-perspective           : 1000px;
    -ms-perspective            : 1000px;
    -o-perspective             : 1000px;
    perspective                : 1000px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-left.scale-up.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.scale-up.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.scale-up .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(0, 0, -300px);
    -moz-transform    : translate3d(0, 0, -300px);
    -ms-transform     : translate3d(0, 0, -300px);
    -o-transform      : translate3d(0, 0, -300px);
    transform         : translate3d(0, 0, -300px);
    }

.offcanvas-right.scale-up .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(150%, 0, -300px);
    -moz-transform    : translate3d(150%, 0, -300px);
    -ms-transform     : translate3d(150%, 0, -300px);
    -o-transform      : translate3d(150%, 0, -300px);
    transform         : translate3d(150%, 0, -300px);
    }

.scale-up.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

/* Effect 11: Scale and rotate pusher  done */

.scale-rotate-pusher.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.scale-rotate-pusher .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.scale-rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(100px, 0, -600px) rotateY(-20deg);
    -moz-transform    : translate3d(100px, 0, -600px) rotateY(-20deg);
    -ms-transform     : translate3d(100px, 0, -600px) rotateY(-20deg);
    -o-transform      : translate3d(100px, 0, -600px) rotateY(-20deg);
    transform         : translate3d(100px, 0, -600px) rotateY(-20deg);
    overflow          : hidden;
    }

.offcanvas-right.scale-rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-100px, 0, -600px) rotateY(20deg);
    -moz-transform    : translate3d(-100px, 0, -600px) rotateY(20deg);
    -ms-transform     : translate3d(-100px, 0, -600px) rotateY(20deg);
    -o-transform      : translate3d(-100px, 0, -600px) rotateY(20deg);
    transform         : translate3d(-100px, 0, -600px) rotateY(20deg);
    overflow          : hidden;

    }

.offcanvas-left.scale-rotate-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.scale-rotate-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.scale-rotate-pusher.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.scale-rotate-pusher .offcanvas-container::after {
    display : none;
    }

/* Effect 12: Open door  done*/

.open-door.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.offcanvas-left.open-door .offcanvas-pusher {
    -webkit-transform-origin : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.open-door .offcanvas-pusher {
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.open-door.offcanvas-open .offcanvas-pusher {
    -webkit-transform : rotateY(-10deg);
    -moz-transform    : rotateY(-10deg);
    -ms-transform     : rotateY(-10deg);
    -o-transform      : rotateY(-10deg);
    transform         : rotateY(-10deg);
    overflow          : hidden;
    }

.offcanvas-right.open-door.offcanvas-open .offcanvas-pusher {
    -webkit-transform : rotateY(10deg);
    -moz-transform    : rotateY(10deg);
    -ms-transform     : rotateY(10deg);
    -o-transform      : rotateY(10deg);
    transform         : rotateY(10deg);
    overflow          : hidden;
    }

.offcanvas-left.open-door .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.open-door .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.open-door.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.open-door .offcanvas-container::after {
    display : none;
    }

/* Effect 13: Fall down  done */

.fall-down.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-left.fall-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.fall-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.fall-down .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(0, -100%, 0);
    -moz-transform    : translate3d(0, -100%, 0);
    -ms-transform     : translate(0, -100%);
    -o-transform      : translate3d(0, -100%, 0);
    transform         : translate3d(0, -100%, 0);
    }

.fall-down.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(0, 0, 0);
    -moz-transform                     : translate3d(0, 0, 0);
    -ms-transform                      : translate(0, 0);
    -o-transform                       : translate3d(0, 0, 0);
    transform                          : translate3d(0, 0, 0);
    -webkit-transition-speed           : 0.2s;
    transition-speed                   : 0.2s;
    }

/* Effect 14: Delayed 3D rotate */

.offcanvas-left.delayed-three-d-rotate.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.delayed-three-d-rotate .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.delayed-three-d-rotate.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.delayed-three-d-rotate .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(-100%, 0) rotateY(90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.delayed-three-d-rotate .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.delayed-three-d-rotate.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-delay           : 0.1s;
    transition-delay                   : 0.1s;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(-100%, 0, 0) rotateY(0deg);
    -moz-transform                     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform                      : translate(-100%, 0) rotateY(0deg);
    -o-transform                       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform                          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-delay           : 0.1s;
    transition-delay                   : 0.1s;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform                     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform                      : translate(100%, 0) rotateY(0deg);
    -o-transform                       : translate3d(100%, 0, 0) rotateY(0deg);
    transform                          : translate3d(100%, 0, 0) rotateY(0deg);
    }

/*IE fix*/
.ie9 .reveal .offcanvas-container,
.ie10 .reveal .offcanvas-container,
.ie11 .reveal .offcanvas-container {
    display : none !important;
    }

.ie9 .reveal.offcanvas-open .offcanvas-container,
.ie10 .reveal.offcanvas-open .offcanvas-container,
.ie11 .reveal.offcanvas-open .offcanvas-container {
    display : block !important;
    }