/*JUSTIN ADIL DESIGN STYLESHEET*/

/*TEXT*/

a:hover {color: #0099FF;}
h1, h2, h3, h4 {color:#474747; font-weight:300; margin:0 0 20px 0; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
h1 {font-size:18px; line-height:26px; letter-spacing: 2px; font-weight:bold;}
h2 {font-size:14px; line-height:20px; letter-spacing: 2px; } 
h3 {font-size:12px; line-height:18px;}
h4 {font-size:18px; line-height:18px;} 
p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color:#474747; font-weight:100; font-size:10px; line-height:20px; letter-spacing: 1px;}
a {
    color: #0571b9;
}

/*LAYOUT HELPERS*/
.left {float:left !important;}
.right {float:right !important;}
.clear {clear:both; display:block;}
.padtop {padding-top: 20px;}

/*COLUMNS*/
.secondary {width:23.5%; margin: 0 2% 20px 0; float:left;}

*[class*="col-"] {float:left;}
*[class*="col-"]:after {content:'';display:block; clear:both;}
.col-1 {width:100%; margin: 0 0 20px 0;}
.col-1-2 {width:49%; margin: 0 2% 20px 0;}
.col-1-2:nth-of-type(2n+2) {margin:0 0 20px 0;}
.col-1-3 {width:32%; margin: 0 2% 20px 0;}
.col-1-3:nth-of-type(3n+3) {margin:0 0 20px 0;}
.col-1-4 {width:23.5%; margin: 0 2% 20px 0;}
.col-1-4:nth-of-type(4n+4) {margin: 0 0 20px 0;}
.col-1-5 {width:18.4%; margin: 0 2% 20px 0;}
.col-1-5:nth-of-type(5n+5) {margin: 0 0 20px 0;}
.sidebar.col-1-4 {width:24%;}
.col-3-4 {width:74%;}
.col-2-3 {width:66%;}
.right-sidebar.col-1-4 {margin: 0 0 20px 0;}
.right-sidebar.col-3-4 {margin: 0 2% 20px 0;}
.col-3-5 {width: 58%;}
.col-4-5 {width: 79.2%;}
#omni {
	margin: 20px;
}

/**
 * Media Queries
 */

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}


@media screen and (min-width: 1025px) {

#omni {
	zoom: 140%;
	
	-moz-transform-origin: top;
}

.top-block-view {
	  margin-top: 20px !important;
	
}
}

/** Tablet - Horizontal & Below **/

@media screen and (max-width: 1025px) {

#omni {
	zoom: 124%;
	
	-moz-transform-origin: top;
}
.logotype {
	  padding-left: 0px !important;
	  padding-top: 0px !important;
	  max-width: 185px !important;
}

.sidebar {
	padding-top: 0px !important;
	padding-right: 30px !important;
	max-width: 72px !important;
}

.row-1 {
  margin-left: 22% !important;
}


.page-view {
  margin-left: 28% !important;
}

.top-block-view {
	  max-width: 270px !important;
	  margin-top: 0px !important;
	
}

.proj-text { 
	max-width:180px !important;
	margin-top: 0px !important;
}


  
#issuu {display:none;
}


}

/** Tablet - Vertical & Below **/

@media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) 
   and (orientation : portrait) {
	   
	.row-1 {
		margin-left: 33% !important;
}


}




@media screen and (min-width: 1901px) {
.header {
	border-left: 2px solid #909090;
	border-right: 2px solid #909090;
	border-top: 2px solid #909090;
}
.content-border {
	border-left: 2px solid #909090;
	border-right: 2px solid #909090; 
	border-bottom: 2px solid #909090;
}	
}

<!--IMPORTANT-->
@media screen and (max-width: 1000px) {

.hide{
	display:none !important;
	
}

}




@media screen and (max-width: 667px) {
.top-block {
	
	
}
.top-block-view
{
	margin-top:150px !important;
	
}

.header {

}

.jadil{
    max-width:260px; 
}

.info-page{
	margin-top:150px;
	margin-left:25%;
}

}



