/*********************************************************************************************************************/
/* SPECIFIC MICROSFOT EDGE */
/*********************************************************************************************************************/
html.ms-edge body {font-size:1vw;}

/*********************************************************************************************************************/
/* WEBFONTS */
/*********************************************************************************************************************/
@font-face {font-family:"Roboto-Bold"; src:url("../fonts/Roboto-Bold.ttf") format("truetype");}
@font-face {font-family:"Roboto-Regular"; src:url("../fonts/Roboto-Regular.ttf") format("truetype");}
@font-face {font-family:"Roboto-Thin"; src:url("../fonts/Roboto-Thin.ttf") format("truetype");}
 
/*********************************************************************************************************************/
/* GLOBAL */
/*********************************************************************************************************************/
* {margin:0; padding:0;}
li {list-style-type:none;}
body {font-family:"Roboto-Regular", sans-serif; font-size:1vw; color:#5C6270; background-color:#D9D9D9;}
section {margin:auto; width:100vw; background-color:#F2F2F2;}
section>article {overflow:hidden; margin:auto; width:85vw;}
h1, h2, h3, h4, h5, h6 {font-family:"Roboto-Regular", sans-serif; font-size:0.8vw; font-weight:normal;}
h3 {clear:both; margin:0 0 1vw 2vw; font-size:2.5vw; color:#D9D9D9;}
h3 a {color:#D9D9D9;}
bold {font-family:"Roboto-Bold", sans-serif;}
boldRed {font-family:"Roboto-Bold", sans-serif; color:#FF0000;}
boldGold {font-family:"Roboto-Bold", sans-serif; color:#FFD21E;}
boldBlue {font-family:"Roboto-Bold", sans-serif; color:#62A0DB;}
boldGreen {font-family:"Roboto-Bold", sans-serif; color:#4C9700;}
boldPink {font-family:"Roboto-Bold", sans-serif; color:#C70C78;}
boldOrange {font-family:"Roboto-Bold", sans-serif; color:#EF8000;}
thin {font-family:"Roboto-Thin", sans-serif;}
a {text-decoration:none; color:#5C6270;}
hr {margin:auto; height:0.1vw; background-color:#D9D9D9; border:none;}
::selection {background-color:#5C6270; color:#F2F2F2;}
.modal {cursor:pointer;}

@media screen and (max-width:1024px) {
	body {font-size:1.5vw;}
	br{display: none;}
}

@media screen and (max-width:780px) {
	body {font-size:3vw;}
}

/*********************************************************************************************************************/
/* COPY */
/*********************************************************************************************************************/
copy {z-index:3; position:fixed; bottom:8vw; right:-15vw; display:block; padding:0.5vw; font-size:0.8vw; color:#FFFFFF; background-color:#009F00; border-radius:0.3vw;}
.copy {cursor:pointer;}

@media screen and (max-width:1024px) {
	copy{font-size: 2vw; border-radius: 1.2vw;bottom: 10vw;right: -50vw;padding: 1.5vw;}
}

@media screen and (max-width:780px) {
	copy {right:-50vw; font-size:3vw; padding: 2.5vw;}
}
/*********************************************************************************************************************/
/* OPEN */
/*********************************************************************************************************************/
.open {cursor:pointer;}
open {display:none; margin-bottom:1vw; padding:1vw; font-size:0.8vw; text-align:justify; border-radius:0 0 0.5vw 0.5vw;}
open.without {padding:0; margin-bottom:0; background-color:inherit !important;}
open.on {clear:both; display:block; background-color:#FFFFFF;}

/*********************************************************************************************************************/
/* INFO */
/*********************************************************************************************************************/
info {display:block; float:right; margin:0.5vw 0; padding:1vw; font-size:0.8vw; background-color:#D9D9D9; border-radius:0.3vw;}
info.red {background-color:#FF0000; color:#FFFFFF;}

@media screen and (max-width:1024px){
	info{font-size: 1.5vw;float: none;}
}

@media screen and (max-width:780px){
	info{font-size: 3vw;}
}

/*********************************************************************************************************************/
/* COMMENTS */
/*********************************************************************************************************************/
comments {margin-left:4vw; display:block;}
comments ul li {position:relative; overflow:hidden; margin-bottom:1vw;}
comments ul li visual {display:block; float:left; width:5vw; height:5vw;}
comments ul li visual img {width:100%; border-radius:20vw;}
comments ul li text {display:block; float:left; margin:0 0 1.5vw 1vw; padding:1vw; width:38vw; min-height:3vw; background-color:#EBEBEB; border-radius:0.3vw;}
comments ul li time {position:absolute; bottom:0; left:7vw; font-size:0.8vw;}
comments textarea {margin-left:1vw; padding:0.7vw 1vw; width:37.8vw; min-height:5vw; font-family:"Roboto-Regular", sans-serif; font-size:0.8vw; color:#5C6270; background-color:#FFFFFF; border-radius:0.3vw; border:solid 0.05vw #5C6270;}

/*********************************************************************************************************************/
/* GALLERY */
/*********************************************************************************************************************/
gallery {overflow:hidden; display:block;}
gallery files {display:block;}
gallery files a {position:relative; overflow:hidden; display:block; float:left; margin:0 0.5vw 0.5vw 0; width:4vw; height:4vw; background-color:#D9D9D9; border-radius:0.3vw;}
gallery files img {width:100%;}
gallery files span {position:absolute; top:0.5vw; left:calc(100% - 3.3vw); padding:0.3vw; width:2vw; background-color:#62A0DB; font-size:0.6vw; color:#FFFFFF; text-align:center; text-transform:uppercase; border-radius:0.3vw;}
gallery files delete {position:absolute; bottom:0; left:calc(100% - 2.7vw); width:1.5vw; height:1.5vw; line-height:1.5vw; font-size:0.6vw; color:#FFFFFF; text-align:center; background-color:#FF0000; border-radius:0.3vw 0.3vw 0 0;}

/*********************************************************************************************************************/
/* BUTTON */
/*********************************************************************************************************************/
.button {display:table; margin:auto; min-width:10vw; color:#FFFFFF; font-family:"Roboto-Bold", sans-serif; font-size:0.8vw; text-transform:uppercase; border:solid 0.2vw #FFFFFF; border-radius:10vw; cursor:pointer; transition:ease-in-out 0.2s;}
.button.single {padding:1vw; text-align:center;}
.button.add {margin-left:1vw;}
.button.fixed {width:23vw;}
.button.fixed span {width:1vw;}
.button.fixed lock {width:1vw;}
.button span {display:table-cell; padding:1vw; padding-left:1.5vw; text-align:center; background-color:#A0A0A0; vertical-align:middle; border-radius:10vw 0 0 10vw; border-right:solid 0.1vw rgba(0,0,0,0.3);}
.button aside {display:table-cell; padding:1vw; padding-right:1.5vw;}
.button lock {display:table-cell; padding:1vw; padding-right:1.5vw; text-align:center; background-image:linear-gradient(65deg, #FFD21E, #E7B201); border-radius:0 10vw 10vw 0; border-left:solid 0.2vw #E7B201;}
.button.blue {background-color:#62A0DB;}
.button.blue span {background-color:#3C74A8;}
.button.blue:hover {background-image:linear-gradient(65deg, #0C68BE, #62A0DB);}
.button.pink {background-color:#C70C78;}
.button.pink span {background-color:#A2005E;}
.button.pink:hover {background-image:linear-gradient(65deg, #83004C, #C70C78);}
.button.orange {background-color:#EF8000;}
.button.orange:hover {background-color:#F39933;}
.button.orange span {background-color:#C6700E;}
.button.gold {background-color:#C6B218;}
.button.gold:hover {background-color:#ECD100;}
.button.gold span {background-color:#AF9C09;}
.button.purple {background-color:#6f0035;}
.button.purple:hover {background-color:#a1004e;}
.button.purple span {background-color:#510027;}
.button.green {background-color:#4C9700;}
.button.green:hover {background-image:linear-gradient(65deg, #4C9700, #5EB803);}
.button.green span {background-color:#387200;}
.button.red {background-color:#D50E0E;}
.button.red:hover {background-color:#FF0000;}
.button.red span {background-color:#AA0404;}
.button.grey {background-color:#5C6270;}
.button.grey:hover {background-image:linear-gradient(65deg, #373A40, #5C6270);}
.button.grey span {background-color:#6b717d;}
.button lower {text-transform:initial; font-family:"Roboto-Regular", sans-serif;}

.double {text-align:center;}
.double .button {display:inline-block; margin-right:0.5vw;}
.double .button:last-of-type {margin-right:0;}

@media screen and (max-width:1024px){
	.button.add {margin-left: auto;font-size: 1.6vw;}
}

@media screen and (max-width:780px){
	.button.add {font-size: 4.6vw;}
}

/*********************************************************************************************************************/
/* START */
/*********************************************************************************************************************/
start.button {margin:inherit; width:53.7vw; border-radius:0.5vw;}
start.button span {border-radius:0.5vw 0 0 0.5vw;}
start.button i {font-size:2vw;}

/*********************************************************************************************************************/
/* COLUMNS */
/*********************************************************************************************************************/
columnLeft {display:block; float:left; padding-left:1vw; width:25vw;}
columnRight {display:block; float:left; padding-right:1vw; width:58vw;}

@media screen and (max-width:1024px)
{
	section>article {width: 95vw;}
	columnLeft {width: 30vw; display: flex; flex-direction: column;align-items: center;gap: 1vw;}
	columnRight {width: 60vw; display: flex; flex-wrap: wrap; justify-content: center; gap:2vw;float: right;}
	h3{margin: 1vw auto;text-align: center;font-size: 4vw;width: 100%;}
	h4{font-size: 1.8vw;}
	/*columnRight h3{width: 60vw; text-align: center;}*/
	.button{min-width: 14vw; font-size: 1.2vw;}
	
	#downloads {display:flex; flex-wrap: wrap;gap :2vw; justify-content: center;}
	#downloads slide{display:none;}

}
@media screen and (max-width:1024px) and (orientation:landscape){
	columnLeft{width: 20vw;}
	columnRight{width: 70vw; gap:2vw 0.5vw;}
	/*columnRight h3{width: 70vw;}*/
	h3{font-size: 3vw;}
	#descamps, #caseo{width: 20vw;}
}

@media screen and (max-width:780px){
	section>article{display:flex; flex-direction: column;align-items: center;}
	columnLeft{order:2; width: 95vw;padding-left: 0vw;margin-top: 4vw;}
	columnRight{width: 95vw;padding-right: 0vw;gap:4vw;}
	h3, columnRight h3{/*width: 95vw;*/font-size: 7vw;}
	h4{width: 95vw; font-size: 3.8vw;text-align:center;margin: 1vw auto;}
	.button{min-width: 25vw; font-size: 3.2vw;}
}

/*********************************************************************************************************************/
/* DASHBOARD */
/*********************************************************************************************************************/
dashboard {display:block; margin-bottom:1vw; width:19vw; text-align:center; font-size:3vw; cursor:pointer; background:linear-gradient(55deg, #0C68BE 10%, #62A0DB 80%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
dashboard i {display:block !important; margin:auto; font-size:4vw;}
dashboard:after {content:""; display:block; margin:1vw auto 0 auto; width:14vw; height:0.05vw; background-color:#D9D9D9;}

@media screen and (max-width:1024px){
	dashboard{margin-top: 2vw;}
}

@media screen and (max-width:780px){
	dashboard{order:20;margin-bottom: 1vw;margin-top: 3vw; width: 40vw; font-size: 6vw;}
}
/*********************************************************************************************************************/
/* TAG */
/*********************************************************************************************************************/
tag {overflow:hidden; display:block; padding:0.3vw; margin:auto; max-width:7vw; border-radius:0.2vw; font-size:0.6vw; color:#FFFFFF; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis;}
tag.full {max-width:inherit;}
tag.small {max-width:3.5vw; text-align:center;}
tag.lower {text-transform:inherit;}
tag.orange {background-color:#EF8000;}
tag.red {background-color:#D50E0E;}
tag.green {background-color:#509D02;}
tag.grey {background-color:#B4C3DD;}
tag.blue {background-color:#62A0DB;}
tag.white {background-color:#FFFFFF; color:#5C6270;}
tag.purple {background-color:#A90CB4;}
tag.black {background-color:#434343;}
tag.light {background-color:#D9D9D9; color:#5C6270;}
tag.yellow {background-color:#ECD100;}

/*********************************************************************************************************************/
/* SLIDE */
/*********************************************************************************************************************/
slide {clear:both; display:block; margin:auto; font-size:0.5vw; text-align:center;}
slide.center {margin:inherit; margin-left:-5vw;}
slide paginate {padding:0 0.1vw; cursor:pointer;}
slide paginate.on {color:#62A0DB;}

/*********************************************************************************************************************/
/* NOTIFICATIONS */
/*********************************************************************************************************************/
notifications {z-index:2; position:absolute; top:7vw; right:7vw;}
notifications.small {top:1vw;}
notifications.small.right {right:1vw;}
notifications.small.left {left:1vw; right:inherit;}
notifications a {color:#FFFFFF;}
notifications i {min-width:0.8vw; text-align:center;}
notifications li {display:block; float:left; margin-left:0.5vw; padding:0.5vw 0.7vw; color:#FFFFFF; border:solid 0.2vw #FFFFFF; border-radius:10vw; box-shadow:0 0 0.3vw rgba(0,0,0,0.5); cursor:pointer;}
notifications li.red {background-image:linear-gradient(90deg, #830000, #D50E0E);}
notifications li.blue {background-image:linear-gradient(90deg, #0C68BE, #62A0DB);}
notifications li.green {background-image:linear-gradient(90deg, #4C9700, #5EB803);}
notifications li.gold {background-image:linear-gradient(90deg, #ECD100, #C6B218);}
notifications aside {display:none; padding-right:0.5vw;}
notifications li:hover aside {display:inline;}

@media screen and (max-width:780px){
	notifications.small.right , notifications.small.left{font-size:3vw;}
}

/*********************************************************************************************************************/
/* ONLINE */
/*********************************************************************************************************************/
online {position:absolute; right:1vw; bottom:-1.1vw; padding:0.5vw 1vw; font-size:0.6vw; text-transform:uppercase; color:#FFFFFF; border-radius:20vw; border:solid 0.25vw #FFFFFF; cursor:pointer;}
online.small {bottom:-0.8vw; padding:0.5vw;}
online.small bold {display:none;}
online bold:before {content:""; display:block; float:left; margin:0.05vw 0.2vw 0 0; width:0.5vw; height:0.5vw; background-color:#FFFFFF; border-radius:20vw;}
online.green {background-image:linear-gradient(75deg, #418300, #72D50E);}
online.red {background-image:linear-gradient(75deg, #830000, #D50E0E);}
online.blue {background-image:linear-gradient(75deg, #0C68BE, #62A0DB);}
online.orange {background-image:linear-gradient(75deg, #EF8000, #FFAC4C);}
online.gold {background-image:linear-gradient(75deg, #D2A100, #FFD447);}
online.pink {background-image:linear-gradient(75deg, #83004C, #C70C78);}
online.grey {background-image:linear-gradient(75deg, #959DAC, #B4C3DD);}
	
@media screen and (max-width:1024px){
	online{border: solid 0.45vw #FFFFFF;font-size: 2vw;bottom: -2.1vw;}
	online bold:before{width: 1vw; height: 1vw; margin-top: 0.6vw;}
}