@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600,600italic,700italic,800,800italic,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
@import url(https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

/* BASE */

body {
	font-family: 'Open Sans', Helvetica, Arial;
}

.wrapper {
	margin: 0 auto;
	float: left;
	display: block;
	width: 100%;
}

.visuallyhidden {
	display: none;
}

.fa-android {
	color: #7fc719;
}
.fa-apple {
	color: #444;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

/* HEADER */

.topblack { /* black bar for the header*/
	position: relative;
	z-index: 3;
	background: #000;
}
.header {
	position: fixed;
	display: block;
	width: 100%;
	background: #000000;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	z-index: 11;
}
.header-container { /* Contenedor */
	margin: 0 auto;
	display: block;
}
.header-logo { /* Logo */
	display: block;
}
.header-option { /* Call to action */
	float: right;
	padding: 12px 0;
}
.header-option .call-text {
	display: none;
}
.header-option .call-btn {
	padding: 8px 10px;
	color: #FFF;
	font-size: 14px;
	font-weight: 600;
	background: #FF0D62; /* Old browsers */
	border-radius: 6px;
	-webkit-box-shadow: 0px 3px 0px 0px #c01a55;
	-moz-box-shadow: 0px 3px 0px 0px #c01a55;
	box-shadow: 0px 3px 0px 0px #c01a55;
	text-decoration: none;
}

.mainmenu { /* Menu */
	display: block;
	float: right;
}
.mainmenu-container {
	display: block;
	padding: 0;
	margin: 0;
}
.mainmenu-option {
	display: block;
}
.mainmenu-link {
	display: block;
}

/* CONTACT BAR */

.contactbar, .contactbar img {
	display: block;
}

/* PIE DE PAGINA */

.footer {
	display: block;
	width: 100%;
}
.footer-container, .footer-container-m {
	display: block;
	margin: 0 auto;
	font-family: 'Roboto';
	text-align: center;
}

/* fin de este estilo */

@media screen and (min-width: 800px) { /* PARA PANTALLAS GRANDES */

	/* TOP BAR */

	.topbar {
		display: block;
		height: 40px;
		background: #f1f1f1;
	}
	.topbar a {
		text-decoration: none;
		color: #000;
	}
	.topbar-container {
		display: block;
		margin: 0 auto;
		width: 95%;
	}
	.topbar-social {
		float: left;
		display: block;
		margin-top: 4px;
		width: 30%;
	}
	.topbar-social a {
		display: inline-block;
		padding: 5px 8px;
	}
	.topbar-info {
		float: right;
		display: block;
		margin-top: 5px;
		width: 70%;
		text-align: right;
		font-size: 0.95em;
		color: #000;
	}
	.topbar-info-text {
		font-style: normal;
	}
	.topbar-info span {
		display: inline-block;
		padding: 5px 10px;
	}

	/* HEADER */

	.topblack { /* black bar for the header*/
		display: block;
		height: 60px;
		z-index: 3;
		background: #000;
	}
	.header {
		top: 40px;
	}
	.header-container { /* Contenedor */
		width: 95%;
		height: 60px;
	}
	.header-logo { /* Logo */
		float: left;
		width: 200px;
		margin: 18px 0 0 0;
	}
	.header-logo img {
		height: 25px;
	}
	.header-option { /* Call to action */
		display: block;
	}
	.header-option .call-text {
		display: none;
	}
	.header-option .call-btn {
		display: block;
	}

	nav #mostrar {
		display: block !important;
	}
	.button-n {
		display: none;
	}

	.mainmenu-option {
		float: left;
		margin-right: 10px;
		position: relative;
	    vertical-align: top;
		list-style: none;
	}
	.mainmenu-link {
		padding: 14px 7px 19px 7px;
		color: #FFF;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		border-top: 5px solid transparent;
	    -webkit-transition: .2s;
	    -moz-transition: .2s;
	    -o-transition: .2s;
	    -ms-transition: .2s;
	    transition: .2s;
	}
	.mainmenu-link:hover {
		border-top: 5px solid #D50000;
	    -webkit-transition: .2s;
	    -moz-transition: .2s;
	    -o-transition: .2s;
	    -ms-transition: .2s;
	    transition: .2s;
	}

	/* HEADER SCROLL */

	.header.sticky {
		position: fixed;
		display: block;
		top: 0;
		width: 100%;
		height: 50px; 
		background: rgba(0,0,0,.8);
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		z-index: 11;
	}
	.header.sticky .header-container { /* Contenedor */
		margin: 0 auto;
		display: block;
		width: 95%;
		height: 50px;
	}
	.header.sticky .header-logo { /* Logo */
		display: block;
		float: left;
		width: 200px;
		margin: 15px 0 10px 0;
	}
	.header.sticky .header-logo img {
		height: 20px;
	}
	.header.sticky .header-option { /* Call to action */
		display: block;
		float: right;
		padding: 6px 0;
	}
	.header.sticky .header-option .call-text {
		display: inline-block;
		margin-right: 10px;
		color: #FFF;
		font-style: italic;
		font-size: 14px;
	}
	.header.sticky .header-option .call-btn {
		display: inline-block;
	}
	.header.sticky .mainmenu { /* Menu */
		display: none;
	}

	/* CONTACT BAR */

	.contactbar .cb-small {
		display: none;
	}

	/* PIE DE PAGINA */

	.footer {
		float: left;
		background: #e2e2e2;
	}
	.footer-container-m {
		display: none;
	}
	.footer-container {
		width: 95%;
		font-size: 0.95em;
		font-weight: 300;
	}
	.footer-container a, .footer-sub, .footer span {
		display: block;
		margin-bottom: 5px;
		color: #222;
		text-decoration: none;
	}
	.footer-container a:hover {
		text-decoration: underline;
	}
	.footer-column {
		display: inline-block;
		margin-right: 3%;
		padding: 40px 0;
		width: 20.5%;
		text-align: left;
		vertical-align: top;
	}
	.fc-last {
		margin-right: 0;
	}
	.footer .footer-sub {
		font-size: 1.1em;
		font-weight: 500;
	}
	.footer .social {
		display: block;
	}
	.footer .social a {
		float: left;
		margin-right: 15px;
		padding: 5px 0;
		color: #000;
	}
}

@media screen and (max-width: 799px) { /* PARA PANTALLAS PEQUEÑAS */

	/* TOP BAR */

	.topbar {
		display: none;
	}

	/* HEADER */

	.topblack { /* black bar for the header*/
		display: none;
	}

	.header {
		top: 0;
	}
	.header-container { /* Contenedor */
		position: relative;
		display: block;
		z-index: 16;
	}
	.header-logo { /* Logo */
		float: left;
		padding: 16px 0;
	}
	.header-logo img {
		display: block;
		margin-left: 15px;
		height: 15px;
	}
	.header-option { /* Call to action */
		display: none;
	}
	.header-option .call-text {
		display: none;
	}
	.header-option .call-btn {
		display: none;
	}

	.button-n {
		float: right;
		padding: 14px 20px;
		color: #FFF;
		z-index: 17;
		cursor: pointer;
		background: #151515;
	}

	.mainmenu {
		float: left;
		display: block;
		width: 100%;
	}
	.mainmenu-container {
		border-top: 2px solid #FF0D62;
		background: #151515;
	}
	.mainmenu-option {
		display: block;
		text-align: center;
	}
	.mainmenu-link {
		padding: 12px 0;
		color: #FFF;
		font-size: 1em;
		text-decoration: none;
	}
	.mainmenu-link:hover, .mainmenu-link:focus {
		background: #202020;
	}

	/* CONTACT BAR */

	.contactbar .cb-big {
		display: none;
	}

	/* PIE DE PAGINA */

	.footer {
		float: left;
		background: #000;
	}
	.footer-container-m {
		width: 100%;
		font-size: 0.95em;
		font-weight: 300;
	}
	.footer-container-m .brand {
		display: block;
		padding: 20px 0;
	}
	.footer-container-m .brand img {
		margin: 0 auto;
		display: block;
		width: 150px;
	}
	.footer-container-m .social {
		display: block;
	}
	.footer-container-m .social a {
		margin: 0 3px;
		display: inline-block;
		width: 20px;
		height: 20px;
		padding: 10px;
		color: #000;
		border-radius: 50px;
		background: #FFF;
	}
	.footer-container-m .call-f {
		display: block;
		margin: 5px 0 0 0;
		padding: 5px 0;
		font-size: 2em;
		font-weight: 400;
		color: #FFF;
		text-decoration: none;
	}
	.footer-container-m .menu {
		display: block;
		font-size: 1em;
		font-weight: 400;
	}
	.footer-container-m .menu a  {
		display: inline-block;
		margin: 15px;
		color: #FFF;
		text-decoration: none;
	}
	.footer-container {
		display: none;
	}
}