/* Small Devices, Tablets */
@media screen and (max-width: 39.9375em) {
    body, html {
        font-size: 93.75%;
    }

    p {
        font-size: 14pt;
    }

    .h3, h3 {
        font-size:27px;
    }

    .set-of-nodes-container h3{
        font-size: 20px;
    }

    .node-big-container-expanding h1{
    font-size: 30px;
    }

    .node-big-container-expanding p{
        font-size: 9px;
    }

    .EOT-font-start{
        font-size: 10px;
    }

    .EOT-font-increase{
        font-size: 32px;
    }

    @keyframes EOT_fontIncrease {
        from {
            font-size: 10px;
        }
        to {
            font-size: 23px;
        }
    }

    .EOT-growing-font-increase{
        font-size: 90px;
    }

    @keyframes EOT_growing_fontIncrease {
        from {
            font-size: 10px;
        }
        to {
            font-size: 65px;
        }
    }

    #bb-software-container h3{
        font-size: 20px;
    }

    .bb-software-circle-animation{
        font-size: 90px;
    }

    #bb-software-circle-1:hover,
    #bb-software-circle-2:hover,
    #bb-software-circle-3:hover,
    #bb-software-circle-4:hover,
    #bb-software-circle-5:hover,
    #bb-software-circle-6:hover,
    #bb-software-circle-7:hover,
    #bb-software-circle-8:hover{
        font-size: 90px;
    }

    #bb-software-container{
        position: relative;
        margin: 0px auto;
        width: 100%;
    }

    #bb-software-circle-1, #bb-software-circle-2, #bb-software-circle-3, #bb-software-circle-4, #bb-software-circle-5, #bb-software-circle-6, #bb-software-circle-7, #bb-software-circle-8 {
        position: relative;
        width: 100%;
    }

    #bb-software-circle-1{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-2{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-3{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-4{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-5{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-6{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-7{
        height: 400px;
        background-size: contain;
    }

    #bb-software-circle-8{
        height: 400px;
        background-size: contain;
    }

    .bb-wheels-container-size{
        width: 280px;
        height: 280px;
        opacity: 0.1;
    }

    .bb-software-security-circle {
        display: table;
        background-image: url('/content/eot-page/resources/images/v2/circle-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        height: 350px;
        width: 350px;
        margin: 35px auto;
    }

    .bb-secure-logo{
        width: 200px;
    }
}