@media screen and (min-width: 620px) {


.top-block {
		margin-top:20px;
}

.top-block-sub {
		margin-top:20px;
}

.top-block-view {
		max-width:500px;
}

.sub-block {
		margin-top:30px;
		max-width:400px;
}

.sub-block-wide {
		margin-top:30px;
		max-width:845px;
}

.jadil{
    max-width:260px; 
}



}


@media screen and (max-width: 610px) {
.top-block {
	margin-top:150px;
	
}

.header {

}

.jadil{
    max-width:260px; 
}

}

<!--IMPORTANT-->
@media screen and (max-width: 560px) {

.hidemobile{
	display:none;
	
}

}



@media screen and (min-width: 325px) {
	
.pic{
	margin-right:20px; 

}

}


/* ipad 3/4 (supposedly) ----------- */
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)
{
.row-1 { padding-left:8%; !important}
}

/* iphone 5 (supposedly) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
.logotype {padding-left:10px !important;}
.jadil {max-width:200px !important;}
.row-1 {margin-left:10% !important;}
.header {height:120px !important;}
.info-page{margin-left:10%; !important;}
.project-page{margin-left:10%; !important;}
}


/* iphone 5 (portrait) ----------- */
/*@media only screen 
and (max-width : 320px) {

.sidebar {
	display:none;
}

.jadil{
    max-width:200px; 
}

#logotypemobile {
	padding-top: 0px; 
}


}

/* iphone 5 (landscape) ----------- */
/*@media only screen 
and (min-width : 321px) {
.header {
	height:100px;
}

.omni
{
	margin: 5px;
}
.hidemobile{
	display:none;
	
}

#logotypemobile {
	padding-top: 0px; 
}

#sidebarmobile {
	padding-top: 0px; 
}
}


/* iphone 6 (portrait) ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
.sidebar-left {
	display:none;
}
.hidemobile{
	display:none;
	
}
.jadil{
    max-width:200px; 
}
		
	
}

/* iphone 6 (landscape) ----------- */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
.header {
	height:100px;
}
.logotype{
    width:50px; 
}
.hidemobile{
	display:none;
	
}
}




/* iPad(landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {



}

/* iPad(portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 



}


/* BOX SHADOWS */

.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:auto;
	border:1px solid #FFF;
}

.pic {
	border: 1px solid #eeeeee;
	
}

.effect
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

.site-width {
	width:98%; 
	max-width:1280px; 
	margin:0 auto;

} 

.jadil {
	float:left;
}

.logotype {
	width:100%; max-width:200px; padding-left:30px; padding-right:30px; padding-top:20px;
}

.page-view{
	margin-left:21%;
}

.sidebar{
	float:right;
	padding-top:30px;
	padding-right:20px;
	margin-right:20px;
	max-width:80px;   
}



.sidebar img:hover {
opacity: 0.5; !important
cursor: pointer;
}


.sidebar-left {
	float:left;
	margin-left: 30px;
	margin-top:160px;
    position:fixed;
	height:150px;
	z-index: ;
}


.buffer {
	top:0px;
	margin:0px auto;
	width:100%;
    position:fixed;
	background:#FFF;
	height:40px;
	
} 


.header {
	margin:0px auto;
	width:100%;
    position:fixed;
	height:100px;
	max-width:1280px; 
	z-index: ;
} 

.row-1 {
	margin-left:20%;
	
} 

.top-block-sub {
		margin-top:20px;
}

.content {
    width:100%;
    background: #FFF;
    min-height:1200px;
    margin:0px auto;
	margin-bottom:40px;
	margin-top:40px;
}

.thumb-effect img:hover {
opacity: 0.5; !important
cursor: pointer; !important
}

.content-border {
    width:100%;
    background: #FFF;
    min-height:1200px;
    margin:0px auto;
}

.proj-text {
	max-width:200px; 
	margin-top:28px; 
	margin-left:30px; 
	float:left;
}

.footer {
	margin-left: 30px;
}

.footer p {
	opacity: 0.5;
	letter-spacing: 0px;
}



/*RANDOM*/
::selection {
	color: #ffffff;
	background: #64ffe3; /* WebKit/Blink Browsers */
}
::-moz-selection {
	color: #ffffff;
	background: #64ffe3 /* Gecko Browsers */
}