/* --------------------------------------------------
Add here all specific Ubiquity css styles (customizations)
----------------------------------------------------
Nos couleurs :
	Notre quasi-noir : #3d3d3d
	Le gris du logo : #5a6468
	Le bleu du logo : #29abe2
Nos polices :
	Logo et gros titres : Alpaca Scarlett Demo
	Titres secondaires : ??
	Texte : ??
---------------------------------------------------- */

::-moz-selection {
	color: #fff;
	background: #29abe2;
}
::selection {
	color: #fff;
	background: #29abe2;
}


/* --------------------------------------------------
	FONTS
---------------------------------------------------- */

@font-face {
	font-family: AlpacaScarlettDemo;
	src: url("../fonts/AlpacaScarlettDemo.otf") format("opentype");
}

@font-face {
	font-family: Generica;
	src: url("../fonts/Generica.otf") format("opentype");
}

@font-face {
	font-family:HelveticaRegular;
	src: url("../fonts/HelveticaRegular.otf") format("opentype");
}

@font-face {
    font-family: 'sf_pro_displaylight';
    src: url('../fonts/sf-pro-display-light-webfont.eot');
    src: url('../fonts/sf-pro-display-light-webfont.eot?#iefix') format('embedded-opentype'),
 	     url("../fonts/SF-Pro-Display-Light.otf") format("opentype"),
		 url('../fonts/sf-pro-display-light-webfont.ttf') format('truetype'),
         url('../fonts/sf-pro-display-light-webfont.svg#sf_pro_displaylight') format('svg');
}

@font-face {
    font-family: 'montserratregular';
    src: url('montserrat-regular-webfont.eot');
    src: url('montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/Montserrat-Regular.ttf')	format('truetype'),
         url('montserrat-regular-webfont.svg#montserratregular') format('svg');
}

/* --------------------------------------------------
	UBI-BOX: generic text font and color + box titles
---------------------------------------------------- */

html *
{
   /* color: #3d3d3d; */
   font-family: 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
}

.ubi-box-title h2,
.ubi-box-title p {
	color : #4f4f4f;
}

.ubi-box-title h2 {
	font-family: 'montserratregular', 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
	font-variant : small-caps;
	font-weight: bold;
	font-size: 30px;
	line-height: 36px;
}


@media (max-width: 625px) {
	.ubi-box-title h2 {
		font-size: 23px;
	}
}

.ubi-box-title h2:after {
  content: " ";
  left: 50%;
  height: 2px;
  width: 50px;
  bottom: -5px;
  position: absolute;
  margin-left: -25px;
  background: #29abe2;
}

.ubi-box-title p {
   font-size: 20px;
}


@media (max-width: 625px) {
	.ubi-box-title p {
		font-size: 18px;
	}
}

.content-md {
    padding-top: 50px;
    padding-bottom: 15px;
}


/* --------------------------------------------------
	BLOCK video1
---------------------------------------------------- */
/* main page backgroung with animation */

#video1 .launchplaybtn {
	padding-bottom: 70px;
}

#video1 div.video1-bg {
	padding-top: 80px; 
	padding-left: 0px;
	padding-right: 20px;
}

#video1 .animbg {
	background-image: url(../../our_assets/img/backgrounds/background2.gif);
    background-repeat: no-repeat;
	background-position: top right;
	background-origin: content-box;
	background-attachment: scroll;
}

#video1 h2 {
	font-family: 'montserratregular', 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
	font-size: 40px;
	padding-top: 50px;
	padding-bottom: 30px;
	font-weight: 700;
	line-height: 60px;
	color: #4f4f4f;
}

#video1 .introduction {
	font-size: 24px;
	color: #4f4f4f;
	padding-left: 0px;
	padding-bottom: 30px;
}

@media (min-width: 991px) {
	#video1 div.video1-bg {
		padding-bottom: 0px;
	}
	#video1 .animbg {
		background-position: bottom right;
		background-size: 465px 500px;
		background-image: url(../../our_assets/img/backgrounds/background2.gif);
		}
	#video1 h2 {
		padding-top: 50px;
		font-size: 40px;
		line-height: 60px;
	}
	#video1 .introduction {
		font-size: 26px;
	}
}

@media (min-width: 768px) and (max-width: 991px){
	#video1 div.video1-bg {
		padding-bottom: 0px;
	}
	#video1 .animbg {
		background-position: center right;
		background-size: 297px 320px;
		background-image: url(../../our_assets/img/backgrounds/background2.gif);
		}
	#video1 h2 {
		padding-top: 50px;
		font-size: 35px;
		line-height: 45px;
	}
	#video1 .introduction {
		font-size: 24px;
	}
}


