@font-face {
    font-family: 'CircularStd-Bold';
    src: url(../../fonts/CircularStd-Bold.ttf);
}

@font-face {
    font-family: 'ConduitITCStd';
    src: url(../../fonts/ConduitITCStd.otf);
}

@font-face {
    font-family: 'ConduitITCStd-Bold';
    src: url(../../fonts/ConduitITCStd-Bold.otf);
}

@font-face {
    font-family: 'Museo-Slab';
    src: url(../../fonts/Museo-Slab.otf);
}

@font-face {
    font-family: 'DINCondensedBold';
    src: url(../../fonts/DINCondensedBold.ttf);
}

* {
    margin: 0px;
    padding: 0px;
    transition: 0.25s ease;
    border: none;
    color: #2d2d2d;
    font-family: CircularStd-Bold;
    font-weight: normal;
    font-size: 20px;
    box-sizing: border-box;
}


/*#home {}*/

.pointer {
    cursor: pointer;
}

li {
    list-style-type: none;
    display: inline-block;
}

li:last-child {
    margin-right: 0;
}

p {
    font-weight: 100;
    font-family: 'helvetica';
}

a {
    /*    color: inherit;*/
    text-decoration: none;
    cursor: pointer;
}

a:focus,
a:hover {
    /*    color: white !important;*/
    /*    text-decoration: none !important;*/
}

.active-link > a {
    text-decoration: underline;
}

.center {
    margin: 0px auto;
}

.block {
    display: block;
}

.hide {
    display: none;
}

.inline-block {
    display: inline-block;
}


/*

.full-width {
    width: 100%;
}
*/

.TAcenter {
    text-align: center;
}

.TAleft {
    text-align: left;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.full-width {
    width: 2550px;
}

[class*="col-"] {
    float: left;
    /*    padding: 10px;*/
}

.row {
    width: 100%;
    /*
    margin-left: 0;
    margin-right: 0;
*/
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .col-m-1 {
        width: 8.33%;
    }
    .col-m-2 {
        width: 16.66%;
    }
    .col-m-3 {
        width: 25%;
    }
    .col-m-4 {
        width: 33.33%;
    }
    .col-m-5 {
        width: 41.66%;
    }
    .col-m-6 {
        width: 50%;
    }
    .col-m-7 {
        width: 58.33%;
    }
    .col-m-8 {
        width: 66.66%;
    }
    .col-m-9 {
        width: 75%;
    }
    .col-m-10 {
        width: 83.33%;
    }
    .col-m-11 {
        width: 91.66%;
    }
    .col-m-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .col-1 {
        width: 8.33%;
    }
    .col-2 {
        width: 16.66%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.33%;
    }
    .col-5 {
        width: 41.66%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.33%;
    }
    .col-8 {
        width: 66.66%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.33%;
    }
    .col-11 {
        width: 91.66%;
    }
    .col-12 {
        width: 100%;
    }
}

.dt {
    display: none !important;
}

.mob {
    display: block!important;
}

[id*="tab-"] {
    display: none;
}


/*END PRE-REQS*/

/*HEADER*/

header {
    padding: 36px calc(1vw + 20px);
    background-color: white;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
}

header nav {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex-direction: row;
    /*    align-content: center;*/
    /*justify-content: center;*/
}


/*header nav .nav-opts .nav-opts-cont {}*/

header nav .logo-cont {
    display: flex;
    flex: 2;
    align-items: center;
}

header nav .nav-opts {
    float: right;
    flex: 3;
    display: flex;
    justify-content: flex-end;
    height: 50px;
    align-items: center;
}

header nav .logo-cont #nav-logo {
    height: 40px;
}

header nav .nav-opts .nav-opts-cont ul li {
    margin-right: 40px;
}

header nav .nav-opts .nav-opts-cont ul li:last-child {
    margin-right: 0;
}

header nav .nav-opts .nav-opts-cont ul li,
header nav .nav-opts .nav-opts-cont ul li a {
    font-size: 10pt;
    color: #3b3e3f;
}

header nav .nav-opts .nav-opts-cont ul .nav-break {
    color: #8eaeef;
}

header nav .desk-nav {
    display: none;
}

header nav .mob-nav {
    display: flex;
}

header nav .mob-nav img {
    height: 50px;
}


/*
header nav .nav-opts .nav-opts-cont ul li:last-child {
    margin-right: 0px;
}
*/

/*SCENES*/

/*[id*="bg-"] {*/

/*
    z-index: -1;
}
*/

#info {
    position: fixed;
    top: 100px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 20px;
    z-index: 9999;
    border-radius: 5px;
}

[id*="fg-"] {
    z-index: 100;
}

.layer1 {
    z-index: 10;
}

.layer2 {
    z-index: 20;
}

.layer3 {
    z-index: 33;
}

.layer4 {
    z-index: 40;
}

.layer5 {
    z-index: 50;
}

