/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/*------ Global ------*/

body {
    width: 100%;
    height: 100%;
	font-family:Lato, Helvetica, sans-serif;
}
html {
    width: 100%;
    height: 100%;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin: 0;
}
a, a:active, a:focus, a:hover {
	outline: none;
	text-decoration: none;
}
td, th {
    padding: 5px 30px 5px 0;
}
img {
	max-width: 100%;
	height: auto;
}

/* --------- Navigation ----------*/

.navbar-default .navbar-nav > li > a {
    color: #FFF;
}
.navbar-nav > li > a {
    padding-bottom: 5px;
    padding-top: 5px;
}
.navbar-nav > li > a {
    line-height: normal;
    padding-bottom: 5px;
    padding-top: 5px;
}
.nav > li > a {
    display: block;
    padding: 10px 15px;
    position: relative;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color:  #003366;
    color: #C7BFE5;
}
.slideout-menu {
    background: #003366 none repeat scroll 0 0;
    position: fixed;
    right: -450px;
    top: 0;
    width: 450px;
    z-index: 100;
}
.slideout-menu .slideout-menu-toggle {
    color: #fff;
    display: inline-block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    padding: 4px 10px 7px;
    position: absolute;
    text-decoration: none;
    top: 0;
    vertical-align: top;
}
.slideout-menu .slideout-menu-toggle a {
    font-size: 18px;
}
.slideout-menu .slideout-menu-toggle:hover {
	background: #c7bfe5;
}
.slideout-menu ul {
	list-style: none;
	margin: 5px 0;
}
.slideout-menu ul li {
	display: inline;
}
.slideout-menu ul li a {
	position: relative;
	padding: 5px 10px 6px;
	color: #FFF;
	text-decoration: none;
	font: 16px Lato, Helvetica, sans-serif;
	text-transform:uppercase;
	
}
.slideout-menu ul li a:hover {
	background: #c7bfe5;
	color: #fff;
}
.slideout-menu ul li a i {
	position: absolute;
	top: 15px;
	right: 10px;
	opacity: .5;
}
.header {
    background: #003366 none repeat scroll 0 0;
    padding: 5px 20px;
	position: fixed;
	right: 0;
    z-index: 1;
}
.header a {
	
}
.header .slideout-menu-toggle {
	font: 16px Lato, Helvetica, sans-serif;
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
}
.header .slideout-menu-toggle:hover {
	color: #c7bfe5;
}
.header .slideout-menu-toggle i {
	vertical-align: top;
	margin: 5px 3px 0 0;
}
.glyphicon {
    top: 2px;
	margin-right: 5px;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

/*------- Intro Section ------*/

.intro-section {
    min-height: 100%;
    background: #3F79AC;
	display: flex;
    align-items: center;
}
.carousel-indicators {
    bottom: -40px;
}
.intro-section h1 {
	font: 3.5em Lato, Helvetica, sans-serif;
	color: #FFF;
	text-transform: uppercase;
	line-height: 1.1em;
}
.blue {
	font-weight: 900;
	color: #003366;
}
.blue-diagonal {
    background: rgba(0, 0, 0, 0) url("../assets/blue-diagonal.png") no-repeat scroll 0 0;
    height: 694px;
    margin: -45px 0 0 -230px;
    padding: 336px 0 0 49px;
}
.first-line {
	margin-left: 105px;
}
.second-line {
    margin: 0 0 10px 50px;
}

/*------- About Section ------*/

.about-section {
    min-height: 100%;
    background: #ECEBF8;
	display: flex;
    align-items: center;
}
.about-section .left-image {
    margin-left: -300px;
    padding-top: 82px;
}
.purple-diagonal {
    background: rgba(0, 0, 0, 0) url("../assets/purple-diagonal.png") no-repeat scroll right center;
    height: 700px;
    margin: 0;
    padding: 150px 300px 0 0;
	z-index:1;
}

/*------- Team Section ------*/

.team-section {
    min-height: 100%;
    background: #eee;
	display: flex;
    align-items: center;
}
.team-section img {
	
}
.panel-group .panel {
    border-radius: 0;
}
.panel-default {
    border: medium none;
}
.panel {
    background-color: #eee;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 20px;
}
.panel-default > .panel-heading {
    background-color: #eee;
}
.panel-group {
    clear: both;
	margin-right: 3px;
	margin-bottom: 0;
}
.panel-group img {
	margin-bottom: 0;
}
.panel-body {
    padding: 0;
	background: #fff;
}
.panel-body .col-xs-6 {
    padding-right: 0;
}
.team-text {
	padding: 30px;
}
.team-text h4 {
	color:#003366;
}
.team-section .col-md-4 {
	padding: 0;
}
.thumb-box {
	display:inline-block !important;
	position:relative !important; 
	overflow: hidden;
	width: 100%;
    text-align: center;
}
.thumb-box-overlay {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.thumb-box a {
    color:transparent;
}
.thumb-box a:hover .thumb-box-overlay {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    text-align:center;
    position: absolute;
    background-color: rgba(0, 51, 102, 0.75);
    color: #fff;
    width:100%;
    height:100%;  
}
.thumb-box-overlay span {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}
.glyphicon-collapse-down {
	font-size: 32px;
	text-shadow: none;
	width: 32px;
	height: 32px;
}

/*------- Service Section ------*/

.services-section {
    min-height: 100%;
    background: #003366;
	display: flex;
    align-items: center;
}
.services-section h1 {
    color: #fff;
    padding: 10px 20px;
    text-align: right;
}
.show_hide {
    display:none;
    width: 100%;
    overflow: visible;
}
.wrapper {
    /* Debugging - to show where the 'hover' area is */
	
    /* Crop the wrapper tightly around the link / image */

    /*width: 103px;*/
    width: 100%;
}
.wrapper-main {
    width: 100%;
}
.slidingDiv {
    background: #fff none repeat scroll 0 0;
    height: 240px;
    padding: 30px 30px 30px 10px;
}
.slidingDiv li {
	color: #003366;
	font-size: 16px;
	line-height: 26px;
}
.services-section .col-sm-4 {
    padding: 2px;
}
#service-1 {
	background: #3F79AB;
	height: 240px;
}
#service-2 {
	background: #3366CC;
	height: 240px;
}
#service-3 {
	background: #0066CC;
	height: 240px;
}
#service-4 {
	background: #3366FF;
	height: 240px;
}
#service-5 {
	background: #3399FF;
	height: 240px;
}
#service-6 {
	background: #66CCFF;
	height: 240px;
}