/* Medium and up */
@media screen and (min-width: 40em) {

    #bb-software-circle-1, #bb-software-circle-2, #bb-software-circle-3, #bb-software-circle-4, #bb-software-circle-5, #bb-software-circle-6, #bb-software-circle-7, #bb-software-circle-8 {
        position: absolute;
    }

    #bb-software-container{
        position: relative;
        margin: 0px auto;
        height: 1250px;
        width: 100%;
    }

    #bb-software-circle-1{
        top: 0;
        right: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-2{
        top: 150px;
        left: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-3{
        top: 300px;
        right: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-4{
        top: 450px;
        left: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-5{
        top: 600px;
        right: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-6{
        top: 750px;
        left: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-7{
        top: 900px;
        right: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

    #bb-software-circle-8{
        top: 1180px;
        left: 50%;
        height: 300px;
        width: 300px;
        background-size: contain;
    }

}

/* Medium Devices, Desktops */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    body, html {
        font-size: 93.75%;
    }

    p {
        font-size: 18pt;
    }

    .h3, h3 {
        font-size:45px;
        text-shadow: 1px 1px #000;
        margin-bottom: 10px !important;
    }

    .set-of-nodes-container h3{
        font-size: 20px;
    }

    .node-big-container-expanding h1{
    font-size: 30px;
    }

    .node-big-container-expanding p{
        font-size: 9px;
    }

    .EOT-font-start{
        font-size: 20px;
    }

    .EOT-font-increase{
        font-size: 50px;
    }

    @keyframes EOT_fontIncrease {
        from {
            font-size: 20px;
        }
        to {
            font-size: 50px;
        }
    }

    .EOT-growing-font-increase{
        font-size: 90px;
    }

    @keyframes EOT_growing_fontIncrease {
        from {
            font-size: 10px;
        }
        to {
            font-size: 65px;
        }
    }

    #bb-software-container h3{
        font-size: 20px;
    }

    .bb-software-circle-animation{
        font-size: 90px;
    }

    #bb-software-circle-1:hover,
    #bb-software-circle-2:hover,
    #bb-software-circle-3:hover,
    #bb-software-circle-4:hover,
    #bb-software-circle-5:hover,
    #bb-software-circle-6:hover,
    #bb-software-circle-7:hover,
    #bb-software-circle-8:hover{
        font-size: 90px;
    }

    .text-cert-number {
        font-size: 90px;
    }

    .bb-wheels-container-size{
        width: 500px;
        height: 500px;
        opacity: 0.1;
    }

    .bb-software-security-circle {
        display: table;
        background-image: url('/content/eot-page/resources/images/v2/circle-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        height: 500px;
        width: 500px;
        margin: 35px auto;
    }

    .bb-secure-logo{
        width: 250px;
    }
}

/* Large Devices, Wide Screens */
@media screen and (min-width: 64em) {
    body, html {
        font-size: 93.75%;
    }

    p {
        font-size: 18pt;
    }

    .h3, h3 {
        font-size:45px;
        text-shadow: 1px 1px #000;
        margin-bottom: 10px !important;
    }

    .set-of-nodes-container h3{
        font-size: 20px;
    }

    .node-big-container-expanding h1{
    font-size: 30px;
    }

    .node-big-container-expanding p{
        font-size: 9px;
    }

    .EOT-font-start{
        font-size: 20px;
    }

    .EOT-font-increase{
        font-size: 50px;
    }

    @keyframes EOT_fontIncrease {
        from {
            font-size: 20px;
        }
        to {
            font-size: 50px;
        }
    }

    .EOT-growing-font-increase{
        font-size: 90px;
    }

    @keyframes EOT_growing_fontIncrease {
        from {
            font-size: 10px;
        }
        to {
            font-size: 65px;
        }
    }

    #bb-software-container h3{
        font-size: 20px;
    }

    .bb-software-circle-animation{
        font-size: 90px;
    }

    #bb-software-circle-1:hover,
    #bb-software-circle-2:hover,
    #bb-software-circle-3:hover,
    #bb-software-circle-4:hover,
    #bb-software-circle-5:hover,
    #bb-software-circle-6:hover,
    #bb-software-circle-7:hover,
    #bb-software-circle-8:hover{
        font-size: 90px;
    }

    .bb-wheels-container-size{
        width: 500px;
        height: 500px;
        opacity: 0.1;
    }

    .bb-software-security-circle {
        display: table;
        background-image: url('/content/eot-page/resources/images/v2/circle-white.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        height: 500px;
        width: 500px;
        margin: 35px auto;
    }
    
    .bb-secure-logo{
        width: 250px;
    }
  
}

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    width:100%;
}

body{
    background: #FFF;
}

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

@font-face{
    font-family: "HelveticaNeue-Bold";
    src: url("../helveticafonts/HelveticaNeue-Bold.ttf") format("truetype");
}

@font-face{
    font-family: "HelveticaNeue";
    src: url("../helveticafonts/HelveticaNeue.ttf") format("truetype");
}

@font-face{
    font-family: "HelveticaNeue-Thin";
    src: url("../helveticafonts/HelveticaNeue-Thin.ttf") format("truetype");
}

h1,h2,h3,h4,h5,h6, p {
    color: white;
    margin-bottom: 20px;
}

h1,h2,h3,h4,h5,h6{
    font-family: "HelveticaNeue-Bold";
    text-transform: None;
    text-rendering: geometricPrecision;
}

p{
    font-family: "HelveticaNeue";
    text-transform: None;
    text-rendering: geometricPrecision;
}

h1{
    text-align: center;
}

.section-container{
    position: relative;
    padding-top:20px;
    padding-bottom: 20px;
}

/*
.narrow{
    padding:0px 40px;
}

@media screen and (min-width: 480px) {
    .narrow{
        padding:0px 150px;
    }
}
*/

.container-half-black{
    background-color: rgba(0,0,0,0.50);
}

.container-blue{
    background-color: #145c98;
}

.container-lightblue{
    background-color: rgba(0,183,255,0.5);
}

/*BUTTON*/
.eot-button{
    display: inline-block;
    padding: 10px 30px;
    margin: 10px;
    border: 1px solid #FFF;
    font-family: "HelveticaNeue-Bold";
    color:#000;
    background: #FFF;
    text-transform: None;
    text-rendering: geometricPrecision;
    width: 100%
}

