h2 {
    margin-bottom: 0;
}
/* -- header ------------------------------------------------------------ */
#menu-projects {
    background-color: #902021;
    box-shadow: 1px 0px 1px -1px rgba(0,0,0,1) , -1px 0px 1px -1px rgba(0,0,0,0.8);
    color: #eeeeee;
}

/* ------------------------------- */
.desktop-prj {
    max-width: 250px;
    padding: 1px;
    border: 1px solid #aaaaaa;
    background-color: #fff;
}
.desktop-prj:hover {
    border-color: #aaaaaa;
    background-color: #aaaaaa;
}
.mobile-prj {
	margin: 18px 18px 5px 38px;
	padding: 2px;
}
.mobile-prj:hover {
	background-color: #bbbbbb;
}
#prj-note {
    text-align: right;
    margin-right: 5px;
}

/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* ------------------------------------------------- */

@media screen and (min-width: 1270px) {
    .captures {
        position: relative;     /* for img */
    }
    .captures a img {
        position: absolute;     /* relative to prj-captures */
    }
    .mobile-prj {
    	margin: 0;
    }

    /*--- captures for: web projects  (.desktop-prj  and  .mobile-prj) --- */
    #prj-captures-1 {
        height: 670px;
    }
    #anglorand-01			{ top: 25px;	left:   5px;	transform: rotate(-8deg);	}
    #firstfx				{ top: 40px;	left:   27%;	transform: rotate(10deg);	}
    #shindokay				{ top: 130px;	right: 10px;	transform: rotate(-10deg);	}
    #online-shop			{ top: 40px;	right: 180px;	transform: rotate(-5deg);	}
    #anglorand-02			{ top: 150px;	left:  140px;	transform: rotate(5deg);	}
    #karate					{ top: 140px;	left: 40%;		transform: rotate(-3deg);	}
    #scenaverde-01			{ top: 215px;	left: 52%;		transform: rotate(-11deg);	}
    #anglorand-03			{ top: 290px;	left: 27%;		transform: rotate(10deg);	}
    #jedikids-extensions	{ top: 270px;	left: 50px;		transform: rotate(-5deg);	}
    #jedikids-01			{ top: 270px;	right: 8%;		transform: rotate(5deg);	}
    #csathletics-01			{ top: 410px;	left: 12%;		transform: rotate(2deg);	}
    #aoffice-01				{ top: 391px;	left: 42%;		transform: rotate(-2deg);	}
    #ath-db-02				{ top: 416px;	right: 20%;		transform: rotate(16deg);	}
    #ath-db-tel-a			{ top: 470px;	right: 15%;		transform: rotate(-4deg);	}
	#ath-db-tel-b			{ top: 460px;	right: 55px;	transform: rotate(21deg);	}
    #jac-01					{ top: 530px;	left: 20px;		transform: rotate(12deg);	}
    #ath-db-01				{ top: 545px;	right: 24%;		transform: rotate(-4deg);	}
    
    /*--- captures for: live trading  (.desktop-prj  and  .mobile-prj) --- */
    #prj-captures-2 {
        height: 630px;          /* under this div is "more captures" link */
    }
    #manager-01				{ top: 25px;	left:  5px;		transform: rotate(-8deg);	}
    #manager-02				{ top: 40px;	left:  30%;		transform: rotate(10deg);	}
    #investor-01			{ top: 45px;	right: 10%;		transform: rotate(4deg);	}
    #investor-02			{ top: 155px;	left:  15%;		transform: rotate(-5deg);	}
    #investor-03			{ top: 170px;	left:  39%;		transform: rotate(10deg);	}
    #investor-04			{ top: 145px;	right: 22%;		transform: rotate(-10deg);	}
    #investor-05			{ top: 190px;	right:  3%;		transform: rotate(18deg);	}
	#market-01				{ top: 280px;	left:   1%;		transform: rotate(5deg);	}
    #techanalysis-01		{ top: 280px;	left:  27%;		transform: rotate(-2deg);	}
    #techanalysis-02		{ top: 290px;	right: 18%;		transform: rotate(8deg);	}
    #techanalysis-03		{ top: 370px;	right: 5px;		transform: rotate(-6deg);	}
    #trade-01				{ top: 430px;	left: 3%;		transform: rotate(-4deg);	}
    #trade-02				{ top: 460px;	left: 17%;		transform: rotate(-12deg);	}
    #tel-portfolio			{ top: 350px;	left: 51%;		transform: rotate(3deg);	}
    #tel-watchlist			{ top: 470px;	left: 42%;		transform: rotate(-8deg);	}
    #tel-account-01			{ top: 480px;	right: 37%;		transform: rotate(-2deg);	}
    #tel-account-02			{ top: 470px;	right: 25%;		transform: rotate(20deg);	}
    
    /*--- captures for: jac  (.desktop-prj  and  .mobile-prj) --- */
    #prj-captures-3 {
        height: 550px;
    }
    #jac-pub-01				{ top: 25px;	left: 5px;		transform: rotate(2deg);	}
    #jac-pub-02				{ top: 40px;	left: 27%;		transform: rotate(-8deg);	}
    #jac-pub-03				{ top: 110px;	right: 22%;		transform: rotate(10deg);	}
    #jac-pub-04				{ top: 20px;	right: 80px;	transform: rotate(-5deg);	}
    #jac-tel-01a			{ top: 90px;	right: 45%;		transform: rotate(-1deg);	}
    #jac-tel-01b			{ top: 100px;	right: 40px;	transform: rotate(15deg);	}
    #jac-admin-01			{ top: 170px;	left: 9%;		transform: rotate(-5deg);	}
    #jac-admin-02			{ top: 230px;	left: 30%;		transform: rotate(10deg);	}
    #jac-admin-03			{ top: 240px;	right: 180px;	transform: rotate(-5deg);	}
    #jac-admin-04			{ top: 350px;	left: 140px;	transform: rotate(5deg);	}
    #jac-admin-05			{ top: 340px;	left: 40%;		transform: rotate(-3deg);	}
    #jac-admin-06			{ top: 330px;	right: 10px;	transform: rotate(-10deg);	}
    #jac-tel-02a			{ top: 390px;	right: 28%;		transform: rotate(-4deg);	}
    #jac-tel-02b			{ top: 400px;	right: 20px;	transform: rotate(15deg);	}
	
	/*--- captures for: jac  (.desktop-prj  and  .mobile-prj) --- */
    #prj-captures-4 {
        height: 350px;
    }
    #cal-pub-01				{ top: 25px;	left:  5px;		transform: rotate(2deg);	}
    #cal-tel-01a			{ top: 20px;	left:  25%;		transform: rotate(-1deg);	}
    #cal-tel-01b			{ top: 25px;	left:  35%;		transform: rotate(15deg);	}
    #cal-adm-01				{ top: 30px;	right: 35%;		transform: rotate(12deg);	}
    #cal-adm-02				{ top: 30px;	right:  5%;		transform: rotate(-5deg);	}
    #cal-adm-03				{ top: 170px;	left: 50px;		transform: rotate(-7deg);	}
    #cal-tel-02a			{ top: 170px;	left:  28%;		transform: rotate(-18deg);	}
    #cal-tel-02b			{ top: 170px;	left:  40%;		transform: rotate(9deg);	}
    #cal-tel-02c			{ top: 120px;	right: 27%;		transform: rotate(-1deg);	}
    
}
/* ---------------------------------------------------------------------------- */
@media screen and (min-width: 1000px) and (max-width: 1269px) {
    .desktop-prj {
        width: 23%;
    }
    .mobile-prj {
        width: 5.5%;
    }
}
@media screen and (min-width: 750px) and (max-width: 900px) {
    .desktop-prj {
        width: 31%;
    }
    .mobile-prj {
        width: 7%;
    }
}
@media screen and (min-width: 750px) {
    .desktop-prj {
    }
    .desktop-prj:hover {
        z-index: 10;
        transform: scale(1.03);
    }
    .mobile-separator {
        display: none;
    }
    .mobile-prj {
    }
    .mobile-prj:hover {
        z-index: 10;
        transform: scale(1.1);
    }
}
@media screen and (max-width: 750px) {
    #prj-note {
        text-align: left;
        margin-left: 5px;
    }
}
@media screen and (min-width: 651px) {
    #picture {
        background-image: url("../zzz/img/banners/projects-large.jpg");
    }
}
@media screen and (max-width: 650px) {
    #banner-mobile {
        background-image: url("../zzz/img/banners/projects-small.jpg");
    }
}
@media screen and (max-width: 560px) {
	.desktop-prj {
        width: 47%;
    }
    .mobile-prj {
    	margin: 12px 12px 4px 30px;
        width: 12%;
    }
}