/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

.container_12 {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 25px;
}

/* Nested Column Classes */
.container_12 .alpha {
    margin-left: 0;
}

.container_12 .omega {
    margin-right: 0;
}

/* Base Grid */
.container_12 .grid_1 {
    width: 60px;
}

.container_12 .grid_2 {
    width: 140px;
}

.container_12 .grid_3 {
    width: 220px;
}

.container_12 .grid_4 {
    width: 300px;
}

.container_12 .grid_5 {
    width: 380px;
}

.container_12 .grid_6 {
    width: 460px;
}

.container_12 .grid_7 {
    width: 540px;
}

.container_12 .grid_8 {
    width: 620px;
}

.container_12 .grid_9 {
    width: 700px;
}

.container_12 .grid_10 {
    width: 780px;
}

.container_12 .grid_11 {
    width: 860px;
}

.container_12 .grid_12 {
    width: 940px;
}
/* Prefix Extra Space >> 12 Columns */
.container_12 .prefix_1 {
    padding-left: 80px;
}

.container_12 .prefix_2 {
    padding-left: 160px;
}

.container_12 .prefix_3 {
    padding-left: 240px;
}

.container_12 .prefix_4 {
    padding-left: 320px;
}

.container_12 .prefix_5 {
    padding-left: 400px;
}

.container_12 .prefix_6 {
    padding-left: 480px;
}

.container_12 .prefix_7 {
    padding-left: 560px;
}

.container_12 .prefix_8 {
    padding-left: 640px;
}

.container_12 .prefix_9 {
    padding-left: 720px;
}

.container_12 .prefix_10 {
    padding-left: 800px;
}

.container_12 .prefix_11 {
    padding-left: 880px;
}
/* Suffix Extra Space >> 12 Columns */
.container_12 .suffix_1 {
    padding-right: 80px;
}

.container_12 .suffix_2 {
    padding-right: 160px;
}

.container_12 .suffix_3 {
    padding-right: 240px;
}

.container_12 .suffix_4 {
    padding-right: 320px;
}

.container_12 .suffix_5 {
    padding-right: 400px;
}

.container_12 .suffix_6 {
    padding-right: 480px;
}

.container_12 .suffix_7 {
    padding-right: 560px;
}

.container_12 .suffix_8 {
    padding-right: 640px;
}

.container_12 .suffix_9 {
    padding-right: 720px;
}

.container_12 .suffix_10 {
    padding-right: 800px;
}

