/*********************************************************************
 * General page css
 * Currently the only style used is page - which is used for about, careers, contact
 * Any future pages would most likely also use this style
 *
 *********************************************************************/

#page{
	margin:0 5px; /* top and bottom are 0, but left and right are 5px */
	/*background-color:#404040; */
	background-color:#fff; /* background color */
	
	text-align:left;
}

/*---------------------------Settings for Headlines in page - currently not used--------------*/
#page h1,
#page h2,
#page h3{
	padding:10px 0;
}

/*---------------------------Main header image of page--------------*/
#page-img{
	max-width:100%;
	position:relative;

    /* the following line was added to hide any overflow of the image */
	overflow:hidden;

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	/*border-bottom:1px solid #BBB;*/ /* because borders were added, the size of the tiles need to shrink by 2px below */

    border-top-left-radius:4px;
    border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    -moz-border-radius-topleft:4px;
}

#page-img-noborder{
	max-width:100%;
	position:relative;

    /* the following line was added to hide any overflow of the image */
	overflow:hidden;
    border:none;
}

/*---------------------------Text overlay above image--------------*/
.page-header
{
    width:100%;
}

/*-------------------- CURRENTLY NOT USED --------------------------*/
/* NEED TO INVESTIGATE THIS SOME MORE - DOESN'T WORK WELL ON MOBILE/SCALED DEVICES */
#page-excerpt{
	background:rgba(0,0,0,0.7);
	width:600px;
	padding:25px 30px;
	color:#f7f7f7;
	font-size:1.5em;
	position:relative;
	top:-500px;
	left:30px;
}

/*---------------------------Actual content of page--------------*/
#pg-content{
	/*padding:10px 30px;*/
	padding:5px 0px;	
	margin-bottom:10px;
	position:relative;
}

/*---------------------------Sub-headings within page--------------*/
.page-sub-title{
	padding:10px 0;
}
.page-sub-title h1{
	font-size:2.5em;
	letter-spacing:-0.03em;
	/*line-height:10px;*/
	/*line-height:2px;*/
	color:#0d1e87;
	display:inline-block;
	padding:0;
	text-transform:uppercase;
	font-weight:900;
	margin:0; /* play around with the last value to change the indent of the subtitle */
	padding-left:30px !important;
	text-align:left;
}
/*---------------------------Currently not used--------------*/
.page-sub-title .tagline{
	display:inline-block;
	font-size:1.2em;
	padding-left:20px;
	vertical-align:top;
}

/*----------------------------Container for the quote----------------------------*/
.keyquote-1{
    padding:20px 20px 0px 20px;
	margin-bottom:10px;
	margin-right:-2px;
	color:#fff;
	position:relative;
    background-color:#404040;

    /* the following lines were added to create a border around the tiles with rounded corners */
    /*border-top:1px solid #CCC;*/ /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */

    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-bottomleft:4px;
}

/*----------------------------Quote/Headline Text----------------------------*/
.quotation{
	padding:10px 10px 30px 10px;
	font-size:2.1em;
	font-style:italic;
}

/*--------------------- Box Border ------------------------*/
.border-box{
    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;
}
.box-content{
    display:inline-block;
    color:#404040;
    margin:30px 36px 10px 30px;
}
.no-margin{
    margin:0;
}


/*----------------------------style for 3-column text----------------------------*/
.tricolumn-s{
	background-color:#fff;
	width:306px;
	min-height:320px;
	margin-right:12px;
	position:relative;
	float:left;

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;        
}
.tricolumn-s p{
	padding:30px 30px 30px 30px;
	color:#404040;
}

.tricolumn-s img{
	max-width:100%;
	position:relative;

    /* the following line was added to hide any overflow of the image */
	overflow:hidden;

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;
}

.tricolumn-s.last{
    margin-right:0;
}

/*----------------------------style for 2-column text----------------------------*/
.twocolumn-s{
	width:466px;
	margin-right:12px;
	position:relative;
	float:left;

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;		
}
.twocolumn-s p{
	padding:0;
}
.twocolumn-s.last{
    margin-right:0;
}


/*-------------------- prevents underline from showing on links -------------------------------*/
#content a.no-text-dec:hover{
	text-decoration:none;
}

/*----------------------------------------------------------------------------
Specific to About Page
----------------------------------------------------------------------------*/

