@import url(root.css);
@import url(fonts.css);
@import url(common.css);

* {
	box-sizing     : border-box;
	scroll-behavior: smooth;
	scroll-margin  : 150px;
	margin         : 0;
	padding        : 0;
}

html,
body {
	min-height : 100%;
	font-family: var(--main-font), system-ui, Arial, sans-serif;
	font-weight: 400;
	font-size  : var(--main-font-size);
	color      : var(--font-color);
}

h1,
h2,
h3 {
	font-family: var(--main-font), system-ui, Arial, sans-serif;
	margin     : 0;
}

h1,
h2 {
	font-weight: bold;
}

h1 {
	font-size: var(--h1-font-size);
}

h2 {
	font-size: var(--h2-font-size);
}

h3 {
	font-size: var(--h3-font-size);
}



header {
	color           : var(--header-font-color);
	font-size       : var(--header-font-size);
	background-color: var(--primary-color);
}

header #portfolio {
	font-size: var(--header-font-size);
}

#home {
  overflow: hidden;
}

#home header {
	background-color: transparent;
}

footer {
	font-size: var(--footer-font-size);
}

table {
	border-spacing: 0;
	width         : 100%;
	border        : 1px solid #ccc;
	border-radius : 5px;
}

tr:nth-child(odd):not(thead tr:first-child) {
	background-color: #eee;
}

tr:nth-child(even) {
	background-color: #e4e4e4;
}

th,
td {
	padding        : 5px 2px;
	border-collapse: collapse;
}

th {
	text-align    : left;
	padding-bottom: 10px;
}

hr {
	border    : none;
	border-top: #ccc solid 2px;
	margin    : 20px auto;
	width     : min(1000px, 95%);
	margin-top: 100px;
}

section:not(#home section) {
	padding: 0 10px;
}

section:not(#home section:first-of-type) {
	margin: var(--margin-sections);
}

section:first-of-type:not(#home section:first-of-type) {
	margin-top: 175px;
}

strong {
	font-weight: bold;
}

img {
	max-width: 100%;
}

button,
button[type="button"],
.btn {
	border       : none;
	padding      : 3px 5px;
	border-radius: 3px;
	text-align   : center;
	cursor       : pointer;
	display      : inline-block;
	color        : white;
}

button {
	background-color: #343434;
	padding         : 8px;
	width           : 100%;
}

button[type="button"],
.btn {
	background-color: #d8a430;
	font-weight     : 600;
	text-transform  : uppercase;
	width           : min(170px, 100%);
}

a {
	text-decoration: none
}

a>svg,
span>svg {
	vertical-align: middle;
	height        : 100%;
	width         : 100%;
}

input:-webkit-autofill {
	background-color  : white !important;
	-webkit-box-shadow: 0 0 0 1000px white inset !important;
	box-shadow        : 0 0 0 1000px white inset !important;
	color             : black !important;
}

input,
textarea {
	display: block;
	padding: 7px 10px;
	width  : 100%;
}

input.invalid,
textarea.invalid {
	border          : 2px solid red;
	background-color: #ffe6e6;
}

input:focus {
	/* background-color   : white; */
	outline         : none;
	border-radius   : 3px;
	/* border       : 2px solid black; */
}

input:focus.invalid {
	outline: none;
	border : 2px solid red
}

label {
	display: block;
}

label:not(:first-of-type) {
	margin: 25px 0;
}


.contenido {
	/* max-width: 1250px; */
	margin  : auto;
	padding : 15px;
	position: relative;
}

.loader {
	border-radius   : 50%;
	border          : 3px solid black;
	border-top-color: transparent;
	animation       : spin 1.2s linear infinite;
	height          : 50px;
	width           : 50px;
	position        : absolute;
	top             : 0;
	bottom          : 0;
	right           : 0;
	left            : 0;
	margin          : auto;
}

.sombra {
	text-shadow: 2px 2px 2px #000;
}

.sombra-clara {
	text-shadow: 2px 2px 2px #444;
}

