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

html,body{
	margin:0px;
	height:100%;
	color:#4c4c4c;
}
a {
	color:#4c4c4c;
}
a:hover {
	color:#000;
	text-decoration:none;
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

/*CONTENEDOR*/
#container {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffcb28+0,ffce3d+100 */
background: #ffcb28; /* Old browsers */
background: -moz-linear-gradient(top, #ffcb28 0%, #ffce3d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffcb28 0%,#ffce3d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffcb28 0%,#ffce3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb28', endColorstr='#ffce3d',GradientType=0 ); /* IE6-9 */

	
	width:100%;
	height:100%;
}
h1 {
	font-family: 'Black Ops One', cursive;
	text-align:left;
	color:#000;
}
/*HEADER*/
header {
	position:relative;
	top:0;
	left:0;
	min-height:60px;
	width:100%;
	padding: 22px 0;
}
#logo {
	float:left;
}
#logo h5 {
	font-weight: 800;
	font-size: 25px;
	letter-spacing: -1px;
	text-transform: uppercase;
	color:#000;
}

#menu {
	float:left;
}
#menu ul {
	text-align:right;
}
#menu ul li {
	display:inline-block;
	padding: 0 8px;
}
section#main-l {
	float:left;
	height:100%;
}
section#main-l img {
	max-width:100%;
	padding: 24px;
	border: solid 2px #000;
}
section#main-r {
	float:right;
	height:100%;
}
section#main-r::before {
	position: absolute;
	content: "";
	background: #363636;
	top: 18vh;
	left: -1px;
	width: 2px;
	height: 50vh;
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}
.wrap {
	padding: 18% 10%;
}

footer#site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding-bottom: 32px;
}
.address {
	width:50%;
	float:left;
}
.fa-map-marker-alt::before {
	padding-right:4px;
}
.social {
	width:50%;
	float:left;
}
.social ul {
	text-align:right;
}
.social ul li {
	display:inline-block;
	padding:0 6px;
}


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width