/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html,
body {
    height:100%;
}
body {
    color: #1e1e1e;
    font-size: 100%;
    font-family: 'Titillium Web', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #fff;
}
.container:before,
.group:before,
.menu:before,
.container:after, 
.group:after,
.menu:after {
    content: " "; 
    display: table; 
}
.container:after,
.group:after,
.menu:after {
    clear: both;
}
.container,
.group,
.menu {
    *zoom: 1;
}
header a,
ul li a {
    text-decoration: none;
}
main {
    margin-top:3.125em; /* 50/16 */
}
strong {
    font-weight: 600;
}
.nav-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.container {
    max-width: 1200px;
    padding: 0 6.25em;  /* 100/16 */
    margin: 0 auto;
    padding:0 1.25em; /* 20/16 */
}
.orange {
    color:#e27b00
}
::-moz-selection { background: #b3d4fc; text-shadow: none;}
::selection { background: #b3d4fc; text-shadow: none; }
/*
 * A better looking default horizontal rule
 */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio,canvas,iframe,
img,svg,video { vertical-align: middle; }
img { height:auto; max-width:100%; }
fieldset { border: 0; margin: 0; padding: 0;}
/*
 * Allow none resizing of textareas.
 */
textarea { resize: none; }
/* ==========================================================================
   jzfc's custom styles
   ========================================================================== */
/* ==========================================================================
   ICONS
   ========================================================================== */
.icon {
    display:inline-block;
    background: transparent url(../img/sprites/sprite-icons.png) no-repeat;
    vertical-align:middle;
}
.icon-menu {
    background-position: -13px -17px;
    width: 38px;
    height: 31px;
}
.icon-swipe {
    background-position: -79px -69px;
    width:32px;
    height:35px;
}
.open .icon-menu {
    background-position: -16px -72px;
    width: 32px;
    height: 32px;
}
/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    text-align:center;
    background:#fff;
    position:relative;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
header > .container {
    padding:0;    
}
header > .container > a {
    float:left;
    padding-left:20px;
    padding-top:8px;
}
header > .container > a > h1,
header > .container > a h1 > span{
    margin:0;
    text-align:left;
    color:#fff;
}
header > .container > a > h1 {
    font-size:1.25em; /* 20/16 */
    line-height:0.8;
}
header > .container > a > h1 > span {
    font-size:0.6em; /* 12/20 */
    line-height:1;
    font-weight:300;
}
#nav-trigger {
    display: none;
    text-align: center; 
}
#nav-trigger > i {
    float:right;
    margin-top:9px;
}
nav#nav-main {
    float:right;
}
nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; 
}
nav#nav-main li {
    display: inline-block;
    padding: 0 5px; 
}
nav#nav-main li:last-child {
    border-right: none; 
}
nav#nav-main a {
    display: block;
    color:#1e1e1e;
    padding: 0em 0.8333333333333334em; /* 0/24 */ /* 20/24 */
    font-size:1.5em; /* 24/16 */
    text-transform:capitalize;
    line-height:4.166666666666667em; /* 100/24 */
    font-weight:300;
}
nav#nav-main a:hover,
nav#nav-main a:focus {
    color:#fff;
}
nav#nav-mobile {
    position: relative;
    display: none; 
}
nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    /*position: absolute;*/
    left: 0;
    right: 0;
    margin:0;
    text-align: center;
    background-color: #e17c26;
    padding:30px 0;
    z-index:999999;
}
nav#nav-mobile ul ul {
    position:relative;
}
nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
}
nav#nav-mobile li:last-child {
    border-bottom: none; 
}
nav#nav-mobile a {
    display: block;
    color:#1e1e1e;
    padding: 0px 20px;
    font-size:1.5em; /* 24/16 */
}
nav#nav-mobile a:hover {
    color: #fff; 
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    background-color: #141923;
    color:#fff;
    padding:2.5em 0; /* 40/16 */
    overflow:hidden;
}
.hero h1 {
    line-height:1.2;
    margin:0 0 1.25em; /* 30/24 */
}
.hero .btn-standard {
   
}
.hero .btn-standard:hover {
    background-color: #e5a04e;
}
.hero h1, 
.hero h2,
.hero p {
 -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
    -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* ==========================================================================
  SECTIONS
   ========================================================================== */
.page-home section,
.blog {
    padding:1.875em 0; /* 30/16 */
}
section.dark {
    background-color: #141923;
}
section.dark h1 {
    color:#e27b00;
}
section.dark p {
    color:#fff;
}
section.gray95 {
    background:#f2f2f2;
}

/* ==========================================================================
  BG PANELS
   ========================================================================== */
.bg-panel {
    background:#2a313f;
    padding:2.5em; /* 40/16 */
}
.bg-panel p {
    font-size:1.125em; /* 18/16 */
    color:#fff;
    margin:0;
    font-weight:300;
}
.panel-1 {
   /* background: url(../img/bg/bg-1-hd.jpg) no-repeat 100% 100%;*/
    background-size: cover;
}
.panel-2 {
    /*background: url(../img/bg/bg-2-hd.jpg) no-repeat 100% 100%;*/
    background-size: cover;
}
/* ==========================================================================
  COURSE TYPE
   ========================================================================== */
.courses {
    margin:1.875em 0; /* 30/16 */
}

.course-type {
    margin:0 -20px;
}
.course-type-head {
   background:#21272f;
   padding:0.9375em 0 0.625em; /* 15/16 */ /* 10/16 */
}
.course-type-head p {
    margin:0;
    color:#fff;
    line-height:1.2;
    font-weight:700;
}
.course-type-head h2 {
    margin:0;
}
.course-type-cont {
    background: #f2f2f2;
    padding:1.2625em 0 1.275em; /* 25/16 */ /* 30/16 */
    border-bottom: 2px solid #e6a04e;
}
.course-type-cont p {
    font-weight:700;
    line-height:1.2;
    margin:0 0 1.25em; /* 20/16 */
}
.course-type-cont ul {
    max-width:260px;
    margin:0 auto;
}
.course-type-foot {
    padding:0.9375em 0 0.6em; /* 15/16 */
    background: #f2f2f2;
}
.course-type-foot ul {
    max-width:140px;
    margin: 0 auto 1.45em auto;
}
/* ==========================================================================
  DIV TABLES
   ========================================================================== */
.table {
    display:table;
    width:270px;
    margin:0 auto;
}
.table > div {
    display:table-cell;
    text-align:left;
    vertical-align: middle;
    padding-bottom:20px;
}
.table > div:first-child {
    width:70px;
    text-align: center;
}
.table > div:last-child {
    padding-left:10px;
}
.table > div > p {
    margin:0;
}
.sm-desktop + p {
    margin-top:30px;
}
/* ==========================================================================
    REFERENCE SLIDER
    ========================================================================== */
.reference-item {
    max-width:670px;
    margin:0 auto;
}
.reference-item img {
    display:none;
}
.reference-item h2 {
    color:#1e1e1e;
    font-weight:600;
    margin:0;
}
.reference-item p.address {
    font-weight:600;
}
/* ==========================================================================
    TIMELINE
    ========================================================================== */
.timeline h2 {
    line-height:1.2;
    color:#1e1e1e;
    margin-bottom:50px; 
}
.timeline h3 {
    line-height:1.2;   
}
.timeline h3,
.timeline p {
    margin:0;
}
.arrow-box {
    position:relative;
    background-color: #f2f2f2;
    padding:1.5625em 0.625em; /* 25/16 */ /* 10/16 */
    text-align:left;
    margin:0 0 0.625em; /* 10/16 */
}
.arrow-box span {
    width: 30px; 
    height: 30px; /* 30/16 */
    background-color: #e17c26;
    border-radius:50%;
    display: inline-block;
    vertical-align: middle;
    font-size:1.125em; /* 18/16 */
    color:#fff;
    font-weight: 700;
    top:-15px; /* 15/16 */
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    text-align:center;
}
/* ==========================================================================
    PDF
    ========================================================================== */
.pdf {
    max-width:320px;
    margin:40px auto 0;
}
.pdf a {
    color:white;
    line-height:1.2;
}
.pdf > div {

}
.pdf .grid {
    float:left;
}
.pdf .grid-1-4 {
    width:50%;
    margin-bottom:40px;
}
.pdf .grid-1-4:nth-child(3),
.pdf .grid-1-4:nth-child(4){
    margin:0;
}
.pdf img {
    margin-bottom:20px;
}
.pdf a span {
    display:block;
}
/* ==========================================================================
    About
    ========================================================================== */
.about {
    text-align: left;
}
.about > .group > .grid > img {
    float:left;
    margin:10px 20px 0px 0;
    display:none;
}

.about > .group > .grid > p {
    line-height:1.3;
}
.about > .group > .grid > p > b {
    font-size:1.5em; /* 24/16 */
}
.about > .group > .grid:first-child {
    text-align:justify;
}
/* ==========================================================================
    License
    ========================================================================== */
.license ul {
    max-width:280px;
    margin: 30px auto 0;
}
.license li {
    text-align:left;
    float:left;
    display:block;
    width:100%;
}
.license h2{
    color:#1e1e1e;
}
.license li a {
    color:#1e1e1e;
    text-decoration: underline;
}
.license ul li a:hover {
    color:#e27b00;
}
.license ul li img {
    float:left;
    max-width:30%;
    margin-right:20px;
}
.license li a p{
    padding-top:30px;
}
/* ==========================================================================
    Contact
    ========================================================================== */
.contact h2{
    color:#1e1e1e;
    line-height:1.2;
}
.contact-form {
    margin:35px auto 40px;
}
.contact-maps {
    text-align:left;
}
.contact-maps .map {
    height:195px;
    margin:0 -20px;
}
#map-canvas {
    display:none;
}
#map-canvas-2 {
    margin:40px -20px -30px;
}
input,
textarea {
    width:100%;
    height: 2.8125em; /* 45/16 */
    background-color: white;
    border: 1px solid #e5a04e;
    border-radius: 4px;
    padding:0 1.5625em; /* 25/16 */
    margin-bottom:17px;
}
input.input-error,
textarea.input-error {
    border: 1px solid #b71d27;
    background:rgba(183, 29, 39, 0.2);
}
textarea {
    height: 155px;
    padding-top:15px;
}
.captcha .bottom-left {
    max-width:335px;
}
.captcha img {
    margin-right:10px;
    float:left;
    width: 120px;
}
.captcha input[type="text"] {
    width:123px;
    height:35px;
    float:left;
    padding:0 10px;
    margin-right:10px;
}
.contact-form input[type="submit"] {
    height:35px;
    line-height:31px;
    padding:0;
    width:170px;
}
.captcha span {
    float:left;
    text-align:left;
    display:block;
    line-height:1.2;
}

