html,body {
    height:100%;
    padding:0;
    background-color:white;
	font-family: 'Open Sans';
}

h1 {
	font-family: Muli;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26px;
}

h2 {
	font-family: Muli;
	font-size: 19px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 20px;
}

h3 {
	font-family: Muli;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 15px;
}

p {
	font-family: 'Open Sans';
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}

.df{
	font-family: "American Typewriter", Courier, "Courier New", monospace;
	letter-spacing: 0.0625em;
	font-weight:400;font-size:medium;
}

/*
h1{
	color:black;
	font-size:medium;
	font-weight:300
}
*/

.container {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
	margin:0 auto;
	padding:0;
	max-width:1920px;
	background-color:white;
	z-index:1;
}

#col_left {
	height:100%;
	width:50%;
	position:absolute;
	left:0;top:0;
	bottom:0;
	display:block;
	z-index:10;
	overflow:hidden;
}

#col_left img { 
	min-height: 100%;
	min-width:100%;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
	z-index:10;
}

/*
#col_left {
	background-color:black;
    background-image:url("img/pattern_l.jpg");
    background-repeat:no-repeat;
    background-size:cover;
	background-position:center center;
	height:100%;
	width:50%;
	position:absolute;
	left:0;top:0;
	bottom:0;
	height:auto;
	display: block;
	z-index:10;
}
*/

@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein img { 
    opacity:0; 
    animation-name: fade; 
    animation-duration: 18s; 
    animation-iteration-count: infinite; 
    position:absolute; 
    left:0; 
    right:0; 
}

.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
.fadein img:nth-child(4) { animation-delay: 9s; }
.fadein img:nth-child(5) { animation-delay: 12s; }
.fadein img:nth-child(6) { animation-delay: 15s; }
.fadein img:nth-child(7) { animation-delay: 18s; }
.fadein img:nth-child(8) { animation-delay: 21s; }

/* PROGRESS BAR */
.progress-bar { 
	position:fixed;
	top:0;left:0;
	width:100%; 
	height:5px;
	background:#cc9800;background:rgba(204,152,0,0.9);
	-moz-animation:fullexpand 21s ease-out infinite;
	-webkit-animation:fullexpand 21s ease-out infinite;
	z-index:15;
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}

#col_right {
	margin-left:50%;
	background-color:white !important;
	height:100%;
	z-index:15 !important;
}

#col_right .logo_container{
	position:absolute;
  	top:50%;
  	left:50%;
  	margin-top:-75px;
  	margin-left:-90px;
	width:180px; /* 210px */
	height:150px; /* 200px */
	background-color:white;
	/* line-height:10px */ /* controls h1 */
}

#col_right .logo_container .logo{
    background-image:url("img/logoDF.svg");
	background-size: 75% 100%; /* 150px 150px */
    background-repeat: no-repeat;
	background-position: top center; 
	height:75%; /* 150px */
	width:100%; /* 210px */ 
}

#col_right .logo_container h1{
    text-align: center;
	vertical-align: text-bottom;
	width:100%;
	display:block;
}

/* manifiesto */
.logo_container{
	position:relative;
	width:52.5px;
	height:50px;
	background-color:white;
	/* line-height:10px */ /* controls h1 */
	margin:0 auto;
}

.logo_container .logo{
    background-image:url("img/logoDF.svg");
	background-size: 75% 100%; /* 150px 150px */
    background-repeat: no-repeat;
	background-position: middle center; 
	height:75%; /* 150px */
	width:100%; /* 210px */ 
}

#menu_container{ /* 105x105 */
	background:black;
	background:#000;
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.85);
	width:61px;
	height:61px;
	color:white;
	position:absolute;
  	top:50%;
  	left:50%;
  	margin-top:-30.5px;
  	margin-left:-30.5px;
	z-index:20;
	-webkit-box-shadow:0px 0px 4px 1px rgba(0,0,0,0.25);
	-moz-box-shadow:0px 0px 4px 1px rgba(0,0,0,0.25);
	box-shadow:0px 0px 4px 1px rgba(0,0,0,0.25);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

