@import "https://fonts.googleapis.com/css?family=Open+Sans|Bangers";
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css';

.leftarrow,
.rightarrow {
    display: none;
    top: 50%;
    position: absolute;
    z-index: 5;
    padding: 1%;
    cursor: pointer;
    opacity: .4
}

.leftarrow:hover,
.rightarrow:hover {
    opacity: .7
}

.leftarrow span,
.rightarrow span {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 35px;
    color: #eee;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5)
}

.leftarrow {
    left: 15px;
    text-align: left
}

.leftarrow span:before {
    content: "\f137";
    font-family: fontawesome
}

.rightarrow {
    right: 15px;
    text-align: right
}

.rightarrow span:before {
    content: "\f138";
    font-family: fontawesome
}

.g_image:first-child .leftarrow {
    display: none
}

.rightarrow[data-next-image=""] {
    display: none
}

.g_image .thumbimage li {
    border: 1px solid #ccc;
    width: 100px;
    height: 100px;
    transition: opacity .5s;
    opacity: 1;
    position: relative;
    cursor: pointer;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 2px;
    background: #fff;
    margin: 0 10px 0 0;
    display: block
}

@media(max-width:540px) {
    .g_image .thumbimage li {
        width: 40px;
        height: 40px;
        margin: 0 5px 0 0;
        z-index: 9999
    }
}

.g_image .thumbimage li img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    margin: 0 auto
}

#gallery [type=radio]:checked~.thumbimage li {
    border: 1px solid #e15814
}

#gallery_outer_1,
#gallery_outer_3 {
    position: relative;
    clear: both;
    margin: 0
}

.g_image [type=radio] {
    display: none
}

.mainimage {
    position: absolute;
    top: 0;
    margin: 0;
    background: transparent;
    overflow: hidden;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    animation-name: lightboxout;
    animation-duration: .5s
}

#gallery [type=radio]:checked~.thumbimage {
    color: #fff;
    z-index: 1
}

#gallery [type=radio]:checked~.mainimage {
    opacity: 1;
    z-index: 2;
    padding: 0
}

#gallery_outer_1 .g_image[data=""] {
    display: none
}

#gallery [type=checkbox]:checked~.mainimage {
    right: 0;
    z-index: 100;
    background: #fff
}

#gallery [type=checkbox]:checked~.mainimage img {
    display: block;
    margin: 0 auto
}

.mainimagecb {
    display: none
}

#gallery_outer_1,
#gallery_outer_1 .mainimage,
#gallery_outer_1 #gallery,
#gallery_outer_1 .mainimage div {
    height: 324px;
    width: auto
}

#gallery_outer_1 .mainimage div {
    background: #fff;
    border: 5px solid #54a900;
    padding: 10px
}

#gallery_outer_1 .mainimage {
    left: 194px;
    min-width: 426px
}

#gallery_outer_1 #gallery {
    box-sizing: border-box;
    clear: both;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    padding: 0 5px 0 8px;
    margin: 0
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #gallery_outer_1 #gallery {
        padding: 0 0 0 20px
    }
}

#gallery_outer_1 div#gallery::-webkit-scrollbar {
    width: 8px;
    height: 20px
}

#gallery_outer_1 div#gallery::-webkit-scrollbar-button {
    background-color: #ccc
}

#gallery_outer_1 div#gallery::-webkit-scrollbar-track {
    background-color: #ccc
}

#gallery_outer_1 div#gallery::-webkit-scrollbar-track-piece {
    background-color: #ccc
}

#gallery_outer_1 div#gallery::-webkit-scrollbar-thumb {
    height: 90px;
    background-color: #083b56;
    border-radius: 3px
}

#gallery_outer_1 div#gallery::-webkit-scrollbar-corner {
    background-color: red
}

#gallery_outer_1 div#gallery::-webkit-resizer {
    background-color: #666
}

#gallery_outer_1 .g_image {
    float: Left
}

#gallery_outer_1 .g_image:nth-child(odd) {
    clear: both;
    margin-right: 5px
}

