/* NAVBAR CSS */

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 768px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
  z-index: 3;
  width: 100%;
}

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;
  line-height: 55px;
  padding: 0;
  color: #000;
  float: left;
  position:relative;
  top:7px;
  left:-190px;
}

@media(max-width:768px){
	.logo{
		position:relative;
		left:5px;
		top:5px;
	}
}

/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .2);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
  position:relative;
  top:8px;
}

@media screen and (min-width: 768px) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  padding: 0.7em 1em 0.7em 0;
  color: #000;
  width: 100%;
  float: left;
}
.nav-collapse a{
  color:#23527c;
}

.nav-collapse a:active,
.nav-collapse .active a {
 color:#b93331;
}

@media screen and (min-width: 768px) {
  .nav-collapse a {
    padding: 1.02em 2em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }

  .nav-collapse:last-child a {
    padding-right: 0;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 768px) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #000; /* Edit this to change the icon color */
  font: normal 28px/55px "FontAwesome"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: right;
  position: absolute;
  content: "\f0c9"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\f00d"; /* Close icon */
}

/* Demo style */


header {
  background: #FFF;
  opacity: 0.8;
}

.navbar {
  max-width: 800px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}


   @media(min-width:768px) and (max-width:998px){
	.navbar .logo{
	position:relative;
	left:0px;
	}
	}
	@media(min-width:998px) and (max-width:1250px){
	.navbar .logo{
	position:relative;
	left:-80px;
	}
	}

	@media(min-width: 768px){
	.navbar {
    width: 800px;
    }
	}

	.contact_number p{
	position:absolute;
	right:10px;
	top:10px;
	color:#635c5a;;
	z-index:2;
	font-size:15px;
	}

	.contact_number p i{
	font-size:18px;
	}
	@media(max-width:768px){
	.contact_number{
	display:none;
	}
	}
	.navbar i{
	font-size:22px;
	position:relative;
	bottom:2px;
	}









/* DROPDOWN CSS*/


.drop {
	border-bottom:15px solid white;
}

