﻿/**************  MICROCOMMS SOFTWARE SOLUTIONS (W.L.L) BAHRAIN  ****************************/

@font-face {
    font-family: 'GothamBook';
    src: url('../fonts/GothamBook.eot');
    src: local('GothamBook'), url('../fonts/GothamBook.woff2') format('woff'), url('../fonts/GothamBook.ttf') format('truetype');
}



@font-face {
    font-family: 'GothamLight';
    src: url('../fonts/GothamLight.eot');
    src: local('GothamLight'), url('../fonts/GothamLight.woff') format('woff'), url('../fonts/GothamLight.ttf') format('truetype');
}
@font-face {
	font-family: 'GothamMedium';
	src: url('../fonts/GothamMedium.eot');
	src: local('GothamMedium'), url('../fonts/GothamMedium.woff') format('woff'), url('../fonts/GothamMedium.ttf') format('truetype');
}

@font-face {
    font-family: 'GothamBold';
    src: url('../fonts/GothamBold.eot');
    src: local('GothamBold'), url('../fonts/GothamBold.woff') format('woff'), url('../fonts/GothamBold.ttf') format('truetype');
}

*{
	transition:all .5s ease;
}

html,body{
	height:100%;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'GothamBook';
	line-height:1.3;
	color:#231F20;
}



ul.body-list{
	list-style-type:none;
	font-family:GothamBook;
	list-style-position:inside;
	
}

ul.body-list li::before{
	content:"\2022";
	margin-right:10px;
	display:inline-block;
	color:gray;
}

ul.body-list.black li::before{
	
	color:#231F20;
}

.light{
	font-family:GothamLight;
}



.deskmenu{
	display:none;
	font-size:133%;
	color:#939598;
	text-align:right;
}

.deskmenu a{
	display:inline-block;
}

.deskmenu a.default{
	font-family:GothamBold;
	color:initial;
}

.deskmenu a.active{
	color:#8ED7F3;
}

span{
	/*display:inline-block;*/
}

h1{
	line-height:1;
}

h3,h5{
	font-family:GothamBold;
	margin-bottom:unset;
}

.overlay-container{
	line-height:1;
	position: absolute; /* Position the background text */
	bottom: -3px; /* At the bottom. Use top:0 to append it to the top */
	/*left:0px;*/
	/*bottom: -0.03rem;*/
	background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,.6) 50%, rgba(250,250,250,1) 100%);		
	text-align: right;
}

.overlay-container article{
	font-size:95%;
	/*margin-top:5px;*/
}

.overlay-container ul{
	margin-bottom:0px;
}


h5{
	font-size:115%;
}

.vm-quest p{
	margin:0px;
}




a{
	color:inherit;
}

a:hover,a.focus{
	text-decoration:none;
	color:inherit;
}


.navbar .navbar-collapse .navbar-nav {
    display: none;
	padding-bottom:20px;
}

.navbar .navbar-collapse .navbar-nav > .menu-item a {
    font-size: 1rem;
	font-weight:600;
    color: #000;
    padding: .5rem .5rem;
	line-height:1.8;
}

