/*	Global	- it helps with margins and display everything ok*/
body {
  font-family: 'Gamja Flower', cursive;
	font-size: 25px;
	/* line-height:1.6em; space between renglones*/
	color:#555;
	margin: 0; /*no little default margin around the web*/
		background:linear-gradient( rgba(206,183,148, 1) 50%, rgba(164,146,118, 0.3)100%),url(../images/cloud.jpg);
	background-repeat: no-repeat;
  background-attachment: fixed;			/*	to center image verticaly	*/
	background-size: cover;
	background-position: center;
}
.container {	/*left and right border, mas angosto - lados*/
	width:90%;	
	margin: auto;
}
.logoBanner {
	width: 100%;
	height: 100%;
}
#navbar {
	background-color:#483d3f;
	opacity: .85;
	overflow: hidden; 	 /*gives more space in the navbox on top & bottom - no queda tan justa*/
}
#navbar ul {
  list-style-type: none; /* no link line */ 
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#navbar li {
  float: left;
}
li a, .dropbtn {   /* font setting nav */
  display: inline-block;  /*	brake list of items  */
  color: #c4a77d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  padding-right: 8px;
	text-shadow: 0 0 3px #800000, 0 0 5px #FFDEAD;
}
li a:hover, .dropdown:hover .dropbtn {   /* highlight when mouse is under*/
	color: orange;
	font-weight: bold;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(72, 61, 63, 0.52);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
	border-radius: 5%;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}
#navbar .current a {		/* highlight current tag */
	color: #ef946c;
	font-weight: bold;
}
/*****************************************************/
	/* to fix botom setting footer */
footer {
	background: #483d3f;
	color: #c4a77d; /*	or white*/
	text-align: center;
	padding: 20px;
	margin-top:40px;
	font-size: 25px;
}
footer #copy{
	color: #c4a77d;
  text-decoration: none;
}
footer a{
	color: orangered;
	cursor: help;
}
footer a:hover{
	font-weight: bold;
}
#validate a {
	text-decoration: none;
	color: Indigo;
}
/*****************************************************/
.adver {
  text-align: center;
}
.adver h3 { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
   width: 100%; 
}
.circle {
	float: right;
	text-align: center;
	letter-spacing: 5px;
	background-color: orangered;
	padding-bottom: 5%;
	padding-top: 5%;
	height: auto;
	width: 300px;
	color: darkred;
	text-shadow: 1px 1px 1px black;
	border-radius: 50%;
}
h2, h3, h4 {
	text-shadow: 1px 1px 1px red;
	color: orangered
}
a {
	text-decoration: none;
	color: aliceblue;
}
a:hover {
	font-weight: bold;
	color: coral;
	opacity: .3;
}
/*****************************************************/
	/*	banner animated	*/	
.banner {
	width: 500px;
	height: 300px;
	border: 3px solid gray;
	margin: auto;
	border-radius: 7%;
	background-size: 100% 100%;
	
	animation: banner 10s infinite;
}
	@keyframes banner {
		0%, 30% {
			background-image: url(../images/world.png);
		}
		35%, 65% {
			background-image: url(../../images/dacalogo.jpg);
		}
		70%, 100% {
			background-image: url(../images/defenddacasupport.jpg);
		}
	}	
/***************************/
/*/  rights!!  /*/
#krights {
	column-count: 3;
	column-gap: normal;
	padding: 5%;
}
#krights ul {
	list-style-type: none;
}
#krights a {
	color: darkslategray;
}
/*/  rights!!  /*/
/**		Poem		**/
.poem {
	width: 500px;
	height: auto;
	background: rgba(59, 42, 116, 0.23);
	border-radius: 5%;
	border: none;
	float: right;
	margin-right: 5%;
	color: rebeccapurple;
	text-align: center;
	font-size: 24px;
}
/**		END Poem		**/
/*	DACA news images  */
.news {
	left: 10%;
}
.dacanews {
	display: inline-block;
  width: 400px;
	height: 300px;
	border: 3px solid gray;
	background-size: 100% 100%;
	border-radius: 10%;

	animation: dacanews 10s infinite;
}
	@keyframes dacanews {
		0%, 10% {
			background-image: url(../images/defenddaca.png);
		}
		15%, 25% {
			background-image: url(../images/new1.jpeg);
		}
		30%, 40% {
			background-image: url(../images/new2.jpeg);
		}
		45%, 55% {
			background-image: url(../images/new3.jpeg);
		}
		60%, 70% {
			background-image: url(../images/new4.jpeg);
		}
		75%, 85% {
			background-image: url(../images/new1.jpeg);
		}
		90%, 100% {
			background-image: url(../images/new1.jpeg);
		}
	}
