/* Table of Content
====================================================================================================

        # 1. Custom Reset
        # 2. Typography
        # 3. Boostrap customization
        # 4. GeneralSite Styles
        # 5. Template Styles
        # 6. HomePage Style
        # 7. Page Styles
        # 8. Forms
        # 9. Media Queries
        # 10. Temp Styles
*/

/* # 1. Custom Reset (on top of normalize in bootstrap)
==================================================================================================== */

/* # 2. Typography
==================================================================================================== */

/* # 3. Bootstrap customization
==================================================================================================== */

/* # 4. General Site Styles
==================================================================================================== */
body,html{
    font-family: Helvetica, Helvetica, Arial, sans-serif;
}

body{
    overflow-x: hidden;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    -ms-overflow-style: scrollbar;
}

/* webkit werkt niet voor moz of ie */
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#btn-download{
    -woz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
    background-color: #3498db ;
    color: #ffffff;
    margin-bottom: 1em;
	width: 13em;
	height: 2.5em;
    border: 2px solid #3498db;
}

#btn-download:hover{
    background-color: #ffffff;
    color:#3498db;
}

#btn-download:hover i{
    color: #3498db;
}

#btn-order {
	-woz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
    background-color: #3498db ;
    color: #ffffff;
    margin-bottom: 1em;
    border: 2px solid #3498db;
}

#btn-order:hover{
    background-color: #ffffff;
    color:#3498db;
}

#btn-order:hover i{
    color: #3498db;
}

.icon-1{
    color: #41ba52;
    font-size: 20px;
}

.icon-2{
    color: #ffffff;
    font-size: 20px;
}

.icon-3{
    color: #3498db;
    font-size: 60px;
}


/* # 5. Template Styles
==================================================================================================== */

/* Header */

.active {
    background-color: #428bca !important;
    color: #ffffff !important;
}

#header {
    background-color: #ffffff;
    border: none;
    margin-top: 20px;
}

#nav-menu {
    margin-top: 1.3em;
}

#nav-menu ul li a {
    color: #636262;
    float: right;
    font-size: large;
}

#nav-menu ul li a:hover {
    background-color: #428bca !important;
    color: #ffffff;
}

#logo-header {
	margin-top: 1em;
}

/* Footer */

#footer a {
	color: #626262;
    text-decoration: underline;
}

#sub-footer a,p{
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 12px ;
}
#sub-footer hr{
    margin-top: 0;
}

/* # 6. Homepage Style
==================================================================================================== */

.sub-titel {
    color: #34495e;
}

.alinea-text {
    color: #626262;
}

/* Call to action */

#call-to-action {
    background-image: url("../img/background-4-2.jpg");
    background-size: cover;
}

#call-to-action h1 {
    color: #ffffff;
}

#call-to-action h4 {
    color: #ffffff;
}

#call-to-action h5 {
    color: #ffffff;
	font-size: x-small;
}

#btn-call-to-action {
    -woz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
    background: transparent;
    color: #ffffff;
    margin-bottom: 1em;
	width: 13em;
	height: 2.5em;
	font-size: 1.5em;
    border: 2px solid #ffffff;
}
#btn-call-to-action:hover {
    background-color: #3498db;
    color: #ffffff;
    border: 2px solid #3498db;
}


#img-product {
    padding-bottom: 0em;
}

/* Mobile net switch*/

#mobile-net-switch p {
    font-size: 1.4em;
}

/* Features */

#features h1 {
    color: #34495e;
}

#features p {
	font-size: 1.4em;
}

.features-subtitel {
    color: #3498db;
}


#btn-try {
    -woz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
    background-color: #3498db;
    margin-bottom: 1em;
	width: 13em;
	height: 2.5em;
	font-size: 1.5em;
    border: 2px solid #3498db;
}

#btn-try:hover {
    background-color: #ffffff;
    color:#3498db;
}

/* Testimonials */

#testimonials p {
	font-size: 1.4em;
}

#banner-fade{
    max-width: 80%;
    margin-bottom: 30px;
}

#banner-fade i{
    font-size: 120px;
    color: #3498db;
}

#banner-fade i:hover{
    color: #626262;
}

#banner-fade li{
    padding-top: 20px;
}

#banner-fade p{
    display: block;
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
}

/* Testimonials */

#awards {
	 background-image: url("../img/backpanel.png");
     background-repeat: no-repeat;
     background-size: cover;
}

#awards h1 {
	color: #ffffff;
}

#awards p {
	color: #ffffff;
}


/* # 7. Page Styles
==================================================================================================== */

/* Download Page */

#page-header{
    background-image: url("../img/background-1-1.jpg");
    height: 90px;
}

#page-header h1{
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}

#versions a{
    font-size: 24px;
}

.version-btn {
	margin-top: 7em;
}

.version-btn-2 {
	margin-top: 5em;
}

/* Awards Page */
#award-list{
    padding-left: 0;
}

#award-list li{
    display: block;
    margin-left: 0;
    padding-top: 30px;
    padding-left: 0;
}

/* Screenshots Page */
#screenshot-thumb-list{
    border-left: 1px solid #eee;
}

#screenshot-thumb-list div{
    margin-bottom: 20px;
}

#screenshot-thumb-list div img{
    border: 2px solid #fff;
}
#screenshot-thumb-list div img:hover{
    border: 2px solid #3498db;
    opacity: 0.6;
}
#screenshots-left h4{
    font-size:14px;
}

/* Volume-list */

#volume-list {
	list-style: none;
}

#discount {
	color: forestgreen;
}

/* versions  */
.version-titel {
	color: #3498db;
}

/* Awards Page */
.pagination-center {
	text-align: center;
}

/* FAQ */
.answer{
    display: none;
}

.faq-titel {
	color: #3498db;
    text-decoration: underline;
}

.faq-titel:hover{
    cursor: pointer;
    color:#636262;
}


/* Order page */


/* Media Query  */
@media only screen and (max-width: 750px) {
    #screenshot-thumb-list{
        display: none;
    }
}

/* # 8. Forms
==================================================================================================== */

/* # 9. Media Queries (bootstrap)
==================================================================================================== */

/* # 10. Temp Styles
==================================================================================================== */