@charset "UTF-8";

@font-face {
    font-family: 'Roboto-black';
    src: url('/font/Roboto/Roboto-Black.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-bold';
    src: url('/font/Roboto/Roboto-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-medium';
    src: url('/font/Roboto/Roboto-Medium.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-regular';
    src: url('/font/Roboto/Roboto-Regular.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-light';
    src: url('/font/Roboto/Roboto-Light.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/font/Roboto/Roboto-Regular.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'TeXGyreAdventor';
    src: url('/font/TeX-Gyre-Adventor/texgyreadventor-regular.otf');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'TeXGyreAdventorBold';
    src: url('/font/TeX-Gyre-Adventor/texgyreadventor-bold.otf');
    font-weight: normal;
    font-style: normal;
}

b, strong {
    font-weight: normal;
    font-family: 'Roboto-bold', 'sans-serif';
}

a strong, a b {
    font-weight: normal;
    font-family: 'Roboto-bold', 'sans-serif';
}

/* RESET */
html, body, div, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
    font-size: 1em;
    font-weight: 300;
    font-style: normal;
}

fieldset, img {
    box-sizing: border-box;
    /*width: 100%;*/
}

caption, th {
    text-align: left;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.clear {
    clear: both;
}

strong {
    font-weight: 600;
}

em {
    font-style: oblique;
}

/*site*/
html {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    color: #fff;
}

html, body {
    height: 100%;
}

a {
    color: #135fac;
    text-decoration: none;
}

p {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    word-wrap: break-word;
}

#menu ul, ol {
    list-style: none;
    padding: 0;
}

#topcontainer {
    position: fixed;
    max-width: 1400px;
    width: 100%;
    z-index: 5;
    clear: both;
}

#allTop {
    width: 100%;
    /* margin: 0 auto; */
    background-color: #fff;
    position: relative;
}

#top {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
}

#content {
    max-width: 1400px;
    margin: 0 auto;
    color: #000;
}

#foot {
    clear: both;
    max-width: 1400px;
    margin: 24px auto 0;
    background-color: #072340;
    padding: 30px 24px 100px;
    display: block;
}

#members {
    clear: both;
    max-width: 1400px;
    margin: 24px;
}

#members hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #faa61a;
    margin: 1em 0;
    padding: 0;
}

#members .member_txt {
    text-transform: uppercase;
    color: #5ec0ff;
    font-size: 1.125em;
    text-align: center;
}

#sitemap {
    width: 960px;
    margin: 0 auto;
    font-size: 0.75em;
    color: #fff;
    overflow: hidden;
    position: relative;
    clear: both;
    font-family: 'Roboto-medium', 'sans-serif';
}

#sitemap a {
    color: #fff;
    line-height: 23px;
    font-family: 'Roboto', 'sans-serif';
}

#sitemap .cat {
    text-transform: uppercase;
    font-size: 1.5em;
    width: 304px;
    padding-bottom: 5px;
}

#sitemap .colLeft {
    float: left;
    width: 304px;
    margin-right: 24px;
}

#sitemap .colRight {
    float: left;
    width: 304px;
}

#sitemap .cat0 {
    font-weight: bold;
    border-top: 1px solid #fff;
    line-height: 30px;
}

#sitemap .catIn {
    font-weight: normal;
    line-height: 22px;
    cursor: pointer;
}

#sitemap .cat0 .catIn:last-child {
    padding-bottom: 5px;
}

#logo {
    float: left;
    display: block;
    width: 36%;
    padding: 0;
    margin-right: 20px;
}

#logo img {
    width: 100%;
    max-width: 346px;
    float: right;
}

#search_bar {
    float: right;
    text-align: center;
    position: relative;
    top: 45px;
}

#search_bar input {
    border: 1px solid #5ec0ff;
    border-left: 0;
    border-right: 0;
    height: 26px;
    width: 277px;
    color: #5ec0ff;
    outline: 0;
    font-size: 0.8em;
    background: url("/img/search_arrow.png") no-repeat 100% 50%;
}

#banner {
    float: left;
    width: 100%;
    height: 497px;
    position: relative;

    margin-top: 164px;
}

#banner a {
    color: #fff;
}

#banner img {
    width: 100%;
    height: 497px;
}

#innerBanner {
    background: url("/img/about.png") no-repeat 50% 0;
    width: 100%;
    height: 284px;
    position: relative;
    float: left;

    margin-top: 164px;
}

#innerBanner .textoFoto {
    top: 50px;
    font-size: 60px;
}

#innerBanner .textoFotoSmall {
    top: 150px;
    font-size: 36px;
}

#degrade {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 95px;
    background: url('/img/degrade.png') no-repeat 0 0;
    z-index: 1;
}

#innerBanner #degrade {
    z-index: 0;
}

.data {
    color: #f9a61a;
    font-size: 0.875em;
    font-family: 'Roboto-bold', 'sans-serif';
    margin: 12px 12px 0;
    line-height: 1em;
}

#list .box .title {
    margin: 4px 12px 2px;
}

.title {
    font-family: 'Roboto-medium', 'sans-serif';
    margin: 0 12px;
    font-size: 1em;
    line-height: 1.3em;
}

.lightBlue {
    color: #5ec0ff !important;
}

.socialLogo {
    height: 30px;
    width: 30px;
    float: left;
    margin: 10px 10px 0 0;
}

#socials {
    border-top: 1px solid #fff;
}

.fullHeight {
    overflow: hidden !important;
    height: 100% !important;
}

.sumario {
    font-family: 'Roboto-regular', 'sans-serif';
    margin: 0 12px 0;
    display: block;
    line-height: 1.3em;
    overflow: hidden;
    /*max-height: 54px;*/
    font-size: 14px;
}

.right .sumario {
    margin-bottom: 12px;
}

