.call-now-numbers {
    font-size: 14px;
    margin: 0
}
.mobile {
    display: none !important;
}

.share-list {
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    width: 100%;
    padding-bottom: 16px;
    transition: all .35s linear;
    overflow: hidden;
    display: none;
}
.lt-ie9 .addthis_sharing_toolbox .share-icon .share-link-text {
    display: inline-block
}
.addthis_sharing_toolbox .at-share-btn .at300b {
    background: 0 0;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
    top: 7px;
    right: 0;
    font-size: 36px;
    padding: 9px;
    width: 40px;
    height: 33px
}
@media (min-width: 37.5em) {
    .addthis_sharing_toolbox .at-share-btn .at300b {
        right: 7px;
        font-size: 28px;
        padding: 7px;
        height: 26px;
        width: 31px
    }
}
.lt-ie9 .addthis_sharing_toolbox .at-share-btn .at300b {
    right: 7px;
    font-size: 28px;
    padding: 7px;
    height: 26px;
    width: 31px
}
.addthis_sharing_toolbox .at-share-btn .at300b .at4-icon {
    background-color: #787878!important;
    background-size: 26px!important;
    width: 26px;
    height: 26px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.contact-us-menu {
    width: 100%;
    border-radius: 0;
    background: #fff;
    padding: 0;
    border-bottom: 0;
    top: 58px;
    right: 0;
    transition: .35s ease-in;
    position: absolute;
    display: none;
}

.bcon{
    border-top: solid 1px #cccccc;
    border-bottom: solid 1px #cccccc;
}


.boat-diagram-on {
    display: block;
    width: 100%;
    height: 100vh;
    /*height: 702px;*/
    background: #0a1a29 url('../img/ban2.jpg') center center no-repeat;
    background-size: cover;
}
.boat-diagram-off {
    display: block;
    width: 100%;
    height: 100vh;
    /*height: 702px;*/
    background: #0a1a29 url('../img/van1.jpg') center center no-repeat;
    background-size: cover;
}
.img-responsive {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
}
.video-responsive {
    width: 480px;
    height: 270px;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
}

.ioe-on-info-block {
    float: left;
    width: 40%;
    padding-right: 10%;
}
.sm-icon {
    width: 24px;
    height: 24px;
    padding-right: 6px;
}
#topbar {
    position: fixed;
    top: 0;
    height: 81px;
    background: #fff;
    width: 100%;
    font-size: 14px;
    opacity: 0.97;
    margin: 0;
    padding: 0;
}
#topbar a {
    text-decoration: none;
    color: #000;
}
.topbar-container {
    max-width: 1170px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 24px 20px;
    position: relative;
}
#footer {
    margin-top: 40px;
    height: 71px;
    background: #9a9b9f;
    width: 100%;
    font-size: 14px;
    color: #fff;
}
#footer a {
    color: #fff;
    text-decoration: none;
}
.social-icon {
    width: 20px;
    padding-left: 12px;
    border: none;
}
.footer-secondary-content {
    max-width: 1170px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding: 28px 0px;
    background: #9a9b9f;
}
.footer-social {
    float: right;
    padding-right: 20px;
}
.footer-legal {
    float: left;
    padding-left: 20px;
}
.top-logo {
    float: left;
    width: 60px;
    margin: 0;
    opacity: 0.8;
}
.tagline {
    float: left;
    margin: 25px 30px;
    opacity: 0.4;
}
.greyout {
    opacity: 0.67;
}
.dotted-divider {
    background: #fff;
    width: 100%;
    display: block;
    position: relative;
    clear: both;
}
.dots {
    color: #21335c;
    font-size: 28px;
    letter-spacing: 15px;
    text-align: center;
    width: 90%;
    overflow: hidden;
    margin: auto;
}
.img-poster {
    width: 40vw;
    padding-top: 2vh;
}
.fl-icon {
    width: 6%;
}
.white-text {
    color: #fff;
}
.dark-text {
    color: #21335c;
}
.black-text {
    color: #000;
}
#sea-text {
     position: absolute;
    top: 25%;
    left: 60px;
}
#sail-column {
    position: relative;
    width: 55%;
    margin: 0;
    padding: 0;
    padding-top: 60px;
    padding-left: 40%;
    padding-bottom: 80px;
}
.pad-paragraph {
    margin-bottom: 130px;
}
#cisco-logo-in-sea {
    position: absolute;
    bottom: 7%;
    right: 5%;
    width: 10%;
    margin: 0;
    padding: 0;
}
.ioe-column {
    position: absolute;
    top: 3vh;
    left: 5%;
    width: 50%;
    margin: 0;
    padding: 0;
}
/*#ioe-sets-sail {*/
    /*background: #0a1a29 url(' boat_on_sea.jpg') left bottom no-repeat;*/
    /*background-size: 100%;*/
