/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* PubNub IoT Internet of Things Color Palette

    #4e4687 - purple 1
    #49427c - purple 2
    #433c76 - purple 3
    #322c60 - dark purple
    #182030 - dark dark purple
    #5b58b6 - saturated purple
    #cdcce0 - gray
    #76aa8c - green - callout

    #a32825 - red
    #dddde4 - light gray
    #bdbfcb - gray
    #acd5d8 - cyan
    #5e6741 - dark green
    #565192 - purple
    #6da87c - light green
    #f2cda1 - human skin
    #dfb965 - light chartreuse
*/

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* Main Section */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.section-main {
    background-image: linear-gradient( to bottom, #2a1b52, #533b89 );
    color: #fff;
}
.section-main-h1 {
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
    text-align: center;
    font-size: 40px;
    font-weight: 100;
    margin: 30px 0 40px 0;
}
.section-main-pubnub-logo {
    z-index: 1000;
    height: 40px;
    margin: 50px 0 30px 0;
}
.section-main-whirly {
    margin: 90px 0 90px 0;
}
#iot-whirly-list,
#iot-device-list {
    display: none;
}
#iot-whirly-container {
    position: absolute;
    font-size: 100px;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* Hero Graphic Animated Dots */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.hero-animated-dots {
    display: inline-block;
    background: #565192;
    height: 200px;
    width: 255px;
}
.hero-animated-dots-mask {
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: 17px 17px;
    -webkit-mask-image: url(../media/dots-mask.png);
    -webkit-mask-position: 0px 67px;
}
.hero-animated-dots-spin {
    width: 600px;
    height: 200px;
    background: -webkit-linear-gradient(
        left,
        rgba(255,255,255,0)   0%,
        rgba(255,255,255,0)  40%,
        rgba(255,255,255,1)  50%,
        rgba(255,255,255,0)  60%,
        rgba(255,255,255,0) 100%
    );
    background-size: 300px 300px;
}
.animateddots {
    -webkit-animation: animateddots 1s infinite normal linear;
}
.animateddotsalt {
    -webkit-animation: animateddotsalt 0.5s infinite alternate linear;
}
@-webkit-keyframes animateddots {
    0%   { -webkit-transform: translate3d(   0px,0,0); }
    100% { -webkit-transform: translate3d(-300px,0,0); }
}
@-webkit-keyframes animateddotsalt {
    0%   { -webkit-transform: translate3d(-170px,0,0); }
    100% { -webkit-transform: translate3d(-490px,0,0); }
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* Hero Graphic Circles */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
#hero-circle-left,
#hero-circle-right {
    display: inline-block;
    margin: 26px 0 0 0;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    line-height: 100px;
    font-size: 72px;
    text-align: center;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    -webkit-transform-origin: 0% 200%;
}
#hero-circle-center {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    line-height: 150px;
    font-size: 120px;
    text-align: center;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
#hero-circle-left {
    background: #55c8e5;
}
#hero-circle-center {
    color: rgba(255,255,255,0.8);
    color: #eee;
    background: #ce1126;
}
#hero-circle-right {
    background: #b36cd0;
}

#hero-circle-left-title,
#hero-circle-right-title {
    margin: 10px 0 0 0;
    font-size: 20px;
    font-weight: 200;
    -webkit-transform-origin: 200% 200%;
}
#hero-circle-center-title {
    margin: 10px 0 0 0;
    font-size: 30px;
    font-weight: 200;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* Section Mini Description */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.section-mini-description-lead {
    margin: 80px 0 80px 0;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
/* Utilities */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.relative {
    position: relative;
}

button,
textarea,
input {
    outline: none !important;
}