.home-bg {
    background-image: url(../img/CAP_Background.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
	background-attachment:fixed;
	background-position-x:0px;
}

.secondary-bg {
    background-image: url(../img/secondary-bg.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
/*background-size: cover;*/
	background-attachment:fixed;
}


ul{
list-style: none;
    padding: 0px;
/*list-style: disc;
    padding: 0px;
    text-align: right;
    list-style-position: inside;
	color: #BCBCBC;
font: normal 12px Arial;*/
/*overflow-wrap: break-word;
overflow-x:hidden;
*/
}

/*
ul li::before {
  content: "\2022";  
  color: #BCBCBC; 
font: normal larger Arial;
  display: inline; 
  width: 1em; 
  margin-left: 1em; 
}
*/

/*li{
color:#000000;
font: normal 12px Arial;
}*/

.gray-text{
	color:#BCBCBC;
}
.grayout-text{
	color:#BCBCBC;
	line-height: 1;
    font-size: larger;
	font-family:GothamLight;
	
}
.dark-gray-text{
	color:#5B5B5B;
}
.black-text{
	color:#000000;
}

.full-height{
	height:100%;
}


footer {
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
	padding:10px 0px;
	color:#FFF;
	font-family:GothamLight;
}

footer.blue{
	background:linear-gradient(to right, rgba(142, 216, 245,0) 50%, rgba(142, 216, 245,.8) 75%, rgba(142, 216, 245,1) 100%);
}

footer.purple{
    background: linear-gradient(to right, rgba(142,76,150,0) 50%, rgba(142,76,150,.8) 75%, rgba(142,76,150,1) 100%);
}


footer.green{
	background: linear-gradient(to right, rgba(88,185,71,0) 50%, rgba(88,185,71,.8) 75%, rgba(88,185,71,1) 100%);
	
}

footer.orange{
	background: linear-gradient(to right, rgba(235,118,38,0) 50%, rgba(235,118,38,.8) 75%, rgba(235,118,38,1) 100%);
}

footer.darkgreen{
	background: linear-gradient(to right, rgba(93,195,174,0) 50%, rgba(93,195,174,.8) 75%, rgba(93,195,174,1) 100%);
}

.vm-content p{
	/*color:#AAA;*/
	margin-top: 1rem;
}

.vm-quest > div{
	background:linear-gradient(to right,rgba(255,255,255,0),#CCC);
	text-align:right;
	padding:1rem;
}

a[href^=tel] {
    color: red;
    text-decoration: none;
}

.circle{
	/*box-shadow: -10px 5px 20px #ccc;*/
	/*box-shadow: 0px 0px 20px #ccc;*/
	border-radius:100%;
	position:absolute;
}

.circle-about2{
	margin-right:30px;
}

.widget{
	display:inline-block;
	text-align:center;
	border-radius:100%;
	box-shadow:6px 6px 20px #CCC;
}

.widget.blue{
	background-color:#8DD7F4;
	color:#FFF;
	float:left;
}

.widget.gray{
	background-color:#B8B8B8;
	color:#FFF;
	padding:20px 36px;
	float:left;
	margin-left:50px;
}



.widget.gray h4{
	color:#666;
}

.widget h4{
	font-family:GothamBold;
	margin-bottom: -0.1rem;
	margin-top: 2rem;
}

.tri-circle{
	display:inline-block;
	border-radius:100%;
	border:1px solid #AAA;
	text-align:center;
	position:absolute;
	color:#BCBCBC;
	font-size: smaller;
}

.tri-circle .light{
		color:#5B5B5B;
	}
.tri-circle summary{
	color:#222;
	
}

.tri-circle h4{
	color:#939598;
	/*margin-bottom:5px;*/
	margin-bottom: -0.2rem;
	font-family:GothamMedium;
}

.tri-circle p{
	color:#666;
	margin-top: 1rem;
}


/******************* ABOUT US ******************************/

.featured-content-about div.strategic-concept {
    position: absolute;
    bottom: 0;
	left:15px;
	right:15px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,1) 100%, rgba(255,255,255,0) 100%);
    text-align: right;
    padding: 25px 15px 25px 0px;
	line-height:1;
}


/************************** SERVICES **********************/
.service-img {
    z-index: 2;
    margin-top: -300px;
    position: absolute;
}

.col-xs-5{
	
	width:41.66666%;
}

.col-xs-7{
	width:58.33333%;
}



/***************** OUR TEAM ASSOCIATES ********************/

.scroll
{
	width: 90%;
    	height: 150px;
    	overflow: auto;
    	margin-top: 20px;
    	text-align: right;
    	padding-left: 10px;
    	padding-right: 10px;
	margin-left: 50px;
}

.service-scroll
{
	width: auto;
    height: 75px;
    overflow: hidden;
    text-align: right;
    padding-left: 10px;
    padding-right: 10px;
	margin-right: -10px;
}

#service1{
	padding-right:10px;
}

/*
.scroll::-webkit-scrollbar {
    width: .5em;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6px;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
}
*/
/*
.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
.service-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.col-xs-6{
	float:left;
}

.position-bottom-right{
	position:absolute;
	bottom:0px;
	right:15px;
}

strong{
	font-size:larger;
	color:#AAA;
}



.section-heading{
	font-size:x-large;
	color:#C9C9C9;
	/*font-family:GothamLight;*/
}

.contact-overlay{
	/*background:linear-gradient(to right,rgba(255,255,255,.7), rgba(255,255,255,.9) 100%);
	border-radius:100%;
font-size:90%;
*/
	position:absolute;
	font-size:75%;
    line-height: 1;

}

.team-md{
	/*box-shadow:4px 4px 16px #AAA;*/
	border-radius:100%;
}

.bold{
	font-family:GothamBold;
}
.black-bullet::before{	
	content:"•";
	color:#000000;
	padding-right:5px;
	font-style:normal;
	display:inline-block;
}
.bullet::before{	
	content:"•";
	color:#BCBCBC;
	padding-right:5px;
	font-style:normal;
	display:inline-block;
}

.featured-content-about img{
	vertical-align:unset;
}


/*******nav tab**************/
/*
.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
	border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
	margin-bottom: -1px;
}

.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #ccc;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
	color: #ccc;
	background-color: #3071a9;
	border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
	color: #428bca;
	background-color: #fff;
	border-color: #428bca;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #428bca;
    border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #fff;   
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    background-color: #4a9fe9;
}*/