.layer6 {
    z-index: 60;
}

.layer7 {
    z-index: 70;
}

.layer8 {
    z-index: 80;
}

.layer9 {
    z-index: 90;
}

.layer10 {
    z-index: 100;
}

[class*="scene-"] {
    display: flex;
    justify-content: center;
}

body {
    min-height: 100vh;
    width: 100%;
    min-width: 300px;
    background-color: #cccccc;
    margin: 0 auto;
}


/*DELET PARALLAX*/

body {
    height: auto !important;
}

#main {
    width: 100vw;
    /*    position: absolute;*/
    left: 0;
    right: 0;
    margin: auto;
}

#main .smol-display {
/*
    background: url('../../pics/mob.png');
    background-size: cover;
*/
    margin-top:120px;
    background: url('../../pics/mob.png') scroll no-repeat center/cover;
    width: 100%;
    height: 582vw;}

#scene-1 {
    position: fixed;
    left: calc(-1250px + 50%);
    top: 0;
    margin: 0px auto;
    height: 100vh;
    /*    width: 100%;
    width: 100vw;
    display: flex;
    justify-content: center;
*/
}

#main,
#scene-1 {
    width: 100%;
    /*    min-width: 2500px;*/
}

#scene-1 {}

#sky1 {
    left: 0;
    min-width: 100%;
    z-index: 20;
    /*    width: 2516px;*/
}

#sun {
    z-index: 30;
    width: 150px;
    right: 20%;
    top: 18%;
}

#mountain1 {
    left: 0;
    z-index: 40;
    top: 45%;
}

#birdies1 {
    z-index: 50;
    top: 10%;
    width: 498px;
    left: 10%;
}

#mountain2 {
    left: 0;
    z-index: 60;
    bottom: 0;
    top: 42%;
}

#reflection {
    z-index: 70;
    width: 948px;
    top: calc(42% + 350px);
    /*    top: 910px;*/
}

#mountain3 {
    left: 0;
    min-width: 100%;
    z-index: 80;
    top: 44%;
}

#mountain4-left {
    z-index: 80;
    left: 0;
    width: 1346px;
    top: 55%;
}

#mountain4-right {
    right: 0;
    z-index: 80;
    width: 1215px;
    top: 50%;
}

#mountain5-left {
    left: 0;
    z-index: 90;
    width: 1145px;
    top: 60%;
}

#mountain5-right {
    right: 0;
    z-index: 90;
    width: 1093px;
    top: 64%;
}

#birdies2 {
    z-index: 200;
    top: 60%;
    right: 15%;
    width: 658px;
}

#scene-2 {
    position: relative;
    margin-top: -500px;
    /*    margin-top: -16.47vw;*/
}

#sea {
    left: 0;
    top: calc(42% + 350px);
    /*    top: calc(42% + 220px);*/
    right: 0px;
    z-index: 65;
}

#mountain6-left {
    left: 0;
    z-index: 100;
    width: 799px;
    top: 82%;
}

#mountain6-right {
    right: 0;
    z-index: 100;
    width: 776px;
    top: 82%;
}

#land {
    z-index: 100;
}

#boat1 {
    z-index: 110;
    top: 105%;
    width: 250px;
    /*    position: fixed;*/
    right: 20%;
}

#pollution1 {
    z-index: 105;
    top: 122%;
    right: 0;
    width: 700px;
}

#boat2 {
    z-index: 120;
    top: 110%;
    left: 15%;
    width: 500px;
}

#pollution2 {
    z-index: 115;
    top: 105%;
    left: 10%;
    width: 1200px;
}

#boat3 {
    z-index: 130;
    top: 97%;
    right: 10%;
    width: 600px;
}

#net {
    margin-top: 736px;
    background-position: center;
    z-index: 140;
}

#dead-fish4 {
    z-index: 130;
    top: 107%;
    right: 10%;
    width: 60px;
}

#dead-fish5 {
    z-index: 130;
    top: 107%;
    right: 40%;
    width: 90px;
}

#dead-fish6 {
    z-index: 171;
    top: 107%;
    left: 13%;
    width: 160px;
}

#dead-fish7 {
    z-index: 211;
    top: 107%;
    right: 10%;
    width: 100px;
}

#dead-fish8 {
    z-index: 211;
    top: 107%;
    right: 50%;
    width: 160px;
}

#debris1 {
    z-index: 211;
    top: 107%;
    right: 50%;
    width: 2000px;
}

#debris2 {
    z-index: 211;
    top: 107%;
    right: 50%;
    width: 500px;
}

#scene-3 {
    position: relative;
    margin-top: -233px;
}


/*
#bg-scene-3 {
    background-image: url(../../pics/bg-scene-3.png);
    margin-top: -104px;
    z-index: 102;
}
*/

#reef1 {
    z-index: 160;
    top: 105%;
    left: 0;
    width: 1346px;
}

