/*! 
*   ---------------------------------------------------------------------------------
*   jQuery donkeyAccordion - DEMO PAGE -
*   ---------------------------------------------------------------------------------
*   (c) 2103 by BRAINLEAF Communication | www.brainleaf.eu | factory.brainleaf.eu
*   Released under GNU/GPL license
*   
*   This CSS file is needed only by the demo page. 
*   Don't use it for accordion plugin! 
*
*   Use this style (if you like it) for you page as you want, 
*   but remember that is not needed by the plugin
*   ---------------------------------------------------------------------------------
*/

body {
    padding:0;
    margin: 0;
    font-family: 'Roboto', arial, sans-serif;
    color: #777;
    font-weight: 300;
}
a {
    color: #FA075C;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 5em;
    line-height: 1em;
    font-weight: 300;
    color: #0AD3F2;
    margin-bottom: 25px;
}
h1 small {
    font-size: 0.5em;
    color: #ccc;
}

h2 {
    font-size: 2.8em;
    line-height: 1em;
    font-weight: 300;
    color: #ccc;
}

header h2 {
    margin-top: 0;
}
header h1 {
    margin-bottom: 20px;
}

h3 {
    font-size: 2.4em;
    line-height: 1em;
    font-weight: 300;
    color: #ccc;
}

h4 {
    font-size: 2em;
    line-height: 1em;
    font-weight: 300;
    color: #ccc;
}
section {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}
.stripe {
    background-color: #FA075C;
    padding: 20px 0;
} 
.stripe h1 small {
    color: #fff;
}
.stripe h1,
.stripe h2,
.stripe h3,
.stripe h4,
.stripe p,
.stripe ul,
.stripe a {
    color: #ccc;
}
.stripe.gray {
    background-color: #bbb;
    color:#fff;
}
.stripe.gray h3 {
    color:#fff;
    margin-bottom: 10px;
}
.stripe.gray p,
.stripe.gray a{
    color:#fff;
}
.download-button {
    margin-bottom: 50px;
}
.button,
.readmore-btn,
.readmore-btn-close {
    border: 0;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    background-color: #0AD3F2;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    outline: none;
    font-size: 1em;
    font-weight: 700;
    min-width: 100px;
    -webkit-transition: background 0.2s ease;
            transition: background 0.2s ease;
}

.button:hover,
.readmore-btn:hover,
.readmore-btn-close:hover {
    background-color: #84EAFA;
}

pre {
    margin: 0;
}
code {
    display: block;
    padding: 10px 20px 20px 20px;
    background-color: #efefef;
    border-left: 4px solid #999;
}

code.top-typo {
    display: block;
    background-color: #efefef;
    border-left: 0;
    border-top: 5px solid #FA075C;
}

.wrapper {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
}
table {
    width: 100%;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    background: #fff;
    margin-bottom: 40px;
}
tr {
    border-bottom: 1px dotted #ccc;
}
tr:first-child {
    background: #FA075C;
    color: #fff;
    border: none;
}
td {
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
td:first-child {
}
td:last-child {
}
footer {
    background-color: #ccc;
    text-align: center;
    color: #555;
    font-size: 0.8em;
    padding: 5px 0;
}
footer a {
    color: inherit;
}
.demo-wrapper {
    margin-bottom: 20px;
}
#more-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#more-links ul li {
    line-height: 1.5em;
}
.no-marg-bottom {
    margin-bottom: 0;
}
#productsList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#productsList li {
    border-top: 1px dotted #ccc;
    padding: 10px 0;
}
.prod-link {
    display: inline-block;
    font-weight: 700;
}
.prod-desc {
    display: block;
}
.prod-version {
    display: inline-block;
    background-color: #ccc;
    border-radius: 5px;
    padding: 0px 10px;
    color: #FA075C;
    font-size: 0.8em;
}

.line-spacer {
    margin-top: 40px;
    border-bottom: 1px solid #ccc;
}
.line-spacer-dotted {
    margin-top: 40px;
    border-bottom: 1px dotted #ccc;
}

.caveat-box {
    background-color: #FA075C;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}
.caveat-box h4 {
    margin: 10px 0;
}


.navigation {
    list-style-type: none;
    margin: 40px 0 0 0;
    padding: 0;
    overflow: auto;
}
.navigation li {
    margin-right: 4px;
    float: left;
}
.navigation li a {
    display: block;
    background-color: #FA075C;
    color: #fff;
    padding: 8px 20px;
    text-transform: uppercase;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: background 0.2s ease;
            transition: background 0.2s ease;
}
.navigation li a:hover {
    background-color: #fd2d76;
}
/* ************************************************ */
/* MEDIA QUERIES 
/* ************************************************ */

/* ExtraLarge Desktop */
@media only screen and (max-width:1979px) {
    
}

/* Large Desktop */
@media only screen and (max-width:1599px) {

}

/* Medium Desktop */
@media only screen and (max-width:1279px) {

}

/* Small Desktop & Landscape Tablet */
@media only screen and (max-width:1023px) {
    code {
        overflow: auto;
    }
    h1 {
        font-size: 2.8em;
    }    
    h2 {
        font-size: 2.3em;
    }
    
    h3 {
        font-size: 2em;
    }
    
    h4 {
        font-size: 1.5em;
    }
}

/* Small Tablet */
@media only screen and (max-width:859px) {
    h1 {
        font-size: 2.3em;
    }    
    h2 {
        font-size: 1.8em;
    }
    
    h3 {
        font-size: 1.2em;
    }
    
    h4 {
        font-size: 1.1em;
    }
}

/* Portrait Tablet */
@media only screen and (max-width:767px) {
    
}
/* Smartphone Landscape */
@media only screen and (max-width:480px) {
    h1 {
        font-size: 2em;
    }    
    h2 {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 1.2em;
    }
    
    h4 {
        font-size: 1.1em;
    }
}

/* Portrait Phone */
@media only screen and (max-width:320px) {
    
}