@media (min-width: 625px) and (max-width: 768px){
	#video1 div.video1-bg {
		padding-bottom: 0px;
	}
	#video1 .animbg {
		background-position: center right;
		background-size: 265px 285px;
		background-image: url(../../our_assets/img/backgrounds/background2.gif);
	}
	#video1 h2 {
		padding-top: 50px;
		font-size: 30px;
		line-height: 35px;
	}
	#video1 .introduction {
		font-size: 20px;
	}
}

@media (max-width: 625px) {
	#video1 div.video1-bg {
		padding-bottom: 0px;
	}
	#video1 .animbg {
		background-position: top right;
		background-size: 42px 344px;
		background-image: url(../../our_assets/img/backgrounds/margin.gif);
		}
	#video1 h2 {
		padding-top: 10px;
		font-size: 23px;
		line-height: 35px;
	}
	#video1 .introduction {
		font-size: 18px;
	}
} 

#video1  .btn-u.btn-u-dark {
	font-size: 14px;
	color:  #ffffff;
	border-color:  #000;
	background:  #000;
}
#video1 .btn-u.btn-u-dark:hover,
#video1 .btn-u.btn-u-dark:focus,
#video1 .btn-u.btn-u-dark:active,
#video1 .btn-u.btn-u-dark.active {
	color:  #29abe2;
	border-color:  #29abe2;
	background:  #29abe2;

}

#video1 .btn-u.btn-u-white.my-play-btn {
	color:  #4f4f4f;
	background:  #000;
	border-color:  #ffffff;
	background: rgba(1,1,1,0);
	margin-top: 10px;
	padding-right: 45px;
	padding-left: 0px;
	/* margin-left: 1px; */
	margin-right: 30px;

	background-image: url(../../our_assets/img/basics/playsign3.png);
    background-repeat: no-repeat;
	background-position: center right; 
	background-attachment: scroll;
	background-origin: padding-box;

	height: 40px;
	width: 270px;
	text-align: right;
	font-size: 16px;
	font-weight: normal;
}


/* --------------------------------------------------
	BLOCK Product (ex Solution)
---------------------------------------------------- */
#product .ubi-square h3 {
	font-family: 'montserratregular', 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
	font-weight: bold;
	font-size: 22px;
	line-height: 26px;
	margin-bottom:10px;
	clear:both;
	color: #4f4f4f;
}

#product .ubi-square p {
   font-size: 16px;
}

#product .ubi-logo-solution {
	color: #29ABE2;
	/* padding-top: 20px;
	padding-bottom: 40px; */
}


/* --------------------------------------------------
	BLOCK Benefits
---------------------------------------------------- */

#benefits h2 {
	font-family: 'montserratregular', 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
	font-size: 30px;
}

@media (max-width: 625px) {
	#benefits h2 {
		font-size: 23px;
	}
}

#benefits h3 {
	font-family: 'montserratregular', 'sf_pro_displaylight', Helvetica, Verdana, Sans-Serif;
	font-size: 22px;
}

#benefits p {
	font-size: 16px;
}

#benefits li {
	font-size: 16px;
}

#benefits .icon-diamond {
	color: #29abe2;
	font-size: 48px;
}

#benefits .icon-line {
	color: #29abe2;
	font-size: 50px;
}
  
#benefits .heading-sm {
	color: #4f4f4f;
}

#benefits .heading-sm {
	padding-top: 20px;
}

.benefits-box .benefits-block {
  background: #fff;
  padding-top: 0px;
  padding-bottom: 20px;
}

.benefits-box p {
  position: relative;
  margin-bottom: 50px;
}

/* .benefits-box p:after {
  content: " ";
  left: 50%;
  height: 1px;
  width: 50px;
  bottom: -15px;
  position: absolute;
  margin-left: -25px;
  background: #29abe2;
} */

.benefits-box ul {
  padding: 0 1	0px;
}

.benefits-box li {
  margin: 8px 0;
  font-size: 16px;
  padding-top: 8px;
  border-top: dotted 1px #29abe2;
}

.benefits-box li:hover {
  color: #29abe2;
}

.benefits-box li:first-child {
  padding-top: 0;
  border-top: none;
}

.benefits-block {
	padding: 60px 30px;
	text-align: center;
	margin-bottom: 20px;
}

.benefits-block p,
.benefits-block h2 {
	color: #fff;
}

