body { font-family: Open Sans, sans-serif}

/* Regular fonts */
h1 { color: #034085; font-size: 1.5em; font-weight: bold; }
h2 { color: #034085; font-size: 1.2em; font-weight: bold; }
h3 { color: #db2f37; font-weight: bold; }
p { margin-bottom: 10px; }
ul li { line-height:1em; }
em { font-style: italic }

#container { margin-bottom: 100px; }
#header { background: #fff; position: relative;  }
#header .inner { position: relative; }
#header .logo { text-align: center; }
#header .logo img { width: 170px;}
#header .contactdetails { padding-bottom: 10px; text-align:center; color: white;  }
#header .contactdetails p { display: inline; margin-right: 10px; font-size: 0.8em; font-weight: 300; } 
#header .contactdetails p:last-child { margin-right: 0px }
#header .contactdetails p a { color: white; text-decoration: none; }
#header .search { display: none;  }


#header .logo {
    width:30%;
    float:left;
    margin:0 !important;
}
#header .logo img{
    max-width:100%;
    height:auto;
    padding:15px 0;
}
.contactPanel {
    width:70%;
    float:left;
}
input.gsc-input {
    background:#fff;
}
.gsc-search-box { width: auto !important; border-collapse: collapse }
table.gsc-search-box { width: 200px !important; }
.gsc-input:before { }
td.gsc-input { width: 200px; text-align: right; padding: 0px !important; }
.gsc-input input { width: 120px !important; margin-left: 5px;  height: 20px !important; }
.gsc-search-button  { width: 10px; margin: 0px !important; border: 0px !important; border-radius: 0px !important; cursor: pointer; }
.gsc-clear-button { display: none }

.inner { max-width: 900px; margin: 0px auto;}

/* To handle iFrames in a responsive way */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* General Aspect Ratio */
.intrinsic-container {
  padding-bottom: 41.50%;
}
 
/* 16x9 Aspect Ratio - For YouTube */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
} 
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mainmenucontainer { width: 100%; }

nav.mainmenu a#pull { display: block; width: 100%; position: relative; text-decoration: none }  
nav.mainmenu a#pull:after { position: absolute; top: -27px; content:""; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; background: url('../images/nav-icon.png') no-repeat; }  
nav.mainmenu a#pull.open:before { content: "Menu:"; border-bottom: 1px solid #bebebe; background: #4b4b4b; color: #ffc600; padding: 10px; font-size: 16pt; text-decoration: none; width: 200px; position: absolute; top: -42px; }
nav.mainmenu a#pull.open:after { content: "x"; position: absolute; top: -38px; right: -5px; background: none; color: white; font-size: 20pt; }