#reef2 {
    z-index: 170;
    top: 105%;
    left: 0;
    width: 951px;
}

#reef3 {
    z-index: 210;
    top: 105%;
    left: 0;
}

#stream {
    z-index: 180;
    left: 0;
    top: 120%;
}

#fish1 {
    z-index: 190;
}

#fish2 {
    z-index: 200;
}


/*

#reef3 {
    z-index: 210;
}
*/

#reef-sunset {
    z-index: 220;
    left: 0;
    top: 98%;
}

#fish3 {
    z-index: 230;
}

#scene-4 {
    position: relative;
    margin-top: -5px;
    /*    margin-top: -8.5vw;*/
}

#sunset {
    z-index: 215;
    left: 0;
    top: 115%;
}

#sun2 {
    z-index: 222;
    left: 32%;
    top: 125%;
    width: 120px;
}

#smog1 {
    z-index: 221;
    left: 0;
    top: 100%;
}

#smog2 {
    z-index: 221;
    left: 0;
    top: 140%;
}

#plateau {
    z-index: 225;
    left: 0%;
    top: 107%;
    width: 1095px;
}

#machinery1 {
    z-index: 225;
    left: 10%;
    width: 283px;
    top: calc(107% - 60px);
}

#landfill1 {
    z-index: 230;
    left: 0;
    top: 110%;
}

#landfill2 {
    z-index: 235;
    top: 105%;
    left: 0;
}

#machinery2 {
    z-index: 233;
    right: 48%;
    top: 115%;
    width: 500px;
}

#machinery2-back {
    z-index: 233;
    right: 47%;
    top: calc(115% - 20px);
    width: 400px;
}

#trash {
    z-index: 233;
    right: 44%;
    top: calc(115% - 0px);
    width: 400px;
}

#machinery3 {
    z-index: 233;
    right: -10%;
    top: 115%;
    width: 400px;
}

#landfill3 {
    z-index: 245;
    left: 0;
    top: 105%;
}

#landfill4 {
    z-index: 255;
    left: 0;
    top: 110%;
}

#landfill5 {
    z-index: 265;
    left: 0;
    top: 115%;
}

#landfill6 {
    z-index: 275;
    left: 0;
    top: 115%;
}

#landfill7 {
    z-index: 285;
    left: 0;
    top: 115%;
}

#landfill8 {
    z-index: 310;
    left: 0;
    top: 102%;
}

#scene-5 {
    position: relative;
    margin-top: -300px;
    /*    margin-top: -16.9vw;*/
}


/*
#apple {
    z-index: 312;
    top: 40%;
    right: 42%;
    width: 328px;
}
*/

#apple {
    z-index: 312;
    top: 108%;
    left: 39%;
    width: 328px;
}

#sky2 {
    z-index: 280;
    top: 90%;
    left: 0;
}


/*
#sun2 {
    background-image: url(../../pics/sun2.png);
    z-index: 282;
    height: 500px;
}
*/

#cloud1 {
    z-index: 280;
    top: 100%;
    left: 15%;
    width: 537px;
}

#cloud2 {
    z-index: 280;
    top: 120%;
    left: 5%;
    width: 414px;
}

#cloud3 {
    z-index: 280;
    top: 135%;
    right: 20%;
    width: 200px;
}

#cloud4 {
    z-index: 280;
    top: 100%;
    right: 5%;
    top: 150%;
    width: 494px;
}

#birds1 {
    z-index: 329;
    top: 100%;
    left: 2%;
    top: 150%;
    width: 494px;
}

#birds2 {
    z-index: 329;
    top: 100%;
    right: 15%;
    top: 150%;
    width: 494px;
}

#cloud5 {
    z-index: 280;
    top: 110%;
    right: 15%;
    width: 600px;
}

#cloud6 {
    width: 1030px;
    z-index: 280;
    top: 130%;
    left: 3%;
}

#buildings1 {
    z-index: 282;
    top: 90%;
    left: 0;
}

#buildings2 {
    z-index: 283;
    top: 125%;
    left: 0;
}

#tracks {
    z-index: 283;
    top: calc(120% + 800px);
    left: 0;
}

#monorail {
    z-index: 283;
    top: calc(120% + 740px);
    left: 0;
    width: 880px;
}

#truck1 {
    z-index: 331;
    /*    top: 176%;*/
    left: 40%;
    width: 300px;
    top: calc(120% + 730px);
}

#truck2 {
    z-index: 331;
    /*    top: 176%;*/
    left: 30%;
    width: 300px;
    top: calc(120% + 730px);
}

#cyclist1 {
    z-index: 332;
    /*    top: 186%;*/
    right: 15%;
    width: 80px;
    top: calc(120% + 874px);
}

#cyclist2 {
    z-index: 332;
    /*    top: 186%;*/
    left: 37%;
    width: 80px;
    top: calc(120% + 874px);
}