/*}*/
#connecting-assets {
    background: #4794c8;
    background-size: 100%;
    border-bottom: solid 6px #ffffff;
    -webkit-transform: translateZ(0);
}
/*#seconds-count {*/
    /*background: #4794c8 url(' advisor.jpg') left bottom no-repeat;*/
    /*background-size: cover;*/
/*}*/
/*#endcap {*/
    /*background: #fff;*/
    /*background-size: cover;*/
/*}*/
/*#endcap2 {*/
    /*background: #000;*/
/*}*/
/*#lastbit a {*/
    /*color: #02c5ff;*/
    /*text-decoration: underline !important;*/
/*}*/
/*#endcap a {*/
    /*color: #000;*/
    /*text-decoration: none;*/
/*}*/

#connecting-column {
    width: 50%;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 60px;
}
#seconds-column {
    width: 55%;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 40%;
}
#seconds-column a {
    color: #fff;
}
#cisco-logo-on-beach {
    width: 10vw;
    float: right;
    margin: 5vw;
}
.brclear {
    clear: both;
}
.cisco-logo-sea {
    width: 100%;
}
.rp {
    position: relative;
    margin: 0;
    padding: 0;
}
.ap {
    position: absolute;
    margin: 0;
    padding: 0;
}
.fl-diagram {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: auto;
    width: 100%;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.amid {
    margin-top: 40px;
}
.abot {
    margin-top: 80px;
}
.assets-list {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: auto;
    padding-top: 20px;
    width: 90%;
}
.asset-icon {
    height: 8vh;
    display: block;
    text-align: center;
    margin: auto;
    padding-bottom: 2vh;
}
.asset-icon2 {
    height: 60px;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

.fl-icon {
    width: 30%;
    display: block;
    text-align: center;
    margin: auto;
    padding-bottom: 15px;
}
.asset-item {
    color: #224266;
    float: left;
    padding: 10px 0 0px 0;
    display: block;
    width: 25%;
    text-align: center;
    font-size: 16px;
    line-height: 18px !important;
}
.padd-bi {
    padding: 0 20px;
}
.padd-ti {
    padding: 20px 20px;
}
.diagram-item {
    float: left;
    padding: 0vh 2% 2vh 3%;
    display: block;
    width: 30%;
    text-align: center;
    font-size: 11px;
    line-height: 17px;
}
.eic {
    width: 100%;
}
.learn-more {
    margin: 3vw auto;
    width: 80%;
    float: none;
    text-align: center;
}
#dramatic-text p {
    padding-right: 50%;
}
#dramatic-text {
    padding-bottom: 0;
}

.max-wide {
    width: 100%;
}

.ioe-on-info-block p {
    padding-left: 55px;
    font-size: 12px;
    line-height: 16px;
    margin: 0 0 20px 0;
}

.c-line {
    display: none;
}
.small-text {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-left: 55px;
}
.ioe-off-info-block {
    padding: 20px 0 0px 0;
    margin: 0 0 20px 0;
}
.invisible {
    opacity: 0;
}
#foxy-info {
    padding: 60px;
    background: #fff;
}
#ioe-on {
    position: fixed;
    top: 60px;
    overflow: hidden;
    background: #fff;
    width: 100%;
}
#ioe-off {
    position: fixed;
    top: 60px;
    overflow: hidden;
    background: #fff;
    width: 100%;
}

#dramatically-changing {

    background: #fff;
    background-size: cover;
    -webkit-transform: translateZ(0)
}
.hotspot {
    width: 1.3%;
    display: block;
    position: absolute;
    cursor: pointer;
    opacity: 0.6;
}
    .hotspot:hover{
        opacity: 1;
    }
    .hotspot  img{
        /*width: 25px;*/
    }

