@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Oswald:300,400,500,600,700');

:root {
  --cta-red: #db2a24;
  --text-color:#777777;
  --heading-color:#333333;
}

body.preload *{
	animation-duration: 0s !important;
	-webkit-animation-duration: 0s !important;
	transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}

body::after{
	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
}

/* HEADER */
@media(min-width:900px) {
	header {
		background-color: #fff;
		-webkit-transition: all 0.7s ease;
		-moz-transition: all 0.7s ease;
		transition: all 0.7s ease;
		border-bottom: #fff solid 1px;
		z-index: 300;
	}

	header img, header .header-cta {
		-webkit-transition: all 0.8s ease !important;
		-moz-transition: all 0.8s ease !important;
		transition: all 0.8s ease !important;
	}

	header.sticky{
		position: fixed;
		border-bottom: #dcdcdc solid 1px;
	}

	header.sticky img {
		width: 60% !important;
	}

	header.sticky .header-cta {
		padding-top: 0.2rem !important;
		padding-bottom: 0.2rem !important;
	}
}

.nav a {
	font-family: 'Oswald', sans-serif;
	font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #212121;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    margin-left: 15px;
    margin-right: 15px;
    cursor:pointer;
}

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

.nav-anchor{
	display: block;
  	height: 1px;   /* equal to the header height */
  	margin-top: -1px;  /* negative margin equal to the header height */
  	visibility: hidden;
}



/* BOUNCE BTN */
.bounce-btn {
	background: var(--cta-red);
    color: #fff;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    text-transform: uppercase;
    min-width: 120px;
    text-align: center;
    line-height: 50px;
    transition: all 0.3s ease-in-out;
}

.bounce-btn:hover {
	color: #fff;
}

.btn-bounce-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.btn-bounce-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #212121;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.btn-bounce-to-right:hover:before, .btn-bounce-to-right:focus:before, .btn-bounce-to-right:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}




/*SOCIALS*/
section #socials {
  text-align: center;
  transform: translatez(0);
}

section #socials h2 {
    margin-top: 1rem;
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
}

section #socials li {
  width: 60px;
  height: 70px;
  display: inline-block;
  margin: 20px;
  list-style: none;
}

section #socials li div {
  width: 60px;
  height: 60px;
  color: #74d4b3;
  font-size: 2rem;
  text-align: center;
  line-height: 60px;
  background-color: #fff;
  transition: all 0.5s ease;
  border-radius: 3px;
}

section #socials li a {
  color: var(--cta-red);
}

section #socials li div:hover {
  transform: rotate(360deg);
  border-radius: 50px;
}



#socials .youtube:hover {
    background-color: #CD201F;
}

#socials .instagram:hover {
    background-color: #E4405F;
}

#socials .facebook:hover {
    background-color: #1877F2;
}

#socials .twitter:hover {
    background-color: #1DA1F2;
}

#socials .youtube:hover i, #socials .instagram:hover i, #socials .facebook:hover i, #socials .twitter:hover i {
    color: #fff !important;
}

footer {
    margin-top: 4rem;
}