﻿﻿ @font-face{
		font-family: Gill Sans MT;
		src: url(GIL_____.ttf);
	}
	html {scroll-behavior: smooth;}
		body {
				background-color: #f4f4f4;
				background-image: url(Background.png);
				box-sizing: border-box;
			}
      p,h1,h2,h3,li,span,textarea {
				font: 1em Segoe UI,sans-serif;
				text-shadow: 0px 2px 10px #262929;
				color: white;
      }
			header {
        width: 973px;
				height: 50px;
				padding: 20px 10px;
				margin: 0 auto;
			}

  		#HeaderSquare {
			display: flex;
			justify-content: right;
			padding-right: 10px;
				height: 4.2em;
			 }

      content {
				display: flex;
				width: 1000px;
				margin: 0 auto; 
     } 

 				#TitleSquare{
 				 background-color: #7fa4a21a;
				height: 600px;
 				}

	 		#FormSquare,#ServiceSquare,#TitleSquare, .slider{
	 			box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.32), 0px 5px 5px 4px rgba(0, 0, 0, 0.35), 0px 0px 0px -2px rgba(0, 0, 0, 0.2);
	 			border-radius:3px;
				box-sizing: border-box;
	 		}

			#AMLogo1{
				width: 70px;
				float: left;
				padding-right: 5px;
				 border-right-style: solid;
				 border-right-color: #4b665d6e;
				 margin: 5px;
				}

				#Menu, #ContactButton{
          padding: 18px 18px;
					margin: 5px;
					text-decoration: none;
					color: #484848;
					font: 15px sans-serif;
					transition-duration: 0.1s;
					border-radius:3px;
				}

				#Menu:hover{
					background-color: lightgray;
				}

				#ContactButton {
					color: white;
					background-color:#3d7f97;
					font-weight: bold;
				}

 				#ContactButton:hover{
 					background-color: #38a4cc;
 				}



 				#AMtitle1 {
 					margin-left: 3.5em;
 					font-size: 5em;
 					color: white;
 					float: left;
 					margin-top: 1em;
 				}

 				#AMlogo2{
 					float: right;
 					margin-right: 10%;
 					width: 30%;
 					margin-top: 10%;
 				}

 				#AMtitle1 {
 					margin-left: 3.5em;
 					font-size: 5em;
 					color: white;
 					float: left;
 					margin-top: 1em;
 				}

				#AMtitle2 {
					font-size: 2em;
					width:15em;
					text-align: center;
					margin-left:3em;
					float: left;
				}

				#AMdescrip{
					font-size: 21px;
					text-align: center;
					margin-left: 4.5em;
					width: 24em; 
				  letter-spacing: 1px;
					float: left;
				}
      
      #Es{
				color: #236299;
				text-shadow: none;
				font-size: 1.5em;
      }

  #ServiceSquare {
		background-color: #014141a1;
		height: auto;
		margin: 0 auto;
		padding-bottom: 4em;
		padding-top: 1em;}

