.table2{
	 width: 64%;
	 background-color: #003D5C;
	 float:left;
	 position: absolute;
	 }
.table27{
	  width: 2px;
	  color: white;}

	.table22{
	 width:15.8%;
float:right;
 background-color: #003D5C;
 margin: 0 10% 0 0;
 font-size: 15px;
 padding: 0px 12px;
	 }
		#gallery{ float:right; width:100%; }
	#gallery li{ list-style:none; perspective:150px; -webkit-perspective:100px; margin: 0 12px 0px 7px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
 		#gallery a{ display:block; width:407px; height:100%;  overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }
	#grad{
	width:100%;
	}

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

@media all and (max-width:1200px){


.table2{
	 width: 54%;
	 background-color: #003D5C;
	 float:left;
	 position: absolute;
	 }
.table27{
	  width: 2px;
	  color: white;}

	.table22{
	 width:15.8%;
float:right;
 background-color: #003D5C;
 margin: 0 10% 0 0;
 padding: 0px 12px
	 }
		#gallery{ float:right; width:100%; }

	#gallery li{ list-style:none; perspective:150px; -webkit-perspective:100px; margin: 0 12px 0px 7px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
 		#gallery a{ display:block; width:407px; height:100%;  overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }



	#grad{
	width:100%;
	}

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

@media all and (max-width:1200px){


.table2{
	 width: 54%;
	 background-color: #003D5C;
	 float:left;
	 position: absolute;
	 }
.table27{
	  width: 2px;
	  color: white;}

	.table22{
	 width:15.8%;
float:right;
 background-color: #003D5C;
 margin: 0 10% 0 0;
	 }
		#gallery{ float:right; width:100%; }

	#gallery li{ list-style:none; perspective:150px; -webkit-perspective:100px; margin:10px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
 		#gallery a{ display:block; width:355px; height:551px;  overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }



	#grad{
	width:100%;
	}

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

@media all and (max-width:1200px){


.table2{
	 width: 54%;
	 background-color: #003D5C;
	 float:left;
	 position: absolute;
	 }
.table27{
	  width: 2px;
	  color: white;}

	.table22{
	 width:25.8%;

}
@media all and (max-width: 760px){
.menu{
padding: 0 0 12px 0;
}
 	#gallery a{ width:100%; height:100%; }
 	.main footer{ margin:20px 0; }
}
#grad{
	width:100%;
	}
p {
        color: white;
    padding: 3 7 3 7;
     }

#aligntop {
  vertical-align: top;
}
.button {
    padding: 3 7 3 7;
    font-size: 0px;
}
.nav>li>a {
    position: relative;
    display: block;
        padding: 3 7 3 7;
}
.body {
       font-size: 0px;
       padding: 0 0 0 0;
     }
.nav-pills>li>a {
    border-radius: 0px;
   background: white;
}
.nav>li>a {
    padding: 0 0 0 0;
    margin: 5px 30px 5px 0;
}
#gallery li.loaded.img:hover: p {color: red;}
.loaded22:hover ~ .loaded33 p {
display: none;
}
#loaded333:hover ~ .loaded33 p {
display: none;
}

@media all and (max-width:759px){


.table2{
	 width: 80%;
	 background-color: #003D5C;
	 float:left;
	 position: relative;
	 }
	 .table22{
	 float:left;
	 width: 80%;
	 margin: 0 0 0 10%;
	 	 text-align: center;
	 }
	 #t22 {
	 width: 75%;
	 padding: 3 7 3 7;
	 }