body {
	color:#888;
	background-color: white;
}
h1,h2,h3,h4,h5,h6 {
	color:rgb(21, 81, 154);
	font-weight: bold;
	color:white;
}
p, a, li {
	font-size: 1.5rem;
	color:#888;
}
a {
	text-decoration: none;
}
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: rgb(21, 81, 154);
    --bs-btn-border-color: rgb(21, 81, 154);
}
.btn-warning {
	--bs-btn-color: #191462;
	--bs-btn-active-bg:#f9ce4b;
}

nav .container-fluid {
    -webkit-animation-delay: 2s;
    animation-delay: 2s; 
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
.navbar {
	--bs-nav-link-font-size: 1rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1rem;
}
.navbar-brand:visited,
.navbar-brand,
.navbar-brand:active {
	color:#2061a2;
}
.navbar a {
	color:#2061a2;
}

.nav-link:visited, .dropdown-item:visited {
    color:#2061a2;
}
.nav-link, .dropdown-item {
	font-weight: 500;
    color:#2061a2;
    cursor: pointer;
}
.nav-link:hover, .dropdown-item:hover {
    color:white;
    background-color: #2061a2;
}
.nav-link:active, .dropdown-item:active {
    color:#eee;
}




#about,
#portfolio,
#contact,
#footer {
	scroll-margin-top: 55px;        
}
#menuBtn svg {
	position:absolute;
	top: 66px;
	left: 20px;
	width: 40px;
	height: 40px;
}
.nav-control, .nav-control-top {
    position: absolute;
    top: 20px;
    right: 20px;
}
.nav-control-top {
	top: 80px;
}
.bi-arrow-up-square {
	/*position:absolute;
	top: 80px;
	right: 70px;*/
	width: 40px;
	height: 40px;
}
.bi-arrow-down-square{
	/*position:absolute;
	top: 80px;
	right: 10px;*/
	width: 40px;
	height: 40px;
}
.bi-arrow-left-short {
	position:absolute;
	top: 50%;
	left: 10px;
	width: 60px;
	height: 60px;
}
.bi-arrow-right-short {
	position:absolute;
	top: 50%;
	right: 10px;
	width: 60px;
	height: 60px;
}


.panel-heading {
	position: relative;
	/*background: linear-gradient(180deg,rgb(0, 6, 26) 0%, rgb(60, 119, 197) 100%);	*/
	/*text-align: center;*/
	/*padding-top:2rem;*/
	height:5rem;
}
.panel-heading h1 {
	color: white;
	padding-top: 1.5rem;
	padding-left: 1rem;
	font-size: 1.5rem;
}
.panel-body {
    position: relative;
	/*clip-path: polygon(0px 0px, 50% 20px, 100% 0px, 100% 100%, 50% 100%, 0px 100%);*/
	/*margin: -20px 0 0;*/
	margin: 0;
}
.panel-body p {
	font-size: 1rem;
}

@media (min-width: 576px) {
	.panel-body p {
		font-size: 1.5rem;
	}		
}

@media (min-width: 768px){
	.panel-heading h1 {
		font-size: 2rem;
	}
}

@media (min-width: 996px) {
	.panel-body p {
		font-size: 2rem;
	}		
}
#img1 {    
	padding-top:0;
	margin-top: 0;
	background-image: url("../img/bg7.jpg");   
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
	height: 100vh;  
	width: 100%;
	max-width: 150%;
	-webkit-animation-delay: 0s;
	animation-delay: 0s; 		
	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	animation-iteration-count: infinite;
  }   
#background-video {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	opacity:.75;
}
#home {
	position:relative;
	text-align: center;
	background-color: rgba(1, 8, 32, 1);
	/*background: url("../img/bg7.jpg") no-repeat center bottom;
	background-size: cover;
	background-color: rgba(11, 23, 61, 1);
	background-blend-mode: multiply;*/
    padding-top: 60vh;
	min-height:100vh;
}
#home h1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; 		
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
#home h3 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; 		
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
#home a {
    -webkit-animation-delay: 3s;
    animation-delay: 3s; 		
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}



#about {
	position:relative;
	background-color: rgba(1, 8, 32, .96);
	/*background: url("../img/bg7.jpg") no-repeat center bottom;
	background-size: cover;
	background-color: rgb(74, 25, 5);
	background-blend-mode: multiply;
	min-height:calc(100vh - 58px);*/
}
#about .panel-body {
/*	min-height: calc(100% - 200px);  /* Fallback for browsers do NOT support vh unit */
/*	min-height: calc(100vh - 200px); /* These two lines are counted as one :-)       */
/*	display: flex;
	align-items: center;*/
	padding: 0rem 0rem 3rem;
}
#about p {
	color: #888;
	/*font-size: calc(1.75 * (1vw + .9vh));*/
	padding: 0 .5rem;
}
#about .btn {
	margin-top: 1rem;
}
#about li {
	font-size: 1rem;
	margin: .75rem 0;
}

@media(min-width:450px) {
	#about li {
		font-size: 1rem;
	}
}
@media(min-width:576px) {
	#about li {
		font-size: 1.25rem;
	}
}
@media(min-width:768px) {
	#about li {
		font-size: 1.75rem;
	}
}