#cyclist3 {
    z-index: 332;
    top: 186%;
    left: 13%;
    width: 80px;
}

#empty-door {
    z-index: 329;
    top: calc(180% - 150px);
    left: 50.91%;
    width: 410px;
}

#door {
    z-index: 331;
    top: calc(178% - 91px);
    left: 50.93%;
    width: 110px;
}

#factory {
    z-index: 330;
    top: 120%;
    left: 0;
    position: fixed;
}

#facility {
    z-index: 328;
    top: 70%;
    left: 0;
}

#line1 {
    z-index: 329;
    top: 100%;
    left: calc(50% - 425px);
    height: 700px;
}

#line2 {
    z-index: 329;
    top: 105%;
    left: calc(50% - 275px);
    width: 550px;
    /*    height:700px;*/
}

#scene-6 {
    position: relative;
    /*    margin-top: -7vw;*/
    margin-top: -4px;
}

#bg-scene-6 {
    background-image: url(../../pics/bg-scene-6.png);
    z-index: 340;
}

#nut {
    z-index: 330;
    right: calc(50% - 400px);
    top: 185%;
    width: 800px;
    /*    background-image: url(../../pics/nut.png);*/
    /*
    min-width: 1243px;
    width: 1243px;
    height: 445px;
    position: relative;
    top: 2290px;
    left: 490px;
    z-index: 350;
*/
}

#proteins {
    z-index: 330;
    right: calc(50% + 150px);
    top: 105%;
    width: 200px;
}

#fat {
    z-index: 330;
    right: calc(50% - 100px);
    top: 105%;
    width: 200px;
}

#nutrients {
    z-index: 330;
    right: calc(50% - 350px);
    top: 105%;
    width: 200px;
}

#fish-feed {
    z-index: 356;
    right: calc(50% - 150px);
    top: 105%;
    width: 300px;
}

#mountain1v2 {
    left: 0;
    z-index: 330;
    top: 110%;
}

#birdies1v2 {
    z-index: 331;
    top: 100%;
    width: 498px;
    left: 2%;
}

#birdies2v2 {
    z-index: 336;
    top: 100%;
    right: 15%;
    width: 658px;
}

#mountain2v2 {
    left: 0;
    z-index: 335;
    bottom: 0;
    top: 117%;
}

#reflectionv2 {
    z-index: 340;
    width: 948px;
    left: 0;
    right: 0;
    top: calc(115% + 350px);
}

#mountain3v2 {
    left: 0;
    min-width: 100%;
    z-index: 345;
    /*    width: 2516px;*/
    top: 125%;
}

#mountain4-leftv2 {
    z-index: 345;
    left: 0;
    width: 1346px;
    top: 140%;
}

#mountain4-rightv2 {
    right: 0;
    z-index: 345;
    width: 1215px;
    top: 136%;
}

#mountain5-leftv2 {
    left: 0;
    z-index: 350;
    width: 1145px;
    top: 105%;
}

#mountain5-rightv2 {
    right: 0;
    z-index: 355;
    width: 1093px;
    top: 105%;
}

#seav2 {
    left: 0;
    top: 105%;
    right: 0px;
    z-index: 338;
}

#mountain6-leftv2 {
    left: 0;
    z-index: 360;
    width: 799px;
    top: 192%;
}

#mountain6-rightv2 {
    right: 0;
    z-index: 360;
    width: 776px;
    top: 192%;
}

#farm {
    right: 0;
    z-index: 365;
    top: 102%;
    left: 0;
}

#fish-right1 {
    right: 0;
    z-index: 365;
    top: 102%;
    right: 7%;
    width: 450px;
}

#fish-right2 {
    right: 0;
    z-index: 365;
    top: 102%;
    right: 4%;
    width: 50px;
}

#fish-right3 {
    right: 0;
    z-index: 365;
    top: 102%;
    right: 20%;
    width: 100px;
}

#fish-left1 {
    right: 0;
    z-index: 365;
    top: 102%;
    left: 11%;
    width: 450px;
}

#fish-left2 {
    right: 0;
    z-index: 365;
    top: 102%;
    left: 10%;
    width: 300px;
}

#fish-left3 {
    right: 0;
    z-index: 365;
    top: 102%;
    left: 0%;
    width: 300px;
}

#fish-left4 {
    right: 0;
    z-index: 364;
    top: 102%;
    left: 15%;
    width: 80px;
}

#fish-left5 {
    right: 0;
    z-index: 364;
    top: 102%;
    left: 15%;
    width: 300px;
}

#bottom-reef1 {
    right: 0;
    z-index: 363;
    top: 102%;
    left: 0;
}

#fish-bottom-left {
    right: 0;
    z-index: 364;
    top: 102%;
    left: 15%;
    width: 2000px;
}

#fish-bottom-right {
    right: 0;
    z-index: 364;
    top: 102%;
    left: 15%;
    width: 2000px;
}

