/*
  STYLES GUIDE:
  0. RESET
  1. LAYOUT
  2. GENERIC ITEMS
  3. PARTS OF WEB
  4. LIST
  5. FORM
  5. ANIMATIONS
  ----------
  COLORS:
    color1 => #2c3e50;
    color2 => #34495e;
    color3 => #3498db;
    color4 => #fff;
*/

/* 0 RESET */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 1 LAYOUT */
  body { text-align: center; font:300 20px/1.7 'Roboto Condensed';}

	.contenedor {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

  .header { display: flex; justify-content: center; align-items: center; }
	.headers { display: flex; justify-content: center; align-items: center; }

	.fullscreen-video-wrap{
		position: relative;
		top: 0;
		left: 0;
		width: 100%
		height 100vh;
		overflow: hidden;
	}

	.fullscreen-video-wrap video{
		min-width: 100%
		min-height: 100%
	}

  .navbar { display: flex; justify-content: center; align-items: center; background: #199dc0; }

  .tarifas { text-align: center; }
	.formulario { text-align: center; }

  .list-services {display: flex; align-items: center; justify-content: center;}
  .list-services figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}

	.list-services2 {display: flex; align-items: center; justify-content: left;}
	.list-services2 figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}

	.list-slogan {display: flex; align-items: center; justify-content: center;}
	.list-slogan figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}

	.list-inscripciones {display: flex; align-items: center; justify-content: center;}
	.list-inscripciones figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}

	.list-footer {display: flex; align-items: center; justify-content: center;}
	.list-footer figure { display: flex; justify-content: center; align-items: center; flex-flow: column;}
/* 2 GENERIC ITEMS */

  .header { height: 30%; background: #fff; center top; background-size: cover;}
	.headers { height: 100px; background: #fff; center top; background-size: cover;}
  .navbar { height: 63px; background: #80bf1f; border-bottom: 0px dashed #3498db;}
    .navbar a { padding: 0 20px; color: #fff; text-decoration: none; text-transform: uppercase; font: 30px 'Stint Ultra Condensed'; text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);}
  .title {margin-bottom: 40px; color3; font: 16px 'Stint Ultra Condensed'; text-transform: uppercase;}
  p {margin-bottom: 20px;}

  .btn { border: 2px solid #fff; padding: 10px 40px; display: inline-block; text-decoration: none; color: #fff;}

/* 3 PARTS OF WEB */
  .content { padding: 30px 0;}
	.content2 { padding: 2% 0;}

    .who {background: #2c3e50; color: #fff;}
      .who p { max-width: 100%; margin: 0 0;}
    .services { width:100%; background: #000;}
		@keyframes movimiento{
			from{
				background-position: bottom left;
			}to{
				background-position: top right;
			}
		}
		.footer {background: #199dc0;color: #fff;}


    .tarifas {background: url(../images/fondo-logos.jpg) center top; background-size: 50%; color: #fff;}
		.formulario {background: #112027; background-size: cover; color: #fff;}
		  .contain {max-width: 100%; margin: 0 auto;}
      .tarifas p {max-width: 100%; margin: 0 auto;}
			.formulario p {max-width: 100%; margin: 0 auto;}

    .localization {color: #34495e; padding-bottom: 0;}
      .localization .map img {max-width: 100%; width: 100%;}

/* 3 LIST  */

  .list-services figure { position: relative; width: 100%; height: 100%;}
  .list-services figure:after {content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; z-index: 0; background: #c0c0c0; width: 100%; height: 100%; filter: drop-shadow(5px 5px 10px #444);}
  .list-services img {position: relative; z-index: 1; width: 100%; transform: scale(1.15); transition: all 0.5s;}
	.list-services img:hover {transform: scale(1.05);}
	.list-services li { padding: 3% 3%; }
  .list-services figcaption { position: relative; left: 0; right: 0; bottom: -40px;}

	.list-services2 figure { position: relative; width: 77%; height: 10%;}
	.list-services2 img {position: relative; z-index: 1; width: 100%;}
	.list-services2 li { padding: 0 30px; }
	.list-services2 figcaption { position: relative; left: 0; right: 0; bottom: -40px;}

	.list-slogan figure { position: relative; width: 100%; height: 100%;}
	.list-slogan img {position: relative; z-index: 1; width: 80%;}
	.list-slogan li { padding: 0 30px; }
	.list-slogan figcaption { position: relative; center: 0; center: 0; bottom: -40px;}

	.list-inscripciones figure { position: relative; width: 100%; height: 100%;}
	.list-inscripciones img {position: relative; z-index: 1; width: 75%;}
	.list-inscripciones li { padding: 0 30px; }
	.list-inscripciones figcaption { position: relative; center: 0; center: 0; bottom: -40px;}

	.list-footer figure { position: relative; width: 100%; height: 100%;}
  .list-footer img {position: relative; z-index: 1; width: 35px; height: auto; }
  .list-footer li { padding: 0 80px; }
  .list-footer figcaption { position: relative; left: 0; right: 0; bottom: -40px;}

	.box {
		position:relative;
		background: #199dc0;
		color: #fff;
		text-align: center;
		width: 100%;
		padding: 10px;
	}

	.box2 {
		position: relative;
		top: 0;
		display: flex;
		justify-content: center;
		z-index: 1;
		background: #000;
		opacity: 0.5;
		color: #fff;
		text-align: center;
		width: 30%;
		padding: 10px;
	}

/* 3 ANIMATIONS */
@media screen and (max-width: 800px){
	.navbar a{
		font: 12px;
	}
}