/*
////////////////////////////////////////////////////////////////////////// 
//
// 01. GLOBAL ELEMENTS
//
////////////////////////////////////////////////////////////////////////// 
*/

header,section,nav,article,footer,details,footer,summary {display: block;}

body {
    font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
    line-height:  1.5em;
}

body #wrap {
   width: 100%;
   position: absolute;
   right: 0;
   transition: right .6s;
   -webkit-transition: right .6s;
}

.left {
    float: left !important;   
}

.right {
    float: right !important;  
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--- VERTICAL CENTER ---*/

.center-parent {
    display: table !important;
}

.center-child {
    display: table-cell;
    vertical-align: middle;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

/*--- CLEAR AFTER ---*/

.group:after {
  content: "";
  display: table;
  clear: both;
}

.container {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    text-align: left;
}

.anchor {
   position: absolute;
   top: -110px;
}

pre.prettyprint {
   padding: 25px !important;
   border: 1px solid #CCC !important;
   overflow: auto;
}

/*
////////////////////////////////////////////////////////////////////////// 
//
// 02. ROWS (BLACK, BLUE, WHITE, GREY, ORANGE)
//
////////////////////////////////////////////////////////////////////////// 
*/

#content {
   padding-top: 60px;
   background: #F9F9F9;
}

.row {
    width: 100%;
    height: auto;
    padding: 60px 0;
    vertical-align: middle;
    z-index: 0;
}

.row img {
    max-width: 100%;
}

.row .col p, .row .col-right p {
    margin-bottom: 20px;
}

#content .row ul {
    list-style: disc;
    margin-bottom: 8px;
}

#content .row .col ul, #content .row .col ol {
    margin: 10px 0 20px;
    margin-left: 35px;
}

#content .row .col ul.no-margin, #content .row .col ol.no-margin {
    margin-left: 0;
}

#content .row .col ul li {
    list-style: disc;
    margin-bottom: 7px;
}

#content .row .col ol li {
    list-style: decimal;
    margin-bottom: 7px;
}

/*--------------------- TRANSPARENT ROW ---------------------*/

.row.transparent {
    background: transparent;
    color: #444;
}

.row.transparent.lined {
    border-bottom: 1px solid #E6E6E6;
}

.row.transparent h1, .row.transparent h2, .row.transparent h3, .row.transparent h4, .row.transparent h5 {
    color: #1A1A1A;
}

/*--------------------- BLACK ROW ---------------------*/

.row.black {
    background: #151515;
    color: #E3E3E3;
}

.row.black h1, .row.black h2, .row.black h3, .row.black h4, .row.black h5 {
    color: #FFF;
}


/*--------------------- GREY ROW ---------------------*/

.row.grey {
    background: #D0D1D2;
    color: #4D4D4D;
}

.row.grey h1, .row.grey h2, .row.grey h3, .row.grey h4, .row.grey h5 {
    color: #1A1A1A;
}


/*--------------------- LIGHT-GREY ROW ---------------------*/

.row.light-grey {
    background: #F9F9F9;
    color: #444;
}

.row.light-grey.lined {
    border-bottom: 1px solid #E6E6E6;
}

.row.light-grey h1, .row.light-grey h2, .row.light-grey h3, .row.light-grey h4, .row.light-grey h5 {
    color: #1A1A1A;
}

/*--------------------- WHITE ROW ---------------------*/

.row.white {
    background: #FFF;
    color: #444;
}

.row.white.lined {
    border-bottom: 1px solid #E6E6E6;
}

.row.white .lined-top {
    border-top: 1px solid #E6E6E6;
}

.row.white .lined-right {
    border-right: 1px solid #E6E6E6;
}

.row.white .lined-bottom {
    border-bottom: 1px solid #E6E6E6;
}

.row.white .lined-left {
    border-left: 1px solid #E6E6E6;
}

.row.white h1, .row.white h2, .row.white h3, .row.white h4, .row.white h5 {
    color: #1A1A1A;
}

/*--------------------- BLUE ROW ---------------------*/

.row.blue {
    background: #008fbe;
    color: #AFDDEB;
}

.row.blue.lined {
    border-bottom: 1px solid #00657f;
}

.row.blue h1, .row.blue h2, .row.blue h3, .row.blue h4, .row.blue h5 {
    color: #FFF;
}

.row.blue a, .row.blue p.highlight {
    color: #FFF;
}


/*--------------------- GREEN ROW ---------------------*/
.row.green {
    background: #c1d72e;
    color: #6c7137;
}

.row.green h1, .row.green h2, .row.green h3, .row.green h4, .row.green h5 {
    color: #4D4D4D;
}

.row.green a {
    color: #4D4D4D;
}


/*--------------------- ORANGE ROW ---------------------*/

.row.orange {
    background: #F47B20;
    color: #FFF;
}

.row.orange h1, .row.orange h2, .row.orange h3, .row.orange h4, .row.orange h5 {
    color: #FFF;
}

.row.orange a {
    color: #FFF;
}


/*--------------------- MOBILE ---------------------*/

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

    .row {
        padding: 45px 0;
    }
    
    .row img {
        margin-bottom: 25px;
    }
    
    .row .col p {
        margin-bottom: 10px;
    }    

}

@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px) {

    .row {
        padding: 35px 0;
    }

}

@media only screen and (max-width : 400px),
only screen and (max-device-width : 400px) {
    
   #content {
      padding-top: 50px;
   }
    
}


/*
////////////////////////////////////////////////////////////////////////// 
//
// 03. COLUMNS (ONE, TWO, THREE, FOUR, SIX)
//
////////////////////////////////////////////////////////////////////////// 
*/

.col {
/*    position: relative;*/
    display: block;
    float: left;
    margin-left: 3%;
    margin-bottom: 1px;
}

.col img {
    max-width: 100%;
    height: auto;
}

.col-right {
    float: right;
    margin-right: 3%;
    margin-bottom: 1px;
}

.span-1 { width: 5.08%; }
.span-2 { width: 13.16%; }
.span-3 { width: 21.24%; }
.span-4 { width: 29.32%; }
.span-5 { width: 37.40%; }
.span-6 { width: 45.48%; }
.span-7 { width: 53.56%; }
.span-8 { width: 61.64%; }
.span-9 { width: 69.72%; }
.span-10 { width: 77.80%; }
.span-11 { width: 85.88%; }
.span-12 { width: 93.96%; }

/*--------------------- MOBILE ---------------------*/

@media only screen and (max-width : 1400px),
only screen and (max-device-width : 1400px) {

   .container {
       max-width: 1000px;
   }

}

@media only screen and (max-width : 1100px),
only screen and (max-device-width : 1100px) {

   .container {
       max-width: 800px;
   }

}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

    .container {
        width: 98%;
        max-width: 600px;
    }
    
    .col {
        margin-left: 3%;
    }
    
    .col-right {
        float: right;
        margin-right: 3%;
    }
    
    .span-1 { width: 13.16%; }
    .span-2 { width: 29.32%; }
    .span-3 { width: 45.48%; }
    .span-4 { width: 93.96%; }
    .span-5 { width: 93.96%; }
    .span-6 { width: 93.96%; }
    .span-7 { width: 93.96%; }
    .span-8 { width: 93.96%; }
    .span-9 { width: 93.96%; }
    .span-10 { width: 93.96%; }
    .span-11 { width: 93.96%; }
    .span-12 { width: 93.96%; }

}


@media only screen and (max-width : 650px),
only screen and (max-device-width : 650px) {

   .container {
       max-width: 450px;
   }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
    
    .container {
        max-width: 350px;
    }

    .col {
        margin-left: 5%;
    }
    
    .col-right {
        float: right;
        margin-right: 5%;
    }
    
    .span-1 { width: 26.66%; }
    .span-2 { width: 42.5%; }
    .span-3 { width: 90%; }
    .span-4 { width: 90%; }
    .span-5 { width: 90%; }
    .span-6 { width: 90%; }
    .span-7 { width: 90%; }
    .span-8 { width: 90%; }
    .span-9 { width: 90%; }
    .span-10 { width: 90%; }
    .span-11 { width: 90%; }
    .span-12 { width: 90%; }

}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px) {

    .container {
        width: 100%;
    }

    .col {
        margin-left: 5%;
    }
    
    .col-right {
        float: right;
        margin-right: 5%;
    }
    
    .span-1 { width: 42.5%; }
    .span-2 { width: 90%; }
    .span-3 { width: 90%; }
    .span-4 { width: 90%; }
    .span-5 { width: 90%; }
    .span-6 { width: 90%; }
    .span-7 { width: 90%; }
    .span-8 { width: 90%; }
    .span-9 { width: 90%; }
    .span-10 { width: 90%; }
    .span-11 { width: 90%; }
    .span-12 { width: 90%; }
}

/*
////////////////////////////////////////////////////////////////////////// 
//
// 04. HEADER (LOGO, NAVIGATION)
//
////////////////////////////////////////////////////////////////////////// 
*/