#bottom-reef2 {
    right: 0;
    z-index: 364;
    top: 104%;
    left: 0;
}

.scene-7 {
    /*    margin-top: -4550px;*/
    width: 100%;
    height: calc(100vh - 120px);
    z-index: 400;
    position: fixed;
    left: 0;
    background-color: #002f4b;
    /*    background-color: rgba(0,0,0,0);*/
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}

.scene-7 .ending-slide {
    text-align: center;
}

.scene-7 .ending-slide #logo-tall {
    height: 181px;
    width: 200px;
    min-width: 100px;
}

.scene-7 .ending-slide h1 {
    font-family: ConduitITCStd;
    color: #ffffff;
    font-size: 45px;
    margin-top: 10vh;
    margin-bottom: 50px;
}

.scene-7 .ending-slide input {
    padding: 15px 25px;
    border-radius: 100px;
    font-size: 16px;
    width: 80%;
    margin-bottom: 20px;
}

.scene-7 .ending-slide #subscribe {
    padding: 20px 15px 15px 15px;
    width: 40%;
    border: none;
    margin-bottom: 0;
    color: white;
    background: rgba(108, 44, 198, 1);
    background: -moz-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(108, 44, 198, 1)), color-stop(100%, rgba(22, 123, 189, 1)));
    background: -webkit-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
    background: -o-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
    background: -ms-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
    background: linear-gradient(to right, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c2cc6', endColorstr='#167bbd', GradientType=1);
    font-family: ConduitITCStd;
    font-size: 20px;
}

.mob-closing {
    position: static;
    width: 100%;
}

[class*="keyart_layer"].parallax {}

.layer {
    width: 100%;
    position: absolute;
    height: auto;
}

.keyart {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0px auto;
}

.skrollable {}

.skrollable-after,
.skrollable-before {
    display: none;
}

.overhang {
    width: 3000px;
}


/*TEXT*/

[id*="text-"] {
    /*    background-color: rgba(255, 255, 255, 0.8);*/
    /*    padding: 100px;*/
    z-index: 500;
    display: inline-block;
    width: calc(22% + 200px);
    height: 220px;
    min-width: 200px;
    top: 50%;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("../../pics/text-bg.png");
    box-shadow: 0px 0px 45px 7px rgba(255, 255, 255, 0.2);
    top: 105%;
}

[id*="text-"] h1,
[id*="text-"] .h1 {
    padding: 15px 25px 7px 25px;
    width: 100%;
    color: white;
    font-family: 'ConduitITCStd';
    font-size: 30px;
    /*    margin: 20px 0 5px 0;*/
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
}

[id*="text-"] .h1 {
    margin-right: 10px;
}

[id*="text-"] p {
    padding: 20px 15px 0px 15px;
    line-height: 1.7em;
    font-family: 'CircularStd-Bold';
    font-size: 15px;
    color: white;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1);
    color: #2d2d2d;
}

[id*="text-"] .desc-sect {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    padding: 0px 20px;
}

[id*="text-"] .desc-sect p {
    margin: auto;
}

[id*="text-"] .desc-sect .number-stat {
    color: #f20878;
    font-size: 90px;
    font-family: "DINCondensedBold";
    margin: auto;
    padding: 40px 20px 0px 20px;
}

#number-stat-smol {
    font-size: 50px;
}

[id*="text-"] img {
    margin: auto;
    padding: 25px 25px 0px 25px;
}

[id*="text-left"] {
    border-radius: 0 0px 20px 0;
    left: 0;
}

[id*="text-right"] {
    border-radius: 0px 0 0 20px;
    right: 0px;
    /*    text-align: right;*/
}

[id*="text-mid"] {
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0px 0px 20px 20px;
}

#text-mid-5 {
    /*    position: absolute;*/
}

#text-left-1 {
    top: 66%;
}

#text-left-1 h1 {
    background-color: #1092a6;
}

#text-right-1 h1 {
    background-color: #1092a6;
}


/*SUBSEQUENT PAGES*/

/*ABOUT PAGE*/

[id*="main-"] {
    min-height: 100vh;
    width: 100%;
    margin-top: 120px;
    /*    width: 2200px;*/
    background-color: #ffffff;
}

[id*="main-"] .aside-nav {
    min-width: 250px;
}

[id*="main-"] .aside-main {
    max-width: calc(100vw - 250px);
}

[id*="main-"] .aside-main .header-cont,
[id*="main-"] .aside-nav .logo-cont {
    max-height: 150px;
    height: 150px;
}

