/**********************Colors*/
/*Default colors of the Agency theme
#fed136  - Yellow color used for buttons. It is applied to .navbar-default .navbar-brand
#fec503  - Another yellow color, maybe slightly fdarker, used in navbar hovers and other places

/*Default colors of the Creative theme
#F05F40  - Dark orange color used for many elements in the theme.

/*Other colors
#E1E1E1 - Light gray color used in the top menu of GOG.com
#EBEBEB - Lighter gray color used in the top menu of GOG.com when you hover over a button
#CECECE - Slightly darker but still light grey, used for borders of menus on GOG.com
#788795, rgb(153,153,153) - Medium grey used for the background of the number of updates on your account at the top menu of GOG.com
#98A3AD - Dark grey used for text in the top menu of GOG.com

#262626 - Very dark, almost black color in the footer of GOG.com.
#CCCCCC - Light grey page background color of GOG.com.
#D9D9D9 - A bit lighter grey, found on some darker panels on GOG.com, such as the one marking the games you already own.
#E1E1E1 - An even lighter grey, found on most panels on GOG.com.
#E5E5E5 - A slightly lighter grey than the previous one, found on panels on hover on GOG.com.

#818689 - //Dark blueish grey that is in the background of GOG logo in the top menu of GOG.com //Actually, the color of that logo 
depends on what is behind it on the page, because it is partly transparent.
#788795 - Dark blueish grey used on some parts of GOG.com
#7E8C99 - A slightly lighter dark blueish grey color on hover.
#98A3AD - An even lighter version of dark bluish grey, on the lighter parts on hover.

#470C63 - The dark purple color on GOG.com
#A679B8 - The medium purple used for letters on dark purple background on GOG.com
#F1CEFB - The light purple used for letters on dark purple background on GOG.com

#80AB00 - Darker shade of green on the green button gradients on GOG.com.
#9DBE00 - Lighter shade of green on the green button gradients on GOG.com.
#8DB300 - Darker shade of green on the green buttons without gradients on GOG.com.
#A5C900 - Lighter shade of green on the green buttons without gradients on GOG.com.

/*Box shadow on panels on GOG.com */
/*box-shadow: 0 1px 5px rgba(0,0,0,.3);



/****************************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.
*/

/*GOG.com fonts*/
/*
font-family: Open Sans,sans-serif;   --body fonts

Big, main header h1 styling:
font-family: Open Sans,sans-serif;
margin-top: 19px;
font-size: 38px;
font-weight: 300;
line-height: 1.1em;
margin: .67em 0;
-webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
text-transform: uppercase;
color: #404040;


*/

.text-primary{
    /*color:#fed136;*/
    color:#E1E1E1;
}

a{
    /*color:#fed136*/

    color:#98A3AD;
}

a:hover,a:focus,a:active,a.active{
    /*color:#fec503*/

    color:#788795;
}

h1,h2,h3,h4,h5,h6{
    /*font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    font-weight:700*/

    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:none;
    /*font-weight:300;*/
}

/*.img-centered{
    margin:0 auto
}*/

.bg-light-gray{
    /*background-color:#f7f7f7*/
}

.bg-darkest-gray{
    /*background-color:#222*/
}



.custom_main-site-color{
    color:#E1E1E1;
}

/********* Styling for rectangular buttons*/
.btn-primary{
    /*color:#fff;
    background-color:#fed136;
    border-color:#fed136;
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    font-weight:700*/

    background-color:#788795;  /*I still haven't figured out what these colors do.*/
    border-color:#788795;
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{
    /*color:#fff;
    background-color:#fec503;
    border-color:#f6bf01*/

    background-color:#98A3AD;  /*I still haven't figured out what these colors do.*/
    border-color:#98A3AD;
}

.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{
    /*background-image:none*/
}

.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled].btn-primary.active{

    /*background-color:#fed136;
    border-color:#fed136*/

    background-color:#788795;  /*I still haven't figured out what these colors do.*/
    border-color:#788795;
}

.btn-primary .badge{
    /*color:#fed136;
    background-color:#fff*/

    color:#788795;  /*I still haven't figured out what these colors do.*/
}