#header.version-a {
   position: fixed;
   width: 100%;
   height: 30px;
   padding: 15px 0px;
   color: #CCCCCC;
   background: transparent;
   vertical-align: middle;
   z-index: 1050;
   transition: background .4s;
   -webkit-transition: background .4s; /* Safari */
}

#header.version-a.scrolling {
   background: #FFFFFF;
   background: rgba(255,255,255,.98);
   transition: background .4s;
   -webkit-transition: background .4s; /* Safari */
}

#header.version-a .container {
    position: static;
    width: auto;
    max-width: none;
    padding: 0px 25px;
}

#header.version-a #logo {
    background: url(../upload/images/logo.png) -75px center no-repeat;
    background-size: 175px;
    z-index: 10;
}

#header.version-a #logo {
    float: left;
    display: block;
    width: 100px;
    height: 30px;
}

/*---------------------SEARCH BOX---------------------*/

#header-search-box {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 220px 35% 0;
   background: #000;
   background: rgba(0,0,0,.80);
   z-index: 1500;
   transition: top .17s;
   -webkit-transition: top .17s;
}

#header-search-box form {
   position: relative;
   z-index: 1550;
}

#header-search-box input[type='text'] {
   width: 89%;
   min-width: 0 !important;
   max-width: none;
   height: 50px;
   padding-left: 14px;
   color: #FFF;
   background: #4D4D4D;
   background: rgba(80,80,80,.8);
   border: none;
   border-radius: 6px 0 0 6px;
   font-size: 18px;
   font-weight: 300; 
}

#header-search-box .btn {
   float: right;
   width: 11%;
   height: 50px;
   margin: 0 !important;
   padding: 0;
   color: #888 !important;
   background: #4D4D4D;
   background: rgba(80,80,80,.8);
   border: none;
   border-radius: 0 6px 6px 0;
   font-family: FontAwesome;
   font-size: 14px;
   line-height: 40px;
   transition: background .3s, color .3s;
   -webkit-transition: background .3s, color .3s; /* Safari */
}

#header-search-box .btn:hover, #header-search-box .btn:active {
   color: #FFF !important;
   background: #444;
   background: rgba(110,110,110,.8);
   transition: background .3s, color .3s;
   -webkit-transition: background .3s, color .3s; /* Safari */
}

/*---------------------SIGNUP BUTTON---------------------*/

#nav.version-a ul#small-nav .btn.signup {
    color: #FFF !important;
    background: #E75200;
    border-radius: 11.5px;
    height: 24px;
    margin: 3px 0 0 0;
    padding: 0px 13px !important;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    overflow: visible;
    transition: background, color, .3s;
    -webkit-transition: background, color, .3s; /* Safari */
}

#nav.version-a ul#small-nav .btn.signup:hover {
    color: #FFF !important; 
    background: #FF9D74;
    transition: background, color, .3s;
    -webkit-transition: background, color, .3s; /* Safari */
}

#nav.version-a ul#small-nav .btn.signup:active {
    color: #FFF !important;
    background: #AD431C;
    transition: background, color, .3s;
    -webkit-transition: background, color, .3s; /* Safari */
}

#secondary-header {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    margin-top: 90px;
    color: #CCCCCC;
    padding: 8px 0px 60px;
    vertical-align: middle;
    z-index: 1000;
}

#secondary-header.black {
    background: #1A1A1A;
    border-bottom: 1px solid #333;
}


/*--------------------- PRIMARY NAV (LARGE SCREEN) ---------------------*/

#nav {
   position: fixed;
   top: 15px;
   right: 20px;
   left: 115px;
   z-index: 1055;
}

#nav.version-a .menu-toggle.close {
   display: none;
   float: right;
   width: auto;
   height: 30px;
   margin: 0 0 0 10px;
   padding: 0;
   color: #555;
   background: transparent;
   border: none;
   font-size: 24px;
   transition: color .3s;
   -webkit-transition: color .3s; /* Safari */
}

#nav.version-a .menu-toggle.close:hover, .menu-toggle.close.active {
   color: #FFF;
    transition: color .3s;
    -webkit-transition: color .3s; /* Safari */
}

#nav.version-a ul#navigation_box {
    position: relative;
    float: left;
    height: auto;
    margin-left: 50px;
    color: #CCCCCC;
    text-align: center;
    vertical-align: middle;
}

#nav.version-a ul#navigation_box {
    margin-top: 3px;
    transition: margin-top .135s;
    -webkit-transition: margin-top .135s; /* Safari */
}

#nav.version-a #navigation_box li {
    display: inline;
    text-align: center;
    vertical-align: middle;
    margin-right: 30px;
}

#nav.version-a #navigation_box li a {
    color: #B4B4B4;
    font-size: 18px;
    font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: color .3s;
    -webkit-transition: color .3s; /* Safari */
}

#nav.version-a #navigation_box li a:hover, #header.version-a #navigation_box li a:active {
    color: #009AC7;
    transition: color .3s;
    -webkit-transition: color .3s; /* Safari */
}

#nav.version-a #navigation_box li a.active {
    color: #009AC7;
    font-weight: 700;
}


/*--------------------- PRIMARY MENU (MOBILE) ---------------------*/

#nav.version-a ul#small-nav {
    float: right;
    height: 30px;
    margin-top: 0px;
    transition: margin-top .15s;
    -webkit-transition: margin-top .15s; /* Safari */
}

#nav.version-a ul#small-nav li {
    display: block;
    float: left;
    height: 30px;
}

#nav.version-a ul#small-nav li.mobile-only {
    display: none;
}

#nav.version-a ul#small-nav li a, #nav.version-a ul#small-nav li a:visited {
    display: block;
    margin: 7px 0;
    padding: 0 10px;
    color: #B4B4B4;
    border-right: 1px solid #E6E6E6;
    font-size: 12px;
    line-height: 16px;
}

#nav.version-a ul#small-nav li a.active {
   color: #008FBE;
   font-weight: bold;
}

#nav.version-a ul#small-nav li:nth-last-child(2) a, #header.version-a ul#small-nav li:last-child a {
    border-right: none;
}

#nav.version-a ul#small-nav .fa-external-link {
   display: none;
   font-size: 10px;
}

#header.version-a ul#mobile-login {
    display: none;
}

#header.version-a .menu-toggle {
   display: none;
   float: right;
   width: 30px;
   height: 30px;
   margin: 0 0 0 10px;
   color: #333;
   background: transparent;
   border: none;
   font-size: 24px;
   transition: color .3s;
   -webkit-transition: color .3s; /* Safari */
}

#header.version-a .menu-toggle:hover, .menu-toggle.active {
   color: #008FBE;
   transition: color .3s;
   -webkit-transition: color .3s; /* Safari */
}

#nav.version-a #search-toggle {
   position: relative;
   float: left;
   height: 30px;
   margin: 1px -5px;
   padding: 0;
   color: #B4B4B4;
   background: transparent;
   border: none;
   font-size: 16px;
   z-index: 1550;
   cursor: pointer;
   transition: color .3s;
   -webkit-transition: background .3s; /* Safari */
}

#nav.version-a #search-toggle .fa-times {
   display: none;
}

#nav.version-a #search-toggle:hover {
   color: #B4B4B4;
   transition: color .3s;
   -webkit-transition: color .3s; /* Safari */
}

#nav.version-a #search-toggle.active {
   float: right;
   margin: 0 0 0 -30px;
   font-size: 24px;
}

#nav.version-a #search-toggle.active .fa-search {
   display: none;
}

#nav.version-a #search-toggle.active .fa-times {
   display: block;
}

#mobile-menu {
    display: none;
    position: absolute;
}

/*--------------------- SECONDARY NAV (LARGE SCREEN) ---------------------*/

ul#secondary-navigation_box {
    display: block;
    margin: 0 auto;
    color: #CCCCCC;
    text-align: center;
    vertical-align: middle;
}

#secondary-navigation_box li {
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   margin: 2px;
   padding: 0;
}

#secondary-navigation_box li a {
   display: block;
   padding: 3px 17px;
   color: #FFF;
   background: #DDD;
   background: rgba(201,201,201,.80);
   font-size: 14px;
   font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
   font-weight: 500;
   transition: background .3s;
   -webkit-transition: background .3s;
   border-radius: 3px;
}

#secondary-navigation_box li a:hover {
    background: #00bcdd;
    text-decoration: none;
    transition: background .3s;
    -webkit-transition: background .3s; /* Safari */
}

#secondary-navigation_box li a.active {
    background: #008FBE;
    font-weight: 700;
    transition: background .3s;
    -webkit-transition: background .3s; /* Safari */
}

#secondary-navigation_box .fa-external-link {
   font-size: 10px;
}

@media only screen and (max-width : 1400px),
only screen and (max-device-width : 1400px) {

   #header-search-box {
      padding: 220px 30% 0;
   }

}

