/* -------- screen resolutions details ---------------
				
				320* : iphone 5
				375* : iphone 6
				414* : iphone 6+, iphone 7
				480* : nokia lumia : portrait mode
				540* : Motorola Droid : portrait mode
				768* : ipad : portrait mode
				800* : samsung epic smartphone : landscape mode
				960* : htc  sensation smartphone : landscape mode
				1024* : ipad : landscape mode
				1200* : nexus tablet : portrait mode
				1280* - 1360* - 1366* - 1440* - 1536* - 1600* - 1680* - 1920* - 2560 : desktop

*/

/* for preview site only */

.preview-sign { position: absolute; bottom: 0; left: 0; color: #fff; text-transform: uppercase; padding: 12px; font-size: 10px; background-color: #0055CC; z-index: 1000000; font-family: 'Arial'; letter-spacing: 0.07em;}

/* / end for preview site only */

/* containers */
.li-social-media { min-height: 38px; padding-top: 7px; }
.social-media-icon-wrapper { width: 39px; height: 39px; padding-left: 15px; float: right; }
.social-media-icon-wrapper img { width: 100%; }

/* home */

.fluid1 { padding-left: 0px !important; }

.float-left { float: left; }

.pagetitle, .navbar-brand { background-color: #FFF ;}

h1.pagetitle { margin-top: 0px; border-top: 20px solid #fff; }


/* ---------------- loader -------------------- */

#loader{
 z-index:999999;
 display:block;
 position:fixed;
 top:90px;
 left:0;
 width:100%;
 height:100%;
 background:url(/img/page-loader.gif) 50% 30% no-repeat rgba(255,255,255,1);
 background-size: 10% 2px;
}


/* -------------------------------------------------------- google fonts -------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');

/* -------------------------------------------------------- webfonts -------------------------------------------------------- */

@font-face {
	font-family: 'Rongel Bold';
	src: url('/webfonts/Rongel-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Rongel Italic';
	src: url('/webfonts/Rongel-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Rongel Roman';
	src: url('/webfonts/Rongel-Roman.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
	
@font-face {
	font-family: 'Rongel Thin';
	src: url('/webfonts/Rongel-Roman.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}

/* -------------------------------------------------------- typo -------------------------------------------------------- */

a {
	outline: none;
	border: none;
}

a:link, a:visited { color: #000; text-decoration: none; }
a:hover { color: #666; }

body { font-family: 'Rongel Thin', serif; }

h1 { font-size: 0.9em; text-transform: uppercase; color: #000; letter-spacing: 0.05em; font-family: "akzidenz-grotesk-extended",sans-serif; }
h2 { font-size: 1.15em; text-transform: uppercase; color: #000; letter-spacing: 0.05em; font-family: "akzidenz-grotesk-extended",sans-serif; }
h3 { font-size: 1.4em; text-transform: uppercase; color: #000; letter-spacing: 0.1em; font-family: 'Rongel Thin', serif; }
h4 { font-size: 1em; color: #000; letter-spacing: 0.05em; font-family: "akzidenz-grotesk-extended",sans-serif; }
h5 { font-size: 1.1em; color: #000; letter-spacing: 0.1em; font-family: 'Rongel Thin', serif; }

.slider h3 { font-size: 1.1em; color: #000; letter-spacing: 0.1em; font-family: 'Rongel Thin', serif; text-transform: none; margin-top: 0px; }

.shops { margin-top: 17px; }
.shopBlock { margin-bottom: 30px; color: #999; }
.contactBlock { margin-bottom: 30px; }
.shops p, .contactBlock p { font-size: 0.9em;  letter-spacing: 0.1em; font-family: 'Rongel Thin', serif; text-transform:  uppercase; padding: 0; margin: 0; }

/* ----------- overlays ------------ ------------ ------------ */

.square-box { }
.square-box a:link { font-size: 1em; text-transform: uppercase; color: #000; letter-spacing: 0.1em; font-family: "akzidenz-grotesk-extended",sans-serif; }
.square-box a:hover  { text-decoration: none; }
.square-box img:hover { opacity: 0.2; filter: alpha(opacity=100); /* For IE8 and earlier */ }
.square-box:hover .mouseOVerText { visibility: visible; opacity: 1; }

.mouseOVerText { display: flex; align-items: center; justify-content: center; z-index: 0; color: #000; text-align: center; opacity: 0; pointer-events: none; background: none !important; height: 100%; position: absolute; top:0; left: 0; width: 60%; margin-left: 20%; margin-right: 20%; }


img.blockImage:hover { opacity: 0.2; filter: alpha(opacity=100);  } /* For IE8 and earlier */


/* ----------- / end overlays ------------ ------------ ------------ */

#silentarchive h2 a:link, #silentarchive h2 a:visited { color: #000; text-decoration: underline; }
#silentarchive h2 a:hover { color: #999; }

p { letter-spacing: 0.1em; }

#biography p, #projects p { text-align: justify; letter-spacing: 0em;  }

#projects #mainContent h2 { font-size: 1.45em; }



/* -------------------------------------------------------- general dimensions -------------------------------------------------------- */

#mainContent .container-fluid { max-width: 1420px; }

/* -------------------------------------------------------- paddings and margins -------------------------------------------------------- */

.topnone { margin-top:0%; }
.topxxs { margin-top: 2%; }
.topextrasmall { margin-top:0.5%; }
.topsmall { margin-top:1%; }
.topmedium { margin-top: 1.5%; }
.toplarge { margin-top: 3%; }
.toplarge3vh { margin-top: 3vh; }
.toplarge5vh { margin-top: 5vh; }
.toplarge7vh { margin-top: 7vh; }
.topextralarge { margin-top: 6%; }

.bottomsmall { margin-bottom:1%; }
.bottommedium { margin-bottom:1.5%; }
.bottomlarge { margin-bottom:3%; }
.bottomextralarge { margin-bottom:9%; }

.rightnone { margin-right:0%; }
.rightsmall { margin-right:1%; }
.rightmedium { margin-right:1.5%; }
.rightlarge { margin-right:3%; }
.rightextralarge { margin-right:12%; }

.no-padding { padding: 0 !important; }
.no-leftpadding { padding-left: 0 !important; }
.no-topmargin { margin-top: 0 !important; }
.no-leftmargin { margin-left: 0 !important; }
.no-bottommargin { margin-bottom: 0 !important; }

/* -------------------------------------------------------- elements positions -------------------------------------------------------- */

.fixed-position { position: fixed; }

/* -------------------------------------------------------- navbar styling -------------------------------------------------------- */

#header-background { position: fixed; background-color: #FFF; top: 0; left: 0; width: 100%; z-index: 900; height: 50px; float: left; }

#header-backbutton { position: fixed; background-color: #FFF; top: 39px; left: 30px; width: 20px; z-index: 999; height: 30px; float: left; }

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: 0px;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
	z-index: 998;
}

.navbar-header {
    background-color: #FFFFFF;
}

.navbar-brand {
	float: none;
	padding: 24px 0px 15px 30px;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 12px;
    margin-bottom: 12px;
    background-color: transparent;
    background-image: none;
    border: none;
	z-index: 999;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FAFAFA;
  border-radius: 0px;
}


.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 750px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 0px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #FFF;
	background-color: #FFF;
    width: 330px !important;
    float: right;
    text-align: right;
	text-transform: uppercase;
	background-color: rgba(252,252,252,0.8) !important;
	padding-left: 30px;
	padding-bottom: 12px;
}

/* -------------------------------------------------------- navbar links -------------------------------------------------------- */

.navbar-default .menuItem {
	padding: 8px 15px;
    line-height: 20px;
	font-family: "akzidenz-grotesk-extended",sans-serif;
}
.navbar-default .navbar-nav > li > a {
    color: #000;
	letter-spacing: 0.0em;
	font-family: "akzidenz-grotesk-extended",sans-serif;
	padding: 8px 15px !important;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #666;
    background-color: #FBFBFB;
}
.navbar-default .navbar-nav > li > a:visited {
    color: #000;
}

.borderBottom { border-bottom : 1px solid #000; }
.borderTop { border-top : 1px solid #000; }

/* grid-system 1 - 2 - 3 columns */

/* -------------------------------------------------------- homepage and collection pages -------------------------------------------------------- */


#homepage .bx-viewport { 
				/* overflow: visible !important; */
}


/* -------------------------------------------------------- --------------------------------- looks pages ----------------------- */

#slideshow_thumbs li { width: 12%; padding: 0; margin: 0; }
.looksThumbnail { padding: 0; margin: 0; width: 100%; height: auto; }

#slideshow img { max-height: 80vh; }


.desoslide-overlay {
    height: 36px;
    position: absolute;
    z-index: 10;
    text-align: left;
    color: white;
    font-weight: bold;
    background-color: transparent;
    padding: 8px;
    opacity: 0;
}

/* modal window */

.modal-content { border-radius: 0; }

.modal-backdrop.in {
    opacity: .9;
    filter: alpha(opacity=90);
}

.modal-backdrop {
    background-color: #FFF;
}

.modal-header {
    border-bottom: none;
}

.modal-header .close {
    width: 22px;
    height: 20px;
    background-image: url("/img/close-button-cross.png");
    opacity: 1;
    font-size: 0;
}

/* ----------  ---------------  ---------------  ---------------  ---------------  silent archive --------------- */

.vimeoBlock { width: 320px; height: auto; float: left; margin: 5px 0 15px 0; text-align:  center; text-transform : uppercase; }

.vimeoBlock iframe {  }

.archiveNumber { width: 5%; height: 75px; float: left; font-size: 24px }
.archiveNumber.grey { color: #CCC; }
.archiveNumber a:link, .archiveNumber a:visited { color: #000; }
.archiveNumber a:hover { color: #D00; }

.archiveNumber.red a:link, .archiveNumber.red a:visited { color: #C00; }
.archiveNumber.red a:hove { color: #666; }

.silentarchiveText { letter-spacing: 0.015em; padding-left: 1.3%; text-align: justify !important; }

/* projects */

.projectText { max-width: 75%; margin: 30px auto 51px auto; }

/* ---------  ------------------------- --------------- ---------- -------------------- shops -------------- */

.shopImageHolder { padding-top: 20px; }

.shopList h2, .shopBlock { cursor:  pointer; }

/* ---------  ------------------------- --------------- ---------- -------------------- projects -------------- */

.loadMore { padding: 12px; background-color: #EEE; margin: 0px auto 60px auto; width: 150px; }
.loadMore:hover { background-color: #CCC; color: #333; cursor: pointer; }

/* ---------  ------------------------- --------------- ---------- -------------------- footer -------------- */

#footer { width: 100vw;  padding: 30px 0 15px 0; text-align: center; }
#footer.normalflow{ width: 100vw;  padding: 30px 0 15px 0; text-align: center; }

#footer a:link, #footer a:visited { color: #000;}
#footer a:hover { color: #999; }

/* --------  ----------------  ---------------  ---------------  ---------------  responsive video embedding ---------------*/

.flex-video {
			position: relative;
			padding-top: 0px;
			padding-bottom: 67.5%;
			height: 0;
			margin-bottom: 0px;
			overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 56.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
			.flex-video { padding-top: 0; }
}	


/* -------------------------------------------------------- responsive media queries -------------------------------------------------------- */

/* +++++++++++++++++++ 1200 to 1600 ++++++++++++++++++++++  Bootstrap LG ++++++++++++++++++++++++++++++++  desktop +++++++++++ */

@media screen and (min-width: 1200px) {	
	#test { background-color: red; }
	
	/* general */
	
	#mainContent .topmedium { margin-top: 4.5%; }
	img.dvn-logo { width: 400px; margin: 0 auto; }
	
	/* home */
	
	#homepage #mainContent .topmedium { margin-top: 4%; }
	#homepage #mainContent .topsmall { margin-top: 3%; }
	#shopPage #mainContent .topmedium { margin-top: 7%; }
	
	/* looks */
	#looks .topextralarge { margin-top: 10%; }
	
	#silentarchive-overview .topextralarge { margin-top: 12%; }
	
	/* projects */
	
	#projects .topsmall { margin-top: 6%; }
	
	/* silent archive */
	
	.archiveNumber { font-size: 21px }
	.topextrasmall { margin-top: 2%; }
	
	/* contact page */
	#contactPage .toplarge { margin-top: 7%; }

	
}

/* +++++++++++++++++++ 1600 and up ++++++++++++++++++++++  above Bootstrap LG +++++++++++++++++ large desktop +++++++++++++ */

@media screen and (min-width: 1600px) {	
	
	/* general */
	
	#mainContent .topmedium { margin-top: 4%; }
	.topextrasmall { margin-top: 2%; }
	.topsmall { margin-top: 6%; }
	
	/* looks */
	
	#looks .topextralarge { margin-top: 8%; }
	#slideshow_thumbs li { width: 15%; }
	
	/* shops */
	
	#shopPage #mainContent .topmedium { margin-top: 7%; }
	#homepage #mainContent .topsmall { margin-top: 2%; }
	
	/* contact page */
	
	#contactPage .toplarge { margin-top: 7%; }
	#contactPage h2.bottomlarge { margin-bottom: 30px; }
	
	/* silent archive */
	
	#silentarchive-overview .topextralarge { margin-top: 12%; }
	.archiveNumber { font-size: 24px }
	#slideshow img { max-height: 82vh; }
	
}

/* ++++++++++++++++ 1366 only ++++++++++++++++++++++  1366 only +++++++++++++++++  1366 only +++++++++++++++++++++++++++++++ */

@media screen and (width: 1366px) {	
	
	/* general */
	
	img.dvn-logo { width: 400px; margin: 0 auto; }
	
	/* homepage */
	
	#homepage #mainContent .topmedium { margin-top: 3%; } 
	col-lg-10 img { max-width: 80%; }
	
	#homepage #mainContent .col-lg-10 img { max-width: 90%; margin: 0 auto; }
	
	/* video */
	
	#video .topextralarge { margin-top: 4%; }
	
	/* looks */
	
	#looks .topextralarge { margin-top: 9%; }	
	#slideshow img { max-height: 78vh; }
	
	#silentarchive-overview .topextralarge { margin-top: 8.5%; }

}

/* +++++++++++++++++++ 992 to 1200 ++++++++++++++++++++++  Bootstrap MD +++++++++++++++++++++ iPad landscape ++++++++++++++ */


@media screen and (max-width: 1199px) {	
	
	.mouseOVerText {  color: #FFF; text-shadow: 1px 2px 1px #666; opacity: 1; font-size: 0.8em;}
	
	/* general */
	
	#mainContent .topmedium { margin-top: 9%; }
	.topextrasmall { margin-top: 3%; }
	#test { background-color: orange; }
	img.dvn-logo { width: 400px; margin: 0 auto; }
	#header-backbutton { top: 30px; }
	
	/* outfits page */
	
	#pageOutfits h2 { font-size: 0.9em; }
	
	/* homepage */
	
	#homepage #mainContent .topmedium { margin-top: 4%; }
	
	/* collection page */
	
	#collectionPage #mainContent .topmedium { margin-top: 5.2%; }
	#imageGallery #mainContent .topmedium { margin-top: 4%; }
	
	/* silent archive */ 
	#silentarchive .topextralarge { margin-top: 5%; }
	#video .topextralarge { margin-top: 8%; }
	#silentarchive .toplarge { margin-top: 2%; }
	#silentarchive-overview .topextralarge { margin-top: 12%; }
	.archiveNumber { font-size: 20px }
	
	/* looks */
	
	#looks .topextralarge { margin-top: 10%; }
	#slideshow_thumbs li { width: 18%; }
	#slideshow img { max-height: 81vh; }
	#slideshow { padding-left: 0; }
	
	/* outfits */
	
	#pageOutfits h1 { font-size: 0.7em; margin-top: 21px; }
	
	/* image gallery */
	
	#imageGallery h1 { font-size: 0.72em; margin-top: 21px; }
	
	/* projects */
	
	#projects .topsmall { margin-top: 6%; }
	
	.col-md-offset-1 { margin-left: 6%; }
	
	/* shops */
	
	#shopPage #mainContent .topmedium { margin-top: 5%; }
	.shopImageHolder { padding-left: 0; margin-left: -12px; }
	.shops { padding-right: 0; margin-right: 0; }
	
	/* contact page */
	
	#contactPage #mainContent .toplarge { margin-top: 5%; }
	#contactPage .toplarge { margin-top: 7%; }

	
}

/* +++++++++++++++++++ 768 to 991 ++++++++++++++++++++++  Bootstrap SM +++++++++++++++++++ iPad portrait +++++++++++++++++ */

@media screen and (max-width: 991px) {
	
	.mouseOVerText {  color: #FFF; position: absolute; opacity: 1; font-size: 0.8em; opacity: 1; }
	
	/* general */
	
	#test { background-color: blue; }
	#mainContent .topmedium { margin-top: 12%; }
	.topextrasmall { margin-top: 4%; }
	.col-sm-offset-1 { margin-left: 1.8%; padding-right: 0px; }
	
	/* homepage */
	
	#homepage #mainContent .topmedium { margin-top: 6%; }
	
	/* collection page */
	
	#collectionPage #mainContent .topmedium { margin-top: 12%; }
	
	/* looks */
	
	#looks .topextralarge { margin-top: 15%; }
	#slideshow_thumbs li { width: 30%; }
	#slideshow img { max-height: 79vh; }
	#slideshow { padding-left: 0; }
	
	/* image gallery */
	
	#imageGallery h1 { font-size: 0.7em; margin-top: 24px; }
	#imageGallery #mainContent .topmedium { margin-top: 12%; }
	
	/* max width modal */
	
	.modal-content { max-width: 90%; margin: 5% auto; }
	
	/* silent archive */
	
	#silentarchive-overview .topextralarge { margin-top: 15%; }
	.archiveNumber { font-size: 17px; width: 10%; }
	.silentarchiveText { padding-left: 3.5%; padding-right: 2%; }
	
	/* video page */
	
	#video .topextralarge { margin-top: 21%; }
	
	/* shops */
	
	#shopPage #mainContent .topmedium { margin-top: 7%; }
	
	.shopImageHolder { padding-left: 0; margin-left: 0px; }
	.shops { padding-left: 0; margin-left: 0px; }
	
	/* projects */
	
	#projects .topsmall { margin-top: 10%; }
	
	/* biography */
	
	#biography #mainContent .topextralarge { margin-top: 8%; }
	
	/* contact page */
	
	#contactPage #mainContent .toplarge { margin-top: 8%; }
	
	
}

/* +++++++++++++++++++ up to 768 ++++++++++++++++++++++  Bootstrap XS ++++++++++++++++++++++++++++++++ smartphones ++++++++++++ */

@media screen and (max-width: 767px) {
	
	/* general */
	
	#test { background-color: green; }
	img.dvn-logo { width: 275px; max-width: 60vw; margin: 0 auto; }
	.topextrasmall { margin-top: 6%; }
	h1 { font-size: 0.7em; margin-top: 24px; }
	h2 { font-size: 0.8em; }
	.col-xs-12 { text-align: center; }
	#header-backbutton { top: 16px; left: 12px; width: 20px; }
	#header-backbutton img { width: 14px; }
	
	/* homepage */
	
	#homepage #mainContent .topmedium { margin-top: 8%; }
	#homepage #mainContent .topsmall { margin-top: 0%; }
	
	/* collection page */
	
	#collectionPage #mainContent .topmedium { margin-top: 5.2%; }
   
	/* looks */ 
	
	#looks .topextralarge { margin-top: 25%; }
	.desoslide-controls-wrapper {
		margin-left: 7vw;
		width: 66vw;
		top: -5vh;
	}
	
	/* outfits */
	
	#pageOutfits h1 { font-size: 0.6em; margin-top: 24px; }
	
	#slideshow { margin: 0 auto;}
	#slideshow.fixed-position { position : relative; }
	#slideshow img { max-height: 70vh; margin: 0 auto;}
	#looks .col-xs-12.leftpart { text-align: center !important;  margin: 0 auto; }
	
	/* image gallery */
	
	#imageGallery h1 { font-size: 0.58em; margin-top: 24px; }
	#imageGallery #mainContent .topmedium { margin-top: 5%; }
	
	/* silent archive */ 
	
	.archiveNumber { font-size: 17px; width: 10%; height: 59px; }
	
	/* shops */
	.shopBlock, .shopList { text-align: left; font-size: 11px; }
	#shopPage #mainContent .topmedium { margin-top: 8%; }
	
	/* projects */
	
	#projects .topsmall { margin-top: 15%; }
	
	/* biography */
	
	#biography #mainContent .topextralarge { margin-top: 15%; }
	
	/* contact page */
	
	#contactPage h2 { font-size: 1.1em; margin-bottom: 18px; }
	#contactPage .toplarge { margin-top: 8%; }
	
	/* menu */
	
	.navbar-toggle { margin-top: 6px; margin-right: 3px; }
	
	.navbar-default .menuItem {
	padding: 11px 15px;
    line-height: 12px;
	font-family: "akzidenz-grotesk-extended",sans-serif;
		font-size: 10px;
	}
	
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #FFF;
    width: 330px !important;
    float: right;
    text-align: right;
	text-transform: uppercase;
	background-color: rgba(251,251,251,0.95) !important;
	padding-left: 30px;
	padding-bottom: 12px;
	}
	.navbar-nav > li > a {
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 12px;
		font-size: 10px;
	}
	
	/* limit number of collection in main navigation to six */
	
	ul.collectionlisting li:nth-of-type(7) { display: none }
	ul.collectionlisting li:nth-of-type(8) { display: none }
	ul.collectionlisting li:nth-of-type(9) { display: none }
	ul.collectionlisting li:nth-of-type(10) { display: none }
	ul.collectionlisting li:nth-of-type(11) { display: none }
	ul.collectionlisting li:nth-of-type(12) { display: none }
	
	/* homepage and collection pages */
	
	.mouseOVerText { color: #FFF; opacity: 1; font-size: 1em; }


}