/*===================
COLORS I FONTS

GROC: #890202
GRANAT: #890202
GIRS FORT: #2b2b2b
NEGRE: #1d1d1b
BLANC: #ffffff
GRIS LÍNIES: #cccccc rgba(0,0,0,0.15)

FONTS:
Ubuntu
===================*/



/*===================
TAULA DE CONTINGUTS

01. Característiques generals
02. Formulari de contacte
03. Afegir comentaris 
04. Quadret al clicar amb el botó de la dreta
05. Alerta bad trader 
06. Columnes
07. Fons imatges
08. Menú
===================*/



/*===================
01. Característiques generals
===================*/

html, body {
	line-height: 15px;
}

@font-face {
    font-family: 'ubunturegular';
    src: url('ubuntu-r-webfont.eot');
    src: url('ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-r-webfont.woff') format('woff'),
         url('ubuntu-r-webfont.ttf') format('truetype'),
         url('ubuntu-r-webfont.svg#ubunturegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Groc */

.text1 {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}

/* Gris fort */

.text2 {
	color: #2b2b2b; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}

/* Vermell */

.text3 {
	color: #cc0000; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}

/* Gris fort petit */

.text4 {
	color: #2b2b2b; font-family: ubunturegular, Georgia, Verdana; font-size: 11px; text-decoration: none
}

/* Blanc petit */

.text5 {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 11px; text-decoration: none
}

/* Blanc normal */

.text6 {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
/* Gris fort a blau */

.link1 {
	color: #2b2b2b; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link1:link {
	color: #2b2b2b; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link1:visited {
	color: #2b2b2b; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link1:hover {
	color: #890202; text-decoration: none
}

/* Blau a gris fort subratllat */

.link2 {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link2:link {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link2:visited {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link2:hover {
	color: #2b2b2b; text-decoration: underline
}

/* Blanc a blanc subratllat */

.link3 {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link3:link {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link3:visited {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.link3:hover {
	color: #ffffff; text-decoration: underline
}

/* Blanc gran a blanc subratllat gran */

.link4 {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 25px; text-decoration: none
}
.link4:link {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 25px; text-decoration: none
}
.link4:visited {
	color: #ffffff; font-family: ubunturegular, Georgia, Verdana; font-size: 25px; text-decoration: none
}
.link4:hover {
	color: #ffffff; text-decoration: underline
}

/* Blau a gris subratllat */

.lightbox {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.lightbox:link {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.lightbox:visited {
	color: #890202; font-family: ubunturegular, Georgia, Verdana; font-size: 13px; text-decoration: none
}
.lightbox:hover {
	color: #2b2b2b; text-decoration: none
}



/*===================
02. Formulari de contacte
===================*/

#contactForm {
	margin-top: 10px;
	width: 100%;
}

.casellatext {
	width: 100%;
	background-color: #inherit;
	border: #2b2b2b 1px solid;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

.casellacaptcha {
	width: 50px;
	height: 25px;
	border: #2b2b2b 1px solid;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

#contactForm textarea {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	border: #890202 1px solid;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

#contactForm textarea:focus, #contactForm input:focus {
	border: 1px solid #890202;
}

#contactForm titol {
	float: left;
	text-align: left;
	width: 100%;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
}

#contactForm titol2 {
	width: 100%;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
}

#contactForm seguretat {
	text-align: center;
	width: 100%;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	text-decoration: none;
}

#contactForm codi {
	position: relative;
	top: 8px;
}

#contactForm input.submit {
	cursor: pointer;
	text-align: center;
	width: 110px;
	height: 25px;
	background-color: #ffffff;
	border: #890202 1px solid;
	font-family: ubunturegular, Georgia, Verdana;
	color: #2b2b2b;
	font-size: 13px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}

#contactForm input.submit:hover {
	cursor: pointer;
	text-align: center;
	width: 110px;
	height: 25px;
	background-color: #890202;
	border: #2b2b2b 1px solid;
	font-family: ubunturegular, Georgia, Verdana;
	color: #ffffff;
	font-size: 13px;
	-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	transition:background 0.3s ease;
}

#contactForm .error {
	color: #890202;
	font-family: ubunturegular, Georgia, Verdana;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
}

.blau {
	color: #890202;
	font-family: ubunturegular, Georgia, Verdana;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
}



/*===================
03. Afegir comentaris 
===================*/

.formulari {
	BACKGROUND-COLOR: #f4f4f4; BORDER: #890202 1px solid; COLOR: #890202; FONT-FAMILY: ubunturegular, Georgia, Verdana; FONT-SIZE: 13px; TEXT-DECORATION: none; padding: 5px; 	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}



/*===================
04. Quadret al clicar amb el botó de la dreta 
===================*/

#contextMenu{	/* The menu container */
border:1px solid #2b2b2b;	
background-color:#ffffff;
padding:10px;
width:140px;
filter: alpha(opacity=90); 
line-height: 2px; 
/* Never change these two values */
display:none;
position:absolute;
}



/*===================
05. Alerta bad trader 
===================*/

#alerta {
    position: relative;
}

#alerta:target {
    display: none;
}
.alerta {
    background-color: #c4453c;
    background-image: -webkit-linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.05) 25%,
                      hsla(0,0%,0%,.05) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.05) 75%,
                      hsla(0,0%,0%,.05));
    background-image: -moz-linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-image: -ms-linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-image: -o-linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-image: linear-gradient(135deg, transparent,
                      transparent 25%, hsla(0,0%,0%,.1) 25%,
                      hsla(0,0%,0%,.1) 50%, transparent 50%,
                      transparent 75%, hsla(0,0%,0%,.1) 75%,
                      hsla(0,0%,0%,.1));
    background-size: 20px 20px;
    box-shadow: 0 5px 0 hsla(0,0%,0%,.1);
    color: #f6f6f6;
    display: block;
    font-family: ubunturegular, Georgia, Verdana;
    font-size: 13px;
    height: 50px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    margin-top: 500px;
    padding-top: 5px;	
    top: -150px;
    width: 100%;
    -webkit-animation: alerta 1s ease forwards;
       -moz-animation: alerta 1s ease forwards;
        -ms-animation: alerta 1s ease forwards;
         -o-animation: alerta 1s ease forwards;
            animation: alerta 1s ease forwards;
}

/* Animation */

@-webkit-keyframes alerta {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}
@-moz-keyframes alerta {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}
@-ms-keyframes alerta {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}
@-o-keyframes alerta {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}
@keyframes alerta {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { top: 0; }
}



/*===================
06. Columnes
===================*/

/* Columna de l'esquerra */

	div#columnaesquerra {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	background: #890202;
	width: 300px;
	overflow: hidden;
	}

	#logotip {
	height: 135px;
	width: 300px;
	background-image: url('imatges/logo_dreamtheater_2021.png');
	top: 0px;
	left: 0px;
	}

