// //////////////////////
// VARIABLES
// //////////////////////

// Colors
@bg: #F4AF4C;
@grey: #BDBDBD;
@white: #FFFFFF;
@orange: #E84A33;

// Sizes


// //////////////////////
// FONTS
// //////////////////////
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,700,900,700italic,900italic,400italic&subset=latin,cyrillic-ext);
@import url(https://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic);

.beu{font-family: 'Lobster', cursive;
	font-size: 32px;
	color: #DF3327;
}

h1{
	font-weight: 300;
	font-size: 32px;
}
p{
	font-size: 16px;
}
@media screen and (max-width: 70em) {
	#slogan{
        font-size:1.5em;
	}
    h1 {
        font-size:2.0em;
    }
}
@media screen and (max-width: 40em) {
	#slogan{
        font-size:1.4em;
	}
    h1 {
        font-size:1.9em;
    }
}
@media screen and (max-width: 30em) {
	#slogan{
        font-size:1.3em;
	}
    h1 {
        font-size:1.8em;
    }
}

.clear{
	clear: both;
}

// //////////////////////
// MAIN STYLES
// //////////////////////
html{
	width: 100%;
	height: 100%;
	body{
		width: 100%;
		height: 100%;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 12px;
		background: @bg;
	}
}

header{
	width: 100%;
	z-index: 2;
	background: #f02E29;
}
#text{
	height: 140px;
	width: 30%;
	float: left;
	position: relative;
	z-index: 20;
	p, h1{
		color: white;
		padding-left: 100px;
		width: 100%;
		z-index: 20;
	}
	p{
		margin-top: -10px;
		font-size: 24px;
		font-weight: 400;
	}
}
#photo{
	z-index: 2;
	position: relative;
	height: 140px;
	width: 70%;
	float: left;
	background: url("../img/head.jpg") no-repeat center left;
	background-size: cover;
}

nav{
	ul{
		list-style: none;
	    margin:0;
	    padding:0;
		text-align:center;
		background: white;
		height: 63px;
	}
	a{
		color: @orange;
		li{
			display:inline-block;
			padding: 20px;
			font-size: 18px;
			margin: 0 10px;
		}	
		li:hover, #current{
			border-bottom: 3px solid @orange;
		}
	}
}

.avatar{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	border-radius: 200px;
	background: url("../img/avatar.jpg") no-repeat top;
	background-size: cover;
}

.wrapper{
	width: -moz-calc(~"100% - 200px");
	width: -webkit-calc(~"100% - 200px");
	width: -o-calc(~"100% - 200px");
	width: calc(~"100% - 200px");

	margin-top: 20px;
	margin-left: 100px;
	h1{
		margin: 0;
	}

}

.left25{
	float: left;
	width: 25%;
	img{
		width: 100%;
	}
}
.right25{
	background-color: white;
	float: left;
	width: 25%;
	padding: 20px 0;
	p,h1, h2, h3, h4, h5, b{
		padding: 0 40px;
	}
	b{
		font-weight: 300;
		font-size: 24px;
	}
	i{
		width: 32px;
		height: 32px;
	}
}
.middle50{
	float: left;
	width: 50%;
	p{
		font-size: 18px;
		padding: 0 40px;
	}
}
.middle75{
	float: left;
	width: 75%;
	p{
		padding-right: 20px;
	}
	img{
		width: calc(~"100% - 20px");
	}
}
.right25_25{
	background-color: white;
	float: left;
	width: 25%;
	padding: 20px 0;
	p,h1, h2, h3, h4, h5, b{
		padding: 0 40px;
	}
	b{
		font-weight: 300;
		font-size: 24px;
	}
	i{
		width: 32px;
		height: 32px;
	}
}


// //////////////////////
// RISPONSIVE DESIGN
// //////////////////////

@media (max-width: 1300px){
	nav{
		a{
			li{
				display:inline-block;
				padding: 20px 10px;
				font-size: 16px;
				margin: 0 10px;
			}
		}
	}
}

@media (max-width: 1150px){
	.middle50{
		width: 75%;
	}
	.right25{
		width: 100%;
		margin-top: 50px;
	}
}

@media (max-width: 1100px){
	nav{
		ul{
			height: 38px;
		}
		a{
			li{
				display:inline-block;
				padding: 10px 4px;
				font-size: 14px;
				margin: 0px;
			}
		li:hover, #current{
			border-bottom: 1px solid @orange;
		}
		}
	}
	.middle50{
		width: 75%;
	}
	#text{
		width: 50%;
	}
	#photo{
		width: 50%;
	}
	.middle75{
		width: 60%;
	}
	.right25_25{
		width: 40%;
	}
}

@media (max-width: 800px){
	.wrapper{
		width: -moz-calc(~"100% - 40px");
		width: -webkit-calc(~"100% - 40px");
		width: -o-calc(~"100% - 40px");
		width: calc(~"100% - 40px");

		margin-top: 20px;
		margin-left: 20px;
		h1{
			margin: 0;
		}

	}

	nav{
		ul{
			list-style: none;
		    margin:0;
		    padding:0;
			text-align:center;
			background: white;
			height: 203px;
		}
		a{
			text-decoration: none;
			li{
				display:block;
				padding: 10px 0px;
				font-size: 14px;
				margin: 0 10px;
				border-bottom: 1px dashed @orange;
			}	
			li:hover{
				border-bottom: 1px solid @orange;
			}
		}
	}
	.left25{
		width: 40%;
		float: left;
		img{
			margin: 0 auto;
		}
	}
	.middle50{
		width: 60%;
			float: left;
		p{
			padding: 5px;
		}
	}
	.middle75{
		width: 100%;
	}
	.right25_25{
		width: 100%;
	}
	#text{
		width: 50%;
	}
	#photo{
		width: 50%;
	}
}

@media (max-width: 600px){
	.left25{
		width: 30%;
	}
	.middle50{
		width: 70%;
	}
	#text{
		width: 100%;
		text-align: center;
		p, h1{
			padding: 0;
		}
		h1{
			margin-top: 40px;
		}

	}
	#photo{
		width: 0%;
	}

}