bananaventura/css/home.css

/*		FONTS	*/
@font-face{
font-family:'raleway';
src: url('../fonts/Raleway-Thin.otf');
-webkit-font-smoothing: antialiased;
}
@font-face{
font-family:'openSans-light';
src: url('../fonts/OpenSans-Light.ttf');
-webkit-font-smoothing: antialiased;
}
@font-face{
font-family:'openSans-regular';
src: url('../fonts/OpenSans-Regular.ttf');
-webkit-font-smoothing: antialiased;
}
@font-face{
font-family:'openSans-bold';
src: url('../fonts/OpenSans-Bold.ttf');
-webkit-font-smoothing: antialiased;
}
html, body{
font-family:'openSans-regular';
font-size: 20px;
margin: 0;
padding: 0;
height: 100%;
}

/*		NAV		*/
.home{
	width: 100%;
	height: 80%;
	background-size: cover;
	background-image: url('../images/home.jpg');
	margin-left: 0;
	margin-top:0;
	font-family:'raleway';
	-webkit-text-stroke: 0.3px;
}
.navbar{
	margin: 0;
	background-color: white;
	width: 100%;
	height: 50px;
	text-align: right;
	-webkit-box-shadow: 0 2px 10px 8px rgba(0,0,0,0.2);
	box-shadow: 0 2px 10px 8px rgba(0,0,0,0.2);

}
.navlist{
padding-top: 9px;
font-size: 22px;
margin:0;
list-style-type: none;
vertical-align: middle;
}

.navlist a{
text-decoration: none;
text-transform: uppercase;
color: #6E7679;
}
.navlist li{
vertical-align: middle;
display : inline;
margin: 0 10px;
}

/*		HOME	*/
#logo{
	width: 100%;
	margin: 5% auto;
	text-align: center;
}


/*		SECCION	*/
.seccion{
width: 100%;
}

.content{
width: 80%;
margin: 0 auto;
padding: 40px 0;

}

/*		SECCIONES*/

#us{
	background-color: #A8A39D;
	color: #F8F1E9;
	height: 700px;
	background-image: url('../images/shitti.png');
	background-repeat: no-repeat;
	background-position: center bottom;
}
.left{
float: left;
width: 40%;
margin: 0 auto;

}
.rigth{
float: right;
width: 40%;
margin: 0 auto;
}

#tati{
background-color: #F7C9B8;
}
#deiv{
background-color: #BBD2F4;
}


#whatdowedo{
	background-color: #8D7966;
	color: #F8F1E9;
}


/* 		ANIMACIONES	*/
.coffee-deiv{
    width: 100px;
    height: 100px;
    background-image: url('../images/deivcup.png');
	background-repeat: no-repeat;
	background-position: center center;
    position: relative;
    -webkit-animation: slidein-right 2s; 
    animation-name: slidein-right ;
	animation-duration: 2s;
	top: 66%;
	left: 50%;

}

@-webkit-keyframes slidein-right {
    from {right: 10%;}
    to {right: 40%;}
}

@keyframes slidein-right {
    from {left: 80%;}
    to {left: 50%;}
}


.coffee-tati{
    width: 100px;
    height: 100px;
    background-image: url('../images/taticup.png');
	background-repeat: no-repeat;
	background-position: center center;
    position: relative;
    -webkit-animation: slidein-left 2s; 
    animation-name: slidein-left ;
	animation-duration: 2s;
	top: 80%;
	left: 40%;

}

@-webkit-keyframes slidein-left {
    from {left: 10%;}
    to {left: 40%;}
}

@keyframes slidein-left {
    from {left: 10%;}
    to {left: 40%;}
}


/*		HEADERS	*/
h1{
	font-family: 'openSans-bold';
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid white;
	text-decoration: none;
	font-size: 40px;
	padding: 20px;
}