html {
	
	background: rgba(32,42,57,0.7) ;
		background-size:cover;
}
body {
	margin:0;
		background: url('../images/bg-stars.jpg') ;
	color: #fff;
	font-family:'Roboto Condensed',sans-serif;
}


@font-face {
    font-family: 'latohairline';
    src: url('../fonts/lato-hai-webfont.eot');
    src: url('../fonts/lato-hai-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-hai-webfont.woff') format('woff'),
         url('../fonts/lato-hai-webfont.ttf') format('truetype'),
         url('../fonts/lato-hai-webfont.svg#latohairline') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-lig-webfont.eot');
    src: url('../fonts/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-lig-webfont.woff') format('woff'),
         url('../fonts/lato-lig-webfont.ttf') format('truetype'),
         url('../fonts/lato-lig-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-reg-webfont.eot');
    src: url('../fonts/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-reg-webfont.woff') format('woff'),
         url('../fonts/lato-reg-webfont.ttf') format('truetype'),
         url('../fonts/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#header {
	margin:40px 0;
}



h1#logo {
font-family: 'Open Sans','Cabin', sans-serif;
color: #bdbdbd;
font-weight:600;
text-transform: uppercase;
letter-spacing:1px;
margin:0;
}

p#slogan {
font-family: 'Open Sans','Cabin', sans-serif;
text-transform: uppercase;
color: #666;
font-size:20px;
margin:0;
}

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

.spip_logos {
	margin: 0 5px 5px 0 ;
}

.portfolio-acc li {
 display: inline;
}

.portfolio-acc li a{
display:block;
margin: 0 5px 5px 0;
float:left;
}

.homepage  {
	text-align:center;
  animation: fadein 4s cubic-bezier(.36,.07,.19,.97) both;
}
.toolPage {
	animation: unset;
	zoom: 2;
}

.toolPage input {
	margin: 5px 0;
}

.small {
	font-size: 70%;
}

.yellow {
	color: yellow;
}

.bg-yellow {
	background:yellow;
}

.toolPage hr {
	margin: 10px 0;
	border-color: yellow;
	background-color: yellow;
    opacity: 1;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.homepage h1 {	
	font-size: 5em;
	color: #fff;
	margin: 0 ;
	line-height: 1.5em;
	border-bottom: 1px dashed rgba(255,255,255,0.4);
}


.homepage h1  span{	
    font-family: 'latohairline';
}

.homepage h2 {	
    font-family: 'latolight';
	font-size: 2.3em;
	text-transform: uppercase;
	color: #fff;
	line-height: 3em;
	border-bottom: 1px dashed rgba(255,255,255,0.4);
	margin: 0 ;
}

#imgLogo {
	padding: 6em 0 2em 0 ;
}

#tableCoords {
	display: table;
	padding: 2em 19.5em;
    font-family: 'latoregular';
	color: #fff;
	width: 100%;
}



.phoneNumber a {    
	color: #fff;
	text-decoration:none;
    font-size: 1.2em;
    padding-left: 0.5em;
}

 .mail a {    
	color: #fff;
    font-size: 1.2em;
    padding-left: 0.5em;
	text-decoration: none;
}

 .mail a:hover {
	color: #aaa;
 }


/* new */
html,body {
	height: 100%;	
	font-family: 'Open Sans','Arial', sans-serif;
	
	font-size: 1vw;
}
h1 {
	color:white;
}
.flex { 
	display:flex;
	height:100%;
	justify-content:center;
	align-items:center;
}
.tableCoords {
	display: flex;
    justify-content: space-between;
	padding-top:20px;
    align-items: center;
}
.homepage {
    display: flex;
	max-width: 450px;
    flex-direction: column;
}
.material-icons {
	font-size: 20px;
	vertical-align:middle;
}
@media (max-width: 768px) { 
	body {
	font-size: 2vw;
	}
}
@media (min-width: 660px) and (max-width: 767px) { 
html,body {	
	font-size: 0.8vw
}
}
@media (min-width: 1320px) { 
html,body {	
	font-size: 0.6vw
}
}