/* ==========
Title : 			"Studio Theme"
Site URL :			 http://latnel.com/
Description :		 Thème du Site de Latnel
Author :			 Latnel
Author's Site :		 http://latnel.com/
========== */

@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Reset Style */

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;}
fieldset, img { border: 0;}
address, caption, cite, code, dfn, th, var { font-style:normal;font-weight:normal;}
ol, ul { list-style:none;}
caption ,th { text-align:left;}
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;}
abbr, acronym { border:0;}	
a {text-decoration:none; outline: none; }

@-webkit-keyframes animation-background-gradient {
  0% { background-position: 0% 5%; }
  50% { background-position: 100% 95%; }
  100% { background-position: 0% 5%; }
}
@keyframes animation-background-gradient {
  0% { background-position: 0% 5%; }
  50% { background-position: 100% 95%; }
  100% { background-position: 0% 5%; }
}

body {
	font-family:'Calibri';
  	background-image: url(images/background.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:cover;
	background-color:#111;
}

.hero__background-overlay {
	background: rgba(0, 0, 0, 0.8);
	overflow-y: scroll;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
	background-size: 500% 500%;
	animation: animation-background-gradient 30s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
}

#logo {
	width:100%;
	height:300px;
	background: url(images/logo.png) no-repeat top;
	background-size: 780px 300px;
	margin-top:20px;
}

#logo_sagas {
	width:100%;
	height:300px;
	background: url(images/logo.png) no-repeat top;
	background-size: 780px 300px;
	margin-top:20px;
}

p a {
color:#fff;"
}

#presentation {
	background: rgba(17, 17, 17, 0.6);
	height: 250px;
	width:900px;
	margin:0 auto;
	border: 3px solid #111;
	color:#ddd;
}

.presentation_title {
	margin-top:10px;
	font-size:2em;
}

.presentation_description {
	font-size:13px;
}

#footer {
	text-align:center;
	position:fixed;
	bottom:0px;
	height:60px;
	width:100%;
}

