/*------------------------------------*\
	dECMT
	
	By Simon Wiffen
	KANGA HEALTH LTD
	
	http://www.kangahealth.com
\*------------------------------------*/




/*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
	Margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
header, nav, article, section, aside, footer{
	display:block;
}



/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-family:"proxima-nova", sans-serif;
	font-size:125%; /* 20px base size */
	line-height:1.4em;
	color:#383838;
	background:#fff;
}
.container{
	width:100%;
	overflow:hidden;
}
.wrapper{
	width:90%;
	margin:0 auto;
}
.inner-wrapper{
	width:60%;
	margin:0 auto;
	position:relative;
}
.narrow-wrapper{
	width:48%;
	margin:0 auto;
}
.content{
	overflow:hidden;
}
.content-sub{
	width:24%;
	float:left;
}
.content-main{
	width:73%;
	float:right;
	line-height:1.5em;
}



/*------------------------------------*\
	BACKGROUND PATTERNS
\*------------------------------------*/
.background-left{
	position:absolute;
	left:-586px;
	width:563px;
	height:1267px;
	z-index:0;
	background:url(../img/backgrounds/background-left.png) no-repeat;
}
.background-left-feature{
	background:url(../img/backgrounds/background-left-feature.png) no-repeat;
}
.background-left02{
	position:absolute;
	margin-top:-100px;
	left:-570px;
	width:496px;
	height:718px;
	z-index:0;
	background:url(../img/backgrounds/background-left02.png) no-repeat;
}
.background-left02-feature{
	background:url(../img/backgrounds/background-left02-feature.png) no-repeat;
}
.background-right{
	position:absolute;
	right:-496px;
	width:539px;
	height:1155px;
	z-index:0;
	background:url(../img/backgrounds/background-right.png) no-repeat;
}
.background-right-feature{
	background:url(../img/backgrounds/background-right-feature.png) no-repeat;
}
.background-right02{
	position:absolute;
	right:-500px;
	width:599px;
	height:860px;
	z-index:0;
	background:url(../img/backgrounds/background-right02.png) no-repeat;
}
.background-right02-feature{
	background:url(../img/backgrounds/background-right02-feature.png) no-repeat;
}



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
h2, h3, h4, h5, h6{
	font-weight:bold;
	line-height:1em;
	color:#0092b7;
	margin-bottom:30px;
}
h1{
	font-size:2.6em;
	line-height:1em;
	color:#f6a24c;
	text-align:center;
}
h2{
	font-size:1.5em;
}
h3{
	font-size:1.3em;
}
h4{
	font-size:1em;
}
h5, h6{
	font-weight:normal;
}
p{
	margin-bottom:30px;
}
ol, ul{
	font-weight:normal;
	/*border-left:1px solid #0092b7;*/
	padding:15px 0 15px 40px;
	margin-bottom:40px;
}
ul.plain,
ol.plain{
	font-weight:normal;
	border:none;
	padding:0;
	margin:0 0 0 20px;
}
ul.plain li,
ol.plain li{
	margin-bottom:20px;
}
.lc{
	text-transform:lowercase;
}
a{
	color:#0092b7;
	transition:0.15s linear all;
}
a:hover,
a:focus{
	color:#f6a24c;
}

/* Tooltips */
.tooltips{	
	padding-right:20px;
	background:url(../img/icons/glossary.png) right no-repeat;
	background-size:17px 17px;
	border-bottom:1px solid #383838;
	border-bottom:1px solid rgba(38,38,38,0.5);
	cursor:pointer;
}

/* Specific typography styles */
.content-sub h2{
	font-size:2.25em;
	font-weight:normal;	
}
.band-dark .content-sub h2{
	color:#f6a24c;
}


