/*************************
		GENERAL
**************************/
/*

blue: #2587c8
dark : #0232323
*/
html { scroll-behavior: smooth; }
body { padding: 0px; margin: 0px; font-family: 'Open Sans', sans-serif; font-size: 18px; }

#main-container { padding-top: 69px; }

.section{ padding-top: 30px; padding-bottom: 30px; }
.section.fullpage-section { height: 100%; min-height: 100vh; }

.section.fullpage-section .container { min-height: calc(100vh - 80px); }
.section.fullpage-section .container .row { min-height: calc(100vh - 80px); }
.section.fullpage-section .container .row .img-parallax { min-height: calc(100vh - 80px); }

.fullpage-section .container { min-height: 100vh; }
.fullpage-section .container .row { min-height: 100vh; }
.fullpage-section .container .row .img-parallax { min-height: 100vh; }

#page-title { background: #94dae8; text-align: center; }
#page-title h1 { padding: 10px 0; }


.white { color: #fff; }

/* headers */
h1 {text-transform: uppercase;font-weight: 700;font-size: 2.2rem;}

/* background */
.bg-gray { background-color: #232323; color: #fff; }
.bg-lightgray { background-color: #ebe9e9; }
.img-parallax { background: no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100% auto; }
.img-parallax.img-bottom { background-position: bottom center; }
.img-parallax.img-center { background-position: center center; }

/* A REF */
a{ color: #01bce1; }

/* buttons */
.primary-btn { background-color: #fff; color: #232323; border: 1px solid #fff; text-transform: uppercase; font-weight: 700; min-width: 200px; font-size: 20px; }
.primary-btn:hover { background: #232323; color: #fff; }

/* inputs */
input[type="text"], input[type="email"], select, textarea { width: 100%; border: 2px solid #d1d1d1; border-radius: 3px; padding: 5px 15px; } 
textarea{ min-height: 120px; }
.btn-dark { background: #232323; min-width: 150px; font-weight: 600; border-radius: 3px; } 

.text-center .g-recaptcha { margin: 0 auto; width: 300px; }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #a4a4a4; }
::-moz-placeholder { /* Firefox 19+ */ color: #a4a4a4; }
:-ms-input-placeholder { /* IE 10+ */ color: #a4a4a4; }
:-moz-placeholder { /* Firefox 18- */ color: #a4a4a4; }


/* FORM ALERT */
form .alert { text-align: left; }
form .alert ul { list-style: none; padding-left: 15px; font-size: 0.9em; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {
	h1 { font-size: 2.0rem; }
}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}

@media screen and (max-height: 699.98px) {
	.img-parallax { background-size: 80% auto; }	
}

/*************************
		HEADER TOP
**************************/
#header-top{ padding: 5px 0; font-size: 17px; }

/*************************
		MENU
**************************/
#menu { position: fixed; top: 40px; left: 0px; width: 100%; background: #fff; z-index: 999; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; }
#menu.sticky-menu{ top: 0px; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; }
#menu .nav-item .nav-link { font-weight: 600; color: #232323 !important; }
#menu .nav-item.active .nav-link, #menu .nav-item .nav-link { position: relative; }
#menu .nav-item.active .nav-link::before, #menu .nav-item .nav-link::before { position: absolute; content: ""; background: #fff; width: calc(100% - 15px); height: 5px; bottom: 0; }
#menu .nav-item.active .nav-link:before, #menu .nav-item .nav-link:hover:before { background: #232323; }
.navbar-brand img { width: 130px; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {
	#menu .nav-item.active .nav-link, #menu .nav-item .nav-link { font-size: 16px; }
}
@media screen and (max-width: 767.98px) {
	#menu > .container { max-width: 100%; }
	.navbar-light .navbar-toggler{ border-color: #232323; }
	.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(35, 35, 35, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
}


/*************************
		HOMEPAGE
**************************/
#header {  position: relative; z-index: 9; }
#header p {color: rgba(255,255,255,0.5);}

#video { pointer-events: none; }
#video iframe {
	width: 100vw;
	height: calc(100vw / 3.23 + 120px);
	margin-top: -100px;
}

#sub-header { position: relative; margin-top: -100px; }
#sub-header ul {list-style: none;padding-left: 0px;}
#sub-header ul li {display: inline-block;border-right: 1px solid;padding-left: 5px;padding-right: 5px;}
#sub-header ul li:last-child { border: 0px none;}

.hp-section-title { font-weight: bold; line-height: 1; text-transform: uppercase; margin-bottom: 30px; }

.hp-informative-section {}
.hp-informative-section .content { padding-top: 30px; padding-bottom: 30px; }
.hp-informative-section .hp-section-title {}
.hp-informative-section .hp-section-info {}
.hp-informative-section p a {}
.hp-informative-section .contact { font-size: 14px; }
.hp-informative-section .contact img {}
.hp-informative-section .contact a { font-style: normal; }


#homepage-clients .title{ color: rgba(255,255,255,0.5); }
#homepage-clients img{ width: 200px; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {
	.img-parallax { background-image: none !important; padding-top: 30px; padding-bottom: 30px; min-height: 0 !important; }
}
@media screen and (max-width: 575.98px) {
	#video { pointer-events: auto; }
}


/*************************
		TEAM
**************************/
#informative-header{ color: rgba(255,255,255,0.5); }
#team .card { overflow: hidden; cursor: pointer; }
#team .card .card-body { position: absolute; bottom: -100px; background: #94dae8; width: 100%; padding: 15px 5px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
#team .card:hover .card-body{ bottom: 0px; } 
#team .card .card-body h5 { text-align: center; font-weight: 600; margin-bottom: 0; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}


/*************************
		CLIENTS
**************************/
#clients img { max-width: 200px; width: 100% }
#clients .show-client {}
#clients .transparent-client { filter: grayscale(100%); opacity: 0.2; }
#clients .hide-client {display: none;}
#clients .custom-btn { background: none; border: none; font-weight: 600; text-decoration: underline; font-size: 20px; cursor: pointer; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}


/*************************
		OPEN JOBS
**************************/
#jobs-contact-form {}
#jobs-contact-form ul { list-style: disclosure-closed; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}


/*************************
		APPS & SOFTWARE
**************************/
#apps-software-container {}
#apps-software-container .info { font-size: 14px; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}


/*************************
		FOOTER
**************************/
#footer-top{ background: url("../images/HI-Dev-Footer-Top-bg.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; color: #fff; }
#footer-top .sub-title{ font-size: 20px; }

#footer-bottom { font-size: 16px; }
#footer-bottom .title { font-weight: 600; }
#footer-bottom .link { color: #01bce1; font-weight: 600; }
#footer-bottom .menu ul { padding-left: 0; list-style: none; }
#footer-bottom .menu ul a { font-weight: 600; color: #000; }
#footer-bottom .social-icons .fab { color: #000; font-size: 40px; }
#footer-bottom .address { font-weight: 600; }
#footer-bottom .copyright { font-size: 12px; }

@media screen and (max-width: 1199.98px) {}
@media screen and (max-width: 991.98px) {}
@media screen and (max-width: 767.98px) {}
@media screen and (max-width: 575.98px) {}