/* Page Specific Styles */

.shapes{
  max-width:450px;
}

/* Cash Music Examples */

.cm-example{
  background:#ddd;
  padding:40px;
  margin:0 0 30px 0;
  min-height:200px;
}

/* Call out panels */
#main article .callout-section{
  background:#ddd;
}

#main .callout-panel{
  margin:10px;
  min-height: 750px;
  color:#222;
  background:#fff;
  padding:30px 40px;
  position: relative;
}

#main .callout-panel h2{
  font-size: 18px;
  line-height: 24px;
  font-family: 'Montserrat', sans-serif;
}

#main .callout-panel p{
  padding:0 0 18px 0;
}

#main .callout-panel h3{
  margin:0px 0 30px 0px;
  display: inline-block;
}

#main .callout-panel img{
  background:#333;
  margin:0 0 30px 0;
}

#main .callout-panel a.link{
  padding:10px;
  color:#222;
  background-color:transparent;
  border:5px solid;
  display:block;
  text-align: center;
  opacity: 1;
  font-family: 'Montserrat', sans-serif;
}

#main .callout-panel a.link:hover{
  color:#ff475b;
  opacity: 1;
}

/* About us */

/* Board Members */

#main ul.board p{
  text-align: left;
  margin:0;
  padding:0;
}

#main ul.board li {
  padding:0;
  margin:0;
}

#main ul.board li .inner{
  margin:0 1px 20px 0;
  background:#f5f5f5;
  background:rgba(255,255,255,0.5);
  padding:30px;
  display: block;
  height:400px;
}

#main ul.board li img{
  width:50%;
  display: block;
  margin:0 auto 30px auto;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}


#main ul.board li .details{
  display: inline-block;
  width:70%;
  vertical-align: middle;
}

/* Advisors */

#main ul.board.advisors img{
  vertical-align: top;
  width:15%;
  display: inline-block;
  margin:0 20px 0 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

#main ul.board.advisors li {
  margin:0 0 30px 0;
  background: none;
  padding:0 0px 0 0;
}


/* Product Page */

.product header {
  background:#222;
  color:#f5f5f5;
  padding:60px;
}

.product header .signup{
    display: block;
    border: solid 5px;
    padding: 12px;
    font-size: 12px;
    width: 250px;
    margin:0 0 0 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.product header h1{
  font-family: 'Nunito', sans-serif!important;
  line-height: 32px;
  margin:30px 0!important;
}

/* Product Features */

.product-features{
  margin:60px 0 60px 0;
}

.product-features div.inner{
  margin:0 1px 5px 0;
  padding:5px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}

#main article .product-features div.inner h4, #main article .product-features div.inner h5{
  margin-right:20px;
  margin-left:10px;
  line-height: 30px;
  display: inline;
}

#main article .product-features div.inner h5{
  margin-top:15px;
  display: block;
  line-height: 16px;
}

#main article .product-features div img{
  margin:0 0 20px 0;
}

#main article ul.product-features li{
margin:0 0 1px 0;
padding:20px;
display: block;
font-weight: 100;
background:rgba(255,255,255,0.6);
}

#main article ul.product-features li:nth-child(odd){
background:rgba(255,255,255,0.3);
}

.product-features li span{
font-weight: 400;
}

/* Product Pricing */
.product .price{
  padding:30px;
  background:#222;
  color:#f5f5f5;
}

.product .price p a{
  background:#333!important;
}

.product .price p a:hover{
  background:transparent!important;
}

 #main.product .price h2{
  font-size: 42px;
  line-height: 40px;
}

.product .price .amount{
  font-size: 200px!important;
  font-weight:400!important;
  line-height: 300px!important;
  margin:0 0 36px 0;
  padding:0;
  word-break: break-all;
}

.product .price .amount span{
  display: none;
}

/* Product Recap */

.product .recap {
  position: relative;
  padding:60px;
  color:#fff;
  margin:0 0 -30px 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  background: url('https://static-cashmusic.netdna-ssl.com/www/img/constant/texture/header.jpg');
  background-position: 50% 50%;
  overflow: hidden;
}

.product .recap:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8c00f7+0,0090ff+100 */
  background: rgb(140,0,247); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(140,0,247,1) 0%, rgba(0,144,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,0,247,1)), color-stop(100%,rgba(0,144,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c00f7', endColorstr='#0090ff',GradientType=0 ); /* IE6-9 */
  opacity: 0.5;
}

#main.product .recap h2{
  position: relative;
  z-index: 10;
  font-size: 1.5em;
  margin:0 0 10px 0!important;
}

#main.product .recap .signup{
    position: relative;
    z-index: 10;
    color:#fff;
    border: solid 5px;
    margin:0 auto;
    font-size: 12px;
    padding:12px;
    width:250px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

#main.product .recap .signup:hover{
  background:#fff;
  color:rgba(34,34,34,0.5);
  border-color: #fff;
}

/* Product Connections */
.product .connections{
  margin:0 auto 10px auto;
  min-height:100px;
  background:transparent;
  padding:20px;
  vertical-align: middle;
}

.product .connections div img{
   -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin:0 auto 30px auto;
  width:75%;
  display: block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

   /* Pure Medium + */
   @media screen and (min-width: 48em) {



     body.platform-bg{
       background-image:url('https://static-cashmusic.netdna-ssl.com/www/img/constant/texture/header.jpg');
       background-repeat: no-repeat;
       background-position: center top;
       background-attachment: fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       background-blend-mode: unset;
     }


     .home #main .article-content, #main.product .article-content{
       padding:60px 0 0 0;
     }

     /* About Us */

     #main .staff-profile{
       padding:10px 20px 0 0;
     }

     /* Platform Page */

     .platform .head-bg:before{
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       background: rgb(140,0,247); /* Old browsers */
       background: -moz-linear-gradient(top,  rgba(140,0,247,1) 0%, rgba(0,144,255,1) 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,0,247,1)), color-stop(100%,rgba(0,144,255,1))); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* IE10+ */
       background: linear-gradient(to bottom,  rgba(140,0,247,1) 0%,rgba(0,144,255,1) 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c00f7', endColorstr='#0090ff',GradientType=0 ); /* IE6-9 */
       opacity: 0.8;
     }

      #hero .preview{
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;
     }

     .product-features div.inner{
       height:320px;
     }

     /* Product Pricing */
     .product .price{
     	padding:60px;
     }

     .product .price h2{
       font-size: 55px;
       line-height: 50px;
     }

     .product .price .amount{
     	font-size: 300px!important;
     }

     .product .price .amount span{
     	display: inline;
     }

     .product .connections div{
       margin:0 auto;
       min-height:100px;
       padding:20px;
       vertical-align: middle;
     }
}