.benefits-block h2 {
	font-weight: bold;
}

.benefits-block p {
	font-weight: bold;
	font-size: 16px;
}

.benefits-block h2 a:hover{
	text-decoration: none;
}

.benefits-block-default {
	background: #fafafa;
	/* border: solid 1px #29abe2; */
}

.benefits-block-default:hover {
	box-shadow: 0 0 8px #29abe2;
}

.benefits-block-default p,
.benefits-block-default h2,
.benefits-block-default li {
	color: #4f4f4f;
}


/* --------------------------------------------------
	BLOCK Why us
 ---------------------------------------------------- */
 .whyus-block h3,
 .whyus-block p {
	 color: #4f4f4f;
 }

 .whyus-block h3 {
	font-size: 24px;
	text-align: left;
}

.whyus-block h3 i {
	margin-right: 12px;
}

.whyus-block p {
	font-size: 16px;
	text-align: justify;
}

.fa.fa-bolt.fa-2x,
.fa.fa-space-shuttle.fa-2x,
.fa.fa-graduation-cap.fa-2x,
.fa.fa-server.fa-2x,
.fa.fa-cogs.fa-2x,
.fa.fa-industry.fa-2x {
	color: #29abe2;
}


/* --------------------------------------------------
	BLOCK Quote CEO
---------------------------------------------------- */
.ubi-quote {
  padding: 80px 0 80px;
  text-align: center;
  background: url(../../HTML/assets/img/patterns/5.png) repeat;
}

.ubi-quote p {
  color: #fff;
  font-size: 24px;
  font-weight: 200;
  padding: 0 50px;
  position: relative;
  margin-bottom: 20px;
}

.ubi-quote a {
	color: #29abe2;
}

.ubi-quote p:before {
  color: #29abe2;
  font-size: 80px;
  content: "\201C";
  position: absolute;
  margin: -35px 0 0 -40px;
  font-family: Georgia, serif;
}

.ubi-quote p:after {
  color: #29abe2;
  font-size: 80px;
  content: "\201D";
  position: absolute;
  margin: -35px 0 0 3px;
  font-family: Georgia, serif;
}

.ubi-quote span {
  color: #fff;
  font-size: 18px;
}

@media (min-width: 991px) {
	.ubi-quote p {
		font-size: 24px;
	}
	.ubi-quote {
		padding: 20px 0 20px;
	}
	
}

@media (min-width: 768px) and (max-width: 991px){
	.ubi-quote p {
		font-size: 22px;
	}
	.ubi-quote {
		padding: 20px 0 20px;
    }
}

@media (max-width: 768px) {
	.ubi-quote p {
	  font-size: 18px;
	}
	.ubi-quote {
	  padding: 20px 0 20px;
	}
  }


/* --------------------------------------------------
	BLOCK Team
---------------------------------------------------- */
#team .row img, #board img {
	border-radius: 50%;
}

#team li .fa-linkedin, #board li .fa-linkedin {
	color: #29abe2;
}


/* --------------------------------------------------
    HEADER adapté du /One-Pages/App
---------------------------------------------------- */

/* Giving a min height */
@media (min-width: 992px) {
	.homeapp-header.one-page-header.navbar {
	    padding: 15px 0px;
	    transition: #000 0.3s ease-in-out 0s, padding 0.3s ease-in-out 0s;
	}

	.homeapp-header.one-page-header.top-nav-collapse {
	    padding: 11px 0px;
	}
}

/* Overwriting background */
.homeapp-header.one-page-header {
    box-shadow: 0 3px 1px #ebebeb;
    background: #fff;
}

.navbar-brand > img {
  opacity: 1;
}

.homeapp-header.one-page-header .navbar-brand {
	padding: 6px 0px;
	width: 170px
}

/* Logo responsive size and alignment */
@media (min-width: 992px) {
	.homeapp-header.one-page-header .navbar-brand {
		padding: 0px 0px;
		width: 230px
	}
}

@media (min-width: 769px) and (max-width: 991px){
	.homeapp-header.one-page-header .navbar-brand {
		padding: 6px 0px;
		width: 170px
	}
}

@media (max-width: 768px){
	.homeapp-header.one-page-header .navbar-brand {
		padding: 6px 0px;
		width: 170px
	}
}

/* Overwriting navbar menu */
.homeapp-header.one-page-header-style-2.navbar .navbar-nav {
    float: right;
}