@media only screen and (max-width : 950px),
only screen and (max-device-width : 950px) {
    
   #header.version-a .menu-toggle {
      display: block;
   }
    
   body.nav-extended #wrap {
      right: 260px;
      transition: right .6s;
      -webkit-transition: right .6s;
   }
    
   #nav.version-a {
      position: fixed;
      top: 0;
      right: -260px;
      left: auto;
      width: 200px;
      height: 100%;
      padding: 15px 30px 0 30px;
      background: #151515;
      overflow: auto;
      transition: right .6s;
      -webkit-transition: right .6s; /* Safari */
   }
   
   body.nav-extended #nav.version-a {
      right: 0;
      transition: right .6s;
      -webkit-transition: right .6s; /* Safari */
   }
   
   #nav.version-a .menu-toggle.close {
      display: block;
      margin-right: -3px;
   }
       
   #nav.version-a ul#navigation_box {
      position: relative;
      float: none;
      width: 160px;
      height: auto;
      margin: 4px 0 25px;
   }
    
   #nav.version-a #navigation_box li {
      display: block;
      text-align: left;
      margin: 0 0 5px;
   }
    
   #nav.version-a #navigation_box li a {
      display: block;
      padding: 0;
      transition: color .3s;
      -webkit-transition: color .3s;
   }
   
   #nav.version-a ul#small-nav {
      float: none;
      height: auto;
      margin-top: 30px;
   }
   
   #nav.version-a ul#small-nav li, #nav.version-a ul#small-nav li.mobile-only {
      display: block;
      float: none;
      height: auto;
   }
   
   #nav.version-a ul#small-nav li a, #nav.version-a ul#small-nav li a:visited, #nav.version-a ul#small-nav .btn.signup {
      display: block;
      padding: 0 !important;
      height: auto;
      border-right: none;
      background: transparent;
      font-size: 14px;
      font-weight: 300;
      line-height: 24px;
      text-align: left;
      text-decoration: none;
   }
   
   #nav.version-a #navigation_box li a, #nav.version-a ul#small-nav li a, #nav.version-a ul#small-nav .btn.signup {
      display: block;
      margin: 0;
      color: #888 !important;
      text-decoration: none;
      transition: color .3s;
      -webkit-transition: color .3s;
   }
     
   #nav.version-a #navigation_box li a:hover, #header.version-a #navigation_box li a:active, #nav.version-a ul#small-nav li a:hover, #nav.version-a ul#small-nav li a:active, #nav.version-a ul#small-nav .btn.signup:hover, #nav.version-a ul#small-nav .btn.signup:active {
      color: #FFF !important;
      text-decoration: none;
      background: transparent;
      transition: color .3s;
      -webkit-transition: color .3s;
   }
   
   #nav.version-a #navigation_box li a.active, #nav.version-a ul#small-nav li a.active, #nav.version-a ul#small-nav .btn.signup.active {
      color: #FFF !important;
      text-decoration: none;
      transition: color .3s;
      -webkit-transition: color .3s;
   }
    
   #search-toggle {
        display: none;
   }
   
   #header-search-box {
      display: block;
      position: absolute;
      top: 410px;
      right: 30px;
      bottom: auto;
      left: 30px;
      margin-bottom: 30px;
      padding: 0;
      background: transparent;
      z-index: 1500;
   }
   
   #header-search-box input[type='text'] {
      width: 165px;
      height: 35px;
      padding-left: 10px;
      border-radius: 4px 0 0 4px;
      font-size: 14px;
   }
   
   #header-search-box .btn, #header-search-box .btn:hover, #header-search-box .btn:active {
      width: 35px;
      height: 35px;
      background-size: 18px;
      border-radius: 0 4px 4px 0;
      line-height: 35px;
   }
   
   #nav.version-a ul#small-nav .fa-external-link {
      display: inline-block;
   }
    
}

@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px) {

   #secondary-header {
      padding: 8px 0px 35px;
   }
   
}


@media only screen and (max-width : 400px),
only screen and (max-device-width : 400px) {

   #header.version-a {
      padding: 10px 0px;
      transition: height .2s;
      -webkit-transition: height .2s;
   }
   
   #header.version-a .container {
      padding: 0px 15px;
   }
   
   #header.version-a .menu-toggle, #nav.version-a .menu-toggle.close {
      width: auto;
      padding: 0;
      font-size: 20px;
   }
   
   #nav.version-a {
      padding: 10px 30px 0 30px;
   }
   
   #secondary-header {
      margin-top: 55px;
      padding: 8px 0px 25px;
   }
                       
    #secondary-navigation_box li a {
      width: 100px;
      padding: 2px 14px;
      font-size: 12px;
    }
    
}

/*
////////////////////////////////////////////////////////////////////////// 
//
// 05. FOOTER (SOCIAL, NAVIGATION)
//
////////////////////////////////////////////////////////////////////////// 
*/



#footer {
    background: #151515;
    width: 100%;
    height: auto;
    color: #969696;
    padding: 10px 0;
    vertical-align: middle;
    z-index: 1000;
    font-size: 14px;
    line-height: 1.5em;
}

#footer.short {
   background: #F1F1F1;
   color: #808080;
}

#footer .row {
    padding: 40px 0;
    vertical-align: middle;
    display: block;
    clear: both;
}


/*--------------------- SIGNUP BAR ---------------------*/

#footer .row#signup {
    display: block;
    clear: both;
    margin: -10px 0 0 0;
    padding: 30px 0px;
    background: #1c1c1c;
    vertical-align: middle;
    /*border-bottom: 1px solid #333;*/
}

#footer .row#signup p {
    float: left;
    margin: 0;
    line-height: 40px;
}

#footer .row#signup .btn {
    float: right;
    margin: 0 0 0 25px;
}

/*--------------------- SOCIAL ---------------------*/

#footer .row#social  {
    padding: 60px 0 0 0;
}

#footer .row#social ul {
    float: left;
    text-align: left;
}

#footer .row#social ul li {
    display: inline-block;
    list-style: none;
    margin-right: 3px;
}

#footer .row#social ul li img {
    width: 52px;
    margin-bottom: 0;
}

#footer .row#social a#bbb {
    float: right;
    display: inline-block;
}

#footer .row#social a#bbb img {
    width: 165px;
}

/*--------------------- CONTENT HIGHLIGHTS ---------------------*/

#footer .row#content-highlights {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

#footer .row#content-highlights .highlights-image {
    float: left;
    width: 28.93%;
}

#footer .row#content-highlights .highlights-text {
    float: left;
    width: 64.47%;
    margin-left: 6.60%;
}

#footer .row#content-highlights h5 {
    margin: 5px 0 0;
    line-height: 1.1em;
}

#footer .row#content-highlights p {
    margin: 0;
}

#footer .row#content-highlights img {
    width: 100%;
    max-width: 160px;
    margin: -40px 0 -50px;
}

#footer .row#content-highlights img.blog {
    max-width: 115px;
}

/*--------------------- SITE MAP ---------------------*/


#footer .row#map {
    padding: 30px 0 0 0;
}

#footer .row#map h4#standard-heading {
    display: block;
    margin-left: -1px;
    font-size: 21px;
    letter-spacing: 0px;
    margin-bottom: 15px;
    font-weight: 500;
}

#footer .row#map h4#mobile-heading {
    display: none;
}

#footer .row#map li {
   margin-bottom: 7px;
}

#footer .row#map a {
   display: block;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2em;
}



/*--------------------- COPYRIGHT ---------------------*/

#footer .row#bottom {
    padding: 40px 0 15px;
}

#footer.short .row#bottom {
    padding: 15px 0;
}

#footer p#copyright, #footer ul#terms a, #footer ul#terms p {
    color: #FFF;
    font-size: 12px;
    line-height: 20px;
}

#footer p#copyright {
    display: inline-block;
    float: left;
    color: #666;
    height: 20px;
    margin: 20px 0 0;
    padding-top: 2px;
    vertical-align: middle;
}

#footer.short p#copyright, #footer.short ul#terms {
    color: #808080;
    margin: 0;
}

#footer.short ul#terms a {
    color: #009AC7;
}

#footer ul#terms {
    float: right;
    color: #666;
    margin: 20px 0 0;
    vertical-align: middle;
}

#footer ul#terms li:first-child {
    border: none;
    margin-left: 0px;
    padding-left: 0px;
}

#footer ul#terms li {
    display: inline-block;
    list-style: none;
    height: 20px;
    margin-left: 10px;
    border-left: 1px solid #333;
    padding-left: 10px;
}

#footer.short ul#terms li:last-child {
    border-left: 1px solid #808080;
}


/*--------------------- MOBILE ---------------------*/

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {
    
    #footer .row#signup p {
        line-height: 50px;
    }
    
    #footer .row#social img#bbb {
        float: left;
        margin-top: 25px;
    }
    
    #footer .row#content-highlights #highlights-content {
        margin-top: 25px;
    }
    
    #footer .row#content-highlights img {
        float: right;
        max-width: 120px;
        margin: -30px 20px 0px;
    }
    
    #footer .row#content-highlights .highlights-image {
        float: left;
        width: 31.21%;
    }
    
    #footer .row#content-highlights .highlights-text {
        float: left;
        width: 65.60%;
        margin-left: 3.19%;
    }
    
    #footer .row#map .col {
        min-height: 270px;
        margin-bottom: 30px;
    }
    
   #footer .row#map li {
      margin-bottom: 9px;
   }
    
    #footer .row#map a {
        font-size: 16px;
    }
       
}