/*------------------------------------*\
	COLUMNS
\*------------------------------------*/
.cols{
	overflow:hidden;
	margin-left:-2.5%;
}
.cols .col{
	float:left;
	margin-left:2.5%;
	margin-bottom:2.5%;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/* 2 Column */
.cols-2 .col,
.cols-3 .cols-2 .col{
	width:47.5%;
}

/* 3 Column */
.cols-3 .col{
	width:30.83333%;
}
.cols-3 .col-span2{
	width:64.16666%;
}

/* 4 Column */
.cols-4 .col{
	width:22.5%;
}
.cols-4 .col-span2{
	width:47.5%;
}
/* Force break news columns every 4 items (starting with the 4th item) */
.news-col .col:nth-child(4n+4){
	clear:both;
}



/*------------------------------------*\
	BUTTONS
\*------------------------------------*/
.button{
	display:inline-block;
	font-size:0.7em;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1em;
	padding:15px 50px;
	border:1px solid #0092b7;
	background:rgba(0,146,183,0.2);
	border-radius:100px;
	cursor:pointer;
	position:relative;
	z-index:1;
	-webkit-appearance:none;
	transition:0.15s linear all;
}
.button:hover,
.button:focus{
	color:#fff;
	background:#0092b7;	
}

.button-white{
	color:#fff;
	border-color:#fff;
	background:rgba(255,255,255,0.2);
}
.button-white:hover,
.button-white:focus{
	color:#0092b7;
	background:#fff;
}

.button-video{
	padding:30px 100px 30px 45px;
	background-color:transparent;
	background:transparent url(../img/icons/play-button.png) right no-repeat;
	background-size:77px 32px;
}
.button-video:hover,
.button-video:focus{
	color:#fff;
	background:#f6a24c url(../img/icons/play-button.png) right no-repeat;
}




/*------------------------------------*\
	IMAGES
\*------------------------------------*/
.main-content img{
	width:100%;
	height:auto;
}
.full-width-image{
	overflow:hidden;
}
.full-width-image img{
	width:100%;
	height:auto;
	float:left;
}



/*------------------------------------*\
	BANDS
\*------------------------------------*/
.band{
	padding:100px 0;
	background-position:center;
	background-size:cover;
}
.band-cross-links{
	text-align:center;
	background:#ecf2f3;
}
.band-cross-links h2{
	font-weight:normal;
}

/* Band variations */
.band-light{
	background:#f0f6fa;
}
.band-medium{
	background:#dbE6E8;
}
.band-dark{
	color:#fff;
	background:#383838;
}
.band-blue{
	color:#fff;
	background:#0092b7;
}
.band-blue h2{
	color:#fff;
}
.band-blue a{
	color:#fff;
}
.band-blue a:hover,
.band-blue a:focus{
	color:#efefef;
}
.band-orange{
	background:#f6a24c;
}
.band-orange h2{
	color:#fff;
}

/* Band tooltips */
.band-dark .tooltips,
.band-blue .tooltips{	
	background-image:url(../img/icons/glossary-white.png);
	border-bottom:1px solid #fff;
	border-bottom:1px solid rgba(255,255,255,0.5);
}



/*------------------------------------*\
	BOXES
\*------------------------------------*/
.box{
	padding:50px;
	background:#fff;
	position:relative;
}
.box img{
	max-width:100%;
	height:auto;
}
.box .rollover{
	opacity:0;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:#0092b7;
	background:rgba(0,146,183,0.93);
	color:#fff;	
 	transition:0.15s linear opacity;
 	-webkit-transform-style:preserve-3d;
 	-moz-transform-style:preserve-3d;
  	transform-style:preserve-3d;
}
.box .rollover a{
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
}
.box:hover .rollover,
.box:focus .rollover{
	opacity:1;
}
.box-caption{
	font-size:0.8em;
	text-align:center;
	line-height:1.2em;
	color:#a7a7a7;
	margin:15px 0 0 0;
}
.content-main .box-caption{
	font-size:0.66666em;
}



/*------------------------------------*\
	TESTIMONIAL
\*------------------------------------*/
.testimonial{
	overflow:hidden;
}
.testimonial-border{
	border-top:1px solid #bfbfbf;
	border-bottom:1px solid #bfbfbf;
	padding:50px 0 20px 0;
}
.testimonial .avatar{
	width:24%;
	float:left;
}
.testimonial .avatar img{
	width:100%;
	height:auto;
	border-radius:10000px;
}
.testimonial .quote{
	width:70%;
	float:right;
}
.testimonial .quote blockquote{
	font-size:1.46em;
	line-height:1.2em;
}
.testimonial .quote .quoter{
	font-size:0.8333em;
}



/*------------------------------------*\
	MAIN HEADER
\*------------------------------------*/
.main-header{
	position:fixed;
	z-index:100;
	overflow:hidden;
	width:100%;
	padding-top:40px;
	padding-bottom:10px;
	transition:0.5s linear all;
}

.main-header .logo{
	display:block;
	width:237px;
	height:96px;
	text-indent:-99999em;
	background:url(../img/decmt-logo.png);
	background-size:237px 96px;
	float:left;
	transition:0.2s linear all;
}

.logo-institute{
	display:block!important;
	width:464px;
	height:63px;
	background:url(../img/institute-logo.png);
	background-size:464px 63px;
    z-index: 1000;
    margin-left: 280px;
}



.main-header .nav-trigger{
	display:none;
}
.main-header .main-navigation{
	display:block;
	float:right;
}
.main-header .main-navigation ul{
	list-style:none;
	border:none;
	padding:0;
	margin:0;
	font-weight:normal;
}
.main-header .main-navigation ul li{
	display:inline-block;
	margin-left:15px;
}
.main-header .main-navigation ul li a{
	display:block;
	font-size:0.75em;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
	padding:20px 10px;
}
.main-header .main-navigation ul li.current-menu-item a,
.main-header .main-navigation ul li.current-page-ancestor a,
.main-header .main-navigation ul li.current_page_parent a,
.main-header .main-navigation ul li a:hover,
.main-header .main-navigation ul li a:focus{
	color:#9b9b9b;
}

/* Docked header */
.main-header-docked{
	padding-top:20px;
	background:#f0efef;
	background:rgba(255,255,255,0.93);
}
.main-header-docked .logo{
	display:block;
	width:58px;
	height:58px;
	text-indent:-99999em;
	background:url(../img/decmt-logo-docked.png);
	background-size:58px 58px;
	float:left;
}

    .main-header-docked .logo-institute {
        display: none!important;
    }

.main-header-docked .main-navigation ul li a{
	color:#383838;
}



/*------------------------------------*\
	MASTHEAD
\*------------------------------------*/

/* Base masthead styles */
.masthead{
	position:relative;
	color:#fff;
	background:#9fb4c9;
	background-position:center;
	background-size:cover;	
}
.masthead .masthead-overlay{
	padding:260px 0 100px 0;	
	background:-moz-linear-gradient(top, rgba(0,0,0,0.77) 0%, rgba(85,83,83,0.77) 100%);
	background:-webkit-linear-gradient(top, rgba(0,0,0,0.77) 0%,rgba(85,83,83,0.77) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,0.77) 0%,rgba(85,83,83,0.77) 100%);
}
.masthead p{
	font-size:1.15em;
	text-align:center;
	margin-top:30px;
	margin-bottom:40px;
}
.masthead p.pre-title{
	font-size:0.9em;
	text-transform:uppercase;	
	color:#fff;
	color:rgba(255,255,255,0.7);
	margin-top:0;
	margin-bottom:20px;	
}

