body {
    background-color: #000000;
    margin: auto;
}

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    clear: both;
}

img {
    width: 200px;
    margin-top: 10px;
}

.glyphicon {
    margin-top: 20px;
    margin-right: 10px;
}

.glyphicon-search {
    margin-top: 20px;
    margin-right: 10px;
}

.glyphicon-log-in {
    margin-right: 15px;
}

.btn2 {
    height: 35px;
    width: 150px;
    cursor: pointer;
    background-color: #4aaaa5;
    color: white;
    margin-left: 5px;
    margin-top: -15px;
}

.facebook {
    height: 35px;
    width: auto;
    margin-top: -5px;
}

.nasdaq {
    height: 55px;
    width: auto;
    margin-top: -5px;
}

.rss {
    height: 45px;
    width: auto;
    margin-top: -5px;
}

.alert {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    margin-bottom: 50px;
    margin-top: 25px;
    width: 100%;
}

.navbar-header {
    position: fixed;
    width: 100%;
    background-color: #505050;
    border-bottom: 3px solid #4aaaa5;
    z-index: 50;
    height: 75px;
}

.btn1 {
    background-color: #4aaaa5;
    color: white;
    height: 35px;
    width: 110px;
    margin-left: 10px;
}

.form-control {
    width: 300px;
    margin-bottom: 10px;
}

.btn3 {
    background-color: #4aaaa5;
    color: white;
}

.commod-search {
    margin-top: 15px;
}

.container.wrapper {
    padding-top: 75px;
}
.navbar-right .glyphicon{
    margin: 15px 10px 10px 10px;
}
.navbar-right .glyphicon:hover{
    color: #4aaaa5;
}

.glyphicon {
    color: white;
    font-size: 22px;
}
.glyphicon-triangle-bottom{
    color: red;
}
.glyphicon-triangle-top{
    color:green;
}

.search-container {
    width: 100%;
}

.search-container .form-control {
    padding-top: 2px;
    display: inline-block;
    width: 70%;
}

.divCommodityNews .align-right{
    text-align: right;
}

#divLogoutYes , #divLogoutNo {
    padding-top: 5px;
}

#submit {
    margin-top: 10px;
}
#logout{
    padding-top:20px;
}
footer {
    position: fixed;
    bottom: 0;
    padding: 10px 0;
    clear: both;
    font-size: 12px;
    text-align: center;
    background: #505050;
    border-top: 8px solid #4aaaa5;
    width: 100%;
    color: lightgray;
}
footer span {
    padding-left:10px;
}
footer img {
    padding-left: 10px;
}

.footer-logo {
    height: 30px;
    width: auto;
    margin-bottom: 12px;
    color: white;
}

.easy-autocomplete {
    width: 100% !important;
}

.mySlides {
    display: none;
    margin-top: -15px;
    border-radius: 7px;
    border-style: solid;
    border-color: #4aaaa5;
    border-width: 3px;
    height: 355px;
}

.text-right {
    text-align: : right;
}


.background-image {
    position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .8;
    height: 95vh;
    width: 100%;
}

.carousel-fade .carousel-inner {
    background: #000;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

.carousel-fade .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}

.carousel-fade .next.left,
.carousel-fade .prev.right,
.carousel-fade .item.active {
    opacity: 1;
}

.carousel-fade .active.left,
.carousel-fade .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}





/* Safari Fix */

@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-fade .carousel-inner>.item.next,
    .carousel-fade .carousel-inner>.item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner>.item.prev,
    .carousel-fade .carousel-inner>.item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner>.item.next.left,
    .carousel-fade .carousel-inner>.item.prev.right,
    .carousel-fade .carousel-inner>.item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}







/* Carousel Control custom */

.carousel-control .control-icon {
    font-size: 48px;
    height: 30px;
    margin-top: -15px;
    width: 30px;
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

.carousel-control .prev {
    margin-left: -15px;
    left: 50%;
}




/* Prev */

.carousel-control .next {
    margin-right: -15px;
    right: 50%;
}




/* Next */


/* Removing BS background */

.carousel .control-box {
    opacity: 0;
}

a.carousel-control.left {
    left: 0;
    background: none;
    border: 0;
}

a.carousel-control.right {
    right: 0;
    background: none;
    border: 0;
}





/* Animation */

.control-box,
a.carousel-control,
.carousel-indicators li {
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    /* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
    /* Assigning animation to indicator li will make slides flicker */
}





/* Hover animation */

.carousel:hover .control-box {
    opacity: 1;
}

.carousel:hover a.carousel-control.left {
    left: 15px;
}

.carousel:hover a.carousel-control.right {
    right: 15px;
}



/* Carouse Indicator */

.carousel-indicators li.active,
.carousel-indicators li {
    border: 0;
}

.carousel-indicators li {
    background: #666;
    margin: 0 3px;
    width: 12px;
    height: 12px;
}

.carousel-indicators li.active {
    background: #fff;
    margin: 0 3px;
}

.social-container {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 50;
}

.social-container .social {
    transition: padding-right 0.5s ease;
    padding: 10px 10px 10px 10px;
    background-color: #505050;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 5px;
}

.social-container .social:hover {
    transition: padding-right 0.5s ease;
    padding-right: 55px;
    background: #4aaaa5;
}

.social-icon {
    width: 35px;
    height: 35px;
}

}


