/*********************************************************************************************************************/
/* BLOCKS */
/*********************************************************************************************************************/
block {position:relative; padding:2vw; display:block; background-color:#FFFFFF; border-radius:0.5vw;}
block h2 {overflow:hidden; font-size:1.5vw; text-transform:uppercase; text-align:center; white-space:nowrap; text-overflow:ellipsis;}
block.big h2 {font-size:2.5vw;}
block number {display:block; margin:0.5vw auto 0 auto; font-size:6vw; text-align:center;}
block number span {color:#EBEBEB;}
block name {overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis;}

block.big {width:50vw;}
block.big.shadow:after {bottom:-4vw; height:4vw;}
block.large {width:30vw;}
block.medium {width:15vw;}
block.medium.shadow:after {bottom:-2vw; height:2vw;}

block.small {width:12vw;}
block.small.shadow:after {bottom:-1.5vw; height:1.5vw;}
block.small number {font-size:4vw;}
block.small h2 {font-size:1vw;}

block.transparent {opacity:0.3;}
block mini {position:absolute; bottom:1vw; left:0; display:block; width:100%; font-size:0.6vw; font-style:italic; text-align:center;}

block.little {padding:0; width:16vw; height:7vw;}
block.little figure {border-radius:0.5vw;}
block.little.shadow:after {bottom:-1.5vw; height:1.5vw}
block.little .content {position:absolute; top:0; margin:inherit; width:16vw; height:7vw; line-height:7vw; text-align:center; border-radius:0.5vw; transition:ease-in-out 0.2s;}
block.little .content h2 {margin:auto; width:15vw; font-size:1vw; color:#FFFFFF; text-align:center;}
block.little.purple:hover .content {background-color:rgba(87,80,199,0.7);}
block.little.green:hover .content {background-color:rgba(111,184,116,0.7);}
block.little.orange:hover .content {background-color:rgba(232,170,43,0.7);}
block.little.dark:hover .content {background-color:rgba(41,57,99,0.7);}
block.little.white:hover .content {background-color:rgba(169,170,173,0.7);}
block.little.beige:hover .content {background-color:rgba(206,195,160,0.7);}

block.macro {padding:0; width:16vw; height:3vw; transition:ease-in-out 0.2s;}
block.macro.shadow:after {bottom:-1.5vw; height:1.5vw}
block.macro .content {margin:inherit;}
block.macro .content h2 {padding:1vw 0 0 1vw; width:14vw; font-size:0.8vw; text-align:left;}
block.macro .content h2 i {padding-right:0.5vw; color:#EBEBEB;}
block.macro .content tag {position:absolute; top:0.3vw; right:1vw; min-width:0.7vw; text-align:center;}
block.macro .content lock {position:absolute; top:0; right:0; display:block; height:3vw; padding:0 1vw; line-height:3vw; text-align:center; color:#FFFFFF; background-image:linear-gradient(65deg, #FFD21E, #E7B201); border-radius:0 0.5vw 0.5vw 0; border-left:solid 0.2vw #E7B201;}
block.macro:hover a {color:#FFFFFF;}
block.macro.orange:hover {background-color:#EF8000; color:#FFFFFF;}
block.macro.green:hover {background-color:#509D02; color:#FFFFFF;}
block.macro.grey:hover {background-color:#B4C3DD; color:#FFFFFF;}
block.macro.blue:hover {background-color:#62A0DB; color:#FFFFFF;}
block.macro.purple:hover {background-color:#A90CB4; color:#FFFFFF;}
block.macro.red:hover {background-color:#D50E0E; color:#FFFFFF;}
block.macro.gold:hover {background-color:#E7B201; color:#FFFFFF;}
block.macro.yellow:hover {background-color:#ECD100; color:#FFFFFF;}

block.left {margin:inherit !important; padding:0.3vw 1vw; width:inherit !important; height:inherit; cursor:pointer;}

block.float {float:left; margin:0 3vw 3vw 0;}
block.link {cursor:pointer;}
block.filter {margin:1vw 0; width:19vw;}
block.triangle:before {content:""; position:absolute; top:-0.7vw; left:calc(50% - 1.5vw); display:block; width:1.5vw; height:1.5vw; background-color:#FFFFFF; transform:rotate(45deg);}
block.shadow:after {content:""; position:absolute; bottom:-2.5vw; left:0; display:block; width:100%; height:2.5vw; background:url("../../img/shadow.png"); background-position:top; background-size:100%;}
block.box {box-shadow:0 0 0.3vw rgba(0,0,0,0.5);}
block.on {background-image:linear-gradient(75deg, #0C68BE, #62A0DB); color:#FFFFFF;}
block.on:hover {background-image:linear-gradient(75deg, #0C68BE, #62A0DB);}

block.office {padding:0; width:19vw; height:7vw;}
block.office figure {border-radius:0.5vw;}
block.office h2 {overflow:inherit; position:absolute; top:0.5vw; left:1vw;}
block.office tag {display:inline; width:1vw; text-align:center;}
block.office h2 bold {padding-left:0.5vw; font-size:0.8vw; color:#FFFFFF; }
block.office number {position:absolute; top:0; right:1vw; margin:0; color:#FFFFFF; text-align:right;}
block.office number span {color:rgba(255,255,255,0.5);}

block figure {position:absolute; top:0; left:0; width:100%; height:7vw; border-radius:0.5vw 0.5vw 0 0;}
block.big figure {height:15vw;}
block figure img {position:absolute; top:2.5vw; left:calc(50% - 4vw); width:8vw; height:8vw; border-radius:20vw; background-color:#FFFFFF; border:solid 0.25vw #FFFFFF;}
block.big figure img {left:calc(50% - 10vw); top:4.5vw; width:20vw; height:20vw;}
block.big.bannerApps figure img {left:calc(50% - 5vw); top:10vw; width:10vw; height:10vw;}
block figure icons {position:absolute; top:-1vw;}
block figure icons.left {left:1vw;}
block figure icons.right {right:1vw;}
block figure icon {display:block; float:left; margin:0 0.2vw; width:2vw; height:2vw; line-height:2vw; text-align:center; color:#FFFFFF; background-color:#FFFFFF; border-radius:10vw; box-shadow:0 0 0.3vw rgba(0,0,0,0.5);}
block figure icon.small {font-size:1vw;}
block figure icon.large {top:-1vw; font-size:2vw;}
block figure icon.blue {background-image:linear-gradient(75deg, #0C68BE, #62A0DB);}
block figure icon.red {background-image:linear-gradient(75deg, #830000, #D50E0E);}
block figure icon.orange {background-image:linear-gradient(75deg, #EF8000, #FFAC4C);}
block figure icon.green {background-image:linear-gradient(75deg, #418300, #72D50E);}
block figure icon.green2 {background-image:linear-gradient(75deg, #33a171, #4ac690);}
block figure icon.gold {background-image:linear-gradient(75deg, #D2A100, #FFD447);}

block empty {position:absolute; top:3vw; left:calc(50% - 4vw); width:8vw; height:8vw; text-align:center; text-transform:uppercase; font-size:3vw; color:#FFFFFF; line-height:8vw; border-radius:20vw; border:solid 0.25vw #FFFFFF;}
block.big empty {top:4.5vw; left:calc(50% - 10vw); width:20vw; height:20vw; font-size:5vw; line-height:20vw;}
block empty.blue {background-color:#62A0DB;}
block empty.pink {background-color:#FF00D6;}

block version {z-index:2; position:absolute; top:5vw; right:0.5vw; display:block; margin:auto; padding:0.3vw; font-size:0.5vw; text-align:center; color:#F2F2F2; background-color:rgba(255,255,255,0.3); border-radius:0.3vw;}
block.big version {top:0.5vw;}

block paginateLeft {position:absolute; top:8vw; left:3vw; display:block; font-size:2vw; color:#EBEBEB; cursor:pointer;}
block paginateRight {position:absolute; top:8vw; right:2.7vw; display:block; font-size:2vw; color:#EBEBEB; cursor:pointer;}

block .content {margin:10vw 0 1vw 0;}
block.big .content {margin-top:25vw;}
block.big.bannerApps .content {margin-top:20vw;}
block .content civility {display:block; text-transform:capitalize; font-size:1vw;}
block.big .content civility {font-size:1.5vw;}
block .content tag {margin-top:0.5vw;}
block .content p {margin:1vw 0; font-size:0.8vw; text-align:center;}
block .content p span {overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis;}
block .content word {position:relative; display:block; margin:2vw auto 0 auto; width:40vw; font-size:2vw; color:#D9D9D9;}
block .content word i:first-of-type {position:absolute; top:0; left:-5vw; font-size:4vw;}
block .content word i:last-of-type {position:absolute; top:0; right:-5vw; font-size:4vw;}
block .content word.small {margin:-4vw auto 2vw auto; font-size:1vw;}

block.overlay {padding:0;}
block.big.overlay {width:54vw;}
block.overlay center {display:block; padding:3vw 0; color:#FFFFFF; text-align:center; border-radius:0.5vw;}
block.overlay.orange center {background-color:rgba(239,128,0,0.7);}
block.overlay.red center {background-color:rgba(213,14,14,0.7);}
block.overlay.green center {background-color:rgba(80,157,2,0.7);}
block.overlay.grey center {background-color:rgba(180,195,221,0.7);}

block img {margin:0.5vw auto 0 auto; display:block; width:50%;}

@media screen and (max-width:1024px) {
	block.float{float:none; margin: 0vw;}
	
	block.medium{width: 22vw;}
	block.medium slide{font-size: 1vw;margin-top: 1vw;}
	block.medium .content h2{font-size: 2vw;}
	block.medium .content civility{font-size: 1.8vw;}
	block.medium .content p br{display: block;}
	block.medium tag{max-width: 12vw; font-size: 1.6vw;}
	block.medium paginateRight, block.medium paginateLeft{top: 10vw;font-size: 2.5vw;}
	
	block.office{width: 30vw;}
	block.office h2{top: 1.5vw;}
	block.office h2 bold{font-size: 2.5vw;position: relative; top: 0.4vw;}
	block.office tag{padding: 0.6vw;font-size: 1.6vw;border-radius: 0.4vw;}
	
	block.macro {width: 30vw;height: fit-content;margin: 1vw auto;}
	block.macro .content lock{height: 5vw; line-height: 5vw;}
	block.macro .content h2{width: 24vw;font-size: 1.5vw;text-wrap:auto;padding: 1vw 0 1vw 1vw;}
	block.macro .content tag{font-size: 1.6vw;min-width: 1.8vw;margin-top: 0vw; top: 50%; transform: translateY(-50%);}
	
	block.small{width: 22vw;}
	block.small .content{min-height: 17vw;}
	block.small .content tag {max-width: 16vw; font-size: 1.6vw;}
	block.small .content civility{font-size: 1.5vw;}
	block.small h2{font-size: 2vw;text-wrap:auto;}
	
	block.little, block.little .content {width: 25vw;}
	block.little .content h2{font-size: 2vw;width: 25vw;}
	
	block .content p{font-size: 1.8vw;}
	
	block.big , block.big.overlay{width: 60vw;}
	block.big.overlay br{display :block;}
	block.big figure img, block.big figure empty{width: 18vw; height: 18vw; left:calc(50% - 9vw);top:5.5vw; line-height: 18vw;}
	block.big .content {margin-top: 23vw;}
	block.big .content h2{font-size: 3.5vw}
	block.big .content civility{font-size: 3vw;}
	block.big tag{max-width: 14vw; font-size: 1.6vw;}
	block.big detail dd{width: 50vw;display:flex; flex-direction: column;align-items: center;justify-content: space-around;margin: 2.5vw auto;}
	block.big detail dd span{text-align: center;width: 50vw; height: 3vw;font-size: 2.5vw;padding-right: 0vw;}
	block.big detail dd aside{font-size: 2vw;}
	block.big center img{width: 20vw !important;}
	block.big center .button{max-width: 30vw; font-size: 2vw;}
	
	block figure icon {width: 3vw; height: 3vw; line-height: 3.2vw;}
	block figure icon.small{font-size: 2vw;}
	block mini{font-size: 1.6vw;margin-top: 2vw;position: initial;}
	block name{white-space: pre-wrap;}
	#downloads block.macro {width: 50vw;text-wrap:nowrap;}
	#downloads block.macro .content h2{font-size: 2vw;padding-top: 0.5vw;}
	
	columnRight block.macro{width: 60vw;height: 5vw;}
	columnRight block.macro .content h2{width: 38vw; font-size: 2.5vw; padding-top: 0vw;}
	
	years block.macro{width: fit-content; height: fit-content; padding: auto 1vw;font-size: 2vw;}
}

@media screen and (max-width:1024px) and (orientation:landscape){
	block.small{width: 19vw;}
	
	block.medium{width: 16vw;}
	
	block.office{width: 20vw;}
	block.office number{visibility: hidden;}
	
	block.macro {width: 20vw;height: 6vw;}
	block.macro .content h2{width: 16vw;font-size: 1.5vw;padding-top: 1.2vw;text-wrap:auto;}
	
	#downloads block.macro{width: 34vw;}
	#downloads block.macro .content h2{width: 31vw;padding-top: 0.5vw;text-wrap:nowrap;}
	
	filters block.macro{height: fit-content;}
	filters block.macro .content h2{width: 14vw;}
}
@media screen and (max-width:780px) {
	block.small {width: 38vw;}
	block.small .content{margin-top: 15vw;min-height: 30vw;}
	block.small h2{font-size: 3.5vw;}
	block.small .content civility{font-size:  3vw;}
	block.small number{font-size: 6vw;}
	block.small figure{height: 10vw;}
	block.small figure img, block.small figure empty{width: 10vw; height: 10vw; top: 4vw; left:  calc(50% - 5vw);line-height: 10vw;}
	block.small .content tag {max-width: 16vw; font-size: 2vw;}
	
	block.medium{width: 40vw;}
	block.medium .content{margin-top: 15vw;min-height: 30vw;}
	block.medium .content h2{font-size: 3.5vw;}
	block.medium .content civility{font-size: 3vw;}
	block.medium figure{height: 10vw;}
	block.medium figure icons{top: -2vw;}
	block.medium figure img, block.medium figure empty{width: 10vw; height: 10vw; top: 4vw; left:  calc(50% - 5vw);line-height: 10vw;}
	block.medium paginateRight, block.medium paginateLeft{top: 13vw;font-size: 4.5vw;}
	
	block.office {width: 80vw;height: 12vw;}
	block.office h2{top: 3vw;}
	block.office figure{height: 100%}
	block.office h2 bold{font-size: 4.5vw;}
	block.office tag{font-size: 3.6vw; }
	
	block.macro {width: 80vw;height: 10vw;}
	block.macro .content h2{width: 75vw; font-size: 3.8vw; padding-top: 2.8vw;}
	block.macro .content tag{font-size: 3.6vw; min-width: 3vw;}
	block.macro .content lock{height: 8vw; line-height: 8vw;}
	
	block.little , block.little .content{width: 45vw; height: 12vw;border-radius: 1.5vw;}
	block.little figure{height: 100%;border-radius: 1.5vw;}
	block.little .content h2{width: 45vw; font-size: 3vw;text-wrap:auto;padding-top: 2.5vw;}
	
	block.big , block.big.overlay{width: 80vw;}
	block.big figure{height: 30vw;}
	block.big figure img, block.big figure empty{width: 30vw; height: 30vw; left: calc(50% - 15vw);line-height: 30vw;top: 11vw;}
	block.big .content {margin-top: 45vw;}
	block.big .content h2{font-size: 7vw; }
	block.big .content civility {font-size: 6.5vw;}
	block.big detail dd{width: 70vw;margin-bottom: 3.5vw;}
	block.big detail dd span{width: 70vw;height: 7vw; font-size: 5.5vw;}
	block.big detail dd aside{font-size: 5vw;}
	block.big center .button{max-width: 50vw; font-size: 4vw;}
	block.big center img{width: 30vw !important;}
	block.big .content tag{max-width: 35vw; font-size: 4.6vw;}
	
	block figure icon {width: 4.5vw; height: 4.5vw; line-height: 4.8vw;}
	block figure icon.small{font-size: 3vw;}
	block mini{font-size: 2.6vw;}
	block .content p {font-size: 3vw;}
	
	#downloads block.macro{width: 80vw; height: 8vw;}
	#downloads block.macro .content h2{font-size: 3.7vw;padding-top: 1vw;width: 75vw;}
	
	columnRight block.macro{width: 80vw;height: 8vw;}
	columnRight block.macro .content h2{width: 75vw; font-size: 3.5vw; padding-top: 1vw;}
	
	years block.macro {width: fit-content; height: fit-content; padding: auto 1vw;font-size: 4vw;}
	filters block.macro {width: 45vw; height: fit-content;}
	filters block.macro .content h2{width: 30vw;}
	filters block.macro .content tag {min-width: 10vw;}
	
	modal>article block.small figure{height: 15vw;}
	modal>article block.small figure img, modal>article block.small figure empty{width: 15vw; height: 15vw; top: 6vw; left:  calc(50% - 7.5vw);line-height: 15vw;}
	modal>article block.small{width: 75vw;}
	modal>article block.small .content{margin-top: 20vw;min-height: 20vw;}
	modal>article block.small h2{font-size: 4.5vw;}
	modal>article block.small .button {font-size: 4.2vw;}
}