/* 

 * -----------------------------------------------------------------------------------

 * Aspermind_studio_website - main.css

 * Copyright © 2016/02/26 Nicolas Deseny <n.deseny@aspermind.com> / Aspermind studio

 * All rights reserved - any unauthorized use or reproduction is prohibited

 * -----------------------------------------------------------------------------------

 */



body {

  margin: 0;

  background-color: #34495e;

}



video { 

    max-width: 100%;

    max-height: 700px;

    width: 100% !important;

    height: auto !important;

    z-index: 0;

    background: url('/img/spotlightBkg.jpg') no-repeat;

    background-size: cover;

    transition: 1s opacity;

    object-fit: cover;

}



.stopfade { 

   opacity: .5;

}



.clear a {

    color: #c0392b;

    text-decoration: none;

}



.clear a:hover {

    color: #e74c3c;

}



.dark a {

    color: #f4e600;

    text-decoration: none;

}



.dark a:hover {

    color: #c0b503;

}



p, li {

    margin-top : 0;

    font-family: 'Roboto', sans-serif;

    font-size: 1.1em;

}



section {

    padding: 50px;

    margin-top: -5px;

    position: relative;

}



.clear {

    background-color: #fff;

    z-index: 100;

}



.clear p, .clear ol li {

    color: #565656;

}



.clear h1, .clear h2, .clear h3 {

    color: #2c3e50;

}



.dark {

    background-color: #34495e;

    z-index: 100;

}



.dark p, .dark ol li {

    color: #95a5a6;

}



.dark h1, .dark h2, .dark h3 {

    color: #bdc3c7;

}



#logo, #footerlogo {

    background-image: url(/img/aspermind_logo.png);

    display: block;

    margin: 0 auto;

    text-indent: -9999px;

    width: 239px;

    height: 69px;

}



.socialIcon {

    display: inline-block;

    margin: 0 10px 10px 10px;

    width: 64px;

    height: 64px;

}



#fbIcon {

    background-image: url(/img/facebook.png);

}



#fbIcon:hover {

    background-image: url(/img/facebook_hover.png);

}



#twitterIcon {

    background-image: url(/img/twitter.png);

}



#twitterIcon:hover {

    background-image: url(/img/twitter_hover.png);

}



#instagramIcon {

    background-image: url(/img/instagram.png);

}



#instagramIcon:hover {

    background-image: url(/img/instagram_hover.png);

}





#ytIcon {

    background-image: url(/img/youtube.png);

}



#ytIcon:hover {

    background-image: url(/img/youtube_hover.png);

}



#redditIcon {

    background-image: url(/img/reddit.png);

}



#redditIcon:hover {

    background-image: url(/img/reddit_hover.png);

}



#topNav {

    background: url('/img/darkBkg.jpg');

    width: 100%;

    height: 90px;

    min-width: 765px;

    line-height: 30px;

    z-index: 300;

    position: relative;

}



#topNav a {

    color : #bdc3c7;

    font-family: 'Roboto', sans-serif;

}



#topNav #logo {

    display: inline-block;

    margin: 10px 0 10px 50px;

}



#topNav #navMenu {

    display: inline-block;

    float:right;

}



#topNav #navMenu ul {

    display: inline-block;

    list-style: none;

    margin: 25px 30px 0 0;

    padding: 0;

    height: 30px;

}



#topNav #navMenu ul li{

    margin:0 ;	

    display: inline;

    font-size: 1.0em;  

    vertical-align: middle;

    line-height: 30px;

}



#topNav #navMenu li a{

    vertical-align: middle;

    margin: 0 10px;	

    display: inline-block;

}



#topNav #navMenu li a {

    margin: 0 10px;

    text-decoration: none;

}



#career {

    text-align: center;

}



#career h1 {

    font-size: 3em;

    color: #ffffff;

    text-transform: uppercase;

    margin: 0;

    text-shadow: 0 0 20px #000;

}



#career h2 {

    font-size: 2em;

    color: #ffffff;

    text-transform: uppercase;

    margin: 5px 0;

    text-shadow: 0 0 20px #000;

}



#career p {

    color: #bdc3c7;

    font-weight: bold;

    text-shadow: 0 0 20px #000;

}



footer {

    position: relative;

    background-color: #34495e;

    padding: 50px;

}



footer a {

    font-family: 'Oswald', sans-serif;

    color : #bdc3c7;

}



footer a:hover {

    color : #7f8c8d;

}



#footMenu {

    display : table;

}



#footMenu .menu {

    display: table-cell;

    list-style-type: none;

}



#footMenu .menuHeader {

    font-family: 'Roboto', sans-serif;

    color: #bdc3c7;

    text-transform: uppercase;

    border-bottom: #bdc3c7 1px solid;

    margin-bottom: 5px;

    font-size: 1.3em;

}



#footMenu .menuOption a {

    font-family: 'Oswald', sans-serif;

    color: #bdc3c7;

    font-weight: 100;

    text-decoration: none;

    font-size: 1em;

}



