@font-face {
		  font-family: 'Calibre-Thin';
		  src: url(fonts/calibre/Calibre-Thin.otf);
		  font-weight: normal;
		  font-style: normal; }
		@font-face {
		  font-family: 'Calibre-Light';
		  src: url(fonts/calibre/Calibre-Light.otf);
		  font-weight: normal;
		  font-style: normal; }
		@font-face {
		  font-family: 'Calibre-Regular';
		  src: url(fonts/calibre/Calibre-Regular.otf);
		  font-weight: normal;
		  font-style: normal; }
		@font-face {
		  font-family: "Calibre-Semibold";
		  src: url(fonts/calibre/Calibre-Semibold.otf) format("opentype");
		  font-weight: normal;
		  font-style: normal; }
		@font-face {
		  font-family: "Calibre-Bold";
		  src: url(fonts/calibre/Calibre-Bold.otf) format("opentype");
		  font-weight: normal;
		  font-style: normal; }
  
		* {
			box-sizing: border-box;
		}
		
		html {
			overflow: auto;
		}
		
		body { 
			font-family: 'Calibre-Regular';
			font-size: 13px;
			color: #666;
			background: #f2f2f2;
			padding: 50px 25px;
			min-width: 640px;
		}
		
		body.noPadding {
			padding: 0 10px 0 0 !important;
			width: 640px;
			margin: 0 auto;
			background: transparent !important;
		}
		
		section {
			width: 100%;
		    max-width: 720px;
		    min-width: 640px;
		    margin: 0 auto;
		    left: 50%;
		    transform: translateX(-50%);
		    
		    display: block;
			height:100vh;
			position: absolute;
			bottom: 0;
			
		}
		
		h1, h2, h3, h4 {
			font-size: 15px;
			margin: 0;
			padding: 0 0 0 0px;
		    line-height: 16px;
			display: inline-block;
			font-family: 'Calibre-Regular';
			font-weight: normal;
		}
		
		h1.title {
			font-size: 27px;
			margin: 90px 0 0px 0;
		    padding: 0 0 0 0;
		    line-height: 32px;
			display: inline-block;
			font-family: 'Calibre-Semibold';
			font-weight: normal;
		}
		
		h2.title {
			font-size: 17px;
			margin: 0 0;
		    padding: 0 0 0 0;
		    line-height: 32px;
			display: inline-block;
			font-family: 'Calibre-Regular';
			font-weight: normal;
		}
		
		h2 em {
			font-size: 17px;
			margin: 0 0;
		    padding: 0 0 0 0;
		    line-height: 32px;
			display: inline-block;
			font-family: 'Calibre-Semibold';
			font-weight: normal;
			font-style: italic;
		}
		
		div h1 {
			font-size: 28px;
			font-family: 'Calibre-regular';
			line-height: 36px;
			    width: 100%;
		}
		div h2 {
			font-size: 15px;
		}
		div h2.folderTitle:hover {
			color: #0fcc47;
		}
		div h3 {
			font-size: 15px;
		}
		
		div h3.folderTitle:hover {
			color: #0fcc47;
		}
		div h4 {
			font-size: 15px;
		}
		
		div h4.folderTitle:hover {
			color: #0fcc47;
		}
		
		.iframeContainer {
			position: absolute;
			left: 0;
			right: 0;
			xtop: 50px;
			height: calc(100% - 310px);
			bottom: 75px;
			xoverflow: hidden;
		}
		
		iframe {
			border: 0px solid red;
			display: block;
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
		
		form {
			display: inline-block;
			float: right;
		}
		
		.listOrder {
			padding: 10px 0 10px 0 ;
			width: 100%;
			xborder-bottom: 1px solid #ddd;
			xtext-align: right; 
			}
		
		.listOrder a {
			display: inline-block;
			
		}
		
		.goBrowse {
			position: absolute;
			top: 20px;
			display: block;
			overflow: hidden;
			height: 60px;
			xwidth: 140px;
			margin: 0 0px 0 0px;
			padding-left: 5px;


		}
		.goBrowse span {
			font-family: 'dA-logo';
			font-size: 36px;
			display: inline-block;
			margin: 0;
			margin-left: -3px;
			padding: 0;
			vertical-align: top;
			line-height: 56px;
			color: black;
			-webkit-font-smoothing: antialiased;
		}
		.goBrowse .mark {
			color: #0fcc47;
		}
		
		select {
			background: transparent;
		   border: 1px solid #ddd;
		   border-radius: 3px;
		   font-size: 13px;
		   line-height: 29px;
		   padding: 5px; 	
		   -webkit-appearance: none;
		    line-height: 32px;
		    height: 32px;
		    padding: 0 5px 0 26px;
		    -webkit-appearance: none;
		    font-family: 'Calibre-Semibold';
		    outline: none;
	        background: url(tick-green.png) 8px 11px no-repeat;
			background-size: 12px;
	    	color: #666;
	    	text-transform: uppercase;
	    	
		}
		
		
		
		.folder {
			padding: 10px 0 0 50px;
			
			 position: relative;
		}
		
		.folderTitle {
			cursor: pointer;
			 position: relative;
			 
		}
		
		.folder:not([data-folder="1"]) .folderTitle:before {
		  content: "\e614";
		  display: inline-block;
		  line-height: inherit;
		  font-size: 15px;
		  font-family: "DA-brandicons";
		  vertical-align: top;
		  color: rgba(0,0,0,.2);
		  position: absolute;
		  left: -25px;
		}
		
		.folder:not([data-folder="1"]) .folderTitle:hover:before {
			color: #0fcc47;
		}
		
		
		[data-folder="1"] {
			max-height: 48px;
			overflow: hidden;
			margin-bottom: 7px;
			padding: 10px 0 0 20px;
			transition: all .1s ease-in-out;
			-webkit-transition: all .1s ease-in-out;
			-moz-transition: all .1s ease-in-out;
			-o-transition: all .1s ease-in-out;
			-ms-transition: all .1s ease-in-out;
			
			xborder-top: 1px solid rgba(0, 0, 0, 0);
			xborder-bottom: 1px solid rgba(0, 0, 0, 0);
			xpadding-bottom: 20px;
			xmargin-top: 10px;
		}
		
		[data-folder="2"] {
			
			}
			
		[data-folder="3"] {
			padding-left: 25px;
			}	
			
		
		.folder.open {
			margin-bottom: 7px;
			max-height: 100rem;
			transition: all .5s ease-in-out;
			-webkit-transition: all .5s ease-in-out;
			-moz-transition: all .5s ease-in-out;
			-o-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			
			xoverflow-y: auto;
		}
		
		
		
		[data-folder="1"] h1:before {
			display: inline-block;
			  line-height: inherit;
			  font-size: 15px;
			  font-family: "DA-brandicons";
			  vertical-align: top;
			  color: rgba(0,0,0,.2);
			  position: absolute;
			  left: -20px;
			  top: 2px;
			  content: "\e61f" !important;
			  font-size: 17px !important;
		}
		
		[data-folder="1"] h1:hover {
			color: #0fcc47;
		}
		
		[data-folder="1"] h1:hover:before {
			color: #0fcc47;
			content: "\e90e" !important;
			
		}
		
		
		
		[data-folder="1"].open h1:hover:before {
			transform: rotate(180deg);
			top: 0px;
		}
		
		
		
		.folderDate {
			    float: right;
			    color: rgba(0,0,0,.25);	
			    font-size: 12px;	
			    line-height: 42px;				
				display: inline-block;
		}
		
		
		[data-folder="2"] .folderDate  {
			display: none !important;
		}
		[data-folder="3"] .folderDate  {
			display: none !important;
		}
		[data-folder="4"] .folderDate  {
			display: none !important;
		}
		
		.folder.open .folderDate {
			display: none !important;
		}
		
				
		.list {
			padding: 5px 0px 5px 0px;
			margin-bottom: 10px;
		}
		.list span.date {
			    float: right;
			    color: rgba(0,0,0,.35);	
			    font-size: 12px;	
			    line-height: 16px;
				display: inline-block;	
		}
		
		
		
		
		.list a {
			font-size: 14px;
			color: #666;
			text-decoration: none;
			    display: inline-block;
		}
		.list a:hover {
			color: black;
			text-decoration: underline;
		}
		
		
		.item {
			padding: 7px 0 7px 0;
			border-bottom: 1px solid #ddd;
		}
		.item:hover {
			background: rgba(255,255,255,0.5);
		}
		.item:first-of-type {
			margin-top: 5px;
			border-top: 1px solid #ddd;
		}
		
		
		
	/* tabs */	
		
	.tabs {
		display: block;
		box-shadow: inset 0 -1px 0 0px #c6c6c6;		
		position: relative;
		padding: 0;
	}
	
	
	.tabs li {
		display: inline-block;
		margin-right: 25px;
		
	}
	
	.tabs li a {
		display: block;
		text-decoration: none;
		padding: 10px 0px;
		font-family: 'Calibre-Bold';
			font-weight: normal;
			font-size: 36px;
			color: #7d8080;
	}
	
	.tabs li a:hover {
		color: #0fcc47 !important;
	}
	
	.tabs li a.selected {
		box-shadow: inset 0 -3px 0 0px #0fcc47;	
		xborder-bottom: 3px solid #0fcc47;
		color: #181A1B !important;
	}		
		
		
	.footer {
		position: absolute;
		bottom: 0px;
		height: 75px;
		display: block;
		
		font-size: 16px;
		margin: 0 0;
	    padding: 20px 0 0 0;
	    line-height: 32px;
		display: inline-block;
		font-family: 'Calibre-Regular';
		font-weight: normal;
		
		xborder-top: 1px solid #ddd;
		
		right: 0;
		left: 0;

	}
	
	.footer i {
		color:  #0fcc47;
		font-family: 'Calibre-Medium';
		font-weight: normal;
		font-style: normal;
		display: inline-block;
		font-size: 60px;
		vertical-align: top;
		margin-right: 10px;
	}
		
		
		
		#myiframe {
			z-index: 10;
			position: relative;
		}
		
		.iframeContainer:before {
			    border-top: 1px solid #ddd;
			        border-bottom: 1px solid #ddd;
			content: "";
			position: absolute;
			left: -100%;
			right: -100%;
			display: block;
			height: 100%;
			top: 0;
			bottom: 0;
			background: white;
			z-index: 1;
		
		}