/*
Theme Name: web-looks
Theme URI: https://www.web-looks.de
Author: web-looks
Author URI: https://www.web-looks.de
Description: 
Version: 2.2
*/

@charset "UTF-8";


/*========================================================================================================================== */
/* CSS RESET 1.33 (22.05.2015) ============================================================================================= */
/*========================================================================================================================== */
*{margin:0;padding:0;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video,button,input,select,textarea{border:none;outline:none;font-size:100%;font:inherit;vertical-align:baseline;background:none;text-decoration:none;word-spacing:normal;list-style:none;list-style-image:none;margin:0;padding:0;}html{color:#000;background:#FFF;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{line-height:1em;-webkit-tap-highlight-color:rgba(255,0,0,0.62);}:focus,:hover,:active{outline:none;}ins{text-decoration:none;}del{text-decoration:line-through;}b,strong,optgroup{font-weight:700;}i{font-style:italic;}table{border-collapse:collapse;border-spacing:0;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}div,span,p,a,input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible;}label,select,button,html input[type=button],input[type=reset],input[type=submit],input[type=radio],input[type=checkbox]{cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}.ie7 img,.ie8 img{-ms-interpolation-mode:bicubic;}audio,canvas,video{display:inline;zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}textarea{resize:vertical;overflow-y:auto;}pre{white-space:pre-wrap;word-wrap:break-word;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}::selection,::-moz-selection{background:#39f;text-shadow:none;color:#FFF;}html,button,input,select,textarea{font-family:sans-serif;}


/*========================================================================================================================== */
/* FONTS =================================================================================================================== */
/*========================================================================================================================== */
/* UBUNTU 300 */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Light.eot');
 	src: local('Ubuntu Light'), local('Ubuntu-Light'), 
         url('fonts/Ubuntu-Light.woff') format('woff'),
         url('fonts/Ubuntu-Light.ttf') format('truetype'),
         url('fonts/Ubuntu-Light.svg') format('svg');		 
    font-weight: 300;
    font-style: normal;
}

/* UBUNTU 300 ITALIC */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-LightItalic.eot');
 	src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), 
         url('fonts/Ubuntu-LightItalic.woff') format('woff'),
         url('fonts/Ubuntu-LightItalic.ttf') format('truetype'),
         url('fonts/Ubuntu-LightItalic.svg') format('svg');		 
    font-weight: 300;
    font-style: italic;
}

/* UBUNTU 400 */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.eot');
 	src: local('Ubuntu'), local('Ubuntu'), 
         url('fonts/Ubuntu-Regular.woff') format('woff'),
         url('fonts/Ubuntu-Regular.ttf') format('truetype'),
         url('fonts/Ubuntu-Regular.svg') format('svg');		 
    font-weight: 400;
    font-style: normal;
}

/* UBUNTU 400 ITALIC */
/*
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Italic.eot');
 	src: local('Ubuntu Italic'), local('Ubuntu-Italic'), 
         url('fonts/Ubuntu-Italic.woff') format('woff'),
         url('fonts/Ubuntu-Italic.ttf') format('truetype'),
         url('fonts/Ubuntu-Italic.svg') format('svg');		 
    font-weight: 400;
    font-style: italic;
}
*/

/* UBUNTU 700 */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Bold.eot');
 	src: local('Ubuntu Bold'), local('Ubuntu-Bold'), 
         url('fonts/Ubuntu-Bold.woff') format('woff'),
         url('fonts/Ubuntu-Bold.ttf') format('truetype'),
         url('fonts/Ubuntu-Bold.svg') format('svg');		 
    font-weight: 700;
    font-style: normal;
}

/* UBUNTU 700 ITALIC */
/*
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-BoldItalic.eot');
 	src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), 
         url('fonts/Ubuntu-BoldItalic.woff') format('woff'),
         url('fonts/Ubuntu-BoldItalic.ttf') format('truetype'),
         url('fonts/Ubuntu-BoldItalic.svg') format('svg');		 
    font-weight: 700;
    font-style: italic;
}
*/