.catBox .sumario {
    margin: 12px;
    display: block;
    line-height: 1.3em;
    overflow: hidden;
}

/*.boxWide .sumario {*/
/*line-height: 1.3em;*/
/*margin: 12px;*/
/*display: block;*/
/*overflow: hidden;*/
/*}*/

#innerArea #one .title {
    font-size: 2em;
    font-family: 'Roboto-bold', 'sans-serif';
    height: auto;
    line-height: 1.4em;
}

#innerArea .title {
    font-size: 2em;
    font-family: 'Roboto-bold', 'sans-serif';
    height: auto;
    line-height: 1.4em;
}

#innerArea .imagem {
    /*height:100%;*/
}

.smalltitle {
    font-size: 1em;
    font-family: 'Roboto-bold', 'sans-serif';
    height: auto;
    margin: 3px 12px 0;
}

/*#one .sumario {*/
/*font-size: 1.125em;*/
/*}*/

.link {
    font-family: 'Roboto-medium', 'sans-serif';
    max-height: 7%;
    margin: 0 12px;
    display: block;
    font-size: 0.875em;
    line-height: 1.5em;
}

.tabela {
    border: 0;
}

.tabelaTd {
    padding: 24px 0;
    width: 40%;
    text-align: center;
}

.tabelaTd:nth-child(2) {
    width: 60%;
    text-align: left;
}

.center {
    text-align: center;
}

.tabelaTd .link {
    margin: 0;
    display: block;
    font-size: 0.875em;
    line-height: 1.5em;
}

.box {
    width: 304px;
    height: 304px;
    float: left;
    margin-right: 24px;
    margin-bottom: 24px;
    position: relative;
    background-color: #fff;
}

.box1 {
    max-width: 632px;
    width: 632px;
    overflow: hidden;
    position: relative;
    float: left;
    margin-bottom: 12px;
}

.bloco1 .box {
    height: 100%;
}

.boxWide {
    width: 632px;
    height: 100%;
    float: left;
    /*margin-bottom: 24px;*/
    margin-bottom: 12px;
    position: relative;
    background-color: #fff;
    padding: 0 0 12px;
}

.img1 {
    width: 150px;
    /*height: 100%;*/
    vertical-align: bottom;
}

.imgCont {
    width: 150px;
    height: 100%;
    float: left;
    padding: 12px;
}

#list .boxWide .title {
    margin: 12px;
    display: block;
    font-size: 1em;
    height: auto;
}

.boxWide .titulo {
    margin: 12px;
    display: block;
    font-size: 1em;
    height: auto;
}

#list .title {
    margin: 6px 12px 4px;
}

.boxSmall {
    width: 304px;
    height: auto;
    float: left;
    margin-right: 24px;
    margin-bottom: 24px;
    position: relative;
    background-color: #fff;
}

.boxSmallNp {
    width: 304px;
    height: auto;
    float: left;
    margin-right: 24px;
    /*margin-bottom: 24px;*/
    position: relative;
    background-color: #fff;
}

.boxSmallNp p {
    padding: 12px 12px 0 12px;
}

.boxSmallNp p:last-child {
    padding: 12px;
}

.boxSmallNp p img {
    display: flex;
    /*padding: 12px 12px 0 12px;*/
    width: 100%;
    min-height: 105px;
}

.boxSmallFoto {
    width: 304px;
    height: 304px;
    float: left;
    margin-right: 24px;
    margin-bottom: 24px;
    position: relative;
    background-color: #fff;
}

.box a, .boxSmall a, .boxWide a {
    color: #000;
}

#one a {
    color: #5ec0ff;
    /*font-weight : bold;*/
    font-family: 'Roboto-medium', 'sans-serif';
}

/*.imgContainer {*/
/*height: 100%;*/
/*}*/

.keys {
    float: left;
    margin: 12px;
    font-size: 12px;
    display: block;
}

.keys a {
    color: #5ec0ff;
    font-size: 13px;
    font-weight: bold;
}

.social {
    display: block;
    background-color: #fff;
    padding: 12px;
    width: 100%;
    height: 21px;
}

.box a {
    color: #000;
}

.catBox {
    width: 632px;
    min-height: 100px;
    height: 100%;
}

#content #corpo {
    background-color: #135fac;
    max-width: 1400px;
    margin: 0 auto;
    clear: both;
}

#content #inner {
    border-top: 1px solid #fff;
    max-width: 960px;
    margin: 0 auto;
    clear: both;
}

.arrow {
    background: url("/img/upArrow.png") no-repeat 0 0;
    background-size: 13px 17px;
    height: 17px;
    width: 13px;
    float: right;
    position: absolute;
    right: 5px;
}

.categoryTitle {
    font-size: 2.25em;
    color: #fff;
    padding: 14px 0;
    font-weight: 500;
    text-transform: uppercase;
}

.upper a {
    color: #fff;
}

#categorySummary {
    font-family: 'Roboto-regular', 'sans-serif';
    font-size: 1.125em;
    color: #fff;
    font-weight: 100;
    padding: 10px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: justify;
    text-justify: inter-word;
}

#categorySummary a {
    color: #5ec0ff;
    font-weight: bold;
}

#foot1 {
    display: none;
}

#menu .close {
    display: none;
}

.white {
    background-color: #fff;
}

.mapa {
    height: 280px;
    margin: 12px;
}

.mapaGrande {
    width: 100%;
    height: 380px;
    position: relative;
    margin: 12px 0;
}

.reset-control {
    background: url("/img/Reset.png") no-repeat;
    width: 28px;
    height: 28px;
    cursor: pointer !important;
}

#map_label {
    width: 280px;
    background-color: #fff;
    margin: 12px;
}

.link a {
    color: #135fac;
}

.headLightBlue {
    color: #5ec0ff !important;
    font-size: 1.125em !important;
}