@media only screen and (max-width : 850px),
only screen and (max-device-width : 850px) {

   #footer .row#social {
      padding: 40px 0 0 0;
   }

   #footer .row#map {
       display: none;
   }
   
   #footer .row#bottom {
      padding: 0px 0 15px;
   }

}

@media only screen and (max-width : 650px),
only screen and (max-device-width : 650px) {
    
    #footer .row#signup .container {
        text-align: center;
    }
    
    #footer .row#signup p {
        float: none;
        margin: 0;
        line-height: 1.3em;
    }

    #footer .row#signup .btn {
        float: none;
        margin: 15px auto 0 auto;
    }
    
    #footer .row#social .container {
        text-align: center;
    }
    
    #footer .row#social ul {
        float: none;
        text-align: center;
    }
    
   #footer .row#social ul li {
      margin-right: 0;
   }
    
   #footer .row#social ul li img {
      width: 40px;
   }
    
    #footer .row#social a#bbb {
        clear: both;
        float: none;
        margin: 20px auto 0 auto;
    }
    
   #footer .row#social a#bbb img {
      width: 130px;
   }
    
   #footer p#copyright, #footer ul#terms {
      display: block;
      float: none;
      margin: 0;
      text-align: center;
   }
    
}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
  
    #footer .row#social a#bbb {
        float: none;
        margin: 15px auto 0 auto;
    }
    
    #footer .row#map {
        margin-top: 40px;
        padding: 0;
        border-top: 1px solid #333;
    }
    
    #footer .row#map .container {
        width: 100%;
        max-width: 100%;
    }
    
    #footer .row#map .col {
        min-height: 0;
        border-bottom: 1px solid #333;
    }

    #footer .row#map .col.active {
        background: #222;
        border-bottom: 1px solid #333;
        padding-bottom: 0;
        transition: background .3s;
        -webkit-transition: background .3s; /* Safari */
    }
    
    #footer .row#map .span-2 {
        width: 100%;
        margin: 0;
/*        padding: 20px 0;*/
    }
    
    #footer .row#map h4#standard-heading {
        display: none;
    }
    
    #footer .row#map h4#mobile-heading {
        display: block;
        margin: 0 7.25%;
        padding: 20px 0;
        font-size: 21px;
        letter-spacing: 0px;
        font-weight: 500;
        background: url(../upload/images/plus_icon_grey.png) 100% 50% no-repeat;
        background-size: 18px 18px;
        cursor: pointer;
        transition: background .3s;
        -webkit-transition: background .3s; /* Safari */
    }
    
    #footer .row#map h4#mobile-heading:hover, #footer .row#map h4#mobile-heading:active {
        color: #FFF;
        transition: color .3s;
        -webkit-transition: color .3s; /* Safari */
    }
    
    #footer .row#map .col.active h4#mobile-heading {
        color: #FFF;
        font-weight: 700;
        background: url(../upload/images/minus_icon_white.png) 100% 50% no-repeat;
        background-size: 18px 18px;
        transition: background .3s;
        -webkit-transition: background .3s; /* Safari */
    }
  
    #footer .row#map ul {
        display: none;
        margin: 0;
    }
    
   #footer .row#map ul li {
      margin-bottom: 0;
   }
    
    #footer .row#map ul li a {
        display: block;
        height: 55px;
        padding: 0 7.25%;
        color: #FFF;
        background: #222 url(../upload/images/arrow_right.png) 92.7% 50% no-repeat;
        border-top: 1px solid #333;
        border-radius: 3px;
        font-size: 18px;
        font-weight: 300;
        line-height: 55px;
        text-align: left;
    }
    
    #footer .row#map ul li a:hover, #footer .row#map ul li a:active {
        background: #333 url(../upload/images/arrow_right.png) 93.7% 50% no-repeat;
        transition: background .3s;
        text-decoration: none;
    }

}



/*
////////////////////////////////////////////////////////////////////////// 
//
// 06. MISC ELEMENTS
//
////////////////////////////////////////////////////////////////////////// 
*/

/*--------------------- CONTENT ELEMENTS ---------------------*/

body.globe-graphic {
   background: #F9F9F9 url('../upload/images/background_globe-grey.png');
   background-attachment: fixed;
   background-position: top center;
   background-repeat: no-repeat;
}

body.globe-graphic #content {
   background: transparent;
}

.jump-anchor {
   position: absolute;
   top: -120px;
}

.horizontal-rule {
    display: block;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 30px;
    border-top: 1px solid #E6E6E6;
}

.grid-element {
    padding: 15px 0;
    color: #FFF;
    background: #CCC;
    text-align: center;
    border-radius: 3px;
}

img.column-image {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 10px auto 30px auto;    
}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {

   body.globe-graphic {
      background-size: 900px;
      background-position: 30% 0%;
   }
   
}

/*--------------------- CHAT ---------------------*/

.live_chat_btn {
    display: block;
    position: fixed;
    top: 300px;
    left: 0px;
    width: 40px;
    height: 120px;
    background: url(../upload/images/button_live-chat.png) 0% 0% no-repeat;
    border: 0px none;
    cursor: pointer;
    transition: background, color, .3s;
    -webkit-transition: background, color, .3s; /* Safari */
}

.live_chat_btn:hover {
    background: url(../upload/images/button_live-chat_hover.png) 0% 0% no-repeat;
    cursor: pointer;
    transition: background, color, .3s;
    -webkit-transition: background, color, .3s; /* Safari */
}

/*--------------------- COUNTRY FLAGS ---------------------*/

.country.ico {
   display: block;
   float: left;
   width: 30px;
   height: 20px;
   margin: 5px 0 5px 7px;
   background: url('../upload/images/sprite_flags.png') 0 0 no-repeat;
   overflow: hidden;
}

.country.ico-AX { background-position: -30px 0; }
.country.ico-AF { background-position: -60px 0; }
.country.ico-AL { background-position: -90px 0; }
.country.ico-DZ { background-position: -120px 0; }

.country.ico-AS { background-position: -0px -20px; }
.country.ico-AN { background-position: -30px -20px; }
.country.ico-AO { background-position: -60px -20px; }
.country.ico-AI { background-position: -90px -20px; }
.country.ico-AQ { background-position: -120px -20px; }

.country.ico-AG { background-position: -0px -40px; }
.country.ico-AR { background-position: -30px -40px; }
.country.ico-AM { background-position: -60px -40px; }
.country.ico-AW { background-position: -90px -40px; }
.country.ico-AU { background-position: -120px -40px; }

.country.ico-AT { background-position: -0px -60px; }
.country.ico-AZ { background-position: -30px -60px; }
.country.ico-BS { background-position: -60px -60px; }
.country.ico-BH { background-position: -90px -60px; }
.country.ico-BD { background-position: -120px -60px; }

.country.ico-BB { background-position: -0px -80px; }
.country.ico-BY { background-position: -30px -80px; }
.country.ico-BE { background-position: -60px -80px; }
.country.ico-BZ { background-position: -90px -80px; }
.country.ico-BJ { background-position: -120px -80px; }

.country.ico-BM { background-position: -0px -100px; }
.country.ico-BT { background-position: -30px -100px; }
.country.ico-BO { background-position: -60px -100px; }
.country.ico-BQ { background-position: -90px -100px; }
.country.ico-BA { background-position: -120px -100px; }

.country.ico-BV { background-position: -0px -120px; }
.country.ico-BW { background-position: -30px -120px; }
.country.ico-BR { background-position: -60px -120px; }
.country.ico-IO { background-position: -90px -120px; }
.country.ico-BN { background-position: -120px -120px; }

.country.ico-BG { background-position: -0px -140px; }
.country.ico-BF { background-position: -30px -140px; }
.country.ico-BI { background-position: -60px -140px; }
.country.ico-KH { background-position: -90px -140px; }
.country.ico-CM { background-position: -120px -140px; }

.country.ico-CA { background-position: -0px -160px; }
.country.ico-CV { background-position: -30px -160px; }
.country.ico-KY { background-position: -60px -160px; }
.country.ico-CF { background-position: -90px -160px; }
.country.ico-TD { background-position: -120px -160px; }

.country.ico-CL { background-position: -0px -180px; }
.country.ico-CN { background-position: -30px -180px; }
.country.ico-CX { background-position: -60px -180px; }
.country.ico-CC { background-position: -90px -180px; }
.country.ico-CO { background-position: -120px -180px }

.country.ico-KM { background-position: -0px -200px }
.country.ico-CG { background-position: -30px -200px }
.country.ico-CD { background-position: -60px -200px }
.country.ico-CK { background-position: -90px -200px }
.country.ico-CR { background-position: -120px -200px }

.country.ico-CI { background-position: -0px -220px }
.country.ico-HR { background-position: -30px -220px }
.country.ico-CU { background-position: -60px -220px }
.country.ico-CY { background-position: -90px -220px }
.country.ico-CZ { background-position: -120px -220px }

