/* Theme Name: Blue Dot Author: Orbit Design Author URI: www.orbit-design.com Template: Divi Version: 17 Description: A Child Theme built using the elegantmarketplace.com Child theme maker Developed by Andrew Palmer for Elegant Marketplace www.elegantmarketplace.com Free to use and duplicate as many times as you like Wordpress Version: 4.7.5 */ /* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ #spacer {position: relative; padding-top:97px;background-color: #32B5E0;} #page-container { max-width: 1920px; margin: -1px auto auto; } #main-header{max-width: 1920px;} @font-face { font-family: 'spinc'; src: url('/fonts/spinc.eot'); src: url('/fonts/spinc.eot') format('embedded-opentype'), url('/fonts/spinc.woff2') format('woff2'), url('/fonts/spinc.woff') format('woff'), url('/fonts/spinc.ttf') format('truetype'), url('/fonts/spinc.svg') format('svg'); font-weight: normal; font-style: normal; } .lity.lity-opened { opacity: 1; z-index: 999999; } /* -------- mobile menu styling #main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; } #main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; } #main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; } #main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; } #main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;} #main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; } ------- */ span.mobile_menu_bar:before { color: #ffffff !important; } ul#mobile_menu.et_mobile_menu { background-color: #005E85; } .mobile_nav.opened .mobile_menu_bar:before { content: "\4d";} /* -------- ----- */ .nav li ul { width: 280px; }#top-menu li li a { width: 240px; } /* -------- last menu item ------- */ #top-menu > li:last-child > a { border: 2px solid #ffffff; background: rgba(50, 180, 225, 0.5);/* Add border to last menu item */ padding: 8px 12px !important; /* Change last menu item background color */ -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; } #top-menu > li:last-child > a:hover { background: #005E85; /* Change background hover animation */ opacity: 1; /* Remove hover opacity standard animation */ } #top-menu li.current-menu-item a { color: #005E85 !important; /* Change current menu text color */ padding: 8px 12px !important; /* Change current menu item padding */ background: #AFD6E6; /* Change current menu background color */ -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; } #top-menu li a { margin-bottom: 5px !important; /* Play with this margin to fix menu height */ } /* Mobile */ .et_mobile_menu > li:last-child > a { border: 2px solid #80D4F6; } .et_mobile_menu > li:last-child > a:hover { background: #80D4F6; opacity: 1; } /* -------- ------- */ .et_pb_contact p input, .et_pb_contact p textarea { padding: 11px!important; } .home-header-animation {padding-top:0!important; padding-bottom:0!important; } #top-menu li li a:hover { background-color:#32b5e0 !important; opacity:1 !important;} .et_pb_text ul, .et_pb_text ol { margin: 30px; } .et_pb_text li { margin-top: 16px; } .vertical-align { display: flex; flex-direction: column; justify-content: center; } .bottom-align { position: absolute; bottom:0; } .et_pb_widget ul li { line-height: 1.2em!important; margin-bottom: 1.2em!important; } .et_pb_widget_area_left { border-left: 1px solid rgba(0, 0, 0, 0.1); padding-left: 30px; border-right: 0px; padding-right: 0px!important; } .et_pb_bg_layout_light .et_pb_widget li a:hover { color: #25AAE2; } /* -------- text formatting------- */ .white_headline { font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif; font-size: 29px; font-weight: 800!important; color:#ffffff; margin-bottom: 30px; } .white-headline-text { font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif; font-size: 22px; font-weight: 500!important; color:#ffffff; line-height:1.5em!important; } .blue_headline { font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif; font-size: 29px; font-weight: 800!important; color:#2193C4; line-height:1.1em!important; } .spin_heading { font-family: "spinc"; font-size: 50px; font-weight: 800; text-transform: uppercase; } .spintext { font-family: "spinc"; font-size: 21px; font-weight: 400; text-transform: uppercase; } /*-----Ken Burns Header-----*/ .ds-kenburns-header { overflow:hidden ; position: relative; padding: 0; } .ds-kenburns-header h1 { text-shadow: 0px 0px 6px rgba(100, 100, 100, 1); } .drive:before{ background: url(/wp-content/uploads/2017/07/road-guy.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .analyze:before{ background: url(/wp-content/uploads/2017/07/anaylyze.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .reso:before{ background: url(/wp-content/uploads/2017/07/command.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .blueprint:before{ background: url(/wp-content/uploads/2018/04/blueprint-bg-header.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .command:before{ background: url(/wp-content/uploads/2017/07/resolve2.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .tech:before{ background: url(/wp-content/uploads/2017/08/fortech.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .partners:before{ background: url(/wp-content/uploads/2017/07/partners.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .admin:before{ background: url(/wp-content/uploads/2017/08/admin.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .stack:before{ background: url(/wp-content/uploads/2017/08/stack.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .contact:before{ background: url(/wp-content/uploads/2020/05/los-angeles-1.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .support:before{ background: url(/wp-content/uploads/2017/07/support.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .field:before{ background: url(/wp-content/uploads/2017/08/field-service-1.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .execu:before{ background: url(/wp-content/uploads/2017/08/exec.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .itbg:before{ background: url(/wp-content/uploads/2017/08/itbg.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .tco:before{ background: url(/wp-content/uploads/2018/04/tcoheader-1.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .about:before{ background: url(/wp-content/uploads/2017/07/about.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .testdrive:before{ background: url(/wp-content/uploads/2018/04/ma-testdrive-header.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center center; -ms-animation:move 8s ease forwards; -webkit-animation:move 8s ease forwards; -0-animation:move 8s ease forwards; -moz-animation:move 8s ease forwards; animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } .ds-kenburns-header:before { content: ""; position: absolute; left:0; /*Left and Top sets the alignment of the image, you may need to change these if you want the image to move in a different direction*/ top:0; width: calc(100vw + 120px); /*We are adding some extra width and height to the image so when it zooms and pans we don't get any whitespace around it. You may need to change these values if you change the values in the keyframes section of CSS below*/ height: calc(100vh + 150px); z-index: -1; } @keyframes move { from { -ms-transform: scale3d(1); -webkit-transform: scale3d(1); -o-transform: scale3d(1); -moz-transform: scale3d(1); transform: scale3d(1); /*This tells the image to start at its original size*/ } to { -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -20px, 0px); -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -20px, 0px); -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -20px, 0px); -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -20px, 0px); transform: scale3d(1.1, 1.1, 1.1) translate3d(-50px, -20px, 0px); /*This tells the image to finish at 1.2x it's original size and at a position of -150px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/ } } @keyframes move2 { from { -ms-transform: scale3d(1); -webkit-transform: scale3d(1); -o-transform: scale3d(1); -moz-transform: scale3d(1); transform: scale3d(1); /*This tells the image to start at its original size*/ } to { -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(60px, -30px, 0px); -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(60px, -30px, 0px); -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(60px, -30px, 0px); -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(60px, -30px, 0px); transform: scale3d(1.1, 1.1, 1.1) translate3d(60px, -30px, 0px); /*This tells the image to finish at 1.2x it's original size and at a position of -150px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/ } } .widgettitle h4 { border-bottom: solid 2px #000000; margin-bottom: 25px; } /*** Responsive Styles Large Desktop And Above ***/ @media all and (min-width: 1405px) { } /*** Responsive Styles Standard Desktop Only ***/ @media all and (min-width: 1100px) and (max-width: 1405px) { } /*** Responsive Styles Tablet And Below ***/ @media all and (max-width: 980px) { .home-header-animation {padding-top:80px!important;} } /*** Responsive Styles Tablet Only ***/ @media all and (min-width: 768px) and (max-width: 980px) { .sinter { margin-right: auto !important; margin-left: auto !important; text-align: center !important; } .et_pb_fullwidth_header .header-content { padding: 10px; margin-top: 100px!important; } .home-header-animation {padding-top:80px!important;} } /*** Responsive Styles Smartphone Only ***/ @media all and (max-width: 767px) { .home-header-animation {padding-top:80px!important;} .ds-kenburns-header h1 { padding-top: 60px; } .sinter { margin-right: auto !important; margin-left: auto !important; text-align: center !important; } } /*** Responsive Styles Smartphone Portrait ***/ @media all and (max-width: 479px) { body { font-weight: 300; line-height: 1.6em; font-size:16px;} .spin_heading { font-family: "spinc"; font-size: 35px; font-weight: 600; text-transform: uppercase; } .white_headline { font-size: 22px; font-weight: 300; color:#ffffff; text-transform: uppercase; margin-bottom: 30px; } .ds-kenburns-header h1 { padding-top: 60px; } .blue_headline { font-size: 22px; font-weight: 300; color:#2193C4; } .hide_on_mobile {display:none;} .sinter { margin-right: auto !important; margin-left: auto !important; text-align: center !important; } .white-headline-text { font-size: 18px; font-weight: 500!important; color:#ffffff; line-height:1.4em!important; } .home-header-animation {padding-top:80px!important;} .reso:before{ background: url(/wp-content/uploads/2017/07/command.jpg); /*Chnange to the URL of the image you want to use*/ background-repeat: no-repeat; background-size: cover; background-position: center right; -ms-animation:move2 8s ease forwards; -webkit-animation:move2 8s ease forwards; -0-animation:move2 8s ease forwards; -moz-animation:move2 8s ease forwards; animation:move2 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */ } } @media all and (max-width: 1130px) { #top-menu-nav, #top-menu {display: none;} #et_top_search {display: none;} #et_mobile_nav_menu {display: block;} } @media (max-width: 768px) { div#noimage div.et_parallax_bg, div#noimage span.et_parallax_bg { background-image: none !important; } }