.headOrangeBlue {
    background-color: #faa61a !important;
    color: #135fac !important;
    font-size: 1.125em !important;
    display: inline-block;
}

.headOrangeWhite {
    background-color: #faa61a !important;
    color: #fff !important;
    font-size: 1.125em !important;
    display: inline-block;
    padding: 12px;
}

.headOrangeWhiteIndent {
    background-color: #faa61a !important;
    color: #fff !important;
    font-size: 1.125em !important;
    display: inline-block;
    text-indent: 6px;
}

/*.imagem {*/
/*display: flex;*/
/*padding: 12px 12px 0 12px;*/
/*width: 100%;*/
/*min-height: 232px;*/
/*height: 232px;*/
/*}*/

.imagem {
    /* display: flex; */
    padding: 12px 12px 0 12px;
    width: 100%;
    /*min-height: 232px; */
    /* height: 232px; */
}

.imagemFull {
    display: flex;
    padding: 12px;
    width: 100%;
}

.imagemHalf {
    display: flex;
    padding: 12px 12px 0 12px;
    width: 100%;
    min-height: 105px;
}

/*.boxWide .imagem {*/
/*height: 100%;*/
/*}*/

.right {
    float: right;
    margin-right: 0;
}

#menuNav {
    clear: both;
    border-top: 1px solid #5ec0ff;
    font-size: 1.2em;
    z-index: 1;
    background-color: transparent;
    display: none;
}

#menuNav1 {
    clear: both;
    border-top: 1px solid #5ec0ff;
    border-bottom: 1px solid #5ec0ff;
    font-size: 1.2em;
    z-index: 1;
    background-color: transparent;
}

#menu {
    margin: 0 auto;
    color: #135fac;
    display: table;
    width: 960px;
}

#menu li {
    position: relative;
    display: table-cell;
    cursor: pointer;
    vertical-align: middle;
    line-height: 3.125em;
    text-align: left;
}

#menu a {
    display: inline-block;
}

#menu ul {
    position: absolute;
    /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
    margin: 0;
    text-align: left;
}

#menu ul li {
    display: block;
}

#menu li:hover {
    background: #135fac;
    color: #fff;
}

#menu li:hover ul a {
    background: none;
}

#menu li:hover ul a:hover {
    background: #135fac;
    color: #fff;
}

#menu ul a {
    white-space: nowrap;
    display: block;
}

#menu li ul li {
    background-color: #fff;
    border-top: 1px solid #5ec0ff;
    text-align: left;
    padding: 0 10px;
}

#menu li ul li:last-child {
    border-bottom: 1px solid #5ec0ff;
}

#menu li ul {
    z-index: 2;
}

#lupa {
    display: none;
}

#menu #search {
    display: none;
}

.menuSmall {
    background-color: #5ec0ff;
    width: 100%;
    margin-top: 0 !important;
    height: 100%;
    font-size: 0.8em;
    float: none !important;
    overflow: auto;
}

.menuSmall li ul li {
    background-color: #5ec0ff;
}

#menuNovo {
    margin: 0 auto;
    color: #135fac;
    display: table;
    padding: 0;
    width: 960px;
    z-index: 2;
}

#menuNovo li {
    position: relative;
    display: block;
    cursor: pointer;
    vertical-align: middle;
    line-height: 30px;
    text-align: left;
    /*width: 190px;*/
    z-index: 2;
    font-size: 0.9em;
}

#menuNovo li.lvl0 {
    position: relative;
    display: inline;
    cursor: pointer;
    line-height: 50px;
    float: left;
    color: #135fac;

}

#menuNovo li.lvl0:nth-child(2), #menuNovo li.lvl0:nth-child(1) {
    padding-right: 89px;
}

#menuNovo li.lvl0:nth-child(3) {
    padding-right: 44px;
}

#menuNovo li.lvl0:nth-child(4) {
    padding-left: 44px;
}

#menuNovo li.lvl0:nth-child(6), #menuNovo li.lvl0:nth-child(5) {
    padding-left: 89px;
}

#menuNovo li.lvlNews {
    display: none !important;
}

#menuNav1 .hidden1 {
    display: none;
    cursor: pointer;
    width: 220px;
    padding-top: 5px;
}

#menuNovo li.lvl0:nth-child(6) ul, #menuNovo li.lvl0:nth-child(4) ul, #menuNovo li.lvl0:nth-child(5) ul {
    right: 0;
}

#menuNovo li.lvl0:nth-child(6) .hidden1 li, #menuNovo li.lvl0:nth-child(4) .hidden1 li, #menuNovo li.lvl0:nth-child(5) .hidden1 li {
    text-align: right;
}

#menuNav1 #menuNovo li a {
    color: #fff;
}

#menuNav1 #menuNovo .hidden1 li:hover a {
    color: #5ec0ff;
}

#menuNovo ul {
    margin: 0;
    padding: 0;
    position: absolute;
}

#menuNav-bg {
    position: absolute;
    width: 100%;
    top: 164px;
    background: #135fac;
    opacity: 0.9;
    filter: alpha(opacity=90);
    height: 0;
    z-index: 1;

    /* Set our transitions up. */
    /*-webkit-transition: height 0.3s;*/
    /*-moz-transition: height 0.3s*/
    /*transition: height 0.3s;*/
    max-width: 1400px;
}

/*#menuNav1:hover #menuNav-bg {*/
/*height: 250px;*/
/*}*/

/*#menuNav1 .lvl0:hover .hidden1 {*/
/*display: block;*/
/*opacity: 1;*/
/*}*/

/*#menuNav1 .lvl0:hover .hidden1 {*/
/*/!*display: block;*!/*/
/*/!*opacity: 1;*!/*/
/*visibility: visible;*/

/*/!* Set our transitions up. *!/*/
/*/!*-webkit-transition: visibility 1s;*!/*/
/*/!*-moz-transition: visibility 1s;*!/*/
/*/!*transition: visibility 1s;*!/*/
/*}*/