.country.ico-DK { background-position: -0px -240px }
.country.ico-DJ { background-position: -30px -240px }
.country.ico-DM { background-position: -60px -240px }
.country.ico-DO { background-position: -90px -240px }
.country.ico-EC { background-position: -120px -240px }

.country.ico-EG { background-position: -0px -260px }
.country.ico-SV { background-position: -30px -260px }
.country.ico-GQ { background-position: -60px -260px }
.country.ico-ER { background-position: -90px -260px }
.country.ico-EE { background-position: -120px -260px }

.country.ico-ET { background-position: -0px -280px }
.country.ico-FK { background-position: -30px -280px }
.country.ico-FO { background-position: -60px -280px }
.country.ico-FJ { background-position: -90px -280px }
.country.ico-FI { background-position: -120px -280px }

.country.ico-FR { background-position: -0px -300px }
.country.ico-GY { background-position: -30px -300px }
.country.ico-PF { background-position: -60px -300px }
.country.ico-TF { background-position: -90px -300px }
.country.ico-GA { background-position: -120px -300px }

.country.ico-GB { background-position: -0px -320px }
.country.ico-GE { background-position: -30px -320px }
.country.ico-DE { background-position: -60px -320px }
.country.ico-GH { background-position: -90px -320px }
.country.ico-GI { background-position: -120px -320px }

.country.ico-GR { background-position: -0px -340px }
.country.ico-GL { background-position: -30px -340px }
.country.ico-GD { background-position: -60px -340px }
.country.ico-GP { background-position: -90px -340px }
.country.ico-GU { background-position: -120px -340px }

.country.ico-GT { background-position: -0px -360px }
.country.ico-GG { background-position: -30px -360px }
.country.ico-GN { background-position: -60px -360px }
.country.ico-GW { background-position: -90px -360px }
.country.ico-GY { background-position: -120px -360px }

.country.ico-HT { background-position: -0px -380px }
.country.ico-HM { background-position: -30px -380px }
.country.ico-HN { background-position: -60px -380px }
.country.ico-HK { background-position: -90px -380px }
.country.ico-HU { background-position: -120px -380px }

.country.ico-IS { background-position: -0px -400px }
.country.ico-IN { background-position: -30px -400px }
.country.ico-ID { background-position: -60px -400px }
.country.ico-IR { background-position: -90px -400px }
.country.ico-IQ { background-position: -120px -400px }

.country.ico-IE { background-position: -0px -420px }
.country.ico-IM { background-position: -30px -420px }
.country.ico-IL { background-position: -60px -420px }
.country.ico-IT { background-position: -90px -420px }
.country.ico-JM { background-position: -120px -420px }

.country.ico-JP { background-position: -0px -440px }
.country.ico-JE { background-position: -30px -440px }
.country.ico-JO { background-position: -60px -440px }
.country.ico-KZ { background-position: -90px -440px }
.country.ico-KE { background-position: -120px -440px }

.country.ico-KI { background-position: -0px -460px }
.country.ico-KP { background-position: -30px -460px }
.country.ico-KR { background-position: -60px -460px }
.country.ico-KS { background-position: -90px -460px }
.country.ico-KW { background-position: -120px -460px }

.country.ico-KG { background-position: -0px -480px }
.country.ico-LA { background-position: -30px -480px }
.country.ico-LV { background-position: -60px -480px }
.country.ico-LB { background-position: -90px -480px }
.country.ico-LS { background-position: -120px -480px }

.country.ico-LR { background-position: -0px -500px }
.country.ico-LY { background-position: -30px -500px }
.country.ico-LI { background-position: -60px -500px }
.country.ico-LT { background-position: -90px -500px }
.country.ico-LU { background-position: -120px -500px }

.country.ico-MO { background-position: -0px -520px }
.country.ico-MK { background-position: -30px -520px }
.country.ico-MG { background-position: -60px -520px }
.country.ico-MW { background-position: -90px -520px }
.country.ico-MY { background-position: -120px -520px }

.country.ico-MV { background-position: -0px -540px }
.country.ico-ML { background-position: -30px -540px }
.country.ico-MT { background-position: -60px -540px }
.country.ico-MH { background-position: -90px -540px }
.country.ico-MQ { background-position: -120px -540px }

.country.ico-MR { background-position: -0px -560px }
.country.ico-MU { background-position: -30px -560px }
.country.ico-YT { background-position: -60px -560px }
.country.ico-MX { background-position: -90px -560px }
.country.ico-FM { background-position: -120px -560px }

.country.ico-MD { background-position: -0px -580px }
.country.ico-MC { background-position: -30px -580px }
.country.ico-MN { background-position: -60px -580px }
.country.ico-ME { background-position: -90px -580px }
.country.ico-MS { background-position: -120px -580px }

.country.ico-MA { background-position: -0px -600px }
.country.ico-MZ { background-position: -30px -600px }
.country.ico-MM { background-position: -60px -600px }
.country.ico-NA { background-position: -90px -600px }
.country.ico-NR { background-position: -120px -600px }

.country.ico-NP { background-position: -0px -620px }
.country.ico-NL { background-position: -30px -620px }
.country.ico-AN { background-position: -60px -620px }
.country.ico-NC { background-position: -90px -620px }
.country.ico-NZ { background-position: -120px -620px }

.country.ico-NI { background-position: -0px -640px }
.country.ico-NE { background-position: -30px -640px }
.country.ico-NG { background-position: -60px -640px }
.country.ico-NU { background-position: -90px -640px }
.country.ico-NF { background-position: -120px -640px }

.country.ico-MP { background-position: -0px -660px }
.country.ico-NO { background-position: -30px -660px }
.country.ico-OM { background-position: -60px -660px }
.country.ico-PK { background-position: -90px -660px }
.country.ico-PW { background-position: -120px -660px }

.country.ico-PS { background-position: -0px -680px }
.country.ico-PA { background-position: -30px -680px }
.country.ico-PG { background-position: -60px -680px }
.country.ico-PY { background-position: -90px -680px }
.country.ico-PE { background-position: -120px -680px }

.country.ico-PH { background-position: -0px -700px }
.country.ico-PN { background-position: -30px -700px }
.country.ico-PL { background-position: -60px -700px }
.country.ico-PT { background-position: -90px -700px }
.country.ico-PR { background-position: -120px -700px }

.country.ico-QA { background-position: -0px -720px }
.country.ico-RE { background-position: -30px -720px }
.country.ico-RO { background-position: -60px -720px }
.country.ico-RU { background-position: -90px -720px }
.country.ico-RW { background-position: -120px -720px }

.country.ico-SH { background-position: -0px -740px }
.country.ico-KN { background-position: -30px -740px }
.country.ico-LA { background-position: -60px -740px }
.country.ico-PM { background-position: -90px -740px }
.country.ico-VC { background-position: -120px -740px }

.country.ico-WS { background-position: -0px -760px }
.country.ico-SM { background-position: -30px -760px }
.country.ico-ST { background-position: -60px -760px }
.country.ico-SA { background-position: -90px -760px }
.country.ico-SN { background-position: -120px -760px }

.country.ico-RS { background-position: -0px -780px }
.country.ico-CS { background-position: -30px -780px }
.country.ico-SC { background-position: -60px -780px }
.country.ico-SL { background-position: -90px -780px }
.country.ico-SG { background-position: -120px -780px }

.country.ico-SK { background-position: -0px -800px }
.country.ico-SI { background-position: -30px -800px }
.country.ico-SB { background-position: -60px -800px }
.country.ico-SO { background-position: -90px -800px }
.country.ico-ZA { background-position: -120px -800px }

.country.ico-GS { background-position: -0px -820px }
.country.ico-ES { background-position: -30px -820px }
.country.ico-LK { background-position: -60px -820px }
.country.ico-SD { background-position: -90px -820px }
.country.ico-SR { background-position: -120px -820px }

.country.ico-SJ { background-position: -0px -840px }
.country.ico-SZ { background-position: -30px -840px }
.country.ico-SE { background-position: -60px -840px }
.country.ico-CH { background-position: -90px -840px }
.country.ico-SY { background-position: -120px -840px }

.country.ico-TW { background-position: -0px -860px }
.country.ico-TJ { background-position: -30px -860px }
.country.ico-TZ { background-position: -60px -860px }
.country.ico-TH { background-position: -90px -860px }
.country.ico-TL { background-position: -120px -860px }

.country.ico-TG { background-position: -0px -880px }
.country.ico-TK { background-position: -30px -880px }
.country.ico-TO { background-position: -60px -880px }
.country.ico-TT { background-position: -90px -880px }
.country.ico-TN { background-position: -120px -880px }

.country.ico-TR { background-position: -0px -900px }
.country.ico-TM { background-position: -30px -900px }
.country.ico-TC { background-position: -60px -900px }
.country.ico-TV { background-position: -90px -900px }
.country.ico-UG { background-position: -120px -900px }