.video-item {
    cursor: pointer;
}
.hotspot:hover,
.hotspot.active
{
    opacity: 1.0;
}


#hs1 {
    bottom: 14.5vw;
    left: 44%;
}

#hs2 {
    bottom: 25vw;
    right: 64%;
}


#hs3 {
    bottom: 34vw;
    left: 58%;
}


#hs4 {
    bottom: 21vw;
    right: 60%;
}

#hs5{
    bottom: 40vw;
    right: 51%;
}

#hs6 {
    bottom: 39vw;
    left: 62%;
}

#hs7 {
    top: 27vw;
    left: 55%;
}

#hs8 {
    bottom: 18vw;
    right: 51%;
}

#hs9 {
    bottom: 18.5vw;
    right: 35%;
}


#hs10 {
    bottom: 22.5vw;
    left: 65%;
}

#hs11 {
    bottom: 26vw;
    left: 40%;
}





 /*Shf1*/

#hsf1 {
    bottom: 14.5vw;
    left: 44%;
}
#hsf2 {
    bottom: 25vw;
    right: 64%;
}
#hsf3 {
    bottom: 34vw;
    left: 58%;
}

#hsf4{
    bottom: 21vw;
    right: 60%;
}

#hsf5 {
    bottom: 40vw;
    right: 51%;
}

#hsf6 {
    bottom: 39vw;
    left: 62%;
}

#hsf7 {
    top: 27vw;
    left: 55%;
}

#hsf8 {
    bottom: 18vw;
    right: 51%;
}

#hsf9 {
	bottom: 18.5vw;
    right: 35%;
}

#hsf10 {
    bottom: 22.5vw;
    left: 65%;
}
#hsf11 {
    bottom: 26vw;
    left: 40%;
}








@media screen\0 {

#hs1 {
    bottom: 14.5vw;
    left: 44%;
}

#hs2 {
    bottom: 25vw;
    right: 64%;
}


#hs3 {
    bottom: 34vw;
    left: 58%;
}


#hs4 {
    bottom: 21vw;
    right: 60%;
}

#hs5{
    bottom: 40vw;
    right: 51%;
}

#hs6 {
    bottom: 39vw;
    left: 62%;
}

#hs7 {
    top: 27vw;
    left: 55%;
}

#hs8 {
    bottom: 18vw;
    right: 51%;
}

#hs9 {
    bottom: 18.5vw;
    right: 35%;
}


#hs10 {
    bottom: 22.5vw;
    left: 65%;
}

#hs11 {
    bottom: 26vw;
    left: 40%;
}





 /*Shf1*/

#hsf1 {
    bottom: 14.5vw;
    left: 44%;
}
#hsf2 {
    bottom: 25vw;
    right: 64%;
}
#hsf3 {
    bottom: 34vw;
    left: 58%;
}

#hsf4{
    bottom: 21vw;
    right: 60%;
}

#hsf5 {
    bottom: 40vw;
    right: 51%;
}

#hsf6 {
    bottom: 39vw;
    left: 62%;
}

#hsf7 {
    top: 27vw;
    left: 55%;
}

#hsf8 {
    bottom: 18vw;
    right: 51%;
}

#hsf9 {
	bottom: 18.5vw;
    right: 35%;
}

#hsf10 {
    bottom: 22.5vw;
    left: 65%;
}
#hsf11 {
    bottom: 26vw;
    left: 40%;
}




}




.textspot {
    font-size: 0.6em;
    line-height: 1.4em;
    color: #fff;
    display: block;
    position: absolute;
    padding: 6px 10px;
    margin-top: 5px;
    display: none;
}
#ts10 {
    top: 5%;
    right: 29%;
    text-align: right;
}
#ts9 {
    bottom: 30%;
    right: 28.5%;
    text-align: right;
}
#ts7{
    bottom: 26%;
    left: 74%;
    text-align: left;
}
#ts8 {
    bottom: 24%;
    right: 13%;
    text-align: right;
}
#ts1 {
    bottom: 25%;
    right: 35.5%;
    text-align: right;
}
#ts6 {
    bottom: 24%;
    right: 50.5%;
    text-align: right;
}
#ts2 {
    bottom: 21%;
    right: 51.5%;
    text-align: right;
}
#ts11 {
    bottom: 20.5%;
    right: 17.5%;
    text-align: right;
}
#ts3 {
    bottom: 14%;
    right: 14.5%;
    text-align: right;
}
#ts5{
    bottom: 20%;
    right: 28.5%;
    text-align: right;
}
#ts6 {
    bottom: 22%;
    right: 36%;
    text-align: right;
}



