/*Colors*/
/*Colors from South Park official website:
rgb(227, 174, 64) - Color of headings.
rgb(132, 98, 17) - Color of borders.
rgb(232, 105, 41) - The orange color used on Ubisoft South Park site (not the same thing as the official site).

/*-Colors from the South Park: The Stick of Truth logo:
rgb(197, 91, 37); /*A darker versin of the South Park orange color that I got in Photoshop by dragging the orange color down to a darker part of the spectrum in the color picker
rgb(174, 81, 33); /*An even darker versin of the South Park orange color that I got in Photoshop by dragging the orange color down to a darker part of the spectrum in the color picker
rgb(159, 74, 31); /*An even darker versin of the South Park orange color that I got in Photoshop by dragging the orange color down to a darker part of the spectrum in the color picker

rgb(232, 105, 41) – The orange color from the top part of the letters "South Park:". It is also the orange color used on Ubisoft site.
rgb(239, 154, 37) – The orange color from the middle part of the letters "South Park:"
rgb(243, 205, 27) – The yellow-orange color from the bottom part of the letters "South Park:"

rgb(247, 235, 99) – The oker-yellow color from very light parts of the letters "The Stick of Truth"
++ rgb(218, 170, 63) – The light brown color from medium (between light and dark) parts of the letters "The Stick of Truth"
++ rgb(152, 60, 36) – The brown color from darker parts of the letters "The Stick of Truth"
rgb(87, 27, 25) – The dark brown color from the darkest parts of the letters "The Stick of Truth"

++ rgb(155, 124, 87) – The lighter brown color from lighter parts of the stick in the logo.
++ rgb(112, 74, 34) – The brown color from lighter (but stil dark) parts of the stick in the logo.
rgb(45, 9, 15) – The dark brown color from the darkest parts of the stick in the logo.*/

/*Fonts*/
/*Fonts from the South park SoT official site:
GRENDEL BOLD, Helvetica, Arial, sans-serif   - Headings and menu text. But I don't know from where they imported the Grendel font. Browsers don't have it by default.
Helvetica, Arial, sans-serif - normal page text.
*/

/*Fonts from Ubisoft's South Park SoT portal on the Ubisoft site itself:
Helvetica, Arial, sans-serif - Normal page text.
adobe-caslon-pro, Georgia, serif - Orange, italic headings.
*/

/*Bootstrap default fonts
"Helvetica Neue",Helvetica,Arial,sans-serif   - Normal page text font.
*/

.bg_black{
    color: white;
    background-color: black;
}

.bg_white{
    color: black;
    background-color: white;
}

/*.bg_white h2, .bg_white h4{
    color: rgb(232, 105, 41);
}*/

.bg_dark-brown{
    color: white;
    background-color: rgb(87, 27, 25);
}

.bg_brown{
    color: white;
    background-color:rgb(112, 74, 34);
}

.bg_light-brown{
    color: white;
    background-color:rgb(155, 124, 87);
}

.bg_orange{
    color: white;
    background-color:rgb(232, 105, 41);
}

.orange{
    color: rgb(232, 105, 41);
}

h1, h2, h3, h4, h5, h6{
    /*font-family: GRENDEL BOLD, Helvetica, Arial, sans-serif;*/
    font-family: Georgia, serif;
}

h1, h2{
    letter-spacing: 4px;
    /*font-weight: bold;*/
}

a{
    color: rgb(232, 105, 41);
    text-decoration: none;
}

a:visited{
    color: rgb(239, 154, 37);
    text-decoration: none;
}

a:hover{
    color: rgb(243, 205, 27);
}

.jumbotron_custom { 
    /*CSS styling code from the W3C theme "The Company" that was applied directly to the .jumbotron class.*/
    background-color: black;
    color: #ffffff;
    /*padding: 100px 25px;*/

    /*My own code*/
    background: black url("img/banner/banner-blgradient-med-jpeg.jpg") center top no-repeat;
    /*background: black url("img/wallpapers/south-park-the-stick-of-truth-hd-wallpaper.jpg") center top no-repeat;*/
    /*background-size: contain;*/
    height:392px;
    padding: 80px 25px 100px 25px;
    margin-bottom: 0;
}

.custom-padding { /*Custom padding to be applied to container-fluid. In the W3C The Company template this styling was added directly to the class .container-fluid*/
    padding: 60px 50px;
}

.navbar_custom{
    margin-bottom: 0;
    background-color: rgb(0, 0, 0);
    /*z-index: 9999;*/
    border: 0;
    /*font-size: 14px !important;*/
    font-size: 16px !important;
    /*line-height: 1.42857143 !important;*/
    letter-spacing: 4px;
    border-radius: 0;

    font-family: Georgia, serif;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important; /*Color of menu item text*/
}