/*------- Contact Section ------*/

.contact-section {
    min-height: 100%;
    background: #ECEBF8;
	display: flex;
    align-items: center;
}
.contact-section .map-image {
    margin-left: -315px;
    padding-top: 120px;
    text-align: right;
}
#contact-info {
	float: right;
}
.contact-section .purple-diagonal {
    padding: 225px 300px 0 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	
body {
	font-size: 13px;
}
	
/*------- Intro Section Tablet ------*/	

.blue-diagonal {
    padding: 387px 0 0 45px;
	margin: -45px 0 0 -244px;
}
.intro-section h1 {
	font: 3.1em Lato, Helvetica, sans-serif;
}
.first-line {
	margin-left: 150px;
}
.second-line {
    margin: 0 0 10px 102px;
}

/*------- About Section Tablet ------*/

.about-section .left-image {
    padding-top: 162px;
	margin-left: -255px;
}
.purple-diagonal {
    padding: 135px 300px 0 0;
}

/*------- Team Section Tablet ------*/

.team-text {
    padding: 12px 30px 0 !important;
}
.team-section .col-md-4 {
    padding: 0 4px 0 0;
}

/*------- Service Section Tablet ------*/

.services-section h1 {
    font-size: 32px;
}
.slidingDiv {
    height: 210px;
	padding: 20px 30px 20px 10px;
}
.slidingDiv li {
	font-size: 14px;
	line-height: 24px;
}
#service-1, #service-2, #service-3, #service-4, #service-5, #service-6 {
	height: 210px;
}

/*------- Contact Section Tablet ------*/

.map-image {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0 !important;
	height: 0;
}
.map-image iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
} 
.contact-section .purple-diagonal {
    padding: 225px 250px 0 0;
}
.contact-section .col-xs-7 {
    margin-top: 140px;
}
.contact-section .map-image {
    margin-left: -255px;
}

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
body {
	font-size: 13px;
}
	
/*------- Intro Section Tablet ------*/	

.blue-diagonal {
    margin: -45px 0 0 -240px;
    padding: 385px 0 0 70px;
}
.intro-section h1 {
	font: 2.4em Lato, Helvetica, sans-serif;
}

/*------- About Section Tablet ------*/

.about-section .left-image {
    margin-left: -188px;
    padding-top: 232px;
}
.purple-diagonal {
    background: rgba(0, 0, 0, 0) url("../assets/purple-drop-shadow.png") no-repeat scroll right center;
    padding: 125px 200px 0 0;
}

/*------- Team Section Tablet ------*/

.team-text {
    padding: 12px 30px !important;
}
.team-section .col-md-4 {
    padding: 0 4px 0 0;
}
.team-section .col-xs-6 {
    width: 33.3%;
}
.panel-body .col-xs-6 {
    width: 50%;
}