.callout-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(13, 32, 54, .2);
}
.mwrapper {
    position: relative;
    height: 100vh;
}
.mbox {
    background: rgba(13, 32, 54, .8);
    color: #fff;
    width: 85%;
    height: auto;
    padding: 4vh 0 4vh 5%;
    margin-left: 5%;
    margin-top: 5vh;
    display: block;
    position: absolute;
    bottom: 20vh;
}
#boat-off-instructions {
    max-width: 1530px;
    position: absolute;
    padding: 0 15px;
    bottom: 10vh;
    left: 0;
    color: #fff;
    margin: auto;
    right: 0;
}



.smallbox {
    width: 40%;
    height: auto;
    padding: 3vh 2% 1vh 4%;
    margin-left: 5%;
    margin-top: 25vh;
}
.smallbox .ioe-on-info-block {
    width: 100%;
    float: none;
}
.smallbox-top .ioe-on-info-block {
    width: 100%;
    float: none;
}
.smallbox-top {
    width: 40%;
    height: auto;
    padding: 3vh 2% 1vh 4%;
    margin-left: 5%;
    margin-top: 5vh;
}

.col-point{
    width: 360px;
}

.par{
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}
.type-top{
    max-width: 1530px;
    position: absolute;
    padding: 0 15px;
    top: 15vh;
    left: 0;
    color: #fff;
    margin: auto;
    right: 0;
}

.ener-list{
    overflow: hidden;
}
    .ener-list li{
        float: left;
        margin-right: 70px;
        margin-bottom: 27px;
    }

    .ener-list li:nth-child(3n+3){
        margin-right: 0;
    }


.type-icon{
    background: url("../img/icon-type.png") 0 0 no-repeat;
    display: block;
    width: 60px;
    height: 60px;
}
    .type-icon.ic-1{
        background-position: 0 0;
    }
        .type-icon.ic-1:hover,
        .rotator-pager li.current  .type-icon.ic-1{
            background-position: -61px 0;
        }

    .type-icon.ic-2{
        background-position:  0 -60px;
    }
        .type-icon.ic-2:hover,
            .rotator-pager li.current  .type-icon.ic-2
        {
            background-position: -61px -60px;
        }
    .type-icon.ic-3{
        background-position:  0 -120px;
    }
        .type-icon.ic-3:hover,
        .rotator-pager li.current  .type-icon.ic-3{
            background-position:  -61px -120px;
        }
    .type-icon.ic-4{
        background-position:  0 -180px;
    }
        .type-icon.ic-4:hover,
        .rotator-pager li.current  .type-icon.ic-4{
            background-position:  -61px -180px;
        }
    .type-icon.ic-5{
        background-position:  0 -240px;
    }
        .type-icon.ic-5:hover,
        .rotator-pager li.current  .type-icon.ic-5{
            background-position:  -61px -240px;
        }
    .type-icon.ic-6{
        background-position: 0 -300px;
    }
        .type-icon.ic-6:hover,
        .rotator-pager li.current  .type-icon.ic-6{
            background-position:  -61px -300px;
        }
    .type-icon.ic-7{
        background-position:  0 -360px;
    }
        .type-icon.ic-7:hover,
        .rotator-pager li.current  .type-icon.ic-7{
            background-position: -61px -360px;
        }
    .type-icon.ic-8{
        background-position: 0 -420px;
    }
        .type-icon.ic-8:hover,
        .rotator-pager li.current  .type-icon.ic-8{
            background-position: -61px -420px;
        }
    .type-icon.ic-9{
        background-position: 0 -480px;
    }
        .type-icon.ic-9:hover,
        .rotator-pager li.current  .type-icon.ic-9{
            background-position: -61px  -480px;
        }
    .type-icon.ic-10{
        background-position:  0 -540px;
    }
        .type-icon.ic-10:hover,
        .rotator-pager li.current  .type-icon.ic-10{
            background-position:  -61px -540px;
        }
    .type-icon.ic-11{
        background-position:  0 -600px;
    }
        .type-icon.ic-11:hover,
        .rotator-pager li.current  .type-icon.ic-11{
            background-position: -61px -600px;
        }
    .type-icon.ic-12{
        background-position: 0 -660px;
    }
        .type-icon.ic-12:hover,
        .rotator-pager li.current  .type-icon.ic-12{
            background-position: -61px -660px;
        }





    /*  --- */
