@import '../materialize/sass/materialize.scss';

@font-face {
    font-family: Eurostile;
    src: url(../fonts/Eurostile/Eurostile.ttf);
}

@font-face {
    font-family: PantonB;
    src: url(../fonts/Panton/Panton-BlackCaps.otf);
}

@font-face {
    font-family: PantonL;
    src: url(../fonts/Panton/Panton-LightCaps.otf);
}

@font-face {
    font-family: PantonLI;
    src: url(../fonts/Panton/Panton-LightitalicCaps.otf);
}

$orange: #ff6b1b;

body{
	font-family: PantonL, sans-serif;
	background: url("../imgs/bg_long.jpg") ;
	height: 100%;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

main{
	flex: 1 0 auto;
}

video{
	position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

.h-lg{
	font-family: PantonB, sans-serif;
	font-size: 13em;
}

.h-md{
	font-family: PantonL, sans-serif;
	font-size: 7.5em;
}

.h-sm{
	font-family: PantonLI, sans-serif;
	font-size: 3em;
}

#commit{
	margin-top: -85px;
}
#succeed{
	margin-top: -50px;
}
#enrich{
	margin-top: -30px;
	letter-spacing: 8px;
	span{
		background-color: $orange;
	}
	margin-bottom: 100px;
}

#side-menu{
	margin-top: 100px;
}

.table-of-contents{
	hr{
		display: none;
		width: 1px;
	  	height: 100px;
	  	background-color: black ;
	  	margin-left: 50px;
	}
	a{
		width: 200px;
	}
	a:hover{
		color: $orange;
		border-color: $orange !important;
	}
}

.container-custom{
	flex: 1 0 auto;
	width: 100% !important;
	margin: 0;
	padding: 50px;
}

#nav-mobile-right{
	img{
		width: 50%;
	}	
}

#nav-mobile-left{
	
	a{
		@extend .grey-text, .text-darken-2;
	}
	a:hover{
		background-color: transparent;
		color: $orange !important;
	}
	img{
		width: 100px;
		margin-top: 20px;
	}
}

footer{
	margin-top: 50px;
	a{
		@extend .grey-text, .text-darken-2;
	}
	a:hover{
		color: $orange !important;
	}

	li{
		a{
			margin-right: 20px;
			float: right;
		}
	}
}


#title{
	font-family: PantonB, sans-serif;
	font-size: 3em;
}

#sub-title{
	margin-top: -20px;
	font-family: PantonLI, sans-serif;
	font-size: 1.1em;
	span{
		padding: 0 27px;
		background-color: $orange;
	}
}

#servicios{
	margin-bottom: 100px;
	h5{
		font-size: 1em !important;
	}
	
	span{
		font-weight: bold;
	}
}
.serv-disp{
	height: 350px;
}

.extras{
	margin-left: 50px;
}

#ser_vicio{
	font-family: PantonB, sans-serif;
	font-size: 3em;
	span{
		color: $orange;
	}
}

#serv-menu{
	margin-top: 50px;
	li{
		display: inline;
		margin: 0px 20px 0 0;
		a{
			border-left: none !important;
			@extend .grey-text, .text-darken-2;
		}
		a:hover{
			color: $orange !important;
			border-bottom: 1px solid;
		}
	}
}

.menu-active{
	font-size: 1.2em !important;
	border-bottom: 1px solid $orange !important;
}

#vicio{
	margin-top: -30px;
}

#theteam{
	margin-bottom: 200px;
	h1{
		font-family: PantonB, sans-serif;
		margin-bottom: 100px;
		font-size: 3em;
	}
	span{
		color: $orange;
	}

	img{
		margin-right: 20px;
	}
}


#clients{
	margin-bottom: 200px;
	h1{
		font-family: PantonB, sans-serif;
		margin-bottom: 100px;
		font-size: 3em;
	}
	span{
		color: $orange;
	}

	img{
		margin-right: 20px;
	}
}

#us{
	margin-top: -60px;
}

#contact{
	margin-top: 100px;
	h1{
		font-size: 8em;
	}
	span{
		color: $orange;
	}
	p{
		font-family: PantonL, sans-serif;
		letter-spacing: 3px;
	}
	margin-bottom: 300px;
}

.active{
	color: $orange !important;
	border-left: 4px solid !important;
	border-color: $orange !important;
	margin-left: 10px;
}