/*
 * HTML5 Boilerplate
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer, header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent}
html,button,input,select,textarea {color:#222}
body{font-size:1em;line-height:1.4; font-family: 'Roboto', sans-serif;}
a{color:#f00}
a:hover{color:#c33}
img{vertical-align: middle}
fieldset{border:0;margin:0;padding:0}
textarea{resize:vertical}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display: inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}
body{margin:0}
a:focus{outline: none}
a:active,a:hover{outline:0}
a{text-decoration:none}
hgroup{}
h1,h2,h3,h4,h5,h6{ font-weight:300}
ul,li{ list-style:none; list-style-type:none}
abbr[title]{border-bottom: 1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family: monospace, serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes: "\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position: relative;vertical-align: baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow: hidden}
figure{margin: 0}
fieldset{border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em}
legend{border: 0; /* 1 */ padding: 0; /* 2 */}
button,input,select,textarea{
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}
button,input{line-height: normal}
button,select{text-transform: none}
button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"]{-webkit-appearance: button; /* 2 */cursor: pointer; /* 3 */}
button[disabled],html input[disabled] {cursor: default}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; /* 1 */ padding: 0; /* 2 */}
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0}
textarea {overflow: auto; /* 1 */  vertical-align: top; /* 2 */}
table {border-collapse: collapse;border-spacing: 0}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.fullwidth{ width:100%}