@media (min-width: 1600px) {
    /*p {*/
        /*line-height: 23px;*/
        /*font-size: 16px;*/
        /*max-width: 90%;*/
    /*}*/
    #sail-column {
        position: relative;
        width: 40%;
        margin: 0;
        padding: 0;
        padding-top: 60px;
        padding-left: 40%;
        padding-bottom: 60px;
    }
    /*h1 {*/
        /*font-size: 6rem;*/
        /*font-weight: normal;*/
        /*letter-spacing: -2px;*/
        /*margin: 0 0 1.5vw 0;*/
        /*padding: 0;*/
        /*font-weight: normal;*/
    /*}*/
    /*h2 {*/
        /*font-size: 4.5vw;*/
        /*font-weight: normal;*/
        /*letter-spacing: -0.1vw;*/
        /*margin: 0 0 0 0;*/
        /*padding: 0;*/
        /*width: 45vw;*/
    /*}*/
    /*.mbox h2 {*/
        /*font-size: 4.5vw;*/
        /*font-weight: normal;*/
        /*letter-spacing: -0.05vw;*/
        /*margin: 0 0 2vh 0;*/
        /*padding: 0;*/
        /*width: 100%;*/
    /*}*/

}
@media (max-width: 500px) {
    .footer-secondary-content {
        background: #9a9b9f;
    }
    .footer-social {
        float: none;
        padding-left: 20px;
        padding-bottom: 20px;
    }
    .footer-legal {
        float: none;
        padding-left: 20px;
        padding-bottom: 20px;
    }

    .asset-item {
        width: 33%;
        padding-left: 8%;
    }
    .learn-more {
        margin: 3vw auto;
        width: 80%;
        float: none;
        text-align: center;
    }
    #ioe-on {
        display: none;
        position: relative;
    }
    #ioe-off {
        display: none;
        position: relative;
    }
    .top-logo {
        float: left;
        width: 60px;
        margin: 0;
        opacity: 0.8;
    }

    #sea-text {
        position: absolute;
        top: 20%;
        left: 5%;
    }
    #cisco-logo-on-beach {
        width: 15vw;
        margin: 5vw 8vw;
    }
    #cisco-logo-in-sea {
        width: 15%;
    }
    #sea-change {
        margin-top: 80px;
    }
    #sail-column {
        width: 90%;
        padding-top: 5%;
        padding-left: 5%;
        padding-bottom: 0%;
    }
    #foxy-info {
        padding-top: 5%;
        padding-left: 5%;
        padding-bottom: 0%;
        background: #fff;
    }
    #dramatically-changing {
        padding-top: 5%;
        padding-left: 5%;
        padding-bottom: 5%;
        background: #171b2f;
        background-size: cover;
    }
    #ioe-sets-sail {
        background: #0a1a29;
    }
    .img-poster {
        width: 100vw;
        margin-left: -5vw;
        padding-top: 2%;
    }
    #connecting-column {
        width: 90%;
        padding-top: 3%;
        padding-bottom: 0;
        padding-left: 5%;
    }
    #seconds-column {
        width: 90%;
        padding-top: 3%;
        padding-bottom: 0;
        padding-left: 5%;
    }


    #connecting-assets {
        background: #4794c8;
    }
    #seconds-count {
        background: none;
        background: #4794c8;
    }
    .assets-list {
        width: 90%;
        padding-top: 2%;
        padding-bottom: 200px;
    }
    #dramatically-changing {
        background: none;
        background: #1a4c69;
    }
}
@media (max-width: 767px) {
   #sea-change {
        display: block;
        max-height: 550px;
    }
    .invisible {
        opacity: 1;
    }
    .learn-more p {
        font-size: 18px;
        line-height: 24px;
    }
    .fl-diagram {
        padding-bottom: 22vh;
    }
    .fl-footer {
        width: 90%;
    }
    .ioe-column {
        width: 90%;
        position: relative;
    }
    .diagram-item {
        padding: 0 5% 10px 0;
        display: block;
        width: 40%;
        text-align: center;
        font-size: 14px;
        line-height: 17px;
        margin: 5px auto !important;
    }
    .ioe-on-info-block {
        width: 100%;
        float: none;
    }
    .callout-overlay {
        position: relative;
        width: 90%;
        height: auto;
        background: rgba(13, 32, 54, 1);
        margin: 0 !important;
        padding: 0 0 0 10% !important;
    }
    .mbox {
        background: none;
        padding: 25vh 0% 0 0% !important;
        margin: 0 !important;
        width: 80%;
        position: relative;
    }
    .smallbox {
        background: none;
        padding: 0 0% !important;
        margin: 0;
        width: 80%;
    }
    .smallbox-top {
        background: none;
        padding: 0 5%;
        margin: 0;
        width: 90%;
    }
    .ioe-on-info-block p {
        padding-left: 55px;
        padding-bottom: 18px;
        font-size: 12px;
        margin: 0;
    }
    .not-mobile {
        display: none;
    }
    .mobile {
        display: block !important;
    }

    #co1 {
        display: block;
    }
    #co2 {
        display: block;
    }
    #co3 {
        display: block;
    }
    #co4 {
        display: block;
    }
    #co5 {
        display: block;
    }
    #co6 {
        display: block;
    }
    #co7 {
        display: block;
    }
    #co8 {
        display: block;
    }
    #co9 {
        display: block;
    }
    #co10 {
        display: block;
    }
    #co11 {
        display: block;
    }
}

