/*----------------------------------
MAIN STYLEHSEET

1-HTML ELEMENTS
2-LOADING PAGE
3-CONTAINERS
4-MENU
5-SHEETS
6-CONTENT
7-HELPERS
----------------------------------*/

/* 1-HTML ELEMENTS */
body{
	margin:0;
	font-family: 'Lato', sans-serif;
}
h1{
	/*font-weight: 100;*/
	text-shadow:#474747 2px 3px 2px;
}


/* 2-LOADING PAGE */
.td-preloading{
	position:fixed;
	width:100%;
	height:100%;
	background:#145158;
	z-index:2000;
}
.td-preloading span{
	position:fixed;
	color:white;
	font-size:56px;
	left:calc(50% - 28px);
	top:calc(50% - 28px);
}

.video-container {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1000;
}

.video-container img, .video-container video {
    display: block;
    height: auto;
    left: auto;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    right: auto;
    position: absolute;
    top: 0;
    width: auto;
    z-index: -1000;
}

@supports (transform: translateX(-50%)) {

    .video-container img, .video-container video {
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

}

/*@media screen and (min-aspect-ratio: 16/9){*/
	/* Make this the same aspect ratio as your video */


/* 3-CONTAINERS */
.container{
	width:100%;
}
.td-container{
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	/* background-image:url('/img/blockchain.jpg'); */
	background-size:cover;
	perspective:5000px;
}
.td-sheets-container{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	perspective:1000px;
	z-index:1;
	transition:transform 1.5s, opacity 1.5s;
}
.td-sheets-container.td-hide{
	transform:translateZ(-5000px);
	opacity:.2;
}

.slider{
	text-shadow:#474747 2px 3px 2px;
	
}


/* 4-MENU */
.td-menu{
	position:absolute;
	top:40%;
	right:15px;
	border-radius:50px;
	background-color:black;
	perspective:300px;
	z-index:1000;
}
.td-menu-item{
	margin:8px;
	padding:10px;
	width:40px;
	height:40px;
	border-radius:20px;
	background-color:white;
	opacity:.5;
	transition:opacity .3s, transform 1s;
	cursor:pointer;
}
.td-menu-item:hover{
	transform:rotateY(50deg);
}
.td-menu-item i{
	font-size:20px;
}
.td-menu-item:hover,.td-menu-item.active{
	opacity:1;
}


/* 5-SHEETS */
.td-sheet{
	background-color: transparent; /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, RGBA(0, 0, 0, 0.3) , RGBA(0, 0, 0, 0.3)); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, RGBA(0, 0, 0, 0.3) , RGBA(0, 0, 0, 0.3));  /* Chrome 10-25, Safari 5.1-6 */W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ 

	background: linear-gradient(to left, RGBA(0, 0, 0, 0.3) , RGBA(0, 0, 0, 0.3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color:white;
  font-weight: bold;
	cursor:default;
	overflow:none;
	vertical-align: middle
}
.td-sheet > .container{    
	margin-top:12vh;
/*	top: 50%;
  transform: translateY(-40%);
  position: absolute;*/
 }

.td-sheet.active{
	background-color: transparent;
}
.td-sheet-icon, .td-sheet-title{
	display:none;
}
.td-sheet{
	position:absolute;
	left:10vw;
	top:10vh;
	width:80vw;
	height:80vh;
	border-radius:3px;
	overflow:hidden;
	opacity:0;
	background-color:rgba(255,255,255,0.25);
	transform-origin:center center -60vh;
	transition:opacity 1s, background-color 1s, transform 1s;
}
.td-sheet.active{
	opacity:1;
	z-index:100;
}


/* 6-CONTENT */
.td-aboutus{
	overflow:hidden;
	padding:15px;
	transition:background-color .3s;
	text-shadow:#474747 2px 3px 2px;
}
/*.td-aboutus:hover{
	background-color:rgba(0,0,0,0.3);
}*/
.td-aboutus .td-aboutus-header{
	/*padding:50px;*/
}
.td-aboutus .td-aboutus-header span{
	font-size:7vw;
	transition:transform .7s, opacity .6s;
}
/*.td-aboutus:hover .td-aboutus-header span{
	transform:scale(2.5);
	opacity:0;
}*/
.td-aboutus .td-aboutus-header h3{
	/*font-weight:100;*/
	transition:opacity .3s;
	font-size:1.5vw;
}
/*.td-aboutus:hover .td-aboutus-header h3{
	opacity:0;
}*/
.td-aboutus p{
	position:absolute;
	padding:15px;
	top:100%;
	transition:top .6s;
}
/*.td-aboutus:hover p{
	top:30%;
}*/


/* 7-HELPERS */
.row{
	margin-bottom:30px;
}
.whitelinks a{
	color: white !important;
}
.whitelinks a:hover{
	text-decoration: none;
}
.td-aboutus p {color: white;}