/* GENERAL */

@font-face { 
  font-family: "ExtraFont"; 
  src: url("vendors/fonts/Bocemina.ttf");
}

textarea:focus, input:focus, a:focus { outline: 0;}
.clearfix {clear: both;}

/* START */
body {background-image: url('../../uploads/xbg.jpg'); background-attachment:fixed; color: #636363; background-color: #000; font-family: 'Open Sans',sans-serif; font-size: 16px; padding: 0; margin: 0;}
#site {max-width: 960px; margin: 0 auto; padding: 20px 5px 10px 5px;}

/* HEADER */
#main-head .description-section {overflow: auto; margin: 0 0 10px 0; line-height: 36px;}
#main-head .site-description {display: inline-block; color: #000; width: auto;}
#main-head .site-title { font-size: 34px; margin-right: 20px;}
#main-head .site-title a {color: #fff; text-decoration: none;}
#main-head .phone {margin-left: 20px; margin-top: 15px; font-size: 28px; display: inline; float: right; color: #FF4100 !important; white-space: nowrap;}
#main-head .phone .icon {font-size: 30px; opacity: 0.8;}
@media only screen and ( max-width: 640px ) {
  #main-head .phone {margin-top: 0;}
  #main-head .phone {font-size: 24px;}
}


/* EYECATCHER */
#eyecatcher {margin-top: 10px; border: 1px #000d18 solid;}

/* ARTICLE */
.article_ori {background: #fff;  opacity: 0.9; margin: 10px 0; min-height: 400px; padding: 10px 30px 30px 30px; border: 1px #000d18 solid; color: #15324b; line-height: 24px;}

.article {background: #fff;  opacity: 0.9; background-image:url('../../uploads/line_vertical_trb.png'); background-position: top right; background-repeat:no-repeat; margin: 10px 0; min-height: 400px; padding: 10px 30px 30px 30px; border: 1px #000d18 solid; color: #15324b; line-height: 24px;}


.article h1 {color: #FF4100; line-height: 40px; font-weight: normal; font-family: 'ExtraFont','Open Sans',sans-serif;}
.article h2 {line-height: 36px;}
.article h2, .article h3, .article h4 {margin-top: 30px; font-weight: normal; color: #15324b;}
.article .phone-number {white-space: nowrap; color: #FF4100;}
.article a { color: #FF4100; text-decoration: none;}
.article a.button {color: #fff;}
.article a:hover {color: #15324b;}
.article a.button:hover {color: #FFFFFF;}
.article ul {padding-left: 20px;}
.article ul.cols-2 li {float: left; width: 45%; margin-left: 5%;}
.article ul.cols-2 {display: inline-block;}
.article ul.cols-2:after {clear: both;}
.article ul.dots {list-style-image:url('css/images/ul-dot.png')}
.article ul.checkmarks {list-style-image:url('css/images/ul-checkmark.png')}
.article .text-content {width: 600px;}

.article .imageORI {float: right; padding: 5px 5px 0 5px; margin: 20px 0 30px 30px; border: 1px #B3B3B3 solid;}
.article .imageORI img {width: 400px; border: 1px #B3B3B3 solid;}

.article .image {float: right; padding: 5px 5px 0 5px; margin: 20px 0 30px 30px; box-shadow: 3px 3px 5px #ababab; background:#fff;}
.article .image img {width: 250px;}


@media only screen and ( max-width: 800px ) {
  .article .text-content {width: 500px;}
  .article .image img {width: 250px;}
}
@media only screen and ( max-width: 640px ) {
  .article .text-content {width: 500px; }
  .article .image img {width: 250px;}
  .article { background-image:none; }
}
@media only screen and ( max-width: 480px ) {
  .article .text-content {width: 400px;}
  .article .image img {width: 150px;}
  .article ul.cols-2 li {float: none; width: 250px;}
}
@media only screen and ( max-width: 360px ) {
  .article .text-content {width: 300px;}
  .article .image img {width: 300px;}
}
@media only screen and ( max-width: 320px ) {
  .article .text-content {width: 260px;}
  .article .image img {width: 260px;}
}


/* HOME BOXES */
#home-boxes {margin: 0 0 10px 0;}
.home-box {width: 313px; margin-right: 10px; margin-top: 10px; float: left;}
.home-box.last{margin-right: 0;}
.home-box h2 { font-family: 'ExtraFont','Open Sans',sans-serif; border: 1px #000d18 solid; margin-top: 0; margin-bottom: 3px; text-transform: uppercase; padding: 10px 10px; color: #B3B3B3; background: rgba(20, 67, 106, 0.8); font-size: 16px; font-weight: normal;}
.home-box .content {height: 280px; border: 1px #000d18 solid; margin-bottom: 3px; opacity: 0.9; color: #15324b; position: relative; font-size: 14px; line-height: 22px; background: #fff; padding: 1px 20px 15px 20px; }
.home-box ul {padding-left: 15px; padding-top: 5px; list-style-image:url('css/images/ul-dot.png')}
.home-box ul li {margin: 10px 0;}
.home-box a {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 19px;
  padding: 7px 22px 9px 23px;
  text-decoration: none;
  text-align: center;
  opacity: 0.9;
  background: #FF4100;
  border: 1px #3f1000 solid;
}
.home-box a:hover {background: #15324b; color: #fff; border: 1px #15324b solid;}


/* FOOTER */
#footer {
  background: rgba(20, 67, 106, 0.8);
  border: 1px #000d18 solid;
  padding-top: 1px;
  padding-bottom: 10px;
  min-height: 130px;
  border-radius:  0 0 0 8px;
  overflow: auto;
  color: #B3B3B3;
}
#footer a {color: #B3B3B3; text-decoration: none;}
#footer a:hover {color: #FF4100;}
#footer ul {width: 279px; list-style: none outside none; padding: 0; margin: 20px 20px 10px 20px; float: left;}
#footer li {margin-top: 5px;}
#footer span.icon {font-size: 18px; margin-right: 10px;}

/*EMAIL IFRAME */
/* styles for the form are in /email/styles_email.css in rootdirectory */
#email-iframe {width: 100%; height: 700px;}

/* GOOGLE MAPS IFRAME */
#google-maps {width: 100%; height: 500px;}

/* ZUSATZ */
.right {float: right;}
.left {float: left;}
.clear {clear:both;}
.mtop20 {margin-top:20px;}
.mtop30 {margin-top:30px;}
.tcenter {text-align:center;}
.imgshadow {box-shadow: 3px 3px 5px #ababab;}
.inslider { color: #315878; font-size: 0.8em; line-height: normal; }
.boxphone a { color: #15324B; display:inline; padding: 0px; text-align: left;  background: transparent; border: 0px none; text-decoration:underline; } 
.headerphone a { color: #FF4100; text-decoration:underline; } 

/* MOBILE */

@media only screen and ( max-width: 800px ) {
  .home-box {width: 385px; margin-right: 5px; margin-left: 5px;}
  .home-box .content { height: 230px;}
}
@media only screen and ( max-width: 768px ) {
  .home-box {width: 367px;}
  .home-box .content { height: 290px;}
  .desktop-only { display:none; }
  #footer ul { width: 210px; }
}
@media only screen and ( max-width: 640px ) {
  .home-box {width: 302px;}
  .home-box .content { height: 290px;}
  #bullets { display:none; }
  #main-head .phone { float:left; }
  .right { float:left; }
  #footer ul { width: 165px; }
}
@media only screen and ( max-width: 480px ) {
  .home-box {width: 470px; margin: 10px 0 0 0;}
  .home-box .content { height: 290px;}
}
@media only screen and ( max-width: 360px ) {
  .home-box {width: 350px;}
  .home-box .content { height: 290px;}
}
@media only screen and ( max-width: 320px ) {
  .home-box {width: 310px;}
  .home-box .content { height: 290px;}
}