@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

body, html {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
}

.startingBox {
  height: 100vh;
  display: block;
  position: relative;
}

.startingBox::after{
	content:"";
	background-image: url("../img/landing.jpg");
	background-size:cover;
	background-attachment: fixed;
	opacity:0.4;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;  
}
.startingBox img{
	max-width:350px;
}
	
.container-fluid{
	overflow:hidden;
	padding:0;
}
.circles{
	position:absolute;
	left:calc(50% - 7.5px);
	bottom:1vh;
}
.circle{
	width:15px;
	height:15px;
	border-radius:100%;
	margin:10px auto;
	border:1px solid #fff;
}
@keyframes circle1{
	0%   {background:transparent;}
	30% {background:#ccc;}
}
@keyframes circle2{
	25%   {background:transparent;}
	60% {background:#b3b3b3;}
}
@keyframes circle3{
	55%   {background:transparent;}
	90% {background:#999;}
}
@keyframes circle4{
	0% {color:#999}
	40% {color:transparent;}
	85% {color:transparent;}
	100% {color:#999;}
}
.circle1{
	animation:circle1 3s infinite;
}
.circle2{
	animation:circle2 3s infinite;
}
.circle3{
	animation:circle3 3s infinite;
}
.circle4{
	color:transparent;
	animation:circle4 3s infinite;
}

p{
	margin-bottom:0 !important;
}

.presentation-icon{
	font-size:70px;
}
.presentation-description h4{
	font-size:18px;
	margin-bottom:5px;
}
.presentation-description p{
	font-size:12px;
}

.show-demo{
	border:3px solid #000;
	width:300px;
	margin:0 auto;
	text-align:center;
	text-transform:uppercase;
	border-radius:30px;
	padding:10px 20px;
	font-weight:600;
	transition:all .2s ease-in;
}
.show-demo:hover{
	color:#fff;
	background:#000;
}
.line{
	height:0.8px;
	background:gray;
	border-radius:100%;
}

a:hover,a{
	color:inherit;
	text-decoration:none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFFF80;
}
.yellow-border{
	border-bottom:5px solid #FFFF80;
}
.facebook,.instagram{
	transition:all .2s ease-in;
}
.facebook:hover{
	color:#4267B2;
}
.instagram:hover{
	color:#C13584;
}