/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

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

   html {
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    min-height: 100%;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-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;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  *{
    box-sizing: border-box;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
  }
  
  html, body {
    margin: 0;
    height: 100%;
    
  }
  
  body{
    overflow-x: hidden;
  }
  
  html::-webkit-scrollbar {
    width: 10px;
    cursor: ns-resize;
  }
  
  /* Track */
  html::-webkit-scrollbar-track {
    background: #1E1E1E
  }
  
  /* Handle */
  html::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
  }
  
  /* Handle on hover */
  html::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  a{
    text-decoration: none;
  }
  
  p{
    font-size: 0.9rem;
  }
  
  h2{
    font-size: 1.8rem;
  }
  
  .wrapper {
    min-height: 100%;
    /*height: 100%; calc(100% - 80px);*/
    background: #050a17 url(../img/background.jpg) center bottom no-repeat;
    background-size: 100%;
    display: flex;
    min-width: 1190px;
  }
  
  .wrapper.login{
    height: auto;
  }
  
  .insidecontent {
    height: 100%;
    width: 100%;
    padding-bottom: 100px;
  }
  
  
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
      outline: none;
  }
  
  .darkblue{
    color:#0E458B
  }
  
  .bluesummit{
    color:#1781FF
  }
  
  .darkgrey{
    color:#232731
  }
  
  .lightgrey{
    color:#D0DCE8
  }
  
  b, strong {
    font-weight: 600;
  }
  
  .inputtext{
    background: rgba(0, 0, 0, .3);
    padding: 15px 30px;
    border: 1px solid #cccccc;
    border-radius: 50px;
    display: block;
    margin: 20px auto;
    font-weight: 300;
    line-height: 1rem;
    min-width: 300px;
    color: #fff;
    transition: all .3s ease-in;
  }
  
  .inputtext:hover{
    background: rgba(255, 255, 255, .1);
  }
  
  ::placeholder {
    color: rgba(255, 255, 255, .5);
    font-weight: 300;
  }
  
  #footer{
    background: #1781FF;
    padding: 0px 40px 0 130px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    z-index: 3;
    height: 40px;
  }
  
  #footer.home{
    position: fixed;
  }
  
  #footer.cart{
    padding-left: clamp(530px, 33vw, 700px);
  }
  
  #footer p{
    font-size: 0.8rem;
  }
  
  #footer img{
    width: 89px;
  }
  
  #login{
    width: 100%;
    padding: 80px 20px;
    text-align: center;
    margin: auto;
  }
  
  #login img{
    width: 240px;
    margin-bottom: 20px;
  }
  
  #login h1{
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: 60px;
  }
  
  #login a{
    color: white;
    text-decoration: underline;
  }
  
  .btn-validate{
    background: #ffffff;
    padding: 15px 20px;
    border: 1px solid #ffffff;
    border-radius: 30px;
    display: block;
    font-weight: 500;
    min-width: 150px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease-in;
    overflow: hidden;
    position: relative;
    line-height: 1rem;
    text-align: center;
    font-size: 0.9rem;
    
  }
  
  .btn-validate:hover, .btn-blue:hover{
    background: #1781FF;
    border: 1px solid #1781FF;
    color:white;
  }
  
  .btn-validate::after{
    content: "";
    background: transparent url(../img/ico_arrow.svg) center center no-repeat;
    background-size: 50%;
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 13px;
    transition: all .3s ease-in;
    left: 71%;
    top: 16px;
  }
  
  .btn-validate:hover::after{
    left: 120%;
  }
  
  .btn-blue{
    color: #1781FF;
    background: rgba(0, 0, 0, .3);
    padding: 15px 40px;
    border: 1px solid #1781FF;
    border-radius: 30px;
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease-in;
    overflow: hidden;
    position: relative;
    line-height: 1rem;
    text-align: center;
    font-size: 0.9rem;
  }
  
  .btn-back::before{
    content: "";
    background: transparent url(../img/ico_arrow.svg) center center no-repeat;
    background-size: 50%;
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 13px;
    transition: all .3s ease-in;
    left: 10%;
    top: 16px;
    transform: rotate(180deg);
  }
  
  .btn-back:hover::before{
    left: -50%;
  }
  
  #login .btn-validate{
    margin: 40px auto 20px auto;
  }
  
  #login .link{
    text-transform: uppercase;
    text-decoration: underline;
    text-shadow: #050a17 1px 1px 3px;
  }
  
  .link{
    transition: all .3s ease-in;
  }
  
  .link:hover{
    color: white;
  }
  
  #nav{
    background: #1E1E1E;
    padding: 25px 0 0 20px;
    height: 100%;
    width: 90px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    min-height: auto;
    overflow-y: scroll;
    scrollbar-color:  rgba(255, 255, 255, 0.2) #1E1E1E;
    scrollbar-width: thin;
    z-index: 3;
  }
  
  #nav::-webkit-scrollbar {
    width: 10px;
    cursor: ns-resize;
  }
  /* Track */
  #nav::-webkit-scrollbar-track {
    background: #1E1E1E
  }
  /* Handle */
  #nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
  }
  /* Handle on hover */
  #nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  #nav-logo{
    width: 60px;
    margin: auto 0 0 -10px;
  }
  
  #nav-menu{
    margin: 45px auto 0;
    padding: 0;
    width: 50px;
  }
  
  #nav-menu li{
    list-style: none;
    display: block;
  }
  
  #nav-menu .nav-item{
    width: 40px;
    height: 40px;
    display: block;
    transition: all .2s ease-in;
    margin-bottom: 20px;
    border-radius: 10px;
    background-size:100%;
    cursor: pointer;
  }
  
  #nav-item-1{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-1.svg) center center no-repeat;
  }
  
  #nav-item-2{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-2.svg) center center no-repeat;
  }
  
  #nav-item-3{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-3.svg) center center no-repeat;
  }
  
  #nav-item-4{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-4.svg) center center no-repeat;
  }
  
  #nav-item-5{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-5.svg) center center no-repeat;
  }
  
  #nav-item-6{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-6.svg) center center no-repeat;
  }
  
  #nav-item-7{
    background: rgba(255, 255, 255, .2) url(../img/menu-item-7.svg) center center no-repeat;
  }
  
  
  #nav-menu .nav-item:hover, #nav-menu .nav-item.active{
    background-color: #1781FF ;
  }
  
  #nav-menu .nav-item:hover{
    background-size: 130%;
  }
  
  #top{
    width: calc(100% - 90px);
    background-color: black;
    position: fixed;
    top: 0;
    left: 90px;
    display: flex;
    align-items: center;
    padding: 20px 40px;
    font-weight: 300;
    height: 100px;
    z-index: 3;
    min-width: 1000px;
  }
  
  #top.transparent{
    background: none;
  }
  
  #currency{
    margin-right: 30px;
    margin-top: 5px;
  }
  
  #currency a{
    margin-right: 2px;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    background: rgba(0, 0, 0, .3);
    padding: 7px 12px;
    border-radius: 30px;
    display: inline-block;
    font-weight: 500;
    min-width: 62px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease-in;
    overflow: hidden;
    position: relative;
    line-height: 1rem;
    text-align: center;
    font-size: 0.65rem;
  }
  
  #currency a:hover{
    color: #FFFFFF!important;
    border: 1px solid #1781FF!important;
    background: #1781FF;
  }
  
  #currency a.active{
    color: #1781FF;
    border: 1px solid #1781FF;
  }
  
  #cta{
    margin-left: auto;
  }
  
  #cta a, #cta button{
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
  }
  
  #breadcrumb a{
   margin: 0 10px;
   font-size: 0.85rem;
  }
  
  #breadcrumb a.active{
    color: #1781FF;
    font-weight: 400;
  }
  
  #main{
    top: 100px;
    position: relative;
  }
  
  #cart{
    width: 25vw;
    max-width: 500px;
    min-width: 400px;
    background-color: black;
    position: fixed;
    top: 100px;
    left: 90px;
    height: calc( 100% - 100px );
    overflow-y: scroll;
    scrollbar-color:  rgba(255, 255, 255, 0.2) black;
    scrollbar-width: thin;
    padding: 33px 30px 33px 40px;
    z-index: 3;
  }
  
  #cart::-webkit-scrollbar {
    width: 10px;
    cursor: ns-resize;
  }
  /* Track */
  #cart::-webkit-scrollbar-track {
    background: black
  }
  /* Handle */
  #cart::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
  }
  /* Handle on hover */
  #cart::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .cart-category{
    background-color: #0E458B;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  
  .cart-category h2{
    padding: 0;
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #1781FF;
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
  
  .cart-category p{
    padding: 0px 0 0 60px;
    margin: 0;
    font-size: 0.9rem;
  }
  
  #cart-category-1::before{
    content: "";
    display: inline-block;
    width: 60px;
    height: 31px;
    background: transparent url(../img/logo_inspire.png) center center no-repeat;
    background-size: 50%;
    vertical-align: initial;
    margin-bottom: -8px;
  }
  
  #cart-category-2::before{
    content: "";
    display: inline-block;
    width: 60px;
    height: 31px;
    background: transparent url(../img/logo_connect.png) center center no-repeat;
    background-size: 70%;
    vertical-align: initial;
    margin-bottom: -8px;
  }
  
  #cart-category-3::before{
    content: "";
    display: inline-block;
    width: 60px;
    height: 31px;
    background: transparent url(../img/logo_act.png) left center no-repeat;
    background-size: 84%;
    vertical-align: initial;
    margin-bottom: -8px;
  }
  
  .cart-item{
    background-color: #112138;
    padding: 20px 120px 20px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
  }
  
  .cart-item p{
    color: #1781FF;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
  }
  
  .cart-item span{
    text-transform: uppercase;
    font-weight: 400;
  }
  
  .cart-item a{
    text-decoration: underline;
    font-weight: 400;
    cursor: pointer;
    color: #1781FF;
    white-space: nowrap;
  }
  
  .cart-item a:hover{
    color:white
  }
  
  .cart-item em{
    font-style: normal;
  }
  
  .cart-remove{
    background: #1781FF url(../img/ico_close.svg) center center no-repeat;
    background-size: 10px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    right: 15px;
    top: 33%;
    cursor: pointer;
    transition: all .2s ease-in;
  }
  
  .cart-item .cart-partnership::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float: left;
  }
  
  .cart-item .cart-partnership.silver::before{
    background: transparent url(../img/ico-silver.svg) center center no-repeat;
    background-size: 100%;
  }
  
  .cart-item .cart-partnership.gold::before{
    background: transparent url(../img/ico-gold.svg) center center no-repeat;
    background-size: 100%;
  }
  
  .cart-item .cart-partnership.platinum::before{
    background: transparent url(../img/ico-platinum.svg) center center no-repeat;
    background-size: 100%;
  }
  
  .cart-item .cart-partnership.diamond::before{
    background: transparent url(../img/ico-diamond.svg) center center no-repeat;
    background-size: 100%;
  }
  
  .cart-item.nopadding{
    padding-right: 10px;
  }
  
  .cart-item.margintop{
    margin-top: 50px;
  }
  
  
  .cart-remove:hover{
    background-size: 15px;
  }
  
  .cart-total{
    padding: 0px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: baseline;
  }
  
  .card-total-number{
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
  }
  
  .card-total-number em{
    font-style: normal;
    font-size: 1.6rem;
  }
  
  #main-content{
    padding: 100px 0 0 0px;
    min-height: calc( 100vh - 140px);
  }
  
  #main-content.cart{
    padding: 33px 0 15vw 530px;
    padding-left: clamp(530px, 33vw, 700px);
  }
  
  .content-category{
    margin-bottom: 40px;
  }
  
  .content-category h2{
    padding: 0;
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #1781FF;
    font-size: 2.4rem;
    line-height: 2.5rem;
  }
  
  .content-category p{
    padding: 0px 0 0 140px;
    margin: 0;
    font-size: 0.9rem;
  }
  
  .content-category #content-category-p1{
    padding-left: 92px;
  }
  
  .content-category #content-category-p2{
    padding-left: 117px;
  }
  
  .content-category #content-category-p3{
    padding-left: 117px;
  }
  
  
  #content-category-1::before{
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    background: transparent url(../img/logo_inspire.png) left center no-repeat;
    background-size: 100%;
    vertical-align: initial;
    margin-bottom: -25px;
    margin-right: 30px;
  }
  
  #content-category-2::before{
    content: "";
    display: inline-block;
    width: 85px;
    height: 60px;
    background: transparent url(../img/logo_connect.png) left center no-repeat;
    background-size: 100%;
    vertical-align: initial;
    margin-bottom: -25px;
    margin-right: 30px;
  }
  
  #content-category-3::before{
    content: "";
    display: inline-block;
    width: 90px;
    height: 63px;
    background: transparent url(../img/logo_act.png) left center no-repeat;
    background-size: 100%;
    vertical-align: initial;
    margin-bottom: -25px;
    margin-right: 30px;
  }
  
  .content-cards{
    margin-bottom: 30px;
    margin-top: 60px;
  }
  
  .content-cards:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .card{
    width: 20vw;
    max-width: 360px;
    min-width: 330px;
    display: block;
    float: left;
    border-radius: 12px;
    background-color: #232731;
    margin: 0 2vw 2vw 0;
    font-size: 0.9rem;
    position: relative;
  }
  
  .card.noheight{
    height: auto;
    padding-bottom: 30px;
  }

  .card.proposalcard{
    height: auto;
    padding-bottom: 30px;
    min-height: 330px;
  }
  
  .card-goal{
    border-bottom: 12px solid #1781FF;
    padding: 30px;
  }
  
  .card-goal.active{
    background-color: #0E458B;
  }
  
  .card-goal p{
    margin-top: 0;
    margin-bottom: 15px;
    min-height: 60px;
  }
  
  .btn-card{
    border-radius: 25px;
    border: 1px solid #1781FF;
    color: white;
    padding: 3px 15px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
    transition: all .3s ease-in;
    text-transform: initial;
    font-weight: 300;
    background: none;
    outline: none;
    cursor: pointer;
  }
  
  .btn-card:hover{
    color: #FFFFFF;
    border: 1px solid #1781FF;
    background: #1781FF;
  }
  
  .btn-card.btn-select{
    color: #FFFFFF;
    border: 1px solid #1781FF;
    background: #1781FF;
    min-width: 100px;
  }
  
  .btn-card.btn-select:hover, .btn-card.btn-select.selected{
    color: #1781FF;
    border: 1px solid #FFFFFF;
    background: #FFFFFF;
  }
  
  .card-asset{
    height: 540px;
  }
  
  .card-asset.recommended .card-asset-content .btn-card.btn-select{
    border: 1px solid #2B8B7A;
    background: #2B8B7A;
  }
  
  .card-asset.recommended .card-asset-content .btn-card.btn-select:hover{
    color: #2B8B7A;
    border: 1px solid #FFFFFF;
    background: #FFFFFF;
  }
  
  .card-asset-header{
    padding: 10px 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1781FF;
    min-height: 75px;
    border-radius: 12px 12px 0 0;
  }
  
  .card-asset.active .card-asset-header{
    background-color: #1781FF;
  }
  
  .card-asset.recommended .card-asset-header{
    background-color:#2B8B7A;
    border-bottom: 1px solid #2B8B7A;
  } 
  
  .card-asset-header h3{
    padding: 0 10px 0 0;
    margin: 0;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1rem;
  }
  .card-asset-header p{
    padding: 0;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
  }
  
  .card-asset-content{
    padding: 30px;
  }
  
  .card-asset-content h4{
    padding: 0;
    margin: 0 0 20px 0;
    color: #1781FF;
    font-size: 1rem;
  }
  
  .card-asset.recommended .card-asset-content h4{
    color:#2B8B7A;
  } 
  
  .card-asset-content p{
    padding: 0;
    margin: 0 0 20px 0;
  }
  
  .card-asset-content > div{
    max-height: 180px;
    overflow: hidden;
  }
  
  
  .card-asset-content .btn-card{
    margin-top: 20px;
  }
  
  .card-asset.recommended .card-asset-content .btn-card{
    border-color:#2B8B7A;
  } 
  
  .card-asset.recommended .card-asset-content .btn-card:hover{
    background-color:#2B8B7A;
  } 
  
  .card-asset.card-package{
    max-width: 470px;
    width: 50vw;
    height: 335px;
  }
  
  .card-asset.card-package .card-asset-btn {
    left: auto;
    right: 30px;
  }
  
  .tags{
    display: block;
  }
  
  .tag {
    border-radius: 25px;
    background: rgba(23, 129, 255, 0.1);
    color: #1781FF;
    padding: 3px 6px;
    width: auto;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 0.8rem;
    transition: all .3s ease-in;
    margin: 0 1px 10px 0;
  }
  
  .tag.ico:before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 2px;
    vertical-align: bottom;
    margin-left: -5px;
  }
  
  .tag.ico-group::before{
    background: transparent url(../img/ico-group.svg) center center no-repeat;
    background-size: 17px;
  }
  .tag.ico-time::before{
    background: transparent url(../img/ico-time.svg) center center no-repeat;
    background-size: 17px;
  }
  .tag.ico-chat::before{
    background: transparent url(../img/ico-chat.svg) center center no-repeat;
    background-size: 17px;
  }
  .tag.ico-clap::before{
    background: transparent url(../img/ico-clap.svg) center center no-repeat;
    background-size: 17px;
  }
  .tag.ico-stats::before{
    background: transparent url(../img/ico-stats.svg) center center no-repeat;
    background-size: 17px;
  }
  
  .card-asset.recommended .card-asset-content .tag{
    background: rgba(43, 139, 122, 0.1);
    color:#2B8B7A;
  } 
  
  .card-asset-btn{
    position: absolute;
    left: 30px;
    bottom: 20px;
  }
  
  .main-content-article{
    margin: -65px 9vw 0 130px;
    min-width: 1050px;
    width: 98%;
    padding-bottom: 25vw;
    max-width: 1200px;
  }
  
  
  
  #main-content.cart .main-content-article{
    margin: 0;
    min-width: auto;
  }
  
  .main-content-article header{
    position: relative;
    max-width: 970px;
    width: 69%;
    margin-bottom: 90px;
  }
  
  #main-content.cart header{
    max-width: 970px;
    width: 45vw;
  }
  
  .main-content-article header img{
    width: 100%;
  }
  
  .main-content-article header .tags{
    margin: 30px 0;
    width: 46vw;
  }
  
  #main-content.cart .main-content-article header .tags{
    width: 33vw;
  
  }
  
  #header-title{
    font-weight: 300;
    display: block;
    position: absolute;
    bottom: -40px;
    right: -23%;
    width: 36%;
    min-width: 330px;
    padding: 40px 30px;
    background-color: #1781FF;
    border-radius: 12px;
    
  }
  
  #header-title h2{
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
    font-weight: 400;
  }
  
  .main-content-text{
    width: 85%;
    max-width: 1200px;
  }
  
  .cart .main-content-text{
    width: calc( 100% - 40px );
  }
  
  .main-content-text p{
    padding: 0 20% 0 0;
  }
  
  .main-content-article.center{
    text-align: center;
    margin: auto;
    padding-bottom:80px;
  }
  
  .main-content-article.center.padding-bottom{
    padding-bottom: 25vw;
  }
  
  .main-content-article.center .main-content-text {
   margin: auto;
   width: 100%;
   max-width: 1100px;
  }
  
  .main-content-article.center .main-content-text h2{
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.3rem;
  }
  
  .main-content-article.center .main-content-text p{
    padding: 0;
  }
  
  .main-content-article.center .main-content-2col{
    width: 49%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding: 30px;
    margin-top: 50px;
  }
  
  .main-content-article.center .main-content-2col.visual{
    padding: 0px;
    position: relative;
  }
  
  .main-content-article.center .main-content-2col.visual img{
    width: 100%;
  }
  
  .main-content-article.center .main-content-2col.visual::after{
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    display: block;
    background:#1781FF;
    top: -30px;
    right: -30px;
    z-index: 1;
  }
  
  .overlap-text{
    font-weight: 300;
    display: block;
    position: absolute;
    width: 41%;
    min-width: 330px;
    padding: 40px 30px;
    background-color: #1781FF;
    border-radius: 12px;
    text-align: left;
  }
  
  .overlap-left{
    padding-left: 35%;
    position: relative;
    margin-bottom: 40px;
  }
  
  .overlap-left img{
    width: 95%;
  }
  
  .overlap-left .overlap-text{
    top: 90px;
    left: 5%;
  }
  
  .overlap-right{
    padding-right: 35%;
    position: relative;
    margin-bottom: 40px;
  }
  
  .overlap-right img{
    width: 85%;
  }
  
  .overlap-right .overlap-text{
    top: 35px;
    right: 5%;
  }
  
  .overlap-text h3{
    font-size: 1.6rem;
    text-transform: uppercase;
  }
  
  #table-partnership{
    width: 86%;
    max-width: 1200px;
    border-spacing : 0;
    border-collapse : collapse;
    margin-top: 40px;
    font-size: 0.9rem;
  }
  
  #main-content.cart #table-partnership{
    width: 56vw;
  }
  
  #table-partnership .type{
    background-color: rgba(25, 30, 41, .5);
    border-top: 15px solid transparent;
  }
  
  #table-partnership .type2{
    background-color: rgba(25, 30, 41, .3);
    border-top: 15px solid transparent;
  }
  
  #table-partnership .options{
   text-align: right;
   padding-right: 20px;
  }
  
  #table-partnership .select{
    background-color: rgba(25, 30, 41, 1);
    border-top: 15px solid #1781FF;
  }
  
  
  #table-partnership th{
    font-weight: 300;
  }
  
  #table-partnership thead th {
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    min-width: 110px;
    width: 15%;
    padding: 30px 0;
    border-bottom: 1px solid rgba(196, 196, 196, .1);
    color: #1781FF;
  }
  
  #table-partnership thead th.noborder{
    border-bottom: 0px;
  }
  
  #table-partnership tbody td{
    text-align: center;
    border-bottom: 1px solid rgba(196, 196, 196, .1);
    padding: 27px 0;
  }
  
  .redtext{
    color:red!important
  }
  
  #table-partnership .table-icon{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin: auto;
  }
  
  #table-partnership .table-icon.ico_check{
    background: transparent url(../img/ico_check.svg) center center no-repeat;
    background-size: 15px;
  }
  
  #table-partnership .table-icon.ico_none{
    background: transparent url(../img/ico_none.svg) center center no-repeat;
    background-size: 15px;
  }
  
  #table-partnership .parternship-price{
    color:#1781FF;
    font-weight: 300;
    font-size: 1.2rem;
  }
  
  #table-partnership em{
    font-style: normal;
    font-size: 0.8rem;
    line-height: 0.8rem;
  }
  
  #table-partnership.stock  {
    width: 88%;
  }
  
  #table-partnership.stock thead th  {
    width: 24%;
  }
  
  .spacer{
    height: 55px;
    display: block;
    width: 90%;
  }
  
  .bigtitle{
    font-weight: 300;
    font-size: 1.8rem;
    text-transform: uppercase;
    padding: 0;
    margin: 0px 0 0px 0;
  }
  
  .smalltitle{
    font-weight: 300;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 0;
    margin: 10px 0 60px 0;
  }
  
  .smalltitle strong{
    font-weight: 600;
  }
  
  .main-content-article hr{
    border:0;
    border-bottom: 1px solid #1781FF;
    background: none;
    width: calc( 100% - 140px );
  }
  
   .main-content-article .main-content-text hr{
    width: 100%;
    margin: 50px 0;
  }
  
  .main-content-article .main-content-text hr.small{
    max-width: 85px;
    margin: 50px auto;
  }
  
  .pricing-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc( 100% - 140px );
    font-size: 1.2rem;
    text-transform: uppercase;
  }
  
  .cart .pricing-info, .cart .pricing-total, .cart .main-content-article hr{
    width: calc( 100% - 40px );
  }
  
  .pricing-info span{
    display: inline-block;
    padding: 0 10px;
  }
  
  .pricing-total{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc( 100% - 140px );
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 10px 0;
    font-weight: 600;
    text-align: left;
  }
  
  .overlay-content .pricing-total{
    width: 100%;
  }
  
  .pricing-total .btn-card{
    margin-right: 0px;
    vertical-align: bottom;
  }
  
  .pricing-total.small{
    font-size: 1.1rem;
  }
  
  .pricing-total strong{
    letter-spacing: 0.3rem;
    color:#1781FF;
    font-weight: 400;
  }
  
  .bigtitle.silver, .bigtitle.gold, .bigtitle.platinum, .bigtitle.diamond{
    line-height: 35px;
    margin-bottom: 55px;
  }
  
  .bigtitle strong{
    font-size: 1.6rem;
    color:#1781FF;
  }
  
  .bigtitle.silver::before, .bigtitle.gold::before, .bigtitle.platinum::before, .bigtitle.diamond::before{
    content: "";
    display: inline-block;
    width: 70px;
    height: 70px;
    margin-right: 10px;
    float: left;
    border-radius: 12px;
  }
  .bigtitle.silver::before{
    background: rgba(0, 117, 255, .2) url(../img/ico-silver.svg) center center no-repeat;
    background-size: 40px
  }
  .bigtitle.gold::before{
    background: rgba(0, 117, 255, .2) url(../img/ico-gold.svg) center center no-repeat;
    background-size: 40px
  }
  .bigtitle.platinum::before{
    background: rgba(0, 117, 255, .2)  url(../img/ico-platinum.svg) center center no-repeat;
    background-size: 40px;
  }
  .bigtitle.diamond::before{
    background: rgba(0, 117, 255, .2)  url(../img/ico-diamond.svg) center center no-repeat;
    background-size: 40px;
  }
  
  .overlay {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.95);
    overflow-x: hidden;
    transition: 0.5s;
    scrollbar-color:  rgba(255, 255, 255, 0.2) black;
    scrollbar-width: thin;
  }
  
  .overlay::-webkit-scrollbar {
    width: 10px;
    cursor: ns-resize;
  }
  /* Track */
  .overlay::-webkit-scrollbar-track {
    background: black
  }
  
  
  .overlay::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
  }
  
  .overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .overlay-content {
    position: relative;
    top: 5%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding-bottom: 5%;
  }
  
  
  .overlay .closebtn {
    padding: 8px;
    text-decoration: none;
    color: #F1F1F1;
    display: block;
    transition: 0.3s;
    position: absolute;
    top: 20px;
    right: 45px;
    text-align: center;
    border: 1px solid #F1F1F1;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    background: transparent url(../img/ico_close.svg) center center no-repeat;
    background-size: 20px;
  }
  
  .overlay a:hover, .overlay a:focus {
    background-color: #1781FF;
    border: 1px solid #1781FF;
  }
  
  .overlay .btn-validate{
    margin: auto;
  }
  
  .overlay-form{
    text-align: center;
    max-width: 700px;
    margin: auto;
  }
  
  .overlay-form-logo{
    width: 180px;
    margin-bottom: 40px;
  }
  
  .overlay-form h2{
    color:white;
    font-weight:300;
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  
  .overlay-form.cols2 .inputtext{
    display: inline-block;
    margin: 10px;
  }
  
  
  .overlay-form.cols2 .inputtextarea{
    min-width: auto;
    width: calc( 92% - 20px);
    margin: 10px auto;
    min-height: 200px;
    border-radius: 30px;
  }
  .overlay-form .btn-blue, .overlay-form .btn-validate{
    width: 150px;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
  }
  
  .listing-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc( 100% - 140px );
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  
  .listing-menu a{
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
  
  .listing-menu a.active, .listing-menu a:hover{
    text-decoration: underline;
    color: #1781FF;
  }
  
  /* The container must be positioned relative: */
  .custom-select {
    position: relative;
    font-size: 0.9rem;
    text-transform: initial;
    display: inline-block;
  }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: transparent;
    color: #1781FF;
    border-radius: 25px;
    border: 1px solid #1781FF;
    color: #1781FF;
    padding: 10px 15px;
    display: inline-block;
    text-decoration: none;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 300;
    padding-right: 30px;
    min-width: 200px;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 20px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #1781FF transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #1781FF transparent;
    top: 12px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: #1781FF;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 12px;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .card-asset-header .custom-select {
    font-size: 0.7rem;
    text-transform: uppercase;
  }
  
  .card-asset-header .select-selected{
    font-size: 0.7rem;
    color: white;
    border: white;
    min-width: auto;
    width: 120px;
    padding: 0px;
  }
  
  .card-asset-header .select-selected:after{
    border-color: white transparent transparent transparent;
    top: 10px;
    right: -8px;
    border-width: 4px;
    position: relative;
  }
  
  .card-asset-header .select-items{
    left: -5px;
    top: 140%;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-radius: 0;
  }
  
  .card-asset-header .select-items div{
    padding: 8px 5px;
  }
  
  .mention{
    text-align: center;
    font-size: 0.9rem;
    padding: 30px;
  }
  
  #uuid{
    width: 100%;
    text-align: center;
  }
  
  #partnership_selection_partnership{ 
    display:none
  }
  
  .partnershipbenefits{
    display: flex;
    align-items:flex-start;
    justify-content: initial;
    width: calc( 100% - 140px );
    max-width: 1200px;
  }
  
  .partnershipbenefits > div{
    padding: 0 2%;
    background: transparent url(../img/border.png) right top no-repeat;
    background-size: 1px 100%;
    min-height: 420px;
    width: 33%;
  }
  
  .partnershipbenefits > div:first-child{
    padding-left: 0;
  }
  
  .partnershipbenefits > div:last-child{
    background: none;
  }
  
  .partnershipbenefits ul{
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
  }
  
  .partnershipbenefits li{
    list-style: none;
    margin-bottom: 20px;
  }
  
  .client-mosaic-content {
    min-height: 377px;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  .client-mosaic-content > div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 377px;
    z-index: 1;
    background: rgba(0,0,0,.7);
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  }
  
  .client-mosaic-content > div p{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30px;
    z-index: 2;
  }
  
  .client-mosaic-content > div p span{
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
  }
  
  header.nomargin{
    margin: -200px 0 0 0;
    width: 100%;
  }
  
  header.nomargin img{
    width: 100%;
  }
  
  #movinonvisuals{
    display: flex;
    align-items: flex-start;
    width: calc(100% - 90px);
    margin-left: 90px;
  }
  
  .movinonvisuals-content{
    width: 20%;
    max-height: 880px;
    height: 40vw;
    background-size: cover;
    background-position: center center;
    position: relative;
  }
  
  .movinonvisuals-content > div {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 30px;
    min-height: 220px;
  }
  
  .movinonvisuals-content h2{
    margin: 0;
    padding:0;
  }
  
  .colx3{
    display: flex;
    align-items: flex-start;
    justify-content: initial;
    margin: 50px;
  }
  
  .colx3 > div {
    width: 33%;
    padding: 30px;
    background: transparent url(../img/border.png) right top no-repeat;
    background-size: 1px 100%;
    min-height: 420px;
  }
  
  .colx3 > div:last-child{
    background: none;
  }
  
  .colx3 .quote{
    text-align: left;
    padding: 100px 30px 30px 30px;
  }
  
  .colx3 .quote::before{
    content: "";
    display: block;
    background: transparent url(../img/ico-quote.svg) 0px 0px no-repeat;
    background-size: 50px;
    width: 50px;
    height: 60px;
  }
  
  .quote-text{
    text-transform: uppercase;
    min-height: 100px;
  }
  
  .quote-author{
    font-weight: bold;
  }
  .quote-author em{
    font-weight: 300;
    font-size: 0.8em;
  }
  
  .video-responsive { 
    overflow:hidden; 
    padding-bottom:56.25%; 
    position:relative; 
    height:0;
    margin: 50px;
  }
    
  .video-responsive iframe {
    left:0; 
    top:0; 
    height:100%;
    width:100%;
    position:absolute;
  }
  
  .colx3-summit{
    text-align: left;
  }
  
  .colx3-summit img{
    width: 240px;
  }
  
  .main-content-article.center .main-content-text .colx3-summit p{
    padding: 0 15px;
  }
  
  .colx3 .colx3-summit{
    background: none;
  }
  
  .fullwidth{ 
    width: 100%;
  }
  
  .main-content-article.center .fullwidth{ 
    margin: 50px;
    max-width: 1050px;
  }
  .gridx3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    grid-auto-rows: minmax(100px, auto);
    margin-left: 50px;
  }
  
  .gridx3 .key-leader{
    background-color: #232731!important;
    border-top: 8px solid #1781FF;
    padding: 30px;
    min-height: 380px;
  }
  
  .gridx3 .key-leader .key-leader-portrait{
    width: 70%;
    border-radius: 50%;
  }
  
  .gridx3 .key-leader h3{
    font-size: 1.1rem;
    padding: 0;
    margin: 20px 0 0 0;
  }
  .main-content-article.center .gridx3 .key-leader p{
    padding: 0;
    margin: 0 0 10px 0;
  }
  
  .main-content-article.center .gridx3 .key-leader-geo::before{
    content: "";
      background: transparent url(../img/ico_geo.svg) center center no-repeat;
      background-size: 14px;
      width: 15px;
      height: 19px;
      display: inline-block;
      margin-right: 10px;
      vertical-align: bottom;
  }
  
  .main-content-article.center .gridx3 .key-leader-social{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .main-content-article.center .gridx3 .key-leader-social li{
    display: inline-block;
  }
  
  .main-content-article.center .gridx3 .key-leader-social li a{
    display: block;
    background-size: 35px;
    height: 35px;
    width: 35px;
    transition: all .2s ease-in;
    transform: scale(1);
  }
  
  .main-content-article.center .gridx3 .key-leader-social li a:hover{
    transform: scale(1.2);
  }
  
  .main-content-article.center .gridx3 .key-leader-social li a.ico-twitter{
    background: transparent url(../img/ico_twitter.svg) center center no-repeat;
  }
  
  .main-content-article.center .gridx3 .key-leader-social li a.ico-facebook{
    background: transparent url(../img/ico_facebook.svg) center center no-repeat;
  }
  
  .main-content-article.center .gridx3 .key-leader-social li a.ico-linkedin{
    background: transparent url(../img/ico_linkedin.svg) center center no-repeat;
  }
  
  #headervideo{
    width: 100%;
    max-height: 450px;
    overflow:hidden;
    display: flex;
    align-items: center;
    position: relative;
  }
  
  #myVideo{
    width: 100%;
  }
  
  #myVideo-title{
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top:0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #myVideo-title img{
    width: 100%;
    max-width: 650px;
  }
  
  #fullVideo{
    width: calc( 100% - 90px);
    margin: -200px 0 0 90px;
  }
  
  #summit-numbers{
    display: flex;
    align-items:flex-start ;
    justify-content:space-between;
    width: 80%;
    margin: 30px auto;
  }
  #summit-numbers p{
    font-weight: 600;
  }
  
  #summit-numbers p strong{
    color:#1781FF;
    font-size:2rem;
    letter-spacing: .3rem;
  }
  
  .options a, .linkmoreinfo{
    color: #1781FF;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .main-content-article.center.overlay-article{
    padding: 20px;
  }
  
  #main-content.cart .main-content-article.center.overlay-article {
    margin: auto;
  }
  
  .main-content-article.center.overlay-article .main-content-text  h2{
    letter-spacing: 0.3rem;
    color: #1781FF;
    font-weight: 400;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 10px 0;
    text-align: left;
  }
  
  .main-content-article.center.overlay-article .main-content-text  hr{
    margin: 10px 0;
  }
  
  .main-content-article.center.overlay-article .main-content-text .tags{
    text-align: left;
    margin: 10px 0;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc{
    padding: 0px 60px;
    margin:  40px 60px;
    text-align: left;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc.blocblue{
    background: #1781FF;
    color: #ffffff;
    border-radius: 12px;
    padding: 30px 60px;
  }
  .main-content-article.center.overlay-article .main-content-text  h3{
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 0;
    font-weight: 400;
    margin: 20px 0;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc hr{
    margin: 40px 0;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc ul {
    margin: 0;
    padding: 0px 0 0 15px;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc ul li{
    font-size: 0.9rem;
    list-style: none;
    margin-bottom: 20px;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc ul li::before{
    content: "\2022";
    color: #1781FF;
    font-weight: bold;
    display: inline-block;
    width: 1em; 
    margin-left: -1em; 
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc .video-responsive{
    margin: 0;
  }
  
  .main-content-article.center.overlay-article .main-content-text .overlay-article-bloc a{
    color: #1781FF;
    text-decoration: underline;
  }
  
  .main-content-article.center.overlay-article .main-content-2col {
    padding: 10px;
    margin-top: 0px;
  }
  
  .main-content-article.center.overlay-article .main-content-2col img{
    width: 100%;
  }
  
  .main-content-article.center.overlay-article img.fullwidth{
    margin: 0px;
  }
  
  .bloc-comment{
    background: rgba(0, 0, 0, .3);
    padding: 15px 30px;
    border: 1px solid #cccccc;
    border-radius: 50px;
    display: block;
    margin: 20px 0;
    font-weight: 300;
    line-height: 1rem;
    min-width: 300px;
    color: #fff;
    transition: all .3s ease-in;
    width: calc( 100% - 140px );
    min-height: 150px;
    max-width: 1200px;
  }
  
  #change_password_form_plainPassword label{
    display: inline-block;
    padding: 0px;
    font-weight: 300;
    line-height: 1rem;
    margin: 0px auto;
  }
  
  #change_password_form_plainPassword input{
    width: 300px;
    display: inline-block;
    background: rgba(0, 0, 0, .3);
    padding: 15px 30px;
    border: 1px solid #cccccc;
    border-radius: 50px;
    display: block;
    margin: 20px auto;
    font-weight: 300;
    line-height: 1rem;
    min-width: 300px;
    color: #fff;
    transition: all .3s ease-in;
  }
  
  .alert{
    background: #a20000;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 600px;
    font-weight: 400;
  }
  
  .cart-item-partnership{
    display: none;
    padding: 20px 20px 20px 20px;
    margin-top: 50px;
  }
  
  .cart-item .setquantityproduct {
    display: block;
    position: absolute;
    top: 33%;
    right: 48px;
  }
  
  .card-asset-content .setquantityproduct {
    display: block;
    position: absolute;
    bottom: 20px;
    right: 30px;
    line-height: 1.8rem;
  }
  
  
  .setquantityproduct button{
    background: none;
    width: 15px;
    height: 20px;
    color: #1781FF;
    font-weight: 600;
    padding: 0;
    border: 0;
    margin: 0;
    transition: all .2s ease-in;
    cursor: pointer;
  }
  
  .setquantityproduct button:hover{
    color:white
  }
  
  .setquantityproduct input{
    background: none;
    width: 20px;
    height: 20px;
    color: #1781FF;
    font-weight: 600;
    padding: 0;
    border: 0;
    margin: 0 -3px;
    text-align: center;
  }
  
  .setquantityproduct span{
    height: 20px;
    color: #1781FF;
    font-weight: 600;
  }
  
  .no-height{
    height: auto;
  }
  
  /*== start of code for tooltips ==*/
  .tool {
    position: relative;
  }
  
  
  /*== common styles for both parts of tool tip ==*/
  .tool::before,
  .tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index:20;
  }
  
  .tool:hover::before,
  .tool:focus::before,
  .tool:hover::after,
  .tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
  }
  
  .btn-duplicate{
    border-radius: 25px;
      border: 1px solid #1781FF;
      color: white;
      padding: 3px 15px;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      transition: all .3s ease-in;
      text-transform: initial;
      font-weight: 300;
      background: transparent url(../img/ico_duplicate.svg) center center no-repeat;
      outline: none;
      cursor: pointer;
      display: block;
      width: 30px;
      height: 30px;
      background-size: 44px;
      position: absolute;
      right: 30px;
      bottom: 20px;
  }
  
  .btn-duplicate:hover {
    color: #FFFFFF;
    border: 1px solid #1781FF;
    background: #1781FF url(../img/ico_duplicate.svg) center center no-repeat;
    background-size: 55px;
  }

  .btn-comment{
    border-radius: 25px;
      border: 1px solid #1781FF;
      color: white;
      padding: 3px 15px;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      transition: all .3s ease-in;
      text-transform: initial;
      font-weight: 300;
      background: #1781FF url(../img/ico_comment.svg) center center no-repeat;
      outline: none;
      cursor: pointer;
      display: block;
      width: 30px;
      height: 30px;
      background-size: 44px;
      position: absolute;
      left: 140px;
      bottom: 20px;
  }
  
  .btn-comment:hover {
    color: #FFFFFF;
    border: 1px solid #1781FF;
    background: #1781FF url(../img/ico_comment.svg) center center no-repeat;
    background-size: 55px;
  }

  .comment-asset{
    background: #292E3A;
    border-radius: 12px;
    padding: 20px;
    position: absolute;
    -moz-box-shadow: 0px 4px 40px 0px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 4px 40px 0px rgba(0,0,0,.5);
    -o-box-shadow: 0px 4px 40px 0px rgba(0,0,0,.5);
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,.5);
    width: 300px;
    left: 130px;
    bottom: 70px;
    display: none;
    z-index: 3;
  }

  .comment-asset::after{
    content: "";
    display : inline-block;
    height : 0;
    width : 0;
    border-top : 14px solid #292E3A;
    border-right : 8px solid transparent;
    border-left : 7px solid transparent;
    position: absolute;
    left: 20px;
    bottom: -13px;
  }

  .comment-asset .comment-asset-category{
    background: white;
    color: black;
    padding: 10px;
    border: none;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

  .comment-asset .comment-asset-textarea{
    background: white;
    color: black;
    padding: 10px;
    border: none;
    border-radius: 12px;
    width: 100%;
    height: 80px;
  }

  .comment-asset .btn-cancel{
    float: right;
  }

  #thankyou {
    text-align: center;
    max-width: 800px;
    margin: auto;
    width: 90%;
    padding-top: 50px;
  }

#thankyou #logo{
  width: 90%;
  max-width: 300px;
  display: block;
  margin: 30px auto;
}
#thankyou .video-responsive{
  margin: auto;
  box-shadow: 0px 0px 29px 0px rgba(0, 0, 0,1);
}