#dfnav-icon {
	width:38.85px;
  	height:22.14px; /* 50% */
  	position:relative;
  	margin:auto auto;
  	cursor:pointer;
}

#dfnav-icon span {
  	display:block;
  	position:absolute;
  	height:5.22px;
  	width:50%;
	background:white;
	background:#fff;
	background:rgb(255,255,255);
	background:rgba(255,255,255,1.0);
  	opacity:1;
  	-webkit-transform:rotate(0deg);
  	-moz-transform:rotate(0deg);
  	-o-transform:rotate(0deg);
  	transform:rotate(0deg);
}

#dfnav-icon span:nth-child(even) {
  	left:50%;
  	border-radius:0 9px 9px 0;
}

#dfnav-icon span:nth-child(odd) {
  	left:0px;
  	border-radius:9px 0 0 9px;
}

#dfnav-icon span:nth-child(1), #dfnav-icon span:nth-child(2) {
  	top:0px;
}

#dfnav-icon span:nth-child(3), #dfnav-icon span:nth-child(4) {
  	top:10px;
}

#dfnav-icon span:nth-child(5), #dfnav-icon span:nth-child(6) {
  	top:20px;
}

button {
	background:black;
	background:#000;
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.85);
    border:none;
	color:white;
}

.overlay { /* 384px */
    /* min-height:294px; */
	min-height:240px; /* 204px, 275px */
	height:auto;
    width:260px; /* 249px, 296px */
    position:fixed;
    z-index:30;
  	top:50%;
  	left:50%;
  	/* margin-top:-147px; */ /* based on min-height of 294px */
  	margin-top:-120px; /* -148px */
	margin-left:-130px; /* -137.5px */
	background:black;
	background:#000;
	background:rgb(0,0,0);
	background:rgba(0,0,0,0.85);
	-webkit-box-shadow:0px 0px 4px 1px rgba(0,0,0,0.425);
	-moz-box-shadow:0px 0px 4px 1px rgba(0,0,0,0.425);
	box-shadow:0px 0px 4px 1px rgba(0,0,0,0.425);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.overlay-content {
	display:block;
    position:relative;
	margin-top:23px;
    text-align:center;
}

.overlay a {
    padding:6px;
    text-decoration:none;
    /* font-size:20.8125px; */
    color:white;
	font-weight:400;
    display:block;
}

.overlay_acerca-de a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color:black;
    display: block;
}

.overlay a:hover, .overlay a:focus, .overlay_acerca-de a:hover, .overlay_acerca-de a:focus {color:#cc9800}

.overlay_acerca-de {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 30;
  	top: 0%;
  	left: 0%;
    background-color: rgba(255,255,255,1.0);
    /* overflow-y: hidden;*/
}

.overlay-content_acerca-de {
    position:relative;
    top:5%;
    width:100%;
    text-align:center;
}

.overlay-content_acerca-de p{padding:0 24px;color:black}
.overlay-content_acerca-de .center{display:block;margin:0 auto;width:80%}
.overlay-content_acerca-de h2{color:black}

.closebtn {
    position:absolute;
    top:-10px;
    right:5px;
    font-size:34.6875px !important;
	z-index:60;
	padding:0;
	margin:0;
	border-bottom-left-radius:6px;
	-moz-border-bottomleft-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	-moz-border-bottomright-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	/* background:rgba(204,152,0,0.0) */
}

@media only screen 
and (min-device-width:320px) 
and (max-device-width:568px) { 
	#col_right #logo_container{
		position:absolute;
  		top:50%;
  		left:50%;
  		margin-top:-50px;
  		margin-left:-52.5px;
		width:105px;
		height:100px;
		background-color:white;
		/* line-height:10px */ /* controls h1 */
	}
/*
	h1{
		color:black;
		font-size:small;
		font-weight:400
	}
*/
}