/* Hexis Ecard 2021

________________________________________________________________________________
Basado en 320 and Up boilerplate extension
Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup/
License: http://creativecommons.org/licenses/MIT/

Nuevo desarrollo CSS por www.accanto.es
________________________________________________________________________________

0. GLOBAL OBJECTS
1. ROOT
2. STYLES
3. HEADER
4. CONTENT
5. MEDIAQUERIES



/* 
0. GLOBAL OBJECTS **************************************************************
________________________________________________________________________________
*/

/* RESET
============================================================================= */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

datalist {
    display: inline-block;
}

/* OTROS
============================================================================= */

/* Hide for screenreaders and visual browsers */
.hidden { display: none !important; visibility: hidden; }
.visible { visibility:visible; }

/* Hide visually */
.visuallyhidden { 
	position : absolute;
	clip : rect(0, 0, 0, 0); 
	overflow : hidden;
	margin: -1px;
	padding : 0;
	height : 1px;      
	width : 1px;
    border : 0;
}

/* Allow an element to be focusable via keyboard  */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
	position : static;
	clip : auto; 
	overflow : visible;
	height : auto; 
	margin : 0;   
    width : auto;
}

/* Hide but maintain layout */
.invisible { 
	visibility : hidden;
}

/* Clearfix */
.clearfix { }
.clearfix:before, 
.clearfix:after { 
	content : "\0020"; 
	display : block; 
	height : 0; 
    overflow : hidden;
}
.clearfix:after { 
    clear : both;
}


/* 
1. ROOT ************************************************************************
________________________________________________________________________________
*/

/* PAGE 
============================================================================= */

html {
	font-size: 100%; 
	overflow-x: hidden;
	overflow-y: scroll;
}

body { 
	margin : 0;
	padding : 0;
	width : 100%;
	color : #fdfdff;
	font-family:Tahoma, Geneva, sans-serif;
	background: #fdfdfd;
}

#application {
    position:absolute;
	margin:0 auto;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: #fdfdfd url(../img/body.png) repeat-x top center;
}


/* ADVERTENCIAS
============================================================================= */

/* Navegador obsoleto */
.upload {
	margin: 0.2em 0;
	background: #fdfdfd;
	color: #fff;
	padding: 0.2em 0;
}

/* 
2. STYLES **********************************************************************
________________________________________________________________________________
*/

/* HEADINGS
============================================================================= */

h1 {
	color:#fff;
	text-align:center;
	display:block;
	text-indent:-9999px;
	height:326px;
	width:800px;
	left:50%;
	position:relative;
	margin-left:-400px;
	background:url(../img/text.png) 50% 50% no-repeat;	
}


/* LINKS
============================================================================= */

a {
	outline : none;
	color: #d8c590;
	text-decoration : none;
	font-weight:bold;
}
 
a:visited,
a:link, 
a:hover,
a:active, 
a:focus { 
	color: #d8c590;
}

a.link { 
	display:block;
	text-align:center;
	position:relative;
	z-index:50;
}

a.link.ipad { display:none; }


/* FIGURES AND IMAGES
============================================================================= */

img { max-width:100%; }


/* 

3. HEADER AND FOOTER *********************************************************
________________________________________________________________________________
*/

header {
	width:100%;
	height:187px;
	margin:0 auto; 
	background: url(../img/hexis.png) 50% 0px  no-repeat;
}

.footer {
	width:700px;
	min-height:30px;
	padding:14px 35px 0px 39px;
	margin:0 auto;
	position:relative;
	top:0px;
	text-align:center; 
	font-size:12px; 
	font-family:Helvetica,Arial,sans-serif;
	color:#fdfdff;
	background: #2a2a32 url(../img/shadow.png) 50% 0px  no-repeat;
}

