/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   GVK custom styles
   ========================================================================== */

html {
}

body {
	margin:0;
	padding:0;
	color:#ffffff;
	font-family: 'Alata', sans-serif;
}

#container {
	width:100vw;
	overflow-x:hidden;
}

#top_bar {
	width:100vw;
	height:70px;
	border-bottom:1px solid #dadada;
	position:fixed;
	top:0;
	background-color: #ffffff;
	box-shadow: 0px 7px 10px rgba(0,0,0,0.2);
	z-index:100;
}

#logo {
	height:26px;
	width:160px;
	float:left;
	margin-left:100px;
	margin-top:20px;
	background-image: url("../img/logo_kannak.png");
	background-size: 100%;
}

#logo_novalum {
	height:26px;
	width:160px;
	float:left;
	margin-left:100px;
	margin-top:20px;
	background-image: url("../img/logo_NOVALUM.png");
	background-size: 100%;
}

#menu_button {
	height:26px;
	width:26px;
	float:right;
	margin-right:100px;
	margin-top:20px;
	background-image: url("../img/menu_button.png");
	background-size: 100%;
	transition:all 0.2s ease;
}

#menu_button:hover {
	cursor:pointer;
	transform: rotate(90deg);
}

nav {
	width:100vw;
	height:100vh;
	position:fixed;
	background-color:rgba(0,0,0, 0.9);
	z-index:1001;
	text-align:center;
	padding-top:10vh;
	display:none;
}

nav a {
	font-size:3em;
	color:#fff;
	text-decoration: none;
}

a {
	text-decoration:none;
}

nav a:hover {
	color:#ffc200;
}

nav li {
	list-style:none;
}

#home_section {
background-color:#292929;
  background: url("../img/home.jpg") no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
	height:calc(85vh - 200px);
	width:100vw;
	padding-top:25vh;
}

#home_section_ruc {
	background-color:#292929;
  background: url("../img/ruc.jpg") no-repeat top fixed; 
  -webkit-background-size: 100%; /* pour anciens Chrome et Safari */
  background-size: 100%; /* version standardisée */
	height:25vh;
	width:100vw;
	padding-top:25vh;
}

#home_punchline {
	float:left;
	width:40vw;
	margin-left:10vw;
}

#home_section h1, #home_section_ruc h1 {
  color:#ffc200;
	font-size:1.2em;
	margin:0;
}

#home_section h2, #home_section_ruc h2 {
  font-size:3.8em;
	margin:0;
}

#home_text {
	font-size:1.2em;
	width:30vw;
	max-width:15em;
	float:left;
	margin-left:10vw;
	margin-top:3.2em;
}

.yellow_dash {
	border-bottom:3px solid #ffc200;
	margin-top:1em;
	width:50px;
}

.black_dash {
	border-bottom:3px solid #000;
	margin-top:1em;
	width:50px;
	margin-bottom:3em;
}

.white_dash {
	border-bottom:3px solid #fff;
	margin-top:1em;
	width:50px;
	margin-bottom:3em;
}

section {
	width:100vw;
	height:auto;
	
}

.section_content h1, .split_section_content h1 {
	font-size:1.2em;
	margin-top:0;
	padding-top:2em;
}


.section_content {
	width:80%;
	margin:auto;
}

.golden_bkg {
	background: url("../img/golden_bkg.jpg") no-repeat center scroll; 
  -webkit-background-size: 100% 100%; /* pour anciens Chrome et Safari */
  background-size: 100% 100%; /* version standardisée */
}

.grey_bkg {
	background-color:#f4f4f4;
}

.white_bkg {
	background-color:#fff;
}

.black_bkg {
	background-color:#111111;
}

.blue_bkg {
	background-color:#0083df;
}
.auto_height {
	
}

.full_height {
	height:calc(100vh - 70px);
}

.block_4 {
	width:15vw;
	margin-left:4vw;
	float:left;
}

.block_3 {
	width:22vw;
	margin-left:4vw;
	float:left;
}

.block_4 img {
	width:30px;
	
}


.block_5 {
	width:11vw;
	margin-left:4vw;
	float:left;
}

.block_5 img {
	width:50px;
	
}



.fixed {
	position:fixed;
}
.registered {
	font-size:0.5em;
	padding-left:0.1em;
	vertical-align:super;
}

.clear {
	clear:both;
	
}

.space {
	clear:both;
	height:5em;
}

.little_space {
	clear:both;
	height:2.5em;
}

.big_h2 {
	font-size:3em;
}

.margin {
	margin-left:4vw;
}
.half_left {
	margin-left:4vw;
	width:34vw;
	float:left;
}

.half_right {
	margin-left:4vw;
	width:34vw;
	float:left;
}

.width_70vw {
	width:50vw;
}

.block_split_section {
	margin-left:4vw;
	width:24vw;
	float:left;
}

.shift_up {
	margin-top:-5em;
	text-align:center;
}

.shift_up img {
	width:23em;
}

.secondary_page {
	margin-top:-5em;
	text-align:center;
}

.secondary_page img {
	width:23em;
}

.modeling_image img {
	width:100%;
}

#cathode_design_image {
	margin-top:3em;
}
#cathode_design_image img {
	width:100%;
}

.team_image {
	margin-top:0;
}
.team_image img {
	width:60%;
	filter: grayscale(100%);
	transition:filter 0.5s ease;
}

.team_image img:hover {
	filter: grayscale(0%);
}