[id*="main-"] .aside-nav .logo-cont {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

[id*="main-"] .aside-nav .logo-cont a img {
    max-height: 100px;
    max-width: 90%;
    height: auto;
}

[id*="main-"] .aside-nav .side-nav ul {
    margin: 50px 0;
}

[id*="main-"] .aside-nav .side-nav ul {
    text-align: center;
}

[id*="main-"] .aside-nav .side-nav ul li {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

[id*="main-"] .aside-nav .side-nav ul li a {
    font-size: 14px;
}

[id*="main-"] .aside-main .header-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 4;
    background-color: #8eaeef;
}

[id*="main-"] .aside-main .header-cont h2 {
    font-size: 30px;
    margin: 0px 50px;
    width: 100%;
    color: white;
}

[id*="main-"] [class*="content-"] {
    padding: 50px;
}

[id*="main-"] [class*="content-"] p,
[id*="main-"] [class*="content-"] p span {
    font-size: 16px;
}

.mob-closing {
    /*    display: none;*/
}


/*END ABOUT PAGE V1*/

/*ABOUT PAGE V2*/

.header-banner {
    background-image: url(../../pics/header-bg.jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);

    /*    margin-top:100px;*/
}

.products-banner {
    background-image: url(../../pics/products-bg.jpg);
}

.contact-banner {
    background-image: url(../../pics/contact-bg.jpg);
}

.about-banner {
    background-image: url(../../pics/about-bg.jpg);
}

.upcycling-banner {
    background-image: url(../../pics/upcycling-bg.jpg);
}

.waste-banner {
    background-image: url(../../pics/waste.jpg);
}

.certification-banner {
    background-image: url(../../pics/certification.jpeg);
}

.refeed-banner {
    background-image: url(../../pics/refeed-bg.jpg);
}


.refish-banner {
    background-image: url(../../pics/refish-bg.jpg);
}

.reoil-banner {
    background-image: url(../../pics/reoil-bg.jpg);
}


.resoil-banner {
    background-image: url(../../pics/resoil-bg.jpg);
}

.header-banner h2 {
    font-size: 30px;
    color: white;
}

.page-content {
    margin: 0px auto;
    width: 700px;
    padding: 50px 0px;
    max-width: 100%;
}

.page-content > p {
    padding: 0 30px 30px 30px;
    line-height: 1.4em;
}

.page-content p,
.page-content p span {
    font-size: 14px;
}

.page-content ul {
    padding: 0 30px 30px 30px;
    list-style-type: circle;

}

.page-content ul li {
    font-size: 14px;
    font-weight: 100;
    display: block;
    padding: 2px 0;
}

.page-article {
    padding: 20px;
}

.page-article img {
    width: 100%;
}

.page-article h3 {
    padding: 10px 0;
    font-size: 14px;
}

.page-article p {
    max-width: 80%;
}


/*END ABOUT PAGE V2*/

/*CONTACT PAGE*/

#contactform {
    padding: 30px;
}

input,
select,
textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

label {
    font-size: 14px;
}

.submit-btn {
    background-color: #ffffff;
    /*    color: black;*/
    padding: 10px;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;

}

.submit-btn:hover {
    background-color: #4db8e6;
    color: white;
    border: none;
}

/*
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
*/

/*END CONTACT PAGE*/

/*END SUBSEQUENT PAGES*/

/*NAV MODAL*/

#nav-modal {
    position: fixed;
    top: 120px;
    background-color: #002f4b;
    z-index: 1000;
    width: 100%;
    display: none;
}

#nav-modal * {
    color: white;
    font-size: 15px;
}

#nav-modal ul {
    text-align: center;
    /*    padding: 10px;*/
}

#nav-modal ul li {
    display: block;
    padding: 20px;
    font-size: 25px;
}

#nav-modal ul li:hover {
    -moz-box-shadow: inset 0px 0px 5px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px 0px 5px 6px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 0px 5px 6px rgba(0, 0, 0, 0.1);
}


/*END NAV MODAL*/

/*RESPONSOS*/

@media only screen and (min-width: 1000px) {
    header nav .desk-nav {
        display: flex;
    }
    header nav .mob-nav {
        display: none;
    }
    #nav-modal {
        display: none !important;
    }
}