nav.mainmenu { width: 200px; padding: 0px; z-index: 1000; position: absolute; top: -40px; right: 0px; border-radius: 5px }  
nav.mainmenu ul { display: none; height: auto; }  
nav.mainmenu ul li { position:relative; width: 200px; display: block; padding: 8px 8px 8px 12px; margin: 0px; z-index: 3000; text-transform: uppercase; 
    border-bottom: 1px solid #bebebe; 
    background: #606060; /* Old browsers */
    background: -moz-linear-gradient(left,  #606060 0%, #939393 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#606060), color-stop(100%,#939393)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #606060 0%,#939393 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #606060 0%,#939393 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #606060 0%,#939393 100%); /* IE10+ */
    background: linear-gradient(to right,  #606060 0%,#939393 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#939393',GradientType=1 ); /* IE6-9 */
}
nav.mainmenu ul li { color: white; text-decoration: none; line-height:1em; font-weight: bold; border-right: 1px solid #fff; }
nav.mainmenu ul li a { color: white; text-decoration: none; line-height:1em; font-weight: 300; color: white; text-decoration: none; line-height:1em; }
nav.mainmenu ul li.hasdropdown { cursor: pointer; font-weight: bold; border-right: 1px solid #fff; }
nav.mainmenu ul li.hasdropdown:last-of-type {
    border:none;
}
nav.mainmenu ul li a:hover { text-decoration: underline }
/*nav.mainmenu ul li:last-child { background: #db2f37 }*/
nav.mainmenu ul li.highlight { background: #db2f37 } /* Replaced the above line so that any menu item can be highlighted, not just the last item */
nav.mainmenu ul li .dropdown { display: none; margin-top: 10px; margin-left: -12px; border: none; }


nav.mainmenu ul li.hasdropdown:after { content: "v"; position: absolute; right: 15px; top: 12px; font-size: 8pt; font-weight: 300; color: white; 
    -webkit-transform:scale(2.0, 1.0);
    -moz-transform:scale(2.0, 1.0);
    -ms-transform:scale(2.0, 1.0);
    -o-transform:scale(2.0, 1.0);
    transform:scale(2.0,1.0);
}
nav.mainmenu ul li.hasdropdown:hover {
    background:#636363 !important;
}
nav.mainmenu ul li.open { padding-bottom: 0px }
nav.mainmenu ul li.open.hasdropdown:after { 
    -webkit-transform:scale(-2.0, -1.0);
    -moz-transform:scale(-2.0, -1.0);
    -ms-transform:scale(-2.0, -1.0);
    -o-transform:scale(-2.0, -1.0);
    transform:scale(-2.0,-1.0);
}
nav.mainmenu ul li.open .dropdown { display: block; }
nav.mainmenu ul li .dropdown ul li { background: white; color: black;  border: none; padding: 8px 10px 5px 10px; }
nav.mainmenu ul li .dropdown ul li:last-child { padding-bottom: 10px; }
nav.mainmenu ul li .dropdown ul li a { font-size: 10pt; margin-left: 0px; color: black;}

.inner .contactdetails {
    position:initial;
    display:block;
    text-align:right;
    padding:15px 0;
}
.inner .contactdetails ul li {
    display: inline-block;
    margin-left: 0;
    margin-right: 10px;
}
.inner .contactdetails ul li:last-of-type {
    display: inline-block;
    margin-right: 0;
}
#header .inner {
  /*  height:139px; Removed because it stopped the menu preview working in the backend */ 
}
.inner .contactdetails ul li a{
    display:inline-block;
    padding:10px 25px;
    background:#db2f37;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
}

#breadcrumbs { position: relative; height: 38px; width: 100%; background: #191c39; color: #fff; }
#breadcrumbs .inner { padding: 10px; font-size: 0.7em; }
#breadcrumbs li { float: left; margin-left: 30px; padding-left: 9px; }
#breadcrumbs li a { text-decoration: none; color: #fff; }
#breadcrumbs li.homecrumb { list-style: none; margin-left: 0px; padding-left: 0px }
#breadcrumbs li.homecrumb a { color: #ccc; }

.bannerpreview { width: 600px }
.banner .slide, .bannerpreview .slide { position: relative; }
.banner .slide img, .bannerpreview.slide img { width: 100%; }

.banner .slick-prev { left: 0px; }
.banner .slick-next { right: 6px; }
.banner .slick-dots { bottom: -30px; }
.banner .slick-dots li button:before { font-size: 8px !important;  }

.inner ul {	list-style-type: square; }
.inner ul li { margin-left: 20px; line-height:1.2em; padding-left: 10px; }

.inner .prompanel ul li { font-size: 0.8em; }

.prompanel, .prompanel img { width: 270px; }
.prompanel { margin-bottom: 20px; }
.prompanel h2 { color: #ce1126; text-transform: uppercase; border:none; 
    font-size: 1.5em;
    margin: 0px !important; padding: 10px; padding-bottom:0px;
  }
.prompanel .text { padding: 10px; margin: 0px !important; font-size: 18px }

.prompanelpreview { width: 100px !important; height: 131px !important;   } 
.prompanelpreview .prompanel { transform: scale(0.5); -moz-transform-origin: 0 0; }

.prompanelslider { cursor: pointer; height: 248px; }
.prompanel .bodytext { padding: 10px; }
.prompanelslider .bodytext { display: none; }
.prompanel .bodytext p:first-child { margin-top: 0px}

#content .inner { padding: 10px; font-size: 0.7em; }

.contentpanel { margin: 10px; padding-bottom: 10px; }
.contentpanel h2 { color: #db2f37; text-transform: uppercase }
.contentpanel p { font-size: 0.9em; }

.logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
.logoitembox img { width: 100px; }
.logitemboxright { float: left; width: 70%; }

#social { float: left; width:100% }
#social .middlesocial { margin: 5px auto; width: 180px;  }
#social img { float: left; vertical-align: top; padding: 1px; width: 30px; height: 30px; }

.zoomable { background-color: red; padding: 10px; }

#footer { margin-top: 30px;  }
#footer .sitelinks { background: #ECECEC; }
#footer .sitelinks .col { float: left; width: calc(100% - 20px); padding-bottom: 10px; margin: 10px; }
#footer .sitelinks .colhead { border-bottom: 1px solid #cccccc; text- }
#footer .sitelinks .col ul { float: left; width: 50%; padding-right: 20px; margin-left: 0px; }
#footer .sitelinks .col ul li { list-style: none; font-size: 0.8em; padding: 6px 0px 0px 0px  }
#footer .sitelinks .col ul li a { color: inherit; text-decoration: none; }

#footer .sublinks { text-align: center; margin: 10px 0px; padding: 20px 0px; position: relative; height: 120px;  }
#footer .sublinks p { display: inline-block; margin-right: 10px; font-size: 0.8em; font-weight: 300; margin-bottom: 0px } 
#footer .sublinks p:last-child { margin-right: 0px }
#footer .sublinks .ukyouthlogo { position: absolute; bottom: 5px; right: calc(50% - 85px)}

#footer .institutions { display: none; }

.cookiewarning { position:fixed; bottom: 0px; width: 100%; background: #474b6c; z-index: 1000; padding: 10px }
.cookiewarning .inner { margin: 0px auto; }
.cookiewarning .head { font-size: 0.8em; color: white; margin-right: 20px;   }
.cookiewarning p { color: #bbb; margin: 0px; padding: 0px; font-size: 0.6em}
.cookiewarning a { color: orange; font-size: 0.7em; margin: 0px 0px 0px 0px; padding: 0px}
.cookiewarning a:hover  { color: white; cursor: pointer; }

/* For forms when adding contact form to a webpage */
.label { width: 180px; padding: 5px; margin-top: 3px; float:left; clear: left}
.input { float: left; padding: 5px; }
textarea, input[type="text"], input[type="password"], select { min-width: 200px; font-size: 10pt !important }
select { min-width: 205px }
textarea { width: 500px; height: 100px; } 


table.gsc-search-box td.gsc-input input {
    background:#fff !important;
    padding:0 15px !important;
    width: 319px !important;
    line-height:1 !important;
    height:32px !important;
}
.cse input.gsc-search-button, input.gsc-search-button {
    background:red;
    color:#fff;
}

.cse input.gsc-search-button, input.gsc-search-button {
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    color: #fff !important;
    padding: 15px 0;
    height: 20px;
    min-width: 54px;
    background-color: #db2f37 !important;
    border: 1px solid #666;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    line-height: 1;
    padding: 10px 0 22px 0 !important;
}



.socialMedia {
    width:100% !important;
}
.socialMedia li {
    display:inline-block !important;
    margin-right:5px;
    margin-left:0 !important;
}
.socialMedia li img{
    width:30px;
}
.socialMedia li:last-of-type {
    margin-right:0;
}
@media(max-width:815px) {
  .socialMedia li img{
    width:20px;
}
}
@media(max-width:620px) {
  .socialMedia li img{
    width:30px;
}  
}
@media screen and (max-width: 500px) /* All mobiles */
{
	.logoitembox { float: left; width: width: 30%; margin: 0px auto; margin-bottom: 30px; }
  	.logoitembox img { width: 50%; }  	
}

@media screen and (min-width: 360px) and (max-width: 605px)
{
	.prompanel, .prompanel img { width: 316px; } 
}

@media screen and (min-width: 600px)
{
  nav.mainmenu { top: -50px; }
  #header .logo img { width: unset;}
  #footer .sublinks { height: 110px }
}

@media screen and (min-width: 620px)
{  
  #footer .sitelinks .col { width: calc(33% - 20px); }
  #footer .institutions { display: block; padding: 10px 10px; text-align: center; }  
}

@media screen and (max-width: 700px)
{
	 #breadcrumbs { display: none; }
	 .slick-dots { display: none !important; }
	 .slick-slider { margin-bottom: 0px !important; }
	 #container { margin-bottom: 10px !important; }
}

@media screen and (min-width: 700px)
{
  .left { float: left; width: calc(100% - 350px); }
  .right { float: right; padding: 0px 0px 0px 20px; }
  #content .inner { font-size: 0.8em; } 
  
  .contentpanel { width: calc(50% - 20px); float: left; border-bottom: 1px solid #cccccc;  } /* Only add the border after this width */
  nav.mainmenu { top: -15px; }
  nav.mainmenu a#pull:after { top: -37px; }
  #header .logo { text-align: left; margin-left: 5px }
  #header .contactdetails { text-align:right; position: initial; }
  #header .contactdetails p { margin-right: 40px; font-size: 1.0em;  } 
  
  #social { position: fixed; left: 0px; top: 55%; width: 40px;}
  #social .middlesocial { width: 40px; }
  #social img { vertical-align: top; width: 40px; height: 40px; padding:0px; }
}
@media(max-width:960px) {
    #header .inner {
    height:auto;
}
.headerInner {
    display:flex;
    align-items:center;
}
.logo {
    padding-left:15px;
}
.contactPanel {
    padding-right:15px;
}
}
@media(max-width:700px) {
    .contactdetails {
        display:none !important;
    }
}

@media screen and (min-width: 960px)
{
  #content .inner { font-size: 1em; font-size: 16px; } 
  #breadcrumb .inner { font-size: 0.85em; } 
  #footer .inner { font-size: 1em }
  #header .search {
        display: inline;
    position: initial;
    right: 10px;
    top: 22px;
    color: white;
    float: right;
    margin-top: 20px;    
}


  nav.mainmenu { width: 100%; position: unset; }  
  .mainmenucontainer { width: 100%; height: 35px; 
      background: #034085;  
  }
  
  nav.mainmenu { width: auto; position: static; }  
  nav.mainmenu ul { display: inline; height: auto;  }  
  nav.mainmenu ul li { background: none; float: left; width: auto; padding: 10px 21px 12px 20px; position: relative; font-weight: bold; font-size: 10pt; border: none; }
  nav.mainmenu ul li.hasdropdown:after { content: "" }
  nav.mainmenu ul li:hover a { text-decoration: underline; }
  nav.mainmenu ul li:hover .dropdown ul li a { text-decoration: none; }
  nav.mainmenu ul li:first-child { padding-left: 10px; }
  nav.mainmenu ul li:hover .dropdown, .menu ul li:focus .dropdown  { display: block; }
  nav.mainmenu ul li .dropdown { display: none; position: absolute; top: 25px; left: calc(50% - 75px); margin-left: 0px; background: #f7f7f7; border-radius: 5px; }
  nav.mainmenu ul li .dropdown:before { content: ""; position: absolute; left: 70px; top: -10px; 
	width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent !important; border-bottom: 10px solid #f7f7f7; color: #69BDCC;  }
  nav.mainmenu ul li .dropdown ul { margin-left: -2px; }
  nav.mainmenu ul li .dropdown ul li { padding: 5px 4px 0px 4px; float: none; width: 150px; height: auto; background: none; border-top: 1px solid #cfcfcf; }
  nav.mainmenu ul li .dropdown ul li a { display: block; font-size: 12px; padding: 3px 0px 6px 10px; color: #363636  }
  nav.mainmenu ul li .dropdown ul li a:hover { text-decoration: underline; }
  nav.mainmenu ul li .dropdown ul li:last-child a { padding-bottom: 5px; border-bottom: 1px solid #cfcfcf;}

  nav.mainmenu a#pull { display: none }  
  .contentpanel { width: calc(33% - 20px); float: left; }
  
  .prompanel, .prompanel img { width: 270px; } 
   
  #footer .sublinks { text-align: center; margin: 15px auto; width: 800px; height: 50px }
  #footer .sublinks p { margin-left: 15px; }
  #footer .sublinks .ukyouthlogo { top: -1px; right: 0px }
}

@media screen and (min-width: 950px) and (max-width: 1150px) 
{
  nav.mainmenu ul li { padding: 10px 20px 12px 10px; }
  
}
@media(min-width:960px) {
    .mainmenucontainer {
        float:left;
    }
}
@media screen and (min-width: 1150px)
{
  .inner { max-width: 1100px; }
  .mainmenucontainer { height: 38px; }
  nav.mainmenu ul li { font-size: 12pt; padding: 10px 21px 12px 21px; }
  .prompanel, .prompanel img { width: 316px; } 
  .logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
  .logoitembox img { width: 150px; }
  
  /* Tabbed items on template 2 */
  .ui-tabs  { margin: 20px 0px; padding: 0px; border: none !important; }
.ui-tabs .ui-tabs-nav.ui-widget-header { border-bottom: 0px !important; margin: 0px; padding: 0px; }
.ui-tabs .ui-tabs-nav.ui-widget-header li { background: #121328; border: none; border-radius: 0px !important; width: auto; }
.ui-tabs .ui-tabs-nav.ui-widget-header li a {  color: white; text-shadow: none }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected { background: #DDEEF5; border: none; margin-bottom: 1px !important }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected a {  color: #333; }
.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-state-hover { background: #399ED4; border: none;  }
.ui-tabs .ui-tabs-nav.ui-widget-header li:after { display:none; }
	.ui-tabs .ui-tabs-nav.ui-widget-header li.ui-tabs-selected:after { display:none; }
.ui-tabs-panels .ui-tabs-panel { background: #DDEEF5; border-radius: 0px }
.ui-tabs-panels .ui-tabs-panel a { color: #4444F3 !important; }
}
  
@media screen and (min-width: 1350px)
{
  .inner { max-width: 1350px; }
  .mainmenucontainer { height: 38px; }
  nav.mainmenu ul li { font-size: 12pt; padding: 10px 30px 12px 30px } 
  .logoitembox { float: left; width: 30%; margin: 0px auto; margin-bottom: 30px; }
  .logoitembox img { width: 200px; }
}
@media(max-width:600px) {
    .headerInner {
        display:block;
    }
	#header .logo img {
		max-width:180px;
		height:auto;
		width:180px;
	}
	.prompanel .text {
		font-size:9.8px;
	}
    
	#footer .institutions {
		text-align:center;
	}
	#footer .institutions img {
		margin-bottom:10px;
	}
}
@media(max-width:480px) {
	nav.mainmenu a#pull:after {
		margin-top:0 !important;
	}
	
}
@media(max-width:960px) {
    .prompanel .text {
		font-size:11.2px;
	}
    .bodytext span {
        font-size:11.2px !important;
    }
}
nav.mainmenu ul li a{ cursor: pointer; font-weight: bold;  }
nav.mainmenu ul li a:hover, nav.mainmenu ul > li:hover a {text-decoration:none;}
nav.mainmenu ul li {
	border-right: 1px solid #fff;
}
#footer .institutions {
	display:block !important;
}

@media(max-width:1360px) {
	nav.mainmenu ul li {
		padding:10px 15px 12px 15px;
	}
}
@media(max-width:1150px) {
    nav.mainmenu ul li {
    padding: 10px 12px 12px 12px;
    }
}
@media(max-width:780px) {
	
	#header .search {
		display:block;
		float:right;
	}
	nav.mainmenu a#pull:after {
		top:-65px;
	}
}



@media(max-width:700px) {
	#header .search {
		display:none;
		float:right;
	}
}

@media(max-width:600px) {
		nav.mainmenu a#pull:after {
		top: -22px;
	}
    .overlay .bannerlink {
        padding-left:10px;
    }
    .overlay .redbutton {
        font-size:8px;
    }
    .overlay.LEFT, .overlay.RIGHT {
        width:45% !important;
        height:100% !important;
    }
    .bodytext span {
        font-size:9.8px !important;
    }
}


@media(min-width:779px, max-width:850px) {
    #header .logo img {
		max-width:300px;
		
	}
    nav.mainmenu a#pull:after {
        top:-47px;
    }
}

@media(max-width:850px) {
    top:-67px;
}

table.gsc-search-box td.gsc-input input {
    height:auto !important;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    padding:10px !important;
}
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
width: auto !important;
height: auto !important;
border-color: #474747;
background-color: #474747;
background-image: none;
filter: none;
}
.gsc-input-box {
    height:32px !important;
}
.gscb_a {
    display:none !important;
}
table.gsc-search-box td.gsc-input input {
    height:22px !important;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    box-shadow:none !important;
}
@media(max-width:767px) {
    nav.mainmenu a#pull:after {
		top: -67px;
	}
}
@media(max-width:700px) {
    nav.mainmenu a#pull:after {
        top:-45px;
    }
}
@media(max-width:600px) {
    nav.mainmenu a#pull:after {
        top:-13px;
    }
}
@media(max-width:480px) {
    nav.mainmenu a#pull:after {
        top:-27px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:60px;
	}
	
	}
	
	
	@media(max-width:850px) {
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:72px !important;
	}
	
	}
	
	
	
	@media(max-width:768px) {
    /* Safari and Chrome */
    
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:92px !important;
	}
	
	}
	
	@media(max-width:700px) {
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:45px !important;
	}
	
	}
	
	@media(max-width:600px) {
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:-50px !important;
	}
	
	}
	@media(max-width:480px) {
    /* Safari and Chrome */
    .myClass {
     color:red;
    }
::i-block-chrome, nav.mainmenu {
		top:0px !important;
		margin-top:-40px !important;
	}
	
	}