/* Specific mastheads */
.masthead-home{
	padding:200px 0 150px 0;
}
.masthead-home .video{
	overflow:hidden;	
}
.masthead-home .video video{
	position:absolute;
	top:50%; 
	left:50%; 
	min-width:100%;
	min-height:100%;
	width:auto; 
	height:auto; 
	z-index:0; 
	margin-top:-75px;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.masthead-home .video-overlay{
	position:absolute;
	top:50%; 
	left:50%; 
	min-width:100%;
	min-height:100%;
	width:auto; 
	height:auto; 
	z-index:0; 
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
	background:rgba(0,0,0,0.75);
}
.masthead-features{
	margin:80px 0 0 0;
}
.masthead-home .scroll-arrow{
	position:absolute;
	left:50%;
	bottom:30px;
	margin-left:-12px;
	width:24px;
	height:13px;
	background:url(../img/icons/scroll-arrow.png);
	background-size:24px 13px;
}



/*------------------------------------*\
	MODAL VIDEO
\*------------------------------------*/
#modal-video{
	display:none;
	padding:50px;
}



/*------------------------------------*\
	FEATURES
\*------------------------------------*/
.feature{
	padding:20px;
	font-size:0.9em;
	text-align:center;
	height:205px;
	background-color:#f6a24c;
	background-position:center;
	background-size:cover;
	position:relative;
	border-radius:10px;
	-webkit-transform-style:preserve-3d;
 	-moz-transform-style:preserve-3d;
  	transform-style:preserve-3d;
}
.feature a{
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	color:#fff;
	text-transform:uppercase;
}
.feature a:hover,
.feature a:focus{
	color:#9b9b9b;	
}

