/* styles to override template edit mode styles and are shared by all templates ********************************/
.asset header#top-nav{margin-bottom:33px;}
header#top-nav #logoContainer{padding-top:11px; z-index:10;}

/* position element statically once placed in DOM */
.static-position-width-full {
  position: static !important;
  width: 100% !important;
  height: auto !important;
}

div#outerWrapDiv {
  overflow: hidden;
}

.background {
  display: none;
}

.auto-height {
  height: auto !important;
  min-height: 100% !important;
}

img {
  height: auto !important;
  width: auto !important;
}

.asset-preview {
  text-align: center;
}

.asset-preview img,
.asset-preview-left img {
  max-height: 530px !important;
}

.static-position-width-auto {
  position: static !important;
  width: auto !important;
}


/* form styles */
/* --- material floating label --- */

.mktoFieldWrap label {
  display: none;
}

div#innerWrapDiv,
div#mktFooter {
  height: auto !important;
}

/* video page common */
.video .mktoForm .mktoCheckboxList, 
.video .mktoForm .mktoLabel, 
.video .mktoForm .mktoRadioList {
  color: #222;
}

.video #video-slot,
.video #main-content-slot {
  height: auto !important;
  position: relative;
}

.video .video-asset{text-align:center;}
.video .video-asset{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video .video-asset iframe,
.video .video-asset object,
.video .video-asset embed{position:absolute;top:0;left:0;width:100%;height:100%;}

/* hide elements that should only be present on the video reg page */
.arrow-box {
  display: none;
}

#video-teaser {
  display: none;
}

/* video registration page styles only */

.asset-registration #video-teaser {
  display: block;
}

.asset-registration #main-content-slot {
  padding-bottom: 0;
}

.asset-registration #main-content-slot .container {
  background: #f2f2f2;
  border: 15px solid #FFF;
  border-width: 15px 15px 0 15px;
  position: relative;
  box-sizing: border-box;
  padding: 40px 40px 30px 40px;
  margin-top: -305px;
  z-index: 10;
}

.asset-registration .arrow-box {
  position: absolute;
  background: #008cdb;
  color: #F2F2F2;
  display: block;
  box-sizing: border-box;
  padding: 20px;
  top: -135px;
  left: 0 !important;
  right: 0 !important;
  width: 85% !important;
  text-align: center;
  margin: 0 auto;
  z-index: 100 !important;
  transition: all 0.3s ease;
}

.asset-registration .arrow-box h4,
.asset-registration .arrow-box h5 {
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 130%;
  text-align: center;
}
.asset-registration .arrow-box:after, 
.asset-registration .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.asset-registration .arrow-box:after {
  border-color: rgba(0, 140, 219, 0);
  border-top-color: #008cdb;
  border-width: 30px;
  margin-left: -30px;
}
.asset-registration .arrow-box:before {
  border-color: rgba(194, 225, 245, 0);
  border-top-color: #c2e1f5;
  border-width: 36px;
  margin-left: -36px;
}

.video-fulfillment .right-column {
  background: #FFF;
  box-sizing: border-box;
  height: auto !important;
  padding: 30px;
  margin-top: -100px;
}

.video-fulfillment #video-slot {
  padding-bottom: 100px;
}

.event-template.video-fulfillment #video-slot {
  padding-bottom: 0 !important;
}

/* footer styles */

#footerLeft .footer-left {
  height: auto !important;
}

#footerLeft .footer-left h2 {
  font-weight: normal;
}

#headerRight,
.header-right ul li, 
.top-navigation ul li {
  transition: all 0.3s ease; 
}

/* social section */

