/* 
    MADE BY ARTISTS VALLEY  
    COPYRIGHT 2022
    AUTOR: Germán Quiroz Bogner
*/

@font-face {
    font-family			: 	"Retrofest";
    src: url("../assets/fonts/Retrofest.otf");
}

@font-face {
    font-family			: 	"Montserrat";
    src: url("../assets/fonts/montserrat.ttf");
}

@font-face {
    font-family			: 	"Montserrat-L";
    src: url("../assets/fonts/montserrat-light.ttf");
}

@font-face {
    font-family			: 	"MessinaSans";
    src: url("../assets/fonts/MessinaSansWeb-Regular.woff2");
}

@font-face {
    font-family			: 	"Poppins-B";
    src: url("../assets/fonts/Poppins-Black.otf");
}

@font-face {
    font-family			: 	"Poppins-T";
    src: url("../assets/fonts/Poppins-Thin.otf");
}


@font-face {
    font-family			: 	"Poppins";
    src: url("../assets/fonts/Poppins-Regular.otf");
}


* {
    margin				: 	0;
    padding				: 	0;
    box-sizing			: 	border-box;
}

.no-seleccionable {
    -webkit-user-select	: 	none;
	-moz-user-select	: 	none;
    -ms-user-select		: 	none;
    user-select			: 	none; 
}

html {
	line-height			:	1.15;
	-webkit-text-size-adjust:	100%;
	-webkit-user-select	: 	none;
    -moz-user-select	: 	none;
    -ms-user-select		: 	none;
    user-select			: 	none; 
}

html, body {
	margin				:	0;
	padding 			:	0;
	overflow-x			:	hidden;
	font-family			:	'Montserrat', Verdana, Tahoma, sans-serif;
}

body {
	font-family			: 	'MessinaSans', sans-serif;
	overflow			: 	hidden;
}

label, select, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
	cursor				: 	pointer;
}

button, input, optgroup, select, textarea {
  margin				:	0;
}

pre {
	font-family			:	'Montserrat', monospace, monospace;
	font-size			:	1em;
}

textarea {
	overflow			:	auto;
}

b, strong {
	font-weight			:	bolder;
}

img {
	border-style		:	none;
}

h1, h2, h3, h4, h5, h6 {
    color				:	#1d273b;
    font-weight			:	300;
	margin				:	0;
	padding				:	0;
}

/* Limpio los Links, listas y Botones */
a {
	background-color	:	transparent;
	text-decoration		:	none;
	cursor				:	pointer;
}  

button {
	border				:	none;
	background			:	transparent;
	transform			:	0.2s linear;
	cursor				:	pointer;
	font-family			: 	"Montserrat";
}

ul {
	margin				: 	0;
    padding				: 	0;
}

li {
  list-style			:	none;
}