/* Split features */
.split-feature{
	overflow:hidden;
}
.split-feature .feature{
	height:285px;
	border-radius:0;
	box-sizing:border-box;
	width:50%;
	float:left;
}
.split-feature .feature .button{
	font-size:0.75em;
	padding:25px 50px;
}

/* Specific features */
.feature-about{
	background:#057ea9 url(../img/backgrounds/bg-feature-about.jpg) center;
	background-size:cover;
}
.feature-make-a-difference{
	background:#a4b406 url(../img/backgrounds/bg-feature-make-a-difference.jpg) center;
	background-size:cover;
}
.feature-trials{
	background:#d7668a url(../img/backgrounds/bg-feature-trials.jpg) center;
	background-size:cover;
}

.feature-how-we-can-help-you{
	background:#0092b7 url(../img/backgrounds/bg-feature-how-we-can-help.jpg) center;
	background-size:cover;
}


.feature-meet-the-team{
	background:#d17489 url(../img/backgrounds/bg-feature-meet-the-team.jpg) center;
	background-size:cover;
}



/*------------------------------------*\
	PAGE INTRO BASE STYLES
\*------------------------------------*/
.page-intro{
	text-align:center;
	width:66%;
	margin:0 auto;	
}
.page-intro h2{
	font-size:1.85em;
	font-weight:normal;
	color:#383838;
}
.page-intro p{
	font-size:1.15em;
	color:#727a7f;
}



/*------------------------------------*\
	HOME
\*------------------------------------*/
.joint-objectives{
	text-align:center;
	width:66%;
	margin:0 auto;	
}
.joint-objectives h2{
	font-size:1.85em;
	font-weight:normal;
	color:#383838;
	padding-top:80px;
	background:url(../img/icons/joint-objectives.png) top center no-repeat;
	background-size:131px 64px;
}
.joint-objectives ol{
	list-style:none;
	margin:0;
	padding:0;
	border:none;
	font-size:1.15em;
	font-weight:normal;
	background:url(../img/joint-objectives-keyline.png) center no-repeat;
	background-size:2px 160px;
	overflow:hidden;
}
.joint-objectives ol li{
	width:50%;
	float:left;
	padding:65px 30px 0 30px;
	box-sizing:border-box;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:42px 42px;
}
.joint-objectives ol li.objective01{
	background-image:url(../img/icons/joint-objective01.png);
}
.joint-objectives ol li.objective02{
	background-image:url(../img/icons/joint-objective02.png);
}



/*------------------------------------*\
	ABOUT
\*------------------------------------*/
.page-intro-about h2{
	padding-top:80px;
	background:url(../img/icons/intro-about.png) top center no-repeat;
	background-size:96px 61px;
}



