/* Item Name : Site Style Structure Item URL : http://www.andyquick.co.uk Author URL : http://andyquick.co.uk Version : 1.00 */ /* TABLE OF CONTENTS 01 Universal Styles 1. Typography presets 2. Nav General 3. Image General 4. Backgriounds 5. Link General 6. List Classes 7. Contact Form 8. Footer 9. Max Width */ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 1. TYPOGRPHY PRESETS */ /* ===========================================================================================================================*/ /* ------Universal Type------------ */ h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', Arial, Helvetica, sans-serif; } h1 {font-size:3em;line-height:1em; margin-bottom:0.5em; color:#ffde00; font-style: normal; font-weight: 300; font-family: 'Yanone Kaffeesatz', Oswald, Arial, Helvetica, sans-serif; } h2 {font-size:1.8em; line-height:1.2em; margin-bottom:0.25em; color:#787878; font-style: normal; font-weight: 500; font-family: 'Yanone Kaffeesatz', Oswald, Arial, Helvetica, sans-serif; } h3 {font-size:1.5em;line-height:1.2em; margin-bottom:.5em; color:#787878; font-weight: 300; font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;} h4 {font-size:1.1em;line-height:1.3em;margin-bottom:.5em; color:#f5f5f5; font-weight: 300; font-family: 'Oswald', Arial, Helvetica, sans-serif;} h5 {font-size:1.1em; line-height:1.4em; font-weight: 300; margin-bottom:.5em; color:#8b8b8b; font-family:'Oswald', Arial, Helvetica, sans-serif;} h6 {font-size:.9em; line-height:1.6em; font-weight: 400; margin-bottom:.9em; color:#555555; font-family:'Oswald', Arial, Helvetica, sans-serif;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} p {font-size:.9em; font-weight: normal;margin:0 0 .9em; text-transform: none; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#cdcdcd; } b {font-weight:bold; color:#ffde00! important; font-size:1em; margin:0 0 1.5em; font-family:'Yanone Kaffeesatz', 'open_sansregular', Arial, Helvetica, sans-serif;} /*b {font-weight:bold; color:#daedf9; font-size:1em; margin:0 0 1.5em; font-family:'open_sansregular', Arial, Helvetica, sans-serif;}*/ p.slide {font-size:1.9em margin:0 0 .9em; text-transform: none; font-family: 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif; color:#cdcdcd; } b.slide {font-size:1.9em font-weight:bold; color:#daedf9; margin:0 0 1.5em; font-family: 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;} p.subject {color:#787878; font-size: .9em; font-weight: bold; line-height:.5; } p.title {color:#373737; font-size: .9em; font-weight: bold; line-height:.5; } p.info {font-size:.9em; line-height:1.2; margin:0 0 1.5em; text-transform: none; font-family:'Open Sans', Arial, Helvetica, sans-serif; } p.lb {color:#676767; font-size: .7em; } /* Legal bit Yanone Kaffeesatz */ .credittext {color:#676767; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size:.75em; padding:8px 0 0 0;} .credittext:hover{color:#ffffff; transition: all 0.3s ease-in;text-shadow: 0px 0px 14px rgba(255, 222, 0, 1), 0px 0px 6px rgba(255, 222, 0, 1);} h2.paradark, h3.paradark{color:#000;} p.paradark{color:#292929;} h2.paralight, h3.paralight{color:#ffde00;} p.paralight{color:#c1c1c1;} .click {color:#717171; font-size: .8em;} .white {color:#ffffff; text-shadow: 0px 4px 6px rgba(000,000,000,1), 0px 0px 6px rgba(000,000,000,1), 0px 1px 0px rgba(255,255,255,0.3);} /* ------Site Specific Type------------ */ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 2. NAVIGATION GENERAL */ /* ===========================================================================================================================*/ /* ------General------------ */ .header {height:50px; } #menu_text {float: left; position:relative; top:15px; font-size:.9em;line-height:1.30; color:#a0a0a0; text-transform: uppercase; font-family: 'Oswald', 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif; z-index:3;} /* ------Mobile Nav------------ */ li.linkSpacer {height: 12px;text-align: center;color:#4699e7; position: relative; top:2px;} /*a.selected:link, a.selected:visited, a.selected:active, a.selected:hover {color:#07fa12; } a.selected:hover {color:#ffffff; }*/ .mobnav {font-size:1em; font-family:'Open Sans', Arial, Helvetica, sans-serif; padding: 10px 20px 0 20px;} /* ------End of Mob------------ */ /* ------Desktop Nav------------ */ #nav {float: right; z-index:100; padding: 0 10px 0 0;} ul.menu li { text-align: center; padding: 0 0 8px 0;} ul.menu li { text-align: center; padding: 10px 0 0 0;} ul.menu li { display: inline-block; } li.linkSpacer {height: 12px;text-align: center;color:#636363; position: relative; top:0px; } a.menulink:link { text-align:left; text-transform: uppercase; font-family: 'oswald', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color:#a0a0a0; text-decoration: none;border-style: none; position: relative; top:3px; transition: all 0.3s ease-in;} a.menulink:visited {text-align:left; text-transform: uppercase; font-family: 'oswald', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #a0a0a0; text-decoration: none;border-style: none; position: relative; top:3px; transition: all 0.3s ease-in;} a.menulink:hover { text-align:left; text-transform: uppercase; font-family: 'oswald', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #ffffff; text-decoration: none;border-style: none; position: relative; top:3px;transition: all 0.3s ease-in;text-shadow: 0px 0px 14px rgba(255, 222, 0, 1), 0px 0px 6px rgba(255, 222, 0, 1);} a.menulink:active { text-align:left; text-transform: uppercase; font-family: 'oswald', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #a0a0a0; text-decoration: none;border-style: none; position: relative; top:3px; transition: all 0.3s ease-in;} a.link:link { text-align:left; text-transform: uppercase; font-family: 'Open Sans', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color:#ffde00; text-decoration: none;border-style: none; position: relative; top:0px; transition: all 0.3s ease-in;} a.link:visited {text-align:left; text-transform: uppercase; font-family: 'Open Sans', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #ffde00; text-decoration: none;border-style: none; position: relative; top:0px; transition: all 0.3s ease-in;} a.link:hover { text-align:left; text-transform: uppercase; font-family: 'Open Sans', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #ffffff; text-decoration: none;border-style: none; position: relative; top:0px;transition: all 0.3s ease-in;text-shadow: 0px 0px 14px rgba(255, 222, 0, 1), 0px 0px 6px rgba(255, 222, 0, 1);} a.link:active { text-align:left; text-transform: uppercase; font-family: 'Open Sans', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: .9em; color: #ffde00; text-decoration: none;border-style: none; position: relative; top:0px; transition: all 0.3s ease-in;} ffde00 .selected { text-align:left; text-transform: uppercase; font-family: 'oswald', Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; border-style: none; position: relative; top:3px;text-shadow: 0px 0px 14px rgba(255, 222, 0, 1), 0px 0px 6px rgba(255, 222, 0, 1);} /*Makes Menu disappear! Pancake menu, It appears using max width area 660 at bottom */ #my-menu, #pancake{visibility: hidden; } #nav {visibility: visible; position: relative; top: -5px;} .topbar{ width:100%; margin:0 auto; background:#000000; background:rgba(0,0,0,0.8); z-index:100; height: 50px;} .topmenu{ max-width:1320px; margin:0 auto;} /* ------End of Desktop------------ */ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 3. IMAGE GENERAL */ /* ===========================================================================================================================*/ img.centerlogo {width: 80%; max-width:283px; margin: auto; position:absolute; left: 0; right: 0; top: 80px; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */} img.img_test {width: 200px !important; margin:0 auto; }/* was 300px */ .main {background-color:#000;} /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 4. BACKGROUNDS */ /* ===========================================================================================================================*/ /* background setup */ .vis{overflow: visible !important;} /* ===PARALLAX=================================*/ .background { background-repeat:no-repeat; /* custom background-position */ background-position:50% 50%; /* ie8- graceful degradation */ background-position:50% 50%\9 !important; } /* fullscreen setup */ /*html, body { /* give this to all tags from html to .fullscreen */ /*height:100%;}*/ .fullscreen, .content-a { width:100%; min-height:100%; } .not-fullscreen, .not-fullscreen .content-a, .fullscreen.not-overflow, .fullscreen.not-overflow .content-a { height:100%; overflow:hidden; } /* ===Content Centering Styles ======== display:table;*/ .content-a { display:table; } .content-b { vertical-align:middle; text-align:left; height:600px; text-align: left; display: table; } .content-c { vertical-align:middle; text-align:center; height:300px; } .vert{display: table-cell; vertical-align: middle;} /* ===END OF PARALLAX=================================*/ /* visual styles */ /*body{margin:0;font-family:sans-serif;font-size:28px;line-height:100px;color:#ffffff;text-align:center;}9ed100*/ section { background:#ffffff; } .not-fullscreen { height:50%; } .clients {background-color:#ffde00; width: 100%;} /* ===WRAP ELEMENTS=================================*/ /* ===Trapezoid Slope right to left===========*/ .wrap { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); } .wrap.nudge-a { -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); position: relative; top: 104px; } .wrap.nudge-b { -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); position: relative; top: -104px; } /* ===Trapezoid Slope left to right===========*/ .wrap2 { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); } .wrap2.nudge-a { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); position: relative; } .wrap3 { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%); position: relative; } .wrap4 { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); } .wrap4.nudge-a { -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); -moz-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .wrap.nudge-a {position: relative; top: 0px;} .wrap.nudge-b {position: relative; top: 0px;} .wrap2.nudge-a {position: relative; } .wrap4.nudge-a {position: relative; } } /* ===END OF WRAP ELEMENTS=================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 5. LINKS GENERAL */ /* ===========================================================================================================================*/ /* ------logo_links------------ */ .logo {position: relative; top: 3px; display: inline-block; position: relative; text-indent: -9999px; width: 56px; height: 45px; background: url(../img/interface/logo.png) no-repeat; z-index:20; overflow:hidden; } .logo:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo.png) no-repeat; background-position: 0 -45px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo:hover:after {opacity: 1;} .logomob {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 75px; height: 60px; background: url(../img/interface/logo2.png) no-repeat; overflow:hidden; } .logomob:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo2.png) no-repeat; background-position: 0 -60px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logomob:hover:after {opacity: 1;} /* ------Logo aq------------ */ .logo_aq {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 44px; height: 35px; background: url(../img/interface/logo_aq.png) no-repeat; overflow:hidden; } .logo_aq:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_aq.png) no-repeat; background-position: 0 -35px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_aq:hover:after {opacity: 1;} /* ------Icon ----------- */ .icon {width:127px;} /* ------Icon home------------ */ .icon_home {display: inline-block; text-align: center;position: relative; top: 9px; text-indent: -9999px; width: 25px; height: 25px; background: url(../img/interface/icon_home.png) no-repeat; overflow:hidden; } .icon_home:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/icon_home.png) no-repeat; background-position: 0 -25px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .icon_home:hover:after {opacity: 1;} /* ------social_links------------ */ .logo_twit {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 32px; height: 32px; background: url(../img/interface/logo_social.png) no-repeat; overflow:hidden; } .logo_twit:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_social.png) no-repeat; background-position: 0 -32px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_twit:hover:after {opacity: 1;} .logo_face {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 32px; height: 32px; background: url(../img/interface/logo_social.png) no-repeat; background-position: -32px 0; overflow:hidden; } .logo_face:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_social.png) no-repeat; background-position: -32px -32px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_face:hover:after {opacity: 1;} .logo_dri {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 32px; height: 32px; background: url(../img/interface/logo_social.png) no-repeat; background-position: -64px 0; overflow:hidden; } .logo_dri:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_social.png) no-repeat; background-position: -64px -32px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_dri:hover:after {opacity: 1;} .logo_be {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 32px; height: 32px; background: url(../img/interface/logo_social.png) no-repeat; background-position: -96px 0; overflow:hidden; } .logo_be:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_social.png) no-repeat; background-position: -96px -32px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_be:hover:after {opacity: 1;} .logo_dev {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 32px; height: 32px; background: url(../img/interface/logo_social.png) no-repeat; background-position: -128px 0; overflow:hidden; } .logo_dev:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_social.png) no-repeat; background-position: -128px -32px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo_dev:hover:after {opacity: 1;} /* ------seemore------------ */ .mag {position: relative; top: 0px; display: inline-block; position: relative; text-indent: -9999px; width: 35px; height: 35px; background: url(../img/interface/mag.png) no-repeat; z-index:20; overflow:hidden;} .mag:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/mag.png) no-repeat; background-position: 0 -35px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; } .mag:hover:after {opacity: 1;} /* ------me------------ */ .me1 {display: inline-block; position: relative; cursor:default; text-indent: -9999px; width: 359px; height: 415px; background: url(../img/interface/me1.png) no-repeat; overflow:hidden; } .me1:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/me1.png) no-repeat; background-position: 0 -415px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .me1:hover:after {opacity: 1;} .me2 {display: inline-block; position: relative; cursor:default; text-indent: -9999px; width: 359px; height: 415px; background: url(../img/interface/me2.png) no-repeat; overflow:hidden; } .me2:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/me2.png) no-repeat; background-position: 0 -415px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .me2:hover:after {opacity: 1;} .me3 {display: inline-block; position: relative; cursor:default; text-indent: -9999px; width: 359px; height: 415px; background: url(../img/interface/me3.png) no-repeat; overflow:hidden; } .me3:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/me3.png) no-repeat; background-position: 0 -415px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .me3:hover:after {opacity: 1;} /* ------button hover------------ */ .btn { background: #4a4a4a; /* background-image: -webkit-linear-gradient(top, #4a4a4a, #000000); background-image: -moz-linear-gradient(top, #4a4a4a, #000000); background-image: -ms-linear-gradient(top, #4a4a4a, #000000); background-image: -o-linear-gradient(top, #4a4a4a, #000000); background-image: linear-gradient(to bottom, #4a4a4a, #000000);*/ -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; font-family: 'oswald', Arial, Helvetica, sans-serif; color: #cecece; font-size: 16px; padding: 10px 20px 10px 20px; border: 2px solid #6c6c6c; text-decoration: none; } .btn:hover { background: #ffde00; /* background-image: -webkit-linear-gradient(top, #0056a1, #000000); background-image: -moz-linear-gradient(top, #0056a1, #000000); background-image: -ms-linear-gradient(top, #0056a1, #000000); background-image: -o-linear-gradient(top, #0056a1, #000000); background-image: linear-gradient(to bottom, #0056a1, #000000);*/ border: 2px solid #ffde00; text-decoration: none; color: #000; } .seemore { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; font-family: Arial; color: #ffffff !important; line-height:2.8em; font-size: 1.2em; padding: 10px 20px 10px 20px; border: solid rgba(255,255,255,1) 2px; text-decoration: none; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.9), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.9), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.9), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px 0px 3px rgba(000,000,000,1), 0px 0px 2px rgba(255,255,255,0.3); } .seemore:hover { background: rgba(255,255,255,.3); text-decoration: none; } .grey{-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */transition: filter .5s ease-in-out;} .grey:hover{-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(0); /* Microsoft Edge and Firefox 35+ */transition: filter .5s ease-in-out;} .yellow{-webkit-filter:transition: filter .5s ease-in-out;} .yellow:hover{-webkit-filter: transition: filter .5s ease-in-out; -webkit-filter: grayscale(100%) brightness(180%) sepia(100%) hue-rotate(5deg) saturate(2000%) contrast(2); filter: grayscale(100%) brightness(180%) sepia(100%) hue-rotate(5deg) saturate(2000%) contrast(2); } /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ ul li.list{ list-style-type: disc; list-style-position: inside; padding: 0px 0 0px 25px; text-indent: -1.4em; font-size: .9em; margin: 0 0 .4em; text-transform: none; font-family: 'Open Sans', Arial, Helvetica, sans-serif; } /* ===========================================================================================================================*/ /* 5. LINKS GENERAL */ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 7. CONTACT FORM */ /* ===========================================================================================================================*/ /*----Form elements--------width:550px------------*/ #formholder {width:86%; border:2px solid #333; padding:5% 5% 5% 5%; } #formleft {position:relative; float:left; } fieldset {position:relative; left:0px; } input {background-color:#ededed; border:0px solid #c8c8c8; padding:0 0 0 5px; font-weight: 300; font:.9em/1.1em 'Oswald', Verdana, Arial, Helvetica, sans-serif; line-height:15px; color:#3b3b3b;} input, textarea {width:96%; border:1px solid #dadada; padding:5px;margin:0px 0 0 0; }/*Border for text areas*/ input:focus, textarea:focus {background:#545454; color:#ffffff;} textarea {font-weight: 300; font:.9em/1.1em 'Oswald', Verdana, Arial, Helvetica, sans-serif; border:1px solid #dadada; background:#ededed; } /*-- Text area big --*/ label {display:block; padding:0px 10px 5px 0; font-weight:300; font: 0.9em/1.1em 'Oswald', Tahoma, Verdana, Arial, sans-serif; text-align:left; color: #bbb; } /*text-shadow: 0px -1px 1px #e0dede;*/ label:after {content:": ";} .spacerform { height: 10px; width:50%;} select {background-color: #bee5fe; color: #3b3b3b; font-weight: 300; font:.9em/1.1em 'Oswald', Verdana, Arial, Helvetica, sans-serif; } .formbut {width:100px; text-align:center; margin:0 auto; } .padtop {padding: 10% 0 0 0;} /* User feedback -----------------------*/ p.yay, p.oops {font-size:.8em;text-align:center;padding:10px;color:#ffffff;font-weight:700; width:90%;position:relative; } .yay {background:#090;} .oops {background:#f30;} div.error {font-size:.8em;font-weight:700;padding:5px 0 0;color:#f30;margin:0 0 0 90px;} /* Captcha -----------------------*/ .formimg {margin:0 0 0 0px;display:block; } /*---^^^^---------------End of Form--------------------------------------------------------^^^^---*/ /* ===========================================================================================================================*/ /* 8. FOOTER */ /* ===========================================================================================================================*/ ul.ftmenu, ul.ftmenulogo { text-align: center; padding: 0 0 2px 0;} ul.ftmenu li, ul.ftmenulogo li{ display: inline-block; } .line {border-top: 1px solid #2e2e2e; padding:0 0 4px 0;} .credit {overflow:visible; margin:0 auto; height: 40px; background: #0d0d0d; border-top: 1px solid #151515;} /* text element -see section 1 */ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* ===========================================================================================================================*/ /* 9. MAX WIDTH */ /* ===========================================================================================================================*/ /* ---------------------------------------------------------------- */ /*@media only screen and (max-width:820px) { */ /* ---------------------------------------------------------------- */ @media only screen and (max-width:820px) { .imgsol{max-width: 70%; height: auto;} .wrap4 { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); -moz-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); } .wrap4.nudge-a { -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); -moz-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); } } /* ------@media only screen and (max-width:767px------------ */ @media only screen and (max-width:767px) { .content-b { vertical-align:middle; text-align:left; height:400px; text-align: left; display: table; } h1 {font-size:1.8em;line-height:1em; margin-bottom:0.5em; color:#ffde00; font-style: normal; font-weight: 300; font-family: 'Yanone Kaffeesatz', Oswald, Arial, Helvetica, sans-serif; } h2 {font-size:1.6em; line-height:1.2em; margin-bottom:0.25em; color:#787878; font-style: normal; font-weight: 500; font-family: 'Yanone Kaffeesatz', Oswald, Arial, Helvetica, sans-serif; } h3 {font-size:1.2em;line-height:1.2em; margin-bottom:.5em; color:#787878; font-weight: 300; font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;} p {font-size:.85em; margin:0 0 .9em; text-transform: none; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#cdcdcd; } .imgvis2 {display:none;} } /* ===========================================================================================================================*/ /* ------@media only screen and (max-width:600px------------ */ @media only screen and (max-width:600px) { .header {height:50px;} #menu_text { float: left; position:relative; top:15px; z-index:3; position:relative; font-size:.9em; color:#a0a0a0; text-transform: uppercase; font-family: 'Oswald', 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif; } .imgvis {display:none;} /* ---------------------------------------------------------------- */ /* Makes Mob-Menu appear! Pancake menu, and Desk Nav Disappear */ #my-menu, #pancake{ visibility: visible; } #nav {visibility: hidden; display:none;} /* ---------------------------------------------------------------- */ ul.ftmenu li { display: block;} ul.ftmenulogo li{ display: inline-block; } li.linkSpacer {height:0px; visibility: hidden;} .logo {display: inline-block; position: relative; top:5px; text-indent: -9999px; width: 50px; height: 40px; background: url(../img/interface/logo_sm.png) no-repeat; z-index:20; overflow:hidden; } .logo:after {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo_sm.png) no-repeat; background-position: 0 -40px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logo:hover:after {opacity: 1;} /* ===Trapezoid Slope right to left===========*/ .content-c { vertical-align:middle; text-align:center; height:760px; } .wrap { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); -moz-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); } .wrap.nudge-a { -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); -moz-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); position: relative; top: 104px; } .wrap.nudge-b { -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); -moz-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); position: relative; top: -104px; } /* ===Trapezoid Slope left to right===========*/ .wrap2 { -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); } .wrap2.nudge-a { -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%); position: relative; } .wrap3 { -webkit-clip-path: polygon(0 0,100% 5%, 100% 95%, 0% 100%); -moz-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%); clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%); } .wrap4 { display:table; height:100%; width:100%; background-size:cover; -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); -moz-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); } .wrap4.nudge-a { -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); -moz-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); } /* ===END OFTrapezoid Slope left to right===========*/ } /* ------END @media only screen and (max-width:600px)------------ */ /* ===========================================================================================================================*/ /* ------@media only screen and (max-width:479px)------------ */ @media only screen and (max-width:479px) { .header {height:50px;} #menu_text {position:relative; top:20px; font-size:.7em;line-height:1.30; color:#a0a0a0; text-transform: uppercase; font-family: 'Oswald', 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif; } .logomob {display: inline-block; text-align: center;position: relative; text-indent: -9999px; width: 50px; height: 40px; background: url(../img/interface/logo2_sm.png) no-repeat; overflow:hidden; } .logomob:after {content: ""; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../img/interface/logo2_sm.png) no-repeat; background-position: 0 -40px; opacity: 0;-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s;} .logomob:hover:after {opacity: 1;} .content-c {vertical-align:middle; text-align:center; height:800px;} } /* ===========================================================================================================================*/ /* ===========================================================================================================================*/