#gallery_outer_1 .g_image .thumbimage {
    margin: 0 0 5px
}

#gallery_outer_1 .mainimage img {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

#gallery_outer_2 .g_image {
    max-width: 100%;
    height: auto;
    text-align: center;
    padding: 5px 0
}

#gallery_outer_2 .g_image img {
    max-width: 100%
}

#gallery_outer_2 .g_image[data=""] {
    display: none
}

#gallery_outer_3 {
    height: auto;
    width: 100%
}

#gallery_outer_3 .mainimage,
#gallery_outer_3 .mainimage div {
    height: 500px;
    width: 100%;
    cursor: default
}

#gallery_outer_3 #gallery {
    height: auto;
    width: 100%;
    padding-top: 500px;
    padding-bottom: 15px
}

@media(max-width:540px) {

    #gallery_outer_3 .mainimage,
    #gallery_outer_3 .mainimage div {
        height: 100%;
        width: 100%;
        cursor: default
    }

    #gallery_outer_3 #gallery {
        height: auto;
        width: 100%;
        padding-top: 100%;
        padding-bottom: 10px
    }
}

#gallery_outer_3 .mainimage {
    left: 0
}

#gallery_outer_3 #gallery {
    box-sizing: border-box;
    text-align: center
}

#gallery_outer_3 .g_image {
    display: inline-block;
    margin: 10px 0 0
}

#gallery_outer_3 .g_image .thumbimage {
    margin: 0
}

#gallery_outer_3 .g_image .thumbimage li {}

#gallery_outer_3 .mainimage img {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 0 !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important
}

#gallery_outer_3 .g_image[data=""] {
    display: none
}

#tabs {
    margin: 10px 0 0;
    display: block
}

#tabs [type=radio] {
    display: none
}

#tabs label.mobile_tab {
    display: none
}

#tabs label li {
    display: block;
    float: left;
    cursor: pointer;
    padding: 0;
    margin-right: 5px
}

#tabs label li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 30px;
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
    background: #2783b2;
    height: 45px;
    line-height: 45px
}

#tabs [type=radio]:checked+label li a,
#tabs label li a:hover {
    background: #ee5c21
}

#tabs [type=radio]:checked+label li a,
#tabs label li a:hover,
#tabs [type=radio]:checked+label li a,
#tabs label li a:hover {
    color: #fff;
    background: #ee5c21
}

#tabs #tab-1:checked~.content1,
#tabs #tab-2:checked~.content2,
#tabs #tab-3:checked~.content3,
#tabs #tab-4:checked~.content4,
#tabs #tab-5:checked~.content5 {
    display: block
}

#tabs #tab-1:checked~.content1 .tabcontent,
#tabs #tab-2:checked~.content2 .tabcontent,
#tabs #tab-3:checked~.content3 .tabcontent,
#tabs #tab-4:checked~.content4 .tabcontent,
#tabs #tab-5:checked~.content5 .tabcontent,
#tabs #tab-1:checked~.content1 h4,
#tabs #tab-2:checked~.content2 h4,
#tabs #tab-3:checked~.content3 h4,
#tabs #tab-4:checked~.content4 h4,
#tabs #tab-5:checked~.content5 h4 {
    animation-name: tabIn;
    animation-duration: 1.2s
}

#tabs .content {
    animation-duration: .5s;
    clear: both;
    padding: 10px;
    border: 1px solid #eee;
    background: #fff;
    display: none
}

#tabs .content .tabcontent {
    padding: 0;
    margin: 0;
    font-size: 15px;
    display: block;
    font-family: roboto condensed, sans-serif
}

#tabs .content .tabcontent p {
    color: #333745;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 10px;
    text-align: left
}

#tabs .content .tabcontent ul {
    margin: 0 0 10px
}

#tabs .content .tabcontent ul li {
    color: #333745;
    font-size: 15px;
    line-height: 24px;
    list-style: inside disc;
    text-align: left
}