@charset "UTF-8";
@-ms-viewport{ width: device-width; }

/* HTML5 Reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, main, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; -webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; vertical-align:baseline; background:transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { line-height:1; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-transition: color .2s linear; -o-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; transition: color .2s linear; text-decoration: none; outline: none; }
a img{ border:0 }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
abbr,acronym { border:0; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
article, aside, canvas, details, figcaption, figure, figure img, footer, header, hgroup, menu, nav, section, audio, video { display:block; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
figure { position:relative }
figure img { width:100% }
fieldset,img { border:0; }
h1,h2,h3,h4,h5,h6 { font-style:normal; font-weight:normal; }
img { max-width: 100%; height: auto; }
input, select { vertical-align:middle; }
input, select, textarea { outline: none; -webkit-appearance: none; -moz-appearance: none; }
ol, ul, nav ul { list-style:none; }
q:before,q:after { content:''; }
table { border-collapse:collapse; border-spacing:0; }
del { text-decoration: line-through; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
::-moz-selection { background: yellow; }
::selection { background: yellow; }

:root {
	--color-main:rgb(0,48,87);
	--color-main-70:rgb(77,110,137);
	--color-main-30:rgb(179,193,205);
	--color-alternate:rgb(0,38,58);
	--color-secondary:rgb(215,210,203);
	--color-alamos:rgb(238,39,55);
	--color-kidu:rgb(139,184,232);
	--color-fontanar:rgb(239,75,129);
	--color-text:rgb(255,255,255);
	
	--max-width:1080px;
	--unit:24px;
	--corner:8px;
	--button:48px;
}

body {
	width: 100%;
	min-height: 100vh;
	color: var(--color-text);
	background-color:var(--color-alternate);
	background: linear-gradient(0deg, var(--color-main) 0%, var(--color-alternate) 100%);
}

#Wrap {
	padding: var(--unit);
	padding-bottom: calc(var(--unit) * 2);
	margin-left: auto;
	margin-right: auto;
}

.houdini { display: none; }

.ibx { line-height: 0; font-size: 0; }

header {
	text-align: center;
	padding-bottom: var(--unit);
}

header img { height: calc( var(--unit) * 4); }

main {
	display: flex;
	flex-wrap: wrap;
	gap: var(--unit);
}

main > div {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--unit) / 2);
	width: 100%;
	justify-content: space-between;
}

main a {
	height: calc(var(--unit) * 3);
	width: calc(50% - (var(--unit) / 4));
	border-radius: calc(var(--unit) / 4);
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
}

main a span {display: none; }

main .logo {
	color: red;
	width: 100% !important;
	height: calc(var(--unit) * 4);
	background-image: url(svg/lgo-colegios.svg);
	background-size: calc(var(--unit) * 16);
}

#Alamos .logo { background-position-y: 0; }
#Kidu .logo { background-position-y: calc(var(--unit) * -4); }
#Fontanar .logo { background-position-y: calc(var(--unit) * -8); }

#Alamos .web { background-color: var(--color-alamos) }
#Kidu .web { background-color: var(--color-kidu) }
#Fontanar .web { background-color: var(--color-fontanar) }

.web { background-image: url(svg/ico-web.svg); }

.facebook, .instagram, .whatsapp, .youtube, .location {
	background-size: calc(var(--unit) * 2) ;
}

.facebook {
	background-color: rgb(59, 123, 255);
	background-image: url(svg/ico-facebook.svg);
}

.instagram {
	background-color: rgb(192, 0, 156);
	background-image: url(svg/ico-instagram.svg);
}

.whatsapp {
	background-color: rgb(37, 211, 102);
	background-image: url(svg/ico-whatsapp.svg);
}

.youtube {
	background-color: rgb(238, 49, 35);
	background-image: url(svg/ico-youtube.svg);
}

.location {
	background-color: rgb(235, 233, 229);
	background-image: url(svg/ico-location.svg);
}

/* ⬇ 412px and bigger */
@media screen and (min-width: 412px) {
	#Wrap {
		padding: calc(var(--unit) * 2 );
		padding-top: var(--unit);
	}
	
	main { gap: calc(var(--unit) * 2 );}
}

/* ⬇ 600px and bigger */
@media screen and (min-width: 600px) {
	main a { width: calc(33% - (var(--unit) / 2.5)); }
}

/* ⬇ 667px and bigger */
@media screen and (min-width: 667px) {
	#Wrap { max-width: 640px;}
}

/* ⬇ 768px and bigger */
@media screen and (min-width: 768px) {
	body { display: grid; align-items: center; }
	#Wrap { width: 100%;}

}

/* ⬇ 900px and bigger */
@media screen and (min-width: 900px) {
	#Wrap { max-width: 100%; }
	
	header img { height: calc( var(--unit) * 5.5); }
	
	main {
		flex-wrap: nowrap;
		gap: calc(var(--unit) * 2 );
	}
	
	main > div { gap: var(--unit); }
	
	main a {
		height: calc(var(--unit) * 3);
		width: calc(50% - (var(--unit) / 2));
	}
	
	main .logo {
		height: calc(var(--unit) * 6);
		background-size: calc(var(--unit) * 12);
	}
	
	#Alamos .logo { background-position-y: calc(var(--unit) * -9); }
	#Kidu .logo { background-position-y: calc(var(--unit) * -15); }
	#Fontanar .logo { background-position-y: calc(var(--unit) * -21); }
}

/* ⬇ 1024px and bigger */
@media screen and (min-width: 1024px) {
	#Wrap { max-width: 1200px; }
	
	main { gap: calc(var(--unit) * 4 );}
}