/*------------------------------------*\
	ARTICLES
\*------------------------------------*/
.box-article{
	position:relative;
	z-index:1;
}
.box-article .box-article-image{
	height:280px;
	background:#dbe6e8;
	background-position:center;
	background-size:cover;
}
.box-article .box-article-info{
	clear:left;
	background:#fff;
	padding:30px 50px 10px 50px;
	border-bottom:1px solid #0092b7;
}
.box-article .box-article-info h2{
	font-size:1.25em;
	font-weight:normal;
	line-height:1.2em;
	color:#383838;
	margin-bottom:10px;
}
.box-article a:hover h2,
.box-article a:focus h2{
	text-decoration:underline;
}
.box-article .box-article-info p{
	font-size:0.85em;
	line-height:1.2em;
	color:#727a7f;
}
.box-article .box-article-info p.date{
	font-size:0.941em;
	text-transform:uppercase;
	color:#92aaaf;
	margin-bottom:5px;
}
.box-article a{
	text-decoration:none;
}

/* Featured box */
.box-article-feature .box-article-image{
	height:520px;
}
.box-article-feature .box-article-info{
	position:absolute;
	bottom:60px;
	width:53%;
	background:rgba(255,255,255,0.9);
	box-sizing:border-box;
}

/* Feature box keylines */
.box-article-patient .box-article-info{
	border-color:#c48187;
}
.box-article-nurse .box-article-info{
	border-color:#328eb2;
}
.box-article-physician .box-article-info{
	border-color:#94a7ad;
}
.box-article-trial-coordinator .box-article-info{
	border-color:#eea65a;
}
.box-article-sponsor .box-article-info{
	border-color:#bfbc41;
}



/*------------------------------------*\
	ARTICLE SHARING
\*------------------------------------*/
.share-article{
	margin-top:50px;
	text-align:center;
	padding:35px 0;
	border-top:1px solid #bfbfbf;
	border-bottom:1px solid #bfbfbf;
}



/*------------------------------------*\
	ARTICLE NAVIGATION
\*------------------------------------*/
.post-navigation{
	overflow:hidden;
}
.post-navigation ul{
	list-style:none;
	margin:40px 0 0 0;
	padding:0;
	border:none;
	font-weight:normal;
}
.post-navigation li.previous,
.post-navigation li.back{
	float:left;
}
.post-navigation li.next{
	float:right;
}



/*------------------------------------*\
	MEET THE TEAM
\*------------------------------------*/
.page-intro-team{
	padding-top:80px;
	background:url(../img/icons/intro-team.png) top center no-repeat;
	background-size:103px 57px;
	margin-bottom:60px;
}
ul.team-grid{
	list-style:none;
	margin:0;
	padding:0;
	border:none;
	font-weight:normal;
	position:relative;
}
.team-grid li{	
	display:inline-block;
	padding:0;
	margin:0;
	width:33.333%;
	box-sizing:border-box;	
	cursor:pointer;
	background-position:center;
	background-size:cover;
	transition:0.10s linear all;
}
.team-grid li a{
	display:block;
	padding:200px 15px 40px 40px;
	height:150px;
	font-size:1.5em;
	font-weight:700;
	color:#fff;
	background:rgba(255,255,255,0.4);
	text-decoration:none;
	position:relative;
}
.team-grid li a span{
	display:block;
	font-size:0.56666em;
	font-weight:400;
	line-height:1.2em;
}
.team-grid li a:hover,
.team-grid li a:focus{
	background:rgba(255,255,255,0.25);
}
.team-grid li .bio{
	position:absolute;
	left:0;
	top:auto;
	width:100%;
	padding:50px 0;
	display:none;
}
.team-grid li.current a{
	background:none;
	text-indent:-99999em;
}
.team-grid .bio-header{
	overflow:hidden;
}
.team-grid .bio-header h2{
	float:left;
	font-size:1.75em;
	font-weight:normal;
	color:#383838;
}
.team-grid .bio-header h2 span{
	display:block;
	font-size:0.571em;
	font-weight:bold;
	color:#727a7f;
}
.team-grid .bio .close{
	float:right;
	width:52px;
	height:52px;
	padding:0;
	text-indent:-9999em;
	background:url(../img/icons/close.png);
	background-size:52px 52px;
}



/*------------------------------------*\
	COLLABORATIONS
\*------------------------------------*/
.page-intro-collaborations h2{
	padding-top:80px;
	background:url(../img/icons/intro-collaborations.png) top center no-repeat;
	background-size:114px 55px;
}



