@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;700&display=swap');



/* ------ SMOOTH SCROLLING ------ */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ----  GENERAL -----*/
html,body{
	background-color: #ffffff;
	font-family: 'Raleway', sans-serif !important;
}

p{
	text-align: justify;
	color:#54585A !important;
	font-size: 1.1em;
}

.img-100{
	width: 100%;
	height: auto;
	margin: 10px;
}

.img-50{
	width: 50%;
	height: auto;
	margin: 10px;
}

.no-padding{
   padding: 0 !important;
   margin: 0 !important;
}

.ir-arriba {
	padding:10px;
	display:inline-block;
	background: rgba(136, 147, 148,0.8);
	color:#fff;
	position: fixed;
	font-size:20px;
	bottom:20px;
	right:20px;
	display:none;
	cursor:pointer;
	 border-radius: 50%;
	z-index:9999;
}



/*-----  Navbar -----*/

.navbar{
	padding: 20px 0px !important;
}

.navbar a{
	color:#54585A;
}


.navbar-brand img{
	width: 120px;
	height: auto;
}

.navbar-brand-centered {
    position: absolute;
    left: 50%;
    display: block;
    width: 160px;
    text-align: center;
    background-color: transparent;
}
.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered {
    margin-left: 0px;
}


.navbar-toggler {
      border: 1px solid #54585A !important;

}


/*-----  Content -----*/
.banner{
	width: 100%;
	height: auto;
	margin-bottom: 40px;
}


/*-----  Nosotros -----*/
.nosotros{
	padding: 40px 10px !important;
	
}

.nosotros h1{
	text-align: center !important;
	color: #54585A;
	
}


.nosotros hr{
	border-bottom: 1px solid #54585A;
	margin-bottom: 30px;
}


/*-----  Filosofia -----*/
.filosofia{
	padding: 40px 10px !important;
	
}

.filosofia h2{
	text-align: center !important;
	color: #54585A;
	
}


.filosofia hr{
	border-bottom: 1px solid #54585A;
	margin-bottom: 30px;
}




/*-----  Arquitectos -----*/
.arquitectos{
	padding: 0px 10px 40px;
}
.arquitectos .arq-box-frame{
	padding: 10px;
}

.arquitectos .img-arq{
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.arquitectos h5{
	text-align: center !important;
	color: #54585A;
}

.arquitectos ul{
	padding: 0;
	list-style: none;
	margin: 0 auto;
	display: table;
}

.arquitectos li{
	display: inline-block
}

.arquitectos li a{
	color: #54585A;
	padding: 5px;
	font-size: 22px;
}


/*-----  Proyectos-----*/
.proyectos{
	padding: 40px 10px;
	
}
.proyectos h3{
	text-align: center !important;
	color: #54585A;
}


.index-grid {
  margin: 40px 0px;
}

.index-grid ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-grid  .grid {
  display: flex;
  flex-wrap: wrap;
}
.index-grid  .grid-item {
	display: flex; 
    padding: 1.5em;
	width: 100%;
}
@media all and (min-width: 40em) {
  .index-grid  .grid-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .index-grid  .grid-item {
    width: 33.3%;
  }
}

.index-grid  .grid-content {
	background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
	width: 100%;
}


.tiles .tile {
  display: inline-block;
  text-align: left;
  opacity: .99;
  overflow: hidden;
  position: relative;
  /*filter: grayscale(100%);*/

}

.tiles .tile:hover {
transition-duration: 2s;
  filter: none;

}


.tiles .tile:before {
  content: '';
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  transition-property: top, opacity;
  transition-duration: 0.3s;
  	
}
.tiles .tile img {
  width: 100%;
  height: auto;
}
.tiles .tile .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  transition-property: top, opacity;
  transition-duration: 0.3s;
  transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1;
  font-weight: 600;
  font-size: 18px;
}
.tiles .tile .details .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.tiles .tile:focus:before,
.tiles .tile:focus span, 
.tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:focus:before, 
.tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:focus span, 
.tiles .tile:hover span {
  top: 0;
}
.tiles .tile:focus .title, 
.tiles .tile:hover .title {
  transition-delay: 0.15s;
	filter:none !important;
}
.tiles .tile:focus .info, 
.tiles .tile:hover .info {
  transition-delay: 0.25s;
}


/* ------ Modal -----*/
.modal-fullscreen{
  padding: 40px 60px !important;
}