#home .img-wrapper {
	height: 100vh;
}

#home h1 {
	font-size: 50px;
}

#home p {
	font-size: 25px;
}


.elements,
#project .grid {
	gap: 10px;
}

.gallery .img-wrapper {
	height: 300px;
}

.tour div {
	height: 550px;
}

.elements .img-wrapper {
	height: 500px;
}

#portfolio .elements .img-wrapper:nth-child(1),
#portfolio .elements .img-wrapper:nth-child(6) {
	grid-column: 1/3;
}

#portfolio .elements .img-wrapper:nth-child(2),
#portfolio .elements .img-wrapper:nth-child(7) {
	grid-column: 3/5;
}

#portfolio .elements .img-wrapper:nth-child(3),
#portfolio .elements .img-wrapper:nth-child(8) {
	grid-column: 5/7;
}


#portfolio .elements .img-wrapper:nth-child(4),
#portfolio .elements .img-wrapper:nth-child(9) {
	grid-column: 1/4;
}

#portfolio .elements .img-wrapper:nth-child(5),
#portfolio .elements .img-wrapper:nth-child(10) {
	grid-column: 4/7;
}

#project .banner {
	height: 800px;
}

#project .render {
	grid-column: 2/4;
}

#contact main .contenido {
	max-width: 1400px;
}

.form-wrapper {
	margin-top: 30px;
}

#pages {
	margin-top: 50px;
}

#pages .active {
	color: #990000;
}

.flecha-next svg {
	transform: rotate(180deg);
}

.swiper img {
	width: 100%;
}

.swiper-pagination-bullet {
	background: #AAAAAB !important;
	opacity   : 1 !important;
	margin    : 0 6px !important
}

.swiper-pagination-bullet-active {
	background-color: white !important;
	border-radius   : 10px !important;
	width           : 30px !important;
}

#collapsing-menu {
	background-color: var(--primary-color);
	padding         : 15px;
	padding-top     : 130px;
}

#collapsing-menu div {
	padding: 10px;
}

#collapsing-menu div:first-of-type {
	padding-top: 0;
}

#collapsing-menu div:last-of-type {
	padding-bottom: 0;
}

#contact .swiper {
	height: 550px;
}

nav.admin {
	background-color          : var(--secondary-color);
	color                     : white;
	max-width                 : calc(100% - 15px);
	border-bottom-left-radius : 15px;
	border-bottom-right-radius: 15px;
}

#admin main {
	margin : 50px 0 100px;
	padding: 0 10px;
}

#admin main>.contenido {
	border-radius     : 10px;
	padding           : 0;
	box-shadow        : 5px 6px 11px 0px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 5px 6px 11px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow   : 5px 6px 11px 0px rgba(0, 0, 0, 0.4);
}

#admin main .contenido h1 {
	background-color       : var(--primary-color);
	color                  : white;
	border-top-left-radius : 10px;
	border-top-right-radius: 10px;
}

#admin #pages {
	margin: 30px 0
}

.error {
	font-size: 13px;
	color    : red;
}

@media only screen and (min-width:601px) {
	header .logo {
		margin    : 10px 0 10px 20px;
		transition: all 0.3s ease;
		width     : 70px;
	}

	header.scrolled .logo {
		margin: 0;
		width : 40px;
	}

	#portfolio .elements {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media screen and ((min-width: 600px) and (max-width: 950px)) {}

@media only screen and (max-width:600px) {
	header .logo {
		width: 40px;
	}

	section:first-of-type:not(#home section:first-of-type) {
		margin-top: 105px;
	}

	header nav.flex {
		justify-content: end;
		align-items    : normal;
		width          : 100%;
	}

	.elements .img-wrapper,
	#project .render {
		grid-column: unset !important;
	}

	#project .banner {
		height: 550px;
	}

	.elements {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.elements .img-wrapper {
		height: 300px;
	}

	#contact .swiper {
		height: 400px;
	}
}


@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}