/* Clases utiles siempre */
.box-shadow {
	box-shadow			:	0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.flex {
  display				:	flex;
}

.ens {
	color: #8192ff;
    font-size: 16px;
    height: auto;
	font-weight: bolder;
    cursor: pointer;
}

/* Muestra en web, Oculta en telefono */
.only_web {
    display: flex!important;
}

.only-phone {
    display: none!important;
}

.contentLoader {
    background: url(../assets/images/graphs/loading.gif);
    background-size: contain;
    height: auto;
    min-height: 350px;
    display: flex;
}

.input-hidden {
	display: none;
}

.input-show {
	display: inline-block;
}

.selected-network {
    padding: 7px 10px 7px 5px;
    border-radius: 4px;
    border: #000 2px solid;
}

/* scrollbar */
::-webkit-scrollbar {
	width				:	8px;		/* Tamaño del scroll en vertical */
	height				:	8px;    	/* Tamaño del scroll en horizontal */
	/*display			:	none;		Ocultar scroll */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
::-webkit-scrollbar-thumb {
	background			:	#ccc;
	border-radius		:	4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
::-webkit-scrollbar-thumb:hover {
	background: #b3b3b3;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
::-webkit-scrollbar-thumb:active {
	background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
::-webkit-scrollbar-track {
	background: #e1e1e152;
	border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
	background: #d4d4d4;
}

.location_option {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.location_option label {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
	width: 300px;
}

.location_option label input[type="radio"] {
	margin: 10px;
    padding: 0px;
    width: 20px;
    height: 20px;
    border: none;
}

.location_option label i {
	font-size: 20px;
    margin: 0 7px 0 0;
}

/* Printing */
@media print {

  * {
	text-shadow: none !important;
	color: #000 !important;
	background: transparent !important;
	box-shadow: none !important;
  }

  a, a:visited {
	text-decoration: none;
  }

  img {
	max-width: 100% !important;
  }

  @page {
	margin: 0.5cm;
  }

  p, h2, h3 {
	orphans: 3;
	widows: 3;
  }

  h2, h3 {
	page-break-after: avoid;
  }

}

/* Player */
.player_content {
	position: relative;
    margin: -20px 20px;
    display: flex;
    width: calc(100% - 40px);
    justify-content: flex-end;
    overflow-x: hidden;
	top: 220px;
    background: #00000094;
    height: 40px;
    border-radius: 50px;
    color: #fff;
}

.player_content_create {
	position: relative;
    margin: -20px 20px;
    display: flex;
    width: calc(100% - 40px);
    justify-content: flex-end;
    overflow-x: hidden;
    top: 380px;
    background: #000;
    height: 40px;
    border-radius: 50px;
    color: #fff;
}

.player_content_view {
	position: absolute;
    display: flex;
    justify-content: flex-end;
    overflow-x: hidden;
    background: #000;
    height: 40px;
    border-radius: 50px;
    color: #fff;
    bottom: 30px;
    margin: 0 calc(15%);
    width: 40%;
}

.nft-page .player_content {
    margin: 10px;
    display: flex;
    position: relative;
}

.button-tag {
	width: 100%;
    margin: 5px 0 0;
    border-radius: 4px;
}

/* Modal blur */

.loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 100;
	backdrop-filter: blur(3px) grayscale(10%);
}

.hidden {
	display: none;
}


/* HEADER */
header {
	width: 100%;
	height: auto;
	border-bottom: 1px solid transparent;
	position: fixed;
	top: 0;
	z-index: 1001;
}

.header-top {
	display: flex;
	justify-content: space-between;
	height: 70px;
	width: 100%;
	align-items: center;
	padding: 0 40px;
}

.header-top .logo {
	height: 50px;
    cursor: pointer;
   	background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.bottom-menu {
	position: fixed;
    bottom: 0;
    height: 50px;
    z-index: 2000;
    width: 100vw;
	display: flex;
    align-items: center;
	justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
}

.bottom-menu a {
	font-size: 16px;
}

.bottom-menu i {
	font-size: 16px;
}

.bottom-menu a:visited {
	font-size: 16px;
}

.header-top a {
	text-decoration: none;
	margin-left: 20px;
	font-size: 14px;
	cursor: pointer;
}

.header-top a:hover {
	border-bottom: none;
}

.textos-header {
	margin: 0 ;
}

.contenido-header p {
	font-weight: 100;
	margin-top: 14px;
    padding: 20px 0 40px;
	max-width: 60%;
}

.contenido-header a:hover {
	opacity: 0.8;
}

header button {
	margin: 18px 0 18px 20px;
}

/* BUTTON */

button {
	margin: 3px;
	display: inline-block;
	text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgb(17 29 48 / 16%);
    cursor: pointer;
    transition: 0.2s linear;
    min-width: 130px;
    font-family: "Poppins";
}

.back-button {
	border-radius: 22px;
	margin: 40px 20px;
}

.back-button a:hover {
	border-bottom: 2px solid transparent;
}

.titulo {
	font-size: 50px;
}

.arrow {
	height: 80px;
	padding: 10px;
	margin: 10px;
}

.textos-header h4{
	font-size: 40px;
}


/* LOGO */

.header-top .logo img {
	height: 100%;
	vertical-align: top;
	cursor: pointer;
}

/* Gradient Line */

.gradient-line {
	width: 100vw;
	height: 3px;
	background: #000000;
	background: -webkit-linear-gradient(to right, #17a6d0, #e4aaff, #ff84ad, #f1bf65, #ffe45f, #4de99b, #67d0f1);
	background: linear-gradient(to right, #17a6d0, #e4aaff, #ff84ad, #f1bf65, #ffe45f, #4de99b, #67d0f1);
}

/* enlaces */

.enlases_header {
	display: flex;
	align-items: center;
	transition: ease-in-out 0.5s;
}

.enlases_header img {
	width: 20px;
	height: 20px;
}

.toggle {
	background: none;
	min-width: 40px;
	height: 40px;
    width: 40px;
	box-shadow: none;
	margin: 18px 5px;
    font-size: 20px;
	padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.languaje {
	position: fixed;
    width: auto;
    text-align: center;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    top: 70px;
    right: 120px;
}

header p {
	font-size: 24px;
}

 /* ELEGIR LENGUAJE */ 

.languaje li {
	cursor: pointer;
	margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.languaje li img {
    margin: 0 5px 0 0;
}

.languaje .disabled {
	color: rgb(101, 101, 101);
	cursor: not-allowed;
    filter: grayscale(100%);
}

.languaje .disabled:hover {
    background: transparent;
	cursor: not-allowed;
}


/* Usuario en Header */

.header-user {
	/*cambiar display por display:flex */
	display: none;
	margin: 0 10px;
	cursor: pointer;
}

.btn {
	/* cambiar display por none */
	display: block;
}

.header-user img {
	height: 40px;
	width: 40px;
	margin: 0 10px;
	border-radius: 5px;
	border: 1px solid rgba(153, 153, 153, 0.26);
	object-fit: cover;
}

.header-user p {
	font-size: 10px;
	color: rgba(153, 153, 153, 0.80);
	margin: -1px 0;
}

.header-user h5 {
	margin: 0;
	padding: 0;
}

.contenedor {
	width: 100%;
	margin: auto;
}

/* Logo blockchain */
.chain_logo {
	width: 10px!important;
	height: 10px!important;
	margin: -1px 0!important;
	padding: 0!important;
	border: none!important;
	border-radius: 0!important;
}

.chain_logo_big {
    width: 12px!important;
    height: 12px!important;
    margin: -2px 0!important;
    padding: 0!important;
    border: none!important;
    border-radius: 0!important;
}

footer {
	background: transparent;
    padding: 60px 0;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin: auto;
    width: 100%;
    align-content: center;
    align-items: flex-start;
    font-family: "Poppins";
}

.create-flex {
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: nowrap;
	margin: 80px 0;
}

.create_flex_col {
    display: flex;
    flex-direction: column;
    max-width: 450px;
    align-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
}

.create_flex_row {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    align-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-evenly;
}

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

	.create-flex {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-start;
		flex-wrap: nowrap;
		margin: 60px 0;
	}
	
	.nft-inner-create h3 {
		font-size: 22px;
	}

}



/* COLECCIONES */

.preview-collection {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 200px;
    overflow-y: auto;
}

.preview-collection img {
    border-style: none;
    width: 100px;
    margin: 2px;
    cursor: pointer;
}

.content-collection-card {
    background: #efefef;
    border-radius: 6px;
    width: 250px;
    height: 455px;
    box-shadow: 1px 1px 1px #eee;
    margin: 20px 5px 0 10px;
}

.content-collection-card .articulo {
    margin: -10px -5px!important;
}


.collection-container-author {
    min-width: 0;
    display: flex!important;
    flex-direction: row!important;
    width: 100%;
    height: 60px;
}

.collection-container-author .back-user {
    width: 46px!important;
    height: 46px!important;
    border-radius: 30px;
    padding: 2px!important;
    margin: 10px 20px 10px 0!important;
}

.collection-container-author .column {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    align-content: flex-start;
    margin: 15px 0;
    padding: 0 0 10px;
}

#input_title {

    display: none;

}

#input_perfil {

    display: none;

}

#input_colection {

    display: none;

}

#input_portada {

    display: none;

}


.preview_perfil_coleccion {

    width: 130px;
    height: 130px;
    margin: -90px 0 50px;
    border-radius: 3px;
    object-fit: cover;

}

.preview_portada_coleccion {

    width: 600px;
    height: calc(600px / 3);
    margin: 10px 0 20px;
    border-radius: 3px;
    object-fit: cover;

}

.items_collection {

    display: flex;
    flex-direction: column;
    margin: 5px;
    flex-wrap: wrap;
    height: 82px;

}

.item_collection {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin: 0;
}

.item_collection img {

    width: 80px;
    height: 80px;
    border-radius: 3px;
    object-fit: cover;

}

.item_collection h3 {

    margin: 0!important;
    padding: 0 0 0 5px!important;
    
}

.item_collection p {

    margin: 0!important;
    padding: 0 0 0 5px!important;
    
}

.item_collection input {

    padding: 5px!important;
    height: 25px!important;
    margin: 0 0 0 5px!important;
    width: 60px!important;

}

#step-1-collection {

    display: none;
    
}

#step-2-collection {

    display: none;
    
}


#step-3-collection {

    display: none;
    
}

#step-4-collection {

    display: none;
    
}

#step-5-collection {

    display: none;
    
}

