/* Global styles */
* { margin:0;padding:0;border:0;outline:0;font-family: 'Raleway', sans-serif;font-size: 18px;font-weight:300; }
h1 { font-family: 'Rokkitt', serif;font-weight:700;text-transform:uppercase; }
.clear { clear:both; }
.bold { font-weight:600; }

/* Header */
header { width: 100%; }
header.fixedHeader { background-color: #fff!important;box-shadow: 0 1px 3px rgba(0,0,0,0.11);-webkit-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;-webkit-font-smoothing: antialiased;position: fixed;z-index: 99999;padding-top:0; }
header .headerContainer { width: 95%;margin: 0px auto; }

/* Header mobile */
header h1.mobileHeading a { display:none; }
header.fixedHeader h1.mobileHeading a { display:block;color:#64c8b8;float:left;padding-top:16px;font-size:18px;line-height: 20px;text-decoration:none; }

/* Navigation */
nav { float:right; }
#nav { float: left;margin: 0; }
#nav li { float: left;padding: 15px 17px 15px 16px;position: relative;list-style: none;display: block;text-transform:uppercase;line-height: 6px; }
#nav li a { text-decoration:none;color:#fff;font-size:15px;line-height: 21px;font-weight:400;border-bottom: 3px solid transparent;position: relative;display: inline;padding: 12px 5px; }
#nav li.current a, #nav li a:hover { background-color: transparent;border-bottom-color: #fff;text-shadow: 0px 0px 1px transparent;cursor:pointer; }
header.fixedHeader #nav li { padding-bottom:13px; }
header.fixedHeader #nav li a { line-height: 21px;color: #818181; }
header.fixedHeader #nav li a.active,header.fixedHeader #nav li a:hover { border-bottom-color:#64c8b8; }

/* Parallax */
.parallax-container { position: relative;height:500px;width:100%;clear:both; }
.parallax-container .mainHeading { position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }
.parallax-container .mainHeading img { float:left;width:130px; }
.parallax-container .mainHeading h1 { color:#fff;font-size:55px;float:left;line-height:38px;padding:70px 0 0 20px;text-shadow: 0px 2px 2px rgba(150, 150, 150, 0.8); }
.parallax-container .mainHeading h2 { color:#fff;font-size:40px;text-align:center;font-family: 'Rokkitt', serif;font-weight:700;text-transform:uppercase; }
.parallax-window { min-height: 300px;background: transparent; }

/* Section */
section { margin:20px auto;padding: 90px 0 0;background: #fff;width:900px; }
section h2 { text-transform: uppercase;text-align: center;position: relative;color: #333;font-size: 30px;font-weight: 400; }
section h2:after { content: "";position: absolute;bottom: -20px;width: 60px;height: 1px;background-color: #64c8b8;left: 50%;margin-left: -30px; }
section .text { padding-top:25px; }
section p { text-align: center;margin-top: 45px;color: #333;line-height: 28px; }

section#about { padding-bottom:100px; }

h2.innerTitle { text-align:left;font-family: 'Rokkitt', serif;font-weight:700;font-size: 35px;line-height: 35px; }
h2.innerTitle:after { left: 0;margin-left:0; }

section#repairs { width:100%;margin:0 auto; }
section#repairs .repairsImage { width:50%;float:left; }
section#repairs .repairsImage img { width:100%;max-height:700px;overflow: hidden; float:right; }
section#repairs .repairsContent { width:46%;float:right;padding:30px 2% 0; }
section#repairs .repairsContent p { text-align:left; }

section#contact { margin:11px auto;padding:90px 0 140px; }
.contactPhone { font-size:30px;line-height:30px;padding-bottom:20px; }

section#alert { padding-top:30px;margin-bottom:0; }
.alert-info { color: #31708f;background-color: #d9edf7;padding: 15px;border: 1px solid #bce8f1;border-radius: 4px;font-weight:bold;	text-align:center;margin-top:45px; }

/* Footer */
footer { background: #64c8b8;padding: 70px 0;text-align: center; }
footer p { font-size: 16px;color: #fff; }
footer p.footerContent { margin-bottom:40px; }
footer a { color: #fff;text-decoration: none;font-size: 16px; }
footer a.rich { border-bottom:1px dotted #fff;padding-bottom:1px; }
footer a.rich:hover { border-bottom:1px solid #fff; }

#toTop { display:block;position:fixed;bottom:2%;right:1%;padding:5px 10px;background:#fff;opacity: 0.5; text-decoration:none;font-size:25px; }

@media only screen and (min-width: 1025px) {
    .mMenu { display:none; }
    #nav { display: block !important; }
}

@media only screen and (max-width: 1024px) {
    body { ‑webkit‑text‑size‑adjust: 100% }
    header .headerContainer { margin-bottom:8px; }
    header.fixedHeader #nav { margin-top: 8px; }
    .mMenu { color:#fff;display:block;font-size:35px;float:right;margin-top:8px;margin-bottom:0px; }
    .mMenu:hover { cursor:pointer; }
    .fixedHeader .mMenu { color:#333; }
    nav.table { float:none;display: table;margin: 0 auto;clear:both; }
    #nav { display: none;clear:both;margin:0;padding:0;text-align: center; }
    #nav li { display: inline;float: none;padding:0px 9px 10px;  }
    #nav li a { width:100%;font-size:17px; }
    #nav li a,#nav li a:hover { border-bottom:0; }
    nav ul li:hover a { border-bottom:1px solid #64c8b8; }
    
    .parallax-container .mainHeading img { width:120px; }
    .parallax-container .mainHeading h1 { font-size:50px;line-height:30px;padding:15px 0 0; }
    
    section { width:92%;padding: 90px 4% 0 4%; }
    section#about { padding-bottom:70px; }
    section#repairs { width:100%;float:none;margin:0;padding:50px 0 0; }
    section#repairs .repairsImage { width:100%;float:none;margin:0 0 30px;padding:0; }
    section#repairs .repairsImage img { width:100%;margin:0 auto;float:none; }
    section#repairs .repairsContent { width:90%;float:none;clear:both;padding-top:0;padding-bottom:40px; }
    
    
    section#contact { width:92%;padding: 50px 4% 70px; }
    
    .phone { border-bottom:1px dotted #333;padding-bottom:1px; }
    .footerPhone { border-bottom:1px dotted #fff; }
}

@media only screen and (max-width: 768px) {
    .parallax-container.parallax-2 { height:300px; }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    .parallax-container .mainHeading { position:absolute;top: 130px;left: 200px; }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .parallax-container .mainHeading { position:absolute;top: 130px;left: 300px; }
}

@media only screen and (max-width: 480px) {
    .parallax-container.parallax-2 { height:200px; }
    section#repairs .repairsContent { padding:0 4% 20px; }
    section#contact { padding-top:90px; }

}

@media only screen and (max-width: 375px) {
    .parallax-container { height:667px; }
    .parallax-container .mainHeading { top:48%; }
}

@media only screen and (max-width: 320px) {
    .parallax-container { height:568px; }
}