/*------------------------------------*\
	GRID LAYOUT
\*------------------------------------*/
.grid{
	display:table;
	width:100%;
	height:100%;
	margin:100px 0;
}
.grid .grid-row{
	display:table-row;	
	overflow:hidden;
}
.grid .grid-item{
	display:table-cell;
	width:50%;
	height:100%;
	vertical-align:top;	
}
.grid .grid-item-image{
	background-position:center;
	background-size:cover;
}
.grid .grid-item-text{
	padding:95px;
	color:#fff;
	background:#0092b7;
	box-sizing:border-box;
	position:relative;	
}
.grid .grid-item-text .grid-item-text-content{
	min-height:300px;
}
.grid .grid-item-text h2{
	font-size:1.5em;
	font-weight:normal;
	color:#fff;
}
.grid .grid-item-text .grid-item-text-keyline{
	position:absolute;
	left:95px;
	right:95px;
	bottom:95px;
	height:1px;
	background:rgba(255,255,255,0.5);
}

/* Grid item text box variations */
.grid .grid-item-text-orange{
	background:#f6a24c;
}
.grid .grid-item-text-green{
	background:#b6c607;
}
.grid .grid-item-text-pink{
	background:#d17489;
}




/*------------------------------------*\
	REFERENCES
\*------------------------------------*/
.references h2{
	font-weight:normal;
	padding-bottom:10px;
	border-bottom:1px solid #bbc1c6;
	margin-bottom:15px;
}
.references h3{
	font-size:1em;
	color:#727a7f;
	margin:40px 0 20px 0;
}
.references p,
.references li{
	font-size:0.9em;
	color:#727a7f;
}




/*------------------------------------*\
	FOOTER
\*------------------------------------*/
.main-footer{
	padding:150px 0;
	text-align:center;
	background:#dbe6e8;	
}
.main-footer h2{
	font-weight:normal;
	font-size:2.7em;
	color:#383838;
	margin-bottom:30px;
}
.main-footer .send-email{
	font-size:1.35em;
}
.main-footer .send-email span{
	display:block;
}
.main-footer .copyright{
	font-size:0.9em;
	color:#80878c;
	margin-top:100px;
	padding-top:65px;
	background:url(../img/footer-keyline.png) top center no-repeat;
	background-size:4000px 38px;
}



/*------------------------------------*\
	MISCELLANEOUS
\*------------------------------------*/
.mb{
	margin-bottom:30px;
}
.accessibility{
	position:absolute;
	left:-999999em;
}



/*------------------------------------------------------------*\
	RESPONSIVE LAYOUTS
\*------------------------------------------------------------*/

@media screen and (max-width: 1760px){	
	
	.inner-wrapper{
		width:70%;
	}
	
	/* Tweak box heights */
	.box-article .box-article-image{
		height:250px;
	}
	.box-article-feature .box-article-image{
		height:490px;
	}
	
}

@media screen and (max-width: 1505px){	
	
	.inner-wrapper{
		width:80%;
	}
	
	/* Tweak box heights */
	.box-article .box-article-image{
		height:220px;
	}
	.box-article-feature .box-article-image{
		height:460px;
	}
	
}

@media screen and (max-width: 1300px){	
	
	.wrapper{
		width:90%;
	}
	.inner-wrapper{
		width:90%;
	}
	
	/* Tweak box heights */
	.box-article .box-article-image{
		height:190px;
	}
	.box-article-feature .box-article-image{
		height:400px;
	}
	
}

