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

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

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


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

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html{
	min-height: 100%;
	font-size:62.5%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body{
	min-height: 100vh;
	/*background: #FFFBE8;*/
	background: url(webimg/bg3.jpg) fixed;
	background-size: cover;
	background-position: center center;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

p{
	margin: 0;
}

.fancybox__content{
	padding: 4px!important;
	background: rgba(255, 255, 255, .4)!important;
}


#wrap{
	min-height: 100vh;
	background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.25));
}

/*================================================================================================================*/
/*=================================================GENERAL========================================================*/
/*================================================================================================================*/





h1.presentation-title {
	top: 0;
	right: 0;
	position: absolute;
    color: #555;
    font-family: adele;
    font-size: 2.5rem;
    font-weight: normal;
    line-height: 2.5rem;
    padding-right: 8px;
    text-align: right;
    text-transform: uppercase;
}


/*=========================================================================*/
/*=================================WEB DETAIL==============================*/
/*=========================================================================*/




#webproject{
	max-width: 920px;
	margin: auto;
}

.web-project-logo{
	margin: auto;
	margin-right: 10px;
	max-width: 40px;
}

.headdetail{
	margin-bottom: 20px;
}

#webproject h1{
	font-family: nexa;
	color: white;
	line-height: 4rem;
	font-size: 2.8rem;
	font-variant: small-caps;
}

h1.elegantshadow {
  color: #131313;
  /*background-color: #e7e5e4;*/
  letter-spacing: .15em;
  text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}

h1.deepshadow {
  color: #e0dfdc;
  /*background-color: #333;*/
  letter-spacing: .1em;
  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
h1.insetshadow {
  color: #202020;
  background-color: #2d2d2d;
  letter-spacing: .1em;
  text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}


#webproject h2{
	font-family: arial, sans-serif;
	font-size: 1.7rem;
	font-weight: normal;
	max-width: 660px;
	text-align: left;
	margin: auto;
}

#webproject .descriptionweb{
	text-align: center;
	background: rgba(255,255,255,.4);
	margin-top: 10px;
	padding: 10px 4px;
	box-shadow: 0 3px 3px #000 inset;
}

#webproject .descriptionweb p{
	font-family: arial, sans-serif;
	font-size: 1.3rem;
	font-weight: normal;
	text-align: justify;
	max-width: 660px;
	margin: auto;
	margin-bottom: 10px;
}

.headerwebdetail{
	padding: 10px 4px;
	background: rgba(80,15,15,.6);
}

.techinf{
	background: rgba(0,0,0,.4);
	color: #ccc;
	font-family: raleway;
	font-size: 1.4rem;
	padding: 0 4px;
}

.techinf p{
	display: inline-block;
	position: relative;
	margin: 4px 0;
	padding-left: 12px;
	margin-right: 14px;
}

.techinf p:before{
	content: '';
	position: absolute;
	background: white;
	height: 10px;
	width: 10px;
	left: 0;
	bottom: 4px;
}

.headerwebdetail img, .headerwebdetail h1{
	display: inline-block;
	vertical-align: middle;
}

#webproject .weblink{
	padding-left: 6px;
	position: relative;
}

#webproject .weblink:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 4px;
	height: 13px;
	margin: 3px 0;
	background: white;
}

.borderdot{
	border-bottom: dotted 1px #222;
	max-width: 460px;
	margin: auto;
}

.descriptionweb-bottom{
	max-width: 603px;
	margin: auto;
}



.responsive{
	float: right;
}

.capturemain{
	text-align: center;
}

.capture-block{
	text-align: center;
	margin-bottom: 20px;
	display: inline-block;
}



.webm, .webs{
	position: relative;
	display: inline-block;
}

.webs{
	max-width: 180px;
	padding-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

.webm {
    max-width: 65px;
padding: 16px 0 13px 0;
margin-right: 5px;
margin-left: 5px;
}

.resscreen{
	position: absolute;
	top: 0
}

.resmob{
	position: absolute;
	top: 0
}


.webs img, .webm img {
    display: block;
    margin: auto;
    border-radius: 8px;
    max-width: 100%;
}


/*=========================================================================*/
/*====================================PRINT================================*/
/*=========================================================================*/



h1{
	margin: 0;
	font-weight: inherit;
	line-height: inherit;
	font-size: inherit;
}













.break:after{
	content: 'NO BREAK';
	background: yellow none repeat scroll 0 0;
    color: black;
    display: block;
    height: 50px;
    margin: auto;
    position: fixed;
    right: 6px;
    bottom: 6px;
    width: 250px;
    z-index: 10000;
    text-align: center;
    border-radius: 6px;
    font-size: 3.5rem;
    font-family: quicksand;
    box-shadow: 4px 4px 4px #222;
}






/*========================================================================*/
/*============================RESPONSIVE==================================*/
/*========================================================================*/
@media (max-width: 1900px) {
	.break:after{
		content: 'BREAK 1900';
	}
}

@media (max-width: 1180px) {
	.break:after{
		content: 'BREAK 1180';
	}

}

@media (max-width: 995px) {
	.break:after{
		content: 'BREAK 995';
	}
}

@media (max-width: 850px) {
	.break:after{
		content: 'BREAK 850';
	}

}


@media (max-width: 750px) {
	.break:after{
		content: 'BREAK 750';
	}

}

@media (max-width: 720px) {
	.break:after{
		content: 'BREAK 720';
	}

	

	
}

@media (max-width: 700px) {
	.break:after{
		content: 'BREAK 700';
	}

	
}

@media (max-width: 650px) {
	.break:after{
		content: 'BREAK 650';
	}
}

@media (max-width: 600px) {
	.break:after{
		content: 'BREAK 600';
	}
}

@media (max-width: 550px) {
	.break:after{
		content: 'BREAK 550';
	}
}

@media (max-width: 490px) {
	.break:after{
		content: 'BREAK 490';
	}
}

@media (max-width: 460px) {
	.break:after{
		content: 'BREAK 460';
	}

}

@media (max-width: 450px) {
	.break:after{
		content: 'BREAK 450';
	}

}

@media (max-width: 390px) {
	.break:after{
		content: 'BREAK 390';
	}


}

@media (max-width: 360px) {
	.break:after{
		content: 'BREAK 360';
	}
}