#Servicios {text-align: right;
	margin: 0;
	padding: 1em;
	margin-right: 1em;
	padding-bottom: 30px;
	font:3.5em Gill Sans MT
  }

  h2.SerTitulos,h2.SerTitulosR {font-size: 22px;font-weight: bold; margin: 1em;margin-left: 5em;}
	.IconS {border: 3px solid;border-color: #56e5b9;width: 25px; font: 1em sans-serif; text-align: center;padding: 10px;border-radius: 50%; float: left;margin-right: 1em;}
	ul.SerDescripR, p.SerDescripR {font-size: 18px;margin-left:22em;color: #eee;;margin-right: 5em; margin-top: 2em}
	h2.SerTitulosR {margin-left:22em;;margin-right: 1em;}
	ul.SerDescripR{text-align: left;margin-left: 29em;}
	p.SerDescrip, ul.SerDescrip {font-size: 18px;width: 25em; margin-left: 10em;color: #eee;margin-bottom: 3em;margin-top: 2em;}
  
 	#FormSquare {background-color: #d5e2e6eb;height: 400px; margin: 0 auto;}
 	#ContactDescrip {width: 20em; text-align: center;font: 150% Gill Sans MT;margin-top: 15%; float: left; margin-bottom: 1em; margin-left: 30px;color: #3d7f97; text-shadow: none;font-weight: bold;}
	#Contact {text-decoration: none;width: 12em; text-align: center;color: white;font:2em Segoe UI,sans-serif;background-color:#116280;border-radius:25px; padding: 10px;float: left;margin-left: 50px;cursor: pointer;transition-duration: 0.3s;border: none;font-weight: bold;}
	#Contact:hover{ background-color: #38a4cc; color: white;}
	#AMIcon {width: 20em; margin-left: 3em;float: left;margin-top: 2em;}
	#Form {margin: 2em;}

	footer {background-color:#272a31d6; margin-top: 20px;border-radius:3px;}
  #RedesSociales{margin: 0px auto;display: flex;justify-content: center;align-items: flex-start;}
	#FooterSquare {padding: 1px 0px;text-align: center;}
	#Acerca {Text-align: center; padding: 1em;font: 1.5em Gill Sans MT;}
	#Social {font: 90% Segoe UI,sans-serif;text-shadow: 0px 2px 10px #262929; color: white;text-decoration: none;font-weight: bold; margin: 1em 0em;}
	#Colab {padding: 2em 0em;}
	.ficon {width: 50px;margin: 0em 12px}

		/**Slides**/

.slider{
	width: 1000px;
	margin: 0 auto;
	height: 600px;
	overflow: hidden;
	margin-top: 10px;
}

.slides {
	width: 500%;
	height: 600px;
	display: flex;
	align-items: flex-end;
}

.slides input {
	display: none;
}

.slide{
	width: 20%;
	transition: 1s;
	background-color: #007370;

}

.slide img{
	height: 600px;
}

/**Css for manual navigation**/

.navigation-manual{
	position: absolute;
	width: 1000px;
	display: flex;
	margin-bottom: 20px;
	justify-content: center;
}


.manual-btn {
	border: 2px solid white;
	padding: 5px;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
}

.manual-btn:not(:last-child){
	margin-right: 40px;
}

.manual-btn:hover{
	background: white;
}

#radio1:checked ~ .first{
	margin-left: 0;
}

#radio2:checked ~ .first{
	margin-left: -20%;
}

#radio3:checked ~ .first{
	margin-left: -40%;
}

#radio4:checked ~ .first{
	margin-left: -60%;
}

#radio5:checked ~ .first{
	margin-left: -80%;
}


.navigation-auto{
	position: absolute;
	width: 1000px;
	margin-top: auto;
	display: flex;
	margin-bottom: 20px;
	justify-content: center;
}

.navigation-auto div{
	border: 2px solid white;
	padding: 5px;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
}

.navigation-auto div:not(:last-child){
	margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
	background: white;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
	background: white;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
	background: white;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
	background: white;
}
#radio5:checked ~ .navigation-auto .auto-btn5{
	background: white;
}

@media screen and (max-width: 1025px){


	header,#FormSquare,#ServiceSquare,content, .slide img, .slider{
		width: 100%;
	}
	
	.slide img, .slides, .slider {
		height: auto;
	}
	
	.navigation-auto, .navigation-manual{
		width: 100%;
	}
		#AMtitle1 {margin-left: 25%;}
		#AMtitle2{margin-left:9%;width:45%;}
		#AMdescrip {width: 80%;}
	#AMlogo2 {
    margin-top: 20%;
}
	header {
		padding: 1% 0px;
	}
	 #AMIcon{width: 30%}
	#ContactDescrip{margin-left: 8%;width:40%}
  #Contact{margin-left: 8%;width:40%;border-radius: 50px}
	#RedesSociales {height: 100px;width: 100%;}
	#Social {
		line-height: 2;
	}
	.ficon {
		margin: 5px 5px;
		width: 50px;
	}
	h2.SerTitulosR, ul.SerDescripR {margin-left: 50%}
}