/*//////////////////////////////////////////////////////////////////////////////*/


/*//////////////////////////////////////////////////////////////////////////////*/

#contactFormContainer {
    left: 600px;
    float: right;
}

#contactFormContainer {
    position: fixed;
}

fieldset {
    height: 300px;
    float: right;
    border-radius: 7px;

}

#contactForm {
    height: 355px;
    background-color: #000000;
    display: none;
    border-radius: 7px;
}

#contactForm fieldset {
    padding: 30px;
    border: none;
}




#contactForm label {
    display: block;
    color: white;
}



#contactForm input[type=text] {
    display: block;
    border: solid 1px #4d3a24;
    margin-bottom: 10px;
    height: 24px;
}



#contactForm textarea {
    display: block;
    border: solid 1px #4d3a24;
    margin-bottom: 10px;
}



#contactForm input[type=submit] {
    background-color: #505050;
    border: solid 1px #23150c;
    color: white;
    padding: 5px;
}

#messageSent {
    color: #ff9933;
    display: none;
}

.divCommodityNews {
    margin-bottom: 100px;
}

.divNewsHeader {
    margin-top: 25px;
}







/* ////////////////////////////////////////////////////////////// */


/* content styling */

.panel-heading {
    color: white;
    background-color: #83c9c5;
}

.divGraph {
    margin-top: 25px;
    margin-bottom: 50px;
}

.panel-title {
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-title {
    font-family: 'Arvo', serif;
    font-size: 35px;
}

.commodityInfoHeader h1 {
    font-family: 'Arvo', serif;
    font-size: 35px;
}

.commodity-info-container h3 {
    font-family: 'Arvo', serif;
    font-size: 20px;
}

.commodity-info-container h6 {
    font-family: 'Arvo', serif;
    font-size: 15px;
    padding-bottom: 5px;
}

.panel-heading h1 {
    font-family: 'Arvo', serif;
    font-size: 35px;
}

.panel-heading h3 {
    font-family: 'Arvo', serif;
    font-size: 25px;
}

.panel-body h3 {
    font-family: 'Arvo', serif;
    font-size: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.3;
}

.panel-body h6 {
    font-family: 'Arvo', serif;
    font-size: 15px;
}


#cmdCreateAccount {
    margin-top: 15px;
}

#cmdLogin {
    margin-top: 15px;
}

.form-control-commo {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 18px;
    padding-bottom: 18px;
}

#dpStartDate {
    margin-bottom: 10px;
    width: 200px;
}

#dpEndDate {
    margin-bottom: 10px;
    width: 200px;
}

.refine-start-date {
    margin-right: 10px;
}

.refine-end-date {
    margin-right: 21px;
}

.search {
    margin-right: 10px;
}

#dpGraphStartDate {
    margin-right: 15px;
}

#dpGraphEndDate {
    margin-right: 15px;
}

#txtCommoditySearch {
    width: 100%;
}

.navbar-form {
    margin-top: 10px;
}
.about-us, .what-we-do{
    margin-top:50px;
    margin-bottom: 50px;
}
.about-us-container .row, .what-we-do-container .row{
    padding: 20px 20px 20px 20px;
    margin:20px 20px 20px 20px;;
}
.about-us a.btn-primary, .navbar-header .btn2, .what-we-do a.btn-primary {
    background-image: -webkit-linear-gradient(top,#4aaaa5 0,#83c9c5 100%);
    background-image: -o-linear-gradient(top,#4aaaa5 0,#83c9c5 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#4aaaa5),to(#83c9c5));
    background-image: linear-gradient(to bottom,#4aaaa5 0,#83c9c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #4aaaa5;
    background-color:#83c9c5;
}
.about-us-container .row{
    border:solid 1px gray;
}
.about-us a.btn-primary:active, .what-we-do a.btn-primary:active {
    background-color: #4aaaa5;
    border-color: #83c9c5;
}
.about-us a.btn-primary:hover, .what-we-do a.btn-primary:hover {
    background-color: #4aaaa5;
    background-position: 0 -15px;
}

.about-us .caption{
    text-align: left;
}

.pnlExpand {
    border: solid 1px gray;
}

.pnlExpand a:hover,.pnlExpand a:focus,.pnlExpand a:active{
    text-decoration: none;
}
.divAbout, .divWhatWeDo {
    margin-bottom: 75px;
}

@media only screen and (max-width: 768px) {
    .navbar-header .navbar-right{
        float:right;
        margin-top: 0px;
        padding: 0px;
    }
    #logout {
        text-align: center;
        padding-top:5px;
    }
    #logout #divLogoutYes .btn, #logout #divLogoutNo .btn{
        margin: 10px 0 10px 0;
    }
    .search-container{
        text-align: center;
        padding-top:30px;
    }
    .divGraph em, .divGraph input {
        display:block;
    }
    .divGraph em{
        margin-top:5px;
    }

    #cmdGraphSubmit {
        margin-top:10px;
    }
    .trending-container{
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 520px) {
    #myCarousel{
        display:none;
    }
 .navbar-header img{
    width:150px;
 }

 .navbar-form {
    margin-top: 0;
 } 
 .divGraph .panel-body{
    display:block;
 }
 .search{
    display: block;
 }


@media only screen and (max-width: 480px ){
    .navbar-header{
        height:120px;
    } 
    .container.wrapper{
        padding-top:120px;
    }
}

}