.hide {
    display: none !important;
}

.show {
    display: table !important;
}

#menuNav #close {
    display: none;
}

#menuNav #menuIcon {
    font-size: 2em;
    display: none;
}

#menuNav2 {
    display: none;
}


#menu .lvlNews {
    display: none !important;
}

#mainArea {
    min-height: 52.8125em;
    background-color: #135fac;
    clear: both;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 24px 0;
}

#mainArea .box:nth-child(3), #mainArea .box:nth-child(6) {
    margin-right: 0;
}

#innerArea {
    min-height: 35em;
    background-color: #135fac;
    clear: both;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 24px 24px;
    overflow: hidden;
}

/*#innerArea1 {*/
/*min-height: 35em;*/
/*background-color: #135fac;*/
/*clear: both;*/
/*max-width: 1400px;*/
/*margin: 0 auto;*/
/*padding: 50px 24px 24px;*/
/*}*/

#innerArea .box:nth-child(2), #innerArea .box:nth-child(4), #innerArea .box:nth-child(6), #innerArea .box:nth-child(8), #innerArea .box:nth-child(10), #innerArea .box:nth-child(12) {
    margin-right: 0;
}

.blocoIntro {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #fff;
    padding: 12px 0 0;
}

.blocoIntro a {
    color: #fff;
}

.white {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
    position: relative;
    width: 960px;
}

#innerArea .bloco {
    padding: 12px 0;
}

#innerArea .bloco:first-child {
    border-top: 1px solid #fff;
    padding: 12px 0 0;
}

.bloco {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
    position: relative;
    width: 960px;
}

.bloco1 {
    margin-left: 24px;
    margin-bottom: 24px;
    max-width: 304px;
    overflow: hidden;
    position: relative;
    float: right;
}

.bloco2 {
    max-width: 632px;
    width: 632px;
    overflow: hidden;
    position: relative;
    float: left;
    /*margin-bottom: 12px;*/
    /*margin: 0 auto 12px;*/
    margin: 0 auto;
}

.bloco3 {
    max-width: 960px;
    width: 960px;
    overflow: hidden;
    position: relative;
    margin: 0 auto 12px;
}

.bloco3 .boxWide {
    width: 100%;
}

.pad50 {
    padding-top: 50px;
}

.pad25b {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pad25 {
    padding-top: 25px;
}

.pad12 {
    padding: 12px;
}

.pad12 .imagem {
    padding: 0;
}

.lopad {
    padding-bottom: 30px;
}

.category {
    height: 90px;
    float: left;
    width: 304px;
    margin-right: 24px;
    opacity: 1;
}

.category:hover {
    opacity: 0.8;
}

#mainArea .bloco a:last-child .category {
    margin-right: 0;
    float: left;
}

.knowledgeBanner {
    background: url("/img/know.png") no-repeat 0 0;
    background-size: 100%;
}

.infrastructuresBanner {
    background: url("/img/infra.png") no-repeat 0 0;
    background-size: 100%;
}

.outreachBanner {
    background: url("/img/out.png") no-repeat 0 0;
    background-size: 100%;
}