/*------- Service Section Tablet ------*/

.services-section h1 {
    font-size: 32px;
}
.slidingDiv {
    height: 210px;
	padding: 20px 30px 20px 10px;
}
.slidingDiv li {
	font-size: 14px;
	line-height: 24px;
}
#service-1, #service-2, #service-3, #service-4, #service-5, #service-6 {
	height: 210px;
}
.services-section .col-sm-4 {
    width: 50%;
}
/*------- Contact Section Tablet ------*/

.map-image {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0 !important;
	height: 0;
}
.map-image iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
} 
.contact-section .purple-diagonal {
    padding: 225px 150px 0 0;
}
.contact-section .col-xs-7 {
    margin-top: 190px;
}
.contact-section .map-image {
    margin-left: -190px;
}
td, th {
    padding: 5px 30px 0 0;
}

}

@media (max-width: 767px) {
	
body {
	font-size: 13px;
}
.container {
    width: 100%;
}

/* --------- Navigation ----------*/

.slideout-menu {
    top: 30px;
    width: 130px;
	height: 100%;
}
.slideout-menu.open {
	right:0 !important;
	top: 30px;
	z-index:130;
}
.slideout-menu ul {
	margin: 0;
	padding-left: 0;
}
.slideout-menu ul li {
	display: block;
}
.slideout-menu ul li a {
	display: block;	
	border-top: 1px solid #c7bfe5;
	padding: 5px 22px 6px;
}
.slideout-menu .slideout-menu-toggle {
    right: 0;
    top: -30px;
}
.header {
    width: 130px;
	z-index:100;
}
	
/*------- Intro Section Mobile ------*/	

.intro-section {
    min-height: auto;
	display:block;
}

.blue-diagonal {
    margin: 0;
    padding:0;
	background: none;
	height: auto;
}
.intro-section .col-xs-6 {
    background: #003366 none repeat scroll 0 0;
    width: 100%;
}
.intro-section .col-xs-12 {
    padding: 40px 0 0 0;
}
.intro-section h1 {
	font: 1.5em Lato, Helvetica, sans-serif;
}
.first-line {
    margin-left: 20px;
}
.second-line {
    margin-left: 20px;
}
.carousel-indicators {
    display: none;
}

/*------- About Section Mobile ------*/

.about-section {
    min-height: auto;
	display:block;
	padding: 40px 0 30px;
}
.about-section .left-image {
    margin-left: 0;
    padding-top: 0;
}
.purple-diagonal {
    background: none;
    padding: 0 15px;
	height: auto;
}
.about-section .col-xs-5 {
    width: 100%;
}

/*------- Team Section Mobile ------*/

.team-section {
    min-height: auto;
	display:block;
	padding: 28px 0;
}
.team-text {
    padding: 12px 30px !important;
}
.team-section .col-md-4 {
    padding: 0 15px;
}
.team-section .col-xs-6 {
    width: 100%;
}
.panel-body .col-xs-6 {
    width: 100%;
}
.panel-body img {
	display: none;
}
.panel-group .panel {
    margin: 0 15px 4px;
}

/*------- Service Section mobile ------*/

.services-section {
    min-height: auto;
	display:block;
	padding: 28px 0;
}
.services-section h1 {
    font-size: 32px;
}
.slidingDiv {
    height: 210px;
	padding: 20px 30px 20px 10px;
}
.slidingDiv li {
	font-size: 14px;
	line-height: 24px;
}
#service-1, #service-2, #service-3, #service-4, #service-5, #service-6 {
	height: 210px;
}
.services-section .col-sm-4 {
    width: 100%;
}

/*------- Contact Section Mobile ------*/

.contact-section {
    min-height: auto;
	display:block;
}
.map-image {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0 !important;
	height: 0;
}
.map-image iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
} 
.contact-section .purple-diagonal {
    padding: 40px 15px 30px;
}
.contact-section .col-xs-7 {
    margin-top: 0;
}
.contact-section .map-image {
    margin-left: 0;
}
td, th {
    padding: 5px 30px 0 0;
}
.h3, h3 {
    font-size: 21px;
}
.contact-section .col-xs-7 {
    width: 100%;
}
#contact-info {
    float: none;
}
}

@media(max-width:767px) {
    .panel-collapse{
        transition-property: all;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }

    .panel-collapse.collapse{
        display: block;
        max-height: 0!important;
        overflow-y:hidden;
    }

    .panel-collapse.collapsing{
        max-height: 0;
        overflow-y: :hidden;
    }

    .panel-collapse.collapse.in{
        max-height: 500px!important;
    }
}