#portfolio {
	position:relative;
	background-color: rgb(137 115 36 / 96%);
	background-color: #bbbbbbee;
	/*background: url("../img/bg7.jpg") no-repeat center bottom;
	background-size: cover;
	background-color: rgb(8, 48, 48);
	background-blend-mode: multiply;*/
	/*min-height: calc(100vh - 58px);*/
}
#portfolio .panel-heading {
	margin-bottom: 0;
}
#portfolio .port-desc {
	margin: 0 auto;
	width: 100%;
	max-width: 900px;
	/*max-width: 1200px;*/
	/*background-color: rgba(0, 56, 59, 1);*/
	/*min-height: calc(100vh - 140px);*/
}

#portfolio .website-img {
	width: 95%;
	max-width: 900px;
	margin: 0 auto;
	background-color: rgb(0, 0, 0, 10%);
}
#portfolio h4 {
	margin: 1.5rem 0 .5rem;
}
#portfolio ul {
	/*padding: 0 15% 1rem 23%;*/
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem 0 0 25%;
	/*background-color: #232b3287;*/
}
#portfolio ul {
	height: 10rem;
}
#portfolio li {
	font-size: calc(4 * .95vw);
	color: white;
	/*color: rgb(60, 119, 197);*/
	list-style-image: url("../img/favicon.png");
}
#portfolio .btn-div {
	/*background-color: #232b3287;*/
}
#portfolio .btn {
	border-radius: 50px;
	margin-top: 1rem;
	/*
	display: block;
	margin: 1.75rem auto 1.5rem;
	width: 100%;
	max-width: 900px;
	font-size: 1rem;
	*/
}
@media(min-width:450px) {
	#portfolio ul {
		height: 14rem;
	}
}
@media(min-width:576px) {
	#portfolio ul {	
		height: 16rem;
	}
}
@media(min-width:768px) {
	#portfolio ul {	
		height: 18rem;
	}
	#portfolio li {		
		font-size: 2rem;
	}
}


#contact {
	position:relative;
	background-color: #bbbbbbee;
	/*min-height: calc(100vh - 58px);*/
}

#contact .panel-body {
	/*min-height: calc(100% - 200px);  /* Fallback for browsers do NOT support vh unit
	min-height: calc(100vh - 200px); /* These two lines are counted as one :-)       
	display: flex;
	align-items: center;*/
}

#contact .container {
	position:relative;
	margin: 0 auto;
	padding:1rem;
	color: #d8dfd7;
	background-color: #efefef;
}

#contact .container h1 {
	color:rgb(21, 81, 154);
	font-weight: 300;
	margin: 0;
}

.contact-privacy {
	font-size: 1rem;
}

#contact .form-control {
	color: rgb(60, 119, 197);
}

#contact ul {
	list-style-type: none;
}

#contact ul li {
	text-align: start;
	color: red;
}

#contactForm #company {
	display:none;
}

@media(min-width:576px) {
	#contact .container {
		padding:1rem 3rem 3rem;
		background-color: transparent;
	}
	#contact form {
		padding:1.5rem;
		background-color: #efefef;
		border: darkgray 1px solid;
	}
	#contact .form-control {
		font-size: 1.25rem;
	}
}

@media(min-width:992px) {
	#contact .container {
		padding:1rem 6rem 6rem;
	}
	#contact .form-control {
		font-size: 1.5rem;
	}
}

@media(min-width:1200px) {
	#contact .container {
		padding:3rem 12rem;
	}
}
@media(min-width:1200px) {
	#contact .container {
		padding:3rem 15rem;
	}
	#contact .form-control {
		font-size: 1.5rem;
	}
}


#footer {
	position:relative;
	text-align: center;
	color: rgb(11, 23, 61);
	background-color: rgba(1, 8, 32, .96);
	padding-top: 4rem;
	min-height:calc(100vh - 58px);
}
#footer .text-muted {
	color:rgb(21, 81, 154)!important;
}

@media(min-width:500px) {

}

.swiper {
	width: 100%;
	height: 100%;
  }

  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background:transparent;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	position: relative;
  }	

  .swiper-pagination-bullet {
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	font-size: 1rem;
	color: #fff;
	opacity: 1;
	background: rgba(0, 0, 0, 0.2);
  }

  .swiper-pagination-bullet-active {
	color: #191462;
	background: #ffc107;
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown; 
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    }
    }
    @keyframes slideInDown {
    0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    }
  } 
  .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInUp {
    0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    visibility: hidden;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
    }
    }
    @keyframes slideInUp {
    0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    visibility: hidden;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
  
    }
  } 
  .slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes slideInRight {
    0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    }
    @keyframes slideInRight {
    0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
  }      
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;  
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
    }
    @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;  
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes zoomIn {
    0% {height: 100vh;width:100vw;}
    50% {height: 110vh;width:110vw;}
    100% {height: 100vh;width:100vw;} 
    }
    @keyframes zoomIn {
    0% {height: 100vh;width:100vw;}
    50% {height: 110vh;width:110vw;}
    100% {height: 100vh;width:100vw;} 
  }