/* Designing the a links */
.homeapp-header.one-page-header .navbar-nav > li > a,
.homeapp-header.one-page-header .navbar-nav > li > a:focus {
    color: #515151;
	font-size: 16px;
    text-transform: uppercase;
	padding: 17px 10px 0px;
}

/* Removing before circles */
.homeapp-header.one-page-header .navbar-nav > li > a:before {
	display: none;
}

.homeapp-header.one-page-header .navbar-nav > li > a:hover {
    background: transparent none repeat scroll 0% 0%;
	color: #29abe2;
}

.homeapp-header.one-page-header .navbar-nav > .active > a,
.homeapp-header.one-page-header .navbar-nav > .active > a:hover,
.homeapp-header.one-page-header .navbar-nav > .active > a:focus {
    z-index: 1;
    background: transparent none repeat scroll 0% 0%;
    color: #29abe2 !important;
}

/* Designing the button */
.homeapp-header.one-page-header .navbar-nav > li > a.btn-u {
	margin-left: 13px;
	color: #fff;
	background: #29abe2;
}
.homeapp-header.one-page-header .navbar-nav > li > a.btn-u:hover,
.homeapp-header.one-page-header .navbar-nav > li > a.btn-u:focus,
.homeapp-header.one-page-header .navbar-nav > li > a.btn-u:active,
.homeapp-header.one-page-header .navbar-nav > li > a.btn-u.active {
	background: #41b5a7;
	color: #fff;
}

.homeapp-header.one-page-header.top-nav-collapse .navbar-toggle:hover .icon-bar {
  background: #000;
}

/* Responsive mode */
@media (max-width: 1200px) {
	.homeapp-header.one-page-header .navbar-nav > li > a,
	.homeapp-header.one-page-header .navbar-nav > li > a:focus {
	    padding: 17px 10px 0px;
	}
}

@media (min-width: 992px) {
	.homeapp-header.one-page-header .navbar-nav {
		padding: 0;
	}
}
@media (min-width: 769px) and (max-width: 991px){
	.homeapp-header.one-page-header .navbar-nav {
		padding: 0;
	}
}
@media (max-width: 768px){
	.homeapp-header.one-page-header .navbar-nav {
		padding: 0;

	}
}

@media (max-width: 993px) {
	/* Overwriting the toggle button */
	.homeapp-header.one-page-header .navbar-toggle {
		margin: 10px 0 0;
	}

	.homeapp-header.one-page-header .navbar-toggle .icon-bar {
	    height: 1px;
	    background: #000;
	 	margin-bottom: 7px;
	}

	/* Controling the button */
	.homeapp-header.one-page-header .navbar-nav > li > a.btn-nav {
		/*margin: 0 0 20px;*/
		max-width: 138px;
	}
}

/* --------------------------------------------------
    Header animation adapté du /One-Pages/App/.../shhos.css
---------------------------------------------------- */
.navbar-fixed-animate {
	position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  transition: top 0.5s ease-in-out !important;
}
.navbar-fixed-animate.nav-up {
  top: -100px;
}

/* -------------------
   Video in modal 
   ------------------- */

/* The Modal (background) */
.modalvideo {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content */
.modalvideo-content {
	/* background-color: #fefefe; */ /* backgrund color if not inherited from modalvideo */
	margin: auto;
	padding: 5px;
	border: 0px solid #888;
	width: 3%;
	/* animation until width: 99%; */
	max-width: 960px;
	
	-webkit-transition: all 0.5s ease-in-out; /* Fonctionne déjà sur webkit */
	-moz-transition: all 0.5s ease-in-out; /* Bientôt supporté par Firefox */
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out; /* format standardisé */
}
  
.modalvideo-content.zoomenter {
	width: 99% !important;  
} 	

/* .modalvideo-content.hover {
	width: 99% !important;  
}  */

  /* The Close Button in the modal dialog */
.btn-u.btn-brd.btn-brd-width-2.btn-brd-hover.btn-u-blue.btn-u-block.rounded-4x.btnCloseModalBottom {
	/*.closemodalvideo { */
	color: #000000;
	font-weight: bold;
	font-size: 10px;
}
  
.closemodalvideo:hover,
.closemodalvideo:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* The close Button inside at the bottom of the video modal */
.btnCloseModalBottom  {
	padding-top: 10px;
	margin-top: 10px;
	box-align: center;
}

#copyright a {
	color: #555;;
}

#team .col-md-2 span {
	font-size: 16px;
	font-weight: 900;;
	color: #4f4f4f;
}

#team .col-md-2 p {
	font-size: 14px;
	color: #4f4f4f;
}