#footMenu .menuOption a:hover {

    color : #7f8c8d;

}



.langItem {

    margin-top: 5px;

}



.langItem a img, .langItem a {

    border: medium none;

    overflow: hidden;

    float: right;

    margin: 2px;

}



.langItem a:hover {

    border: #fa7e00 1px solid;

}



.langItem a:hover img{

    margin : 1px;

}



#mentions {

    font-family: 'Oswald', sans-serif;

    color: #bdc3c7;

    text-align: center;

    width: 100%;

    margin-top: 10px;

}



#Spotlight {

    position: relative;

    max-width: 100%;

    max-height: 700px;

    width: 100% !important;

    height: auto !important;

    z-index: 0;

    background: url('/img/spotlightBkg.jpg') no-repeat;

    background-size: cover;

    transition: 1s opacity;

    object-fit: cover;

    padding: 0;

}



#Spotlight .spotlightImg {

    visibility: hidden;

    width: 100%;

}



#spotlightLogo {

    position: absolute;

    z-index: 100;

    top: 20px;

    left: 50px;

    float: inside;

    width: 40%;

    max-width: 512px;

}



#SpotlightLearnMore {

    position: absolute;

    bottom: 50px;

    right: 50px;

}



#rttArrow {

    position: absolute;

    left: calc(50% - 32px);

    top: -30px;

}



.bigButton {

    font-family: 'Oswald', sans-serif;

    font-size: 2em;

    background: #e67e22;

    color: #fff !important;

    border-radius: 20px;

    padding: 10px 20px;

    z-index: 100;

    border: 0;

    text-decoration: none;

    box-shadow: none;

}



.tinyButton {

    font-family: 'Oswald', sans-serif;

    font-size: 1em;

    background: #e67e22;

    color: #fff;

    border-radius: 10px;

    padding: 5px 10px;

    z-index: 100;

    border: 0;

    text-decoration: none;

    box-shadow: none;

}



.bigButton img {

    height: 30px;

}



.bigButton:hover ,.tinyButton:hover {

    background: #d35400;

    color: #fff;

}



.sectionTitle{

    text-align: center;

    background-color: #c0392b;

    height: 50px;

}



.sectionTitle h2{

    color: #fff;

    font-size: 3em;

    text-transform: uppercase;

    text-shadow: 0 0 20px #000;

    margin: 0;

}



.screenshot {

    height: 300px;

}



.textContainer {

    width: 700px;

    margin: 0 auto;

    display : table;

    border-spacing: 10px; 

}



.textContainer h1 {

    font-family: 'Oswald', sans-serif;

    font-size: 2.5em;

    margin-top:0;

}



.textContainer h2 {

    font-family: 'Oswald', sans-serif;

    font-size: 2em;

}



.textContainer h3 {

    font-family: 'Oswald', sans-serif;

    font-size: 1.7em;

    margin-top:0;

}



.textContainer h4 {

    font-family: 'Oswald', sans-serif;

    font-size: 1.3em;

    margin-top:0;

}



.titleDiv {

    display: table-cell;

    vertical-align: top;

    width : 40%;

}



.titleDiv p {

    font-size: 0.9em;

}



.logoImg{

    width : 80%;

}



.textDiv {

    display: table-cell;

    vertical-align: middle;

}



.parallax-window {

    background: transparent;

}



.hiddenRow {

    width:100%;

    overflow:hidden;

    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);

    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);

    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);

    max-height: 0px;

}



.shownRow {

    width:100%;

    overflow: hidden;

    -webkit-transition: max-height 2s ease;

    -moz-transition: max-height 2s ease;

    transition: max-height 2s ease;

    max-height: 500px;

}



thead {

    font-family: 'Roboto', sans-serif;

    background-color: #34495e;

    color: #fff;

}



td span {

    font-family: 'Roboto', sans-serif;

    color: #565656;

}



td p {

    font-family: 'Roboto', sans-serif;

    color: #565656;

    font-size: 1em;

    margin: 10px 0;

}



#sitemap {

    width: 100%;

    border : 0;

    height: 550px;

}



#demoButton {

    display: block;

    text-align: center;

    margin-left: auto;

    margin-right: auto;

    width: 350px;

}



.table {

    display: table;

    width: 100%;

    margin: 20px 0;

}



.cell {

    display: table-cell;

    text-align: center;

    padding: 0 20px;

}



.picto {

    width: 100px;

    height: 100px; 

    line-height: 100px;

    -moz-border-radius: 50%;

    border-radius: 50%;

    font-size: 2em;

    padding:10px;

    border: #34495e 20px solid;

}



.pictoTitle {

    font-family: 'Roboto', sans-serif;

    color: #565656;

    font-size: 2em;

    margin: 10px 0;

}



@media screen and (max-device-width: 800px) {

  html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }

  #bgvid { display: none; }

}