/* cmsms stylesheet: 36_Grad_Core modified: Samstag, 5. Februar 2022 16:05:16 */

/* =====================================
BASE STYLES
===================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { 
    display: block
}
/* taken from HTML5 Boilerplate http://h5bp.com */
html { 
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%
}
audio, canvas, video { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1
}
audio:not([controls]) { 
    display: none
}
[hidden] { 
    display: none
}
/* text selection */
.content-wrapper ::-moz-selection { 
    background: #7aa04b;
    background: rgba(122,160,75,0.75);
    color: #fff;
    text-shadow: none
}
.content-wrapper ::selection { 
    background: #7aa04b;
    background: rgba(122,160,75,0.75);
    color: #fff;
    text-shadow: none
}
/* Consistent box sizing and appearance */
input[type="checkbox"], input[type="radio"] { 
    box-sizing: border-box; 
    padding: 0; 
    *width: 13px; 
    *height: 13px
}
/* Remove inner padding and border in FF3/4 */
button::-moz-focus-inner, input::-moz-focus-inner { 
    border: 0; 
    padding: 0
}
/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea { 
    overflow: auto; 
    vertical-align: top; 
    resize: vertical
}
ul, ol { 
    margin: 1em 0; 
    padding: 0 0 0 40px
}
dd { 
    margin: 0 0 0 40px
}
nav ul, nav ol { 
    list-style: none; 
    list-style-image: none; 
    margin: 0; 
    padding: 0
}
/* Redeclare monospace font family */
q { 
    quotes: none
}
q:before, q:after { 
    content: ""; 
    content: none
}
small { 
    font-size: 85%
}
/* Hide from both screenreaders and browsers */
.hidden { 
    display: none !important; 
    visibility: hidden
}
/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { 
    border: 0; 
    clip: rect(0,0,0,0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible { 
    visibility: hidden
}
/* correct text resizing */
html { 
    font-size: 100%; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100% 
}
body { 
    margin: 0; 
    font-size: 1em;
   /* -webkit-font-smoothing: antialiased */
}
/* =====================================
12 COLUMN GRID
===================================== */

/* ================================
Desktop
================================ */

/* the wraping container */
.container {
    width: 100%;
    min-width: 800px;
    max-width: 1200px
}
/* align the site */
.leftaligned {
    margin: 0 auto 0  0
}
.rightaligned {
    margin: 0 0 0 auto
}
.centered {
    margin: 0 auto
}
/* Global Grid layout */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    display:inline;
    float: left;
    position: relative;
    margin-left: .96%;
    margin-right: .96%   
}

/* alpha and omega classes remove margins, aplha = no margin left, omega = no margin right */
.alpha { margin-left: 0 }
.omega { margin-right: 0 }

/* Grid sizes up to 12 columns */
.container .grid_1 { width:6.333% }
.container .grid_2 { width:14.667% }
.container .grid_3 { width:23.0% }
.container .grid_4 { width:31.333% }
.container .grid_5 { width:39.667% }
.container .grid_6 { width:48.0% }
.container .grid_7 { width:56.333% }
.container .grid_8 { width:64.667% }
.container .grid_9 { width:73.0% }
.container .grid_10 { width:81.333% }
.container .grid_11 { width:89.667% }
.container .grid_12 { width:98.0% }
.container .grid_12 { width:100% }

/* Prefix to add extra space left */
.container .prefix_1 { padding-left:8.333% }
.container .prefix_2 { padding-left:16.667% }
.container .prefix_3 { padding-left:25.0% }
.container .prefix_4 { padding-left:33.333% }
.container .prefix_5 { padding-left:41.667% }
.container .prefix_6 { padding-left:50.0% }
.container .prefix_7 { padding-left:58.333% }
.container .prefix_8 { padding-left:66.667% }
.container .prefix_9 { padding-left:75.0% }
.container .prefix_10 { padding-left:83.333% }
.container .prefix_11 { padding-left:91.667% }

/* Suffix to add extra space right */
.container .suffix_1 { padding-right:8.333% }
.container .suffix_2 { padding-right:16.667% }
.container .suffix_3 { padding-right:25.0% }
.container .suffix_4 { padding-right:33.333% }
.container .suffix_5 { padding-right:41.667% }
.container .suffix_6 { padding-right:50.0% }
.container .suffix_7 { padding-right:58.333% }
.container .suffix_8 { padding-right:66.667% }
.container .suffix_9 { padding-right:75.0% }
.container .suffix_10 { padding-right:83.333% }
.container .suffix_11 { padding-right:91.667% }

/* Push columns to right */
.container .push_1 { left:8.333% }
.container .push_2 { left:16.667% }
.container .push_3 { left:25.0% }
.container .push_4 { left:33.333% }
.container .push_5 { left:41.667% }
.container .push_6 { left:50.0% }
.container .push_7 { left:58.333% }
.container .push_8 { left:66.667% }
.container .push_9 { left:75.0% }
.container .push_10 { left:83.333% }
.container .push_11 { left:91.667% }

/* Pull columns to left */
.container .pull_1 { left:-8.333% }
.container .pull_2 { left:-16.667% }
.container .pull_3 { left:-25.0% }
.container .pull_4 { left:-33.333% }
.container .pull_5 { left:-41.667% }
.container .pull_6 { left:-50.0% }
.container .pull_7 { left:-58.333% }
.container .pull_8 { left:-66.667% }
.container .pull_9 { left:-75.0% }
.container .pull_10 { left:-83.333% }
.container .pull_11 { left:-91.667% }

/* =====================================
Tablet (Portrait) 
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
    .container {
        width: 92%;
        min-width: 768px;
        max-width: 1024px
    } 
}

/* =====================================
Smartphones (Portait) 
===================================== */
@media only screen and (max-width: 320px) {
    .container {
        width: 92%;
        min-width: 300px;
        max-width: 320px
    } 
    .container .grid_1, 
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12 { 
        width: 100%;  
        margin: 0;
        float: none
    }
}

/* =====================================
Smartphones (Landscape) 
===================================== */
@media only screen and (min-width: 321px) and (max-width: 767px) {
    .container {
        width: 92%;
        min-width: 321px;
        max-width: 767px
    } 
    .container .grid_1, 
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12 { 
        width: 100%;
        margin: 0;
        display: block;
        float: none
    }    
}

/* =====================================
Smartphones (Portrait & Landscape) 
===================================== */
@media only screen and (min-width: 300px) and (max-width: 767px) {
    .container .prefix_1,
    .container .prefix_2,
    .container .prefix_3,
    .container .prefix_4,
    .container .prefix_5,
    .container .prefix_6,
    .container .prefix_7,
    .container .prefix_8,
    .container .prefix_9,
    .container .prefix_10,
    .container .prefix_11,
    .container .suffix_1,
    .container .suffix_2,
    .container .suffix_3,
    .container .suffix_4,
    .container .suffix_5,
    .container .suffix_6,
    .container .suffix_7,
    .container .suffix_8,
    .container .suffix_9,
    .container .suffix_10,
    .container .suffix_11 { 
        padding-right: 0;
        padding-left: 0
    } 
    .container .push_1,
    .container .push_2,
    .container .push_3,
    .container .push_4,
    .container .push_5,
    .container .push_6,
    .container .push_7,
    .container .push_8,
    .container .push_9,
    .container .push_10,
    .container .push_11,
    .container .pull_1,
    .container .pull_2,
    .container .pull_3,
    .container .pull_4,
    .container .pull_5,
    .container .pull_6,
    .container .pull_7,
    .container .pull_8,
    .container .pull_9,
    .container .pull_10,
    .container .pull_11 {
        left: auto;
        right: auto
    }
}

/* =====================================
iPhone 4, iPad2, Retina stuff ?
===================================== */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

/* if you buy me one i might test and add something here */

}

/* =====================================
CLEARING FLOATS
===================================== */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}

.cf:before, 
.cf:after,
.row:before,
.row:after{ 
    content: ""; 
    display: table
}
.cf:after,
.row:after{ 
    clear: both
}
.cf,
.row { 
    *zoom: 1
}