.eot-button:hover{
    background-color:transparent;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/*HERO SECTION*/

    #hero-background{
        position: relative;
        min-height: 540px;
        background-image: url('/content/eot-page/resources/images/v2/hero.jpg');
        background-size: cover;
        background-position: center center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #hero-endpoint-container  {
        /*position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        /*overflow: auto;*/
        max-width: 100%;
        max-height: 100%;
        height: 400px;
        width: 800px;
    }

    #the-endpoint{
        text-align: center;
    }

    #starting-point{
        text-align: center;
    }

    .network-changing h3{
        padding-top:75px;
        padding-bottom: 75px;
    }

    #network-changing-content{
        position: relative;
        min-height: 390px;
        width: 100%;
        background-image: url('/content/eot-page/resources/images/v2/network-changing.jpg');
        background-size: cover;
        background-position: center center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #expanding-connections{
        position: relative;
        min-height: 1100px;
        background-image: url('/content/eot-page/resources/images/v2/10-million.jpg');
        background-size: cover;
        background-position: center center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #edge-liability{
        position: relative;
        min-height: 1100px;
        background-image: url('/content/eot-page/resources/images/v2/edge-liability.jpg');
        background-size: cover;
        background-position: center center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #video-question{
        position: relative;
        min-height: 375px;
        background-image: url('/content/eot-page/resources/images/v2/video-question.jpg');
        background-size: cover;
        background-position: center center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

/*NODES WITH TEXT INSIDE*/
.node-big-container{
    display: table;
    background-image: url('/content/eot-page/resources/images/v2/node-white.svg');
    /*background-size: 300px 300px;*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: 300px;
    width: 300px;
    margin: 0 auto;
}

.centered-container{
    display: table-cell;
    vertical-align: middle; 
}

.centered-container h3{
    margin-top: 25px;
}

.set-of-nodes-container{
    width: 100%;
    height: 330px;
    position: relative;
}

.set-of-nodes-container h3{
    font-family: "HelveticaNeue";
    text-transform: None;
    text-rendering: geometricPrecision;
}

/*.your-edge-container{
    background-image: url(/content/eot-page/resources/images/background_nodes_8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}*/

.node-small-container{
    position: absolute;
    display: table;
    background-image: url('/content/eot-page/resources/images/v2/node-white.svg');
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 150px;
    width: 150px;
}

.node-small-1{
    top: 0%;
    right: 25%;
}

.node-small-2{
    top: 40%;
    left: 0%;
}

.node-small-3{
    top: 52%;
    right: 0%;
}

.text-blue{
  color: #005387;
}

.text-black{
  color: #000;
  text-shadow: 0px 0px #000;
}

/*10 MILLION SECTION*/
.node-big-container-expanding{
    display: table;
    background-image: url('/content/eot-page/resources/images/v2/node-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100px;
    width: 100px;
    margin: 55px auto;
   
}

.node-big-container-expanding h1{
    font-family: "HelveticaNeue";
    margin-bottom: 0px;
    text-transform: None;
    text-rendering: geometricPrecision;
}

.node-big-container-expanding p{
    font-family: "HelveticaNeue";
    text-transform: None;
    text-rendering: geometricPrecision;
}

.node-big-container-expanding .centered-container {
    padding: 40px;
}

#img-graph {
    width: 60%;
    padding-top: 50px;
}

/*BB CIRCLE ANIMATION*/

#bb-wheels-container{
    position: relative;
    margin: 0px auto;
}

.bb-wheels-container-animate{
    -webkit-animation-name: increaseContainerOpacity;
    animation: increaseContainerSize 0.2s ease-out;
    opacity: 1;
}

@keyframes increaseContainerOpacity {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

#bb-wheel-back{
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 50;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    border-radius: 50%;
}

#bb-wheel-middle{
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 100;
}

#bb-wheel-top{
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 150;
}

.bb-wheel-animate-back{
    -webkit-animation-name: wheel-rotation;
    animation: increaseSize 3s ease-out;
}

.bb-wheel-animate-middle{
    -webkit-animation-name: wheel-rotation;
    animation: increaseSize 4s ease-out;
}