.wrapper{ width:100%; margin:0 auto; clear:both; /**/ max-width:940px; min-width:940px;}
.content{ text-align:center; }
.content section{ margin:0 auto;/**/width:88%}
.image{ border:6px solid #ccc}

/* header */
.header_main{ height:62px; max-height:62px; background:url(../img/header_bg.png) 0 0 repeat-x}
.logodiv{padding-top:10px}
.navdiv{ /**/ width:70%; padding-top:22px; position:relative}
nav{ position:absolute; right:0}
nav ul li{ float:left; height:50px; text-align:center; position:relative}
nav ul li ul{ position:absolute; z-index:9; top:40px; background:#333; left:0; padding-top:10px;  width: 150%; display:none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-ms-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
nav ul li ul{ position:absolute; z-index:9; top:40px; background:#333; left:0; padding-top:10px;  width: 150%; display:none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
-ms-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}


nav ul li:hover ul{ display:block}
nav ul li li{ padding:10px 0}
nav ul li li a{font-size: 12px; line-height:12px}
nav ul li a{color:#fff; font-weight:900; text-transform:uppercase; display:block; font-size:14px; padding:0 20px; height:100%}
nav ul li.active a{ background:url(../img/nav_active_arrow.png) center 21px no-repeat}
.content h1,.content h2,.content h3{font-family: 'Belgrano', serif;}
nav ul li.has_dd:hover a{ background:none}

/* spotlight */
.spotlight{ overflow:hidden; background:url(../img/spotlight_bg.png) 0 0 repeat}
.spotlight_main .left{ /**/width:32%; margin-top:11%; padding-left:8%}
.spotlight_main .left h1,.spotlight_main .left h3{ text-align:right;letter-spacing:-3px}
.spotlight_main .left h1{ font-size:38px; text-transform:uppercase; line-height:34px;font-weight:300; }
.spotlight_main .left h3{ font-size:24px; color:#999; letter-spacing:-1px}
.spotlight_main .right{ /**/width:48%; padding-top:34px; padding-right:10%}
.more{ background:url(../img/more_bg.png) right 0 no-repeat; width:120px; height:35px; text-align:center; padding-right:10px; color:#fff; font-weight:600; line-height:31px; text-transform:uppercase; font-size:14px; float:right;margin-top: 14px;}
.more:hover{ color:#fcc}
.spotlight_main img{ width:100%}

/* Icons */
.icon_div{ text-align:center}
.icon_div img{ display:block; width:100%}

/* content */
.content,.iconsdiv{ background:url(../img/content_bg.png) 0 0 repeat; float:left; overflow:hidden}
.content h2{ font-size:36px; color:#333;}
.content h3{ font-size:32px; padding-bottom:20px}
.aboutus{ padding-top:40px; /* margin-bottom:80px !important */}
.content h2{ padding-bottom:24px}
.content p{ font-size:22px; font-weight:300; line-height:30px; padding-bottom:40px}
.chart{ padding-bottom:40px; width:540px; height:auto; margin:0 auto}
.chart img{ width:100%; margin:10px 0}
.expand_btn{ background:url(../img/expand_arrow.png) 0 0 no-repeat; width:40px; height:40px; display:block; margin:10px auto;}
.expand_btn.active{ background-position: 0 -40px}
.content section{ margin-bottom:40px}

/* footer */
.footer_main{ background:url(../img/footer_bg.png) 0 0 repeat-x; overflow:hidden; padding-top:40px; padding-bottom:40px}
.copyright{ color:#ccc; font-size:14px}
.addressdiv{ width:360px}
.footerlogo{ width:42px; height:42px; opacity:0.7}
.footerlogo:hover{opacity:1}
.footer_main address p{color: #fff;display: inline;float: right;font-style: normal;line-height:10px;padding: 3px 11px;text-align: right; margin-bottom:2px; font-size:14px;}
.footer_main address { width:260px; margin-right:10px}
.footer_menu{ clear:both; margin-left:-9px}
.footer_menu li{ float:left; border-right:1px solid #666}
.footer_menu li:last-child{ border:0}
.footer_menu li a{ padding: 0 10px; font-size:14px; display:block; color:#ccc}
.footer_menu li a:hover,.footer_menu li.active a{ color:#f00}


/*---- Innerpages --------*/
/* Officium */
.page_title{ text-transform:uppercase; color:#d20000 !important}
.sect_title{color:#d20000 !important}
.list_content {padding-bottom: 80px;}
.list_content li{border-right: 1px dotted #cfcfcf;display: inline-block;padding: 1%;width: 19%; vertical-align:middle;margin: 2% 0;}
.list_content li.has_sub{ width:47%}
.list_content li:last-child{ border:0}
.list_content li p{ padding-bottom:0; font-size:16px; line-height:20px;}
.list_content li li,.list_content li li:last-child { display:inline-block; border-bottom:0; padding:1%; background: #e1e1e1; border:0; margin: 8px 3px 0; color:#666; font-size:14px; height:auto; width:40%;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
}
.wrapper section{ padding-top:60px}
.workmodel .list_content li{ width:30%}
/* Contact */
.content address{ font-style:normal; }
.content address p{ line-height:34px; padding:0}
.map{ margin:40px 0}
.map iframe{ width:80%; min-height:400px; border:4px solid #e1e1e1}





/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

/*
@media only screen and (max-width: 940px) {
.wrapper{max-width:940px; position:relative}
.header_main{ height:62px; max-height:62px;}
.left.logodiv{ float:left !important}
.navdiv{ width:70%; padding-top:22px; position:relative}
nav{ position:absolute; right:0}
nav ul li{ float:left; height:50px; text-align:center; position:relative}

}

@media only screen and (max-width: 768px), 
@media only screen and (max-width: 480px), 
@media only screen and (max-width: 320px) {
.wrapper{max-width:768px; position:relative}
.logodiv{ float:none; text-align:center; height:52px}
.navdiv{width:100%; float:none; padding:0; height:40px; padding-top:10px; background:#555}
nav{width:100%; position:absolute; z-index:9; left:0; top:10px; width:100%}
nav ul li{ float:left; width:25%}
nav ul li a{padding: 0; font-size:12px; font-weight:500; word-wrap: break-word; line-height:14px}
nav ul li li{ width:100%; float:none}
.spotlight_main .left{margin-top:64px; float:none; width:90%; margin:0 auto}
.spotlight_main .right{ width:80%; margin:0 auto; float:none}
.header_main{ max-height:none; height:102px}
.chart{ width:100%;padding-bottom:0}
.spotlight_main{ padding:10% 0 0; text-align:center}
.spotlight_main .more{display:inline-block;float:none;margin:14px auto 0}
.spotlight_main .left h1,.spotlight_main .left h3{ text-align:center}
.icon_div img{ width:136%; margin-left:-18%}
.icon_div{ text-align:center; width:100%; overflow:hidden}
.spotlight_main .right{padding-top: 20px;}
.content p{ font-size:16px; line-height:22px; padding-bottom: 20px;}
.wrapper section{ padding-top:30px; margin-bottom:0 !important}
.footer_main{padding-bottom:0; padding-top:24px}
.map iframe{ width:100%}
.copyrightDiv,.copyrightDiv p,.footer_main address{ text-align:center; float:none !important; width:100%}
.footer_menu,.addressdiv{ margin: 0 auto; width:100%;}
.footer_menu li { width:24%; word-wrap: break-word;}
.footer_menu li a,.copyrightDiv p, .footer_main address p{ font-size:12px; clear:both; width:100%; text-align:center; padding:0}
.footerlogo { display:none}
.addressdiv{ padding:10px 0}
.image{margin-bottom: 40px; width: 100%; margin-left: -5px;}
.content address p{ line-height:24px}
.content h2{font-size: 24px;  padding-bottom: 12px;}
.content h3{font-size: 20px;}
.list_content li{padding: 10px 0;}
.list_content li li, .list_content li li:last-child{margin-top: 6px;padding: 6px 8px;}
}


@media only screen and (max-width: 768px) {
.wrapper{max-width:768px;}
nav ul li a {line-height: 16px;}
nav ul,.footer_menu, .addressdiv{ width:70%; margin: 0 auto}
}

@media only screen and (max-width: 480px) {
.wrapper{max-width:480px;}
nav ul li a{line-height:14px}
nav ul,.footer_menu, .addressdiv{ width:100%; margin:0}
}

@media only screen and (max-width: 320px) {
.wrapper{max-width:320px;min-width:300px;}
nav ul li a{ line-height:14px}
nav ul,.footer_menu, .addressdiv{ width:100%; margin:0}

}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {


}*/
/* ==========================================================================
   Helper classes
   ========================================================================== */
.nocallout{-webkit-touch-callout: none}
.pressed{background-color: rgba(0, 0, 0, 0.7);}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable]{-webkit-appearance:none}
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */
.gifhidden{position:absolute;left:-100%}
.ir{background-color: transparent;background-repeat: no-repeat;border: 0;direction: ltr;display: block;overflow: hidden;text-align: left;text-indent:-999em}
.ir br{display: none}
.hidden{display: none !important;visibility: hidden}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height: 1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;
width:auto}
.invisible{visibility:hidden}
.clearfix:before,.clearfix:after{content: "";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
.left{ float:left}
.right{ float:right}