@keyframes transitionIn{
	from{
		opacity: 0;
		transform: rotateX(-5deg);
	}
	to{
		opacity: 1;
		transform: rotateX(0);
	}


}
html{
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
	background-color: #f3f3f3;
	margin: 0 auto;
}

.gallery {
		margin: 10px 40px;
}

.gallery img {
		width: 200px;
		height: 50px;
		transition: 1s;
		padding: 5px;
}

.gallery img:hover {
		filter: drop-shadow(4px 4px 6px gray);
		transform: scale(1.1);
}

*, ::after, ::before {
    box-sizing:inherit!important;
	padding:0px;
	text-decoration: none;
	font-family: Hind, sans-serif !important;
}

/*--- Nav Scrolling Offset for one page nesting theme--*/
.offset:before{
	height: 62px;
	margin-top: -62px;
	content: "";
	display: block;
}
/*--- extra bootstrap column padding (sizing and modification of bootstrap theme) 1re = 16px --*/
[class*="col-"]{
	padding: 1rem;
}

/*============ Navigation ============*/
.navbar {
	padding: 0rem 0rem !important;
	text-transform: uppercase;
	font-size: .6rem !important;
	font-weight: 700;
	letter-spacing: .05rem;
	background-color: rgba(255, 255, 255, .9)!important;
}

.navbar-nav{
	display: inline !important;
}

.navbar-brand{
	margin-right: .1rem !important;
}

.navbar-brand img {
	padding: 0rem 1rem 0rem 1rem;
	height: 2.6rem;
}

.navbar-nav .nav-link{
	color:#062038 !important;
	padding-top: .8rem;
}

.navbar .social{
	color:#062038 !important;
	display: inline-block !important;
    width: 15px !important;
    padding: 11px 10px;
}
.navbar-nav .social li{
	padding-right: .01rem;
}


.nav-item {
	width: 100vw;
	padding-left: .75rem;
	border-bottom: 1px solid #E0E0E0;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{
	color:#062038;
}

.svg-inline--fa.fa-w-14{
	color:#062038 !important;
	font-size: 1.6rem;
}
.navbar-nav li{
	padding-right: .02rem;
}



.container-fluid {
    width: 100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
}
/*============ LANDING PAGE ============*/
.microphone-banner{
	background-image: url("../packaging/package-heading.png");
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	-webkit-transform: translateZ(0);
					transform: translateZ(0);
	will-change: transform;
	}
}
.landing {
  position: relative;
  width: 100%;
  height: 240vh;
  display: table;
  background: #E9ECEF;
  z-index: -1;
}
.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-inner {
  background-image: url("../homepage/main-header.jpg");
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

.main {
	width: 100%;
	height: 90vh;
	display: table;
}

.new-intro {
	width:100%;
	max-width:100%;
	position: absolute;
	top: 40%;
	z-index: 1;
}
.new-intro h1 {
	margin: auto;
	width: 100%;
	word-wrap:break-word;
	max-width: 500px;
	font-size: 30px;
	color: #fff;
	text-align:center;
	text-shadow: 2px 2px 8px #111;
	padding-bottom:20px
}

.btn-outline-light {
    font-size: 22px !important;
	color: #fff !important;
	background-color: transparent !important;
	text-align:center !important;
	background-image: none !important;
    border-color: #f8f9fa !important;
	text-shadow: 2px 2px 8px #111;
}

.btn-outline-light:hover {
	color: #fff !important;
    background-color: #3ccfd3 !important;
    border-color: #3ccfd3 !important;
	text-shadow: none;
}

/*============ LANDING PAGE Content ============*/
.home-container{
	margin-top: 15px;
	max-width:1800px;
	margin: 0 auto;
	background-image: none;

}
.featured-work{

	overflow: hidden;
	max-width: 810px;
	padding: 65px 20px;
	margin: auto;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.wrapper{
	max-width: 1200px;
	min-width: 400px;
	width: 100%;
	margin-bottom: 10px;
	padding-bottom: 35px;

}

article {
	padding: 40px 0px 0px 0px;
	width: 85%;
	max-width: 335px;
	text-align: center;
	margin: 0 auto;
	flex-wrap: wrap;
	align-self: center;
}
h3 {
	font-size: 23px;
	color: #000;
	text-align: center;
}
h4 {
	font-size: 20px;
	color: #000;
	text-align: left;
	line-height: 1;
	margin: 10px auto;
	padding: 10px 0px 10px 0px;
}
.underline{
	border-bottom: 2px solid currentColor;
  line-height: 0.35;
}

.heading-content{
font-family: Hind, sans-serif !important;
font-size: 18px;
background-color: #fff !important;
position: relative;
width: 100%;
height: auto;
max-width: 364px;
margin: 0 auto;
}

.banner-content {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 364px;
	margin: 0 auto;
}

.banner-pic {
	padding: 20px 0px 20px 0px;
	width: 100%;
	max-width: 364px;
	vertical-align: top;
	margin: 0 auto;
	flex-wrap: wrap;
	align-self: center;
}

.projects-slide {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 345px;
}

.projects-slide a img {
	height: auto;
	max-width: 335px;
	margin: 0 auto;
}
.text-block{
	position:absolute;
	width: 100%;
	max-width: 375px;
	bottom: 0px;
	color:#fff;
	padding: 10px 0px;
	background-color: rgba(0,0,0,0.5);
}
.text-block h5 {
	margin: 0px;
	padding: 0 10px;
	text-align: left;
	font-size: 24px;
	color:#fff;
}
.clear{
	clear: both;
}

#panel, #flip {
	cursor: pointer;
	padding: 2px;


}

#flip{
	max-width: 1024px;
    width: 100%;
    min-width: 300px;
	border: solid 1px #c3c3c3;
	margin: 0 auto;
}
#panel {
	padding:10px;
	display:none;
}