@media screen and (max-width: 1175px){		
	
	.narrow-wrapper{
		width:90%;
	}
	
	/* Typography */
	h1{
		font-size:3em;
	}
	.content-sub h2{
		font-size:1.9em;
	}
	.references h2{
		font-size:1em;
	}
	.references p,
	.references li{
		font-size:0.8em;
	}
	
	/* Remove docked navigation */
	.main-header-docked{
		padding-top:40px;
		background:transparent;
	}
	.main-header-docked .logo{
		width:237px;
		height:96px;
		text-indent:-99999em;
		background:url(../img/decmt-logo.png);
		background-size:237px 96px;
		float:left;
	}
	.main-header-docked .main-navigation ul li a{
		color:#fff;
	}

	/* Mobile navigation */
	.main-header{
		position:absolute;
		padding-bottom:0;
		border-bottom:1px solid #565C60;
	}
	.main-header .wrapper{
		width:100%;
	}
	.main-header .logo{
		width:170px;
		height:69px;
		background-size:170px 69px;
		margin-left:5%;
		margin-bottom:25px;
	}

        .main-header .logo-institute {
            display: none!important;
        }


	.main-header .nav-trigger{
		display:block;
		position:relative;
		float:right;
		width:134px;
		height:134px;
		margin-top:-40px;
		margin-bottom:-25px;
		border-left:1px solid #565c60;
		cursor:pointer;
	}
	.main-header .nav-trigger .menu-icon{
		position:absolute;
		z-index:10;
		display:block;
		top:50%;
		left:50%;
		width:30px;
		height:20px;
		margin-top:-10px;
		margin-left:-15px;		
		transform:rotate(0deg);
		transition:all 0.5s ease-in-out 0s;		
	}
	.main-header .nav-trigger span{
    	display:block;
    	position:absolute;
    	left:0;
    	width:100%;
    	height:3px;
    	background:#c6cfd2;
    	transform:rotate(0deg);
		transition:all 0.25s ease-in-out 0s;
	}
	.main-header .nav-trigger span:nth-child(1){
		top:0;
	}
	.main-header .nav-trigger span:nth-child(2),
	.main-header .nav-trigger span:nth-child(3){
		top:8px;
	}
	.main-header .nav-trigger span:nth-child(4){
		top:16px;
	}
	.main-header .nav-trigger.open span:nth-child(1),
	.main-header .nav-trigger.open span:nth-child(4){
		left:50%;
		top:8px;
		width:0;
	}
	.main-header .nav-trigger.open span:nth-child(2){
		transform:rotate(45deg);
	}
	.main-header .nav-trigger.open span:nth-child(3){
		transform:rotate(-45deg);
	}
	
	.main-header .main-navigation{
		float:none;
		clear:both;
		display:none;
	}
	.main-header .main-navigation ul li{
		display:block;
		margin:0;
		background:#92aaaf;
		border-bottom:1px solid #87959b;
	}
	.main-header .main-navigation ul li a{
		padding:20px 5%;
		background:url(../img/icons/mobile-nav-arrow.png) right no-repeat;
		background-size:52px 13px;
	}
	.main-header .main-navigation ul li.current-menu-item a, 
	.main-header .main-navigation ul li.current-page-ancestor a, 
	.main-header .main-navigation ul li.current_page_parent a, 
	.main-header .main-navigation ul li a:hover, 
	.main-header .main-navigation ul li a:focus{
		color:#383838;
	}
	
	/* Formatting amends */
	.content-sub,
	.content-main{
		width:auto;
		float:none;
	}
	.page-intro,
	.joint-objectives{
		width:80%;
	}
	.feature{
		height:150px;
	}
	.box-article .box-article-info{
		padding:20px 20px 5px 20px;
	}
	.box-article-feature .box-article-info{
		width:75%;
	}
	.box-article .box-article-image{
		height:210px;
	}
	.box-article-feature .box-article-image{
		height:370px;
	}
	.team-grid li{
		width:50%;
	}
	.team-grid li a{
		height:100px;
	}
	.grid .grid-item-text{
		padding:30px;
	}
	.grid .grid-item-text h2{
		font-size:1.2em;
	}
	.grid .grid-item-text .grid-item-text-content{
		min-height:200px;
	}
	.grid .grid-item-text .grid-item-text-keyline{
		left:30px;
		right:30px;
		bottom:30px;
	}
	
	/* Columns */
	.cols-4 .col{
		width:47.5%;
	}
	.cols-4 .col-span2{
		width:100%;
	}
	/* Clear previous forced news column breaks */
	.news-col .col:nth-child(4n+4){
		clear:none;
	}
	/* Force break news columns every 2 items (starting with the 2nd item) */
	.news-col .col:nth-child(2n+2){
		clear:both;
	}
	
	/* Tweak masthead video */
	.masthead-home .video video{
		margin-top:-60px;
	}
	
	/* Retina graphics */
	.button-video{
		background:transparent url(../img/icons/play-button@2x.png) right no-repeat;
		background-size:77px 32px;
	}
	.button-video:hover,
	.button-video:focus{
		background:#f6a24c url(../img/icons/play-button@2x.png) right no-repeat;
		background-size:77px 32px;	
	}
	.masthead-home .scroll-arrow{
		background-image:url(../img/icons/scroll-arrow@2x.png);	
	}
	.joint-objectives h2{
		background-image:url(../img/icons/joint-objectives@2x.png);
	}
	.joint-objectives ol li.objective01{
		background-image:url(../img/icons/joint-objective01@2x.png);
	}
	.joint-objectives ol li.objective02{
		background-image:url(../img/icons/joint-objective02@2x.png);
	}
	.page-intro-about h2{
		background-image:url(../img/icons/intro-about@2x.png);
	}
	.page-intro-team{
		background-image:url(../img/icons/intro-team@2x.png);
	}
	.team-grid .bio .close{
		background-image:url(../img/icons/close@2x.png);
	}
	.page-intro-collaborations h2{
		background-image:url(../img/icons/intro-collaborations@2x.png);
	}
	.tooltips{	
		background-image:url(../img/icons/glossary@2x.png);
	}
	.band-dark .tooltips,
	.band-blue .tooltips{	
		background-image:url(../img/icons/glossary-white@2x.png);
	}

	
}