/*========================================================================================================================== */
/* BASIC STYLES ============================================================================================================ */
/*========================================================================================================================== */
html, body { font-size: 16px; }
html, body, button, input, select, textarea { color: #333; font-family: Ubuntu, Roboto, Arial, sans-serif; /* font-family` inconsistency between `textarea` and other form elements. */ }
body { font-size: 1em; /* 16px */ font-weight: 300; line-height: 1.5em; }


/*-- TABLES ------------------------------------------------*/
.table { width: 100%; max-width: 100%; margin-bottom: 1.1em; }	
.table td, .table th { padding: 0.55em; }
.table thead th, .table thead td { border-bottom: 2px solid #DDD; background: #EEE; vertical-align: bottom; font-weight: bold; text-align: left; }
.table tbody td, .table tfoot td { border-top: 1px solid #DDD; vertical-align: top; }

.table-striped tbody tr:nth-of-type(2n+1) { background: #F9F9F9; }

.table-bordered { border: 1px solid #DDD; }
.table-bordered th, .table-bordered td { border-right: 1px solid #DDD; }

.table-hover tbody tr:hover { background: #F5F5F5; }

.table-condensed td, .table-condensed th { padding: 0.275em; }

.table-responsive { min-height: 0.01%; overflow-x: auto; } /* div wrapping the table */

@media only screen and (max-width: 991px) {
	.table-responsive { border: 1px solid #DDD; margin-bottom: 1.1em; overflow-y: hidden; width: 100%; box-sizing: border-box; }
	.table-responsive > .table { margin-bottom: 0; }
	.table-responsive > .table { white-space: nowrap; }
	.table-responsive > .table-bordered { border: 0 none; }
	.table-responsive > .table-bordered th:last-child, .table-responsive > .table-bordered td:last-child { border-right: none; }
}


/*-- LISTINGS ------------------------------------------------*/
ul, ol { margin: 1.1em 0 0 2.2em; padding: 0; }
ul ul, ol ol, ol ul { margin-top: none; }
ul li, ol li { margin: 0.55em 0; }
ul li { list-style: outside disc; }
ul li li { list-style: outside circle; }
ol li { list-style: outside decimal; }
ul.unstyled li, ol.unstyled li { list-style: none outside; }

    
/*-- TEXT ------------------------------------------------*/
a { color: #2f77a0; text-decoration: none; transition: color 0.3s ease; }
a:hover, a.hover { color: #165D87; text-decoration: underline; }
a.inactive { cursor: default; }
hr, .hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCC; width: auto; margin: 1em 0; }
p { padding: 0; margin: 0 0 1.13636em 0; }

h1, h2, h3, h4, h5, h6 { word-wrap: break-word; }
h1, h2, h3 { margin: 0 0 20px 0; font-weight: 400; }
h4, h5, h6 { font-size: 1.1em; /* 22px */ margin: 0 0 20px 0; }
h1 { font-size: 2.0em; /* 40px */ line-height: 1.4em; }
h2 { font-size: 1.6em; /* 32px */ line-height: 1.3em; }
h3 { font-size: 1.4em; /* 28px */ line-height: 1.3em; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: none; } /* no underline in titles */

small, .small { font-size: 85%; }
.mark, mark { background-color: #fcf8e3; padding: 0.2em; }

::selection { background: #2f77a0; color: #FFF; text-shadow: none; }
::-moz-selection { background: #2f77a0; color: #FFF; text-shadow: none; }
body { -webkit-tap-highlight-color: rgba(255,0,0, 0.62); } /* TAP HIGHLIGHT COLOR FOR IPHONE */

.ellipsis { white-space: nowrap; overflow: hidden; 
	text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+ */
	-o-text-overflow: ellipsis;  /* for Opera 9 & 10 */
}


/*-- INPUT FIELDS ------------------------------------------------*/
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { 
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border: 1px solid #b4b2ad; padding: 10px 15px; box-sizing: border-box; border-radius: 3px; margin-bottom: 1.1em; line-height: 1.4em; background: #FFF; width: 100%; }
select:hover, textarea:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="date"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, input[type="number"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="color"]:hover { 
border-color: #62A9D3 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #62A9D3; }
select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus { 
border-color: #62A9D3 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #62A9D3; }
input[type=radio], input[type="checkbox"] { margin: 0px 8px 0px 8px; background: none; border: none; }


/*-- IMAGES ------------------------------------------------*/
img { max-width: 100%; /*responsive images */ height: auto; width: auto; /* to resize wp images correctly */ }
img.frame { border: 10px solid #EEE; box-sizing: border-box; }
img.circle { border-radius: 50%; }
img.rounded { border-radius: 5px; }


/*-- BLOCKQUOTES ------------------------------------------------*/
blockquote { border-left: 5px solid #DDD; font-size: 1.4em; /* 28px */ margin: 20px 0; padding: 20px; }
blockquote.reverse { border-left: 0 none; border-right: 5px solid #DDD; padding-left: 0; padding-right: 20px; text-align: right; }
blockquote .small, blockquote footer, blockquote small { color: #777; display: block; font-size: 80%; line-height: normal; }
blockquote .small::before, blockquote footer::before, blockquote small::before { content: "— "; }
blockquote p:last-child { margin-bottom: 0; }


/*-- CALLOUT ------------------------------------------------*/
.callout { border: 1px solid #DDD; border-left: 5px solid #DDD; margin: 1.1em 0; padding: 1.1em !important; }
.callout p:last-child { margin-bottom: 0; }


/*-- CODE ------------------------------------------------*/
code { display: inline-block; margin: 0; padding: 5px; background: #EEE; color: #777; border: 1px solid #DDD; border-radius: 2px; font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 85%; word-break: break-word; line-height: 1; }
code.code-block { padding: 20px; }


/*========================================================================================================================== */
/* HELPER CLASSES ========================================================================================================== */
/*========================================================================================================================== */
/* IMAGE REPLACEMENT */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }

/* show element */
.show { display: block !important; }

/* HIDE FROM SCREENREADERS AND BROWSERS */
.hidden { display: none !important; }

/* HIDE VISUALLY BUT MAINTAIN LAYOUT */
.invisible { visibility: hidden; }

/* ALIGNEMENT */
.left, .alignleft { float: left !important; width: auto; }
.right, .alignright { float: right !important; width: auto; }
.center, .aligncenter { display: block;	margin-left: auto; margin-right: auto; float: none !important; }

/* TEXT */
.t-left { text-align: left !important; }
.t-right { text-align: right !important; }
.t-center { text-align: center !important; }
.t-justify { text-align: justify !important; }
.t-nowrap { white-space: nowrap; }
.t-break { word-wrap: break-word; }
.t-low { text-transform: lowercase; }
.t-up { text-transform: uppercase; }
.t-cap { text-transform: capitalize; }
.t-underline { text-decoration: underline; }
.t-italic { font-style: italic; }

/* FONT-WEIGHT */
.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-7 { font-weight: 700; }

/* POSITIONS */
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }

/* CLEAR FIX */
.clearfix:before, .clearfix:after, .clear:before, .clear:after { content: " "; display: table; }
.clearfix:after, .clear:after { clear: both; }
.clearfix, .clear { *zoom: 1; clear: both; float: none; width: 100%; }

/* screenreaders only */
.sr-only { border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }


/*========================================================================================================================== */
/* BUTTONS ================================================================================================================= */
/*========================================================================================================================== */
.button, a.post-edit-link { background: #4990BA; border-radius: 2px; border-bottom: 3px solid #2f77a0; display: inline-block; margin: 0.55em 0; cursor: pointer; 
padding: 0.9em 1em 0.75em; /* 18px 20px 15px */ color: #FFF; line-height: 1em; transition: all 0.3s ease; overflow: hidden; white-space: nowrap; text-transform: uppercase;
font-weight: bold; position: relative; box-sizing: border-box; }
.button:hover, a.post-edit-link:hover { color: #FFF; background: #2f77a0; text-decoration: none; }
.button:active, a.post-edit-link:active { /* top: 1px; */ }
.button:focus, a.post-edit-link:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #62A9D3; }

/* icons */
.button span { margin: 0 0.5em 0 0; }
.button.iconRight span { margin: 0 0 0 0.3em; }

/* white hover buttons */
.button.white { border: 1px solid #FFF; background: none; }
.button.white:hover { background: #FFF; color: #333; } 

/* inverse text buttons */
.inverse { background: none; border: 1px solid transparent; color: #2f77a0; box-shadow: none; padding: 0.75em 0; /* 15px 0px */ }
.inverse:hover { background: #2f77a0; border: 1px solid #2b7fbc; color: #FFF; padding: 0.75em 1em; /* 15px 20px */ }

/* slide-in icons */
.button.iconSlide span { position: absolute; transition: left 0.3s ease; } 
.button.iconRight.iconSlide span { right: -40px; transition: right 0.3s ease; } 
.button.iconSlide:hover { padding-right: 1.75em; /* 35px */ } 
.button.iconSlide:hover span { right: 0.8em; /* 16px */ } 


/*========================================================================================================================== */
/* GRID - V1.0 12. Apr 2015 ================================================================================================ */
/*========================================================================================================================== */
/* default columns */
.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { float: left; width: 100%; box-sizing: border-box; padding-left: 0.55em; padding-right: 0.55em; } 

/* rows */
.row, .grid { margin: 0 -0.55em; }
.row:after, .grid:after { content: " "; display: table; clear: both; }

/* tabulator (fixed width) */
.t-10, .t-20, .t-30, .t-35, .t-40, .t-45, .t-50, .t-55, .t-60, .t-70, .t-80, .t-90, .t-100 { display: inline-block; box-sizing: border-box; }
.t-10, .w-10 { width: 10%; }
.t-20, .w-20 { width: 20%; }
.t-30, .w-30 { width: 30%; }
.t-35, .w-35 { width: 35%; }
.t-40, .w-40 { width: 40%; }
.t-45, .w-45 { width: 45%; }
.t-50, .w-50 { width: 50%; }
.t-55, .w-55 { width: 50%; }
.t-60, .w-60 { width: 60%; }
.t-70, .w-70 { width: 70%; }
.t-80, .w-80 { width: 80%; }
.t-90, .w-90 { width: 90%; }
.t-100, .w-100 { width: 100%; }

/* padding */
.p-0 { padding: 0 !important; }
.px-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.p-1 { padding: 0.55em; }
.px-1 { padding-top: 0.55em; padding-bottom: 0.55em; }
.py-1 { padding-left: 0.55em; padding-right: 0.55em; }
.pt-1 { padding-top: 0.55em; }
.pb-1 { padding-bottom: 0.55em; }
.pl-1 { padding-left: 0.55em; }
.pr-1 { padding-right: 0.55em; }

.p-2 { padding: 1.1em; }
.px-2 { padding-top: 1.1em; padding-bottom: 1.1em; }
.py-2 { padding-left: 1.1em; padding-right: 1.1em; }
.pt-2 { padding-top: 1.1em; }
.pb-2 { padding-bottom: 1.1em; }
.pl-2 { padding-left: 1.1em; }
.pr-2 { padding-right: 1.1em; }

.p-3 { padding: 1.65em; }
.px-3 { padding-top: 1.65em; padding-bottom: 1.65em; }
.py-3 { padding-left: 1.65em; padding-right: 1.65em; }
.pt-3 { padding-top: 1.65em; }
.pb-3 { padding-bottom: 1.65em; }
.pl-3 { padding-left: 1.65em; }
.pr-3 { padding-right: 1.65em; }

.p-4 { padding: 2.2em; }
.px-4 { padding-top: 2.2em; padding-bottom: 2.2em; }
.py-4 { padding-left: 2.2em; padding-right: 2.2em; }
.pt-4 { padding-top: 2.2em; }
.pb-4 { padding-bottom: 2.2em; }
.pl-4 { padding-left: 2.2em; }
.pr-4 { padding-right: 2.2em; }

.p-6 { padding: 3.3em; }
.px-6 { padding-top: 3.3em; padding-bottom: 3.3em; }
.py-6 { padding-left: 3.3em; padding-right: 3.3em; }
.pt-6 { padding-top: 3.3em; }
.pb-6 { padding-bottom: 3.3em; }
.pl-6 { padding-left: 3.3em; }
.pr-6 { padding-right: 3.3em; }

.p-8 { padding: 4.4em; }
.px-8 { padding-top: 4.4em; padding-bottom: 4.4em; }
.py-8 { padding-left: 4.4em; padding-right: 4.4em; }
.pt-8 { padding-top: 4.4em; }
.pb-8 { padding-bottom: 4.4em; }
.pl-8 { padding-left: 4.4em; }
.pr-8 { padding-right: 4.4em; }


/* margin */
.m-0 { margin: 0 !important; }
.mx-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.m-1 { margin: 0.55em; }
.mx-1 { margin-top: 0.55em; margin-bottom: 0.55em; }
.my-1 { margin-left: 0.55em; margin-right: 0.55em; }
.mt-1 { margin-top: 0.55em; }
.mb-1 { margin-bottom: 0.55em; }
.ml-1 { margin-left: 0.55em; }
.mr-1 { margin-right: 0.55em; }

.m-2 { margin: 1.1em; }
.mx-2 { margin-top: 1.1em; margin-bottom: 1.1em; }
.my-2 { margin-left: 1.1em; margin-right: 1.1em; }
.mt-2 { margin-top: 1.1em; }
.mb-2 { margin-bottom: 1.1em; }
.ml-2 { margin-left: 1.1em; }
.mr-2 { margin-right: 1.1em; }

.m-3 { margin: 1.65em; }
.mx-3 { margin-top: 1.65em; margin-bottom: 1.65em; }
.my-3 { margin-left: 1.65em; margin-right: 1.65em; }
.mt-3 { margin-top: 1.65em; }
.mb-3 { margin-bottom: 1.65em; }
.ml-3 { margin-left: 1.65em; }
.mr-3 { margin-right: 1.65em; }

.m-4 { margin: 2.2em; }
.mx-4 { margin-top: 2.2em; margin-bottom: 2.2em; }
.my-4 { margin-left: 2.2em; margin-right: 2.2em; }
.mt-4 { margin-top: 2.2em; }
.mb-4 { margin-bottom: 2.2em; }
.ml-4 { margin-left: 2.2em; }
.mr-4 { margin-right: 2.2em; }

.m-6 { margin: 3.3em; }
.mx-6 { margin-top: 3.3em; margin-bottom: 3.3em; }
.my-6 { margin-left: 3.3em; margin-right: 3.3em; }
.mt-6 { margin-top: 3.3em; }
.mb-6 { margin-bottom: 3.3em; }
.ml-6 { margin-left: 3.3em; }
.mr-6 { margin-right: 3.3em; }

.m-8 { margin: 4.4em; }
.mx-8 { margin-top: 4.4em; margin-bottom: 4.4em; }
.my-8 { margin-left: 4.4em; margin-right: 4.4em; }
.mt-8 { margin-top: 4.4em; }
.mb-8 { margin-bottom: 4.4em; }
.ml-8 { margin-left: 4.4em; }
.mr-8 { margin-right: 4.4em; }


/* border */
.b-1 { border: 1px solid #DDD; }
.b-2 { border: 2px solid #DDD; }
.b-5 { border: 5px solid #DDD; }
.b-10 { border: 10px solid #DDD; }

.bb-0 { border-bottom: none !important; }
.bb-1 { border-bottom: 1px solid #DDD; }
.bb-2 { border-bottom: 2px solid #DDD; }
.bb-5 { border-bottom: 5px solid #DDD; }
.bb-10 { border-bottom: 10px solid #DDD; }

.bt-0 { border-top: none !important; }
.bt-1 { border-top: 1px solid #DDD; }
.bt-2 { border-top: 2px solid #DDD; }
.bt-5 { border-top: 5px solid #DDD; }
.bt-10 { border-top: 10px solid #DDD; }


/* border color */
.b-default { border-color: #2f77a0; }
.b-grey { border-color: #EEE; }


/* text color */
.text-default { color: #2f77a0 !important; }
.text-dark { color: #333 !important; }
.text-red { color: #e74c3c !important; }
.text-muted { color: #777 !important; }


/* backgrounds */
.bg-default { background: #2f77a0; }
.bg-grey { background: #EEE; }
.bg-sand { background: #fbf391; }
.bg-red { background: #e74c3c; }
.bg-orange { background: #e67e22; }
.bg-green { background: #27ae60; }
.bg-blue { background: #2e8ece; }
.bg-dark { background: #34495e; }
.bg-purple { background: #8e44ad; }
.bg-yellow { background: #f1c40f; }
.bg-grey-dotted { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHUlEQVQYV2NkYGAwBuKzQIwXMBJSAJMfVUidcAQAnUQBC6jEGBUAAAAASUVORK5CYII=") repeat scroll left top #f9f9fc; }
.bg-grey-diagonal { 
background: #F4F4F4; 
background: -moz-linear-gradient(38deg, #EEE, #EEE 50%, #F4F4F4 50%, #F4F4F4 100%); 
background: -webkit-linear-gradient(38deg, #EEE, #EEE 50%, #F4F4F4 50%, #F4F4F4 100%); 
background: -o-linear-gradient(38deg, #EEE, #EEE 50%, #F4F4F4 50%, #F4F4F4 100%); 
background: linear-gradient(38deg, #EEE, #EEE 50%, #F4F4F4 50%, #F4F4F4 100%); }
.bg-clouds { background: #ecf0f1; }

.bg-8-default { background: rgba(47, 119, 160, 0.8); /* #2f77a0 */ }
.bg-8-orange { background: rgba(230, 126, 34, 0.8); /* #e67e22 */ }
.bg-8-red { background: rgba(231, 76, 60, 0.8); /* #e74c3c */ } 


/* visibility */
.vis-xl-b, .vis-xl-i, .vis-xl-ib, 
.vis-lg-b, .vis-lg-i, .vis-lg-ib, 
.vis-md-b, .vis-md-i, .vis-md-ib, 
.vis-sm-b, .vis-sm-i, .vis-sm-ib, 
.vis-xs-b, .vis-xs-i, .vis-xs-ib {
	display: none !important;
}


/* default columns */
.c-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 
.grid .c-1, .grid .c-2, .grid .c-3, .grid .c-4, .grid .c-5, .grid .c-6, .grid .c-7, .grid .c-8, .grid .c-9, .grid .c-10, .grid .c-11, .grid .c-12 { padding-top: 0.55em; padding-bottom: 0.55em; }  


/* xs - extra small */ 
@media only screen and (max-width: 479px) {

	/* default columns */
	.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { padding: 0.55em; }  
	.c-1:first-child, .c-2:first-child, .c-3:first-child, .c-4:first-child, .c-5:first-child, .c-6:first-child, .c-7:first-child, .c-8:first-child, .c-9:first-child, .c-10:first-child, .c-11:first-child, .c-12:first-child { padding-top: 0; }
	.c-1:last-child, .c-2:last-child, .c-3:last-child, .c-4:last-child, .c-5:last-child, .c-6:last-child, .c-7:last-child, .c-8:last-child, .c-9:last-child, .c-10:last-child, .c-11:last-child, .c-12:last-child { padding-bottom: 0; }
	
	/* extra small columns */
	.xs-1, .xs-2, .xs-3, .xs-4, .xs-5, .xs-6, .xs-7, .xs-8, .xs-9, .xs-10, .xs-11, .xs-12 { float: left; clear: none; } 
	.xs-1 { width: 8.33333%; }	
	.xs-2 { width: 16.6667%; }
	.xs-3 { width: 25%; }
	.xs-4 { width: 33.33333%; }
	.xs-5 { width: 41.66667%; }
	.xs-6 { width: 50%; }
	.xs-7 { width: 58.33333%; }
	.xs-8 { width: 66.66667%; }
	.xs-9 { width: 75%; }
	.xs-10 { width: 83.33333%; }
	.xs-11 { width: 91.66667%; }
	.xs-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 

	/* visibility */
	.vis-xs-b { display: block !important; }
	.vis-xs-i { display: inline !important; }
	.vis-xs-ib { display: inline-block !important; }
	.hid-xs { display: none !important; }

	/* overflow */
	.owl-xs-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-xs-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-xs-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-xs-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-xs-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-xs-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }
	
	/* images */
	.xs-12 > img { max-width: 80%; }
} 

/* sm - small columns */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {

	/* default columns */
	.c-1, .c-2, .c-3, .c-4, .c-5, .c-6 { width: 50%; }
	.c-7, .c-8, .c-9, .c-10, .c-11, .c-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 
	/* .c-11 ~ .c-1, .c-10 ~ .c-2, .c-9 ~ .c-3, .c-8 ~ .c-4, .c-7 ~ .c-5 { width: 100%; float: none; clear: both; padding: 0.55em; } */

	/* small columns */
	.sm-1, .sm-2, .sm-3, .sm-4, .sm-5, .sm-6, .sm-7, .sm-8, .sm-9, .sm-10, .sm-11, .sm-12 { float: left; clear: none; } 
	.sm-1 { width: 8.33333%; }	
	.sm-2 { width: 16.6667%; }
	.sm-3 { width: 25%; }
	.sm-4 { width: 33.33333%; }
	.sm-5 { width: 41.66667%; }
	.sm-6 { width: 50%; }
	.sm-7 { width: 58.33333%; }
	.sm-8 { width: 66.66667%; }
	.sm-9 { width: 75%; }
	.sm-10 { width: 83.33333%; }
	.sm-11 { width: 91.66667%; }
	.sm-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 

	/* visibility */
	.vis-sm-b { display: block !important; }
	.vis-sm-i { display: inline !important; }
	.vis-sm-ib { display: inline-block !important; }
	.hid-sm { display: none !important; }

	/* overflow */
	.owl-sm-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-sm-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-sm-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-sm-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-sm-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-sm-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }

	/* images */
	.sm-12 > img { max-width: 80%; }
}

/* md - medium columns */ 
@media only screen and (min-width: 768px) {

	/* default columns */
	.c-1 { width: 8.33333%; }	
	.c-2 { width: 16.6667%; }
	.c-3 { width: 25%; }
	.c-4 { width: 33.33333%; }
	.c-5 { width: 41.66667%; }
	.c-6 { width: 50%; }
	.c-7 { width: 58.33333%; }
	.c-8 { width: 66.66667%; }
	.c-9 { width: 75%; }
	.c-10 { width: 83.33333%; }
	.c-11 { width: 91.66667%; }
	.c-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 

	/* overflow */
	.owl-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

	/* medium columns */
	.md-1, .md-2, .md-3, .md-4, .md-5, .md-6, .md-7, .md-8, .md-9, .md-10, .md-11, .md-12 { float: left; clear: none; } 
	.md-1 { width: 8.33333%; }	
	.md-2 { width: 16.6667%; }
	.md-3 { width: 25%; }
	.md-4 { width: 33.33333%; }
	.md-5 { width: 41.66667%; }
	.md-6 { width: 50%; }
	.md-7 { width: 58.33333%; }
	.md-8 { width: 66.66667%; }
	.md-9 { width: 75%; }
	.md-10 { width: 83.33333%; }
	.md-11 { width: 91.66667%; }
	.md-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 
	
	/* visibility */
	.vis-md-b { display: block !important; }
	.vis-md-i { display: inline !important; }
	.vis-md-ib { display: inline-block !important; }
	.hid-md { display: none !important; }

	/* overflow */
	.owl-md-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-md-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-md-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-md-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-md-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-md-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }
}

/* lg - large columns */ 
@media only screen and (min-width: 992px) and (max-width: 1199px) {

	/* large columns */
	.lg-1, .lg-2, .lg-3, .lg-4, .lg-5, .lg-6, .lg-7, .lg-8, .lg-9, .lg-10, .lg-11, .lg-12 { float: left; clear: none; } 
	.lg-1 { width: 8.33333%; }	
	.lg-2 { width: 16.6667%; }
	.lg-3 { width: 25%; }
	.lg-4 { width: 33.33333%; }
	.lg-5 { width: 41.66667%; }
	.lg-6 { width: 50%; }
	.lg-7 { width: 58.33333%; }
	.lg-8 { width: 66.66667%; }
	.lg-9 { width: 75%; }
	.lg-10 { width: 83.33333%; }
	.lg-11 { width: 91.66667%; }
	.lg-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 

	/* visibility */
	.vis-lg-b { display: block !important; }
	.vis-lg-i { display: inline !important; }
	.vis-lg-ib { display: inline-block !important; }
	.hid-lg { display: none !important; }

	/* overflow */
	.owl-lg-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-lg-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-lg-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-lg-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-lg-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-lg-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }
}

/* xl - extra large columns */
@media only screen and (min-width: 1200px) { 

	/* extra large columns */
	.xl-1, .xl-2, .xl-3, .xl-4, .xl-5, .xl-6, .xl-7, .xl-8, .xl-9, .xl-10, .xl-11, .xl-12 { float: left; clear: none; } 
	.xl-1 { width: 8.33333%; }	
	.xl-2 { width: 16.6667%; }
	.xl-3 { width: 25%; }
	.xl-4 { width: 33.33333%; }
	.xl-5 { width: 41.66667%; }
	.xl-6 { width: 50%; }
	.xl-7 { width: 58.33333%; }
	.xl-8 { width: 66.66667%; }
	.xl-9 { width: 75%; }
	.xl-10 { width: 83.33333%; }
	.xl-11 { width: 91.66667%; }
	.xl-12 { width: 100%; float: none; clear: both; padding: 0.55em; } 

	/* visibility */
	.vis-xl-b { display: block !important; }
	.vis-xl-i { display: inline !important; }
	.vis-xl-ib { display: inline-block !important; }
	.hid-xl { display: none !important; }

	/* overflow */
	.owl-xl-25 { width: 125%; max-width: 125%; position: relative; left: -25%; }
	.owr-xl-25 { width: 125%; max-width: 125%; position: absolute; left: 0; }
	.owl-xl-50 { width: 150%; max-width: 150%; position: relative; left: -50%; }
	.owr-xl-50 { width: 150%; max-width: 150%; position: absolute; left: 0; }
	.owl-xl-100 { width: 200%; max-width: 200%; position: relative; left: -100%; }
	.owr-xl-100 { width: 200%; max-width: 200%; position: absolute; left: 0; }
}


/*========================================================================================================================== */
/* ANIMATIONS ============================================================================================================== */
/*========================================================================================================================== */
.fade-in { opacity: 0; transition: opacity 0.4s ease-out; }
.fade-in.in, .in .fade-in, .no-js .fade-in { opacity: 1; }

.scale-in { opacity: 0; transform: scale(0.8); transition: transform 0.6s cubic-bezier(0.17, 0.89, 0.67, 1.57), opacity 0.6s ease-out; }
.scale-in.in, .in .scale-in, .no-js .scale-in { opacity: 1; transform: scale(1); }

.fade-right { opacity: 0; transform: translateX(-30px); transition: transform 0.6s ease-in, opacity 0.8s ease-in; }
.fade-right.in, .in .fade-right, .no-js .fade-right { opacity: 1; transform: translateX(0px); }

.fade-left { opacity: 0; transform: translateX(30px); transition: transform 0.6s ease-in, opacity 0.8s ease-in; }
.fade-left.in, .in .fade-left, .no-js .fade-left { opacity: 1; transform: translateX(0px); }

.fade-up { opacity: 0; transform: translateY(30px); transition: transform 0.5s ease-in, opacity 0.8s ease-in; }
.fade-up.in, .in .fade-up, .no-js .fade-up { opacity: 1; transform: translateY(0px); }

.fade-down { opacity: 0; transform: translateY(-30px); transition: transform 0.5s ease-in, opacity 0.8s ease-in; }
.fade-down.in, .in .fade-down, .no-js .fade-down { opacity: 1; transform: translateY(0px); }

.rotate { transform: rotate(360deg); transition: transform 0.5s ease-in; }
.rotate.in, .in .rotate, .no-js .rotate { transform: rotate(0deg); }

.delay-1 { transition-delay: 1s; }
.delay-2 { transition-delay: 2s; }
.delay-3 { transition-delay: 3s; }
.delay-4 { transition-delay: 4s; }
.delay-5 { transition-delay: 5s; }

/* fix for fade-left (translatex) */
/* html { overflow-x: hidden; }*/

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.pulse {
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-duration: 1s;
    animation-name: pulse;
    animation-timing-function: ease-in-out;
}


/*========================================================================================================================== */
/* PAGE ==================================================================================================================== */
/*========================================================================================================================== */
/*-- WRAPPER ------------------------------------------------*/
#pageWrap { position: relative; padding-top: 77px; }
.wrapper { width: 90%; max-width: 1260px; margin-left: auto; margin-right: auto; }
.wrapper:after { content: " "; display: table; clear: both; }
.wrapper.fix { box-sizing: border-box; }


/*-- HEADER ------------------------------------------------*/
header { width: 100%; top: 0; height: auto; line-height: 65px; background: #FFF; border-bottom: 2px solid #DDD; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.33); border-top: 10px solid #2f77a0; z-index: 99; transition: height 0.3s ease, opacity 0.3s ease 0s; position: absolute; }
.logo { float: left; width: 175px; height: 100%; margin: 0; padding: 0; overflow: hidden; transition: all 0.3s ease; }
.logo a { display: inline-block; z-index: 1; position: relative; line-height: normal; vertical-align: middle; }
.logo img { width: 100%; transition: height 0.3s ease-in-out, width 0.3s ease-in-out; }
.logo span { display: none; }


/*-- HEADER NAVIGATION ------------------------------------------------*/
#navMain { display: none; width: 100%; margin: 0 0 5% 0; float: right; }
#navMain ul { margin: 0; padding: 0; }

#navMain ul li { display: block; width: 100%; line-height: 50px; margin: 0; padding: 0; border-bottom: 2px solid #2f77a0; font-weight: 400; position: relative; white-space: nowrap; }
#navMain ul li a { display: block; line-height: inherit; padding: 0 10px; color: #333; transition: all 0.3s ease; }
#navMain ul li a:hover { text-decoration: none; }
#navMain li:hover > a, #navMain li.current > a, #navMain li.open > a { color: #FFF; background: #2f77a0; }

#navMain .parent a > span { position: absolute; right: 0; text-align: center; width: 10%; z-index: 1; border-left: 1px solid #FFF; cursor: pointer; }
#navMain .parent a > span:hover { background: #34495e; }

#navMain ul li ul { display: none; overflow: hidden; background: #FFF; border-top: 2px solid #2f77a0; }
#navMain ul li li { border-bottom: 1px solid #DDD; }
#navMain ul li li a { color: #666; }
#navMain ul li li:hover > a { background: #F4F4F4; color: #333; }

#toggleNavMain { width: 50px; height: 50px; position: absolute; right: 5%; top: 0; text-align: center; font-size: 2em; cursor: pointer; transition: all 0.3s ease; }
#toggleNavMain:hover { color: #2f77a0; }


/*-- FOOTER ------------------------------------------------*/
#footer { margin: 2em auto 0 auto; width: 100%; }
#footer_action { background: #EEE; padding: 2.2em 0; text-align: center; border-top: 1px solid #DDD; }
#footer_action .text  { font-size: 1.7em; /* 34px */ vertical-align: middle; }
#footer_action .title  { font-size: 1.6em; /* 32px */ line-height: 1.3em; margin: 0 0 20px 0; font-weight: 400; }
#footer_action .button_wrap  { margin: 0 0 0 1.1em; vertical-align: middle; display: inline-block; }
#footer_action .button_wrap .button { margin: 0; float: left; }

#footer_info { background: #1F1F1F; border-top: 2px solid #E1E1E1; padding: 2.2em 0 1.1em 0; }
#footer_info .links { border-left: 1px solid #3A3A3A; text-align: right; }
#footer_info .links i { margin: 0 0 0 15px; }
#footer_info ul { margin: 0; }
#footer_info ul li { margin-top: 0; }
#footer_info .contact span { display: inline-block; width: 90px; }

#footer_copyright { background: #1F1F1F; border-top: 1px solid #3A3A3A; padding: 1.1em 0; }

#footer_info, #footer_info a, #footer_copyright, #footer_copyright a { color: #DDD; }
#footer_info a:hover, #footer_copyright a:hover { color: #FFF; }

#footer .back_to_top { display: none; float: right; width: 40px; height: 40px; line-height: 38px; background: #1F1F1F; border-radius: 5px; transition: background-color 0.3s ease; }
#footer .back_to_top a { display: block; height: 100%; width: 100%; text-align: center; } 
#footer .back_to_top:hover { background: #2f77a0; } 
#footer .back_to_top a:hover { text-decoration: none; } 


/*-- SECTIONS ------------------------------------------------*/
section { width: 100%; background: #FFF; padding: 3em 0; overflow: hidden; }
section .section_overlay { background: rgba(0, 0, 0, 0.3); height: 150%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
/* section p:last-child { margin-bottom: 0; } */

/* higlight */
section.highlight { margin: 2em 0; }

/* page title */
section.pageTitle { margin: 0; padding: 0; background: url(/images/banner-default-8x.jpg) no-repeat center; background-size: cover; height: 20em; line-height: 20em; border-bottom: 5px solid #DDD; }
section.pageTitle h1 { display: inline-block; padding: 0.4em; background: /* rgba(47, 119, 160, 0.4) */ rgba(0, 0, 0, 0.5); color: #FFF; 
box-shadow: 0 0 8px #777; max-width: 100%; box-sizing: border-box; }
/* linear-gradient(38deg, #efefef, #efefef 50%, #f4f4f4 50%, #f4f4f4 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) */

/* banner */
section.banner { background: #34495e; position: relative; overflow: hidden; margin: 2em 0; }
section.banner .wrapper { padding: 10% 0; z-index: 2; position: relative; }

/* text banner */
section.banner .slogan { color: #FFF; }
section.banner .slogan h4 { font-size: 3.6em; /* 72px */ font-weight: bold; line-height: 1.5em; }
section.banner .slogan p { display: inline-block; transition: background-color 0.3s ease-in-out; padding: 10px 15px; font-size: 1.3em; /* 26px */ font-weight: 400; }

section.banner .slogan:hover .bg-8-red { background: #e74c3c; }
section.banner .slogan:hover .bg-8-orange { background: #e67e22; }
section.banner .slogan:hover .bg-8-default { background: #2f77a0; }

/* section pointer */
/*
section.pointer { position: relative; overflow: visible; border: 1px solid #DDD; border-width: 1px 0; }
section.pointer_top:before, section.pointer_top_out:before { height: 30px; width: 60px; background: url(images/section-pointer-5px.png) no-repeat 0 bottom; position: absolute; top: -1px; left: 0; right: 0; margin: 0 auto; z-index: 2; content: " "; }
section.pointer_top_out:before { top: -30px; background-position: 0 top; }

section.pointer_bottom:after, section.pointer_bottom_out:after { height: 30px; width: 60px; background: url(images/section-pointer-5px.png) no-repeat 0 bottom; position: absolute; bottom: -1px; left: 0; right: 0; margin: 0 auto; z-index: 2; content: " "; transform: rotate(180deg); }
section.pointer_bottom_out:after { bottom: -30px; background-position: 0 top; }
*/
section.pointer { position: relative; overflow: visible; border: 1px solid #DDD; border-width: 1px 0; }
section.pointer_top:before, section.pointer_top_out:before { height: 50px; width: 50px; background: #FFF; position: absolute; top: -26px; left: 0; right: 0; margin: 0 auto; z-index: 2; content: " "; border: inherit; border-width: 1px 0 0 1px; border-radius: 5px 0 0; transform: rotate(225deg); }
section.pointer_top_out:before { top: -27px; background: inherit; transform: rotate(45deg); }
section.pointer_bottom:after, section.pointer_bottom_out:after { height: 50px; width: 50px; background: #FFF; position: absolute; bottom: -26px; left: 0; right: 0; margin: 0 auto; z-index: 2; content: " "; border: inherit; border-width: 1px 0 0 1px; border-radius: 5px 0 0; transform: rotate(45deg); }
section.pointer_bottom_out:after { bottom: -26px; background: inherit; transform: rotate(225deg); }

/* headline */
.headline { font-size: 2.5em; /* 50px */ line-height: 1.3em; font-weight: 300; }
.subheadline { font-size: 1.7em; /* 34px */ font-weight: 400; line-height: 1.3em; }

/* margin for default pages */
.entry-content h2 { margin: 40px 0px 20px 0px; }
.entry-content h3 { margin: 40px 0px 20px 0px; }


/*-- BROWSER WARNING ------------------------------------------------*/
#browsehappy { background: #AE0000; color: #FFFFFF; padding: 5px 0; margin: 0 0 20px 0; text-align: center; width: 100%; z-index: 99; }
#browsehappy a { color: #FFF; text-decoration: underline; }
#browsehappy_padding { padding: 20px 0px 0px 0px; }


/*-- BACK TO TOP ------------------------------------------------*/
#back_to_top { width: 50px; height: 50px; line-height: 48px; background: #1F1F1F; position: fixed; bottom: 20px; right: 20px; color: #FFF; z-index: 99; border-radius: 5px; transition: background-color 0.3s ease-in-out; }
#back_to_top a { display: block; height: 100%; width: 100%; text-align: center; color: #FFF; } 
#back_to_top:hover { background: #2f77a0; } 
#back_to_top a:hover { text-decoration: none; } 


/*-- CHECK LISTINGS ------------------------------------------------*/
.fa-ul li { list-style: none outside; position: relative; word-wrap: break-word; } 
.fa-ul li [class^="fa-"] { position: absolute; left: -2.2em; top: 0; width: 2.2em; text-align: center; font-size: 1.2em; } 


/*-- IMAGE FIGURES ------------------------------------------------*/
.entry-content figure { margin: 2.2em auto; text-align: center; border: 1px solid #DDD; }
.entry-content .row figure { margin-top: 0; margin-bottom: 0; }
.entry-content figure img { box-sizing: border-box; display: block; margin: 0 auto; padding: 1.1em; }
.entry-content figurecaption { border-top: 1px solid #DDD; background: #EEE; display: block; padding: 0.55em; font-weight: 400; }
.entry-content figurecaption.top { border: none; border-bottom: 1px solid #DDD; }


/*========================================================================================================================== */
/* CONTENT ================================================================================================================= */
/*========================================================================================================================== */
/*-- FRONT PAGE ------------------------------------------------*/
#info_banner { height: 750px; margin: 0; padding: 0; background: url(/images/banner-frontpage-1-8x.jpg) no-repeat fixed center 0; background-size: cover; position: relative; overflow: hidden; z-index: 1; box-sizing: border-box; }
#info_banner hgroup { position: absolute; top: 12%; left: 0; right: 0; text-align: center; z-index: 2; }
#info_banner h1 { font-size: 5em; color: #3498db; line-height: 1em; font-weight: bold; }
#info_banner h1 span, #info_banner h2 { color: #FFF; }
#info_banner .button_wrap { position: absolute; bottom: 10%; margin: 0 auto; left: 0; right: 0; text-align: center; z-index: 2; }
#info_banner .button { display: none; }
#info_banner .section_overlay { background: rgba(0, 0, 0, 0.2); }

#info_banner.style_1 { background-image: url(/images/banner-frontpage-1-8x.jpg); }
#info_banner.style_2 { background-image: url(/images/banner-frontpage-2-8x.jpg); }
#info_banner.style_3 { background-image: url(/images/banner-frontpage-3-8x.jpg); }
#info_banner.style_4 { background-image: url(/images/banner-frontpage-4-8x.jpg); }

/* info boxes */
#info_teaser .teaser { transition: transform 0.3s ease; text-align: center; cursor: pointer; box-sizing: border-box; color: #FFF; }
#info_teaser .teaser:hover { transform: scale(1.05); }
#info_teaser .teaser a { color: inherit; text-decoration: none; }
#info_teaser .teaser .icon { display: block; font-size: 60px; color: inherit; margin: 0 0 20px 0; }
#info_teaser .teaser h3 { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 5px solid rgba(0, 0, 0, 0.1); }
#info_teaser .teaser ul, #info_teaser .teaser ul li:first-child { margin: 0; }

#info_creative { background: url(/images/banner-notebook-headphone-8x.jpg) no-repeat center 0 fixed; background-size: cover; }

/* info services */
#info_services .service { border: 1px solid #CCC; padding: 20px; background: linear-gradient(#EFEFEF 70%, #CCC) #EFEFEF; 
font-weight: bold; text-align: center; box-shadow: 0 0 1px #777; border-radius: 5px; }

/* modules */
#info_mods .mod { background: #FFF; border: 1px solid #DDD; cursor: pointer; position: relative; }
#info_mods .mod h4 { padding: 0; margin: 0; }
#info_mods .mod h4 a { display: block; padding: 0.55em; text-align: center; background: #34495e; color: #FFF; text-decoration: none; }
#info_mods .mod:hover h4 a { background: #2f77a0; }
#info_mods .mod .image { padding: 1.1em; text-align: center; max-height: 300px; overflow: hidden; }
#info_mods .mod .image img { transition: transform 0.3s ease; }
#info_mods .mod .image img:hover { transform: scale(1.05); }
#info_mods .mod .text { padding: 1.1em; height: 210px; overflow: hidden; }
#info_mods .mod .text > p:last-child { margin-bottom: 0; }

/* contact info */
#info_contact .project-planner { background: #FFF; border: 6px solid #DDD; border-radius: 100%; box-sizing: border-box; float: right; height: 290px; width: 290px; 
overflow: hidden; transition: all 300ms ease-in-out; text-align: center; }
#info_contact .project-planner:hover { border-color: #2f77a0; background-color: #1F1F1F; color: #FFF; }
#info_contact .project-planner a { color: inherit; }
#info_contact .project-planner a:hover { text-decoration: none; }
#info_contact .project-planner .title b { color: #2f77a0 !important; }
#info_contact .project-planner .title { display: block; font-size: 1.6em; line-height: 1em; padding-top: 50px; }
#info_contact .project-planner .text { display: block; padding: 15px 10% 0; }

/* footer */
.home #footer { margin-top: 0; }


/*-- CONTACT FORM ------------------------------------------------*/
/* GLOBAL CONTACT FORM SETTINGS */
.wpcf7-form .submit { position: relative; display: inline; }
div.wpcf7 .wpcf7-form .ajax-loader { position: absolute; right: 5%; top: 16%; margin: 0; background: url(images/loader-primary-16px.gif) no-repeat; }
.wpcf7-form .wpcf7-response-output { margin: 0.55em 0; padding: 15px; color: #FFF; }
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok { background: #27ae60; border-color: #27ae60; }
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors { background: #e74c3c; border-color: #e74c3c; }

.wpcf7-form .wpcf7-mail-sent-ng, .wpcf7-form .wpcf7-validation-errors, .wpcf7-form .wpcf7-not-valid { border-color: #e74c3c; }
.wpcf7-form .wpcf7-not-valid-tip { display: none; }
.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 98%; }

.wpcf7-form label { position: relative; }
.wpcf7-form .required { color: #e74c3c; font-size: 20px; line-height: 10px; position: absolute; right: 4%; top: 40%; }
.wpcf7-form textarea { height: 235px; }

/* privacy checkbox */
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance input { width: auto; }
.wpcf7-form .wpcf7-acceptance .required { position: static; }

/* banner */
#kontakt_0 { background: url(/images/banner-kontakt-8x.jpg) no-repeat 0 -250px; background-size: cover; }

#kontakt_2 aside h3 i { margin: 0 0.6em 0 0; } 

/* module list */
.wpcf7-form .module-inquiry, .wpcf7-form .project-inquiry { display: none; }


/*-- PROJECTS OVERVIEW ------------------------------------------------*/
#projects { background: #EEE; }
#projects .c-4 { border-radius: 5px; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); padding: 0; margin-bottom: 2%; }
#projects a { color: #333; }

#projects .image { position: relative; overflow: hidden; width: 100.1%; }
#projects img { display: block; transition: all 0.4s ease; }
#projects .c-4:hover img { transform: scale(1.1); opacity: 0.7; }

#projects .icon { background: rgba(255, 255, 255, 0.85); border-radius: 50%; height: 120px; line-height: 120px; left: 0; margin: 0 auto; position: absolute; 
right: 0; top: 32%; width: 120px; opacity: 0; text-align: center; color: #2f77a0; transition: opacity 0.4s ease; }
#projects .c-4:hover .icon { opacity: 1; font-size: 1.7em;  }

#projects .info { padding: 1%; text-align: center; background: #FFF; }
#projects h2 { font-size: 0.9090909090909091em; font-weight: normal; padding: 0; margin: 0; text-transform: uppercase; width: auto; }
#projects .service { color: #b1b1b1; display: block; font-size: 0.6363636363636364em; text-transform: uppercase; width: 100%; }


/*-- SERVICES OVERVIEW ------------------------------------------------*/
/* banner */
#leistungen_0 { background: url(/images/banner-leistungen-8x.jpg) no-repeat 0 bottom; background-size: cover; }

#leistungen_1 .service { margin-top: 2em; padding-top: 2em; border-top: 1px solid #DDD; position: relative; }
#leistungen_1 .service .c-3 { text-align: center; }
#leistungen_1 .service p:last-child { margin-bottom: 0; }
#leistungen_1 .icon { color: #333; font-size: 3em; line-height: normal; transition: all 0.4s ease; cursor: pointer; vertical-align: middle; }
#leistungen_1 h2 a { color: inherit; }
#leistungen_1 .in h2, #leistungen_1 .in .icon { color: #2f77a0; }
#leistungen_1 .in .icon { font-size: 6em; }
#leistungen_1 .in .icon:hover { font-size: 6.5em; }

/* color change */
#leistungen_1 .in.development .icon, #leistungen_1 .in.development h2 { color: #8e44ad; }
#leistungen_1 .in.ecommerce .icon, #leistungen_1 .in.ecommerce h2 { color: #27ae60; }
#leistungen_1 .in.seo .icon, #leistungen_1 .in.seo h2 { color: #e74c3c; }
#leistungen_1 .in.marketing .icon, #leistungen_1 .in.marketing h2 { color: #333; }
#leistungen_1 .in.social .icon, #leistungen_1 .in.social h2 { color: #e67e22; }
/*#leistungen_1 .in.graphics .icon, #leistungen_1 .in.graphics h2 { color: #34495e; }*/
#leistungen_1 .in.analytics .icon, #leistungen_1 .in.analytics h2 { color: #f1c40f; }
#leistungen_1 .in.server .icon, #leistungen_1 .in.server h2 { color: #333; }


/*-- DEVELOPMENT ------------------------------------------------*/
/* banner */
#programmierung_0 { background: url(/images/banner-programmierung-8x.jpg) no-repeat 0 0; background-size: cover; }
#programmierung_4 { background: url(/images/programmierung-kreativ-8x.jpg) no-repeat center 0 fixed; background-size: cover; }


/*-- WEB MONITORING ------------------------------------------------*/
/* banner */
#webanalyse_0 { background: url(/images/banner-web-monitoring-8x.jpg) no-repeat 0 bottom; background-size: cover; }

/* Animation */
#webanalyse_2, #webanalyse_8 { height: 100px; position: relative; overflow: hidden; padding: 0; margin: 0 0 5em; }
#webanalyse_2 .chart, #webanalyse_8 .chart { width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; 
transition: width 12s ease, opacity 12s ease 0.0s; background: url(images/chart.png) repeat-x 0 0; }
#webanalyse_8 .chart { background: url(images/chart.png) repeat-x 0 -100px; }
#webanalyse_2 .chart.in, #webanalyse_8 .chart.in { width: 100%; opacity: 1; }

/* concept animation */
#webanalyse_7 .concept { padding: 2.2em 0 0 2.2em; }
#webanalyse_7 .concept ol { margin: 0; }
#webanalyse_7 .concept li { padding: 0.75em 1.1em; margin: 0; background: rgba(39, 174, 96, 0.25); letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
#webanalyse_7 .concept li:nth-child(2) { background: rgba(39, 174, 96, 0.5); }
#webanalyse_7 .concept li:nth-child(3) { background: rgba(39, 174, 96, 0.75); }
#webanalyse_7 .concept .last { background: rgba(39, 174, 96, 1); color: #FFF; font-size: 1.2em; /* 24px */ }
#webanalyse_7 .concept li span { display: inline-block; margin: 0 0.225em 0 0; vertical-align: bottom; }


/*-- IMPRESSUM ------------------------------------------------*/
.about_box { padding: 2% 0; border-bottom: 1px dotted #CCC; }
.about_box p:last-child { margin-bottom: 0; }


/*-- 404 PAGE ------------------------------------------------*/
#fzf_page { background: url(/images/banner-404-8x.jpg) no-repeat 0 0; background-size: cover; padding: 4em 0; margin: 75px 0 0 0;  }
 
/* footer */
.error404 #footer { margin-top: 0; }

/* tag cloud */
ul.tag-cloud li { display: block; float: left; width: auto; background: rgba(255, 255, 255, 0.7); border-radius: 10px 10px 10px 0; transition: background-color 0.3s ease; }
ul.tag-cloud li:hover { background: #FFF; }
ul.tag-cloud li a { display: block; padding: 0.55em; }
ul.tag-cloud li a:hover { color: #333; }
ul.tag-cloud li:nth-child(1n+1) { font-size: 1.4em; /* 28px */ margin: 1% 2% 2%; }
ul.tag-cloud li:nth-child(2n+1) { font-size: 1.5em; /* 30px */ margin: 4% 2% 1%; }
ul.tag-cloud li:nth-child(3n+1) { font-size: 1.2em; /* 24px */ margin: 2% 1% 2%; }
ul.tag-cloud li:nth-child(4n+1) { font-size: 1.7em; /* 34px */ margin: 2% 2% 2%; }


/*-- WEBDESIGN ------------------------------------------------*/
/* banner */
#webdesign_0 { background: url(/images/banner-webdesign-8x.jpg) no-repeat 0 bottom; background-size: cover; }
#webdesign_9 { background: url(/images/webdesign-responsive-test-8x.jpg) no-repeat fixed 0 0; background-size: cover; }
#webdesign_6 { background: url(/images/banner-suchmaschinenoptimierung-seo-8x.jpg) no-repeat fixed 0 0; background-size: cover; }


/*-- MARKETING ------------------------------------------------*/
/* banner */
#online-marketing_0 { background: url(/images/banner-online-marketing-8x.jpg) no-repeat 0 -340px; background-size: cover; }


/*-- SEO ------------------------------------------------*/
/* banner */
#suchmaschinenoptimierung-seo_0 { background: url(/images/banner-suchmaschinenoptimierung-seo-8x.jpg) no-repeat 0 0; background-size: cover; }


/*-- E-COMMERCE ------------------------------------------------*/
/* banner */
#e-commerce_0 { background: url(/images/banner-ecommerce-1-8x.jpg) no-repeat 0 0; background-size: cover; }
#e-commerce_2 { background: url(/images/banner-ecommerce-3-8x.jpg) no-repeat fixed 0 0; background-size: cover; }
#e-commerce_5 { background: url(/images/banner-ecommerce-2-8x.jpg) no-repeat fixed 0 0; background-size: cover; }


/*-- MODULES OVERVIEW ------------------------------------------------*/
#module_1 .list .mod_inner { border: 1px solid #DDD; position: relative; }
#module_1 .mod_inner h2 { padding: 0; margin: 0; font-size: 1.27273em; /* 28px */ }
#module_1 .mod_inner h2 a { display: block; padding: 0.55em; text-align: center; background: #34495e; color: #FFF; }
#module_1 .mod_inner h2 a:hover { background: #2f77a0; }
#module_1 .mod_inner .desc { padding: 1.1em; }
#module_1 .mod_inner .desc > p:last-child { margin-bottom: 0; }
#module_1 .mod_inner .image { overflow: hidden; padding: 1.1em 1.65em; max-height: 300px; }
#module_1 .mod_inner .image img { box-sizing: border-box; transition: transform 0.3s ease; }
#module_1 .mod_inner .image img:hover { transform: scale(1.05); }

/* sidebar */
#module_1 aside { box-sizing: border-box; padding: 0.55em; }
#module_1 aside .filter { border: 1px solid #DDD; }
#module_1 aside h4 { padding: 0.55em 1.1em; margin: 0; background: #EEE; font-weight: 400; cursor: pointer; }
#module_1 aside h4 span { float: right; }
#module_1 aside ul { display: none; }
#module_1 aside li { padding: 0.55em 1.1em; margin: 0; border-top: 1px dotted #DDD; cursor: pointer; transition: background-color 0.3s ease-in-out; }
#module_1 aside li:first-child { border-top: 1px solid #DDD; }
#module_1 aside li.selected { background: #EEE; }
#module_1 aside li span { color: #999; margin: 0 0 0 5px; }
#module_1 aside li span, #module_1 aside li a { transition: color 0.3s ease-in-out; }
#module_1 aside li:hover { background: #F4F4F4; }
#module_1 aside li:hover a, #module_1 aside li:hover span { color: #333; }
#module_1 aside a:hover { text-decoration: none; }

/* ribbons */
.ribbon { position: absolute; right: -5px; top: -5px; z-index: 1; overflow: hidden; width: 135px; height: 135px; text-align: right; }
.ribbon span { font-size: 14px; font-weight: 400; color: #FFF; text-transform: uppercase; text-align: center; line-height: 2.5em; transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 180px; display: block; background: #2F77A0; background: linear-gradient(#2F77A0 0%, #165E87 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 34px; right: -38px; }
.ribbon span::before, .ribbon span::after { content: ""; position: absolute; }
.ribbon span::before { left: 0px; top: 100%; z-index: -1; border-left: 3px solid #165E87; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #165E87; }
.ribbon span::after { right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #165E87; border-bottom: 3px solid transparent; border-top: 3px solid #165E87; }
.ribbon.update_safe span { background: #27ae60; background: linear-gradient(#27ae60 0%, #0E9547 100%); }
.ribbon.update_safe span::before { border-left-color: #0E9547; border-top-color: #0E9547; }
.ribbon.update_safe span::after { border-right-color: #0E9547; border-top-color: #0E9547; }


/*-- MODULES DETAILS ------------------------------------------------*/
/* next & previous buttons */
.postNav { display: none; height: 100%; position: fixed; top: 0; width: 10px; text-align: center; font-size: 4em; color: #DDD; z-index: 9; }
.postNav.next { right: 0; }
.postNav:hover { width: 90px; color: #DDD; }
.postNav:active { background: #EEE; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.33); color: #165D87; }
.postNav i { position: absolute; left: -90px; top: 50%; width: 100%; transition: left 0.3s ease, right 0.3s ease; }
.postNav.next i { left: auto; right: -90px; }
.postNav:hover i { left: 0; }
.postNav.next:hover i { left: auto; right: 0; }
/* category */
.post .category { margin: 0 0 0.55em; }
.post .category a { text-transform: uppercase; color: #999; letter-spacing: 2px; }
.post .category a:hover { text-decoration: underline; }
/* table results */
.table tr.results { color: #27ae60; font-weight: bold; }
/* version box */
#version_box { position: relative; padding: 1.1em; }


/*-- MODIFIED MODULE ------------------------------------------------*/
/* banner */
.category-88 #module_0 { background: url(/images/banner-modified-shop-module-8x.jpg) no-repeat 0 0; background-size: cover; }


/*-- XTCOMMERCE MODULE ------------------------------------------------*/
/* banner */
.category-87 #module_0 { background: url(/images/banner-xt-commerce-shop-module-8x.jpg) no-repeat 0 0; background-size: cover; }


/*-- MODIFIED TEMPLATES ------------------------------------------------*/
/* banner */
#modified-shop-templates_0 { background: url(/images/banner-modified-shop-templates-8x.jpg) no-repeat 0 0; background-size: cover; }


/*-- XTCOMMERCE UPDATE ------------------------------------------------*/
/* banner */
#xt-commerce-update-service_0 { background: url(/images/banner-xt-commerce-shop-update-8x.jpg) no-repeat 0 0; background-size: cover; }


/*-- SEARCH RESULTS ------------------------------------------------*/
.search_result { padding: 1.1em; cursor: pointer; border-top: 1px solid #DDD; }
.search_result:hover { background: #F4F4F4; }
.search_result .entry-content p { margin: 0; }


/*========================================================================================================================== */
/* BOOTSTRAP MODAL (3.4.1) ================================================================================================= */
/*========================================================================================================================== */
/* close button */
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 0.2;
}
.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
/* modal */
.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  margin: 0 auto;
  width: 100%;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
  font-size: 2rem;
}
.modal-title {
  margin: 0;
  font-weight: 400;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm .modal-dialog {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg .modal-dialog {
    width: 900px;
  }
}
@media only screen and (min-width: 1200px) {
  .modal-xl .modal-dialog {
    width: 1170px;
  }
}
/* clearfix */
.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}


/*========================================================================================================================== */
/* MEDIA QUERIES - MOBILE FIRST ============================================================================================ */
/*========================================================================================================================== */
@media only screen and (min-width: 480px) {
	h1, h2, h3, h4, h5, h6 { word-wrap: normal; }
	
	/* WRAPPER */
	.wrapper, .wrapper.fix { width: 90%; }


	/*-- MODULES OVERVIEW ------------------------------------------------*/
	#module_1 .list .mod_inner { border: none; border-bottom: 1px dotted #DDD; margin: 0 0 1.1em 0; padding: 0 0 1.1em 0; }
	#module_1 .mod_inner h2 { margin: 0 0 20px; font-size: 1.6em; /* 32px */ }
	#module_1 .mod_inner h2 a { display: inline; padding: 0; text-align: left; background: none; color: #2f77a0; }
	#module_1 .mod_inner h2 a:hover { background: none; color: #165D87; }
	#module_1 .mod_inner .desc { padding: 0; }
	#module_1 .mod_inner .image { padding: 0.55em 1.1em 0.55em 0.55em; }
	#module_1 .mod_inner .image img { border: 10px solid #EEE; }
	
	/* ribbons */
	#module_1 .mod_inner .ribbon { position: static; position: static; width: auto; height: auto; float: right; margin-top: 1.1em; }
	#module_1 .mod_inner .ribbon span { position: static; width: auto; height: auto; -webkit-transform: none; transform: none; padding: 0 .55em; background: none; color: #999; border: 1px solid #DDD; }
	#module_1 .mod_inner .ribbon span::before, #module_1 .mod_inner .ribbon span::after { display: none; }
	
}

@media only screen and (min-width: 768px) {
	body { font-size: 1.1em; /* 18px */ }
	
	/* WRAPPER */
	#pageWrap { padding-top: 92px; }
	.wrapper.fix { width: 750px; }

	/* HEADER */
	header { height: 80px; line-height: 80px; }
	.logo { width: 200px; }

	/* HEADER NAVIGATION */
	#navMain { display: block; width: auto; margin: 0; }

	#navMain ul li { float: left; width: auto; margin: 0 1.4em 0 0; line-height: inherit; font-weight: 300; border: none; }
	#navMain ul li:last-child { margin: 0; }
	#navMain li:hover > a, #navMain li.current > a, #navMain li.open > a { color: #2f77a0; background: #FFF; border-bottom: 3px solid #2f77a0; }
	
	#navMain .parent a > span, #navMain .parent a > span:hover { position: static; border: none; background: none; margin: 0 0 0 10px; }

	#navMain ul li ul { display: block; visibility: hidden; position: absolute; top: 80px; border: 1px solid #DDD; border-top: 3px solid #2f77a0; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); padding: 10px 0; opacity: 0; transition: opacity 0.3s ease-in-out; }
	#navMain ul li:hover ul, #navMain ul li.open ul { display: block; visibility: visible; opacity: 1; }
	#navMain ul li li { width: 100%; border: none; }
	#navMain ul li li a { line-height: normal; padding: 10px 20px; }
	#navMain ul li li:hover > a { border: none; color: #333; }
	
	#navMain ul #navMain_li_2 ul { left: -30px; }

	#toggleNavMain { display: none; }


	/*-- MODULES OVERVIEW ------------------------------------------------*/
	/* sidebar */
	#module_1 aside { border-left: 1px solid #DDD; padding: 0; }
	#module_1 aside .filter { border: none; }
	#module_1 aside h4 { background: none; font-weight: 300; border-top: none; }
	#module_1 aside ul { display: block; }
	
	
	/*-- MODULES DETAILS ------------------------------------------------*/
	/* next & previous buttons */
	.postNav { display: block; }
}

@media only screen and (min-width: 992px) {
	body { font-size: 1.25em; /* 20px */ }

	/* WRAPPER */
	#pageWrap { padding-top: 102px; }
	.wrapper.fix { width: 970px; }

	/* HEADER */
	header, .nav-fixed header { height: 90px; line-height: 90px; }
	.logo { width: 250px; }
	
	/* HEADER NAVIGATION */
	#navMain ul li { margin: 0 1.8em 0 0; }
	#navMain ul li ul { top: 90px; }
}

@media only screen and (min-width: 1200px) {
	.wrapper { width: 80%; }
	.wrapper.fix { width: 1170px; }

	/* HEADER */
	.logo { width: 275px; }
	
	/* HEADER NAVIGATION */
	#navMain ul li { margin: 0 2em 0 0; }
	#navMain ul #navMain_li_2 ul { left: 0; }
}

@media only screen and (min-width: 1400px) {
	.wrapper.fix { width: 1260px; }

	/* HEADER */
	.logo { width: 300px; }

	/* HEADER NAVIGATION */
	#navMain ul li { margin: 0 2.3em 0 0; }
}



/*-- FLOATING NAVIGATION ------------------------------------------------*/
@media only screen and (min-height: 601px) {
	.nav-fixed .logo { width: 175px; }
	.nav-fixed header { height: auto; line-height: 65px; position: fixed; }
	.nav-fixed #navMain ul li ul { top: 65px; }
	.nav-hidden #header { opacity: 0; height: 0; overflow: hidden; }

	/* frontpage see more button */
	#info_banner .button { display: inline-block; }
	
	/* frontpage banner text */
	#info_banner hgroup { top: 15%; }
}

@media only screen and (min-height: 601px) and (min-width: 768px) {
	.nav-fixed header { height: 65px; }
}

@media only screen and (min-width: 992px) and (min-height: 601px) {
	.nav-fixed .logo { width: 225px; }
	.nav-fixed header { height: 70px; line-height: 70px; }
	.nav-fixed #navMain ul li ul { top: 70px; }
}

@media only screen and (min-width: 1200px) and (min-height: 601px) {
	.nav-fixed header { height: 75px; line-height: 75px; }
	.nav-fixed #navMain ul li ul { top: 75px; }
}


/*========================================================================================================================== */
/* MEDIA QUERIES - DESKTOP FIRST =========================================================================================== */
/*========================================================================================================================== */
@media only screen and (max-width: 1399px) {

	/*-- CONTENT ------------------------------------------------*/
	#info_mods .mod .text { height: 240px; }


	/* marketing */
	#online-marketing_0 { background-position: 0 -250px; }

}

@media only screen and (max-width: 1199px) {

	/* footer */
	#footer_copyright { line-height: 40px; }
	#footer .back_to_top { display: block; }

	/* banner */
	section.banner, section.highlight { margin: 1em 0; }

	/* hide back to top on small displays */
	#back_to_top { display: none !important; visibility: hidden; }


	/*-- CONTENT ------------------------------------------------*/
	/* frontpage mods */
	#info_mods .mod .text { height: 360px; }
		

	/* development */
	.skills .c-6 { height: 10em; }
	.skills .c-6:first-child { padding-bottom: 0; padding-right: 1.1em; }
	.skills .c-6:nth-child(2) { padding-top: 0; padding-left: 1.1em; }
	.skills .icon { padding: 10px 0; }
	.skills .c-6 .fa-ul  { text-align: center; margin: 0; }
	.skills .c-6 .fa-ul li [class^="fa-"] { position: static; margin-right: 10px; }


	/* marketing */
	#online-marketing_0 { background-position: 0 -160px; }
}

@media only screen and (max-width: 991px) {

	/* banners */
	section.banner .slogan h4 { font-size: 2.5em; /* 50px */ line-height: 1.2em; } 
	section.banner .slogan p { font-size: 1.0em; /* 20px */ padding: 7px 10px; }


	/*-- CONTENT ------------------------------------------------*/
	/* frontpage mods */
	#info_mods .mod .text { height: 190px; }

	/* frontpage contact */
	#info_contact .project-planner { height: 270px; width: 270px; }


	/* contact page */
	#kontakt_0 { background-position: 0 -100px; }


	/* marketing */
	#online-marketing_0 { background-position: 0 -90px; }


	/* 404 page */
	#fzf_page { padding: 2em 0; }
}

@media only screen and (max-width: 767px) {

	/* sections */
	section, section.pt-0, section.pb-0 { padding: 2em 0 !important; }
	section + section { border-top: 1px solid #DDD; }
	section.pointer + section { border-top: none; }
	section.pageTitle, section.pageTitle + section, section.banner, section.banner + section, section.highlight, section.highlight + section { border-top: none; }

	/* banners */
	section.banner { background-attachment: scroll !important; } /* turn fixed bg image off */
	
	/* footer */
	#footer_info .links { border-left: none; border-top: 1px solid #3A3A3A; padding: 1.1em 0.55em 0 0.55em; margin: 1.1em 0 0 0; text-align: left; }
	#footer_info .links li { display: inline; margin: 0 15px 0 0; }
	#footer_info .links li i:before { content: "|"}
	#footer_info .contact span { width: 60px; }
	#footer_action .button_wrap { display: block; margin: 1.1em 0 0 0; }
	#footer_action .button_wrap .button { float: none; }


	/*-- CONTENT ------------------------------------------------*/
	/* frontpage banner text */
	#info_banner { background-attachment: scroll !important; } /* turn fixed bg image off */
	#info_banner h1 { font-size: 3em; }
	#info_banner h2 { font-size: 1.45455em; /* 32px */ }

	/* frontpage teaser boxes */
	#info_teaser .teaser .icon { float: left; width: 20%; }
	#info_teaser .teaser h3 { margin: 0 0 15px 0; }
	#info_teaser .teaser h3, #info_teaser .teaser ul { float: right; width: 75%; text-align: left; }

	/* frontpage projects */ 
	#info_portofolio .project:nth-of-type(3) { display: none; }
	#info_portofolio .project:nth-of-type(2) { padding-right: 0; }

	/* frontpage agency */ 
	#info_agency .fa-ul { margin-left: 0; }
	#info_agency .fa-ul li { float: left; margin-left: 3.14286em; }

	/* frontpage mods */
	#info_mods .sm-10 { float: none; padding: 0.55em; margin: 0 auto; }
	#info_mods .mod .text { height: auto; }

	/* frontpage contact */
	#info_contact .project-planner { height: 250px; width: 250px; }
	#info_contact .project-planner .title { padding-top: 45px; }


	/* services overview */
	#leistungen_1 .service .c-3 { font-size: 0.5em; height: 60px; float: left; }
	#leistungen_1 .service .c-9 { margin-top: -60px; float: left; } 
	#leistungen_1 .service h2 { padding-left: 18.6667%; } 
	#leistungen_1 .in .icon, #leistungen_1 .in .icon:hover { font-size: 4.5em; }


	/* contact page */
	#kontakt_0 { background-position: 0 0; }
	#kontakt_2 aside > div { border: none; padding: 0 0 0 1.1em; }
	#kontakt_2 .form { border-top: 1px solid #DDD; padding-top: 2em; }


	/* development */
	.skills { border-width: 10px 0; }
	.skills .c-6 { padding: 1.1em !important; height: auto; }
	.skills .c-6 .fa-ul  { text-align: left; margin-top: 1em; }

	.cmsLogos img { margin: 0 2.2em 2.2em 0; max-width: 45% !important }
	.cmsLogos img:nth-of-type(2n) { margin: 0 0 2.2em 0; }


	/* web monitoring */
	#webanalyse_2, #webanalyse_8 { display: none; }
	#webanalyse_7 .concept { padding: 2.2em 0 0; }
	#webanalyse_7 .concept li { margin: 0 0.225em 0.225em 0; }


	/* marketing */
	#online-marketing_0 { background-position: 0 0; }
}

@media only screen and (max-width: 479px) {

	/* footer */
	#footer_info .links i { margin: 0 0 0 10px; }
	#footer_info .links li { margin: 0 10px 0 0; }
	#footer_info .contact span { width: auto; margin: 0 5px 0 0; }
	
	/* banners */
	section.banner .slogan h4 { font-size: 1.54545em; /* 34px */ } 

	/* animations off */
	.fade-in { opacity: 1; }
	.scale-in { opacity: 1; transform: scale(1); }
	.fade-left, .fade-right { opacity: 1; transform: translateX(0px); }
	.fade-up, .fade-down { opacity: 1; transform: translateY(0px); }
	.rotate { transform: rotate(0deg); }
	#leistungen_1 .icon { font-size: 4.5em; }
	

	/*-- CONTENT ------------------------------------------------*/
	/* frontpage teaser boxes */
	#info_teaser .teaser .icon { display: none }
	#info_teaser .teaser h3, #info_teaser .teaser ul { width: 100%; float: none; }

	/* frontpage banner text */
	#info_banner h1 { font-size: 2.27273em; /* 50px */ }
	#info_banner h2 { font-size: 1.09091em; /* 24px */ }

	/* frontpage agency */ 
	#info_agency .fa-ul li { float: none; }

	/* frontpage mods */
	#info_mods .mod .text { height: auto; }
	#info_mods .mod .image { max-height: none; }

	/* frontpage contact */
	#info_contact .project-planner {  height: 230px; width: 230px; float: none; margin: 0 auto; }
	#info_contact .project-planner .title { padding-top: 40px; }
	#info_contact .contact-details { text-align: center; margin: 1.1em 0 0 0; }


	/* contact page */
	#kontakt_2 aside .box { width: 96%; }


	/* services overview */
	#leistungen_1 .service .c-3 { font-size: 1em; height: auto; }
	#leistungen_1 .service .c-9 { margin-top: 0; } 
	#leistungen_1 .service h2 { padding-left: 0; text-align: center; } 


	/* development */
	.skills .c-6 .fa-ul  { text-align: center; margin: 0; }
	.skills .c-6:first-child { padding-bottom: 0 !important; }
	.skills .c-6:nth-child(2) { padding-top: 0 !important; }
	.skills .icon { padding-top: 0; }


}