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


/***** NAVBAR******/

/* Items que deixam de aparecer na nav e passam a aparecer no menu vertical*/
div.top nav.collapse-navbar div.menu-two h3,
div.top nav.collapse-navbar div.menu-two h2,
div.top nav.collapse-navbar div.menu-two a,
div.top nav.collapse-navbar div.menu-two button,
div.top nav.collapse-navbar div.menu-two div.share-social-media.only-large-devices,
div.top nav.collapse-navbar div.menu-two div.share-social-media div.filet::after,
div.top nav.collapse-navbar div.menu-one div.filet::after{
display: none;
}


/*O que se acrescenta: o icon do toogle e as redes sociais do static menu*/
div.top nav.collapse-navbar div.menu-one a.icon.only-small-devices,
div.top nav.collapse-navbar div.menu-one div.share-social-media.only-small-devices,
div.top nav.collapse-navbar div.menu-one div.only-small-devices.share-social-media div.filet::after {
display: block;
}

div.top nav.collapse-navbar div.menu-one div.only-small-devices.share-social-media div.filet::after {
float: right;
}


/*MENU DO TOGGLE*/


/* 1 (SEM E COM SCROLL) display e espacejamento do menu vertical*/

div.top nav.collapse-navbar div.menu-two.responsive h2,
div.top nav.collapse-navbar div.menu-two.responsive h3,
div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index
{
display: block;
}


div.top nav.collapse-navbar div.menu-two a span.title-vertical_menu,
div.top nav.collapse-navbar div.menu-two.responsive button
 {
display: inline-block;
margin-top: -0.3em;
color: #8594A8;
padding-left: 0.5em;
font-style: normal;
font-weight: 800;
}

div.top nav.collapse-navbar div.menu-two.responsive button {
padding-left: 0em;
padding-right: 0em;
padding-top: 0em;
padding-bottom: 0em;
margin-left: 0em;
margin-right: 0em;
}

div.top nav.collapse-navbar div.menu-two.responsive a.no-vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive button {
display: table;
margin: 0 auto;
}


div.top nav.collapse-navbar div.menu-two a span.title-vertical_menu.dot {
font-size: 1.5em;
color: #d66261;
padding-right: 0.2em;
}

/*Nota, para conseguir que o filet do hover ficásse mais colado à palavra tive de alterar o padding (relativamente ao menu dos large devices) do menu e de acrescentar uma margin-bottom para compensar a diminuição do padding, senão ficava tudo muito colado*/

/*distância do menu vertical ao limite superior do menu. A margin-top não funciona*/
div.top nav.collapse-navbar div.menu-two.responsive h3,
div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index {
padding-top: 1.4em;
}

div.top nav.collapse-navbar div.menu-two.responsive h2.no-vertical-border, 
div.top nav.collapse-navbar div.menu-two.responsive h3.no-vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index,
div.top nav.collapse-navbar div.menu-two.responsive a.no-vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive button.no-vertical-border {
/*padding-bottom: 0.2em;
margin-bottom: 0.5em
margin-top: -0.3em;*/
}

/*os créditos têm neste caso um entrelinhamento diferente por causa dos items terem duas linhas*/
div.top nav.collapse-navbar div.menu-two.responsive button.no-vertical-border {
margin-top: 0.6em;
}

/* 2 SEM E COM SCROLL cores do MENU VERTICAL*/  
div.top nav.collapse-navbar div.menu-two.responsive a,
div.top nav.collapse-navbar div.menu-two.responsive h2,
div.top nav.collapse-navbar div.menu-two.responsive h3,
div.top nav.collapse-navbar div.menu-two.responsive button {
float: none;
text-align: center;
color: #8594A8;
/*color: #d66261;*/
clear: both;
}

div.top nav.collapse-navbar div.menu-two.responsive a {
/*color: #FFFFFF;*/
font-size: 1.5em;
font-weight: 600;
}

div.top nav.collapse-navbar div.menu-two.responsive a.special-item {
color: #7e7c7c;
}


div.top nav.collapse-navbar div.menu-two.responsive h2,
div.top nav.collapse-navbar div.menu-two.responsive h3,
div.top nav.collapse-navbar div.menu-two.responsive button {
color: #7e7c7c;
}


/* 3 Formatação básica do (contentor) menu vertical*/