.outreach:before {
    content: url("/img/outreachSmall.png");
    height: 36px;
    width: 36px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 0;
    -webkit-filter: drop-shadow(0px 3px 3px #999);
    filter: drop-shadow(0px 3px 3px #999);
}

.infrastructures:before {
    content: url("/img/barcoSmall.png");
    height: 36px;
    width: 36px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 0;
    -webkit-filter: drop-shadow(0px 3px 3px #999);
    filter: drop-shadow(0px 3px 3px #999);
}

.knowledge:before {
    content: url("/img/knowSmall.png");
    height: 36px;
    width: 36px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 0;
    -webkit-filter: drop-shadow(0px 3px 3px #999);
    filter: drop-shadow(0px 3px 3px #999);
}

.eurocean:before {
    content: url("/img/euroSmall.png");
    height: 36px;
    width: 36px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 0;
    -webkit-filter: drop-shadow(0px 3px 3px #999);
    filter: drop-shadow(0px 3px 3px #999);
}

.membersLogos {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
    position: relative;
}

.membersLogo90 {
    width: 90px;
    height: 60px;
    float: left;
}

.membersLogo95 {
    width: 95px;
    height: 60px;
    float: left;
}

.membersLogo195 {
    width: 195px;
    height: 60px;
    float: left;
}

.membersLogo155 {
    width: 155px;
    height: 60px;
    float: left;
}

.membersLogo60 {
    width: 60px;
    height: 60px;
    float: left;
}

.membersLogo120 {
    width: 120px;
    height: 60px;
    float: left;
}

.membersLogo110 {
    width: 110px;
    height: 60px;
    float: left;
}

.membersLogo135 {
    width: 135px;
    height: 60px;
    float: left;
}

.membersLogo155 {
    width: 155px;
    height: 60px;
    float: left;
}

.membersLogo70 {
    width: 70px;
    height: 60px;
    float: left;
}

.membersLogo50 {
    width: 50px;
    height: 60px;
    float: left;
}

.membersLogos a {
    vertical-align: middle;
}

.fct {
    background: url("/img/fct.png") no-repeat 45% 40%;
    margin: 5px;
}

.cesam {
    background: url("/img/cesam.png") no-repeat 45% 40%;
    margin: 5px;
}

.imr {
    background: url("/img/imr.png") no-repeat 25% 40%;
    margin: 5px;
}

.marine {
    background: url("/img/marine.png") no-repeat 40% 40%;
    margin: 5px;
}

.nausicaa {
    background: url("/img/nausicaa.png") no-repeat 40% 25%;
    margin: 5px;
}

.ifremer {
    background: url("/img/ifremer.png") no-repeat 25% 35%;
    margin: 5px;
}

.vliz {
    background: url("/img/vliz.png") no-repeat 25% 0;
    margin: 5px;
}

.submariner {
    background: url("/img/submariner.png") no-repeat 50% 25%;
    margin: 5px;
}

.geoecomar {
    background: url("/img/geoecomar.png") no-repeat 25% 25%;
    margin: 5px;
}

.ieo {
    background: url("/img/ieo.png") no-repeat 50% 25%;
    margin: 5px;
}

.pan {
    background: url("/img/pan.png") no-repeat 45% 25%;
    margin: 5px;
}

.lol {
    background: url("/img/lol.png") no-repeat 25% 25%;
    margin: 5px;
}

.cnr {
    background: url("/img/cnr.png") no-repeat 25% 25%;
    margin: 5px;
}

.frct {
    background: url("/img/frct.png") no-repeat 55% 25%;
    margin: 5px;
}

.becomeBanner {
    background: url("/img/becomeMem.png") no-repeat 0 0;
    height: 90px;
    margin: 20px auto;
    float: none;
    cursor: pointer;
}

.fb {
    background: url("/img/fb.png") no-repeat 0 0;
}

.gg {
    background: url("/img/gg.png") no-repeat 0 0;
}

.twitter {
    background: url("/img/twitter.png") no-repeat 0 0;
}

.linkedin {
    background: url("/img/linkedin.png") no-repeat 0 0;
}

.youtube {
    background: url("/img/youtube.png") no-repeat 0 0;
}

/*  SLIDESHOW  */

.swiper-container {
    width: 100%;
    height: 497px;
    z-index: 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /*-webkit-justify-content: center;*/
    /*justify-content: center;*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    background: #135fac;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 35px;
    z-index: 2;
}

.textoFoto {
    font-family: 'TeXGyreAdventorBold', "sans-serif";
    font-size: 72px;
    color: #fff;
    width: 100%;
    height: 100px;
    position: absolute;
    text-align: center;
    top: 68px;
    line-height: 72px;
    text-shadow: 0 7px 15px #000;
}

.textoFotoSmall {
    font-family: 'TeXGyreAdventor', "sans-serif";
    font-size: 42px;
    color: #fff;
    width: 100%;
    height: 100px;
    position: absolute;
    text-align: center;
    top: 245px;
    text-shadow: 0 7px 15px #000;
    line-height: 42px;
}

/*  NP4    */

#texto {
    font-family: 'Roboto-light', 'sans-serif';
    margin: 12px;
    display: block;
    overflow: hidden;
}

#texto .titulo {
    font-size: 1.25em;
    font-family: 'Roboto-black', 'sans-serif';
    padding: 12px 0 6px;
}

#texto .subtitle {
    font-size: 1em;
    font-family: 'Roboto-black', 'sans-serif';
    padding: 0;
}

#texto h3 {
    font-size: 1.125em;
}

#texto .img {
    display: flex;
    padding: 0 12px 12px 0;
    /*width: 100%;*/
}

#texto .left img {
    display: flex;
    padding: 0 12px 12px 0;
    margin: 0 auto;
    width: 100%;
}

#texto .center img {
    display: flex;
    /*padding: 0 12px 12px 0;*/
    /*margin: 0 auto;*/
    width: 100%;
}

#texto img {
    display: flex;
    /*padding: 0 12px 12px 0;*/
    /*margin: 0 auto;*/
    width: 100%;
}

#texto .left {
    width: 50%;
    float: left;
}

#texto .right {
    width: 50%;
    float: right;
}

#texto .left33 {
    width: 33%;
    float: left;
    height: initial;
}

#texto .right33 {
    width: 33%;
    float: right;
    height: initial;
}

#texto .center33 {
    width: 33%;
    float: left;
    height: initial;
}

#texto .fullWidth {
    width: 100%;
    clear: both;
    float: none;
    padding: 24px 0;
}

#texto .block {
    width: 100%;
    max-width: 632px;
    overflow: hidden;
}

#texto p {
    margin-bottom: 16px;
}

#texto a {
    font-weight: bold;
    color: #5ec0ff;
    font-family: 'Roboto-regular', 'sans-serif';
}

.newsletterForm input {
    border: 0;
    height: 26px;
    width: 96%;
    color: #5ec0ff;
    outline: 0;
    font-size: 0.8em;
    margin: 12px 0;
    padding: 6px;
}

.fb-share-button {
    position: relative;
    float: left;
    height: 20px !important;
    padding-right: 5px;
    padding-left: 5px;
}

.twitter-share-button {
    float: left;
    padding-right: 5px;
}

.IN-widget {
    float: left;
    padding-right: 5px;
}

#___plus_0 {
    float: left;
    padding-right: 4px;
    height: 21px !important;
}

.email_button {
    background: url("/img/emailSmall.png") no-repeat 0 0;
    height: 21px;
    width: 22px;
    float: left;
    cursor: pointer;
    padding-right: 5px;
}

.fb_iframe_widget {
    display: flex !important;
}

.menuEntry {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.alpha_wrapper {
    width: 304px;
    float: right;
    position: relative;
    margin-left: 24px;
}

.alpha_2 {
    height: 80px;
    float: left;
}

/*.alpha_2_text{*/
/*height: 80px;*/
/*}*/

.alpha_2_text {
    height: 80px;
}

.text_holder_2 {
    /*position: absolute;*/
    /*top: 30px;*/
    width: 280px;
    color: #000;
    /*line-height: ;*/
    line-height: 80px;
}

.blocoMiddleLeft {
    overflow: hidden;
    float: left;
    width: 632px;
    margin-bottom: 24px;
}

.blocoMiddleRight {
    overflow: hidden;
    float: right;
    width: 304px;
}

#outerJoin {
    position: absolute;
    z-index: 4;
    max-width: 1400px;
    width: 100px;
    right: 0;
}