.disapear {
	z-index:1000;
	transition:opacity 1s ease;
	
	}

.disapear:hover {
	opacity:0;
	cursor:pointer;
}
.split_section_left {
	width:50vw;
	min-height:400px;
	float:left;
}
.split_section_right {
	width:50vw;
	float:right;
}

.split_section_right img {
	margin-left:4vw;
}

.split_section_left img {
	margin-left:4vw;
}

.split_section_content {
	margin-left:10vw;
	margin-right:10vw;
}


#toggle_procedure {
	height:0;
	overflow: hidden;
	transition: all 1s ease;
	text-align: center;

}

#toggle_procedure img {
	width:70%;
	margin:30px 0 50px 0;
}

#partners img {
	width:160px;
	margin-left: 3vw;
}

#partners {
	
}

#RuC_schema img {
	width:100%;
}

.split_section_image img {
	width:100%;
}

#clients {
	width:90%;
	margin-left:2vw;
}

#clients img {
	max-width:100%;
}

#contact {
	 background: url("../img/kan-nak_aluminium.jpg") no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

.btn, .btn2 {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 3px solid #ffc200;
  border-radius: 2em;
  color: #ffffff;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  padding: 0.6em 1.6em 0.7em 1.6em;
  text-decoration: none;
  text-align: center;
	float:left;
	margin:2em 2em 0 0;
}
.btn:hover, .btn:focus, .btn2:hover {
  color: #000;
  outline: 0;
}

.btn2:focus {
  color: #000;
  outline: 0;
}
.fourth {
  border-color: #ffc200;
  color: #E5E5E5;
  background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-image: linear-gradient(45deg, #ffc200 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.fourth:hover {
  background-position: 0;
}

.narrow_p {
	width:50%;
}

.transparent {
	color:transparent;
}

#fields_improvement {
	min-height:100vh;
}
#big_circle {
	position:absolute;
	width:80vw;
	text-align: center;
	z-index:1;
}

#big_circle img {
	width:35vw;
}

#big_circle_txt_container {
	position:absolute;
	z-index:3;
}

.big_circle_quarter h3 {
	font-size:2em;
}

.big_circle_quarter {
	margin-left:12vw;
	width:24vw;
	position:relative;
	z-index:3;
	float:left;
	height:20vw;
}

.big_circle_quarter ul {
	max-width: 20em;
}

.call_to_action {
	text-align:center;
	padding-top:5vh;
}

.call_to_action h2 {
	margin:0;
	font-size:3em;
}

.call_to_action_btn {
	width:10em;
	margin:auto;
}

#footer {
	color:#888888;
	font-size:0.8em;
	padding-top:20px;
	padding-bottom:20px;
}

.black {
	color:#000000;
}

.black a {
	color:#000000;
	transition:opacity 0.3s ease;
}

.black a:hover {
	opacity:0.6;
}

.white {
	color:#ffffff;
}

.yellow {
	color:#ffc200;
}

.blue {
	color:#0083df;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media screen and (max-width: 1100px) {


#home_section h2, #home_section_ruc h2 {
  font-size:2.8em;
	margin:0;
}
	
.width_70vw {
	width:70vw;
}
	
	.big_h2 {
	font-size:2.8em;
}
	
	.block_4 {
	width:32vw;
	padding-bottom:30px;
	min-height:7em;
		
}

	.big_circle_quarter {
	height:30vw;

}
	
}

@media screen and (max-width: 860px) {

#logo {
	margin-left:50px;
}

#menu_button {
	margin-right:50px;

}
.block_4 {
	width:80vw;
	float:none;
	margin-left:0;
}

.block_3 {
	width:80vw;
	float:none;
	margin-left:0;
		
}

#home_punchline {
	float:none;
	width:80vw;
	margin-left:10vw;
}
	
#home_section {
	height:auto;
	padding-bottom:70px;
}

#home_section_ruc {
	background-color:#292929;
  background: url("../img/ruc_mobile.jpg") no-repeat top fixed; 
  -webkit-background-size: 100%; /* pour anciens Chrome et Safari */
  background-size: 100%; /* version standardisée */
	padding-top:13vh;
}
	
#home_text {
	width:80vw;
}
	
.block_4 {
	width:80vw;
	float:none;
		
}
	
.half_left {
		width:80vw;
		margin-left:0;
		float:none;
	}
	
.half_right {
		margin-left:0;
		width:80vw;
		float:none;
	}
	
.block_5 {
	width:80vw;
	margin-left:0;
	float:none;
}
	
.split_section_right {
	width:100vw;
		float:none;
	}
	
.split_section_left {
		float:none;width:100vw;
	}
.block_split_section {
	margin-left:0;
	width:80vw;
	float:none;
}
	
.shift_up {
	margin-top:-1em;

}
	
.shift_up img {
	width:80%;

}

.secondary_page {
	margin-top:2em;

}
	
.secondary_page img {
	width:80%;

}
	
.team_image img {
	margin-top:20px;
}
	
	
#toggle_procedure img {
	width:100%;
}

	
#big_circle {
	position:relative;
	width:80vw;
	text-align: center;
	z-index:1;
}
	
.big_circle_quarter {
	margin-left:0;
	width:80vw;
	position:relative;
	z-index:3;
	float:none;
	height:auto;
}
	
	.split_section_right img {
	margin-left:0;
}

.split_section_left img {
	margin-left:0;
}

	
}


@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}