.country.ico-UA { background-position: -0px -920px }
.country.ico-AE { background-position: -30px -920px }
.country.ico-GB { background-position: -60px -920px }
.country.ico-US { background-position: -90px -920px }
.country.ico-UM { background-position: -120px -920px }

.country.ico-UY { background-position: -0px -940px }
.country.ico-UZ { background-position: -30px -940px }
.country.ico-VU { background-position: -60px -940px }
.country.ico-VA { background-position: -90px -940px }
.country.ico-VE { background-position: -120px -940px }

.country.ico-VN { background-position: -0px -960px }
.country.ico-VG { background-position: -30px -960px }
.country.ico-VI { background-position: -60px -960px }
.country.ico-WF { background-position: -90px -960px }
.country.ico-EH { background-position: -120px -960px }

.country.ico-YE { background-position: -0px -980px }
.country.ico-YU { background-position: -30px -980px }
.country.ico-CD { background-position: -60px -980px }
.country.ico-ZM { background-position: -90px -980px }
.country.ico-ZW { background-position: -120px -980px }

/*--------------------- FEATURE CARDS ---------------------*/

.feature-cards .container {
   max-width: 1000px;
}

.feature-cards .span-4:nth-child(5) {
   clear: both;
}

.feature-cards .span-4 p {
   margin-bottom: 10px;
   font-size: 16px;
}

.feature-cards .span-4 a.cta img {
   display: block;
   float: left;
   margin: 0 -40px 0 0;
   border: 1px solid #BFBFBF;
}

.feature-cards .span-4 a.cta span {
   display: block;
   float: left;
   padding-left: 40px;
   font-size: 14px;
   line-height: 1.2em;
}

.feature-cards img {
   display: block;
   margin: 55px auto 20px;
}

.feature-cards h2 {
   font-weight: 700;
   font-size: 24px;
   line-height: 1.2em;
   margin-bottom: 10px;
   text-align: center;
}

@media only screen and (max-width : 1100px),
only screen and (max-device-width : 1100px) {

   .feature-cards {
      padding-top: 30px;
   }

   .feature-cards .container {
      max-width: 750px;
   }
   
   .feature-cards h2 {
      font-size: 19px;
      letter-spacing: 0;
   }
   
   .feature-cards .span-4 p {
      font-size: 14px;
   }
   
   .feature-cards img.feature-icon {
      width: 70px;
      margin-top: 35px;
   }

}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

   .feature-cards {
      padding-top: 20px;
   }
   
   .feature-cards .span-4 {
      width: 45.48%;
   }
   
   .feature-cards .span-4:nth-child(even) {
      clear: both;
   }

   .feature-cards .span-4:nth-child(5) {
      clear: none;
   }
   
}

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

   .feature-cards .container {
      max-width: 550px;
   }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {

   .feature-cards {
      padding-top: 20px;
   }

   .feature-cards .container {
      max-width: 280px;
   }

   .feature-cards .span-4 {
      width: 90%;
   }
   
   .feature-cards img.feature-icon {
      width: 55px;
      margin: 20px auto 8px;
   }
   
   .feature-cards .span-4 a.cta img {
      margin: 0 -30px 0 0;
      width: 20px;
   }
   
   .feature-cards .span-4 a.cta span {
      padding-left: 30px;
   }

}

/*--------------------- FEATURE VERTICALS ---------------------*/

.feature-verticals {
   display: block;
   max-width: 600px;
   margin: 40px auto 0;
}

.feature-verticals .column {
   float: left;
   width: 50%;
   background: #FFF;
}

.feature-verticals .column:first-child {
   border-right: 1px solid #F9F9F9;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

.feature-verticals .column .heading {
   padding: 20px 20px 0 20px;
   text-align: center;
}

.feature-verticals .column:nth-child(1) .heading {
   color: #98DDD3;
   background: #44BBA6;
}

.feature-verticals .column:nth-child(2) .heading {
   color: #C4A2EC;
   background: #9855D8;
}

.feature-verticals .column .heading h5 {
   margin-bottom: 5px;
   color: #FFF;
}

.feature-verticals .column .heading span {
   display: block;
   font-family: times;
   font-style: italic;
   font-size: 15px;
   line-height: 19px;
}

.feature-verticals .column .heading img {
   display: block;
   margin: 5px auto 0;
}

.feature-verticals .column .content  {
   padding: 25px 30px;
}

.feature-verticals .column .content span {
   display: block;
   height: 85px;
   font-size: 14px;
   line-height: 1.5em;
}

.feature-verticals .column .content ul  {
   height: 161px;
   margin: 20px 0 !important;
}

.feature-verticals .column .content ul li  {
   margin-bottom: 10px !important;
   padding: 5px 0 0 35px;
   list-style: none !important;
   background: url(../upload/images/icon_star.png) top left no-repeat;
   font-size: 16px;
   line-height: 21px;
}

.feature-verticals .column .content a.btn {
   display: block;
   width: 115px;
   margin: 35px auto 25px;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

   .feature-verticals .column .heading span {
      height: 60px;
   }
   
   .feature-verticals .column .content span {
      height: 85px;
   }

}

@media only screen and (max-width : 650px),
only screen and (max-device-width : 650px) {

   .feature-verticals .column .heading img {
      width: 120px;
   }
   
   .feature-verticals .column .heading span {
      font-size: 14px;
      line-height: 18px;
   }
   
   .feature-verticals .column .content {
      padding: 15px 20px;
   }
   
   .feature-verticals .column .content span {
      font-size: 13px;
   }
   
   .feature-verticals .column .content ul {
      height: 145px;
   }
   
   .feature-verticals .column .content ul li {
      padding: 5px 0 0 30px;
      background-size: 25px;
      font-size: 14px;
      line-height: 18px;
   }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {

   .feature-verticals .column .heading {
      padding: 13px 11px 0 11px;
   }
   
   .feature-verticals .column .heading h5 {
      margin-bottom: 0px;
      font-size: 18px;
   }

   .feature-verticals .column .heading img {
      width: 80px;
   }
   
   .feature-verticals .column .heading span {
      display: none;
      height: 40px;
      font-size: 11px;
      line-height: 13px;
   }
   
   .feature-verticals .column .content {
      padding: 10px 12px;
   }
   
   .feature-verticals .column .content span {
      font-size: 11px;
      line-height: 1.3em;
      height: 85px;
   }
   
   .feature-verticals .column .content ul {
      height: 110px;;
      margin: 10px 0 !important;
   }
   
   .feature-verticals .column .content ul li {
      margin-bottom: 5px !important;
      padding: 4px 0 0 22px;
      background-size: 20px;
      font-size: 11px;
      line-height: 1.3em;
   }
   
   .feature-verticals .column .content a.btn {
      width: 105px;
      font-size: 12px;
   }

}

/*--------------------- QUARTER LIST ---------------------*/

#quarter-list h2 {
    margin-bottom: 40px;
}

#quarter-list img {
    float: left;
    max-width: 30%
}

#quarter-list .span-6 div {
    float: left;
    width: 62%;
    margin-left: 8%;    
}

#quarter-list .span-6 {
    margin-bottom: 30px;
}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
    
    #quarter-list img {
        float: none;
        display: block;
        max-width: 100%;
        margin: 15px auto;
    }
    
    #quarter-list .span-6 div {
        float: none;
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
    
     #quarter-list .span-6 {
        margin-bottom: 20px;
    }   
    
}

/*--------------------- VIDEO ---------------------*/

.video-wrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-wrapper.wistia {
    padding-top: 0;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*--------------------- DEVELOPER CTA/BAR ---------------------*/

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {

   #developer-cta img {
      width: 70px;
      margin-bottom: 5px;
   }

   #developer-cta h3 {
      font-size: 18px;
      letter-spacing: 0;
      margin-bottom: 5px;
   }
   
   #developer-cta span {
      font-size: 14px;
      line-height: 1.3em;
   }

}


/*--------------------- SIGNUP/CONTACT BAR ---------------------*/

#signup-bar.row, #contact-bar.row, #subscribe-bar.row {
    padding: 35px 0;
}

#signup-bar.row .btn, #contact-bar.row .btn {
   float: left;
}

#subscribe-bar.row .btn {
   float: right;
   margin-top: 5px;
}

#subscribe-bar.row input[type="text"] {
   float: right;
   margin: 5px 7px 0 0;
   height: 40px;
}

#signup-bar.row p, #contact-bar.row p {
   float: right;
   margin: 5px 0 0 0;
}

@media only screen and (max-width : 1130px),
only screen and (max-device-width : 1130px) {

      #subscribe-bar.row .btn, #subscribe-bar.row input[type="text"] {
         margin-top: 15px;
      }

}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

      #signup-bar.row .btn, #contact-bar.row .btn, #signup-bar.row p, #contact-bar.row p {
         float: none;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
      }
      
      #signup-bar.row .btn, #contact-bar.row .btn {
         width: 270px;
         display: block;
      }
      
      #signup-bar.row p, #contact-bar.row p {
         margin-top: 0;
         margin-bottom: 20px;
      }
      
       #subscribe-bar.row #subscribe {
          width: 435px;
          max-width: 100%;
          margin: 5px auto 0;
       }
       
      #subscribe-bar.row span {
         display: block;
         width: 435px;
          max-width: 100%;
          margin: 0 auto;
      }
       
      #subscribe-bar.row input[type="text"] {
         height: 50px;
         padding-left: 12px;
      }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
  
      #signup-bar.row .btn, #contact-bar.row .btn {
         width: 100%;
      }
      
      
       #subscribe-bar.row .btn {
         float: left;
         width: 100%;
         margin-top: 70px;
      }
      
       #subscribe-bar.row input[type="text"] {
         float: left;
         width: 100%;
         max-width: none;
         margin-top: -110px;
      }

}