#fotoJoin {
    background: url('/img/join.png') no-repeat 0 0;
    background-size: 81px 139px;
    width: 81px;
    height: 139px;
    float: right;
    margin-right: 40px;
}

#imgSidebySide img {
    padding: 12px 6px;
}

.infographic, .infographic1, .infographic2 {
    max-width: 632px;
    position: relative;
    overflow: hidden;
}

.infographic img {
    width: 608px;
    max-width: 608px;
    float: left;
}

.infographic1 #bar {
    width: 608px;
    max-width: 608px;
}

.flag1 {
    left: 70px;
    position: absolute;
    max-width: 75px;
    bottom: 0;
}

.flag2 {
    position: absolute;
    left: 170px;
    max-width: 75px;
    bottom: 0;
}

.flag3 {
    position: absolute;
    left: 270px;
    max-width: 75px;
    bottom: 0;
}

.flag4 {
    position: absolute;
    left: 370px;
    max-width: 75px;
    bottom: 0;
}

.flag5 {
    position: absolute;
    left: 470px;
    max-width: 75px;
    bottom: 0;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

    #menuNav {
        display: none;
    }

    #menuNav .hidden1 {
        display: none;
    }

    #menuNav .lvl0 span {
        padding: 0 6px;
    }

    #menuNav1 {
        display: none;
    }

    #menuNav2 {
        display: block;
    }

    #menuNav2 #menuNovo {
        width: 590px;
        display: block;
        height: 50px;
        position: relative;
        top: 10px;
        float: right;
    }


    #menuNav2 #menuNovo li.lvl0 {
        width: auto;
        padding-right: 25px;
    }

    #menuNovo li.lvl0:nth-child(6), #menuNovo li.lvl0:nth-child(5), #menuNovo li.lvl0:nth-child(4) {
        padding-left: 0;
    }


    #menu {
        /*padding-top: 20px;*/
        padding: 20px 0 0 0;
        /*float: right;*/
        width: inherit;
    }

    #menu li {
        line-height: 35px;
    }

    #top {
        overflow: visible;
    }

    #topcontainer {
        width: 100%;
        z-index: 1;
    }

    #allTop {
        float: left;
        width: 100%;
    }

    .category {
        margin-right: 2.5vw;
        background-size: 100%;
        width: 31.5%;
    }

    .categoryTitle {
        font-size: 1.75em;
    }

    .imgContainer {
        height: 75%;
    }

    .textoFoto {
        font-size: 60px;
        line-height: 60px;
    }

    .textoFotoSmall {
        font-size: 32px;
        line-height: 40px;
        top: 220px;
    }

    .text_holder_2 {
        line-height: 8vw;
        font-size: 14px;
    }

    #mainArea .imagem {
        min-height: 100%;
    }

    #mainArea .box {
        margin-right: 2.5vw;
        width: 31.5%;
        height: 31.5%;
    }

    #innerArea #one .title {
        font-size: 2em;
        line-height: 1.3em;
    }

    .box {
        width: 47%;
        height: 45%;
        float: left;
    }

    #search_bar {
        display: none;
        margin-right: 55px;
        margin-top: 23px;
        top: 0;
    }

    #lupa {
        display: block;
        padding: 26px 14px 0;
        float: right;
    }

    .sumario {
        font-size: 0.8em;
        margin: 0 12px;
        word-wrap: break-word;
    }

    .data {
        font-size: 0.8em;
        margin: 12px 12px 0;
        line-height: 1em;
    }

    .title {
        font-size: 0.8em;
        /*margin: 10px 12px;*/
        margin: 0 12px;
    }

    #mainArea .title {
        height: 65px;
    }

    .smalltitle {
        /*font-size: 0.8em;*/
        /*margin: 3px 12px 0;*/
        font-size: 0.9em;
        margin: 6px 12px 3px;
    }

    #list .title {
        margin: 6px 12px 0;
    }

    .link {
        font-size: 0.6875em;
        margin: 2px 12px 3px;
    }

    #mainArea .sumario {
        height: 34px;
    }

    .bloco {
        width: 100%;
    }

    .bloco1 {
        margin-left: 0;
        max-width: 32%;
        width: 32%;
        overflow: hidden;
        position: relative;
        float: right;
    }

    .blocoMiddleRight .bloco1 {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        float: right;
    }

    .alpha_2 {
        height: 8vw;
        /*margin-bottom: 12px;*/
    }

    .alpha_2_text {
        height: 8vw;
        vertical-align: middle;
    }

    .bloco1 .box {
        height: 100%;
        width: 100%;
    }

    .boxWide {
        width: 100%;
        height: 100%;
        float: left;
        margin-bottom: 24px;
        position: relative;
        background-color: #fff;
    }

    .bloco2 {
        max-width: 66%;
        width: 66%;
        overflow: hidden;
        position: relative;
        float: left;
    }

    .blocoMiddleLeft .bloco2 {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        float: left;
    }

    .bloco2 .box1 {
        height: 100%;
        width: 100%;
        background-color: transparent;
        margin-bottom: 0;
    }

    .bloco3 {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        float: left;
    }

    .blocoMiddleLeft {
        width: 66%;
        min-width: 66%;
    }

    .blocoMiddleRight {
        width: 32%;
        min-width: 32%;
    }

    .becomeBanner {
        margin-right: auto;
    }

    #banner {
        margin-top: 70px;
    }

    .boxSmall {
        width: 100%;
    }

    .boxSmallNp {
        width: 100%;
        /*margin-bottom: 12px;*/
    }

    #logo {
        display: block;
        float: left;
        height: 60px;
        padding: 5px 0 5px 20px;
        width: 180px;
    }

    #logo img {
        float: right;
    }

    #menuNav {
        position: absolute;
        font-size: 1em;
        border: 0;
        right: 0;
        z-index: 5;
    }

    #menuNav .close {
        display: none;
    }

    #menu .lvlNews {
        display: none !important;;
    }

    #foot1 {
        display: none;
    }

    #innerBanner {
        margin-top: 70px;
    }

    #innerBanner .textoFoto {
        top: 60px;
        font-size: 50px;

    }

    #innerBanner .textoFotoSmall {
        top: 135px;
        font-size: 32px;
    }

    #sitemap {
        width: 100%;
    }

    #sitemap .colLeft {
        width: 31%;
        font-size: 0.9em;
    }

    #sitemap .colCenter {
        width: 30.75%;
        font-size: 0.9em;
    }

    #sitemap .colRight {
        width: 31%;
        font-size: 0.9em;
    }

    #sitemap .cat {
        width: 29vw;
    }

    .mapa {
        margin: 12px;
        height: 25vw;
    }

    #map_label {
        width: 90%;
    }

    .fct {
        background: url("/img/fct.png") no-repeat 45% 40%;
        margin: 10px;
    }

    .imr {
        background: url("/img/imr.png") no-repeat 25% 40%;
        margin: 10px;
    }

    .marine {
        background: url("/img/marine.png") no-repeat 40% 40%;
        margin: 10px 15px;
    }

    .nausicaa {
        background: url("/img/nausicaa.png") no-repeat 40% 25%;
        margin: 10px;
    }

    .ifremer {
        background: url("/img/ifremer.png") no-repeat 25% 35%;
        margin: 10px;
    }

    .vliz {
        background: url("/img/vliz.png") no-repeat 25% 0;
        margin: 10px;
    }

    /*.cesam {*/
    /*background: url("/img/cesam.png") no-repeat 50% 25%;*/
    /*margin: 10px;*/
    /*}*/
    .geoecomar {
        background: url("/img/geoecomar.png") no-repeat 25% 25%;
        margin: 10px;
    }

    .ieo {
        background: url("/img/ieo.png") no-repeat 50% 25%;
        margin: 10px;
    }

    .pan {
        background: url("/img/pan.png") no-repeat 45% 25%;
        margin: 10px;
    }

    .lol {
        background: url("/img/lol.png") no-repeat 25% 25%;
        margin: 10px;
    }

    .cnr {
        background: url("/img/cnr.png") no-repeat 25% 25%;
        margin: 10px;
    }

    .frct {
        background: url("/img/frct.png") no-repeat 55% 25%;
        margin: 10px;
    }

    #outerJoin {
        display: none
    }


    .flag1 {
        max-width: 50px;
        left: 10%;
        bottom: 0;
    }

    .flag2 {
        max-width: 50px;
        left: 28%;
        bottom: 0;

    }

    .flag3 {
        max-width: 50px;
        left: 45%;
        bottom: 0;

    }

    .flag4 {
        max-width: 50px;
        left: 63%;
        bottom: 0;

    }

    .flag5 {
        max-width: 50px;
        left: 80%;
        bottom: 0;

    }


}