/*============ Contact Form style ============*/


.contact{
	overflow: hidden;
	max-width: 810px;
	padding: 5px 20px;
	margin: auto;
	text-align: left;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 10px;
}

label{
	display:block;
	font-size: 1.5em;
	margin-bottom: 1em
}

form input{
	width: 300px;
	display:block;
	font-size:.65em;
	padding: .75em;

}
textarea{
	width: 300px;
	display:block;
	font-size:.55em;
	padding: .75em;
	height: 8em
}

/*============ Portfolio pages content ============*/
.home-container{
	max-width:1800px;
	margin: 0 auto;
	background-image: none;

}

.heading-container{
	max-width:1800px;
	margin: 0 auto;
	padding: 55px 0;
	background-color: #fff;
}


.heading-container img{
	width:100%;
	height: auto;
}
.heading-container h1{
	color: #011f39;
	font-size:60px;
	text-align: center;
	font-weight: bold;
	padding: 30px 0 0 0;
}
.heading-container h2{
	color: #011f39;
	font-size:48px;
	text-align: center;
	margin: 12px;
}

.content-container{
	max-width:1800px;
	margin: 0 auto;
	padding: 55px 0;
	background-color: #f3f3f3;
}


.content-container img{
	width:100%;
	height: auto;
}
.content-container h1{
	color: #011f39;
	font-size:60px;
	text-align: center;
	font-weight: bold;
	padding: 30px 0 20px 0;
}
.content-container h2{
	color: #011f39;
	font-size:48px;
	text-align: center;
	margin: 12px;
}

.content-image{
	width: 100%;
	max-width:1024px;
	margin: 0 auto;
}
.content {
	font-weight: 100;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	font-size: 20px;
}
.content p {
	max-width: 1750px;
	margin: 0 auto;
 	padding: 10px;
}

.content-link a{
	color: #3ccfd3;
	text-decoration: none;
}

.content-link a:hover{
	color: #1274BB;
	text-decoration: underline;
}

.one-third-banner-container{
		display: flex;
		flex-wrap: wrap;
		min-width: 300px;
		width: 100%;
		margin-bottom: 10px;
		padding-bottom: 35px;
}
.one-third-featured-banners{
		padding: 5px 20px;
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;
}
.one-third-banner-links{
		width: 98%;
		margin: 1%;
}
.one-third-banner-links h3 {
	font-size: 23px;
	margin: 15px 0;
    color: #000;
    text-align: center;
}

.one-third-banner-links img{
	display:block;
	max-width: 100%;
	height: auto;
	margin-bottom: -4px;
}

.one-third-banner-links img:hover{
	opacity: .8;
}

.two-by-two-banner-links{
		width: 100%;
		margin: 1%;
	}

.two-by-two-banner-links h3 {
	font-size: 23px;
	margin: 15px 0;
    color: #000;
    text-align: center;
}

