﻿/* Use this file to overwrite the basic 'cern' theme
	Stuff included here is for illustrative purposes -

	https://cmscreate.web.cern.ch/_site/files/themes/cern_overwrite/img/bg_cms_b40.jpg
	feel free to delete it.
*/


#header {
	background-image: url('../img/bg_orange.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-color: #333;
	border-bottom-color: #00b0ac;
}

/*.page-fronting #header {
	background-image: url('../img/bg_cms_b40.jpg');
	background-position: bottom right;
}*/
/*
.page-fronting #header,  .page-node-73 #header{
  background-image: url('../img/banners/Banner_Contact_new.jpg');
  background-position: bottom left;
}*/

/* Set a custom size on the logo */
#header h1#logo a img {
	width: 120px;
}

/* Set size and bottom margin of the site title */
#header h2 {
	font-size: 45px;
	font-size: 5rem;
	margin-bottom: 0.3em;
	text-shadow: 0 0 5px #222;
}

/* Set the color for links in the header, including site title */
#header a, #header #site-slogan {
	/*color: #fff;*/
}

/* This sets the banner height - increase margin for deeper banner - make sure bg img is deep enough */
#header #site-slogan {
	margin-bottom: 100px;
	text-shadow: 0 0 5px #222;
	color: #fff
}

/* Main Navigation : These settings affect the main tabs on the site. Note: This overrides the settings in colors.css*/
}

#main-navigation a {
  background: #4d94ce;
  border-color: #4d94ce;
  color: #ffffff;
}


#main-navigation a.active-trail {
  background: #ffffff;
  color: #f58323;
  }
  
#main-navigation a:hover {
  background: #ffffff;
  color: #f58323;
}


/* This changes the appearance of the search button */
#navlinks.button, #navdrop ul li a.active, #navdrop ul li a.active + ul, #search-block-form input[type=submit], #cernsearch-block-form input[type=submit] {
  color: #fefefe;
  background-color: #01b1ad;
}


/* Let's have a dark footer */
html, #footer {
	background: #333;
	color: #999;
	}

#footer .cern-logo img {
	display: none;
}

/* Let's swap out the CERN logo to look good on a dark background */
#footer .cern-logo a {
	display: block;
	width: 80px;
	height: 80px;
	background-image: url('../img/cern_logo/outline_80_white.png');
	background-position: top-left;
	background-repeat: no-repeat;
}

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 99% !important;
  height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .field-content {
  max-width: 100%;
  width: 100%;
}
.views_slideshow_cycle_main .field-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Responsive styles below - these apply only at certain screen sizes */


/*
// -----------------------------------------------------------------
// Large screens
// -----------------------------------------------------------------
*/
@media screen and (min-width: 1300px) {



}




/*
// -----------------------------------------------------------------
// Tablet - portrait
// -----------------------------------------------------------------
*/
@media only screen and (min-width: 768px) {


}



/*
// -----------------------------------------------------------------
// Desktop and Tablet Landscape
// -----------------------------------------------------------------
*/

@media only screen and (min-width: 1024px) {


}



/*
// -----------------------------------------------------------------
// Mobile
// -----------------------------------------------------------------
*/

@media only screen and (max-width: 768px) {


}
