*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; padding: 0px; margin: 0px; list-style: none}

html, body {
    width: 100%;
    height: 100%;
    background-image: url(../img/shatter-bg.png);
    padding: 0px;
    margin: 0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0px;
    margin: 0px;
}

header {
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0px;
    left: 0px;
    z-index: 99;
    background-color: rgba(68,68,68,.2);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}



header > #company-logo {
    position: absolute;
    width: 70px;
    height: 100%;
    background-color: #DADADA;
    left: 0px;
    top: 0px;
    background-image: url(../img/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


header > #view-label {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    font-weight: 300;
    z-index: 88;
    text-transform: uppercase;
    overflow: hidden;
}

header > #view-label > div {
    display: block;
    position: absolute;
    height: 100%;
    width: auto;
    top: 0px;
    text-align: left;
    left: 80px;
    line-height: 45px;
    font-size: 16px;
    font-weight: bold;
}

header > #view-label > div.full {
    display: block;
    position: absolute;
    height: 100%;
    width: 300%;
    top: 0px;
    text-align: center;
    left: -100%;
    line-height: 45px;
    font-size: 16px;
    font-weight: bold;
}

header  #theLogo {
    position: relative;
    margin-top: -10px;
}

footer {
    position: absolute;
    width: 100%;
    height: 70px;
    left: 0px;
    text-align: center;
    bottom: 0px;
    padding-top: 5px;
    background-color: rgba(68,68,68,.2);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    z-index: 87;
}


footer > div {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 65px;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 30px;
    -webkit-transition: all 0.25s linear 0s;
    -moz-transition: all 0.25s linear 0s;
    -o-transition: all 0.25s linear 0s;
    transition: all 0.25s linear 0s;
}

footer > div.active {
    background-color: #333333;
    color: #ffffff;
}

footer > div span {
    display: block;
    font-size: 12px;
}

#content {
    position: absolute;
    width: 100%;
    top: 50px;
    overflow: hidden;
    bottom: 70px;
    z-index: 50;

}

.activity {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 40;
    
}

.activity.loader {
    background-position: center;
    background-repeat: no-repeat;
}

ul.striped {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul.striped > li {
    min-height: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
}

ul.striped > li:after {
    content: '';
    display: block;
    clear: both;
}

ul.striped .image {
    margin-left: 10px;
    width: 80px;
    height: 80px;
    float: left;
    overflow: hidden;
    border-radius: 20%;
    background-size: cover;
    background-position: center;
    border: #ffffff 3px solid;
}

ul.striped .list-icon {
    margin-left: 10px;
    width: 80px;
    height: 80px;
    float: left;
    overflow: hidden;
    border-radius: 20%;
    border: #ffffff 3px solid;
    background-color: #705c21;
    color: #ffffff;
    font-size: 50px;
    text-align: center;
}

ul.striped .content {
    overflow: hidden;
    padding-left: 15px;
}

ul.striped .content h2 {
    font-size: 1.2em;
}

ul.striped .content h3 {
    font-size: 1.2em;
    color: #9F8944;
    font-weight: 400;
}

ul.striped > li:nth-child(2n+1) /* represents every odd row of an HTML table */ {
    background-color: rgba(91,91,91,.6);
}

ul.striped > li:nth-child(2n+0) /* represents every even row of an HTML table */ {
    background-color: rgba(55,55,55,.6);
}

.event {
    padding: 10px;
    background: rgba(255,255,255,.2);
}

.event iframe {
    width: 100% !important;
}

.head .image {
    width: 80px;
    height: 120px;
    float: left;
    overflow: hidden;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    border: #ffffff 3px solid;
}

.head .list-icon {
    margin-left: 10px;
    width: 80px;
    height: 80px;
    float: left;
    overflow: hidden;
    border-radius: 20%;
    border: #ffffff 3px solid;
    background-color: #705c21;
    color: #ffffff;
    font-size: 50px;
    text-align: center;
}


.head:after {
    content: '';
    display: block;
    clear: both;
}

.head .content {
    overflow: hidden;
    padding-left: 10px;
}


.head .content h2 {
    padding-right: 40px;
}

.head .content h3 {
    color: #9F8944;

}

.container {
    padding: 10px;
    margin-bottom: 5px;
    background-color: rgba(41,41,41,.6);
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
}
.container.remove-padding {
    padding: 0px;
}

.btn {
    width: 100%;
    display: block;
    margin-bottom: 2px;
}

.facebook {
   background-color:#2591b8;
   border:2px solid #0579a3;
   display:inline-block;
   cursor:pointer;
   color:#ffffff !important;
   font-family:arial;
   font-size:14px;
   font-weight:bold;
   padding: 10px 10px;
   text-decoration:none;
   text-shadow:0px 0px 0px #00858f;
}
.facebook:hover {
    background-color:#166885;
}
.facebook:active {
    position:relative;
    top:1px;
}

.button {
   background-color:#9f8844;
   border:2px solid #705c21;
   display:inline-block;
   cursor:pointer;
   color:#ffffff !important;
   font-family:arial;
   font-size:14px;
   font-weight:bold;
    padding: 10px 10px;
   text-decoration:none;
   text-shadow:0px 0px 0px #00858f;
}
.button:hover {
    background-color:#e3c25f;
}
.button:active {
    position:relative;
    top:1px;
}

.fb-attending-list {
    padding: 0px;
    margin: 0px;
    text-align: center;
    height: 102px;
    position: relative;
    width: 100%;
    overflow: auto;
    list-style: none;
}

.fb-attending-list > li {
    padding: 0px;
    width: 52px;
    height: 52px;
    margin: 0px;
    border: #333333 1px solid;
    margin: 1px;
    display: inline-block;
}

.fb-attending-list > li img {
    display: block;
}

.backButton {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    width: 40px;
    background-color: black;
    color: white;
    text-align: center;
}


#carousel, #carousel ul, #carousel li {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

#carousel {

    overflow: hidden;
    width: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
    -webkit-transform-style: preserve-3d;
}