/*	END_DACA news images  */
/*	DACA steps-news images  */
.news {
	left: 10%;
}
.dacanews1 {
	display: inline-block;
  width: 400px;
	height: 300px;
	border: 3px solid gray;
	background-size: 100% 100%;
	border-radius: 10%;

	animation: dacanews1 10s infinite;
}
	@keyframes dacanews1 {
		0%, 30% {
			background-image: url(https://rethinkingschoolsblog.files.wordpress.com/2017/09/daca-infographic-copy-4-low-low-res-1024x791.jpg?w=640);
		}
		35%, 65% {
			background-image: url(https://rethinkingschoolsblog.files.wordpress.com/2017/09/top10-v3.jpg?w=640);
		}
		70%, 100% {
			background-image: url(https://rethinkingschoolsblog.files.wordpress.com/2017/09/1trgekmmmwjbku3luavv_rg.png?w=640);
		}
	}
/*	END_steps-DACA news images  */
/* DACA news / stories */
* {
    box-sizing: border-box;
}
/* Create 4 equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
		background: rgba(74,74,5,0.3);
		border-radius:10%;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Responsive layout - makes the 4 columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}
/***story**/
.stories {
	text-align: center;
}
.stories a {
	text-decoration: none;
}
/* END DACA news / stories */
table {
  table-layout: fixed ;
  width: 100% ;
	border-collapse: collapse;
}
th {
	letter-spacing: 20px;
	background-color: gray;
	padding: .5%;
	opacity: .8;
	color: blueviolet;
	text-shadow: 1px 1px 1px black;
}
td {
  width: 25% ;
  border: 3px dotted gray;
	text-align: right;
	color: blueviolet
}

/*	display DACA images  */
.adverBanner {
  width: 400px;
	height: 400px;
	border: 3px solid gray;
	border-radius: 10%;
	background-size: 100% 100%;
	margin: auto;
	
	animation: adverBanner 10s infinite;
}
@keyframes adverBanner {
	0%, 20% {
		background-image: url(../images/defenddacastar.jpg);
	}
	25%, 45% {
		background-image: url(../images/daca01.png);
	}
    50%, 70% {
		background-image: url(../images/daca02.png);
	}
	75%, 100% {
		background-image: url(../images/daca03.png);
	}
}
/* end DACA display*/
.resources {
	text-decoration: none;
}

/* Contact page */
fieldset {
	width: 500px;
	height: auto;
	background: rgba(74,74,5,0.3);
	border-radius: 50%;
	border: none;
	margin-left: 10%;
	color: whitesmoke;
	text-align: center;
	font-size: 24px;
}
legend { /*title*/
	background: #483d3f;
	color: #c4a70d;
	font-weight: bolder;
	font-size: 28px;
	padding: 10px 20px;
	opacity: 0.8;
	border-radius: 45%;
}
input {
	/*background-color: -;*/
	color: dimgray;
	border: none;
  border-bottom: 3px solid #555;
	text-align: center;
	opacity: 0.8;
	border-radius: 10%;
	font-size: 24px;
}
::placeholder{
	color: darkslategray;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
}
input:invalid:not(:focus), select, textarea {
  outline: none;
	color: darkslategray;
	background: none;
	border: none;
}
#comment {
	color: darkslategray;
	margin: 0;
	font-weight: bold;
}
button {
	background: rgba(196,235,97,0.5);
	color: darkgreen;
	font-size: 14px;
	border-radius: 50%;
	margin: 10px;
	padding: 10px;
}
button:hover {
	background: rgba(196,235,170,0.5);
	color: palegreen;
	font-weight: bold;
}
/* end CONTACT*/