@media only screen
and (min-device-width : 769px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
    .not-mobile-video {
        display: none;
    }
    .mobile {
        display: block !important;
    }
    .boat-diagram-on {
        height: 668px !important;
    }
    .boat-diagram-off {
        height: 668px !important;
    }
    .img-poster {
        padding-top: 2% !important;
    }
    .ioe-column {
        top: 3% !important;
    }
    .fl-diagram {
        padding-top: 2% !important;
        padding-bottom: 2% !important;
    }
    .asset-icon {
        height: 8% !important;
        padding-bottom: 6% !important;
    }
    .diagram-item {
        padding-top: 0 !important;
        padding-bottom: 2% !important;
    }
    .mbox h2 {
        margin-bottom: 2% !important;
    }
    .callout-overlay {
        height: 668px !important;
    }
    .mwrapper {
        height: 668px !important;
    }
    .mbox {
        padding-top: 4% !important;
        padding-bottom: 4% !important;
        margin-top: 5% !important;
        bottom: 20% !important;
    }
    /*#boat-off-instructions {*/
        /*top: 20% !important;*/
    /*}*/
    .smallbox {
        padding: 3% 2% 1% 4% !important;
        margin-top: 20% !important;
    }
    .smallbox-top {
        padding: 3% 2% 1% 4% !important;
        margin-top: 5% !important;
    }







}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
    .not-mobile-video {
        display: none;
    }
    .mobile {
        display: block !important;
    }


    .boat-diagram-on {
        height: 924px !important;
    }
    .boat-diagram-off {
        height: 924px !important;
    }
    .img-poster {
        padding-top: 2% !important;
    }
    .ioe-column {
        top: 3% !important;
    }
    .fl-diagram {
        padding-top: 2% !important;
        padding-bottom: 2% !important;
    }
    .asset-icon {
        height: 8% !important;
        padding-bottom: 6% !important;
    }
    .diagram-item {
        padding-top: 0 !important;
        padding-bottom: 2% !important;
    }
    .mbox h2 {
        margin-bottom: 2% !important;
    }
    .callout-overlay {
        height: 924px !important;
    }
    .mwrapper {
        height: 924px !important;
    }
    .mbox {
        padding-top: 4% !important;
        padding-bottom: 4% !important;
        margin-top: 5% !important;
        bottom: 20% !important;
    }
    #boat-off-instructions {
        top: 20% !important;
    }
    .smallbox {
        padding: 3% 2% 1% 4% !important;
        margin-top: 20% !important;
    }
    .smallbox-top {
        padding: 3% 2% 1% 4% !important;
        margin-top: 5% !important;
    }




}


