/*----------------------------------------Photos */

.picswrapper{
    width: 100%;
    text-align: center;
    display: inline-block;
}

.pics{
    width: 32%;
    display: block;
    float: left;
}

.pic_item{
    width: 100%;
    display: block;
}

.pic_space{
    width: 2%;
    display: block;
    float: left;
}

.pic_txt{
    text-align: left;
    width: 100%;
    top: 0;
    left: 0;
    padding: 5px 15px 10px 10px;
    font-weight: 100;
    font-size: 14px;
    color: #666666;
}

.photogallery{
    position: relative;
    width: 100%;
    margin: 0;
}

.photogallery .items{
    position: relative;
    width: 100%;
}

.photogallery .items .item{
    width: 100%;  
}

.photogallery .items .item.i01{position: absolute; background-image: url(../img/pla_base.jpg); background-repeat: no-repeat; background-size:cover; background-position: bottom;}
.photogallery .items .item.i02{position: absolute; background-image: url(../img/doraleh.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;}
.photogallery .items .item.i03{position: absolute; background-image: url(../img/desert.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;}
.photogallery .items .item.i04{position: absolute; background-image: url(../img/us_base.jpg); background-repeat: no-repeat; background-size:cover; background-position: top;}
.photogallery .items .item.i05{position: absolute; background-image: url(../img/japan.jpg); background-repeat: no-repeat; background-size:cover; background-position: bottom;}
.photogallery .items .item.i06{position: absolute; background-image: url(../img/french.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;}
.photogallery .items .item.i07{position: absolute; background-image: url(../img/port.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;}
.photogallery .items .item.i08{position: absolute; background-image: url(../img/ethiopia.jpg); background-repeat: no-repeat; background-size:cover; background-position: top;}
.photogallery .items .item.i09{position: absolute; background-image: url(../img/train.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;}
.photogallery .items .item.i10{position: absolute; background-image: url(../img/drill.jpg); background-repeat: no-repeat; background-size:cover; background-position: bottom;}
.photogallery .items .item.i11{position: absolute; background-image: url(../img/ships.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i12{position: absolute; background-image: url(../img/chairman.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i13{position: absolute; background-image: url(../img/shepherding.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i14{position: absolute; background-image: url(../img/tourism.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i15{position: absolute; background-image: url(../img/leaders.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i16{position: absolute; background-image: url(../img/flotillas.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i17{position: absolute; background-image: url(../img/exercise.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i18{position: absolute; background-image: url(../img/pirates.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i19{position: absolute; background-image: url(../img/guard1.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i20{position: absolute; background-image: url(../img/silent_hunter.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i21{position: absolute; background-image: url(../img/guorong1.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i22{position: absolute; background-image: url(../img/hoisting_flag.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i23{position: absolute; background-image: url(../img/panama_canal.jpg); background-size: cover; background-repeat: no-repeat;}
.photogallery .items .item.i24{position: absolute; background-image: url(../img/gitmo_detention.jpg); background-size: cover; background-repeat: no-repeat;}

.photogallery .items .item p{
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 10px 15px 10px 15px;
    font-weight: 100;
    font-size: 14px;
    z-index: 4;
    background-color: rgba(255, 255, 255, 0.7);
    color: #666666;
}

/*----------------------------------------sequence controls */
.photogallery .controls{
    width: 99%;
    padding: 5px 5px 5px 5px;
    position: absolute;
    top: 85%;
    z-index: 2;
}
.photogallery .controls ul{
    height: 30px;
}
.photogallery .controls li{
    transition: all ease 1s;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 100%;
}
.photogallery .controls li.forward{float: right;}
.photogallery .controls li.backward{float: left;}
.photogallery .controls li:hover{
    opacity: 0.7;
    cursor: pointer;
    color: black;
    background-color: #9a9a9a;
}
.photogallery .controls li p{
    font-size: 25px;
    padding: 5px 11px;
    font-weight: 100;
}
/*----------------------------------------sequence tabs */
.photogallery .tabs{
    position: absolute;
    top: 85%;
    left: 10%;
    margin-top: 10px;
    text-align: center;
    display: block;
    width: 80%;
    z-index: 3;
}

.photogallery .tabs li{
    width: 13px; 
    height: 13px; 
    border-radius: 100%;
    background-color: #AAAAAA;
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
    border: solid 1px white;
}
.photogallery .tabs li.current{background-color: dimgray;}
.photogallery .tabs li:hover{border: solid 1px black;}