/* ======================== - Note: These styles are just to pretty the basic page up a bit. You should ignore these when copying and pasting into your site because your stylesheet should take care of making it look pretty! ======================== */ body {margin: 0 auto; font : 100%/1.4 'Open Sans', sans-serif; letter-spacing: 0.2em;} h1 {font-size:2.2em; padding:0 0 .5em 0;} h2 {font-size:1.5em;} .col {padding:1em 0; text-align:center;} .form_qb {display: none;} .error_notice { text-align: center; font-size: .8em; font-weight: bold; color: #F00; } /* ======================== My Styles ======================== */ body { background-image: url("../images/backgrounds/marbleBG-5500.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1.2em; } .container {max-width: 1300px; min-width: 320px; margin: 0 auto; padding: 0 10%;} .inside-container { border: solid 2px #000;} /* ======================== MENU STYLES ======================== */ #top_menu { background-color: #000; width: 100%; position: fixed; z-index: 2000; } #menu_container {max-width: 1300px;min-width: 320px;margin: 0 auto;padding: 0 10%;} .nav { font-size: 1em; } .menu_title { display: inline-block; color: #fff; font-weight: 700; vertical-align: middle; line-height: 55px; } .menu_title a:link { text-decoration: none; color: #fff; } .menu_title a:visited { color: #fff;} .menu_title a:hover {} .menu_title a:active {} #text-unveiling { text-align: center; } #text-4door { text-align: center; padding: 2% 0 5% 0; } #text-date { margin-bottom: 2%; } /* ======================== MAIN AREA STYLES ======================== */ #main_menupad { height: 55px; } #mainslide1 { background-image: url("../images/slider/1680/cuda1.png"); background-size: cover; background-repeat: no-repeat; } #mainslide2 { background-image: url("../images/slider/1680/cuda2.png"); background-size: cover; background-repeat: no-repeat; } #mainslide3 { background-image: url("../images/slider/1680/cuda3.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide4 { background-image: url("../images/slider/1680/cuda4.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide5 { background-image: url("../images/slider/1680/cuda5.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide6 { background-image: url("../images/slider/1680/cuda6.png"); background-size: cover; background-repeat: no-repeat; } #mainslide7 { background-image: url("../images/slider/1680/cuda7.jpg"); background-size: cover; background-repeat: no-repeat; } #main_heading { background-color: #fff; border-top: solid 4px #000; position: relative; top:-7px; text-align: center; font-weight: 900; padding-bottom: 20px; } #main_the { font-size: 2em; padding: 2% 0; } #main_4door { font-size: 3.5em; } /* ======================== HISTORY AREA STYLES ======================== */ #history { padding-top: 50px; background-color: #fff; position: relative; top:-7px; } #history_container { text-align: left; padding: 20px 8%; } #history_header { font-size: 1.2em; font-weight: 900; padding-bottom: 20px; } #history_maintext { text-align: justify; letter-spacing: 0em; } #history_dwsign { float: right; max-width:40%;padding-top: 20px; } /* ======================== THANKS AREA STYLES ======================== */ .thanks_c { margin-bottom: 30px; } .thanks_p { margin-bottom: 20px; } .thanks_p a { font-size: .8em; letter-spacing: 0.1em; color: #888; text-decoration: none; } .thanks_p a:hover { text-decoration: underline; color: #f00;} /* ======================== EVENTS AREA STYLES ======================== */ #events { padding-top: 50px; background-color: #d70b1b; position: relative; top:-7px; } #events_container { text-align: left; padding: 20px 8%; background-color: #d70b1b; } #events_header { font-size: 3em; font-weight: 900; padding-bottom: 20px; color:#fff; } .events_event { letter-spacing: .2em; font-size: 1em;} .events_maintext { font-weight:700; color:#fff; padding-bottom: 10px; } .events_boxlink { background-color:#000; padding: 20px; margin-top:20px; display:block; width: 20%; color:#fff; font-weight: 400;text-decoration: none;} .events_boxlink:visited { color: #fff; } .events_boxlink:hover { color: red; background-color: #eee; } .events_ar:before { font-family: "icon-font";content: "\E006"; } .events_spacer { height: 80px; } /* ======================== MEDIA AREA STYLES ======================== */ #media { padding-top: 50px; background-color: #fff; position: relative; top:-7px; } #media_container { text-align: left; padding: 50px 8%; background-color: #fff; } #media_header { font-size: 3em; font-weight: 900; padding-bottom: 20px; color:#000; } .media_art_wrapper { width: 100%; } .media_text_wrapper { padding-right: 30px; text-align: left;} .media_maintext { letter-spacing: .1em; font-size: 1em; color:#000; padding-bottom: 10px; text-decoration: none; } .media_maintext:hover { text-decoration: underline; } .media_source { letter-spacing: .1em; font-size: .7em; color:#999; } .media_hr { border: 1px solid #bbb; } .media_boxlink { background-color:#000; padding: 20px; margin-top:20px; display:block; width: 50%; color:#fff; font-weight: 400; text-decoration: none;} .media_boxlink:visited { color: #fff; } .media_boxlink:hover { color: red; background-color: #eee; } .media_ar:before { font-family: "icon-font";content: "\E006"; } .media_img { max-width: 100%; } .media_spacer { height: 80px; } /* ======================== VIDEO AREA STYLES ======================== */ #videos { padding-top: 50px; background-color: #fff; position: relative; top:-7px; } #videos_container { text-align: left; padding: 50px 8%; background-color: #fff; } #videos_header { font-size: 3em; font-weight: 900; padding-bottom: 20px; color:#000; } /* ======================== GALLERY AREA STYLES ======================== */ #gallery_container { text-align: center; } #gallery_header { font-size: 3em; font-weight: 900; padding-bottom: 20px; color:#000; } .gallery_wrapper { display: table; table-layout: fixed; width: 100%;} .gallery_buttondiv { display: table-cell; vertical-align: middle; width: 50%; font-size: 2.5em; font-weight: 700; color: #fff; background-image: url("../images/gallery/mainpage_menu/1680/bg_texture.jpg"); background-size: cover; background-repeat: no-repeat; } .gallery_img_div { display: table-cell; width: 50%; } .gallery_boxlink { background-color:#fff; display:block; color:#000; font-size: .4em; font-weight: 400; letter-spacing: 0em; text-decoration: none; margin: 10% 20% 0 20%; padding: 20px 0; } .gallery_boxlink:visited { color: #000; } .gallery_boxlink:hover { color: red; background-color: #eee; } .gallery_ar:before { font-family: "icon-font";content: "\E006"; } #gallery_body_bu { background-image: url("../images/gallery/mainpage_menu/1680/body_unfinished.jpg"); background-size: cover; background-repeat: no-repeat; } #gallery_body_pp { background-image: url("../images/gallery/mainpage_menu/1680/paint_phases.jpg"); background-size: cover; background-repeat: no-repeat; } #gallery_body_en { background-image: url("../images/gallery/mainpage_menu/1680/engine.jpg"); background-size: cover; background-repeat: no-repeat; } #gallery_body_in { background-image: url("../images/gallery/mainpage_menu/1680/interior.jpg"); background-size: cover; background-repeat: no-repeat; } #gallery_body_mi { background-image: url("../images/gallery/mainpage_menu/1680/miscellaneous.jpg"); background-size: cover; background-repeat: no-repeat; } #gallery_body_bf { background-image: url("../images/gallery/mainpage_menu/1680/body_finished.jpg"); background-size: cover; background-repeat: no-repeat; } .gallery_img { max-width:100%; } .gallery2_header { text-align: left; font-weight: 700; font-size: 1.5em; padding-top: 75px; padding-bottom: 25px; } .gallery_thumb:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } /* ======================== PRODUCTS AREA STYLES ======================== */ .products_logo { width: 20%; float: left; } #products_container { text-align: center; padding: 20px 8%; } #products_intro { font-size: 2em; font-weight: 900; padding-top: 20px; color:#fff; } #products_header { font-size: 2.7em; font-weight: 900; padding-bottom: 20px; color:#fff; } .products_imgborder { padding: 10px; } .products_img { max-width:100%; border: solid 5px #000; } #products_maintext { letter-spacing: 0em; } .products_link { color: #f00; text-decoration: none; letter-spacing: 0em;} .products_link:visited { color: #f00; } .products_link:hover { color: #f00; text-decoration: underline; } #products_footer { text-align: center; font-weight: 900; } #products_car { max-width:100%; background-image: url("../images/products/1680/car.png"); background-size: cover; background-repeat: no-repeat; } /* ======================== RESPONSIVE STYLES ======================== */ @media only screen and (max-width: 1200px) { /* ============================================ Regular/Hamburger Menu styles Also change nav-layout.css (@media only screen and (min-width: same_as_above-px)) & nav-core.css (@media only screen and (min-width: same_as_above-px)) ============================================ */ #history { padding-top: 75px; } #events { padding-top: 75px; } #media { padding-top: 75px; } #main_menupad { height: 75px; } .menu_title {font-size: 1.5vw; line-height: 75px; } } @media all and (min-width: 1680px) { #main_the { font-size: 2em; } #main_4door { font-size: 3.5em; } } @media all and (max-width: 1679px) and (min-width: 1000px) { body { background-image: url("../images/backgrounds/marbleBG-3040.jpg"); } .inside-container { border-color: #0f0; } .nav { font-size: 1.1vw; } .unslider-nav { top: 93%;} #main_the { font-size: 2vw; } #main_4door { font-size: 3.5vw; } .events_boxlink { width: 30%; } .media_boxlink { width: 60%; } .gallery_buttondiv { font-size: 2.8vw; } .gallery_boxlink { font-size: 1vw; } #products_header { font-size: 3.5vw; } #products_intro { font-size: 2.5vw; } .thanks_p a { font-size: 1.1vw; } } @media all and (max-width: 999px) and (min-width: 650px) { body { background-image: url("../images/backgrounds/marbleBG-2200.jpg"); } #text-unveiling { font-size: 2.3vw; } #text-4door { font-size: 5.1vw; } #text-date { font-size: 3.4vw; } #text-show { font-size: 1.9vw; } #menu_container { padding: 0 5%; } .container {padding: 0 5%;} .inside-container { border-color: #00f; } .nav { font-size: 1.5vw; } .unslider-nav { top: 92%;} #mainslide1 { background-image: url("../images/slider/999/cuda1.png"); background-size: cover; background-repeat: no-repeat; } #mainslide2 { background-image: url("../images/slider/999/cuda2.png"); background-size: cover; background-repeat: no-repeat; } #mainslide3 { background-image: url("../images/slider/999/cuda3.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide4 { background-image: url("../images/slider/999/cuda4.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide5 { background-image: url("../images/slider/999/cuda5.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide6 { background-image: url("../images/slider/999/cuda6.png"); background-size: cover; background-repeat: no-repeat; } #mainslide7 { background-image: url("../images/slider/999/cuda7.jpg"); background-size: cover; background-repeat: no-repeat; } #main_4door { font-size: 3.5vw; } #main_the { font-size: 2vw; } #history_dwsign { max-width: 50%; } .thanks_c { font-size: 1.7vw; } .thanks_p { font-size: 1.7vw; } .thanks_p a { font-size: 1.3vw; } .events_boxlink { width: 35%; } .events_event { font-size: 2vw;} .media_maintext { font-size: 2vw; } .media_source { font-size: 1.5vw; } .media_boxlink { width: 75%; } .gallery_buttondiv { font-size: 2.8vw; background-image: url("../images/gallery/mainpage_menu/999/bg_texture.jpg"); } .gallery_boxlink { font-size: 1.5vw; } #gallery_body_bu { background-image: url("../images/gallery/mainpage_menu/999/body_unfinished.jpg"); } #gallery_body_pp { background-image: url("../images/gallery/mainpage_menu/999/paint_phases.jpg"); } #gallery_body_en { background-image: url("../images/gallery/mainpage_menu/999/engine.jpg"); } #gallery_body_in { background-image: url("../images/gallery/mainpage_menu/999/interior.jpg"); } #gallery_body_mi { background-image: url("../images/gallery/mainpage_menu/999/miscellaneous.jpg"); } #gallery_body_bf { background-image: url("../images/gallery/mainpage_menu/999/body_finished.jpg"); } #gallery_header { font-size: 6vw; } .gallery2_header { font-size: 2.9vw; } .gallery_thumb {max-width: 60px; } #products_intro { font-size: 3.2vw; } #products_header { font-size: 3.7vw; } #products_car { max-width:100%; background-image: url("../images/products/999/car.png"); } } @media only screen and (max-width: 649px) { body { background-image: url("../images/backgrounds/marbleBG-900.jpg"); } #menu_container { padding: 0 2%; } .container {padding: 0 2%;} .inside-container { border-color: #000; } .menu_title {font-size: 3vw; } .unslider-nav { top: 86%;} #mainslide1 { background-image: url("../images/slider/649/cuda1.png"); background-size: cover; background-repeat: no-repeat; } #mainslide2 { background-image: url("../images/slider/649/cuda2.png"); background-size: cover; background-repeat: no-repeat; } #mainslide3 { background-image: url("../images/slider/649/cuda3.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide4 { background-image: url("../images/slider/649/cuda4.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide5 { background-image: url("../images/slider/649/cuda5.jpg"); background-size: cover; background-repeat: no-repeat; } #mainslide6 { background-image: url("../images/slider/649/cuda6.png"); background-size: cover; background-repeat: no-repeat; } #mainslide7 { background-image: url("../images/slider/649/cuda7.jpg"); background-size: cover; background-repeat: no-repeat; } #main_4door { font-size: 1.2em; } #main_the { font-size: .8em; } #history_dwsign { max-width: 60%; } .thanks_c { font-size: 2.5vw; } .thanks_p { font-size: 2vw; } .thanks_p a { font-size: 1.5vw; } .events_boxlink { width: 40%; } .events_event { font-size: 2.6vw; } .media_boxlink { width: 70%; } .gallery_buttondiv { font-size: 2.8vw; background-image: url("../images/gallery/mainpage_menu/649/bg_texture.jpg"); } .gallery_boxlink { font-size: 1.5vw; } #gallery_body_bu { background-image: url("../images/gallery/mainpage_menu/649/body_unfinished.jpg"); } #gallery_body_pp { background-image: url("../images/gallery/mainpage_menu/649/paint_phases.jpg"); } #gallery_body_en { background-image: url("../images/gallery/mainpage_menu/649/engine.jpg"); } #gallery_body_in { background-image: url("../images/gallery/mainpage_menu/649/interior.jpg"); } #gallery_body_mi { background-image: url("../images/gallery/mainpage_menu/649/miscellaneous.jpg"); } #gallery_body_bf { background-image: url("../images/gallery/mainpage_menu/649/body_finished.jpg"); } #gallery_header { font-size: 6vw; } .gallery2_header { font-size: 5vw; } .gallery_thumb {max-width: 50px; } #products_intro { font-size: 3vw; } #products_header { font-size: 3.3vw; } #products_car { max-width:100%; background-image: url("../images/products/649/car.png"); } } @media only screen and (max-width: 550px) { .thanks_c { font-size: 1em; } .thanks_p { font-size: 1em; } .thanks_p a { font-size: 2.5vw; } .media_boxlink { display: none; } .media_text_wrapper { text-align: center; padding: 0;} }