.bb-wheel-animate-top{
    -webkit-animation-name: wheel-rotation;
    animation: increaseSize 5s ease-out;
}

@keyframes wheel-rotation {
    from {
        transform: rotate(-200deg);
    }
    to {
        transform: none;
    }
}

/*OPACITY CLASSES*/

.opacity-0{
    opacity: 0;
}

.opacity-05{
    opacity: 0.5;
}

.opacity-1{
    opacity: 1;
    z-index: 50 !important;
}

.wheel-opacity-1{
    opacity: 1;
}

/*Growing Fonts*/

#EOT-growing{
    margin-top: 0px;
}

.EOT-font-increase{
    animation: EOT_fontIncrease 1.5s ease-out;
}


.EOT-growing-font-increase{
    animation: EOT_growing_fontIncrease 2s ease-out;
}


/*BB SOFFTWARE*/

#bb-software-container h3{
    font-family: "HelveticaNeue";
}

#bb-software-circle-1,
#bb-software-circle-2,
#bb-software-circle-3,
#bb-software-circle-4,
#bb-software-circle-5,
#bb-software-circle-6,
#bb-software-circle-7,
#bb-software-circle-8{
    display: table;
    background-image: url('/content/eot-page/resources/images/v2/node-white-border.png');
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
    transition: all 0.5s ease-out;
}

.bb-software-circle-animation{
    animation: bb-software-circle-opacity 2s ease-out;
}

#bb-software-circle-1:hover,
#bb-software-circle-2:hover,
#bb-software-circle-3:hover,
#bb-software-circle-4:hover,
#bb-software-circle-5:hover,
#bb-software-circle-6:hover,
#bb-software-circle-7:hover,
#bb-software-circle-8:hover{
    opacity: 1;
}

#bb-software-security-leader {
    width: 100%;
    height: 50%%;
    overflow: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    position: relative;
    background-image: url('/content/eot-page/resources/images/v2/carousel.jpg');
    background-size: cover;
    background-position: center center;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#slideContainer {
    width: 500%; /* to contain 5 panels, each with 100% of window width */
    height: 50%;
}

#bb-software-security-leader #slideContainer .panel {
    height: 100%;
    width: 20%; /* relative to parent -> 2-% of 500% = 100% of window width */
    float: left;
    background: transparent;
}

#bb-software-security-leader #slideContainer #img-sec-trusted,
#bb-software-security-leader #slideContainer #img-sec-gov {
    width: 50%;
}

#bb-software-security-leader #slideContainer #img-sec-bubbles {
    width: 40%;
}


/*#bb-software-security-2 {
    display: none;
}*/

/*LAST SECTION*/
.bb-secure-logo-container{
        position: relative;
        width: 100%;
    }
    
.bb-secure-logo{
        position: relative;
        background-color: #FFF;
        margin: 0 auto;
        z-index: 1000;
        padding-left: 9px;
        padding-right: 10px;
}
    
.bb-secure-line{
        position: absolute;
        bottom:23px;
        left: 10%;
        right: 10%;
        width: 80%;
        border-bottom: 3px solid #000;
    }

.svg-icon-container{
    max-width: 150px;
    margin: 0 auto 0 auto;
    cursor: pointer;
}

.svg-shield-container{
    width: auto;
    border-bottom: 3px solid #666867;
}

.svg-icon-container img {
    transition: all 300ms ease;
}

.svg-icon-container img:hover {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
}

#EOT-upon-us,
#EOT-growing {
    padding-top: 70px;
    padding-bottom: 70px;
}

.software-circle-content h3{
    color:#15284b;
    width: 80%;
    margin: auto;
    text-shadow: 0px 0px transparent;
}

.h6, h6 {
    font-size:16px;
}

.bb-software-security-circle-content{
    display: table-cell;
    vertical-align: middle;
}

.text-cert-number {
    font-size: 90px;
}
.text-dark h1, .text-dark h3, .text-dark p {
    color:#15284b;
    text-shadow: 0px 0px transparent;
}

/*Small screen*/
@media screen and (max-width: 39.9375em) {
    .bb__static__footer {
        position: relative;
        padding-top:350px;
    }
}


/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .bb__static__footer {
        position: relative;
        padding-top:330px;
    }
}

/* Large and up */
@media screen and (min-width: 64em) {
    .bb__static__footer {
        position: relative;
        padding-top:200px;
    }
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}