.drop .first .content{
	padding-top:45px;
	padding-bottom:40px;
	position:relative;
	left:7px;
	}

	.drop .first{
	height:600px;
	background-color: #67869a;
		background-color: #a1b298
    }
	.drop .first h4{
	text-align:center;
	position:relative;
	top:65px;
	left:10px;
  color:black;
  font-family:open sans;
  }

  .second h4{
    color:black;
    font-family:open sans;
  }

 .tablet h4{
   color:black;
  font-family:open sans;
 }

 .third h4{
   color:black;
   font-family:open sans;
 }

	.drop .second{
	height:250px;
background-color:#d6ebf3;
		background-color: #e0e4d7
	}

	.drop .second .tablet{
	background-color:azure;
	height:250px;
	}



	.drop .second img{
	position:relative;
	left:10px;
	}

	.drop .second p{
	position:relative;
	left:28px;
	top:8px;
	color: black;
  font-family:open sans;
	}

	.drop .tablet p{
	position:relative;
	left:53px;
	top:30px;
	color: black;
  font-family:open sans;
	}
	@media(max-width:1000px){
	.drop .tablet p{
	margin-left:-32px;
	}
	}
	.drop .tablet{
	background-color:#c58c6e;
	height:250px;
	}

	.drop .tablet img{
	position:relative;
	left:35px;
	top:20px;
	}

	.drop .third{
	height:350px;
	background-color:#6b7a8f;
	background-color:#8cafc8;
	padding-top: 50px;
	padding-bottom:55px;
	border-top:15px solid white;
	}

	.drop .first p{
	position:relative;
  top:8px;
	color:black;
  font-family:open sans;
  }

	.drop .third img{
	position:relative;
	top:75px;
	left:20px;
	}
	.drop .com_prod a{
	font-size:14px;
	text-decoration:underline;
	color:#005ab9;
	}

	@media(max-width:1000px){
	.drop .third img{
    positon:relative;
	left:0px;
	}
	}
	.drop .third p{
	position:relative;
	top:82px;
	left:25px;
	color: black;
  font-family:open sans;
	}
	@media(max-width:1000px){
	.drop .third p{
	position:relative;
	left:0px;
	}
	}
	.drop .first{
	border-right:15px solid white;

	}
	.drop .tablet{
	border-left:15px solid white;

	}
	.drop{
	border-top:15px solid white;
	border-left:15px solid white;
	border-right:15px solid white;
	}
    @media(min-width:768px) and (max-width:1000px){
	.drop .tablet img{
	position:relative;
	left:5px;
	}
	}

	@media(max-width:1000px){
	.drop h3{
	font-size:16px;
	}
	}

	.drop2 ul li{
	display:inline-block;
	padding-left:50px;
	padding-right:70px;
	font-size:17px;
	padding-top:20px;
	padding-bottom:20px;
	}
	.drop2 a:hover{
	cursor:pointer;
	}
	.drop3 ul li{
	display:inline-block;
	padding-left:50px;
	padding-right:70px;
	font-size:17px;
	padding-top:20px;
	padding-bottom:20px;
	}
	.drop3 a:hover{
	cursor:pointer;
	}

	.drop4 ul li{
	display:inline-block;
	padding-left:50px;
	padding-right:70px;
	font-size:17px;
	padding-top:20px;
	padding-bottom:20px;
	}

	.drop4 a:hover{
	cursor:pointer;
	}

	@media(max-width:1050px){
	.drop h4{
	font-size:14px;
	}
	.drop .first .content{
	position:relative;
	left:5px;
	padding-bottom:24px;
	}
	}

	.drop2 li a,.drop3 li a,.drop4 li a{
	text-decoration:none;
	}
	.drop a{
	text-decoration:none;
	}
	.drop p:hover{
	font-size:15px;
	}

	@media(max-width:768px){
	.drop2{
	width:55%;
	position:absolute !important;
	top:20% !important;
	left:38% !important;
	}

	.drop2 ul li{
	padding-left:0px;
	padding-right:0px;
	font-size:12px;
	padding-top:8px;
	padding-bottom:8px;
	display:block;
	}

	.drop3{
	width:55%;
	position:absolute !important;
	top:26% !important;
	left:38% !important;
	}

	.drop3 ul li{
	padding-left:0px;
	padding-right:0px;
	font-size:12px;
	padding-top:8px;
	padding-bottom:8px;
	display:block;
	}

	.drop4{
	width:55%;
	position:absolute !important;
	top:32% !important;
	left:38% !important;
	}

	.drop4 ul li{
	padding-left:0px;
	padding-right:0px;
	font-size:12px;
	padding-top:8px;
	padding-bottom:8px;
	display:block;
	}
	}

	@media(min-width:768px) and (max-width:1200px){
	.drop2 ul li{
	padding-right:54px;
	font-size:14px;
	padding-left:0px;
	}
	.drop3 ul li{
	padding-right:54px;
	font-size:14px;
	padding-left:0px;
	}
	.drop4 ul li{
	padding-right:54px;
	font-size:14px;
	padding-left:0px;
	}
	}




	/* DROPDOWN MEDIA */

	@media(max-width:768px){
	.drop img{
	display:none;
	}
	.drop p{
	text-align:center;
	left:0px;
	}
	.drop h4{
    text-align:center;
	font-size:15px;
	margin-top:5px;
	margin-bottom:5px;
	}
	.drop.second  #speech_pro_mob{
	position:relative;
	left:10px;
	}
	.drop .first .content{
	padding:0px;
	}
	.drop .first{
	height:auto;
	padding-bottom:10px;
	padding-top:10px;
	border:1px solid grey;
	}
	.drop .first h4{
	top:0px;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:5px;
	margin-bottom:5px;
	}
	.drop .second{
	padding-top:10px;
	height:auto;
	padding-bottom:10px;
	border:1px solid grey;
	border-top:0px;
	}
	.drop .second h4{
	padding-top:10px;
	margin-top:5px;
	margin-bottom:5px;
	}
	.drop .second p{
	top:0px;
	left:0px;
	}
	.drop .tablet{
	height:auto;
	padding-top:10px;
	padding-bottom:10px;
	border:1px solid grey;
	border-top:0px;
	}
	@media (max-width: 768px){
	.drop{
		top:130px;
		}
	.drop .tablet p {
	margin-left:0px;
	}
	}
	.drop .tablet p{
	left:0px;
	top:0px;
	}
	.drop .third{
	padding-top:10px;
	height:auto;
	padding-bottom:0px;
	border:1px solid grey;
	border-top:0px;
	}
	.drop .third p{
	top:0px;
	}
	}


	.client_vertical h5{
	color:#d6d5d5;
	font-size:16px;
	width:56%;
	text-align:center;
	line-height:1.6em;
	display:block;
	margin:auto;
	}
	.client_vertical .row{
	padding-bottom:30px;
	}
	.client_vertical .row{
	padding-bottom:8px;
	}
	#cap{
	padding-bottom:10px;
	}

	#rc-imageselect {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}

	@media(max-width:768px){
	.client_vertical h5{
	width:100%;
	}
	}
	@media(max-width:550px){
	#contact-form{
	top:20px;
	}
	}

	@media(max-width:998px){
	#cap{
	transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
	}
	}

  .drop{
    width:97%
  }