.two-by-two-banner-links img{
	display:block;
	max-width: 100%;
	height: auto;
	width: auto;
	margin-bottom: -4px;
}

.two-by-two-banner-links img:hover{
	opacity: .8;
}

.devices-image{
	max-width:530px;
	margin: 0 auto;
}
.content-container, .landing, .new-intro, .home-container, .center-block, .text-center{
	animation: transitionIn 2.5s;
	}
	#ui-elements{
		width: 100%;
		margin: auto;
		background-color: #000;
	}
	.ui-elements-top{
		margin: auto;
	}

	.ui-element-container{
		width: 217px;
   	 	margin: 12px 0px 0px 10px;
	}

	.ui-element-container img {
		width: 217px !important;
   	 	margin: 12px 0px 0px 0;

	}
	.ui-element-icons img {
		max-width: 1000px !important;
	}

	.ui-small-buttons{
		width: 180px;
   	 	margin: 20px 0px 0px 0;
	}

	.ui-small-buttons img{
		max-width: 180px;
		width: 180px !important;
   	 	margin: 10px 0px 0px 0;
	}

	.ui-element-tabs{
		width: 430px;
   	 	margin: 14px 0px 0px 0px;
	}
	.ui-element-tabs img{
		max-width:430px;
		width: 430px !important;
   	 	margin: 14px 0px 0px 0px;
	}
	#ui-color{
		margin: auto;
		max-width:300px;
		width:300px;
	}
	.ui-color-pallete{
		text-align:center;
	}
	.ui-color-pallete img {
		text-align:center;
		float: left;
		margin: 0px 0px 0px 10px;
		max-width: 100px !important;
		width: 100px !important;
	}


/*============ Footer Content ============*/
footer {
	background-color: #011f39;
	width: 100%;
	padding: 10px 0px;
	height: 70px;
	color: #fff;
}
/*============ Modifying the screen ============*/
@media only screen and (min-width: 768px) {
	.nav-item {
	width: inherit;
	border-bottom:none;
	padding-left:none;
	}
	.navbar-nav{
	display: inherit !important;
	margin-right: 10px;
	}
	.navbar-nav .nav-link{
		color: #062038 !important;
		padding: 1.18rem .55rem !important;
	}

	.navbar-nav .nav-link:hover{
		background-color: #1274BB !important;
		color:#fff !important;
	}

	.social{
		color: #062038 !important;
		width: 30px;
		height: 30px;
		padding:12px 5px 0 5px;
	}
		.navbar-nav .social-link li{
	padding-right: .01rem;
	}

	.navbar-nav .social-link a:hover{
		color: #062038 !important;
	}


	.one-third-banner-container{
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
		margin: 10px auto;
	}
	.one-third-featured-banners{
	align-items: left;
	}
	.one-third-banner-links{
		width: 48%;
		margin: 1%;
		float:left;
	}
	label{
		display:block;
		font-size: 1.2em;
		margin-bottom: 2.5em;
	}

	form input{
		width: 300px;
		display:inline-block;
		float:right;
		font-size:1em;
		margin-left: 1em;
		padding: .25em;

	}
	textarea{
		width: 300px;
		display:inline-block;
		float:right;
		font-size:.8em !important;
		margin-left: 2.2em !important;
		padding: .35em;
		height: 8em
	}

	#email_address{
		margin-left: 3.3em !important;
	}

	.banner-content {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-width: 1024px;
	display:flex;

	}

 .heading-content{
 font-family: Hind, sans-serif !important;
 font-size: 18px;
 position: relative;
 width: 100%;
 height: auto;
 margin: 0 auto;
 max-width: 2400px;
 display:flex;
 background-color: #fff !important;
}
	.banner-pic {
	padding: 10px 5px 10px 5px;
	width: 100%;
	max-width: 475px;
	flex-wrap: wrap;
	}