.box-content img{
	max-width:100%;
	position:relative;

    /* the following line was added to hide any overflow of the image */
	overflow:hidden;

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;
}
.vision-content{
    min-height:510px;
    padding-bottom:0px;
    margin-bottom:0px;
}
/*------------Mobile----------------*/
@media all and (max-width:768px) {
    .vision-content
    {
        min-height:250px;
    }
}
.team-member{
    padding:30px;
    min-height:290px;
}
.photo{
    width:160px;
    vertical-align:top;
}
.photo-blurb{
    vertical-align:top;
    padding-left:10px;
}
.photo-blurb p
{
    color:#404040;
}
.photo-card{
    display:inline-block;
    
    padding:20px;
    width:126px;
    float:left;
    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;

    /* the following lines add a grayscale/not-grayscale effect on hover */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(90%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */        
}
.photo-card:hover
{
    /* the following lines add a grayscale/not-grayscale effect on hover */
    filter: none;
    -webkit-filter: grayscale(0%);
}
.photo-card img{
    margin-bottom:5px;
}
.photo-card p{
    color:#0d1e87;
	text-align:center;
	padding:0;
}


/*----------------------------------------------------------------------------
Specific to Services Page
----------------------------------------------------------------------------*/
.service-content{
    min-height:340px;
    padding-bottom:0px;
    margin-bottom:0px;
}
/*------------Mobile----------------*/
@media all and (max-width:768px) {
    .service-content
    {
        min-height:250px;
    }
}

/*----------------------------------------------------------------------------
Specific to Careers Page
----------------------------------------------------------------------------*/

#immediate-openings{
   	width:100%;
	display:block;
	margin-bottom:20px;
}

#immediate-openings p{
    margin-left:28px;
    margin-right:28px;
    color:#404040;
}
#immediate-openings h2{
	font-size:1.8em;
	letter-spacing:-0.03em;
	color:#0d1e87;
	display:inline-block;
	padding:0;
	text-transform:uppercase;
	font-weight:900;
	margin:0; /* play around with the last value to change the indent of the subtitle */
	padding-left:30px !important;
	text-align:left;
}
#immediate-openings-subtitle p{
    margin-left:28px;
    margin-right:28px;
    font-size:1.8em;
    letter-spacing:-0.03em;
    color:#0d1e87;    
}
#open-positions{
   	width:100%;
	display:block;
	margin-bottom:20px;
}

#open-positions p{
    margin-left:28px;
    margin-right:28px;
    color:#404040;
}

#open-positions .toggle-button{
    font-size:1.5em;
    color:#fff;
	background-color: #404040;
}

#open-positions .toggle-button:hover{
    background-color:#0d1e87;
}

#open-positions .toggle-content{
    border:1px solid;
	border-top:0;
	padding:10px 10px 5px 10px;
	border-color: #bbb;    
}

#open-positions .toggle-content p{
    margin-left:10px;
    margin-right:10px;
    color:#404040;
}


/*----------------------------------------------------------------------------
Specific to Contact Page
----------------------------------------------------------------------------*/

#contact-fb,
#contact-li,
#contact-tw,
#contact-gp{
	width:80px;
	height:80px;
	margin:0 10px 10px 0;
	background:url(../images/css/social.png) no-repeat;
	float:left;
	transition:background 0.3s;
	-moz-transition:background 0.3s;
	-webkit-transition:background 0.3s;
	-o-transition:background 0.3s;
}
#contact-fb{
	background-position:-80px -80px;
}
#contact-li{
	background-position:-80px 0;
}
#contact-tw{
	background-position:-80px -240px;
}
#contact-gp{
	background-position:-80px -160px;
}
#contact-fb:hover{
	background-position:0 -80px;
}
#contact-li:hover{
	background-position:0 0;
}
#contact-tw:hover{
	background-position:0 -240px;
}
#contact-gp:hover{
	background-position:0 -160px;
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
    .mainpage{
	    width:100%;
	    margin:0;
    }
    .fixed-medium{
	    float:none;
	    max-width:100%;
    }
    .highlights{
	    float:left;
    }
    .highlights-txt{
	    float:left;
	    width:50%;
    }
}
@media all and (max-width:640px) {
    #page{
	    width:100%;
	    margin-left:0;
    }
    .fixed-medium{
	    max-width:310px;
	    margin-left:auto;
	    margin-right:auto;
    }
    .highlights{
	    float:none;
    }
    .highlights-txt{
	    float:none;
	    width:100%;
    }
    .feature-text{
	    padding-top:0;
    }
}
@media all and (max-width:970px) {
    .about-person{/************************************** NEED TO REVIEW */
	    width:81.8%;
	    padding:9.1%;
    }
    #aboutcontainer1 a{
	    width:23.15%;
	    margin:0 0.7% 1% 0;
    }
    #aboutcontainer2 a{
	    width:23.15%;
	    margin:0 0.7% 1% 0;
    }
    .tricolumn-s{
	    width:32.2%;
    }
    #page-excerpt{
	    width:500px;
    }
}

@media all and (max-width:640px) {
    #aboutcontainer1 a{
	    width:100%;
	    margin-bottom:10px;
    }
    #aboutcontainer2 a{
	    width:100%;
	    margin-bottom:10px;
    }
    .tricolumn-s{
	    width:100%;
	    float:none;
	    min-height:0;
	    margin-bottom:10px;
    }
}

/*----------------------------------------------------------------------------
Position-dependent classes
----------------------------------------------------------------------------*/
.last{
	margin-right:0;
}