@media screen and (max-width: 750px){	
	
	/* Typography */
	h1{
		font-size:2em;
	}
	.main-footer h2{
		font-size:1.8em;
	}
	
	/* Linearise columns */
	.cols{
		margin-left:0!important;
	}
	.cols .col{
		width:auto!important;
		float:none!important;
	}
	.joint-objectives ol{
		background:none;
	}
	.joint-objectives ol li{
		width:auto;
		float:none;
		margin-bottom:20px;
	}
	.split-feature .feature{
		width:auto;
		float:none;
		height:195px;
	}
	.split-feature .feature .button{
		padding:20px;
	}
	.team-grid li{
		width:100%;
	}
	.team-grid li a{
		height:80px;
		padding:120px 15px 40px 40px;
	}
	.grid,
	.grid .grid-row,
	.grid .grid-item{
		display:block;
	}
	.grid .grid-item-image{
		height:150px;
	}
	.grid .grid-item{
		width:100%;
	}
	.box-article .box-article-image{
		height:210px;
	}
	.box-article-feature .box-article-image{
		height:330px;
	}
	
	/* Formatting amends */
	.page-intro,
	.joint-objectives{
		width:auto;
	}
	.testimonial .avatar{
		width:50%;
		float:none;
		margin-bottom:20px;
	}
	.testimonial .quote{
		float:none;
		width:auto;
	}
	#modal-video{
		padding:20px;
	}
	
	/* Tweak masthead video */
	.masthead-home .video video{
		margin-top:0;
	}
	
}





.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}





/*------------------------------------*\
 *   Chris Grave Customisations
 *         
\*------------------------------------*/

/* The following overides styling being applied
 * to the  image under the 'Tools we use' 
 * on the  'About Us' page - 11/02/2020 */

.cols.cols-3 .col .box{
        padding: 0px;
        margin: auto;
}

.cols.cols-3 .col .box img{
        display: block;
}

/* Edited the following in order to fit
 * Digital Health Technology Research
 * on Research and Collaborations
 * */



.box-article .box-article-info{
        padding:25px;
}


/* The following applies styling to the footer
 * in order to accomodate changes relating to the
 * contact method     */

.main-footer .inner-wrapper{

        top:60px;
}

.main-footer .button-white{
        font-weight:bold;
        color:#0092b7;
        border-color:#0093b7;
        background:rgba(255,255,255,0.2);
}