@font-face {

            font-family: 'Bebas Neue Pro Regular';

            src:

                url("../fonts/bebas_neue_pro_regular-webfont.woff") format("woff"),

                url("../fonts/bebas_neue_pro_regular-webfont.woff2") format("woff2");

        }



        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color:#EFEFEF;

        }



        .wrapper{

            width:100%;

            max-width:1400px;

            position:absolute;

            left:50%;

            transform: translate(-50%, 0%);

            -moz-transform: translate(-50%, 0%);

            -webkit-transform: translate(-50%, 0%);

            box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.48);

-webkit-box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.48);

-moz-box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.48);

background-color:#FFF

        }



        header {

            color: black;

            padding: 10px 0px;

            background-color:#FFF;



        }



        h1 {

            font-family: "Bebas Neue", sans-serif;

            font-weight: 300;

        }



        .bluetext {

            color: #202657;

        }



        nav {

            margin: 10px 0;



        }



        nav a {

            margin: 0 15px;

            color: black;

            text-decoration: none;

        }



        main {

            padding: 0px;



        }



        .gifTitle {

            width: 100%;

            display: flex;

            justify-content: center;

            margin: 0px 0 0px 0;

            background-image: url(../imgs/gif_anim_7.webp);

            background-size: cover;

            background-position: 0px -200px;

            height: 350px;

            position: relative;

        }



        .gifTitle #playBtn{

            position:absolute;

            width:50px;

            height:50px;

            opacity:0.8;

            color:#FFF;

            font-size:50px;

            text-align:center;

            background-size: contain;

            background-repeat: no-repeat;

            background-position: center;

            cursor:pointer;

            left:50%;

            top:50%;

            transform:translate(-50%, -50% );

            -moz-transform:translate(-50%, -50% );

            -webkit-transform:translate( -50%, -50% );

        }



        #videoOverlay{

            display:none;

            position:fixed;

            top:0;

            right:0;

            bottom:0;

            left:0;

            background-color:rgba(0,0,0,0.8);

            z-index:1000000;

        }



        #videoWindow{

            position:fixed;

            left:50%;

            top:50%;

            width:70%;

            height:fit-content;

            background-color:#FFF;

            transform:translate(-50%,-50%);

            -webkit-transform:translate(-50%,-50%);

            -moz-transform:translate(-50%,-50%);

            font-size:30px;

            border-radius:5px;

            -moz-border-radius:5px;

            -webkit-border-radius:5px;

            color:#0064b3;

            padding:10px;

        }



        #closeBtn{

            cursor:pointer;

            margin:20px;

        }



        .oneCol{

            width:100%;

        }



        .oneCol .textCol{

            font-size:45px;

            color: #202657;

            text-align:center;

        }



        



        @media (max-width: 1340px) {

            .gifTitle {

                height: 250px;

                background-position: 0px -100px;

            }

        }



        @media (max-width: 1096px) {

            .gifTitle {

                height: 170px;

                background-position: 0px -50px;

            }

        }



        @media (max-width: 660px) {

            .gifTitle {

                height: 130px;

                background-size: cover;

                background-position: 0px -30px;

            }

        }





        footer {

            background: #333;

            color: white;

            text-align: center;

            padding: 10px 0;

            position: relative;

            bottom: 0;

            width: 100%;

        }



        .menu {

            width: 100%;

            list-style: none;

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0;

        }





        .menu > li:first-child{

            width:140px;

            font-size: 13px;

            margin-left:20px;

        }



        .menu > li:last-child {

            margin-right: 20px;

        }



        .menu > li{

            position:relative;

        }



        .menu li a {

            margin: 0 5px 0 5px;

            display: flex;

            text-align: center;

            font-size: 14px;

        }



       

       

        .menu li a:hover {

            font-weight: bold;

        }



        .underline {

            width: 0%;

            border-top: 4px solid #F00;

            margin-top: 5px;

        }



        .fadein-underline {

            width: 100%;

            border-top: 4px solid #F00;

            margin-top: 5px;

            animation-name: expand-underline;

            animation-duration: 0.5s;

        }



        .fadeout-underline {

            width: 0%;

            border-top: 4px solid #F00;

            margin-top: 5px;

            animation-name: contract-underline;

            animation-duration: 0.5s;

        }



        .mobileMenuLink {

            display: none;

            font-size: 24px;

            cursor: pointer;

        }



        .initialMenu {

            height: 50px;

        }



        .contractedMenu {

            height: 50px;

            animation-name: contract-menu;

            animation-duration: 0.5s;

        }



        .expandedMenu {

            height:fit-content;

            animation-name: expand-menu;

            animation-duration: 0.5s;

        }



        @keyframes expand-menu {

            from {

                height: 50px;

            }



            to {

                height: 380px;

            }

        }



        @keyframes contract-menu {

            from {

                height: 380px;

            }



            to {

                height: 50px;

            }

        }





        @keyframes expand-underline {

            from {

                width: 0;

            }



            to {

                width: 100%;

            }

        }



        @keyframes contract-underline {

            from {

                width: 100%;

            }



            to {

                width: 0%;

            }

        }



        .coloredLine {

            display: flex;

            height: 10px;

            background-color: #000;

            width: 100%;

            margin: 0px 0 0px 0;

        }



        .coloredLine .line {

            flex-grow: 1;

        }



        .coloredLine .line:nth-child(1) {

            background-color: #002175;

        }



        .coloredLine .line:nth-child(2) {

            background-color: #f25502;

        }



        .coloredLine .line:nth-child(3) {

            background-color: #0064b3;

        }



        .coloredLine .line:nth-child(4) {

            background-color: #ff9500;

        }



        .coloredLine .line:nth-child(5) {

            background-color: #002175;

        }



        .coloredLine .line:nth-child(6) {

            background-color: #da2037;

        }



        .coloredLine .line:nth-child(7) {

            background-color: #0064b3;

        }



        .coloredLine .line:nth-child(8) {

            background-color: #f25502;

        }



        .wideImg {

            width: 100%;

        }



        .skewed {

            background-color: #da2037;

            color: #FFF;

            display: flex;

            width: 100%;

            height: 400px;

            transform: skewY(-5deg);

            transform-origin: 0% 0%;

            justify-content: center;

            align-items: center;

            text-align: center;

            margin-bottom: -200px;

            margin-top: -10px;

        }



        .skewed h1 {

            transform: skewY(5deg);

            transform-origin: 50% 50%;

            text-align: center;

            font-size: 75px;

            line-height: 0.9em;

        }



        .twoColSection {

            display: flex;

            justify-content: stretch;

            align-items: stretch;

            flex-wrap: nowrap;

            background-color: #EFEFEF;

        }



        .twoColSection .imgCol {

            width: 50%;

            padding: 50px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            background-color: rgba(255, 0, 0, 0.9);

            display: flex;

            justify-content:flex-end;

            flex-wrap: wrap;

            flex-direction: column;

        }



        .threeColSection {

            display: flex;

            justify-content: stretch;

            align-items: stretch;

            flex-wrap: nowrap;

            background-color: #EFEFEF;

        }



        .threeColSection .imgCol {

            width: 30%;

            padding: 50px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            background-color: rgba(255, 0, 0, 0.9);

            display: flex;

            justify-content:flex-end;

            flex-wrap: wrap;

            flex-direction: column;

        }



        .twoColSection .imgCol h2 {

            text-align: right;

        }



        .twoColSection .imgCol img {

            width: 100%;

        }



        .threeColSection .imgCol img {

            width: 100%;

        }



        .twoColSection .textCol {

            width: 50%;

            padding: 50px;

            font-size: 25px;

            color: #202657;

        }



        p{

            font-family: Arial, sans-serif;

           padding: 50px;

            font-size: 25px;

            color: #202657; 

        }



        .twoColSection .textCol h1 {

            font-size: 50px;

            line-height: 1em;

        }



        .boldRed {

            font-weight: bold;

            color: #891924;

            text-transform: uppercase;

        }



        .redTitle {

            color: #da2037;

        }



        h2 {

            font-weight: 300;

            padding: 15px;

            font-size: 40px;

            line-height: 1em;

        }



        h3 {

            font-family: "Bebas Neue", sans-serif;

            font-weight: 300;

            font-size: 35px;

            line-height: 1em;

        }



        h3 sup {

            font-size: 20px;

            line-height: 0em;

        }



        h4 {

            font-family: "Bebas Neue", sans-serif;

            font-weight: 300;

            font-size: 95px;

            line-height: 1em;

            color: #FFF;

            margin: 0;

            text-align: left;

        }



        h5 {

            font-family: "Bebas Neue Pro Regular", sans-serif;

            font-weight: 300;

            font-size: 35px;

            line-height: 1em;

            text-transform: uppercase;;

        }



        .smallH4 {

            font-family: Arial, Helvetica, sans-serif;

            text-transform: lowercase;

            color: #FFF;

            font-size: 24px;

            margin: 0;

            text-align: left;

        }



        .textCol sup {

            line-height: 0em;

            font-size: 15px;

        }



        .button {

            background-color: #da2037;

            color: white;

            font-size: 15px;

            padding: 15px;

            text-transform: uppercase;

            border-radius: 3px;

            margin: 15px 0px;

            display: inline-block;

            margin: 0 auto;

            margin-top: 20px;

            margin-bottom: 20px;

            text-align: center;

        }



        .button a {

            color: #FFF;

            text-decoration: none;

        }



        .blackOverlay {

            background-color: rgba(0, 0, 0, 0.5);

            width: 100%;

            height: 100%;

            padding: 15px;

        }



        .desktopImg{

            display:block;

        }



        .mobileImg{

            display:none;

        }



        .overlappedImgTop{

            margin-top:-190px;

        }



        .floatingBox{

            display:flex;

            position:absolute;

            left:100px;

            width:55%;

            max-width:800px;

            max-height:650px;

            bottom:40px;

            background-color:#da2037;

            flex-wrap: nowrap;

        }



        .floatingBoxContent h1{

            font-size: 65px;

            color:#202657;

            margin:0;

        }



        .floatingBoxContent{

            width:97%;

            padding:20px;

        }



        .floatingBoxContent i{

            margin-top:10px;

            font-size:55px;

            color:#202657;

        }



        .floatingBoxMargin{

            width:3%;

            max-width:15px;

            background-color: #FF0000;

            display:flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            flex-direction: column;

        }



        .floatingBoxMargin .line{

            flex-grow: 1;

            width:100%;

        }



         .floatingBoxMargin .line:nth-child(1) {

            background-color: #002175;

        }



        .floatingBoxMargin.line:nth-child(2) {

            background-color: #f25502;

        }



        .floatingBoxMargin .line:nth-child(3) {

            background-color: #0064b3;

        }



        .floatingBoxMargin .line:nth-child(4) {

            background-color: #ff9500;

        }



        .swiper {

            width: 100%;

        }



        .swiper img {

            

            height: 400px;

        }



        .swiper-slide{

            display:flex;

            justify-content: center;

        }



        .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{

            position:relative;

            margin-top:10px;

        }



        .lipidico_swiper {

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .lipidico_swiper img {

            

            height: 600px;

        }



        .swiper-slide{

            display:flex;

            justify-content: center;

        }



        .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{

            position:relative;

            margin-top:10px;

        }



         .swiper1 {

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper1 img {

            height: 600px;

        }



         .swiper2{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper2 img{

            height: 600px;

        }



        .swiper3{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper3 img{

            height: 400px;

        }



         .swiper4{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper4 img{

            height: 220px;

        }



         .swiper5{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper5 img{

            height: 220px;

        }



         .swiper6{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper6 img{

            height: 320px;

        }



        .swiper7{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper7 img{

            height: 320px;

        }



        .swiper8{

            width: 100%;

            margin-left: auto;

    margin-right: auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    display: block;

        }



        .swiper8 img{

            height: 550px;

        }



        .references p{

            padding: 15px;

        }



        footer{

            background: #DA2037;

            background: linear-gradient(90deg, rgba(218, 32, 55, 1) 0%, rgba(153, 17, 33, 1) 100%);

        }



        .footerMenu{

            display:flex;

            justify-content:center;

            align-items: center;

            padding: 10px;

            flex-wrap: wrap;

            margin:50px 0 50px 0;

        }



        .footerMenu div{

            flex-grow:1;

            margin:0 25px 0 25px;

        }



        .footerMenu div img{

            width: 100%;

        }



        .footerMenu a{

            color:#FFF;

            text-decoration: none;

            font-size: 20px;

        }



        .collapsibleHeader{

            width:100%;

            height:70px;

            display:flex;

            background-color:#007bc6;

            justify-content: space-between;

        }



        .collapsibleHeader img{

            height:100%;

        }



        .collapsibleHeaderBtn{

            font-size:45px;

            color:#FFF;

            height:100%;

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 0 20px 0 20px

        }



        .collapsibleContent{

            display:none;

            padding: 10px;

        }



        .active{

            display:block;

        }



        .flipcardGrid{

            display:flex;

            flex-wrap: wrap;

        }



        .flipcard{

            flex-grow:1;

            width:20%;

            margin:45px;

            background-color:transparent;

            height:150px;

            max-width:26%;

        }



        .flipped{

            animation-name: flip;

            animation-duration: 0.3s;

            animation-fill-mode: both;

            animation-timing-function: ease-in-out

        }



        @keyframes flip{

            0%{ 

                transform: rotateY(0deg);

                -moz-transform:rotateY(0deg);

                -webkit-transform:rotateY(0deg);

                -o-transform:rotateY(0deg);

                -ms-transform:rotate(0deg);

            }

            50%{

                transform: rotateY(90deg); 

                -moz-transform:rotateY(90deg);

                -webkit-transform:rotateY(90deg);

                -o-transform:rotateY(90deg);

                -ms-transform:rotate(90deg);

            }

            100%{

                transform: rotateY(0deg);

                -moz-transform:rotateY(0deg);

                -webkit-transform:rotateY(0deg);

                -o-transform:rotateY(0deg);

                -ms-transform:rotate(0deg); 

            }

        }



        .subMenu{

            position:absolute;

            width:fit-content;

            height:fit-content;

            top:0;

            left:0;

            z-index:1000;

            list-style: none;

            padding:0;

            padding-top:30px;

            border-radius:5px;

            -moz-border-radius:5px;

            -webkit-border-radius:5px;

           

display:none;

        }



        .subMenu li{

            background-color:#FFF;

            position:relative;

            white-space:nowrap;

            margin:0;

            margin-left:0 !important;

            margin-right:0 !important;

            padding:15px;

            border-left:1px solid #555;

            border-right:1px solid #555;

            

        }



        .subMenu li:first-child{

           border-radius: 6px 6px 0px 0px;

-webkit-border-radius: 6px 6px 0px 0px;

-moz-border-radius: 6px 6px 0px 0px;

border-top:1px solid #555;

        }



        .subMenu li:last-child{

           border-radius: 0px 0px 6px 6px;

-webkit-border-radius: 0px 0px 6px 6px;

-moz-border-radius: 0px 0px 6px 6px;

border-bottom:1px solid #555;

        }





        .footerText p{

            color:#FFF;

            font-size:11px;

            padding:20px;

        }



        #stateSelector{

            width:100%;

            background-color:#0064b3;

            border:none;

            font-family:'Bebas Neue', sans-serif;

            color:#ff9500;

            font-size:22px;

        }



        .mobileText{

            display:none;

        }

        .desktopText{

            display:block;

        }



        #stateSelector{

            display:none;

        }



        h6{

            margin:0;

            margin-left:20px;

            font-size:14px;

        }



        sup{

            font-size:0.5em;

        }



        .videoDisclaimer{

            position:absolute;

            bottom:0px;

            right:0px;

            background-color:rgba(137,25,36,0.7);

            color:#FFF;

            text-align:right;

            font-size:11px;

        }







        @media (max-width: 1400px) {

            .floatingBoxContent i{

                font-size:45px;

            }

             .floatingBoxContent h1{

                font-size: 65px;

            }

            .footerMenu div{

                margin:0 15px 0 15px;

            }

        }



        @media (max-width: 1225px) {

            .menu li {

                font-size: 10px;

            }



            .skewed {

                margin-bottom: -180px;

            }



            .skewed h1 {

                font-size: 50px;

            }

            .floatingBoxContent i{

                font-size:30px;

            }

             .floatingBoxContent h1{

                font-size: 40px;

            }

            .footerMenu{

                flex-wrap: wrap;

            }

            .footerMenu div:first-child{

                width:100%;

                margin:0 5px 0 5px;

            }



            .footerMenu div{

                width: 40%;

                margin:20px 0 20px 0;

            }

            .footerMenu div:first-child img{

                width:80%;

            }

            .footerMenu div a{

                font-size:15px;

            }

            

        }



        @media (max-width: 800px) {

            .floatingBoxContent i{

                font-size:20px;

            }

             .floatingBoxContent h1{

                font-size: 30px;

            }



            .lipidico_swiper img {

                height: 400px;

            }

            .swiper1 img {

                height: 500px;

            }

        }



        @media (max-width: 660px) {

            .menu {

                flex-wrap: wrap;

                justify-content: center;

                position: relative;

                top: 0;

                background-color: #FFF;

                left: 0;

                width: 100%;

                z-index: 1000;

                padding: 0px 0;

                margin: 0px 0px;

                overflow: hidden;

            }



            .menu li {

                display: flex;

                width: 100%;

                justify-content: center;

                font-size: 14px;

                margin: 10px 0 10px 0;

                flex-wrap: wrap;

            }



            .menu li:first-child {

                margin-left:0px;

                margin-right: 0px;

                width:100%;

                min-width:auto;

                max-width:auto;

            }



            .menu li:first-child img{

                width: 60px;

            }



            .menu li:last-child {

                margin-right: 0px;

            }



            nav a {

                margin: 5px 0;

            }



            .menuEl a {

                width: 100%;

                text-align: center;

                justify-content: center;

            }



            .menuEl .underline {

                margin: 5px 20px;

            }



            .menu .logo {

                display: flex;

                justify-content: space-between;

                padding: 10px 10px;

                width: 100%;

                align-items: center;

                margin: 0px 0px;

            }



            .mobileMenuLink {

                display: block;

            }



            .mobileMenuLink:hover {

                color: #999;

            }



            .coloredLine {

                height: 6px;

            }



            .skewed {

                margin-bottom: -60px;

            }



            .skewed h1 {

                font-size: 40px;

            }



            .twoColSection {

                flex-wrap: wrap;

            }



            .threeColSection {

                flex-wrap: wrap;

            }



            .twoColSection .textCol {

                width: 100%;

                margin: 20px;

                font-size: 20px;

                padding:15px;

            }



            .twoColSection .textCol h1 {

                font-size: 32px;

            }



            .twoColSection .imgCol {

                width: 100%;

                margin: 20px;

                padding:20px;

            }



            .threeColSection .imgCol {

                width: 100%;

                margin: 20px;

                padding:20px;

            }



            h2 {

                font-size: 35px;

            }



            h4 {

                line-height: 1em;

                margin-top:80px;

                font-size:75px;

            }



            .smallH4{

                font-size:18px;

            }

            .desktopImg{

                display:none;

            }



            .mobileImg{

                display:block;

            }



            .overlappedImgTop{

                margin-top: -60px;

            }

            .floatingBox{

            left:50%;

            bottom:40px;

            width:80%;

            transform:translate( -50%, 0% );

            -moz-transfrom:translate( -50%, 0% );

            -ms-transfrom:translate( -50%, 0% );

            -webkit-transform:translate( -50%, 0% );

            }



            .floatingBoxContent i{

                font-size:20px;

            }

             .floatingBoxContent h1{

                font-size: 16px;

            }

            .references ol{

                margin:15px;

            }



            .collapsibleHeader{

                height:25px;

            }



            .collapsibleHeaderBtn{

                font-size: 28px;

            }



            .oneCol .textCol{

                font-size:25px;

                color: #202657;

                text-align:center;

            }

            .lipidico_swiper img {

            height: 280px;

            }

            .swiper1 img {

            height: 350px;

            }

            .swiper2 img {

            height: 350px;

            }



            .swiper3 img {

            height: 350px;

            }



            .swiper3 img {

            height: 250px;

            }



            .swiper5 img {

            height: 250px;

            }



            .swiper8 img {

            height: 350px;

            }



            p{

                padding:15px;

                font-size:20px;

            }



            .flipcard{

            flex-grow:1;

            width:100%;

            margin:45px;

            background-color:#F00;

            height:150px;

            max-width:100%;

        }



        .subMenu{

            position:relative;

            padding-top:0px;

            width:100%;

        }



        .subMenu li{

            border:none;

            width:100%;

            padding-left:0;

            padding-right:0;

            border-bottom:1px solid #EFEFEF;

            font-size:11px;



        }



        .subMenu li:first-child{

            border-top:none;

            border-radius:0;

            -moz-border-radius:0;

            -webkit-border-radius:0;

        }

        .subMenu li:last-child{

            border-bottom:1px solid #EFEFEF;

            border-radius:0;

            -moz-border-radius:0;

            -webkit-border-radius:0;

        }



        .subMenu li a{

            font-size:12px;

        }



        .reverseCol{

            flex-direction: column-reverse;

        }



        #state{

            display:none;

        }



        .mobileText{

            display:block;

        }

        .desktopText{

            display:none;

        }



        #stateSelector{

            display:block;

        }

           

        }