/*-----Header Style-----*/
@media screen and (max-width: 500px) {
	header{
		overflow: hidden;
	}
	#smallNavBtn {
    display: block;
    border: unset;
    float: left;
    background: unset;
    margin: 10px 0 0 10px;
    padding: 0px 5px;
	}
	#smallNavBtn img{
	 	width: 20px;
	}
	:focus{
	 	outline: solid 2px #06a;
	}
	#smallNavBtn:focus{
	 	outline-color: #06a0;
	}
	#headWrap{
		position: fixed;
		z-index: 3;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 1px 5px #ddd;
		transition: padding 0.4s;
	}
	#headWrap #info{
		float: right;
		border-bottom: solid 1px #ccc;
		width: fit-content;
		padding: 5px 15px 0 0;
	}
	#info a{
		font-size: 12px;
		letter-spacing: 1px;
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
	}
	#info a:hover{
		color: #06a;
	}
	#mobileNav{
	position: fixed;
	background: #0066aaf2;
	width: 45vw;
	height: 100vh;
	margin-top: 34px;
	display: none;
	}
	#mNavWrap{
		margin-top: 15px;
	}
	#mobileNav ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	#mobileNav li{
		border-bottom: solid 1px #fff4;
		padding: 15px 0 15px 15%;
	}
	#sublist{
		margin-top: -10px !important;
	}
	#sublist li{
	padding: 0 0 0 25%;
	border: unset;
	}
	#nav{
		display: none;
	}
	#headWrap .menu{
		text-decoration: none;
		font-family: century gothic;
		text-transform: uppercase;
		color: #fff;
		letter-spacing: 2px;
		font-weight: bold;
	}
	#logoWrap{
		width: fit-content;
		margin: auto;
	}
	#logo{
		height: 80px;
		transition: 0.4s;
	}
}
@media screen and (min-width: 501px) {
	#headWrap{
		position: fixed;
		z-index: 3;
		width: 100%;
		height: 13%;
		background-color: #fff;
		box-shadow: 0px 1px 5px #ddd;
		transition: padding 0.2s;
		padding-bottom: 30px;
	}
	#headWrap #info{
		border-bottom: solid 1px #ccc;
		margin: 0 40px 0 83%;
		text-align: right;
		padding-top: 4px;
		transition: top 0.2s;
		position: relative;
		top: 5px;
	}
	#logo{
	    height: 110px;
	}
	#info a{
		font-size: 12px;
		letter-spacing: 1px;
		font-family: sans-serif;
		text-decoration: none;
		color: #000;
	}
	#info a:hover{
		color: #06a;
	}
	#headWrap nav{
		text-align: right;
		margin-right: 100px;
		position: relative;
		top: 0px;
		transition: top 0.2s;
	}
	#mobileNav{
		display: none;
	}
	#headWrap .menu{
		text-decoration: none;
		font-family: century gothic;
		color: #555;
		font-size: 16px;
		letter-spacing: 2px;
		font-weight: bold;
		margin-left: 50px;
		padding: 5px 10px 33px 10px;
		position: relative;
		top: 30px;
		border: 1px solid #fff0;
	}
	nav a img{
		filter: grayscale(100%);
	}
	#headWrap .menu:hover{
		color: #06a;
	}
	.serviciosBtn a:hover img{
		filter: grayscale(0%);
	}
	.serviciosBtn{
		display: contents;
		position: relative;
	}
	#dropdown{
		display: none;
	}
	.serviciosBtn:hover #dropdown{
		position: absolute;
		top: 430%;
		right: 25%;
		display: block;
		background-color: #fff;
		box-shadow: 2px 2px 5px #ccc;
		width: 130px;
		border-top: 3px solid #06a;
	}
	#arrow{
		transition: 0.4s;
		margin-left: 7px;
	}
	.serviciosBtn:hover #arrow{
		transform: rotate(-90deg);
		transition: 0.4s;
	}
	#dropdown:hover{
		display: content;
	}
	#dropdown a{
		text-decoration: none;
		font-family: century gothic;
		letter-spacing:1px;
		color: #666;
		font-size: 17px;
		font-weight: bold;
		margin: 10px 0 0 15px;
		padding: 8px 60px 8px 0px;
	}
	#dropdown a:hover{
		color: #06a;
		margin-left: 18px;
	}
	#dropdown ul{
		padding: 0px;
	}
	#dropdown li{
		list-style: none;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	#logoWrap{
		float: left;
		position: absolute;
		bottom: 0px;
		margin-left: 40px;
	}
	#logo{
		transition: 0.2s;
	}
	#smallNavBtn{
		display: none;
	}
}
/*-----Footer Style-----*/
@media screen and (max-width: 500px){
	.footWrap{
	background-color: #222;
	font-family: sans-serif;
	color: #fff;
	}
	.fCol{
		width: 100%;
		height: 200px;
		position: relative;
	}
	.social{
		padding: 15px 0 0 40%;
	}
	.face{
		float: left;
		width: 30px;
		height: 30px;
		
		background-image: url(../images/facebook-logo-white.png);
		background-size: 100%;
	}
	.insta{
		width: 30px;
		height: 30px;
		background-image: url(../images/instagram-logo-white.png);
		background-size: 100%;
		margin-left: 50px;
	}
	.face:hover{
		background-image: url(../images/facebook-logo.png); 
	}
	.insta:hover{
		background-image: url(../images/instagram-logo.png);
	}
	.footWrap nav{
		width: 90%;
		margin:auto;
		position: absolute;
		top: -71%;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
	}
	.footWrap nav a{
		color: #fff;
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
	}
	.footWrap .nav2 a{
		font-size: 14px;
	}
	.footWrap a:hover{
		color: #03b1ff;
	}
	.space{
		padding: 0 10px 0 10px;
		color: #fff;
	}
	.footWrap .logoWrap{
		width: fit-content;
		margin: -120px auto 0 auto;
	}
	.contact{
		position: absolute;
		top: 98%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
	}
	.contact img{
		padding-right: 10px;
		width: 20px;
	}
	.cr{
		width: 100%;
		margin-top: -30px;
		padding-bottom: 31px;
		font-size: 12px;
		text-align: center;
	}
	.fCol .logoWrap img{
		width: 70vw;
	}
	.stallion{
		position: absolute;
		bottom: 5px;
		left: 10px;
	}
	.stallion a{
		font-size: 14px;
		text-decoration: none;
		color: #fff !important;
		font-family: sans-serif;
	}
	.stallion a:hover{
		color: #fff;
	}
}
@media screen and (min-width: 501px){
	.footWrap{
	height: 250px;
	background-color: #222;
	font-family: sans-serif;
	color: #fff;
	position: relative;
	}
	.fCol{
		width: 33.3%;
		height: 250px;
		float: right;
		position: relative;
	}
	.social{
		padding: 20px 0 0 20%;
	}
	.face{
		float: left;
		width: 30px;
		height: 30px;
		
		background-image: url(../images/facebook-logo-white.png);
		background-size: 100%;
	}
	.insta{
		width: 30px;
		height: 30px;
		background-image: url(../images/instagram-logo-white.png);
		background-size: 100%;
		margin-left: 50px;
	}
	.face:hover{
		background-image: url(../images/facebook-logo.png); 
	}
	.insta:hover{
		background-image: url(../images/instagram-logo.png);
	}
	.footWrap nav{
		width: fit-content;
		margin:auto;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	.footWrap nav a{
		color: #fff;
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
	}
	.footWrap .nav2 a{
		font-size: 14px;
	}
	.footWrap a:hover{
		color: #03b1ff;
	}
	.space{
		padding: 0 20px 0 20px;
		color: #fff;
	}
	.footWrap .logoWrap{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.fCol .logoWrap img{
		width: 30vw;
	}
	.contact{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
	}
	.contact img{
		padding-right: 10px;
		width: 20px;
	}
	.cr{
		width: 100%;
		font-size: 12px;
		text-align: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
	.stallion{
		position: absolute;
		bottom: 5px;
		left: 10px;
	}
	.stallion a{
		font-size: 14px;
		text-decoration: none;
		color: #fff !important;
		font-family: sans-serif;
	}
	.stallion a:hover{
		color: #fff;
	}
}