/*
Theme Name: syspertec.fr CSS
Author: SysperTec
Author URI: 
Author e-mail: marketing@syspertec.com
Version: 1.2.1
Created: Nov 2016
License URI: 
File Description: iDea-based custom CSS instructions for www.syspertec.fr website
*/


/* TABLE

1) GENERAL
2) HEADER
3) MAIN CONTENT
4) FOOTER

*/


/* GENERAL 
------------------------------------------------------------------------------------------*/
/*Typographie*/
body { color: #27313c; }
.text-small { font-size: 9px; }
.doctitle { margin-bottom: 3px; }
.modal-content .modal-title { font-weight:500; font-size:20px; }
.modal-content { font-size:12px; }
.bigIcon { font-size: 50px; }
.mediumIcon { font-size: 28px; }

/* Mise en page */
.imgcenter { margin: 0px auto; }
.list-icons img { display:inline; margin-left:-25px; padding-right:5px; vertical-align:text-bottom; }

/* Couleurs */
.fixed-header-on .dark.header.fixed { background-color: #27313c; }
.page-intro, .light .footer { background-color:#e9eaeb; } 
.light .subfooter { background-color:#27313c; color:#e9eaeb; }
.navbar-default .navbar-nav > li > a { color:#e9eaeb; }
.tp-bannertimer { background-color:#0084C9; }
.scrollToTop { background-color:#0b0e12; }
.btn-dark { background-color:#27313c; border-color:#232c36; }
.btn-dark:hover { background-color:#525a62; border-color:#3c454f; }
.vertical .nav-tabs { background-color:#676e76; }
.gray-bg { background-color: #f1f2f3;}
.alpha8-bg { background-color: rgba(255,255,255,0.80); } 



/* HEADER 
------------------------------------------------------------------------------------------*/

.header { padding:10px 0 2px 0; }

/* Survol icone RSS */
.header-top .social-links li.rss a:hover { color: #F26522; background-color: transparent; border-color: transparent; }

/* Ajustements logo Virtel */
@media (max-width: 991px) {
	.logo img { width:200px; }
}
.fixed-header-on .header .logo { margin-top:-10px; }
.logo img:hover { opacity:1; filter:alpha(opacity=100); }

/* Menu langues */
.header-top-dropdown .dropdown-menu { padding:0; width:auto; min-width:190px; }
.header-top-dropdown .dropdown-menu .form-group { margin-bottom:0; border:none; }
.header-top-dropdown .dropdown-menu li { float:right; }
.header-top-dropdown .dropdown-menu li a { color:#999; font-size:12px; padding:5px 5px 5px 5px; border-bottom:none; }
.header-top-dropdown .dropdown-menu li a:hover { color:#FFFFFF; background-color:transparent; }

/* Menu principal */
#navbar-collapse-1 { padding-top:6px; }
@media (max-width: 991px) {
	#navbar-collapse-1 { padding-top:0px; }
}
.navbar-default .navbar-nav > li > a { font-size:16px; font-weight:500; }

/* Affichage du bouton Wordpress */
.social-links li.wordpress a:hover, .colored.social-links li.wordpress a { background-color: #666; border-color: #666; color: #fff; }
.header-top .social-links li.wordpress a:hover { color: #666; background-color: transparent; border-color: transparent; }


/* MAIN CONTENT 
------------------------------------------------------------------------------------------*/

/* Texte carousel home */
.caption { bottom: 40px; width: 50%; }
.trans-caption { color:#000000; }
.tp-caption a, .tp-caption a:hover { color: #ffffff; }

/* Effacement et modification margin/padding */
.main-container { padding-top: 0px; }
.noMarBot { margin-bottom:5px; }
.noMarTop { margin-top:0px; }
.noPadBot { padding-bottom:0px; }
.noPadSide { padding-left:0px; padding-right:0px; }
.marTopNeg { margin-top:-22px; }

/* Rendu transparent */
.trans-white-bg { background-color: rgba(255, 255, 255, 0.9) !important; border: 1px solid #27313c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.trans-caption { background-color: rgba(255, 255, 255, 0.8) !important; border: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.transTab > tbody { background-color: rgba(255, 255, 255, 0.0) !important; border: none; }

/* Fonds de pages */
.legacy { background-image:url(/images/bg-legacy.jpg); background-size: cover; }
.zsystems { background-image:url(/images/bg-zsystems.jpg); background-size: cover; }
.virtel { background-image:url(/images/bg-virtel.jpg); background-size: cover; }
.zHeritage { background-image:url(/images/bg-zHeritage.jpg); background-size: cover; }
.SDS { background-image:url(/images/bg-SDS.jpg); background-size: cover; }
.JVL { background-image:url(/images/bg-JVL.jpg); background-size: cover; }
.isystems { background-image:url(/images/bg-isystems.jpg); background-size: cover; }
.TBT400 { background-image:url(/images/bg-TBT400.jpg); background-size: cover; }
.TBTEDI { background-image:url(/images/bg-TBTEDI.jpg); background-size: cover; }
.TBTAES { background-image:url(/images/bg-TBTAES.jpg); background-size: cover; /*background-position: 50% 62px;*/ }
/**/
.fintech { background-image:url(/images/bg-fintech.jpg); background-size: cover; }
.synapse { background-image:url(/images/bg-synapse.jpg); background-size: cover; }
.findynamics { background-image:url(/images/bg-findynamics.jpg); background-size: cover; }
/**/
.sysgroup { background-image:url(/images/logos/icon_syspertec_group_transp.png); background-repeat:no-repeat; background-position:right top; }
.event { background-image:url(/images/bg-event.jpg); background-size: cover; }
.press { background-image:url(/images/bg-press.jpg); background-repeat:no-repeat; background-position:right top; }
/*.stcloud { background-image:url(/images/bg-saint-cloud.jpg); background-size: cover; }*/
/*.wcreek { background-image:url(/images/bg-walnut-creek.jpg); background-size: cover; }*/
.locations {
  	animation: colorchange 50s; /* animation-name followed by duration in seconds*/
	 /* you could also use milliseconds (ms) or something like 2.5s */
	-moz-animation: colorchange 50s infinite; /* Firefox */
    -webkit-animation: colorchange 50s infinite; /* Safari and Chrome */
}
@keyframes colorchange
{
	0%   {background: #7ad0d9;}
	20%  {background: #cedc56;}
	40%  {background: #f5b54c;}
	60%  {background: #ee857c;}
	80%  {background: #8f98c4;}
	100% {background: #7ad0d9;}
}
@-moz-keyframes colorchange /* Firefox */
{
	0%   {background: #7ad0d9;}
	20%  {background: #cedc56;}
	40%  {background: #f5b54c;}
	60%  {background: #ee857c;}
	80%  {background: #8f98c4;}
	100% {background: #7ad0d9;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
	0%   {background: #7ad0d9;}
	20%  {background: #cedc56;}
	40%  {background: #f5b54c;}
	60%  {background: #ee857c;}
	80%  {background: #8f98c4;}
	100% {background: #7ad0d9;}
}
.carreer { background-image:url(/images/bg-carreer.jpg); background-size: cover; background-repeat:no-repeat; }
/**/
.graphic { background-image:url(/images/bg-graphic.png); }
.sitemap { background-image:url(/images/bg-sitemap.jpg); background-size: cover; }
.error { background-image:url(/images/bg-maze.jpg); background-size: cover; }
.contact-sent { background-image:url(/images/bg-paperplane.png); background-size: cover; }

/*Affichage boites pages "LEGACY" et "3"FINTECH"*/
.box-prod { text-align:left; }
.box-prod i { font-size:15px; }

/* Section goupe SysperTec */
.full-text-container { position: relative; } 	/* pour eviter que le texte ne se superpose à l'image lors du resizing en affichage mobile */

/* Contenu dynamique page "partners/partenaires" */
.panel-heading a.collapsed { background-color: #e9eaeb; color: #27313c; }
.panel-heading a:hover, .panel-transparent .panel-heading a:hover { background-color: #0071BA; color: #ffffff; } 
.panel-default > .panel-heading + .panel-collapse > .panel-body { background-color: #FFFFFF; }
.panel-body img { float: left; margin-right: 25px; } /* evite un affichage en colonne des images en mode mobile */

/* Affichage logos clients page "customers/clients" */
.grid span { background-color: #FFFFFF; border: 1px solid #dadada; max-height: 147px; }

/* Affichage icones "events" page "News/Actus" */
.event .box-style-1 i { font-size: 50px; float: left; margin-right: 10px; }

/* Affichage icones "social media" page "News/Actus" */
blockquote { color: #343434; }
blockquote:after { content: " "; }
h3.actu{
	text-align:left;
}

/* Affichage icones et liens page "Press room/Presse" */
img.PR { float: left; margin-right: 6px;}
h2.PR { font-size: 22px; }
a h2.PR:hover { color: #0068B1; }

/* Listes */
.list-icons, .list { margin-left:25px; }
.list-icons li i { margin-left:-25px; padding-right:0; }

/*Page RazzLee*/
.rlmod p{
	color:orangered;
	font-weight:bold;
}
.rlmod a:hover{
	text-decoration:none;
}
.rlmod:hover p{
	color:green;
}
.datasheet{
	background-color:#244467;
	color:azure;
	padding:3px 5px;
	border-radius:5px;
}
.datasheet:hover{
	background-color: azure;
	border:1px solid black;
	border-radius:0px;
	transition: all 0.5 ease-in-out;
}
.contact:hover{
	border-radius:15px;
	letter-spacing:2px;
}
@media (max-width: 770px){
	.razzrow{
		display:flex;
		flex-direction:column;
	}
}



/* GoogleMap page contact */
#map-canvas { height: 300px; }
@media screen and (max-height: 773px) { #map-canvas { height: 125px; } } /* affichage réduit sur mobiles en mode portrait */
@media screen and (max-height: 435px) { #map-canvas { display: none; } } /* pas d'affichage sur mobiles en mode tilté/paysage */

/* FOOTER 
------------------------------------------------------------------------------------------*/

/* Affichage des logos cliquables réseaux sociaux */
.footer-content .social-links li a { background-color: #27313c; border-color: #27313c; color: #fff; }
.footer-content .social-links li a:hover { background-color:#FFF; border-color: #27313c; color: #27313c; }
.logo-row-footer{
	display:flex; 
	justify-content: space-around;
	border-radius:15px;
	background-color:white;
	-webkit-box-shadow: 8px 1px 13px -4px rgba(0,0,0,0.36); 
	box-shadow: 8px 1px 13px -4px rgba(0,0,0,0.36);
}

/*css pour la mise en forme de la timeline sur page notre histoire*/

/* Timeline2*/
.timelinealt{border-left:10px solid #707070;padding-left:30px;}
.timelinealt-content{margin-top:50px;}
.timelinealt-content .title{font-size:3rem;font-weight:600;color:#707070;text-transform:uppercase;text-align:left;margin-bottom: 3vh;position:relative;}
.timelinealt-content .description{padding-top:3vh;padding-bottom: 3vh;}
.timelinealt-title{position:relative;}
.timelinealt-content .title_mainframe{font-size:2rem;font-weight:600;color:#0068b1;text-align: left;}
.timelinealt-content .title_regtech{font-size:2rem;font-weight:600;color:#f45c07;text-align:left;}
.icon-mainframe{width:33px;height: 33px; background-color:#0068b1; position: absolute;left:-52px;top:-5px;border:5px solid white;}
.icon-regtech{width:33px;height: 33px; background-color:#f45c07; position: absolute;left:-52px;top:-5px;border:5px solid white;}