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

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

*,
*::before,
*::after {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

:root {
	--background: rgba(255,255,255,1);
	--famatel-red: rgba(239,70,42,1);
	--famatel-primary-grey: rgba(145,150,152,1);
	--famatel-secondary-grey: rgba(216,217,218,1);
	--famatel-black: rgba(35,31,32,1);
	--famatel-red-semi: rgba(239,70,42,.8);
	
	/*font sizes*/
	--font-xxxs: 0.625rem; /*10px*/
	--font-xxs: 0.875rem; /*14px*/
	--font-xs: 1.125rem; /*18px*/
	--font-sm: 1.5rem; /*24px*/
	--font-md: 1.875rem; /*30px*/
	--font-lg: 2.4375rem; /*39px*/
	
	--nav-links:.9rem;
	
	/*fonts*/
	--heading-font: 'Roboto', sans-serif;
	--body-font: 'Roboto', sans-serif;
	
	/*global sizes*/
	--max-content-width:1200px;
	--section-vertical-padding:3.75rem;
}

/*HTML defaults*/
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--body-font);
	text-rendering:optimizelegibility;
	font-weight:300;
	background-color:var(--famatel-primary-grey);
	margin:0;
	line-height:1.5;
	min-width:375px;
  overflow-x:hidden;
}

.upper {
	text-transform: uppercase;
}

.hidden {
	display:none;
}

.container {
	max-width: var(--max-content-width);
	margin:0 auto;
	padding-left:2rem;
	padding-right:2rem;
}

@media screen and (min-width:1200px) {
	
	.container {
		padding-left:0rem;
		padding-right:0rem;
	}
	
}

/*Global classes*/

:target:before {
    content: "";
    display: block;
    height: 120px;
    margin: -120px 0 0;
}

.section-heading {
	text-transform:uppercase;
	font-size:var(--font-lg);
	font-weight:300;
}

a:visited, a:link {
	color:var(--famatel-black);
}

a:hover {
	color:var(--famatel-black);
}

/* Utility classes*/
.black {
	color:var(--famatel-black);
}

.red {
	color:var(--famatel-red);
}

bold {
	font-weight:600;
}

.space-after {
	margin-bottom:2rem;
}

.space-after-small {
	margin-bottom:1rem;
}

.space-before {
	margin-top:2rem;
}

.space-before-small {
	margin-top:1rem;
}

.overline {
	padding-top:1rem;
	border-top:1px solid var(--famatel-secondary-grey);
}

.highlight {
	display:inline-block;
	color:var(--famatel-red);
	font-weight:400;
}

a.cta {
  background-color:var(--famatel-black);
  color:white;
  text-decoration:none;
  padding:.7rem 1.3rem;
}

a.cta:hover {
  background-color:var(--famatel-red);
}

#scrollTop {
	position:fixed;
	background:var(--famatel-black);
	border:none;
	color:white;
	width:120px;
	height:40px;
	bottom:6rem;
	right:-60px;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items: center;
	text-decoration:none;
	font-size:.8rem;
	outline:1px solid rgba(255,255,255,0.5);
	transform: rotate(-90deg);
	outline-offset: -2px;
	opacity:0;
	transition:opacity .3s ease-out, right .3s ease-out, outline-offset .3s ease-out, background .3s ease-out;
}

#scrollTop:hover {
	outline-offset: -5px;
	background-color:var(--famatel-red);
}


/*Buttons*/
.btn-cta {
	border:1px solid var(--famatel-red);
	padding:.5rem 6rem .5rem 1rem;
	display:inline-block;
	text-decoration:none;
	background:url(/images/arrow-r_red.svg) right 15px center no-repeat;
	transition:background .3s ease-out;
}

.btn-cta:hover {
	
	background:var(--famatel-red) url(/images/arrow-r.svg) right 5px center no-repeat;
	color:white;
}