@media only screen and (max-width: 880px) {
    .smalltitle {
        margin: 0 12px;
        font-size: 13px;
    }

    .link {
        margin: 0 12px 3px;
        font-size: 11px;
    }

    #menuNav1 {
        display: none;
    }

    #menuNav {
        display: none;
    }

    #menuNav2 {
        display: block;
    }

    #menuNav2 #menuNovo {
        width: 463px;
        display: block;
        height: 50px;
        position: relative;
        top: 10px;
        float: right;
    }

    #menuNav2 #menuNovo li.lvl0 {
        width: auto;
        padding-right: 5px;
    }

    #menuNovo li.lvl0:nth-child(4) {
        padding-left: 0;
    }

}

@media only screen and (max-width: 785px) {
    .smalltitle {
        margin: 2px 12px 0;
        font-size: 12px;

    }

    .link {
        margin: 0 12px 3px;
        font-size: 11px;
    }

    #menuNav1 {
        display: none;
    }

    #menuNav {
        display: none;
    }

    #menuNav2 {
        display: block;
    }


    /*#menuNav2 #menuNovo{*/
    /*width: 474px;*/
    /*display: block;*/
    /*height: 50px;*/
    /*position: relative;*/
    /*top: 10px;*/
    /*float: right;*/
    /*}*/
    /*#menuNav2 #menuNovo li.lvl0{*/
    /*width: auto;*/
    /*padding-right: 13px;*/
    /*}*/


}

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

    body {
        min-width: 288px;
    }


    #menuNav2 {
        display: none;
    }

    #menuNav1 {
        display: none;
    }

    #innerBanner {
        margin-top: 0;
    }

    #innerBanner .textoFoto {
        font-size: 32px;
    }

    #innerBanner .textoFotoSmall {
        font-size: 24px;
    }

    #innerArea {
        min-width: 288px;
        padding: 24px 0;
    }

    #innerArea .boxWide {
        margin: 0 0 24px 0;
        width: 100%;

    }

    .alpha_2_text {
        height: 80px;
    }

    .text_holder_2 {
        width: 280px;
        line-height: 80px;
        font-size: 1em;
    }

    .data {
        font-size: 0.875em;
        margin: 12px 12px 0;
    }

    .title {
        font-size: 1em;
        height: auto;
    }

    .sumario {
        font-size: 1em;
        line-height: 1.2em;
        margin: 0 12px 0;
    }

    .link {
        font-size: 0.875em;
        line-height: 1.5em;
        margin: 0 12px 6px;

    }

    #mainArea .box {
        width: 304px;
        height: 304px;
        float: left;
        margin-bottom: 24px;
        position: relative;
        margin-right: 0;
    }

    .box {
        width: 304px;
        height: 304px;
        float: left;
        margin-bottom: 24px;
        position: relative;
        margin-right: 0;
    }

    .imagem {
        min-height: 232px;
        height: 232px;
    }

    #mainArea {
        padding: 24px 0;
    }

    #menu {
        margin-top: 0;
        display: none;
        margin-bottom: 20px;
    }

    #menu li {
        display: none;
        margin: 0 auto;
        padding: 10px;
        line-height: 1em;
    }

    #menu li:hover {
        background: #fff;
        color: #135fac;
    }

    #menu li:hover ul a {
        background: none;
    }

    #menu li:hover ul a:hover {
        background: #fff;
        color: #135fac;
    }

    li.show {
        width: 85vw;
        /*width: 90vw;*/
    }

    #menu.show span {
        margin: 10px 0;
        line-height: 1.5em;
    }

    #menu.show li ul li {
        padding: 5px 10px;
        border: 0;
        line-height: 1.3em;
    }

    #menuNav {
        width: 100%;
        background-color: white;
        position: fixed;
        top: 0;
    }


    #menuNav #menuIcon {
        display: block;
        cursor: pointer;
        width: 20px;
        height: 36px;
    }

    #menu #search {
        display: none;
    }

    .menuSmall {
        height: 100%;
        width: 100%;
    }

    .menuSmall #menu {
        /*float: right;*/
        width: 94vw;
        margin: 0 15px 15px;
        display: inline;
        padding-top: 0;
    }

    #menu ul {
        position: relative;
    }

    .menuSmall #menu ul a {
        white-space: normal;
    }

    .menuSmall .lvl0 {
        border-top: 1px solid #135fac;
    }

    #menuNav #search_bar {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 30px 0;
        float: left;
        left: 0;
    }

    #menuNav #search_bar input {
        color: #135fac;
        border-top: 1px solid #135fac;
        border-bottom: 1px solid #135fac;
        background: url("/img/search_arrowDark.png") no-repeat 100% 50%;
    }

    #lupa {
        display: none;
    }

    #menu.show .hidden1 {
        display: block;
    }

    #members {
        display: none;
    }

    .trigram {
        cursor: pointer;
        background: url("/img/menuIcon.png") no-repeat 0 0;
        background-size: 30px 25px;
        height: 25px;
        width: 30px;
        margin: 22px;
        float: right;
    }

    .close {
        cursor: pointer;
        background: url("/img/close.png") no-repeat 0 0;
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        margin: 22px;
        float: right;
    }

    .textoFoto {
        font-size: 44px;
        line-height: 44px;
    }

    .textoFotoSmall {
        font-size: 22px;
        line-height: 28px;
        top: 185px;
    }

    .category {
        width: 100%;
        margin-bottom: 24px;
        float: left;
        margin-left: 0;
        margin-right: 0;
    }

    .categoryTitle {
        font-size: 1.25em;
    }

    .bloco {
        min-width: 304px;
        margin: 0 auto;
        width: 25%;
    }

    .bloco1 {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        float: left;
    }

    .bloco2 {
        max-width: 100%;
        width: 100%;
    }

    #foot {
        display: none;
    }

    #foot1 {
        background-color: #072340;
        display: block;
        color: #fff;
        height: 50px;
        margin: 0 auto;
        /*padding: 0 24px;*/
        padding: 0 12px;
        clear: both;
    }

    .arrow1 {
        position: relative;
        top: 15px;
    }

    #lupa {
        position: absolute;
        top: 5px;
        left: 135px;
        padding: 0;
    }

    .triangle {
        border-right: 2px solid;
        border-bottom: 2px solid;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        color: #135fac;
        position: relative;
        margin: 10px auto;
        cursor: pointer;
    }

    #list .boxWide .title {
        margin: 12px;
        display: block;
        font-size: 1em;
        height: auto;
    }

    .boxWide {
        width: 100%;
        margin-bottom: 24px;
    }

    #menu .lvlNews {
        display: block !important;
    }

    .mapa {
        height: 280px;
        margin: 12px;
    }

    #map_label {
        width: 280px;
    }

    #texto .left {
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }

    #texto .right {
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }

    #texto .left33 {
        width: 100%;
    }

    #texto .right33 {
        width: 100%;
    }

    #texto .center33 {
        width: 100%;

    }

    #texto .img {
        padding: 0;
        height: 80px;
    }

    #texto .left img {
        padding: 12px 0;
    }

    #banner {
        margin-top: 0;
    }

    /*#allTop {*/
    /*position: inherit;*/
    /*}*/
    #topcontainer {
        position: inherit;
    }

    #list .box .title {
        margin: 6px 12px 4px;
    }

    .smalltitle {
        font-size: 1em;
        margin: 6px 12px 0;
    }

    .blocoMiddleLeft {
        width: 100%;
    }

    .blocoMiddleRight {
        width: 100%;
    }

    .alpha_2 {
        /*margin-bottom: 24px;*/
        height: 80px;
    }

    .boxSmallNp {
        margin-bottom: 24px;
    }

    .imgCont {
        width: 100%;
        height: 100%;
        float: left;
        padding: 12px;
    }

    .img1 {
        /*min-height: 232px;*/
        /*height: 232px;*/
        width: 280px;
    }

    .becomeBanner {
        width: 280px;
        margin: 20px auto;
        float: none;
    }

    #fotoBanner {
        padding-right: 0 !important;
    }

    /*#fotoJoin{*/
    /*background-size: 61px 104px !important;*/
    /*}*/
    #outerJoin {
        display: none;
    }

    .flag1 {
        max-width: 35px;
        left: 20px;
        bottom: 0;
    }

    .flag2 {
        max-width: 35px;
        left: 70px;
        bottom: 0;

    }

    .flag3 {
        max-width: 35px;
        left: 120px;
        bottom: 0;

    }

    .flag4 {
        max-width: 35px;
        left: 170px;
        bottom: 0;

    }

    .flag5 {
        max-width: 35px;
        left: 220px;
        bottom: 0;

    }


}