.btn-xl{
    /*color:#fff;
    background-color:#fed136;
    border-color:#fed136;
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    font-weight:700;
    border-radius:3px;
    font-size:18px;
    padding:20px 40px*/

    background-color:#788795;   /*The color of large buttons on the site.*/
    border-color:#788795;
}

.btn-xl:hover,.btn-xl:focus,.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{
    /*color:#fff;
    background-color:#fec503;
    border-color:#f6bf01*/

    background-color:#98A3AD; /*The color of large buttons on the site when you hover over it.*/
    border-color:#98A3AD;
}

.btn-xl:active,.btn-xl.active,.open .dropdown-toggle.btn-xl{
    /*background-image:none*/
}

.btn-xl.disabled,.btn-xl[disabled],fieldset[disabled] .btn-xl,.btn-xl.disabled:hover,.btn-xl[disabled]:hover,fieldset[disabled] .btn-xl:hover,.btn-xl.disabled:focus,.btn-xl[disabled]:focus,fieldset[disabled] .btn-xl:focus,.btn-xl.disabled:active,.btn-xl[disabled]:active,fieldset[disabled] .btn-xl:active,.btn-xl.disabled.active,.btn-xl[disabled].active,fieldset[disabled].btn-xl.active{

    /*background-color:#fed136;
    border-color:#fed136*/

    background-color:#788795;
    border-color:#788795;
}

.btn-xl .badge{
    /*color:#fed136;
    background-color:#fff*/

    color:#788795;
    }

/*********End of styling for rectangular buttons */

/*********Navbar styling */

.navbar-default{
    /*background-color:#222;
    border-color:transparent*/
}

.navbar-default .navbar-brand{
    color:#FFF;
    /*font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive*/

    font-family:"Helvetica Neue",Helvetica,Arial,cursive;
}

.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:active,.navbar-default .navbar-brand.active{
    color:#E1E1E1;     /*This color is for hovers and should be slightly darker than the one above. 
    By default it is a slightly darker yellow color*/
}

.navbar-default .navbar-collapse{
    /*border-color:rgba(255,255,255,.02)*/
    border-color:#788795;   /*I am not sure what is this border color. I havent seen any effect when I changed it.*/
}

.navbar-default .navbar-toggle{
    /*background-color:#fed136;
    border-color:#fed136*/

    background-color:#788795;  /*The color of the collapse button in the top menu.*/
    border-color:#788795;  /*The color of the border of the collapse button in the top menu.*/
}

.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{
    /*background-color:#fed136;*/

    background-color:#98A3AD;  /*Color of the collapse button in the top menu when you hover over it or click it.*/
}

.navbar-default .nav li a{
    /*font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:1px;
    color:#fff*/     /*Color of the text of the links in the top menu*/

    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.navbar-default .nav li a:hover,.navbar-default .nav li a:focus{
    /*color:#fed136;    /*Color of the text of the links in the top menu when you hover over it*/
    /*outline:0;*/

    color:#E1E1E1;
}

.navbar-default .navbar-nav>.active>a{
    /*border-radius:0;
    color:#fff;
    background-color:#fed136;*/    /*Background color of the currently active button link in the navbar, when you scroll down the page.*/

    background-color:#788795;
}

.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
    /*color:#fff;
    background-color:#fec503*/     /*Background color of the currently active button link in the navbar when you hover over it.*/

    background-color:#98A3AD;
}

.navbar-default .navbar-nav>.active>a{
    /*border-radius:3px*/     /*Border radius of the currently highlighted button in the top menu.*/

    /*border-radius:0px;*/
}

#page-top > nav{     /*This selector isn't present in Agency theme's CSS. I had to throw this in so that the navbar would be visible if you
don't have a background image for the header and you scroll to the top of the page.*/
    background-color:#222;
}

/*********End of navbar styling */


/*********Header styling */
header{
    /*background-image:url(../img/header-bg.jpg);
    background-repeat:none;
    background-attachment:scroll;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    -o-background-size:cover;
    text-align:center;
    color:#fff*/

    background-image:none;
    background-color:#222;
}