@media only screen and (max-width: 1500px) {
    /*    LAPTOP*/
    .mob-closing {
        display: flex;
    }
    #scene-1 {
        display: none;
    }
    .tab {
        display: block;
    }
    .mob {
        display: none;
    }
    #main,
    #scene-1 {
        width: 100%;
        /*        min-width: 1500px;*/
        /*        left: calc(-750px + 50%);*/
    }
    header nav {
        position: relative;
        top: 5px;
    }
    header nav .logo-cont #nav-logo {
        height: 50px;
        margin: auto;
    }
    .overhang {
        width: 2000px;
    }
    [id*="text-"] {
        min-width: calc(500px);
    }
    [id*="text-"] h1,
    [id*="text-"] .h1 {
        font-size: 20px;
    }
    [id*="text-"] p {
        font-size: 14px;
    }
    [id*="text-"] .desc-sect .number-stat {
        font-size: 50px;
    }
    #number-stat-smol {
        font-size: 50px;
    }
    #line1 {
        left: calc(50% - 275px)
    }
    #sky1 {}
    #sun {}
    #mountain1 {}
    #birdies1 {}
    #mountain2 {}
    #reflection {
        width: 568px;
        /*        top: 775px;*/
        top: calc(42% + 220px);
    }
    #mountain3 {}
    #mountain4-left {
        width: 807.6px;
    }
    #mountain4-right {
        width: 729px;
        top: 47%;
    }
    #mountain5-left {
        width: 687px;
    }
    #mountain5-right {
        width: 655px;
    }
    #birdies2 {}
    #birds1 {
        width: 300px;
    }
    #birds2 {
        width: 300px;
    }
    #scene-2 {}
    #sea {
        width: 2500px;
        top: calc(42% + 220px);
    }
    #mountain6-left {
        width: 479px;
    }
    #mountain6-right {
        width: 465px;
    }
    #land {}
    #boat1 {}
    #pollution1 {}
    #boat2 {}
    #pollution2 {}
    #boat3 {}
    #net {}
    #scene-3 {}
    #reef1 {}
    #reef2 {}
    #reef3 {
        width: 2500px;
    }
    #stream {
        /*        overflow: hidden;*/
    }
    #fish1 {}
    #fish2 {}
    #reef-sunset {
        width: 2500px;
    }
    #fish3 {}
    #scene-4 {}
    #sunset {}
    #sun2 {
        right: 32%;
    }
    #smog1 {}
    #smog2 {}
    #plateau {}
    #machinery1 {}
    #landfill1 {}
    #landfill2 {}
    #machinery2 {}
    #machinery2-back {}
    #trash {}
    #machinery3 {}
    #landfill3 {
        top: 113%;
    }
    #landfill4 {}
    #landfill5 {}
    #landfill6 {}
    #landfill7 {
        width: 2300px;
    }
    #landfill8 {
        width: 2000px;
        top: 100%;
    }
    #apple {}
    #sky2 {
        width: 2500px;
    }
    #cloud1 {}
    #cloud2 {}
    #cloud3 {}
    #cloud4 {}
    #cloud5 {}
    #cloud6 {}
    #buildings1 {
        width: 2000px;
    }
    #buildings2 {
        width: 2000px;
        display: none;
    }
    #tracks {}
    #monorail {}
    #empty-door {}
    #door {}
    #factory {}
    #cyclist1,
    #cyclist2,
    #cyclist3,
    #tracks,
    #monorail,
    #truck1,
    #truck2 {
        display: none !important;
    }
    #facility {
        width: 2500px;
    }
    #scene-6 {}
    #bg-scene-6 {}
    #nut {}
    #sky1v2 {}
    #sunv2 {}
    #mountain1v2 {}
    #birdies1v2 {
        width: 300px;
    }
    #birdies2v2 {
        width: 300px;
    }
    #mountain4-leftv2 {
        width: 807.6px;
    }
    #mountain4-rightv2 {
        width: 729px;
        /*        top: 47%;*/
    }
    #mountain5-leftv2 {
        width: 687px;
    }
    #mountain5-rightv2 {
        width: 655px;
    }
    #mountain6-leftv2 {
        width: 479px;
    }
    #mountain6-rightv2 {
        width: 465px;
    }
    #birdies2v2 {}
    #seav2 {
        width: 2500px;
    }
    #mountain6-leftv2 {}
    #mountain6-rightv2 {}
    #farm {}
    #bottom-reef1 {
        width: 2500px;
    }
    #bottom-reef2 {
        width: 2500px;
    }
    #fish-left1 {
        width: 300px;
    }
}

