/* key elements */
body { background: none repeat scroll 0 0 #000000; color: #222222; }
    
    
ul.ul-center {
    margin-left: 0;
}
    
.row { max-width: 95rem; }

.row.max-1 { max-width: 53rem; margin: 0 auto; }

a { color: #39a0e8; }

p.notice {color: #555555; font-size: 12px;}

.copyright {color: #666666; }

#main-content {}
#main-content.bg {
    background-image: url("../img/bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-top: 0.6rem;
}

form {margin: 0;}

form .row .row {
    margin: 0 auto;
}

#footer {}

.row h3 {
color: #ffffff;
    font-weight: bold;
    }
    
.side-nav.small-12.mdeium-6.large-6.columns > h3 {
    color: #ffffff;
    font-weight: bold;
}

.panel.feet {
    background: none repeat scroll 0 0 #2f2f2f;
    border-color: #525252;
}

/*side-nav*/
.side-nav li a:not(.button) {
    color: #67c0ff;
    }
    .side-nav li a:hover:not(.button), .side-nav li a:focus:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.31);
    color: #2887c2;
    }

/* reveal */
.pp {margin: 0px auto;}
.tt {max-width: 600px; margin: 0 auto; }
.jj {background-color:transparent !important; max-width: 700px; }
.rr {height: 60px; overflow: auto; color: rgb(239, 239, 239); margin-bottom: 1.8rem; }

dialog, .reveal-modal {
    background-color: #181818;
    border: 1px solid #606060;
    }

.reveal-modal-bg {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.94);
}

dialog .close-reveal-modal, .reveal-modal .close-reveal-modal.crms {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    right: auto;
    top: auto;
}

.crms-eq {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    right: auto;
    top: auto;
}

.crms-eq-gray {
    color: #ffffff;
    background-color: #555555;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    position: relative;
    right: auto;
    top: auto;
}





/* header */
#header {margin-bottom: 1rem; }
.cope { max-width: 480px; width: 100%; }

h1.logo {
    height: auto;
    line-height: 1.8;
    text-align: center;
    width: 100%;
}

ul.points {
    color: #efefef;
    font-size: 14px;
    list-style: none outside none;
    margin: 10px 0;
}

/* links */
a.now { background-color: #4ba1de; font-size: 3rem; font-weight: bold; }
a.now:hover { color: #BEE6FF; }


/* spans */
span.instant {color: #67C0FF; }
p.slogan, .slogan {
    color: #67c0ff;
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
    line-height: 0.6;
}

/* panels */

.panel {
	background:none repeat scroll 0 0 rgba(242, 242, 242, 0.88);
	border-color: #ffffff;
}
.panel.transparent {background-color: transparent; border: none; }

.panel.login {
    padding: 1.15rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
.panel.login h2 {font-size: 1.7rem; }

.panel.join-now {padding: 6px;}


/* pricing tables */
.pricing-table {
    border: 1px solid #707070;
    margin-bottom: 1.25rem;
    margin-left: 0;
    
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}

.pricing-table .cta-button {
    background-color: rgba(255, 255, 255, 0.36);
    padding: 1.25rem 1.25rem 0;
    text-align: center;
}

.pricing-table .title {
    background-color: rgba(0,0,0,0.8);
    color: #ffffff;
    font-size: 1rem;
    font-weight: normal;
    padding: 0.9375rem 1.25rem;
    text-align: center;
}

.pricing-table .price {
    background-color: #D7EDB1;
    color: #0b0b0b;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 0.538rem;
    text-align: center;
    
    box-shadow: 0 -2px 10px -6px #5c5c5c inset;
    -webkit-box-shadow: 0 -2px 10px -6px #5c5c5c inset;
    -moz-box-shadow: 0 -2px 10px -6px #5c5c5c inset;
    -ms-box-shadow: 0 -2px 10px -6px #5c5c5c inset;
    -o-box-shadow: 0 -2px 10px -6px #5c5c5c inset;
    
}

.pricing-table .bullet-item {
    background-color: #ffffff;
    border-bottom: 1px dotted #dddddd;
    color: #333333;
    font-size: 0.875rem;
    font-weight: normal;
    padding: 0.425rem;
    text-align: left;
}

/* gradients */
.gradient {
background: #282828; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4MjgyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #282828 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #282828 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #282828 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #282828 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #282828 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}


/* global-wrap */
.global-wrap { background: none repeat scroll 0 0 #111111; max-width: 95rem; margin: 0 auto; border: 1px solid #252525;  }

.global-wrap.gradient {
background: #282828; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4MjgyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #282828 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282828), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #282828 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #282828 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #282828 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #282828 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}


/* buttons */
.button.gradient {
border: 1px solid #333333;

background: #2b2b2b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI2JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjBmMGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #2b2b2b 6%, #0f0f0f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#2b2b2b), color-stop(100%,#0f0f0f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2b2b2b 6%,#0f0f0f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2b2b2b 6%,#0f0f0f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2b2b2b 6%,#0f0f0f 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2b2b2b 6%,#0f0f0f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#0f0f0f',GradientType=0 ); /* IE6-8 */
}

.button:hover.gradient {
color: #39a0e8;

background: #0f0f0f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBmMGYwZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #0f0f0f 0%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f0f0f), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0f0f0f 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0f0f0f 0%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0f0f0f 0%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0f0f0f 0%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0f0f', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-8 */
}




.button.gradient-green {
background: #b0e076; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwZTA3NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhlYjkyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzcyYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YmFkMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #b0e076 0%, #8eb92a 50%, #72aa00 51%, #6bad20 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0e076), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#6bad20)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b0e076 0%,#8eb92a 50%,#72aa00 51%,#6bad20 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b0e076 0%,#8eb92a 50%,#72aa00 51%,#6bad20 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b0e076 0%,#8eb92a 50%,#72aa00 51%,#6bad20 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b0e076 0%,#8eb92a 50%,#72aa00 51%,#6bad20 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0e076', endColorstr='#6bad20',GradientType=0 ); /* IE6-8 */

  font-weight: bold;
  font-size: 1.5rem;
  
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  
  box-shadow: 0 -2px 8px 0 rgba(174, 247, 0, 0.8) inset;
  -webkit-box-shadow: 0 -2px 8px 0 rgba(174, 247, 0, 0.8) inset;
  -moz-box-shadow: 0 -2px 8px 0 rgba(174, 247, 0, 0.8) inset;
  -ms-box-shadow: 0 -2px 8px 0 rgba(174, 247, 0, 0.8) inset;
  -o-box-shadow: 0 -2px 8px 0 rgba(174, 247, 0, 0.8) inset;
  
}

.button:hover.gradient-green {
background: #c4ef8b; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2M0ZWY4YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2QyZTYzOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2E2ZDYyZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkxJSIgc3RvcC1jb2xvcj0iIzljYzQ0MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  #c4ef8b 1%, #d2e638 50%, #a6d62f 50%, #9cc440 91%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c4ef8b), color-stop(50%,#d2e638), color-stop(50%,#a6d62f), color-stop(91%,#9cc440)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c4ef8b 1%,#d2e638 50%,#a6d62f 50%,#9cc440 91%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c4ef8b 1%,#d2e638 50%,#a6d62f 50%,#9cc440 91%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c4ef8b 1%,#d2e638 50%,#a6d62f 50%,#9cc440 91%); /* IE10+ */
background: linear-gradient(to bottom,  #c4ef8b 1%,#d2e638 50%,#a6d62f 50%,#9cc440 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ef8b', endColorstr='#9cc440',GradientType=0 ); /* IE6-8 */

}


.button.gradient-black {
	background: #545454; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iIzY4Njg2OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNTA1MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #545454 0%, #686868 48%, #474747 50%, #050505 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(48%,#686868), color-stop(50%,#474747), color-stop(100%,#050505)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #545454 0%,#686868 48%,#474747 50%,#050505 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #545454 0%,#686868 48%,#474747 50%,#050505 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #545454 0%,#686868 48%,#474747 50%,#050505 100%); /* IE10+ */
background: linear-gradient(to bottom,  #545454 0%,#686868 48%,#474747 50%,#050505 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#050505',GradientType=0 ); /* IE6-8 */

  font-weight: bold;
  font-size: 1.5rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  
  box-shadow: 0 -1px 14px 1px rgba(255, 255, 255, 0.65) inset;
  -webkit-box-shadow: 0 -1px 14px 1px rgba(255, 255, 255, 0.65) inset;
  -moz-box-shadow: 0 -1px 14px 1px rgba(255, 255, 255, 0.65) inset;
  -ms-box-shadow: 0 -1px 14px 1px rgba(255, 255, 255, 0.65) inset;
  -o-box-shadow: 0 -1px 14px 1px rgba(255, 255, 255, 0.65) inset;
  
}

.button:hover.gradient-black {
background: #6db3f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-8 */


}




/* block-grid */
ul.small-block-grid-4 {margin: 0 -1.025rem; }

ul.small-block-grid-4 > li { padding: 0; }

ul.small-block-grid-4 > li a { font-size: 16px; font-weight: bold; margin-bottom: 2px; }




.show{
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  display: block;
}


.aspect{
  position: relative;
  padding-bottom: 120%;
  height: 0;
  overflow: hidden;
}

.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}

.show-first a.more {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px; 
  background: #FFF;
  color: #222;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  position: relative;
  border: 1px solid #999;

}

.show-first a.more:hover {
  box-shadow: 0 0 5px #000;
}

.show-first p {
    color: #ffffff;
    font-size: 24px;
    letter-spacing: normal;
    margin-bottom: 7px;
}

.show-first img {
  transition: all 0.2s linear;
}

.show-first .mask {
  opacity: 0;
  background-color: rgba(0,0,0, 0.4);
  transition: all 0.4s ease-in-out;
}
.show-first h2 {
  color: #f2f2f2;
  margin-top: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  background: rgba(0,0,0,0.7);
}
.show-first p {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.show-first a.info{
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.show-first:hover img {
  transform: scale(1.2);
}
.show-first:hover .mask {
  opacity: 1;
}
.show-first:hover h2,
.show-first:hover p,
.show-first:hover a.info {
  opacity: 1;
}
.show-first:hover p {
  transition-delay: 0.1s;
}
.show-first:hover a.info {
  transition-delay: 0.2s;
}

/* SECOND */

.show-second img {
  transition: all 0.3s ease-in-out;
}
.show-second .mask {
  background-image: url(http://subtlepatterns.com/patterns/gplaypattern.png);
  background-color: rgba(0,0,0,0.3);
  transform: translateX(-110%);
  opacity: 1;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 7px #ccc;
}
.show-second h2{
  background: rgba(255, 255, 255, 0.7);
  color: #000;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
.show-second p{
  opacity: 0;
  color: #333;
  transition: all 0.2s linear;
}

.show-second a.more {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px; 
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  position: relative;
  border-radius: 7px;

}

.show-second a.more:hover {
  background-color: #444;
}

.show-second:hover .mask {
  transform: translateX(0px);
} 

.show-second:hover img {
  transform: translateX(80%);
  transition-delay: 0.1s;
}

.show-second:hover p{
  opacity: 1;
  transition-delay: 0.4s;
}

/* THIRD */
.show-third span.more {
  display: inline-block;
  text-decoration: none;
  padding: 6px 12px;
  background: #000000; 
  background: rgba(0,0,0,0.8);
  color: #fff;
  text-transform: uppercase;
  position: relative;
}
/* <span> was an <a>, also changed above ^ */
.show-third span.more:hover {} 

.show-third p {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 21px;
    margin-top: -8px;
}

.show-third .mask {
  opacity: 0;
  background-color: rgba(255,255,255,0.2);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.show-third h2 {
  color: #ffffff;
  background-color: rgba(0,0,0,0.8);
  margin-top: 0;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.show-third p {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.show-third a.info{
  opacity: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.show-third img{
   transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.show-third:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    }

.show-third:hover .mask {
  opacity: 1;
}

.show-third:hover h2,
.show-third:hover p,
.show-third:hover a.info {
  opacity: 1;
}

.show-third:hover p {
  transition-delay: 0.0s;
  -webkit-transition-delay: 0.0s;
  -moz-transition-delay: 0.0s;
  -ms-transition-delay: 0.0s;
  -o-transition-delay: 0.0s;
}

.show-third:hover a.info {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
}


/* FOURTH */
.show-fourth a.more {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px; 
  background: #000;
  color: #fff;
  text-transform: uppercase;
  border-radius: 5px;
  box-shadow: 0 0 1px #000;
  position: relative;
}

.show-fourth a.more:hover {
  box-shadow: 0 0 5px #fff;
  background-color: #222;
}

.show-fourth p{
  font-size: 28px; 
}

.show-fourth .mask {
  opacity: 0;
    background-image: url(http://subtlepatterns.com/patterns/gplaypattern.png);
  background-color: rgba(255,255,255, 0.5);
  transition: all 0.4s ease-in-out;
}

.show-fourth h2 {
  color: #000;
  margin-top: 10%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.show-fourth p {
  opacity: 0;
  transition: all 0.2s linear;
}

.show-fourth a.info{
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.show-fourth img{
  transition: all 0.2s ease-in-out;
}

.show-fourth:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
  transform: scale(1.5);
}

.show-fourth:hover .mask {
  opacity: 1;
  
}
.show-fourth:hover h2,
.show-fourth:hover p,
.show-fourth:hover a.info {
  opacity: 1;
}
.show-fourth:hover p {
  transition-delay: 0.1s;
}
.show-fourth:hover a.info {
  transition-delay: 0.2s;
}



.blur-on-hover {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.blur-on-hover:hover {
  filter: blur(0);
}