/* Gradient de la dreta */

	div#rightGradient {
	position: fixed;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 100px;
	background-image: url('imatges/gradient.png');
	} 

/* Columnes amb el contingut */

	div.column {
	position: fixed;
	background-color: #ffffff;
	width: 300px;
	overflow: hidden;
	padding: 30px;
	padding-top: 0px;
	}

/* Enquesta */

	#enquesta {
	margin-top: 30px;
	}

/* PayPal */

	#paypal {
	margin-top: 30px;
	margin-left: 33px;
	}

/* Copyright */

	#copyright {
	margin-bottom: 15px;
	}



/*===================
07. Fons imatges
===================*/

/* Fons de les fotos */

	div.foto {
	width: 300px;
	height: 230px;
	-moz-background-size: 300 230;
	-webkit-background-size: 300 230;
	background-size: 300 230;
	border: 4px solid #ffffff;
	margin-top: 11px;
	margin-bottom: 21px;
	-moz-box-shadow: 0 0 0.75em #555555;
	-webkit-box-shadow: 0 0 0.75em #555555;
	box-shadow: 0 0 0.75em #555555;
	}

/* Fons dels cd */

	div.album {
	width: 232px;
	height: 150px;
	-moz-background-size: 232 150;
	-webkit-background-size: 232 150;
	background-size: 232 150;
	}
	div.album img {
	margin-left: 16px;
	margin-top: 1px;
	top: 0px;
	left: 0px;
	}

/* Fons dels dvd */

	div.dvd {
	width: 200px;
	height: 200px;
	-moz-background-size: 200 200;
	-webkit-background-size: 200 200;
	background-size: 200 200;
	}
	div.dvd img {
	margin-left: 1px;
	margin-top: 2px;
	top: 0px;
	left: 0px;
	}



/*===================
08. Menú
===================*/

.menu {
	margin: 0 auto;
	width: 300px;
}

.menu__list__1 {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding-top: 140px;
	margin-left: 37px;
}
.menu__list__2 {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding-top: 10px;
	margin-left: 53px;
}

.menu__item {
	display: block;
}

.menu__link {
	font-family: ubunturegular, Georgia, Verdana;
	font-size: 13px;
	text-decoration: none;
	display: block;
	padding: 5px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: #ffffff;
}

.menu__link:hover,
.menu__link:focus {
	outline: none;
}

/* Viola */

.menu--viola .menu__item {
	position: relative;
	margin: 0 5px;
}

.menu--viola .menu__link {
	display: block;
	text-align: center;
	color: #ffffff;
	-webkit-transition: color 0.7s;
	transition: color 0.7s;
}

.menu--viola .menu__link:hover,
.menu--viola .menu__link:focus {
	color: #ffffff;
}

.menu--viola .menu__item--current .menu__link {
	color: #ffffff;
}

.menu--viola .menu__item::before,
.menu--viola .menu__item::after,
.menu--viola .menu__link::before,
.menu--viola .menu__link::after {
	content: '';
	position: absolute;
	background: #ffffff;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.menu--viola .menu__item::before,
.menu--viola .menu__item::after {
	top: 0;
	width: 1px;
	height: 100%;
	-webkit-transform: scale3d(1, 0, 1);
	transform: scale3d(1, 0, 1);
}

.menu--viola .menu__item::before {
	left: 0;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.menu--viola .menu__item::after {
	right: 0;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.menu--viola .menu__link::before,
.menu--viola .menu__link::after {
	left: 0;
	width: 100%;
	height: 1px;
	-webkit-transform: scale3d(0, 1, 1);
	transform: scale3d(0, 1, 1);
}

.menu--viola .menu__link::before {
	top: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.menu--viola .menu__link::after {
	bottom: 0;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.menu--viola .menu__item--current::before,
.menu--viola .menu__item--current::after,
.menu--viola .menu__item--current .menu__link::before,
.menu--viola .menu__item--current .menu__link::after {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;
}

/* Media queries */

/* Stack items for smaller screens */
@media screen and (max-width:55em) {
	.menu__list {
		display: block;
		margin: 0 auto;
	}
}