/* ======================================================================== GENERAL ======================================================================== */ /* ======================================================================== HEADER ======================================================================== */ #sub_menu ul { list-style: none; margin: 0; font-family: 'Nunito Sans', sans-serif; text-transform: uppercase;} #sub_menu ul li { display: inline-block;} #sub_menu ul li h2 { font-size: 14px; color: #34b34a; text-transform: uppercase; font-style: italic; margin-bottom: 0px} #sub_menu ul li p, #sub_menu ul li a { font-size: 14px; color: #fff; margin-bottom: 0px} #header .top-bar, #header #responsive-menu .top-bar ul { background: transparent; list-style: none; float: right;margin: 0px; color: #34b34a;} #header #responsive-menu .top-bar ul li { display: inline-block; text-transform: uppercase; margin-right: 10px; padding-left: 5px;} #header #responsive-menu .top-bar ul li a { color: #34b34a; font-weight: 600;} #header .logo { margin: 12px 0px;} #header .nav { text-align: right;} /* ======================================================================== WELCOME ======================================================================== */ section#welcome { background-image: url(../img/slide1.jpg); background-size: cover; background-repeat: no-repeat; padding-top: 150px; min-height: 86vh; min-height: calc(100vh - 132px);} section#welcome * { color: white;font-weight: 600;} section#welcome h1 { font-size: 47px;} section#welcome p, section#welcome ul li { font-size: 30px; } section#welcome a { font-size: 20px; text-transform: uppercase; border: 1px solid; padding: 18px; margin: 20px; display: block; width: 50%; text-align: center; font-weight: 800; line-height: 1.2; transition: 0.4s ease;} section#welcome a:hover { background-color: #0e3b5e} /* ======================================================================== SERVICES ======================================================================== */ #services .service_box { margin-top: 35px;} #services .green_box { background-image: url(../img/green_box.jpg); display: table; padding: 20px 50px !important; box-sizing: border-box; min-height: 249px;} #services .green_box h3 { line-height: 1.2; color: #fff; font-size: 44px; display: table-cell; vertical-align: middle; margin-bottom: 0px; text-transform: uppercase; font-weight: 800; } #services .white_box { border: 1px solid #34b34a; min-height: 249px; display: table; box-sizing: border-box;} #services .white_box .residential { background:url(../img/white_residential.png);} #services .white_box .warehouse { background:url(../img/white_warehouse.png);} #services .white_box .network { background:url(../img/white_net_sol.png);} #services .white_box .info { display: table-cell;vertical-align: middle; font-weight: bold; padding: 0px 20px;} #services .white_box .info a { color: #fff; border: 1px solid; padding: 10px 20px; font-size: 28px; font-weight: 900; text-align: center; transition: 0.4s ease;} #services .white_box .info a:hover { background: #0e3b5e;} #services .white_box .info p:first-child { font-weight: bolder} #services .white_box .info p:last-child { font-style: italic; font-size: 120%} /* ======================================================================== FEATURES ======================================================================== */ #features .single_icon { margin: 30px 0px 10px;} #features .single_title { font-weight: 800; text-transform: uppercase; font-size: 18px;} /* ======================================================================== COMPANY ======================================================================== */ #company { background: url(../img/company_bk.jpg) no-repeat 50%; background-size: cover;} #company .boxes { display: table; padding-bottom: 25px;margin: auto;} #company .co { background: white; width: 30%; margin: 0px 16px; padding: 20px 30px !important; box-sizing: border-box;display: table-cell;} #company h4 { font-weight: bold; padding: 0px 22px;} #company .discuss { font-size: 30px; text-transform: uppercase;font-weight: 800; margin-bottom: 15px;} #company a { font-size: 20px; text-transform: uppercase; color: #fff; border: 1px solid; padding: 10px 15px; transition: 0.4s ease;} #company a:hover { background-color: #0e3b5e;} /* ================================================================== TESTIMONIALS ================================================================== */ #feedback .feedback { font-size: 30px; text-transform: uppercase; font-weight: 800; margin-bottom: 15px;} #feedback ul.orbit-container { height: 120px !important;} #feedback ul li p { width: 75%; margin:auto;} /* ================================================================== EQUIPMENT ================================================================== */ #equipment { padding: 75px 0px;} #equipment h4 { text-align: center; text-transform: uppercase; font-size: 17px; font-weight: 600; color: #0e3b5e; margin-bottom: 50px;} /* ================================================================== CONTACT ================================================================== */ #contact { background: #31b34a;padding: 75px 0px;} #contact p { font-size: 24px; width: 75%; color: #fff; font-weight: 700; padding: 0px; margin: 0 auto 25px;} #contact input.submit { background: transparent; border: 1px solid; color: #fff; padding: 10px 20px; font-family: inherit; font-size: 20px; cursor: pointer; transition: 0.4s ease;} #contact input.submit:hover { background-color: #0e3b5e;} /* ================================================================== CUSTOM RESPONSIVE ================================================================== */ @media only screen and (min-width: 64.001em) { #services .white_box:first-child .info { margin: 0px !important;} #sub_menu ul li:last-child { padding-right: 17px;} } @media only screen and (max-width: 64em) { /*#welcome .row div { margin-left: 25px;}*/ #services .green_box h3 { font-size: 31px;} #services .white_box .info a { width:78%} #services .white_box p { font-size: 85%;} #services .white_box .info p:last-child { font-size: 80%; margin-bottom: 0px;} } @media only screen and (min-width: 40.001em) and (max-width: 64em) { .center-med-col { width: 100%; margin: auto; text-align: center;} #services .green_box { padding: 0px 50px !important;} #services .white_box p { font-size: 73%;} } @media only screen and (min-width: 40.001em) { } @media only screen and (max-width: 40em) { #sub_menu ul li:first-child { width: 100%; text-align: center;} #sub_menu ul li:nth-child(3) { float: left; padding-left: 25px;} #sub_menu ul li:nth-child(5) { float: right; padding-right: 25px;} #header .logo { text-align: center;} #header .nav { margin-top: -50px;} #header .top-bar { width: 100%; display: inline-block; padding: 0px;} #header .top-bar-title { padding: 0px 0px 15px 0px} #header .top-bar-title span { padding: 16px} #header #responsive-menu .top-bar ul { float: none;} #header #responsive-menu .top-bar ul li { display: block; text-align: left; color: #fff; border-top: 1px solid #0e3b5e; margin: 0px; padding: 0px;} #header #responsive-menu .top-bar ul li a { padding: 15px 10px 10px; display:block; width: 100%;font-size: 13px;} #header #responsive-menu .top-bar ul li a:hover { background: #0e3b5e;} #welcome { padding-top: 10px !important; background-position-x: right;} #welcome .hero { position: relative;top: 90px;} #welcome h1 { font-size: 30px !important;} #welcome p, #welcome ul li { font-size: 22px !important;} #welcome a { width: 100% !important; margin: 0 !important; font-size: 17px !important;} #contact p { font-size: 18px; width: 92%;} #features .single_icon img { max-width: 60px;} #equipment .manu_logo { margin: 20px 0px;} #company { background-position: right;} } @media only screen and (min-width: 40em) and (max-width: 930px) { } @media only screen and (min-width: 931px) { } @media only screen and (max-width: 930px) { #header #responsive-menu .top-bar { padding: 0px;} #header #responsive-menu .top-bar ul li a { font-size: 13px;} #features .single_title { font-size: 10px;} #company .co { width: 100%; margin: 4px auto} } @media only screen and (min-width: 40em) and (max-width: 830px) { } @media only screen and (max-width: 360px) { #sub_menu ul li h2 { font-size: 13px;} } @media only screen and (min-width: 401px) and (max-width: 40em) { } @media only screen and (max-width: 400px) { }