header .intro-text{
    /*padding-top:100px;
    padding-bottom:50px;*/

    padding-top:100px;
    padding-bottom:10px;
}

/*header .intro-text .intro-lead-in{
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:22px;line-height:22px;margin-bottom:25px
    }*/
header .intro-text .intro-heading{
    /*font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    font-weight:700;
    font-size:50px;
    line-height:50px;
    margin-bottom:25px*/
    }
@media (min-width:768px){
    /*header .intro-text{
        padding-top:300px;padding-bottom:200px
        }
    header .intro-text .intro-lead-in{
        font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:40px;line-height:40px;margin-bottom:25px
        }
    header .intro-text .intro-heading{
        font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:75px;line-height:75px;margin-bottom:50px
        }*/
}

/*********End of the header styling */


/*********<section> styling  */
section{
    /*padding:100px 0*/
}

section h1.section-heading{
    font-size:40px;
    margin-top:20px;
    margin-bottom:75px;
    font-weight:300;
}

section h2.section-heading{
    /*font-size:40px;
    margin-top:0;
    margin-bottom:15px*/

    margin-bottom:100px;
}

section h3.section-subheading{
    /*font-size:16px;
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:none;
    font-style:italic;
    font-weight:400;
    margin-bottom:75px*/
}

@media (min-width:768px){
    /*section{
        padding:150px 0
    }*/
}

.service-heading{
    /*margin:15px 0;
    text-transform:none*/
}

/*********End of <section> styling  */


/*********Styling for portfolio items */
#portfolio .portfolio-item{
    /*margin:0 0 15px;
    right:0*/

    /*margin:0 0 155px;*/
    /*box-shadow: 0 1px 5px rgba(0,0,0,.3);*/
}

#portfolio .portfolio-item .portfolio-link{
    /*display:block;
    position:relative;
    max-width:400px;
    margin:0 auto*/

    max-width:600px;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover{
    /*background:rgba(254,209,54,.9);
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:all ease .5s;
    -webkit-transition:all ease .5s;
    -moz-transition:all ease .5s*/

    background:rgba(120,135,149,.7);
}

/*#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{
    opacity:1
}*/

/*#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{
    position:absolute;
    width:100%;
    height:20px;font-size:20px;
    text-align:center;
    top:50%;
    margin-top:-12px;
    color:#fff
}*/

/*#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{
    margin-top:-12px
}*/

/*#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{
    margin:0
}*/

#portfolio .portfolio-item .portfolio-caption{
    /*max-width:400px;
    margin:0 auto;
    background-color:#fff;
    text-align:center;
    padding:25px*/

    max-width:600px;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
}

#portfolio .portfolio-item .portfolio-caption h4{
    /*text-transform:none;
    margin:0*/
}

#portfolio .portfolio-item .portfolio-caption p{
    /*font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style:italic;
    font-size:16px;
    margin:0*/
}

/*#portfolio *{z-index:2}*/

/*@media (min-width:767px){
    #portfolio .portfolio-item{margin:0 0 30px}
}*/
/*********End of the styling for portfolio items */


/*********Styling for when you select some text on the page like you would select text in MS Word. */

::-moz-selection{
    /*text-shadow:none;
    background:#fed136*/

    background:#98A3AD;
}
::selection{
    /*text-shadow:none;
    background:#fed136*/

    background:#98A3AD;
}

/*img::selection{
    background:0 0
}*/

/*img::-moz-selection{background:0 0}*/

body{
    /*webkit-tap-highlight-color:#fed136*/

    webkit-tap-highlight-color:#98A3AD;
}

/*********End of styling for when you select some text on the page like you would select text in MS Word. */


/**************Styles from my  South Park Stick of Trth site*/
.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);
}



/*Styling for custom nav pills.*/

/*End of the styling for custom nav pills.*/





/*CSS to darken link images on hover that I found on the internet*/
/*I used this on the buy links on the South Park site, but not in this site at the moment.*/
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*/


/*******Classes for adding smooth animation.*/
/********************************************/
/*These classes come from my South Park site template, but I haven't used them here yet.*/
.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.*/