.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 30px;
	width: 50px;
	height: 50px;
	margin-top:-10px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.hi-icon:before {
	font-family: 'FontAwesome';
	speak: none;
	font-size: 25px;
	line-height: 50px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.hi-icon-twitter:before {
	content: "\f099";
}

.hi-icon-facebook:before {
	content: "\f09a";
}

.hi-icon-youtube:before {
	content: "\f167";
}

.hi-icon-contact:before {
	content: "\f003";
}

.hi-icon-soundcloud:before {
	content: "\f1be";
}


/* Effect 3 */
.hi-icon-effect-3 .hi-icon {
	box-shadow: 0 0 0 4px #f9fbc2;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.hi-icon-effect-3 .hi-icon:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	-moz-transition: -moz-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}

.hi-icon-effect-3 .hi-icon-twitter:after {
	background: #55acee; 
}

.hi-icon-effect-3 .hi-icon-facebook:after {
	background: #4862a3; 
}

.hi-icon-effect-3 .hi-icon-youtube:after {
	background: #ff7974; 
}

.hi-icon-effect-3 .hi-icon-contact:after {
	background: #f6dac6; 
}

/* Effect 3b */
.hi-icon-effect-3b .hi-icon {
	color: #f9fbc2;
}

.hi-icon-effect-3b .hi-icon:hover {
	color: #b74231;
	
}

.hi-icon-effect-3b .hi-icon:after {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}

.hi-icon-effect-3b .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
	margin:5% 10%;;
}
ul.ul_saga{
    display: block;
    list-style-type: disc;
	margin:0 43%;
}
#hex_indexGrid {
    overflow: hidden;
    width: 90%;
    margin: 0 50px;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hex_indexGrid:after {
    content: "";
    display: block;
    clear: both;
}
.hex_index {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex_index * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex_indexIn {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}

/*** hex_index CONTENT **********************************************************************/
.hex_index img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.hex_index h1, .hex_index p {
    width: 102%;
    left:-1%; /* prevent line on the right where background doesn't cover image */
    padding: 5%;
    box-sizing:border-box;
    background-color: rgba(249, 251, 194, 0.6);
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex_index h1 {
    bottom: 50%;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex_index h1:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
}
.hex_index p {
    top: 50%;
    padding-bottom:50%;
    -webkit-transform:translateY(100%) translatez(-1px);
        -ms-transform:translateY(100%) translatez(-1px);
            transform:translateY(100%) translatez(-1px);
}


/*** HOVER EFFECT  **********************************************************************/
.hex_indexIn:hover h1, .hex_indexIn:focus h1,
.hex_indexIn:hover p, .hex_indexIn:focus p{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}

/*** SPACING AND SIZING *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hex_indexagons per row */
	#logo {
		margin-left:-3px;
	}
	ul, menu, dir {
		display: block;
		list-style-type: disc;
		margin:2% 20%;
	}
	.hex_index {
        width: 32%; /* = (100-4) / 3 */
        padding-bottom: 36.95%; /* =  width / sin(60deg) */
		max-width:400px;
        margin:0.5%;
    
    }
    .hex_index:nth-child(9n+6),
    .hex_index:nth-child(9n+7),
    .hex_index:nth-child(9n+8),
    .hex_index:nth-child(9n+9) {
        margin-top: -4.676%;
        margin-bottom: -4.676%;
		
        margin:0.5%;
		
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex_index:nth-child(9n+6):last-child,
    .hex_index:nth-child(9n+7):last-child,
    .hex_index:nth-child(9n+8):last-child,
    .hex_index:nth-child(9n+9):last-child {
        margin-bottom: 0;
		
        margin:0.5%;
    }
    .hex_index:nth-child(9n+6) {
        margin:0.5%;
        clear: left;
    }
    .hex_index:nth-child(9n+10) {
        margin:0.5%;

        clear: left;
    }
    .hex_index:nth-child(9n+2),
    .hex_index:nth-child(9n+ 7) {
        margin:0.5%;
    }
    .hex_index:nth-child(9n+3),
    .hex_index:nth-child(9n+4),
    .hex_index:nth-child(9n+8) {
        margin:0.5%;
    }
}
@media (max-width: 1200px) and (min-width:901px) {/* <- 4-3  hex_indexagons per row */
	#logo {
		margin-left:-5px;
		width:100%;
		height:225px;
		background: url(images/logo.png) no-repeat top;
		background-size: 585px 225px;
		margin-top:20px;
	}	
	#logo_sagas {
		width:100%;
		height:225px;
		background: url(images/logo.png) no-repeat top;
		background-size: 585px 225px;
		margin-top:20px;
	}
    .hex_index {
        width: 32.33%; /* = (100-3) / 3 */
        padding-bottom: 37.33%; /* =  width / sin(60deg) */
    }
    .hex_index:nth-child(7n+5),
    .hex_index:nth-child(7n+6),
    .hex_index:nth-child(7n+7) {
        margin-top: -6.134%;
        margin-bottom: -6.134%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex_index:nth-child(7n+5):last-child,
    .hex_index:nth-child(7n+6):last-child,
    .hex_index:nth-child(7n+7):last-child {
        margin-bottom: 0;
    }
    .hex_index:nth-child(7n+2),
    .hex_index:nth-child(7n+6) {
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    .hex_index:nth-child(7n+3) {
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    .hex_index:nth-child(7n+8) {
        clear: left;
    }
    .hex_index:nth-child(7n+5) {
        clear: left;
        margin-left: 0.5%;
    }
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hex_indexagons per row */
    #logo {
		width:100%;
		height:200px;
		background: url(images/logo.png) no-repeat top;
		background-size: 520px 200px;
		margin-top:20px;
	}    
	#logo_sagas {
		width:100%;
		height:200px;
		background: url(images/logo.png) no-repeat top;
		background-size: 520px 200px;
		margin-top:20px;
	}
	.hex_index {
        width: 33%; /* = (100-1) / 3 */
        padding-bottom: 38.10%; /* =  width / sin(60) */
    }
    .hex_index:nth-child(5n+4),
    .hex_index:nth-child(5n+5) {
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex_index:nth-child(5n+4):last-child,
    .hex_index:nth-child(5n+5):last-child {
        margin-bottom: 0;
    }
    .hex_index:nth-child(5n+4) {
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    .hex_index:nth-child(5n+2) {
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    .hex_index:nth-child(5n+6) {
        clear: left;
    }
}
@media (max-width: 600px) { /* <- 2-1  hex_indexagons per row */
	 #logo {
		width:100%;
		height:200px;
		background: url(images/logo.png) no-repeat top;
		background-size: 520px 200px;
		margin-top:20px;
	}
	 #logo_sagas {
		width:100%;
		height:200px;
		background: url(images/logo.png) no-repeat top;
		background-size: 520px 200px;
		margin-top:20px;
	}
    .hex_index {
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    }
    .hex_index:nth-child(3n+3) {
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex_index:nth-child(3n+3):last-child {
        margin-bottom: 0;
    }
    .hex_index:nth-child(3n+3) {
        margin-left: 0.5%;
    }
    .hex_index:nth-child(3n+2) {
        margin-left: 1%;
    }
    .hex_index:nth-child(3n+4) {
        clear: left;
    }
	.hi-icon {
		display: none;
	}
}
@media (max-width: 400px) {
    #hex_indexGrid {
        font-size: 13px;
    }
}