.footer__sociallink{display:inline-block;width:3.5rem;height:3.5rem;padding:.5rem;fill:#fff;margin-top:1rem;margin-left:.3rem;margin-right:.3rem;border:3px solid #fff;border-radius:50%;-webkit-transition:background-color .1s ease-in-out,fill .1s ease-in-out;transition:background-color .1s ease-in-out,fill .1s ease-in-out}.footer__sociallink:hover{background-color:#fff;fill:#353535}

.footer-social h3 {color: #fff}

/* chinese social */

img.qr-img{display:none;position:absolute;top:2.5em;left:0.75em;max-width:120px;border-radius:4px;}
a.qr-code:hover img[title="wechat-qrcode"]{display:block;}

/* media queries */

@media only screen and (min-width:1200px){.container{width:1100px;}}
@media only screen and (max-width:991px){
  .Form_1{max-width:450px; margin:0 auto;}
  #fr-p{font-size:0.75em;}span.fr-social-icons-mobile img{width:2.25em;}}
  .asset-registration .arrow-box {
    top: -160px !important;
  }
@media only screen and (max-width:767px) {
  .container {
    max-width: 100%;
  }
  
  .video.asset-registration #rightColumn {
    margin-top: 175px;
  }
  
  #video-container {
    padding-bottom: 30px;
  }
  
  .video-fulfillment .right-column {
    margin-top: 40px;
  }
  
  .video-fulfillment #video-slot {
    padding-bottom: 35px;
  }
  
  #linkContainer {
    display: none;
  }
  
  .footer-left {
    text-align: center !important;
  }
   .footer-social h3 {padding-top: 1em;}
   
  header#top-nav .title-block h1{font-size:32px;}#footerLeft .footer-left,#footerRight .footer-right{text-align:center;}span.fr-social-icons-desktop,span.cn-social-icons-desktop{display:none;}span.fr-social-icons-mobile,span.cn-social-icons-mobile{display:inline-block;}#cn-p{margin-left:4em;}
 
 /* white paper asset page only */
   .asset #leftColumn {
     border-top: 1px solid #31a2e1;
     margin-top: 35px;
     padding-top: 40px;
     padding-bottom: 40px;
   }
   
   .asset header#top-nav #logoContainer {
     float: none;
     margin-left: auto;
     margin-right: auto;
   }
}

@media only screen and (max-width: 620px) {
  #logoContainer{display:inline-block;float:none!important;}
  
  #headerRight {
    float: none !important;
    margin-left: -25px;
    width: auto;
  }
  
  header.navbar,
  header.navbar .navbar-inner .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  
  header#top-nav.navbar {
    padding: .5rem .3rem .5rem .6rem;
  }
  
  #pageHeaderContainer {
    top: 25%;
  }
  
  .header-right ul, .top-navigation ul {
    display: table;
    width: 100%;
  }
  .header-right ul li, .top-navigation ul li {
    display: table-cell;
    width: 25%;
  }
  
  .header-right ul li a, .top-navigation ul li a {
    font-size: 16px;
    padding: 4px 5px;
  }
  
  .header-right ul li a#cta-link, .top-navigation ul li a#cta-link {
    padding: 2px 5px 4px 5px;
  }
  
  /* if basic template keep the sign up around ... */
  body.basic #logoContainer {
    float: left !important;
  }
  
  body.basic #logo-white {
    max-width: 165px !important;
  }
  
  body.basic #headerRight {
    float: right !important;
    margin-right: 10px;
  }
  
  body.basic .header-right ul li, 
  body.basic .top-navigation ul li {
    width: auto !important;
  }
  
  #video-slot {
    background: none;
  }
}

@media only screen and (max-width: 585px) {
  .asset-registration #main-content-slot .container {
    margin-top: -35%;
  }
  
  .footer-legal-left,
  .footer-legal-right {
    float: none;
    padding: 15px 0;
    text-align: center;
  }
}

@media only screen and (max-width: 480px) {
  .mktoForm input[type=url], 
  .mktoForm input[type=text], 
  .mktoForm input[type=date], 
  .mktoForm input[type=tel], 
  .mktoForm input[type=email], 
  .mktoForm input[type=number] {
    height: auto !important;
    padding: 7px !important;
  }
}

/* Landscape phones and smaller */
@media (max-width:480px){
  #pageTitle .title h1{font-size:1.70rem!important;}
  #pageTitle .title h2{font-size:1.25rem!important;}
  #pageHeaderContainer { top: 30%; }
  #pageSubtitle .subtitle {font-size: 17.5px;}
  DIV#mktColumnContent { padding: 15px 15px 1px 15px !important; }
  .Form_1{padding:15px 10px 15px 10px;}.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix{float:right!important;padding-left:5px!important;}}