.copyright { background: #2a2a32;}

.stars {
	min-height:350px;
	width:100%;
	position:absolute; 
	z-index:0; 
	bottom:0;
	background: url(../img/stars.png) bottom center no-repeat;
	background-size: 100% auto;
}

/* 


/* 
4. CONTENT ******************************************************************
________________________________________________________________________________
*/

.box {
	padding:17px 16px 16px 16px;
	width:640px;
	height:360px;
	margin:0 auto;
	position:relative;
	background: url(../img/video.png) top center no-repeat;
	/*box-shadow: 0px 0px 25px 1px rgba(40, 40, 37, 0.5);*/
}

video {
	width:640px;
	height:360px;
}

.video-js.vjs-default-skin { background:#ffffff;  }
.video-js { background:#ffffff; }
.video-js .vjs-big-play-button { display: none; }
.video-js .vjs-fullscreen-control { display: none; } 
.video-js.vjs-default-skin .vjs-volume-control { margin-right: 20px; }

/* 
5. MEDIAQUERIES ****************************************************************
________________________________________________________________________________
*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
.video-js { display:none; }
h1 { display: none; }
.copyright { float:none; }
.btn { float:none; }
a.link { top:130px; width: 100%; height:100%; padding-left:0%; }
.box { display:none; }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
.video-js { display:none; }
h1 { display: none; }
.copyright { float:none; }
.btn { float:none; }
a.link { top:100px; width: 90%; height:90%; padding-left:5%; }
.stars { min-height:200px; bottom: -300px; }
.footer { display: none; }
.box { display:none; }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
.video-js { display:none; }
h1 { display: none; }
.footer { display: none; }
.copyright { float:none; }
.btn { float:none; }
a.link { top:90px; width: 90%; height:90%; padding-left:5%; }
.stars { min-height:200px; bottom: -20px; }
.footer { display: none; }
.box { display:none; }
}

@media only screen
and (min-width : 431px) {
.stars { min-height:240px; bottom: -65px; }
}

@media only screen
and (max-width : 670px) {
/* Styles */	
h1 { background-size:75%; }
#application { min-height: 980px; }	
}

@media only screen
and (min-height : 800px) {
/* Styles */	
.stars { min-height:240px; bottom: -140px; }
}

@media only screen
and (min-width : 414px) {
/* Styles */
.stars { min-height:240px; bottom: -50px; }
a.link { top:130px; width: 98%; height:98%; padding-left:1%; }
}

/* Desktops and laptops ----------- */

@media only screen and (min-width: 600px) {
/* Styles */
a.link { z-index: 50; top:60px; display:block;}
.box { display:none; }
.video-js { display:none; }
h1 { display:block; }
.copyright { float:left; margin-top:0px; }
.btn { float:right; }
header { height:255px; top: 0px; }
#application { background: #fdfdfd url(../img/body.png) repeat-x top center; }
.footer { display: none; }
.stars { display: none; }
}

@media only screen and (min-width: 768px) {
/* Styles */
a.link { display:none; top:120px; }
.box { display:block; visibility:hidden; }
.video-js { display:block; }
h1 { display:block; margin-top:0px; }
.copyright { float:left; margin-top:10px; }
#application { min-height:980px; background: #fdfdfd url(../img/body.png) repeat-x top center; }
.footer { display:none; }
.stars { display: none; }

.footer:after {
    content: "";
    display: block;
    height: 60px;
    background: #2a2a32;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
}

}

@media only screen and (min-width: 980px) {
/* Styles */
.box { display:block; visibility:visible; }
h1 { display:block; margin-top:0px; }
.footer:after { display: none; }
}

@media only screen and (min-width: 980px) {
/* Styles */
.footer { display:block; }
}

@media only screen
and (min-width : 1224px) {
/* Styles */
a.link { display:none; }
header { height:187px; top: 0px; }
.stars { display: none; }
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
a.link { display:none; }
.stars { display: none; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1279px) {
/* Styles */
.video-js { display:none; }
a.link.ipad { display:block; }
header { height:120px; top: 0px; }
.box { background: none; }
h1 { display:block; margin-top:-100px; }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1279px)
and (orientation : landscape) {
/* Styles */
h1 { display:block; margin-top:84px; }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
h1 { display:block; margin-top:90px; }
}