#preview_info_coleccion {

    display: none;
    
}

video {
    width: 100%;
    height: 100%;
}

#create_network {
    display: flex;
}

#create_network img {
    width: 20px!important;
    height: 20px!important;
    margin: 0 5px 0 0!important;
}

.contenedor-partners {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 60px 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-direction: row;
    align-content: center;
}

.contenedor-partners a {
    margin: 1px!important;
}

.contenedor-card-partners {
    max-width: none!important;
    padding: 3px;
    width: 350px!important;
    height: 135px!important;
    background: #fff!important;
    margin: 10px 5px 20px;
    border-radius: 10px;
    transition: 0.5s;
    box-shadow: 0 4px 10px rgb(17 29 48 / 16%);
    cursor: pointer;
    flex: 0 0 auto;
    cursor: pointer;
}

.contenedor-partners img{
    width: 100%;
    border-radius: 4px;
    padding: 5px;
}

.contenedor-card-partners p {
    margin: -6px 0 0;
}

.contenedor-card-partners .image {
    width: 100%;
    height: auto;
}

.contenedor-card-partners .image img {
    background: transparent;
    object-fit: cover;
    width: 100%;
    height: calc(100% / 2)!important;
}

/* Media Queries */
@media only screen and (max-width: 1080px) {

	.only_web {
		display: none!important;
	}
	
	.only-phone {
		display: flex!important;
	}

    .languaje {
        top: auto;
        right: 20%;
        bottom: 60px;
    }
}

@media screen and (max-width:820px) {
	
	.player_content_view {
		position: absolute;
		display: flex;
		justify-content: flex-end;
		overflow-x: hidden;
		background: #00000082;
		height: 40px;
		border-radius: 50px;
		color: #fff;
		top: 380px;
		width: 94%;
		margin: 0 2%;
	} 

    .create_flex_row {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        align-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap;
        margin: 30px;
        width: 100%;
        justify-content: space-evenly;
    }

    .preview_portada_coleccion {
        width: 90vw;
        height: calc(90vw / 3);
        margin: 30px 0 20px;
        border-radius: 3px;
        object-fit: cover;
    }

    .contenedor-partners {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        margin: 60px 0px;
        justify-content: center;
        align-items: center;
        padding: 0;
        flex-direction: column;
        align-content: center;
    }
}