﻿@font-face {
    font-family: Century Gothic;
    src: url(fonts/CenturyGothic.TTF)
}
body {
    font-family: 'Century Gothic';
}
#topbanner {
    padding: 4px; 
    text-align: center; 
    background-color: #f4f4f4; 
    color: #777; 
    font-size: 12px;
}
@media (max-width: 992px) {
    .container {
        width: 100%;
    }
}

.nav > li > a {
    color: #000000;
}

    .nav > li > a:hover,
    .nav > li > a:focus {
        color: #2ABFB9;
          background-color:transparent;
    }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #2ABFB9;
    background-color:transparent;
}

.navbar-header {
    background-color: transparent;
}

.navbar-toggle .icon-bar {
    background-color: #000000;
}

#menu {
    width: 100%;
    position: absolute;
    z-index: 2;
    background-color: #FFFFFF;
}

@media(max-width: 768px) {
    #menu {
        background-color: transparent;
    }
}

.main {
    margin-bottom: 100px;
}

@media (min-width: 768px) and (max-width: 992px) {
    .main {
        margin-top: 0px;
    }
}

@media(max-width: 768px) {
    .main {
        margin-bottom: 50px;
    }
}


.content,
.artistscontent,
.contactcontent {
    position: relative;
}

.artistscontent {
    margin-bottom: 20px;
    background-color: #000000;
}

.imageinfo {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    width: 25%;
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 20px;
}
.page-content {
    padding: 20px 0px 0 25px;
}


@media(max-width: 768px) {
    .imageinfo {
        position: relative;
        right: 0px;
        bottom: 0px;
        width: 100%;
    }
}

.imageinfo a {
    color: #FFFFFF;
}

.artistsmain,
.contactmain {
    margin-bottom: 30px;
}

.smallnav {
    background-color: #333;
    color: #FFFFFF;
    width: 100%;
    /*position: absolute;
    left: 20px;
    top: 30px;*/
    padding: 20px;
}

@media(max-width: 768px) {
    .smallnav {
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
    }

    .leftthumbnail {
        display: none;
    }

    #profiletext {
        margin-bottom: 30px;
    }
}

.artistsmain a {
    color: #000000;
}

.profiletext {
    border-left: none;
    border-right: 1px solid #C0C0C0;
    padding: 0 30px 30px 30px;
}

.footer {
    padding-bottom: 50px;
}

.footercontent {
    border-top: 1px solid #EFEFEF;
    padding: 10px 0 0;
    text-align: center;
}
.footercontent span {
  font-size : 10px;
}
.leftthumbnail {
    padding-top: 5px;
    padding-left: 20px;
}

#fullimageoption {
    position: relative;
    width: 140px;
}
#menu  {
    background-color: #fff;
    opacity: 0.9;
    margin-top: 15px;
}
@media (max-width: 768px) {
    #fullimageoption {
        position: static;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        padding: 0 30px;
    }

    #thumbnailoption {
        width: 100%;
        padding: 0 30px;
    }

    #detailshots {
        padding: 0 30px;
    }

        #detailshots > img {
            display: none;
        }
}

.artists1profiletext {
    padding: 0 30px 30px 30px;
}

#rightthumbnail {
    border-left: 1px solid #C0C0C0;
    margin-left: -30px;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 25px;
}

.rightthumbnail {
    overflow: hidden;
}
.rightthumbnail img {
    cursor:pointer;
}
.mapinfo {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    width: 23%;
    position: absolute;
    left: 27px;
    top: 80px;
    padding: 20px;
}

@media (max-width: 768px) {
    .mapinfo {
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
    }
}

.contactinfo {
    padding: 30px;
}

.contactform {
    padding: 30px;
    border-left: 1px solid #C0C0C0;
}

@media(max-width: 768px) {
    .contactform {
        border-left: 0px;
    }
}

.contactform form {
    margin-left: -10px;
}


.contactform input {
    width: 50%;
}
.contactform   input[type="checkbox"] {
    width: 25px;
}
 
.contactform button {
    background-color: #000000;
    color: #FFFFFF;
}

.frontend button {
    background-color: #000000;
    color: #FFFFFF;
    width: 200px;
}

.frontend a {
    background-color: #000000;
    color: #FFFFFF;
    width: 200px;
}

.contactcontent {
    margin-bottom: 30px;
}

.form-control {
    border-radius: 0px;
}

.btn {
    border-radius: 0px;
}

.img-responsive-width {
    display: block;
    max-height: 100%;
    width: auto;
}

#fullimage {
    overflow: hidden;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.btn:focus {
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .frontend {
        text-align: center;
        margin-bottom: 50px;
        margin-top: 20px;
    }

    .artist-thumbnails {
        display: none;
    }
}

.fix-height {
   height:250px;
   max-width:250px;
    overflow:hidden;
}
.fix-height a img{
  max-width:initial;
}

.c-grid {
    min-height:342px;
}

.slideContainer {
    background-color:black;
}

.logo {
       position:relative;
}
.social {
    position:absolute;
    right:16px;
    top:10px; 
}
    .social img {
        max-height:24px;
    }
@media (min-width: 470px) and (max-width: 650px) {
.social {
    position:absolute;
    right:80px;
    top:14px;
}
    .social img {
        max-height:15px;
    }
    
}

@media (min-width: 650px) and (max-width:1200px)  {
.social {
    position:absolute;
    right:130px;
    top:27px;
}
    .social img {
        max-height:15px;
    }
}
@media (min-width: 340px) and (max-width: 470px) {
.social {
    position:absolute;
    right:60px;
    top:4px;
}
    .social img {
        max-height:15px;
    }
}
@media (max-width:340px)  {
.social {
    position:absolute;
    right:40px;
    top:0px;
}
    .social img {
        max-height:10px;
    }
}

.nav > li > a {
    padding-left:0px;
}

.smallbanner {
    width: 100%; max-height:100px; overflow:hidden;
}