.modal-content{
	border-radius: 0px !important;
	border: none !important;
	padding: 10px 50px;
}


.modal-header, .modal-footer {
	border: none !important;
}

.modal-footer {
	text-align: left !important;
	font-size: 12px;
	display: block !important;
	flex-wrap: nowrap !important;
}


.modal-footer p{
	margin: 0 !important;
}

.vertical-line {
	border-right: solid thin #212529;
}

.modal-fullscreen .modal-body {
    overflow-y: hidden !important;
}


.carousel-control-next, .carousel-control-prev {
    width: 5% !important;
    
    opacity: 1 !important;
    transition: opacity .15s ease;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(1);
}


.carousel-item img{
	  display: block;
	  width: auto;
	  margin: auto;
	  height: 100% !important;
	  max-height: 600px !important;
	  min-height: 600px !important;

 }	  

@media (min-width: 1025px) and (max-width: 1366px) {
	.carousel-item img{
	  display: block;
	  width: auto;
	  margin: auto;
	  height: 100% !important;
	  max-height: 450px !important;
	  min-height: 450px !important;

	}	
}

@media (min-width: 768px) and (max-width: 1024px) {
  
  .carousel-item img{
     display: block;
	  width: auto;
	  margin: auto;
	  height: 100% !important;
	  max-height: 800px !important;
	  min-height: 800px !important;
  
}
  
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
	.carousel-item img{
     display: block;
	  width: auto;
	  margin: auto;
	  height: 100% !important;
	  max-height: 450px !important;
	  min-height: 450px !important;
		}
  
}
	
@media (min-width: 320px) and (max-width: 480px) {
	
	
	.modal-fullscreen{
  		padding: 20px !important;
	}


	.modal-content{
		border-radius: 0px !important;
		border: none !important;
		padding: 10px 10px;
	}

  
 	.carousel-item img{
		display: block;
		width: auto;
		margin: auto;
		height: 100% !important;
		max-height: 500px !important;
		min-height: 500px !important;
	}
	
	.modal-footer p{
		font-size: 12px;
	}
  
}
	


/* ----- Staff ---- */
.staff h5{
	color: #54585A;
	font-size: 1.75rem !important;
}


.curriculum{
	border-left: thin solid #54585A;
}

.curriculum-block{
	padding: 10px 10px 10px 30px;
}


.curriculum-block  h4{
	color: #54585A;
	font-size: 1.75rem !important;
}
.curriculum-block p{
	font-size: 1em !important;
}



/* ------ Contacto ------ */
.contacto{
}

.contacto h5{
	color: #54585A;
	font-size: 1.75rem !important;
	text-align: center;
}

.contacto .mapa-size{
	width: 100%;
	height: 250px;
}


.address-1 p{
	font-size: 1em;
	text-align: right;
}

.address-2 p{
	font-size: 1em !important;
	text-align: left !important;
}




.contacto form{
	
	
}

.contacto form ul{
	list-style:none;
	margin:0;
	padding:0;
}


.contacto form li{
	display:list-item;	
	font-size:16px;
	padding: 10px 20px;
	color: #54585A !important;
	text-align: center;
}

.contacto form .formGroup{
	margin-bottom:10px;
}


.contacto form input, select, textarea{
	width:100%;	
	font-size:16px;
  	margin:0;
	padding: 10px;
    border-width:0px;
    border:none;
	background-color: #ffffff;
  	border-bottom: 1px solid #54585A;
  
	color: #54585A;
  	-o-text-overflow: clip;
  	text-overflow: clip;

	resize: none;
	outline: none !important;
}

.contacto form input, select, textarea:active{
	padding: 10px;
}


.contacto form .txtobligatorios{
	text-align: center;
	color: #54585A;
	font-size:11px;
}

.contacto form .button{
	font-size:16px;
	font-weight:normal;
	padding: 9px 40px;
	text-align: center;
	text-decoration:none;
	color: #ffffff;
	margin-top:20px;
	display: block;
	margin: 0 auto;
	background-color: #54585A;
}

.contacto form .button:hover{
	background-color: #000000;
	color: #FFFFFF;
}

/* ------ Footer ------ */
.footer {
	padding: 40px 10px;
}
.footer p{
	font-size:0.8em !important;
	text-align: center !important;
}



/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 1170px;
  }
}