@media screen and (max-width: 768px){
	#TitleSquare {
		height: 600px;
	}
	header {
		background-color: #d5e2e6eb;
		height:70px ;
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 5px 5px 4px rgba(0, 0, 0, 0.21), 0px 0px 0px -2px rgba(0, 0, 0, 0.01);
		border-radius:3px;
  }
	#Menu, #ContactButton {
		font-size: 12px;
		font-weight: bold;
		padding: 18px 2%;
	}
	#Menu:hover{
		background-color: #5e75721f;
	}
	#Menu{
		color: #3d7f97;
	}
	#AMlogo2 {
		margin-top: 30%;
	}
	#AMtitle1{
		font-size: 3em;
	}
	#AMdescrip {
		margin-left: 3em;
	}
	#Servicios {text-align: center;width:100%: margin: 0 auto; font-size: 2.5em;}
		h2.SerTitulosR, h2.SerTitulos{margin-left: 20%;}
		ul.SerDescripR,p.SerDescripR,ul.SerDescrip  {margin-left: 25%;width: 60%}
		p.SerDescrip, p.SerDescripR {font-size: 20px;width: 55%; margin-left: 25%;}
			#Contact{width:40%;font-size: 1.5em;border-radius:50px;}
    #ContactDescrip{margin-left: 10%;margin-top:10%}
			#FormSquare{height: 300px;}
	#FooterSquare {height: 400px}
	#RedesSociales {width: 60%;flex-wrap: wrap; height: 250px;text-align: left;float: left;padding-left: 5%;}
  	#Social {font-size:15px;font-weight: bold;margin: 1em 10px;flex:70%;}
	#RRHH {
		margin-top: 10%;}
	p.d {
		margin: 0.5em 1em;
	}	
}
@media screen and (max-width: 560px){
	h2.SerTitulosR, h2.SerTitulos{margin-left: 15%;}
ul.SerDescripR,p.SerDescripR,ul.SerDescrip  {margin-left: 20%;}
	
	header {
		padding: 0px;
	}
	#AMdescrip {
  margin-left: 3em;
	}
	#TitleSquare {
		height: 550px;
	}
	#AMtitle2 {
		font-size: 1.6em;
	}
	#Menu,#ContactButton {margin: 10px 3px;font-size: 0.6em;padding: 17px 6px;}
	#AMLogo1 {
		width: 60px;
		margin-top: 5px;
		margin-left: 5px;
	}
	#Contact {clear: left; margin-left: 22%;width: 10em;}
	#ContactDescrip {margin: 16% 0em;margin-bottom: 15%; width:50%}
	#FormSquare{height: 350px;}
	footer {height: 500px}
	#RedesSociales {
		padding: 0px;
    width: 80%;
		justify-content: center;
		align-content: center;
		margin: 0px 18%;}
	

}
@media screen and (max-width: 480px){
		#AMlogo2{width: 250px;margin: 0px 15%;float: left; margin-top: 20%; margin-bottom: 10%;}
		#AMtitle2 {font-size: 1.5em;width: 100%;margin: 0 auto; margin-bottom:20px}
    #AMtitle1 {display: none;}
	#TitleSquare {
		height: 700px;
	}
		h2.SerTitulosR, h2.SerTitulos{margin-left: 10%;}
ul.SerDescripR,p.SerDescripR,ul.SerDescrip  {margin-left: 15%;}
	#Contact{margin-left: 15%;}
	#RedesSociales{width: 100%;
		margin: 0px;
		padding-left: 15%;
	
}
}

@media screen and (max-width: 320px){
	#AMLogo1 {
		display: none;
	}
	header, #HeaderSquare {
		height: 50px;
		padding: 0px;
	}
	#ContactButton, #Menu {
		font-size: 8px;
		padding: 10px 5px;
	}
	
	#CuerpoSquare {
		width: 100%;
	}
	#AMlogo2 {
		float: none;
		margin: 1em 5em;
		width: 50%;
	}
	#AMdescrip{
		margin: 1em 2em;
		font-size: 100%
	}
	
	#Servicios{
		width: 100%;
		padding: 0px;
		font-size: 2em;
		margin-bottom: 1em;
	}
	.IconS{
		width: 20px;
		height: 20px;
		padding: 5px;
		font-size: 15px;
		margin-left: 1em;
	}
	h2.SerTitulos,h2.SerTitulosR, p.SerDescrip, p.SerDescripR, ul.SerDescrip, ul.SerDescripR{	
	 font-size: 80%;
		margin: 0px auto;
		margin-bottom: 20px;
	}
	
	#Contact {
    margin: 0px 5%;;
		width: 80%;
	}
	
	#RedesSociales{
		width: 100%;
		padding: 0px;
		margin: 0px auto;
		
	}
	.ficon {
		width: 40px;
		margin-left: 10%;
		
	}
	
	#Social {
		font-size: 70%;
		margin: 15px 0px;;
		
	}
	
	footer{
		height: 560px;
		
	}