.navbar-brand:hover {
    background-color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a{
    color: rgb(232, 105, 41) !important; /*Color of hover menu item text.*/
    background-color: #fff !important; /*Background color of hover menu items*/
}

.navbar-default .navbar-toggle { /*navbar-toggle controls the color of the button with three dashes that opens the top menu when it collapses on smaller screens*/
    border-color: transparent;
    color: #fff !important; /*This should probably change the color of the three dashes in the collapse button, but for some reason it currently changes nothing.*/
}

.navbar-toggle:hover {  /*This controls the hover color of the button with three dashes that opens the top menu when it collapses on smaller screens*/
    border-color: transparent;
    color: #fff !important; /*This should probably change the color of the three dashes in the collapse button, but for some reason it currently changes nothing.*/
    background-color: #fff !important;
}

/*Styling for custom nav pills.*/
.nav-pills_custom, .nav-pills_custom li a{
    margin-bottom: 0;
    color: #fff !important; 
    /*background-color: rgb(0, 0, 0);
    /*z-index: 9999;*/
    border: 0;
    font-size: 14px !important;
    /*line-height: 1.42857143 !important;*/
    /*letter-spacing: 4px;*/
    border-radius: 0;
}

.nav-pills_custom li a:hover, .nav-pills_custom li.active a{
    color: rgb(232, 105, 41) !important; /*Color of hover menu item text.*/
    background-color: #fff !important; /*Background color of hover menu items*/
    border-radius: 0;
}

/*Styling for the custom nav pills on the white background.*/
.nav-pills_custom-on-white-bg, .nav-pills_custom-on-white-bg li a{
    margin-bottom: 0;
    color: rgb(232, 105, 41) !important;
    /*color: rgb(0, 0, 0) !important; 
    /*background-color: rgb(0, 0, 0);
    /*z-index: 9999;*/
    border: 0;
    font-size: 14px !important;
    /*line-height: 1.42857143 !important;*/
    /*letter-spacing: 4px;*/
    border-radius: 0;
}

.nav-pills_custom-on-white-bg li a:hover, .nav-pills_custom-on-white-bg li.active a{
    color: #fff !important; /*Color of hover menu item text.*/
    color: rgb(255, 255, 255) !important; /*Color of hover menu item text.*/
    background-color: rgb(232, 105, 41) !important; /*Background color of hover menu items*/
    /*background-color: rgb(0, 0, 0) !important; /*Background color of hover menu items*/
    border-radius: 0;
}
/*End of the styling for custom nav pills.*/

.thumbnail_custom{
    box-shadow: 2px 2px 2px grey;
    border-radius: 0px;
}

.thumbnail_custom:hover{
    background-color: rgb(232, 105, 41);
    border-color: rgb(232, 105, 41);
    /*box-shadow: 10px 10px 5px grey;*/
}

.panel_custom{
    box-shadow: 2px 2px 2px grey;
    border-width: 0px;
    /*border-radius: 0px;*/
}

.panel_custom > h1 h2 h3 h4 h5 h6{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.panel-heading_custom{
    padding: 0px;
    background-color: rgb(232, 105, 41);
}

.panel-body_custom{
    /*background-color: rgb(232, 105, 41);*/
}

.panel-body_custom h4{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*color:white;*/
}

img.img_custom_on-orange-bg{
    box-shadow: 3px 3px 3px rgb(174, 81, 33); /*A darker versin of the South Park orange color that I got in Photoshop by dragging the orange color down to a darker part of the spectrum in the color picker*/
    /*rgb(239, 154, 37) rgb(227, 174, 64)*/
}

img.img_custom_story{
    margin-right:20px;
    margin-bottom:1px;
    box-shadow: 3px 3px 3px rgb(174, 81, 33); /*A darker versin of the South Park orange color that I got in Photoshop by dragging the orange color down to a darker part of the spectrum in the color picker*/
    /*rgb(239, 154, 37) rgb(227, 174, 64)*/
}

img.img_custom_features{
    margin-left:0px;
    margin-bottom:10px;
    box-shadow: 3px 3px 3px grey;
}

img.img_custom_logo{
    margin-top: -12px;
}

/*CSS to darken link images on hover that I found on the internet*/
a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
        -ms-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

a.darken:hover img {
    opacity: 0.7;
}
/*End of the CSS to darken link images on hover that I found on the internet*/

footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: rgb(232, 105, 41);
}





/*******Classes for adding smooth animation.*/
/********************************************/
.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
/********************************************/
/*******End of the classes for adding smooth animation.*/