/* ==========================================================================
    FOOTER
    ========================================================================== */
footer {
    color:#6d6d6d;
    background:#141923;
    padding:20px 0;
}
footer p {
    margin:0;
}
footer p:first-child {
    margin-bottom:25px;
}
/* ==========================================================================
    BLOG
    ========================================================================== */
.blog h3 {
	line-height:1.2;
}
.blog ul li {
    min-height: 150px;
    border: 2px solid #f2f2f2;
    border-radius: 4px;
}
.blog ul li {
    padding:20px 0;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    margin-bottom:10px;
}
.blog .grid-25 ul li {
    margin-bottom:0;
    border-top:medium none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.blog .grid-25 ul li.news-header {
    background:#21272f;
    text-align:center;
    color:#fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 2px solid #21272f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    min-height:85px;
    padding:15px 0;
}
.blog .grid-25 ul li.news-header h3{
    margin:0;
    vertical-align: middle;
    line-height:1.2;
}
.blog .grid-25 ul li {
    min-height:100px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding:25px 20px 10px;
}
.blog .grid-25 ul li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.blog .grid-25 ul li p:first-child {
    font-weight:600;
    margin-bottom:1.3888888888888888em; /* 25/18 */
}
.blog ul li:hover {
    background:#f2f2f2;
    cursor: pointer;
}
.blog ul li a {
    color:#1e1e1e;
}
article p time,
.blog ul li a time {
    color:#e27b00;
    margin-bottom:18px;
    display:inline-block;
}
article p time {
    margin-bottom:0;
}
.blog ul li a p{
    margin:0;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.text-center {
    text-align: center;
}
.hiden-lg {
    display:block;
}
/*
 * Hide visually and from screen readers
 */
.hidden {
    display: none !important;
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/* 
 *  Core Owl Carousel CSS File
 *  v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
    
.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}
/*
*   Owl Carousel Owl Demo Theme 
*   v1.3.3
*/

.owl-theme .owl-controls{
    margin-top: 10px;
    text-align: center;
    display:none !important;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
  color: #FFF;
  display: inline-block;
  zoom: 1;
  *display: inline;/*IE7 life-saver */
  margin: 5px;
  width:13px;
  height:21px;
  background: transparent url(../img/sprites/sprite-icons.png) no-repeat scroll -218px -7px;
  cursor:pointer;
  width:24px;
  height:48px;
  position:absolute;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    background-position: -218px -67px;
    text-decoration: none;
}
.owl-prev {
    left:0;
    top: 25%;
}
.owl-next {
    right:0;
    top: 25%;
     -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
    min-height: 150px;
    background: url(AjaxLoader.gif) no-repeat center center
}

/* =======================
=============== MODAL ====== */

.close {
  float: right;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background:url('../img/sprites/sprite-icons.png') no-repeat -346px -20px;
  width:22px;
  height:21px;
}

.close:hover,.close:focus {
  text-decoration: none;
  cursor: pointer;
}

button.close {
  padding: 0;
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
}

.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  font-family: 'Titillium Web', sans-serif;
}
.modal .contact-form {
    margin:20px 0;
}
.modal .captcha p {
    font-size:16px;
    font-weight:400;
    text-align:left;
    margin-bottom:25px;

}
.modal .captcha input[type="submit"] {
    width:145px;
}

.modal-heading {
    text-align:center;
    margin-bottom:45px;
}
.modal-heading .course-date {
    font-size:18px;
    font-weight:600;
    color:#e27b00;
}

.modal .modal-heading p {
    text-align:center;
    font-size:24px;
    margin:0 auto 5px;
    font-weight:600;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0,-25%);
  -ms-transform: translate(0,-25%);
  transform: translate(0,-25%);
  -webkit-transition: -webkit-transform .3s ease-out;
  -moz-transition: -moz-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}

.modal-dialog {
  position: relative;
  width: auto;
}

.modal-content {
  position: relative;
  background-color: #fff;
  border:none;
  border:none;
  background-clip: padding-box;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color:#172127;
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: .75;
  filter: alpha(opacity=75);
}

.modal-header {
  padding:30px 0;
  border-bottom:0;
  font-size:16px;
  color:#fff;
  text-align:center;
  font-weight:600;
  background-color: #21272f;

}

.modal-header .close {
  position: absolute;
  top:28px;
  right:20px;
  padding:5px;
  outline: none;
}

.modal-title {
  margin:40px 0;
  font-size:17px;
  font-weight:700;
  text-transform: uppercase;
  color:#222;
}

.modal-body {
  position: relative;
  padding: 40px 40px 50px;
  background:#f8f8f8;
}

.modal-footer {
  margin-top: 15px;
  padding: 10px 20px 10px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