.banner-pic p {
	margin:0;
}

	.home-container{
	margin-top: 10px !important;
	max-width:1800px;
	margin: 0 auto;
	background-image: url(../homepage/mountains-background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	}

	.wrapper{
		max-width: 710px;
		margin: 10px auto;
		padding: 5px;

	}
	.projects-slide{
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 335px;
	height: auto;
	}
	article{
		padding: 10px 15px 20px 15px !important;
		margin: 0;
		float:left;
		max-width: 320px;
	}

	#ui-elements{
		width: 1004px;
		margin: auto;
		background-color: #000;
	}

		#ui-color{
		margin: auto;
		max-width:550px;
		width:550px;
	}
	.ui-color-pallete{
		text-align:center;
	}
	.ui-color-pallete img {
		text-align:center;
		float: left;
		margin: 0px 0px 0px 10px;
		max-width: 100px !important;
		width: 100px !important;
	}


	.ui-elements-top{
		width: 885px;
		margin: auto;
	}

	.ui-element-container{
		width: 217px;
		float: left;
   	 	margin: 12px 0px 0px 10px;
	}

	.ui-element-container img {
		width: 217px !important;
		float: left;
   	 	margin: 12px 0px 0px 10px;

	}
	.ui-element-icons img {
		max-width: 1000px !important;
	}

	.ui-small-buttons{
		width: 180px;
		float: left;
   	 	margin: 20px 0px 0px 10px;
	}

	.ui-small-buttons img{
		max-width: 180px;
		width: 180px !important;
		float: left;
   	 	margin: 10px 0px 0px 10px;
	}

	.ui-element-tabs{
		width: 430px;
		float: left;
   	 	margin: 14px 0px 0px 10px;
	}
	.ui-element-tabs img{
		max-width:430px;
		width: 430px !important;
		float: left;
   	 	margin: 14px 0px 0px 10px;
	}
}


/*============ tablet style - ends ============*/
@media screen and (min-width: 1023px) {
		.one-third-banner-container{
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
		margin: 10px auto;
	}
	.one-third-featured-banners{
	align-items: left;
	}
	.one-third-banner-links{
		width: 31%;
		margin: 1%;
		float:left;
	}
	.two-by-two-banner-links{
		width: 48%;
		margin: 1%;
		float:left;
	}

	.ui-stylefguide{
		text-align:center;

	}
	#ui-color{
		margin: auto;
		max-width:550px;
		width:550px;
	}
	.ui-color-pallete{
		text-align:center;
	}
	.ui-color-pallete img {
		text-align:center;
		float: left;
		margin: 0px 0px 0px 10px;
		max-width: 100px !important;
		width: 100px !important;
	}

	.ui-stylefguide h3 h4 h5{
		text-align: center !important;
	}

	#ui-elements{
		width: 1004px;
		margin: auto;
		background-color: #000;
	}

	.ui-elements-top{
		width: 885px;
		margin: auto;
	}

	.ui-element-container{
		width: 217px;
		float: left;
   	 	margin: 12px 0px 0px 10px;
	}

	.ui-element-container img {
		width: 217px !important;
		float: left;
   	 	margin: 12px 0px 0px 10px;

	}
	.ui-element-icons img {
		max-width: 1000px !important;
	}

	.ui-small-buttons{
		width: 180px;
		float: left;
   	 	margin: 20px 0px 0px 10px;
	}

	.ui-small-buttons img{
		max-width: 180px;
		width: 180px !important;
		float: left;
   	 	margin: 10px 0px 0px 10px;
	}

	.ui-element-tabs{
		width: 430px;
		float: left;
   	 	margin: 14px 0px 0px 10px;
	}
	.ui-element-tabs img{
		max-width:430px;
		width: 430px !important;
		float: left;
   	 	margin: 14px 0px 0px 10px;
	}
}

/*============ an attempt to use animation ============*/

@media only screen and (min-width: 1170px) {
	.projects-slide .projects-slide_slideup {
		-moz-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
		}
	.projects-slide:hover .projects-slide-layer_slideup,
	.projects-slide.active .projects-slide-layer_slideup {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		}
	.projects-slide,
.projects-slide * {
	box-sizing: border-box;
}
.projects-slide a img{
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 345px;
	height: auto;
}
.projects-slide img {
	max-width: 100%;
}
.projects-slide .projects-slide-layer_bottom {
	display: block;
}
.projects-slide .projects-slide-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.projects-slide:hover .projects-slide-layer_top,
.projects-slide.active .projects-slide-layer_top {
	opacity: 1;
}
.projects-slide .projects-slide-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.projects-slide .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.projects-slide.active .projects-slide-text_mobile {
	display: block;
}
	.home-container{

	margin-top: 55px !important;
	max-width:1800px;
	margin: 0 auto;
	background-image: url(../homepage/mountains-background.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;

}

}
/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/