/*formatar a zona do menu vertical*/
div.top nav.collapse-navbar div.menu-two.responsive {
position: relative;
z-index: 2;
margin-top: 4.8em;
margin-bottom: 4.8em;
height: 100%;
/*background: #000000;
height: 41em;
margin-top: -1.4em;*/
/*z-index para o E e o haburguer button ficarem por cima do menu vertical e portnto aparecerem*/
}  


/*
Adciona a cor da secção no viewport
*/
div.top nav.collapse-navbar div.menu-two.responsive a.active .title-vertical_menu{
    color: #FFFFFF;
}


/*por cima aparece lá está o E e o hamburguer button*/
div.top nav.collapse-navbar div.menu-one {
/*z-index: 3;*/
z-index: 2;
}


/* 4 Formatação básica dos items do menu vertical (collapse-navbar quando o menu vertical está aberto)*/

/*modificar o padding-bottom do collapse-navbar*/
.responsiveIsOpen div.top nav.collapse-navbar {
/*padding:1.4em 0em 0em 0em;
padding: 0.85em 0em 0em 0em;*/ 
background-color: #000000;
}


.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects {
box-shadow:none;
}





/*modificar a cor dos links collapse-navbar*/
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one a,
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a,
/*.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-two a,*/
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-two h2, 
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-two h3,
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-two button,
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-two div.share-social-media a { 
/*color: #fff;*/
}

/*modificar a cor dos filets verticais collapse-navbar*/
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one a.vertical-border, 
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a.vertical-border {
/*border-right: 0.1em solid rgba(250, 250, 250, 0.65);*/
}

/*retirar o logo 'E' preto*/
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one a.only-scrolled_menu {
display: none;  
}

/*inserir o logo 'E' branco*/
.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one a.no-scrolled_menu {
display: block;  
}

/****NOTA! muitas vezes a regra para o menu sem scroll funciona também para o com scroll*/




/* 5 (SEM E COM SCROLL) cor dos links hover do menu vertical*/
/*div.top nav.collapse-navbar div.menu-two.responsive a:hover,
div.top nav.collapse-navbar div.menu-two.responsive button:hover {
color: #FFF;
}*/


div.top nav.collapse-navbar div.menu-one a.icon.only-small-devices:hover, 

div.top nav.collapse-navbar div.menu-one div.share-social-media.only-small-devices a:hover {
color: #dca90e;
}


/* 6 SEM E COM SCROLL cor do filet do hover do menu vertical*/
div.top nav.collapse-navbar div.menu-two.responsive a span:hover,
div.top nav.collapse-navbar div.menu-two.responsive button span:hover,
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a span:hover,
/*div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive button span:hover,*/
div.top nav.collapse-navbar div.menu-two.responsive button.no-vertical-border:hover
 {
/*border-bottom: 0.03em solid #FFF;*/
color: #a00000;
}


div.top nav.collapse-navbar div.menu-two.responsive a.special-item:hover{
color: #FFFFFF;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index:hover {
border-bottom: none;
color: #a00000;
}



/* 7 SEM E COM SCROLL retirar (pôr transparente) o filet dos headings do menu vertical*/
div.top nav.collapse-navbar div.menu-two.responsive h2.vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive h3.vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index
 {
border-right: 0.1em solid rgba(255, 255, 255, 0);
}

div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
border-right: 0.1em solid rgba(255, 255, 255, 0);
}


/* 8 SEM E COM SCROLL estilizar fontes do h2 do menu vertical*/
div.top nav.collapse-navbar div.menu-two.responsive h2.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive h2.vertical-border,
div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index,
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
font-size: 1.49em;
/*margin-top: -0.2em;*/
color: #ffffff;
font-weight: 600;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index,
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
padding-right: 0rem;
margin-right: 0rem;
margin-left: 0rem;
}



/* 9 SEM E COM SCROLL estilizar fontes do h3 do menu vertical sem scroll*/
div.top nav.collapse-navbar div.menu-two.responsive h3.vertical-border,
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive h3.vertical-border {
line-height: 0em;
color: rgb(148, 150, 156);
}


/* 10

/*current-item SEM SCROLL*/  
div.top nav.collapse-navbar div.menu-two.responsive a.current-item,
/*current-item COM SCROLL*/  
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.current-item {
pointer-events: none;
cursor: default;
border-bottom: 0.03em solid #FFF;
}


div.top nav.collapse-navbar div.menu-one a.logo,
div.top nav.collapse-navbar.scroll-effects div.menu-one a.logo,

.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one a.logo, 