.wrapper.mob{
  min-width: auto;
}

  /*== speech bubble ==*/
  .tool::after {
    background: black;
    border-radius: .25em;
    bottom: 180%;
    color: #FFFFFF;
    content: attr(data-tip);
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
  }
  
  .tool:hover::after,
  .tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
  }
  
  #table-partnership thead th.tableheader-package{
    color: white;
  }
  
  #table-partnership thead th.tableheader-package img{
    width: 36px;
    margin-bottom: 20px;
  }
  
  @media (max-width: 760px) {
  .tool::after { 
        font-size: .75em;
        margin-left: -5em;
        width: 10em; 
  }
  }
  
  @media only screen and (min-width: 1440px) {
    #main-content.cart{
      padding: 33px 0 15vw 33vw;
      padding-left: clamp(530px, 33vw, 700px);
    }
  }
  
  @media only screen and (max-width: 768px) {
    #login {
        padding: 40px 20px;
    }
    #login img {
        width: 200px;
    }
    #login h1 {
      font-size: 1.5rem;
    }
    .inputtext{
      max-width: 330px;
      width: 100%;
      min-width: auto;
    }
  
    #footer{
      display: block;
      padding: 20px;
      height: auto;
    }
  
    #footer p{
      text-align: center;
      width: 100%;
      display: block;
      margin: 0 0 20px 0;
    }
    
    #footer img{
      width: 150px;
      margin: auto;
      display: block;
    }
    
  }
  
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden,
  [hidden] {
    display: none !important;
  }
  
  /*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
   * Hide visually and from screen readers, but maintain layout
   */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  
  .clearfix::before,
  .clearfix::after {
    content: " ";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
  
  
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
      display: table-header-group;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
  }