.container_12 .suffix_11 {
    padding-right: 880px;
}

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 995px) {
    .container_12 {
        width: 768px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .container_12 .alpha {
        margin-left: 0;
    }

    .container_12 .omega {
        margin-right: 0;
    }

    .container_12 .grid_1 {
        width: 44px;
    }

    .container_12 .grid_2 {
        width: 108px;
    }

    .container_12 .grid_3 {
        width: 172px;
    }

    .container_12 .grid_4 {
        width: 236px;
    }

    .container_12 .grid_5 {
        width: 300px;
    }

    .container_12 .grid_6 {
        width: 364px;
    }

    .container_12 .grid_7 {
        width: 428px;
    }

    .container_12 .grid_8 {
        width: 492px;
    }

    .container_12 .grid_9 {
        width: 556px;
    }

    .container_12 .grid_10 {
        width: 620px;
    }

    .container_12 .grid_11 {
        width: 684px;
    }

    .container_12 .grid_12 {
        width: 748px;
    }
    /* Prefix Extra Space >> 12 Columns */
    .container_12 .prefix_1 {
        padding-left: 64px;
    }

    .container_12 .prefix_2 {
        padding-left: 128px;
    }

    .container_12 .prefix_3 {
        padding-left: 192px;
    }

    .container_12 .prefix_4 {
        padding-left: 256px;
    }

    .container_12 .prefix_5 {
        padding-left: 320px;
    }

    .container_12 .prefix_6 {
        padding-left: 384px;
    }

    .container_12 .prefix_7 {
        padding-left: 448px;
    }

    .container_12 .prefix_8 {
        padding-left: 512px;
    }

    .container_12 .prefix_9 {
        padding-left: 576px;
    }

    .container_12 .prefix_10 {
        padding-left: 640px;
    }

    .container_12 .prefix_11 {
        padding-left: 768px;
    }
    /* Suffix Extra Space >> 12 Columns */
    .container_12 .suffix_1 {
        padding-right: 64px;
    }

    .container_12 .suffix_2 {
        padding-right: 128px;
    }

    .container_12 .suffix_3 {
        padding-right: 192px;
    }

    .container_12 .suffix_4 {
        padding-right: 256px;
    }

    .container_12 .suffix_5 {
        padding-right: 320px;
    }

    .container_12 .suffix_6 {
        padding-right: 384px;
    }

    .container_12 .suffix_7 {
        padding-right: 448px;
    }

    .container_12 .suffix_8 {
        padding-right: 512px;
    }

    .container_12 .suffix_9 {
        padding-right: 576px;
    }

    .container_12 .suffix_10 {
        padding-right: 640px;
    }

    .container_12 .suffix_11 {
        padding-right: 768px;
    }
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container_12 {
        width: 300px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
        margin: 0;
    }

    .container_12 .grid_1,
    .container_12 .grid_2,
    .container_12 .grid_3,
    .container_12 .grid_4,
    .container_12 .grid_5,
    .container_12 .grid_6,
    .container_12 .grid_7,
    .container_12 .grid_8,
    .container_12 .grid_9,
    .container_12 .grid_10,
    .container_12 .grid_11,
    .container_12 .grid_12 {
        width: 300px;
    }
    /* Prefix Extra Space >> 12 Columns */
    .container_12 .prefix_1,
    .container_12 .prefix_2,
    .container_12 .prefix_3,
    .container_12 .prefix_4,
    .container_12 .prefix_5,
    .container_12 .prefix_6,
    .container_12 .prefix_7,
    .container_12 .prefix_8,
    .container_12 .prefix_9,
    .container_12 .prefix_10,
    .container_12 .prefix_11 {
        padding-left: 0;
    }
    /* Suffix Extra Space >> 12 Columns */
    .container_12 .suffix_1,
    .container_12 .suffix_2,
    .container_12 .suffix_3,
    .container_12 .suffix_4,
    .container_12 .suffix_5,
    .container_12 .suffix_6,
    .container_12 .suffix_7,
    .container_12 .suffix_8,
    .container_12 .suffix_9,
    .container_12 .suffix_10,
    .container_12 .suffix_11 {
        padding-right: 0;
    }
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container_12 {
        width: 420px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
        margin: 0;
    }

    .container_12 .grid_1,
    .container_12 .grid_2,
    .container_12 .grid_3,
    .container_12 .grid_4,
    .container_12 .grid_5,
    .container_12 .grid_6,
    .container_12 .grid_7,
    .container_12 .grid_8,
    .container_12 .grid_9,
    .container_12 .grid_10,
    .container_12 .grid_11,
    .container_12 .grid_12 {
        width: 420px;
    }
    /* Prefix Extra Space >> 12 Columns */
    .container_12 .prefix_1,
    .container_12 .prefix_2,
    .container_12 .prefix_3,
    .container_12 .prefix_4,
    .container_12 .prefix_5,
    .container_12 .prefix_6,
    .container_12 .prefix_7,
    .container_12 .prefix_8,
    .container_12 .prefix_9,
    .container_12 .prefix_10,
    .container_12 .prefix_11 {
        padding-left: 0;
    }
    /* Suffix Extra Space >> 12 Columns */
    .container_12 .suffix_1,
    .container_12 .suffix_2,
    .container_12 .suffix_3,
    .container_12 .suffix_4,
    .container_12 .suffix_5,
    .container_12 .suffix_6,
    .container_12 .suffix_7,
    .container_12 .suffix_8,
    .container_12 .suffix_9,
    .container_12 .suffix_10,
    .container_12 .suffix_11 {
        padding-right: 0;
    }
}


/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container_12:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}