@media only screen and (max-width: 768px) {
    .tab {
        display: none;
    }
    .mob {
        display: block;
    }
    #scene-1 {
        display: none;
    }
    #body,
    #main {
        width: 100vw;
        min-width: 100vw;
        left: 0;
    }
    .mob-closing .ending-slide #logo-tall {
        height: 90px;
        width: 100px;
        min-width: 100px;
    }
    .mob-closing .ending-slide h1 {
        font-family: ConduitITCStd;
        color: #ffffff;
        font-size: 25px;
        margin-top: 2vh;
        margin-bottom: 50px;
    }
    .mob-closing .ending-slide input {
        padding: 10px 20px;
        border-radius: 100px;
        font-size: 14px;
        width: 80%;
        margin-bottom: 20px;
    }
    .scene-7 .ending-slide #subscribe {
        padding: 15px 10px 10px 10px;
        width: 60%;
        margin-bottom: 0;
        color: white;
        background: rgba(108, 44, 198, 1);
        background: -moz-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(108, 44, 198, 1)), color-stop(100%, rgba(22, 123, 189, 1)));
        background: -webkit-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
        background: -o-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
        background: -ms-linear-gradient(left, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
        background: linear-gradient(to right, rgba(108, 44, 198, 1) 0%, rgba(22, 123, 189, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c2cc6', endColorstr='#167bbd', GradientType=1);
        font-family: ConduitITCStd;
        font-size: 16px;
    }
    /*
    #main,
    #scene-1 {
        width: 100%;
        min-width: 768px;
        left: 0;
    }
    #sky1 {
        width: 1500px;
    }
    #sun {
        width: 100px;
    }
    #mountain1 {}
    #birdies1 {
        width: 200px;
    }
    #mountain2 {}
    #reflection {
        width: 291px;
    }
    #mountain3 {}
    #mountain4-left {
        width: 373px;
    }
    #mountain4-right {
        width: 373px;
    }
    #mountain5-left {
        width: 351px;
    }
    #mountain5-right {
        width: 335px;
    }
    #birdies2 {}
    #scene-2 {}
    #sea {
        width: 1500px;
    }
    #mountain6-left {
        width: 245px;
    }
    #mountain6-right {
        width: 238px;
    }
    #land {}
    #boat1 {}
    #pollution1 {}
    #boat2 {}
    #pollution2 {}
    #boat3 {}
    #net {}
    #scene-3 {}
    #reef1 {}
    #reef2 {}
    #reef3 {}
    #stream {}
    #fish1 {}
    #fish2 {}
    #reef-sunset {}
    #fish3 {}
    #scene-4 {}
    #sunset {}
    #sun2 {}
    #smog1 {}
    #smog2 {}
    #plateau {}
    #machinery1 {}
    #landfill1 {}
    #landfill2 {}
    #machinery2 {}
    #machinery2-back {}
    #trash {}
    #machinery3 {}
    #landfill3 {}
    #landfill4 {}
    #landfill5 {}
    #landfill6 {}
    #landfill7 {}
    #landfill8 {}
    #apple {}
    #sky2 {}
    #cloud1 {}
    #cloud2 {}
    #cloud3 {}
    #cloud4 {}
    #cloud5 {}
    #cloud6 {}
    #buildings1 {}
    #buildings2 {}
    #tracks {}
    #monorail {}
    #empty-door {}
    #door {}
    #factory {}
    #facility {}
    #scene-6 {}
    #bg-scene-6 {}
    #nut {}
    #sky1v2 {}
    #sunv2 {}
    #mountain1v2 {}
    #birdies1v2 {}
    #mountain2v2 {}
    #reflectionv2 {}
    #mountain3v2 {}
    #mountain4-leftv2 {}
    #mountain4-rightv2 {}
    #mountain5-leftv2 {}
    #mountain5-rightv2 {}
    #birdies2v2 {}
    #seav2 {}
    #mountain6-leftv2 {}
    #mountain6-rightv2 {}
    #farm {}
    #bottom-reef1 {}
    #bottom-reef2 {}
*/
}


/*END RESPONSOS*/

/*
#sky1 {}

#sun {}

#mountain1 {}

#birdies1 {}

#mountain2 {}

#reflection {}

#mountain3 {}

#mountain4-left {}

#mountain4-right {}

#mountain5-left {}

#mountain5-right {}

#birdies2 {}

#scene-2 {}

#sea {}

#mountain6-left {}

#mountain6-right {}

#land {}

#boat1 {}

#pollution1 {}

#boat2 {}

#pollution2 {}

#boat3 {}

#net {}

#scene-3 {}

#reef1 {}

#reef2 {}

#reef3 {}

#stream {}

#fish1 {}

#fish2 {}

#reef-sunset {}

#fish3 {}

#scene-4 {}

#sunset {}

#sun2 {}

#smog1 {}

#smog2 {}

#plateau {}

#machinery1 {}

#landfill1 {}

#landfill2 {}

#machinery2 {}

#machinery2-back {}

#trash {}

#machinery3 {}

#landfill3 {}

#landfill4 {}

#landfill5 {}

#landfill6 {}

#landfill7 {}

#landfill8 {}

#apple {}

#sky2 {}

#cloud1 {}

#cloud2 {}

#cloud3 {}

#cloud4 {}

#cloud5 {}

#cloud6 {}

#buildings1 {}

#buildings2 {}

#tracks {}

#monorail {}

#empty-door {}

#door {}

#factory {}

#facility {}

#scene-6 {}

#bg-scene-6 {}

#nut {}

#sky1v2 {}

#sunv2 {}

#mountain1v2 {}

#birdies1v2 {}

#mountain2v2 {}

#reflectionv2 {}

#mountain3v2 {}

#mountain4-leftv2 {}

#mountain4-rightv2 {}

#mountain5-leftv2 {}

#mountain5-rightv2 {}

#birdies2v2 {}

#seav2 {}

#mountain6-leftv2 {}

#mountain6-rightv2 {}

#farm {}

#bottom-reef1 {}

#bottom-reef2 {}*/