.responsiveIsOpen div.top nav.collapse-navbar.scroll-effects div.menu-one div.share-social-media a.logo {
border-right: none;
}

/*MODAL BOX*/

div.top nav.collapse-navbar div.menu-two div.modal-box-container {
width: 100%;
top: 5.2em;
z-index: 7;
position: fixed;
overflow: auto;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content

{
width: 100%;
/*background-color: #1b1a1a;*/
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
    padding: 2.7em 1em 4em 1em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button.close {
/*z-index: 7;*/
display: block;
position: fixed;
right: 0;
top: 0;
background-color: transparent;
margin: 0em;
border-bottom: 0em;
padding: 1.8em 2.6em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button.close:hover {
    background-color: transparent;
}

/***** FIM NAVBAR ******/

div.top nav.collapse-navbar div.menu-two div.zona-central div.menu-central {
position: relative;
left: 0;
top: 0;
transform: none;
transform: none;
padding-top: 0em;
}


}








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

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index, div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
padding-top: 3em;
}

/*div.top nav.collapse-navbar div.menu-two div.modal-box-container {
padding-top: 121px;
}*/

div.top nav.collapse-navbar div.menu-two a, 
div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3, 
div.top nav.collapse-navbar div.menu-two button, 
div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button, 
div.top nav.collapse-navbar div.menu-two div.share-social-media a {
font-size: 1.35em;
}


/**/

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index {
font-size: 1.7em;
}

div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
font-size: 1.45em;
}

div.top nav.collapse-navbar div.menu-two.responsive a {
font-size: 1.7em;
}

div.top nav.collapse-navbar div.menu-two.responsive {
/*height: 51em;*/
}

/**/

div.top nav.collapse-navbar div.menu-two div.modal-box-container {
top: 8.2em;
}


}






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

div.top nav.collapse-navbar div.menu-two.responsive a {
font-size: 1.65em;
}

div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
font-size: 1.4em;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index {
font-size: 1.65em;
}

div.top nav.collapse-navbar div.menu-two.responsive {
/*height: 47em;*/
margin-left: 9em;
margin-right: 9em;
}



}






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


/**/

div.top nav.collapse-navbar div.menu-two.responsive a {
font-size: 1.9em;
}

div.top nav.collapse-navbar div.menu-two button.no-vertical-border {
font-size: 1.6em;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index {
font-size: 1.75em;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index, 
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
padding-top: 3.5em;
}

div.top nav.collapse-navbar div.menu-two.responsive {
/*height: 55em;*/
}

/**/

div.top nav.collapse-navbar div.menu-one a.logo {
margin-left: 1.6em;
}

div.top nav.collapse-navbar div.menu-one a.logo div#swap-logo {
width: 23px;
height: 20px;
}

div.top nav.collapse-navbar div.menu-one a.logo div#swap-logo:hover {
width: 23px;
height: 20px;
}

/*

div.top nav.collapse-navbar div.menu-one a, 
div.top nav.collapse-navbar div.menu-one div.share-social-media a, 
div.top nav.collapse-navbar div.menu-two a, 
div.top nav.collapse-navbar div.menu-two h2, 
div.top nav.collapse-navbar div.menu-two h3, 
div.top nav.collapse-navbar div.menu-two button, 
div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text button, .top nav.collapse-navbar div.menu-two div.share-social-media a
 {
font-size: 1.4em;
line-height: 1.4em;
}

div.top nav.collapse-navbar div.menu-one a {
padding: 0.8rem 1.4rem;
}

*/

div.top nav.collapse-navbar div.menu-two.responsive h2.vertical-border, 
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive h2.vertical-border {
font-size: 1.7em;
padding-top: 3em;
}

div.top nav.collapse-navbar div.menu-two.responsive a.back-to-index.vertical-border, 
div.top nav.collapse-navbar.scroll-effects div.menu-two.responsive a.back-to-index.vertical-border {
font-size: 1.6em;
}

/*modal box*/

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content {
    width: 275px;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text {
    padding: 4em 5em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text cite {
    font-family: "Firme-Medium",sans-serif;
    font-size: 1.5em;
    line-height: 1.3em;
}


div.top nav.collapse-navbar div.menu-two div.modal-box-container div.modal-box-content div.modal-box-text h6 {
    width: 100%;
    font-size: 1.4em;
}

div.top nav.collapse-navbar div.menu-two div.modal-box-container {
    top: 8.4em;
}

}