#carousel ul.animate {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#carousel ul {
    -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -o-transform: translate3d(0%,0,0) scale3d(1,1,1);
    transform: translate3d(0%,0,0) scale3d(1,1,1);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

#carousel ul {
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    position: relative;
}

#carousel li {
    float: left;
    overflow: hidden;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
    background-color: #000101;

}

#carousel li .date {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    background-color: rgba(51,51,51,.8);
}

#carousel li .date h2 {
    padding-left: 10px;
    padding-top: 5px;
}

#carousel li .date h3 {
    color: #9F8944;
    padding-left: 10px;
    padding-bottom: 10px;
}

#carousel li > div:first-child {
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    background-size: cover;
    background-position: top center;
}

.galleryPic {
    display: block;
    width: 31%;
    height: 100px;
    float: left;
    background-size: cover;
    background-position: center;
    margin: 2px;
    border: 2px #333333 solid;
    overflow: hidden;
    border-radius: 10px;
}


.fotolist:after {
    content:'';
    display: block;
    clear: both;
}

input {
    display: block;
    padding: 8px;
    margin-bottom: 5px;
}


.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.alert-danger, .alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}

input, textarea {
    display: block;
    border: none;
    padding: 5px;
    background-color: #E4E4E4;
    width: 100%;
    border: #333333 1px solid;
}

.event-youtube {
    float: none !important;
}

#ios-arrow-left {

    display : block;
    position:absolute;
    z-index : 9999;
    left:15px;
    top:10px;
    height:30px;
    width:auto;
    padding: 0 10px 0 6px;
    background-size : 30px 30px;

    background-repeat:repeat-x;
    background-position :0;
    background-image : -moz-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );
    background-image : -o-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );
    background-image : -webkit-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );

    border-radius: 5px;

    border-bottom: 1px solid rgba(255,255,255,0.4);

    box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,
    0 1px 2px rgba(0,0,0,0.8)inset;

    color:#fff;
    text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#ios-arrow-left:before{
    position:absolute;
    content : ' ';
    left:-8px;
    top:4px;
    height : 23px;
    width: 24px;
    z-index : 1;

    background-repeat:repeat-x;
    background-size : 30px 30px;
    background-position :-1px -1.5px;
    background-image : -moz-linear-gradient(
        45deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 52%,
        rgba(255,255,255,0.1) 52%,
        rgba(255,255,255,0.4) 100%
    );
    background-image : -o-linear-gradient(
        45deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 52%,
        rgba(255,255,255,0.1) 52%,
        rgba(255,255,255,0.4) 100%
    );
    background-image : -webkit-linear-gradient(
        45deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 52%,
        rgba(255,255,255,0.1) 52%,
        rgba(255,255,255,0.4) 100%
    );
    background-image : linear-gradient(
        45deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 52%,
        rgba(255,255,255,0.1) 52%,
        rgba(255,255,255,0.4) 100%
    );


    -moz-transform : rotateZ(-45deg) skewY(-10deg) skewX(-10deg);
    -o-transform : rotateZ(-45deg) skewY(-10deg) skewX(-10deg);
    -webkit-transform : rotateZ(-45deg) skewY(-10deg) skewX(-10deg);
    transform : rotateZ(-45deg) skewY(-10deg) skewX(-10deg);
    border-top-right-radius : 11px;
    border-top-left-radius :0px;
    border-bottom-right-radius : 0;
    border-bottom-left-radius : 10px;

    border-left : 1px solid rgba(255,255,255,0.4);

    box-shadow :  0px 1px 1px rgba(0,0,0,0.7) inset,
    2px -2px 2px -3px rgba(0,0,0,0.5) inset;

    /*-webkit-mask-image :
        -webkit-gradient(linear, left top, right bottom,
            from(#000000),
            color-stop(0.4,#000000),
            color-stop(0.5, transparent),
            to(transparent));
    */
}
#ios-arrow-left:after {

    font-family : HelveticaNeue,Helvetica, Arial;
    font-weight: 400;
    font-size : 12px;
    line-height : 30px;
    text-align:center;
    content: attr(title)"";
    z-index: 999;
    left:-2px;
    padding-left:3px;
    position:relative;
    height: 30px;
    line-height:30px;
    display:block;
    background-repeat:repeat-x;
    background-size : 30px 30px;
    background-position :-1px -0.5px;
    box-shadow :0 -3px 1px -2px rgba(0,0,0,0.3)inset,
    0 4px 2px -3px rgba(0,0,0,0.8)inset;
    background-image : -webkit-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );
    background-image : -moz-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );
    background-image : -o-linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
    );
}
#ios-arrow-left,
#ios-arrow-left:after,
#ios-arrow-left:before {
    background-color: rgba(0,0,0,1);/*originalcolor*/

}

#ios-arrow-left:hover,
#ios-arrow-left:hover:after,
#ios-arrow-left:hover:before {
    background-color: rgba(10,10,10,1);/*hovercolor*/

}


.load-more h2 {
    text-align: center;
    font-size: 1.4em !important;
    padding-top: 20px;
}

a:link,
a:visited {
    color: #9F8944;
}