@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
/******************************************
/* SPECIFIC LUTECE DEFAULT THEME STYLES   *
******************************************/
/* CORE STYLES          */
/* Fix for fixed-nav-bar*/
body { padding-top: 50px; font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif }
.wrapper { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }

/* Helper Classes */
.mb20{ margin-bottom: 20px !important; }
.mt20{ margin-top: 20px !important; }

.btn-outline-primary{ background: transparent; border: 1px solid #3c67ff; color: #3c67ff;  box-shadow: 0 0 0 rgba(60, 103, 255, 0.4); animation: pulse 2s 2; animation-delay: 3s }
.btn-outline-primary:hover{ color: #5b7eff;  }

/* FOOTER             */
footer {background-color: #111;color: #FFF;text-align: center;padding: 5em 0; }
footer a, footer a:hover{color: #FFF;}
footer li { float: left; margin-right: 1.5em; margin-bottom: 1.5em }
footer p { clear: left;  margin-bottom: 0 }
footer .social-pics{ max-width:50px; padding:5px; display: inline-block;}
footer .logo-footer{ width:100px }

/* HEADER             */
#home .navbar-brand > img { display: inline-block;  margin-right:15px; margin-top: -6px; height: 24px }

.welcome{ padding: 4rem; margin-bottom:3rem; background-color: #3c67ff;  background-size: 200% 100%; -webkit-animation: splash 2s ease 2; -moz-animation: splash 2s ease 2; animation: splash 2s ease 2; animation-direction: alternate;}

.welcome h1, .welcome h2 small{ color: #fff }
.welcome h1{ font-size: 5em; opacity: 0; -webkit-animation: fadeInUp 1s ease-in-out 0s forwards; animation: fadeInUp 1s ease-in-out 0s forwards; -webkit-animation-delay: 0.5s;  -moz-animation-delay: 0.5s; animation-delay: 0.5s;}
.welcome h1 img{ width: 20rem;	transform: translateY(-5px); }

.welcome h2{ font-size: 2em; opacity: 0; -webkit-animation: fadeInUp 1s ease-in-out 0s forwards; animation: fadeInUp 1s ease-in-out 0s forwards; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }

/* defines the animation */
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to {  opacity: 1;  -webkit-transform: none; transform: none; }}
@-moz-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1;  -webkit-transform: none; transform: none; }}
@keyframes fadeInUp { from {  opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none;  }}

@-webkit-keyframes splash { 0%{ background-color:#3c67ff; } 100%{ background-color: #ff442a }}
@-moz-keyframes splash { 0%{  background-color:#3c67ff;} 100%{ background-color: #ff442a }} 
@keyframes splash { 0%{ background-color:#3c67ff; } 100%{ background-color: #ff442a}}


@-webkit-keyframes pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(60, 103, 255, 0.4); }
  70% {-webkit-box-shadow: 0 0 0 10px rgba(60, 103, 255, 0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(60, 103, 255, 0); }
}

@keyframes pulse {
  0% { -moz-box-shadow: 0 0 0 0 rgba(60, 103, 255, 0.4); box-shadow: 0 0 0 0 rgba(60, 103, 255, 0.4);}
  70% {-moz-box-shadow: 0 0 0 10px rgba(60, 103, 255, 0); box-shadow: 0 0 0 10px rgba(60, 103, 255, 0); }
  100% {-moz-box-shadow: 0 0 0 0 rgba(60, 103, 255, 0); box-shadow: 0 0 0 0 rgba(60, 103, 255, 0); }
}

/* CONTENT            */
/* .section-tout      */
.section-tout .features{ margin-top: 3rem; }
.section-tout .features li{ padding: 0.5rem 0; font-size: 1.5rem; }
.section-tout .logo{ display: flex; justify-content: center }
.section-tout .logo img{ width: 50% }
/* 
.section-tout .fa { margin-right: .5em }
.section-tout p { margin-bottom: 3em } 
*/

/* Responsive */
@media (min-width: 768px) {
  body>.navbar-transparent { background-color: transparent }
  body>.navbar-transparent .navbar-nav>.open>a { background-color: transparent!important }
}

@media (max-width: 767px) {
  .splash h1 { font-size: 2em }
}