/* Theme Name: Bethany Theme URL: https://bootstrapmade.com/bethany-free-onepage-bootstrap-theme/ Author: BootstrapMade.com Author URL: https://bootstrapmade.com */ body { line-height: 1.5; font-family: 'Open Sans', sans-serif; overflow-x: hidden; background-color:#ffffff; color:#000000 } .skip { position: absolute; top: -1000px; left: -1000px; height: 1px; width: 1px; text-align: left; overflow: hidden; } a.skip:active, a.skip:focus, a.skip:hover { left: 0; top: 0; width: auto; height: auto; overflow: visible; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } th, td { padding: 8px; } .section-padding { padding: 25px 0px; } h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica', sans-serif; } /*Setting header 1 attributes*/ .H1 { font-family: "Open Sans", sans-serif; font-size: 35px; line-height: 45px; letter-spacing: -0.03ex; font-weight: 400; color: #000000} /*Setting subheader 2 attributes*/ .H2 { font-family: "Open Sans", sans-serif; font-size: 23px; line-height:35px; letter-spacing: -0.03ex; font-weight: 400; color: #000000} span.txt-para { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 25px; font-weight:400; letter-spacing: 0.02ex; color: #000000 } span.bodytext { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: +0.02ex; color: #000000} span.bodytext_white { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: +0.02ex; color: #ffffff} span.bodytextlg { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 22px; font-weight:300; letter-spacing: +0.07ex; color: #000000} span.bodytextsm { font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 15px; font-weight:300; letter-spacing: +0.07ex; color: #000000} span.bodytext_green { font-family: "Open Sans", sans-serif; font-size: 23px; line-height: 30px; font-weight:400; letter-spacing: +0.02ex; color: #217979} span.smalltext { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 25px; font-weight:400; letter-spacing: 0.02ex; color: #000000 } span.promotext{ font-family: "Open Sans", sans-serif; font-size: 23px; line-height: 50px; font-weight: 400; letter-spacing: -0.03ex; color: #ffffff } span.tagtext{ font-family: "Helvetica", sans-serif; font-size: 20px; line-height: 40px; font-weight: 400; letter-spacing: +0.20ex; color: #ffffff } /*larger font size*/ span.cap { font-family: "Open Sans", sans-serif; font-size: 22px; line-height: 30px; font-weight:400; color: #000000} span.buttontext { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 20px; font-weight:400; letter-spacing: -0.04ex; color: #000000} span.buttontextcolor { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 18px; font-weight:400; letter-spacing: -0.04ex; color: #FFFFFF} span.bodytexthome { font-family: "Open Sans", Arial, sans-serif; font-size: 16px; line-height: 25px; font-weight:300; letter-spacing: 0.02ex; color: #000000 } a:link.a_class_navlink { font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 30px; font-weight:400; letter-spacing: 0.02ex; color: #ffffff } a:visited.a_class_navtlink { font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 30px; font-weight:400; letter-spacing: 0.02ex; color: #ffffff} a:hover.a_class_navlink { font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 30px; font-weight:400; letter-spacing: 0.02ex; color: #ffcc66 } a:link.a_class_headerlink { font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 21px; font-weight:300; letter-spacing: 0.06ex; color: #ffffff } a:visited.a_class_headertlink { font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 21px; font-weight:300; letter-spacing: 0.06ex; color: #ffffff} a:hover.a_class_headertlink { font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 21px; font-weight:300; letter-spacing: 0.06ex; text-decoration: underline; color: #ffcc66 } a:link.a_class_biglink { font-family: "Open Sans", sans-serif; font-size: 21px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; color: #000000 } a:visited.a_class_biglink { font-family: "Open Sans", sans-serif; font-size: 21px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; color: #000000} a:hover.a_class_biglink { font-family: "Open Sans", sans-serif; font-size: 21px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_biglinkwhite { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; color: #ffffff } a:visited.a_class_biglinkwhite { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; color: #ffffff} a:hover.a_class_biglinkwhite { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: -0.02ex; text-decoration: underline; color: #ffffff } a:link.a_class_biggerlink { font-family: "Open Sans", sans-serif; font-size: 24px; line-height: 30px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700 } a:visited.a_class_biggerlink { font-family: "Open Sans", sans-serif; font-size: 24px; line-height: 30px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700} a:hover.a_class_biggerlink { font-family: "Open Sans", sans-serif; font-size: 24px; line-height: 30px; font-weight:400; letter-spacing: -0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_medlink { font-family: "Open Sans", sans-serif; font-size: 19px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700 } a:visited.a_class_medlink { font-family: "Open Sans", sans-serif; font-size: 19px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700} a:hover.a_class_medlink { font-family: "Open Sans", sans-serif; font-size: 19px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_medlink2 { font-family: "Open Sans", sans-serif; font-size: 20px; line-height: 30px; font-weight:400; letter-spacing: -0.05ex; color: #BF5700 } a:visited.a_class_medlink2 { font-family: "Open Sans", sans-serif; font-size: 20px; line-height: 30px; font-weight:400; letter-spacing: -0.05ex; color: #BF5700} a:hover.a_class_medlink2 { font-family: "Open Sans", sans-serif; font-size: 20px; line-height: 30px; font-weight:400; letter-spacing: -0.05ex; text-decoration: underline; color: #BF5700 } a:link.a_class_medlink3 { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; font-weight:400; letter-spacing: -0.05ex; color: #000000 } a:visited.a_class_medlink3 { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; font-weight:400; letter-spacing: -0.05ex; color: #000000} a:hover.a_class_medlink3 { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 22px; font-weight:400; letter-spacing: -0.05ex; text-decoration: underline; color: #BF5700 } a:link.a_class_message { font-family: "Open Sans", sans-serif; font-size: 85px; line-height: 95px; font-weight: 400; letter-spacing: -0.10ex; color: #ffffff } a:visited.a_class_message { font-family: "Open Sans", sans-serif; font-size: 85px; line-height: 95px; font-weight: 400; letter-spacing: -0.10ex; color: #ffffff} a:hover.a_class_message { font-family: "Open Sans", sans-serif; font-size: 85px; line-height: 95px; font-weight: 400; letter-spacing: -0.10ex; text-decoration: underline; color: #ffffff } a:link.a_class_message2 { font-family: "Open Sans", sans-serif; font-size: 60px; line-height: 70px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff } a:visited.a_class_message2 { font-family: "Open Sans", sans-serif; font-size: 60px; line-height: 70px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff} a:hover.a_class_message2 { font-family: "Open Sans", sans-serif; font-size: 60px; line-height: 70px; font-weight: 300; letter-spacing: 0.05ex; text-decoration: underline; color: #ffffff } a:link.a_class_message3 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff } a:visited.a_class_message3 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff} a:hover.a_class_message3 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; text-decoration: underline; color: #ffffff } a:link.a_class_message4 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff; text-decoration: underline; color: #ffffff } a:visited.a_class_message4 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; color: #ffffff; text-decoration: underline; color: #ffffff} a:hover.a_class_message4 { font-family: "Open Sans", sans-serif; font-size: 30px; line-height: 45px; font-weight: 300; letter-spacing: 0.05ex; text-decoration: underline; color: #ffffff } a:link.a_class_sublink { font-family: Arial, Helvetica, Verdana sans-serif; font-size: 35px; line-height: 45px; font-weight: 400; letter-spacing: -0.05ex; color: #2d4896 } a:visited.a_class_sublink { font-family: Arial, Helvetica, Verdana sans-serif; font-size: 35px; line-height: 45px; font-weight: 400; letter-spacing: -0.05ex; color: #2d4896} a:hover.a_class_sublink { font-family: Arial, Helvetica, Verdana sans-serif; font-size: 35px; line-height: 45px; font-weight: 400; letter-spacing: -0.05ex; text-decoration: underline; color: #2d4896 } a:link.a_class_blacklink { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 25px; font-weight:400; letter-spacing: 0.02ex; color: #000000 } a:visited.a_class_blacklink { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 25px; font-weight:400; letter-spacing: 0.02ex; color: #000000} a:hover.a_class_blacklink { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; line-height: 25px; font-weight:400; letter-spacing: 0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_blacklinkfooter { font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight:300; letter-spacing: 0.02ex; color: #000000 } a:visited.a_class_blacklinkfooter { font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight:300; letter-spacing: 0.02ex; color: #000000} a:hover.a_class_blacklinkfooter { font-family: "Open Sans", Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight:300; letter-spacing: 0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_tlink { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 28px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700 } a:visited.a_class_tlink { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 28px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700} a:hover.a_class_tlink{ font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 28px; font-weight:400; letter-spacing: -0.02ex; text-decoration: underline; color: #BF5700 } a:link.a_class_tlinksm { font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700 } a:visited.a_class_tlinksm { font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; color: #BF5700} a:hover.a_class_tlinksm { font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 25px; font-weight:400; letter-spacing: -0.02ex; text-decoration: underline; color: #BF5700 } /*phone larger font*/ a:link.a_class_phonesm { font-family: "Helvetica", Arial, sans-serif; font-size: 22px; line-height: 30px; color: #000000} a:visited.a_class_phonesm { font-family: "Helvetica", Arial, sans-serif; font-size: 22px; line-height: 30px; color: #000000 } a:hover.a_class_phonesm{ font-family: "Helvetica", Arial, sans-serif; font-size: 22px; line-height: 30px text-decoration: underline; color: #BF5700; } a:link.a_class_phone { font-family: "Helvetica", Arial, sans-serif; font-size: 19px; line-height: 28px; color: #000000} a:visited.a_class_phone { font-family: "Helvetica", Arial, sans-serif; font-size: 19px; line-height: 28px; color: #000000 } a:hover.a_class_phone{ font-family: "Helvetica", Arial, sans-serif; font-size: 19px; line-height: 28px text-decoration: underline; color: #BF5700; } ul li { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: +0.02ex; color: #000000} ol { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 30px; font-weight:300; letter-spacing: +0.02ex; color: #000000} /**media Queries**/ .navbar-default { background-color: transparent; } .main-header { background: url(../img/banner2.jpeg) no-repeat; background-size: cover; min-height: 550px; } .top-area { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out; width: 100%; color: #fff; } .branding-header { background-color: #232424; background-size: cover; min-height: 60px; } .branding-header2 { background-color: #646666; background-size: cover; min-height: 60px; } .home-image { background: url(../img/banner.jpeg) no-repeat; background-size: cover; min-height: 530px; } .home-image2 { background: url(../img/banner_grey.jpeg) no-repeat; background-size: cover; min-height: 530px; } .home-image3 { background: url(../img/banner_blue.jpeg) no-repeat; background-size: cover; min-height: 530px; } .bg-color { background-color: RGBA(0, 0, 0, 0.0); } .nav>li>a { padding: 0px; } /*.mobile-navbar-nav { margin-left:15px; margin-top:-60px; } */ .navbar-brand { padding: 0px; height: inherit; font-family: 'Lato', sans-serif; } .navbar-default .navbar-brand { color: #fff; font-size: 34px; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #FFD34E; text-transform: uppercase; background-color: transparent; } .navbar-default .navbar-nav>li>a { color: #fff; padding: 10px 20px; text-transform: uppercase; background-color: transparent; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #FFD34E; } .navbar-fixed-top { transition: all 0.5s; } .nav-container { padding-top: 20px; padding-bottom: 20px; } a.anchor { display: block; position: relative; top: -160px; visibility: hidden; } @media (max-width: 768px) { .navbar-collapse { background: rgba(0, 0, 0, 1); /* solid black */ border-top: 0; } } .top-nav-collapse { background: rgba(0, 0, 0, 0.8); } .wrapper { padding: 175px 0px 70px; } .wrapper-mobile { padding:100px 0px 70px; } .top-title { z-index: 5; font-size: 21px; font-weight: 400; color: #fff; line-height: 38px; letter-spacing: 3px; opacity: 1; } .sub-title { font-size: 50px; font-weight: 700; color: #fff; line-height: 71px; letter-spacing: 4px; opacity: 1; text-transform: uppercase; } .title { font-size: 123px; font-weight: 700; color: #fff; line-height: 88px; letter-spacing: 4px; opacity: 1; text-transform: uppercase; padding: 25px 0px; } .btn-submit { background: #bf5700; border: 0px; display: inline-block; font-size: 16px; text-transform: uppercase; padding: 10px 40px; font-weight: normal; border-radius: 0px; letter-spacing: 1px; color: #ffffff; position: relative; overflow: hidden; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; margin-top: 25px; border: 1px solid #FFD34E; } .btn-submit2 { background: #454d5b; border: 0px; display: inline-block; font-size: 17px; text-transform: uppercase; padding: 7px 5px; font-weight: normal; border-radius: 0px; letter-spacing: 1px; color: #ffffff; position: relative; overflow: hidden; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; margin-top: 25px; border: 1px solid #0099ff; } .btn-submit:hover { background: #fff; } .btn-submit2:hover { background: #ffffff; color: #bf5700; } /****/ #cta-1 { padding: 40px 0px; } .cta-info { border: 5px solid #FFD34E; padding: 40px 0px; } .cta-info h3 { font-size: 24px; } .dec-tec { font-size: 34px; } /****/ #feature { background-color: #f8f8f8; } .head-title { color: #2b2b2b; font-size: 33px; font-weight: 600; } .botm-line { background-color: #bf5700; width: 34px; height: 1px; display: inline-block; } .section-title:hover .botm-line { width: 70px; /* For Safari 3.1 to 6.0 */ -webkit-transition-property: width; -webkit-transition-duration: 2s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 1s; /* Standard syntax */ transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } p { color: #000000; } .icon i { font-size: 35px; } .icon-text { margin-left: 80px; padding: 0px 0px 25px 0px; } h3.txt-tl { font-size: 24px; line-height: 1.35; } /****/ .parallax { background-attachment: fixed; background-repeat: repeat-y; background-position: center center; } .bg-image-2 { background: url('../img/cta-banner.jpg') no-repeat center fixed; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-image-3 { background: url('../img/parallaxbg.jpg') no-repeat center fixed; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-image-4 { background: url('../img/parallaxbg4.jpg') no-repeat center fixed; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-image-5 { background: url('../img/parallaxbg5.jpg') no-repeat center fixed; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .section { position: relative; padding: 10px 0 30px 0; display: block; } .cta-txt h3 { font-size: 30px; margin-bottom: 10px; font-weight: 300; color: #fff; } .cta-txt p { color: #fff; } /****/ .portfolio-box { margin-bottom: 15px; } .padding-right-zero { padding-right: 0px; } #contact { background-color: #f8f8f8; } .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } .black { color: #000 !important; font-weight: 600; } .btn-send { border-radius: 0px; color: #000; background-color: #FFD34E; } a, a:hover { color: #000000; } .cont-title { font-size: 24px; padding: 15px 0px; } .location-info p span { display: inline-block; } .location-info p span { width: 40px; font-size: 24px; color: #666; vertical-align: middle; } .location-info p { margin-bottom: 5px; } .location-info p { font-size: 18px; line-height: 32px; color: #000; } .contact-icon-container { position: absolute; top: -38px; right: 0; padding-right: 20px; font-size: 320px; color: #555; line-height: 300px; -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } /****/ #footer { background-color: #191919; padding: 20px 0px; } .footer-copyright { color: #fff; line-height: 32px; text-align: left; } .footer-social { float: right; } .footer-social a { font-size: 18px; color: #666; } .link-dec, .link-dec:hover { color: #000; } .footer-mobile { margin-left: 15px; } /****/ @media (min-width: 451px) and (max-width: 900px) { .section-title { margin-bottom: 15px; } } @media (min-width: 20px) and (max-width: 450px) { .navbar-toggle:hover, .navbar-toggle { color: #000; } .navbar-toggle { margin-top: 12px; background-color:transparent; color:#fff; border-color:transparent; } .navbar-default .navbar-nav>li>a { text-align: center; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { } .top-title { font-size: 15px; } .title { font-size: 50px; } .sub-title { font-size: 24px; } .footer-copyright { text-align: center; } .padding-right-zero { padding-right: 15px; } .section-title { margin-bottom: 15px; } .cta-txt h3 { font-size: 28px; } body { font-size: 14px; } h3.txt-tl { font-size: 20px; } } /****/ #desktopnav { background: rgba(0, 0, 0, 1); /* solid black */ padding: 1px; } #desktopnav a { color: white; } #desktopnav span { color: white; } #desktopnav table { margin-top: 30px; margin-left: 30px; margin-right: 30px; } #desktopnav .text { font-family: "Open Sans", Arial, sans-serif; font-size: 16px; line-height: 25px; font-weight: 300; letter-spacing: 0.02ex; } .a_class_navlink { color: white; } /**search**/ .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } #content { position: absolute; height: 0; width: 300px; margin-left: 310px; margin-top:10px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #content.on { -webkit-animation-name: in-out; animation-name: in-out; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .input { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #FFFFFF; border-radius: 50%; background: none; color: #fff; font-size: 16px; font-weight: 400; font-family: Roboto; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search { background: none; position: absolute; top: 0px; left: 0; height: 50px; width: 50px; padding: 0; border-radius: 100%; outline: 0; border: 0; color: inherit; cursor: pointer; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } .search:before { content: ""; position: absolute; width: 12px; height: 3px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 12px; margin-left: 20px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close { -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; opacity: 5.5; } .close:before { content: ""; position: absolute; width: 20px; height: 4px; margin-top: -1px; margin-left: -3px; background-color: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .close:after { content: ""; position: absolute; width: 20px; height: 4px; background-color: #fff; margin-top: -1px; margin-left: -3px; cursor: pointer; -webkit-transform: rotate(-45deg); -ms-transform: rotate(); transform: rotate(-45deg); } .close:focus, .close:hover { cursor: pointer; opacity: 6.5; } .square { box-sizing: border-box; padding: 0 40px 0 10px; width: 300px; height: 35px; border: 2px solid #FFFFFF; border-radius: 0; background: none; color: #fff; font-family: Roboto; font-size: 16px; font-weight: 400; outline: 0; -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s; -webkit-transition-delay: 0.4s, 0s, 0.4s; transition-delay: 0.4s, 0s, 0.4s; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } /** mobile menu **/ .dd.dd-01 { background-color: black; border: none; } .dd-01-ul { height: 0; overflow: hidden; list-style-type: none; -webkit-transition: height 0.5s ease-in-out; transition: height 0.5s ease-in-out; } .dd-01-ul a { text-indent: 30px; color: white; } .dd:after { content: '\25BC'; margin-left: 5px; font-size: 12px; } .dd-show { height: auto; } .mobile-navbar-branding { padding-top: 40px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; margin-left: -15px; margin-right: -15px; background-color: grey; } .mobile-navbar-nav { margin-left: 15px; margin-right: 15px; margin-top: -10px; font-size: 16px; text-align: center; } .mobile-navbar-nav button { text-align: center; text-transform: uppercase; color: white; background-color: transparent; } .mobile-nav-hidden { overflow: hidden; } /**mobile search */ .mobile-search-container { display: block; background-color: #333333; margin-left: -15px; margin-right: -15px; padding: 15px; } #mobile-search-bar { margin: 0 auto; width: 80%; height: 35px; font-size: 16px; color: #ffffff; background-color: transparent; outline: none; border: 2px solid #ff9900; &:focus{ border: 1px solid #008ABF; transition: 0.35s ease; color: #008ABF; &::-webkit-input-placeholder{ transition: opacity 0.45s ease; opacity: 0; } &::-moz-placeholder { transition: opacity 0.45s ease; opacity: 0; } &:-ms-placeholder { transition: opacity 0.45s ease; opacity: 0; } } } .mobile-search-icon { width: 45px; margin-left: -10px; } .searchTerm { float: left; width: 100%; padding: 5px; height: 30px; border-radius: 5px; outline: none; color: #000000; } #search-button { background-color: transparent; border-color: transparent; } #desktop-icon { background-color: transparent; border-color: transparent; margin-left:-30px; } #desktop-icon:focus { outline: none; } .row-notification-space2{ background-color: #fff9c2; text-align: center; padding-top:20px; padding-bottom:10px; } /**search health topics**/ #topic-search-bar { margin: 0 auto; width: 80%; height: 35px; font-size: 20px; background-color: ffffff; outline: none; border: 2px solid #666666; color: #ffffff; &:focus{ border: 1px solid #008ABF; transition: 0.35s ease; color: #008ABF; &::-webkit-input-placeholder{ transition: opacity 0.45s ease; opacity: 0; } &::-moz-placeholder { transition: opacity 0.45s ease; opacity: 0; } &:-ms-placeholder { transition: opacity 0.45s ease; opacity: 0; } } } .topic-search-section { background-color: #404042; padding-top: 20px; padding-bottom: 5px; } .topic-search-module { margin-top: 0px; margin-bottom: 15px; } .topic-search-icon { background-color: transparent; border-color:transparent; } /*Setting general text attributes*/ span.crisistext { font-family: "Helvetica", sans-serif; font-size: 20px; line-height: 27px; font-weight:300 ; color: #000000} /*Setting general text attributes*/ span.crisistextmobileheader { font-family: "Helvetica", sans-serif; font-size: 25px; line-height: 32px; font-weight:300 color: #000000} /*Setting general text attributes*/ span.crisistextlink { font-family: "Helvetica", sans-serif; font-size: 25px; line-height: 27px; color: #bf5700} /*Setting general text attributes*/ span.crisistextlink2 { font-family: "Helvetica", sans-serif; font-size: 30px; line-height: 35px; color: #ffffff} /*Setting general text attributes*/ span.crisistextlink_white { font-family: "Helvetica Neue", sans-serif; font-size: 25px; line-height: 30px; color: #ffffff} .custom4{ color:white; text-align:right; font-size:11px; font-weight:300; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; } .custom5{ color:white; text-align:left; font-size:11px; font-weight:300; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; } .menu { display: flex; justify-content: space-between; } /*=========================== --- Staff Page Accordion ---- =========================== */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .integration-list { width: 100%; margin: 0 auto; display: table; } .integration-list ul { padding: 0; margin: 20px 0; color: #555; } .integration-list ul > li { list-style: none; border-top: 1px solid #ddd; display: block; padding: 10px; overflow: hidden; } .integration-list ul:last-child { border-bottom: 1px solid #ddd; } .integration-list ul > li:hover { background: white; } .expand { display: block; text-decoration: none; color: rgba(0, 0, 0, 1);; cursor: pointer; } h2 { padding-top:6px; margin: 0; font-size: 17px; font-weight: 400; } span { font-size: 14px; } #left,#right{ display: table; } #sup{ display: table-cell; vertical-align: top; width: 80%; } .detail { margin: 10px 0 10px 0px; display: none; line-height: 22px; height: 150px; } .detail span{ margin: 0; } .right-arrow { margin-left: 20px; width: 10px; height: 100%; float: right; font-weight: bold; font-size: 20px; } .icon { height: 75px; width: 20px; float: left; margin: 0 15px 0 0; }