/*!
 * ToolwatchApp v1.0 (http://www.toolwatch.io)
 * Copyright 2015
 */

@import "bootstrap.min.css";
@import "font-awesome.min.css";

*
{
  outline: 0px !important;
}

body
{
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    background-color: #ededed;
}


a
{
  color: #4d77a7;
}
a:hover, a:focus
{
  color: rgba(77, 119, 167, 0.7);
  cursor: pointer;
}

h1
{
    font-family: "Raleway";
    font-weight: 500;
    font-variant: small-caps;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea
{
  padding: 10px 15px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus, textarea:hover, textarea:active
{
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
    -webkit-appearance:none;

}

.modal-header
{
  border-bottom: none;
}

.modal-footer
{
  border-top-style: dashed;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 0px;
}

#pageModal h1
{
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
}

.btn
{
  font-family: "Raleway";
  font-size: 14px;
    font-weight: bold;
  border: none;
  text-transform: uppercase;
  transition: background 0.4s ease, color 0.4s ease;
  -webkit-transition: background 0.4s ease, color 0.4s ease;
  -moz-transition: background 0.4s ease, color 0.4s ease;
  -ms-transition: background 0.4s ease, color 0.4s ease;
}

.btn-lg
{
    padding: 10px 15px;
}

.btn-full
{
    width: 100%;
}

.btn:focus
{
  border: none;
}

.btn-default
{
    color: #4d77a7;
    background-color: transparent;
    border: 1px solid #4d77a7;
}

.btn-default:hover, .btn-default:focus
{
  color: white;
  background-color: #4d77a7;
    border: 1px solid #4d77a7;
}

.btn-white
{
    color: white;
    background-color: transparent;
    border: 1px solid white;
}

.warning:hover{
  color:#4d77a7;
  cursor: pointer;
}

.btn-white:hover, .btn-white:focus
{
  color: #999999;
  background-color: white;
    border: 1px solid white;
}

.btn-primary
{
    background-color: #4d77a7;
    border-color: #4d77a7;
    color: white;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.active
{
    opacity: .7;
}

.btn-success:hover, .btn-success:focus
{
    background-color: rgba(92,184,92,.7);
}

.btn-spinner i
{
    display: none;
}

.btn-sm
{
    font-size: 12px;
}

.content .row:last-child
{
    margin-bottom: 30px;
}

.line-thru {
  display: block;
  font-size: .875em;
  margin-bottom: 1em;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
  height: 1px;
  border-bottom: 1px solid #dfe0e6;
}

.line
{
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(255, 255, 255, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
}

.line.blue
{
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(77, 119, 167, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

.line.black
{
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

.navbar
{
  border-radius: 0;
  margin-bottom: 0;
  position: fixed;
  width: 100%;
  top:0px;
  min-height: 70px;
}

#ngProgress-container
{
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 200;
}

.text-center{
  text-align: center;
}

header
{
  color: white;
  min-height: 70px;
  font-family: "Raleway";
  border-radius: 0px;
  padding-top: 5px;
  z-index: 1000;
    transition: background-color .2s ease;
}

header.blue
{
    background-color: #4d77a7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5)
}
header .nav li
{
  float: none;
  display: inline-block;
}
header .nav
{
  float: none;
}
header .navbar-nav li a
{
  padding: 5px;
}
header .navbar-nav li a:hover, header .navbar-nav li a:focus
{
  background: none;
}
header #nav-menu
{
  margin-top: 10px;
  padding-bottom: 5px;
}
header .navbar-toggle
{
  position: relative;
  float: none;
  padding: 0;
  margin: 5px 0px 0px 0px;
  font-size: 18px;
  transition: transform 0.5s ease;
  -webkit-transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -moz-transition: transform 0.5s ease, -moz-transform 0.5s ease;
  -ms-transition: transform 0.5s ease, -ms-transform 0.5s ease;
}

header .navbar-toggle.collapsed
{
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
header .navbar-collapse
{
  border-top: none;
}
header .logo , .logo
{
  background: url("../img/logo-sm.png") no-repeat center top;
  width: 160px;
  height: 30px;
  margin: 0 auto;
}

header a
{
  text-align: center;
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
  font-weight: 600;
  letter-spacing: 1px;
}
header a:hover, header a:focus
{
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

footer
{
  min-height: 100px;
  background-color: #4d77a7;
  color: white;
  font-size: 17px;
  text-align: center;
}

footer .copyright{
  margin-top: 20px;
  font-size: 15px;
}

footer .fa
{
  font-size: 30px;
  margin: 0px 10px;
}
footer a
{
  color: white;
}
footer a:hover, footer a:focus
{
  color: rgba(255,255,255,.7);
}
footer p
{
  text-transform: uppercase;
  font-size: 12px;
}

.signup-error, .watch-error, .contact-error
{
  display: none;
  font-style: italic;
  font-size: 12px;
  color: red;
}

.stepTwo
{
  display: none;
  transition: display 0.5s ease;
  -webkit-transition: display 0.5s ease, -webkit-display 0.5s ease;
  -moz-transition: display 0.5s ease, -moz-display 0.5s ease;
  -ms-transition: display 0.5s ease, -ms-display 0.5s ease;
}

.stepOne
{
  transition: display 0.5s ease;
  -webkit-transition: display 0.5s ease, -webkit-display 0.5s ease;
  -moz-transition: display 0.5s ease, -moz-display 0.5s ease;
  -ms-transition: display 0.5s ease, -ms-display 0.5s ease;
}

.confirmAskReset
{
    display: none;
}

.home-intro
{
  width: 100%;
  background-size: cover;
  color: white;
  transition: background 1s linear;
}


.home-intro .continue
{
    font-size: 30px;
    position: absolute;
    bottom: 40px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    cursor: pointer;
}
.home-intro .btn
{
    font-size: 18px;
}

.home-intro-overlay
{
  width: 100%;
}

.home-picto, .home-text
{
    margin-top: 5%;
    font-size: 18px;
}

.home-picto .row, .home-text .row
{
    margin-bottom: 5%;
}

.home-picto .picto
{
    width: 100px;
    height: 99px;
    margin: 25px auto;
}

.home-picto .picto.chrono
{
    background: url("/assets/img/picto-chrono.png");
}

.home-picto .picto.accuracy
{
    background: url("/assets/img/picto-accuracy.png");
}

.home-picto .picto.light
{
    background: url("/assets/img/picto-light.png");
}



.display-table
{
    display: table;
    margin: auto;
    width: 100%;
}

.display-table .table-cell
{
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

/********************************/
/************ABOUT***************/
/********************************/

.about
{
    text-align: justify;
    margin-bottom: 20px;
}

.about .line
{
    margin: 20px auto;
}

.row.pres > div
{
    border-radius: 5px;
    background-color: #eaeaea;
    margin-top: 25px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
}

.row.pres .row
{
    padding: 30px 20px;
}

.row.pres .row .fa
{
    background-color: #fff;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    color: #eaeaea;
    font-size: 55px;
    border-radius: 50%;
    padding-top: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.row.pres .name
{
    color: #999;
    font-weight: bold;
}

.row.pres .infos
{
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #4d77a7;
    padding: 15px 5px;
}

.row.pres .infos > ul
{
    list-style: none;
}


.sync-time
{
    font-weight: bold;
    font-size: 55px;
    display: none;
}

button[name=syncDone],
.userTime,
.no-display
{
    display: none;
}

/********************************/

.step-measure
{
    margin-bottom: 20px;
    text-align: center;
    display: block;
}

.step-measure .fa
{
    font-size: 55px;
    color: #ddd;
    margin-top: 20px;
}

.show-steps
{
    margin-bottom: 20px;
    text-align: center;
    display: none;
}

#hiden_fb_button{
  display: none;
}

@media (max-width: 768px)
{
	header
	{
		min-height: 50px;
		text-align: center;
	}

	header .logo
	{
		width: 150px;
		height: 30px;
		margin: auto;
		background: url("../img/logo-sm.png") no-repeat center top;
	}

	header .navbar-nav li a
	{
		padding: 10px;
	}

	header .nav li
	{
		display: block;
	}

    /*.home-intro h1, .home-intro h2
    {
        margin: 70px auto;
    }*/

    .home-intro h1
    {
        font-size: 28px;
        margin: 40px auto;
    }

    .home-intro h2
    {
        font-size: 22px;
        margin: 40px auto;
    }

    .home-intro .btn
    {

        margin-top: 30px;
    }

    .step-measure .fa
    {
        font-size: 45px;
        margin: 15px auto;
        transform: rotate(90deg);
    }

    .show-steps
    {
        display: block;
    }

    .step-measure
    {
        display:none;
    }
}

@media (max-height: 480px)
{
    .home-intro h1
    {
        font-size: 26px;
        margin: 30px auto;
    }

    .home-intro h2
    {
        font-size: 20px;
        margin: 30px auto;
    }

    .home-intro .btn
    {

        margin-top: 10px;
    }
}

.watch-accuracy{
  color:#4d77a7;
  font-weight: bolder;
  font-size: 40px;
}

.accuracy-subtitle{
    margin-top: -30px;
}

.sharrre{
    margin:0px 0 0 50px;
    float:left;
}

.sharrre .box a:hover{
  text-decoration:none;
}

.sharrre .count {
  color:#525b67;
  display:block;
  font-size:18px;
  font-weight:bold;
  line-height:40px;
  height:40px;
  position:relative;
  text-align:center;
  width:70px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  border:1px solid #b2c6cc;
  background: #fbfbfb; /* Old browsers */
  background: -moz-linear-gradient(top, #fbfbfb 0%, #f6f6f6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* IE10+ */
  background: linear-gradient(top, #fbfbfb 0%,#f6f6f6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.sharrre .count:before, .sharrre .count:after {
  content:'';
  display:block;
  position:absolute;
  left:49%;
  width:0;
  height:0;
}
.sharrre .count:before {
  border:solid 7px transparent;
  border-top-color:#b2c6cc;
  margin-left:-7px;
  bottom: -14px;
}
.sharrre .count:after {
  border:solid 6px transparent;
  margin-left:-6px;
  bottom:-12px;
  border-top-color:#fbfbfb;
}
.sharrre .share {
  color:#FFFFFF;
  display:block;
  font-size:12px;
  font-weight:bold;
  height:30px;
  line-height:30px;
  margin-top:8px;
  padding:0;
  text-align:center;
  text-decoration:none;
  width:70px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#twitter .share {
  text-shadow: 1px 0px 0px #0077be;
  filter: dropshadow(color=#0077be, offx=1, offy=0);
  border:1px solid #0075c5;
  background: #26c3eb;
  background: -moz-linear-gradient(top, #26c3eb 0%, #26b3e6 50%, #00a2e1 51%, #0080d6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26c3eb), color-stop(50%,#26b3e6), color-stop(51%,#00a2e1), color-stop(100%,#0080d6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* IE10+ */
  background: linear-gradient(top, #26c3eb 0%,#26b3e6 50%,#00a2e1 51%,#0080d6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26c3eb', endColorstr='#0080d6',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #5cd3f1 inset;
}
#facebook .share {
  text-shadow: 1px 0px 0px #26427e;
  filter: dropshadow(color=#26427e, offx=1, offy=0);
  border:1px solid #24417c;
  background: #5582c9; /* Old browsers */
  background: -moz-linear-gradient(top, #5582c9 0%, #33539a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5582c9), color-stop(100%,#33539a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5582c9 0%,#33539a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5582c9 0%,#33539a 100%); /* IE10+ */
  background: linear-gradient(top, #5582c9 0%,#33539a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5582c9', endColorstr='#33539a',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #80a1d6 inset;
}
#googleplus .share {
  text-shadow: 1px 0px 0px #222222;
  filter: dropshadow(color=#222222, offx=1, offy=0);
  border:1px solid #262626;
  background: #6d6d6d; /* Old browsers */
  background: -moz-linear-gradient(top, #6d6d6d 0%, #434343 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#434343)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #6d6d6d 0%,#434343 100%); /* IE10+ */
  background: linear-gradient(top, #6d6d6d 0%,#434343 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#434343',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 1px 4px #DDDDDD, 0 1px 0 #929292 inset;
}

.mejs-container .mejs-controls,
.mejs-overlay-button {
  visibility:hidden !important;
}


.slogan-home h1{
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: 400;
  margin-bottom: 50px;
}

.slogan-home h2{
  color: #FFFFFF;
  font-size: 26px;
  line-height: 36px;
  margin-top: 50px;
}

#demo-sync-time{
  margin-top: 25px;
  color: #4d77a7;
  font-size: 150px;
}

#demo-pointer{
  position: absolute;
  width: 20px;
  height: auto;
}

.home-picto{
  min-height: 500px;
}

.home-mosa-picture{
   z-index: 1;
}

.home-mosa-picture{
  width: 50%;
  height: auto;
  float: left;
  text-align: center;
  color: #fff;
  font-size: 26px;
  line-height: 1.2;
  padding: 28% 0 0;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.home-mosa-stats{
  position: absolute;
  background: #fff;
  width: 324px;
  height: 318px;
  text-align: center;
  padding: 38px 23px;
  z-index: 10;
}

.home-mosa-stats h2{
  height: 130px;
  margin-top: 40px;
}


.home-mosa-stats p{
  bottom: 0px;
}

.home-mosa-picture-content{
  position: absolute;
  right: 0;
  left: 0;
  top: 70%;
  padding: 0 162px;
}

.home-mosa-picture-content footer{
  font-size: 16px;
  line-height: 1.5;
  background-color: transparent;
}

.home-picto #toolwatch-explained{
  text-align: center;
}

.btn-xlarge {
    margin-top: 20px;
    padding: 18px 28px;
    font-size: 30px;
    line-height: normal;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.publication{
  padding-top: 20px;
  width: 100%;
  background-color: white;
  height: 95px;
}

.publication img{
  margin-top: 10px;
  height: 40px;
}

footer .container{
  padding-top: 20px;
}

footer .links{
  margin-top: 10px;
}

 footer .social{
  margin-top: 5px;
 }

 #demo-fourth-step{
  margin-top: 50px;
 }

 video{
  background-color: black;
  opacity: 0.7;
 }

 #ph{
  margin-top: -10px;
  color:white;
  background-color: #da552f;
  width: 100%;
  font-weight: 200;
  font-size: 16px;
  text-align: center;
  height: 75px;
 }

#ph p{
  padding-top: 20px;
}

#clockdiv{
  width: 100%;
  margin-top: 30px;
  color: #4d77a7;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 40px;
}

#clockdiv > div{
  padding: 10px;
  display: inline-block;
}

#clockdiv span{
  margin-top: 30px;
}

.smalltext{
  padding-top: 5px;
  font-size: 16px;
}


.lower{
  width:340px;
  margin:10% auto;
  padding:50px;
  background:white;
  opacity:0.8;
  color:black;
  box-shadow:inset 0 0 0 1px black;
  border:30px solid white;
}

.lower:hover{
  background:black;
  color:white;
  box-shadow:inset 0 0 0 1px white;
  border:30px solid black;
}

input{
  display:none;
}

.lower label{
  font-family: 'NotCourierSans';
  text-transform:uppercase;
  font-size:40px;
  text-align:center;
}

.lower label:hover{
  cursor:pointer;
}

.overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.9);
}

.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
}

.overlay ul li a {
  font-weight: 300;
  display: block;
  color: white;
  text-decoration:none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  font-family: 'NotCourierSans';
  text-transform:uppercase;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #849368;
}

.lower~.overlay-hugeinc{
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

#op:checked~.overlay-hugeinc{
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overlay-hugeinc nav {
  -moz-perspective: 300px;
}

.overlay-hugeinc nav ul {
  opacity: 0.4;
  -webkit-transform: translateY(-25%) rotateX(35deg);
  transform: translateY(-25%) rotateX(35deg);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
  transition: transform 0.5s, opacity 0.5s;
}

#op:checked~.overlay-hugeinc nav ul {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

#op:not(:checked)~.overlay-hugeinc nav ul {
  -webkit-transform: translateY(25%) rotateX(-35deg);
  transform: translateY(25%) rotateX(-35deg);
}

.facebook_messenger{
  width: 40px;
  height: 20px;
  display: block;
  background-color: white;
  background-image: url(/assets/img/messenger.png);
    background-size: auto;
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    width: 20px;
    color: #4d77a7;
}