/*--------------------- SEARCH/TICKET BAR ---------------------*/

#search-bar.row, #ticket-bar.row {
    padding: 45px 0;
}

#search-bar .container {
    margin-top: 15px;
    margin-bottom: 15px;
}

#search-bar h3, #ticket-bar h3 {
    float: left;
    margin: 5px 0 0 0;
}

#search-bar .form-group, #ticket-bar .form-group {
    float: none;
    height: auto;
    max-width: none;
    padding-right: 175px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

#search-bar .form-group input[type="submit"], #ticket-bar a {
    float: right;
    width: 165px;
    margin-right: -175px;
    height: 58px;
    border-radius: 29px;
    line-height: 60px;
}

#ticket-bar a {
    width: 230px;
    margin-right: 0;
    height: 48px;
    line-height: 48px;
}

#search-bar .form-group input[type="text"] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 60px;
    padding-left: 18px;
    font-size: 21px;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {
    
    #search-bar h3, #ticket-bar h3 {
        margin: 5px 0 10px 0;
    }
    
    #search-bar.row {
        padding: 125px 0 5px !important;
    }
    
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px) {

    #search-bar.row {
        padding: 85px 0 5px !important;
    }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
    
    #search-bar.row {
        padding: 85px 0 20px !important;
    }

    #search-bar .form-group {
        padding-right: 0;
    }

    #search-bar .form-group input[type="submit"], #ticket-bar a {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    
    #search-bar .form-group input[type="text"] {
        float: none;
        width: 100%;
        margin-bottom: 10px;
    }
    
}

/*--------------------- QUESTIONS BAR ---------------------*/

#questions.row .csr {
    margin-top: -150px;
    margin-bottom: -60px;
    overflow: hidden;
}

#questions.row .csr img {
    float: right;
    width: 600px;
    max-width: 600px;
    margin: -10px -50px -60px auto;
}

@media only screen and (max-width : 1100px),
only screen and (max-device-width : 1100px) {
    
    #questions.row .csr {
        margin-top: -110px;
    }

    #questions.row .csr img {
        width: 500px;
        margin: -10px -20px -35px auto;
    }   
    
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {
    
    #questions.row .csr {
        display: none;
    }
    
}

/*--------------------- SANDBOX-DEMO BAR ---------------------*/

#sandbox-demo {
   padding: 0;
}

#sandbox-demo .cta {
   float: left;
   width: 50%;
   padding: 50px 6% 50px 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

#sandbox-demo .cta:nth-child(2) {
   padding: 50px 0 50px 6%;
   border-left: 1px solid #E6E6E6;
}

#sandbox-demo .cta img {
   float: left;
   width: 30px;
   margin: 0;
}

#sandbox-demo .cta .content {
   padding-left: 55px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

#sandbox-demo .cta .content h5, #sandbox-demo .cta .content p {
   margin-bottom: 0;
}

@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px) {

   #sandbox-demo .cta {
      width: 100%;
      padding: 40px 0 15px;
      text-align: center;
   }
   
   #sandbox-demo .cta:nth-child(2) {
      width: 100%;
      padding: 15px 0 40px;
      border: none;
      text-align: center;
   }
   
   #sandbox-demo .cta img {
      float: none;
      margin: 0 auto;
   }
   
   #sandbox-demo .cta .content {
      padding-left: 0;
   }

}


/*--------------------- SEARCH BOX ---------------------*/

#search-box input, #search-box a.btn {
    float: none;
    width: 100%;
    max-width: 315px;
    min-width: 0;
    margin-bottom: 10px;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {
    
    #search-box {
        width: 93.96%;
    }
    
    #search-box input, #search-box a.btn {
        float: left;
        max-width: 40%;
        height: 40px;
    }
    
    #search-box a.btn {
        width: auto;
        margin-left: 2%;
        line-height: 40px;
    }
    
}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {
       
    #search-box input, #search-box a.btn {
        float: none;
        width: 100%;
        max-width: 100%;
        height: 40px;
        margin-bottom: 10px;
        margin-left: 0;
        
    }
    
}

/*--------------------- BACK TO TOP ---------------------*/

a#backtotop {
    display:none;
    position: fixed;
    top: 141px;
    right: 1.9%;
    width: 50px;
    height: 22px;
    padding-top: 28px;
    color: #FFF;
    background: #1A1A1A url(../upload/images/arrow_backtotop.png) 50% 8px no-repeat;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1em;
    text-decoration:none;
    z-index:1000;
}

a#backtotop:hover {
    background: #009AC7 url(../upload/images/arrow_backtotop.png) 50% 8px no-repeat;
    transition: background-color .3s;
    -webkit-transition: background-color .3s; /* Safari */
}

a#backtotop:active {
    background: #00657F url(../upload/images/arrow_backtotop.png) 50% 8px no-repeat;
    transition: background-color .3s;
    -webkit-transition: background-color .3s; /* Safari */
}


/*--------------------- GIST CODE EMBED ---------------------*/

.gist .gist-file span, .gist .gist-file p {
    font-family: "Courier", monospace;
    font-size: 14px;
}

.gist .gist-file table {
    width: 100%;
    padding-bottom: 0;
}

.gist .gist-file tbody {
    border: none;
    border-color: transparent;
}

.gist .gist-file tr, .gist .gist-file td {
    border: none;
    border-color: transparent;
}

.gist .gist-file .line-data {
    background-color: #FAFAFA;
}

.gist .gist-file .line-numbers {
    color: #009AC7 !important;
}

.gist .gist-file .line-numbers, .gist .gist-meta {
    background-color: #F0F0F0 !important;
}


/*
////////////////////////////////////////////////////////////////////////// 
//
// 07. SIDEBAR NAVIGATION
//
////////////////////////////////////////////////////////////////////////// 
*/

#documentation.container {
   position: relative;
}

#nav-sidebar {
    border-right: 1px solid #e6e6e6;
    margin-top: -60px;
    padding: 0 0 1000px 0;
}

#nav-sidebar-menu {
   display: none;
   width: 100px;
   height: 45px;
   margin-bottom: 60px;
   padding-left: 15px;
   color: #FFF;
   background: #009AC7 url(../upload/images/arrow_down_darkblue.png) 87% 55% no-repeat;
   background-size: 22px;
   border-radius: 6px;
   font-size: 18px;
   font-weight: 700;
   line-height: 45px;
   cursor: pointer;
}

#nav-sidebar-menu.active {
   background: #009AC7 url(../upload/images/arrow_up_darkblue.png) 87% 49% no-repeat;
   background-size: 22px;
   border-radius: 6px 6px 0 0;
}


#nav-sidebar ul, #nav-sidebar li {
    margin: 0 !important;
    list-style: none !important;
}

ul#nav-parent {
   position: relative;
   z-index: 1000;
    list-style:none;
    display:block;
    width: 100%;
    margin-top: 50px !important;
    color: #999999;
}

#nav-parent a {
    display: inline-block;
}
 
#nav-parent li span, #nav-parent li, #nav-parent li.active ul li {
    clear: both;
    min-height: 35px;
    line-height: 35px;
    color: #999999;
    font-size: 16px;
    font-weight: 300;
    cursor: default;
    vertical-align: middle;
}

#nav-parent .expand {
    cursor: pointer;
}

#nav-parent li span.top-nav {
    color: #1A1A1A;
    font-size: 18px;
}

#nav-parent li.active {
    margin-bottom: 30px;
}

#nav-parent li.active span.top-nav {
    font-weight: 700; 
}
  
#nav-parent li i {
    color: #AAA;
    font-weight: 300;
    line-height: 1em;
}

#nav-parent li ul {
    display:none;
    list-style-type:none;
}

#nav-parent .expand {
    display: inline-block;
    width: 65%;
}

span.goto {
    float: right;
    display: inline-block;
    margin-right: 20px;
}

.icon-goto {
    display: inline-block;
    float:right;
    width: 30px;
    height: 30px; 
    background: url(./upload/images/double_arrow_right_light-grey.png) 0px 70% no-repeat;
    line-height: 30px;
    text-align: center;
}

.top-nav .icon-goto  {
    color: #1A1A1A !important;
    background: url(./upload/images/double_arrow_right_black.png) 0px 70% no-repeat;
}

.goto a:hover .icon-goto: {
    background: url(./upload/images/double_arrow_right_light-grey.png) 2px 70% no-repeat;
}