/* Tabs Style Start Here   */
.nav li {
    font: 24px/24px 'Patua One';
    text-align: center;
    width: 25%;
    position: relative;
    float: left;
    background-color: #b70000;
}

    .nav li a {
        position: relative;
        padding-top: 17px;
        padding-bottom: 21px;
        display: block;
        color: #fff;
        letter-spacing: 2px;
    }

        .nav li a:hover {
            color: #fff;
        }

            .nav li a:hover strong, .nav li.selected a strong {
                bottom: -8px;
            }


        .nav li a strong {
            display: block;
            position: absolute;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 8px 8px 0 8px;
            border-color: #b70000 transparent transparent transparent;
            left: 50%;
            margin-left: -8px;
            bottom: 0;
            transition: 0.5s ease;
            -o-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
        }

    .nav li + li a strong {
        border-top-color: #e59859;
    }

    .nav li + li + li a strong {
        border-top-color: #158d8e;
    }

    .nav li + li + li + li a strong {
        border-top-color: #779f59;
    }

    .nav li:after {
        position: absolute;
        left: 0;
        right: 0;
        content: '';
        display: block;
        top: -10px;
        height: 10px;
        background: url(../images/tab_top1.png) center 0 no-repeat;
    }

    .nav li a span {
        display: block;
        width: 60px;
        height: 60px;
        background: url(../images/icon1.png) 0 0 no-repeat #a50000;
        margin: 0 auto 14px;
        border-radius: 500px;
    }

    .nav li + li:after {
        background-image: url(../images/tab_top2.png);
    }

    .nav li + li + li:after {
        background-image: url(../images/tab_top3.png);
    }

    .nav li + li + li + li:after {
        background-image: url(../images/tab_top4.png);
    }

    .nav li + li {
        background-color: #e59859;
    }

        .nav li + li a span {
            background-image: url(../images/icon2.png);
            background-color: #d68b46;
        }

        .nav li + li + li a span {
            background-image: url(../images/icon3.png);
            background-color: #297c7a;
        }

        .nav li + li + li + li a span {
            background-image: url(../images/icon4.png);
            background-color: #6d8f4c;
        }

        .nav li + li + li {
            background-color: #158d8e;
        }

            .nav li + li + li + li {
                background-color: #779f59;
            }

.tabs {
    color: #fff;
    position: relative;
    top: 10px;
    padding-top: 10px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Chrome and Safari */
    -moz-backface-visibility: hidden; /* Firefox */
    -ms-backface-visibility: hidden; /* Internet Explorer */
}

.tab-content {
    padding-top: 15px;
    overflow: hidden;
    position: relative;
    padding-bottom: 15px;
}

    .tab-content p {
        /*    color: #e85555;*/
        color: #fff;
    }

#tab-1 {
    background-color: rgba(255, 255, 255, 0.90);
    min-height: 100px;
    /*border-width: 1px;
    border-style: solid;
    border-color: rgb(142, 137, 142);*/
    border-radius: 10px;
}

#tab-2 {
    background-color: rgba(136, 127, 136, 0.54);
    min-height: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(142, 137, 142);
    border-radius: 10px;
}

#tab-3 {
     background-color: rgba(136, 127, 136, 0.54);
    min-height: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(142, 137, 142);
    border-radius: 10px;
}

#tab-4 {
    background-color: rgba(136, 127, 136, 0.54);
    min-height: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(142, 137, 142);
    border-radius: 10px;
}

#tab-2 a {
    color: #108180;
}

#tab-3 a {
    color: #108180;
}

#tab-4 a {
    color: #108180;
}

.tab-content a {
    right: -50px;
    bottom: 2px;
    position: absolute;
    display: block;
    font: 16px/16px 'Patua One';
    color: #a50000;
    padding: 12px 58px 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #fff;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Safari and Chrome */
}

    .tab-content a:hover {
        color: #cecece !important;
    }

#tab-2 p {
    /*    color: #a50000;*/
    color: #fff;
}

#tab-3 p {
    /*    color: #D68B46;*/
    color: #fff;
}

#tab-4 p {
    /*    color: #297C7A;*/
    color: #fff;
}

.links {
    position: relative;
    /*    top: 50px;*/
    top: 0px;
    margin-bottom: 0px;
    text-align: right;
}

    .links a + a {
        /*    padding: 8px 16px 11px 18px;*/
        padding: 8px 6px 10px 6px;
        background-color: #619738;
        border-radius: 0 0px 0px 0;
        -moz-border-radius: 0 0px 0px 0;
        -webkit-border-radius: 0 0px 0px 0;
    }



        .links a, .links a + a + a {
            z-index: 50;
            position: relative;
            letter-spacing: 2px;
            display: inline-block;
            font: 13px/32px 'Patua One';
            text-transform: uppercase;
            color: #fff;
            -webkit-transition: all 0.5s ease 0s;
            -moz-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
            background-color: #E59859;
            /*    padding: 8px 20px 11px 24px;*/
            padding: 8px 5px 10px 5px;
            border-radius: 4px 0px 0px 4px;
            -moz-border-radius: 4px 0px 0px 4px;
            -webkit-border-radius: 4px 0px 0px 4px;
        }

            .links a + a {
                border-radius: 0px 4px 4px 0px;
                -moz-border-radius: 0px 4px 4px 0px;
                -webkit-border-radius: 0px 4px 4px 0px;
            }

            .links a:hover {
                background-color: #a50000;
            }

/* Tabs Style End Here   */