@media (max-width: 860px) {
    .asset-item {
        padding: 10px 0 0px 0;
        width: 33%;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .asset-icon {
        height: 40px;
        display: block;
        text-align: center;
        margin: auto;
        padding-bottom: 10px;
    }
    .ioe-off-info-block {
        padding: 4% 0% 0% 5%;
        border: none;
        margin: 0 0 0 0;
    }
    /*#ioe-sets-sail {*/
        /*background: #0a1a29 url(' boat_on_sea_small.jpg') left bottom no-repeat;*/
        /*background-size: 100%;*/
    /*}*/
    #connecting-assets {
        background: #4794c8;
        background-size: 100%;
    }
    #dramatically-changing {
        background: none;
        background: #fff;
    }
    #endcap {
        background: #fff;
        background-size: cover;
    }

    .pad-paragraph {
        margin-bottom: 70px !important;
    }
}
@media (max-width: 1280px) {

    #endcap {
        background: #fff;
        background-size: cover;
    }

}

@media screen and (max-width: 737px) {
	.boat-diagram-on {
		height: 391px;
	}
}

@media (max-width: 668px) {
    .not-mobile-video {
        display: none;
    }
    #sea-text {
        top: 35%;
    }
    .boat-diagram-on {
        height: 330px;
    }
}
@media screen and (max-width: 768px) {


 	.boat-diagram-on{
        height: 386px !important;
    }


    .boat-diagram-off{
         height: 386px  !important;
    }
		#placeholder-off {
        display: none;
		}

		#placeholder-on{
            opacity: 1!important;
          height: 386px !important;
		}


	.projects{
		display: none;
	}

	/*#placeholder-off,*/
	/*.boat-diagram-off*/
	/*{*/
		/*display: none!important;*/
	/*}*/
}




@media (max-width: 500px) {
    /*.hotspot {*/
        /*display: none;*/
    /*}*/

    .hotspot {
        width: 2%;
    }
    #seconds-count {
        background: none;
        background: #1a4c69;
        padding-bottom: 3%;
    }
    #ioe-sets-sail {
        background: none;
        background: #0a1a29;
        padding-bottom: 3%;
    }
    #connecting-assets {
        background: none;
        background: #4794c8;
        padding-bottom: 3%;
    }
    #dramatically-changing {
        /*background: none;*/
        /*background: #1a4c69;*/
    }
    #dramatic-text p {
        padding-right: 0;
    }
    .asset-item {
        padding: 10px 0 0px 0;
        width: 33%;
        font-size: 11px !important;
        line-height: 14px !important;
    }
    #endcap {
        background: none;
        backgrouhd: #fff;
    }
    .asset-item {
        width: 100%;
    }


    .boat-diagram-on {
        height: 260px !important;
    }

    #placeholder-on{
      height: 260px !important;
    }

    /*.boat-diagram-off {*/
        /*height: 420px !important;*/
    /*}*/
    .callout-overlay {
        height: auto !important;
    }

    .ioe-column {
        top: 10px !important;
    }
    .fl-diagram {
        padding-bottom: 22px !important;
        padding-top: 10px !important;
    }
    #boat-off-instructions {
        /*top: 20px !important;*/
    }

    .mbox h2 {
        font-size: 25px;
        font-weight: normal;
        letter-spacing: 0;
        margin: 0;
        padding: 0;
        width: auto;
    }

    .mbox {
        background: rgba(13, 32, 54, .8);
        color: #fff;
        width: 85%;
        height: auto;
        padding: 20px 0 0 0 !important;
        margin-left: 0;
        margin-top: 0;
        display: block;
        position: relative;
        bottom: 0;
    }

}


@media (max-width: 415px){
    .hotspot{
        width: 3%;
    }
    .boat-diagram-on {
        height: 220px !important;
    }

    #placeholder-on{
      height: 220px !important;
    }



}

@media screen and (max-width: 320px) {

    #placeholder-on{
        opacity: 1!important;
      height: 182px !important;
    }
	.boat-diagram-on {
		height: 182px !important;
	}
}