/* Hexis Ecard 2017

________________________________________________________________________________
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 : #1b0518;
	font-family:Tahoma, Geneva, sans-serif;
	background: #ffffff;
}

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


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

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

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

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

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


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

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

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

a.link.ipad { display:none; }


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

img { max-width:100%; }


/* 

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

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

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

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

/* 


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

.box {
	padding:6px 6px 6px 6px;
	width:640px;
	height:360px;
	margin:0 auto;
	position:relative;
	background: url(../img/video.png) top center no-repeat;
}

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

/* 
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:100px; width: 100%; height:100%; padding-left:0%; }
#application { background-color: #1b0518; }
.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:240px; }
.footer { display: none; }
.box { display:none; }
#application { background-color: #1b0518; }
}

/* 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; }
.footer { display: none; }
.box { display:none; }
#application { background-color: #1b0518; }
}

@media only screen
and (min-width : 479px) {
.stars { min-height:280px; }	
}

/* 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; margin-top:40px; }
.copyright { float:left; margin-top:s0px; }
.btn { float:right; }
header { height:255px; top: 0px; }
#application { background : #ffffff url(../img/body.png) no-repeat 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:812px; background : #ffffff url(../img/body.png) no-repeat top center; }
.footer { display: block; }
.stars { display: none; }
}

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

@media only screen
and (min-width : 1224px) {
/* Styles */
a.link { display:none; }
header { height:205px; 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 : 1280px) {
/* Styles */
.video-js { display:none; }
a.link.ipad { display:block; }
header { height:50px; top: 0px; }
.box { background: none; }
h1 { display:block; margin-top:180px; }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1280px)
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:140px; }
}