.goto.top-nav a:hover .icon-goto: {
    background: url(./upload/images/double_arrow_right_black.png) 2px 70% no-repeat;
}

.icon-plus {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: -22px;
    padding-left: 5px;
    background: url(./upload/images/plus_icon_light-grey.png) 4% 50% no-repeat;
    background-size: 13px auto;
    font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
}

.icon-minus {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: -22px;
    padding-left: 5px;
    background: url(./upload/images/minus_icon_light-grey.png) 4% 50% no-repeat;
    background-size: 13px auto;
    font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
}

.top-nav .icon-plus {
    background: url(./upload/images/plus_icon_black.png) 4% 50% no-repeat;
    background-size: 13px auto;
}

.top-nav .icon-minus {
    background: url(./upload/images/minus_icon_black.png) 4% 50% no-repeat;
    background-size: 13px auto;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

   #nav-sidebar {
      display: none;
      position: absolute;
      top: 110px;
      left: 0px;
      width: 450px;
      max-width: 93.96%;
      padding: 0px;
      background: none;
      border: none;
   }
   
   #nav-parent {
      margin-top: 0px;
      color: #FFF;
   }
 
   #nav-parent li {
      padding: 8px 0 8px 40px;
      border-top: 1px solid #FFF;
      background: #009AC7;
   }
   
   #nav-parent li.active, #nav-parent li.active ul li {
      background: #00718F;
   }
   
   #nav-parent li span, #nav-parent li, #nav-parent li.active ul li {
      color: #A7D5E3;
   }

   #nav-parent li.active {
      padding-bottom: 0px;
   }

   #nav-parent li.active ul {
      margin-top: 8px;
   }
  
   #nav-parent li.active ul li {
      margin-left: -55px;
      border-top: 1px solid #00617B;
   }

   #nav-parent li:first-child {
      border-radius: 0 6px 0 0;
   }
   
   #nav-parent li:last-child {
      border-radius: 0 0 6px 6px;
   }
   
   #nav-parent li span.top-nav {
      color: #FFF;
      font-size: 21px;
   }
   
   .icon-plus {
       background: url(./upload/images/plus_icon_light-blue.png) 4% 50% no-repeat;
       background-size: 13px auto;
   }
   
   .icon-minus {
       background: url(./upload/images/minus_icon_light-blue.png) 4% 50% no-repeat;
       background-size: 13px auto;
   }
   
   .top-nav .icon-plus {
       background: url(./upload/images/plus_icon_extra-light-grey.png) 4% 50% no-repeat;
       background-size: 13px auto;
   }
   
   .top-nav .icon-minus {
       background: url(./upload/images/minus_icon_white.png) 4% 50% no-repeat;
       background-size: 13px auto;
   }
   
   .icon-goto {
       background: url(./upload/images/double_arrow_right_light-blue.png) 50% 80% no-repeat;
      background-size: 21px;
   }
   
   .top-nav .icon-goto  {
       background: url(./upload/images/double_arrow_right_white.png) 50% 80% no-repeat;
       background-size: 21px;
   }
   
   #nav-sidebar-menu {
      display: block;
   }

}

@media only screen and (max-width : 500px),
only screen and (max-device-width : 500px) {

    #nav-sidebar {
        max-width: 90%;
    }
   
    #nav-sidebar-menu {
        width: 90%;
        background: #009AC7 url(../upload/images/arrow_down_darkblue.png) 95% 55% no-repeat;
        background-size: 29px;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    #nav-sidebar-menu.active {
        width: 90%;
        background: #009AC7 url(../upload/images/arrow_up_darkblue.png) 95% 49% no-repeat;
        background-size: 29px;
        border-radius: 3px 3px 0 0;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    
   #nav-parent li:first-child {
      border-radius: 0;
   }

}

/*
////////////////////////////////////////////////////////////////////////// 
//
// 08. SHOPPING CART ELEMENTS
//
////////////////////////////////////////////////////////////////////////// 
*/

/*--------------------- LIST VIEW ---------------------*/

.cart {
    float: left;
    width: 135px;
    height: 115px;
    margin-right: 1.44%;
    margin-bottom: 15px;
}

.cart a {
    display: block;
}

.cart a p {
    font-size: 14px;
    line-height: 1.3em;
    margin-bottom: 0 !important;
}

.no-cart.error {
    text-align: center;  
}

#cart-filter {
   padding: 30px 0 35px;
}

.shopping-cart-filter {
   display: block;
   max-width: 650px;
   margin: 0 auto;
}

.shopping-cart-filter h5 {
   float: left;
   margin: 14px 35px 0 0;
   line-height: 40px;
}

.shopping-cart-filter .form-group:nth-child(2) {
   width: 220px;
   min-height: 0;
   margin-bottom: 0;
}

.shopping-cart-filter .form-group:nth-child(3) {
   width: 300px;
   min-height: 0;
   margin-left: 30px;
   margin-bottom: 0;
}

.shopping-cart-filter select {
    display: inline-block;
    float: none;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin-right: 0;
    padding: 8px;
}

.shopping-cart-filter .filter-selector {
   display: inline-block;
   margin: 8px 15px 0 0;
}

.shopping-cart-filter label.filter {
   display: inline-block;
   color: #333;
   font-size: 16px;
   font-weight: 300;
   line-height: 20px;
}

.shopping-cart-filter input[type=checkbox] {
   margin: 5px 5px 0 0;
   vertical-align: top;
}

ul#checkout-integration, ul#checkout-integration li {
    list-style: none !important;
}

ul#checkout-integration img {
   max-width: 207px;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

    .cart img {
        margin-bottom: 0;
    }

   #cart-filter {
      padding: 30px 0 10px;
   }

   .shopping-cart-filter {
      max-width: 300px;
   }

   .shopping-cart-filter h5 {
      float: none;
      margin: 0 0 10px;
      line-height: 1.2em;
   }
   
   .shopping-cart-filter .form-group:nth-child(2), .shopping-cart-filter .form-group:nth-child(3) {
      width: 100%;
      margin: 0 0 15px 0;
   }
   
   .shopping-cart-filter .filter-selector {
      margin: 0px 15px 0 0;
   }

}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px) {
    
    .cart {
        margin-right: 4%;
    }
      
    .shopping-cart-filter {
        display: block;
        max-width: 610px;
        margin: 0 auto;
    }
    
    .shopping-cart-filter select {
        width: 100%;
        max-width: none;
        height: 45px;
        margin-right: 0;
        padding: 11px;
    }
    
}

/*--------------------- CART PAGE ---------------------*/

#integration li {
    font-size: 18px;
}

#integration li p.small {
    margin-top: 10px;
    padding: 15px 17px;
    color: #666;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    font-size: 14px;
}

ul#checkout-integration {
    margin-bottom: 30px;
}

ul#checkout-integration:after {
  content: "";
  display: table;
  clear: both;
}

ul#checkout-integration li {
    margin-bottom: 7px;
}

ul#checkout-integration li img {
    margin-bottom: 0;
}

@media only screen and (max-width : 900px),
only screen and (max-device-width : 900px) {

    ul#checkout-integration li {
        float: left;
        margin-right: 15px;
    }
    
}

*
////////////////////////////////////////////////////////////////////////// 
//
// 08. POPUP
//
////////////////////////////////////////////////////////////////////////// 
*/

.overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #000;
   opacity: 0.75;
   z-index: 110000;
   display:none;
}

.popup-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 110050;
   display:none;
}

.popup {
   width: 320px;
   margin: 100px auto;
   padding: 35px;
   background: #FFF;
   border: 10px solid #000;
   border: 10px solid rgba(0,0,0, .50);
   border-radius: 6px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.popup-header {
   display: block;
   position: relative;
   margin: -35px -35px 30px -35px;
   padding: 13px 20px 11px;
   background: #f1f1f1;
   border-bottom: 1px solid #d2d2d1;
}

.popup-header .close {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   background-image: url(../upload/images/icon_close.png);
   background-repeat: no-repeat;
   background-position: center center;
   border-left: 1px solid #d2d2d1;
   width: 49px;
   height: 49px;
   line-height: 49px;
   overflow: hidden;
   text-indent: -9999px;
   text-shadow: none;
   cursor: pointer;
}

.popup-header .close:hover {
   background-color: #DEDEDE;
}

/*--------------------- STICKY POPUP ---------------------*/

.popup.sticky {
   position: fixed;
   right: 50px;
   bottom: 0px;
   margin: 0 auto -10px;
   background: #FFF;
   -moz-background-clip: padding;
   -webkit-background-clip: padding;
   background-clip: padding-box;
   display: none;
}

@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px) {

   .popup.sticky {
      right: 15%;
      width: 70%;
      margin: 0 -35px -10px;
      padding: 25px 25px 35px 25px;
   }
   
   .popup.sticky .popup-header {
      margin: -25px -25px 25px -25px;
   }

}

@media only screen and (max-width: 460px),
only screen and (max-device-width: 460px) {

   .popup {
      width: 220px;
      margin: 40px auto;
      padding: 25px;
   }
   
   .popup-header {
      margin: -25px -25px 30px -25px;
   }

}