350 lines
		
	
	
		
			6.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
		
		
			
		
	
	
			350 lines
		
	
	
		
			6.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
|   | body { | ||
|  | 	line-height: 1.4; | ||
|  | 	font-family: 'Roboto', sans-serif; | ||
|  |     font-size: 18px; | ||
|  |     letter-spacing: 0.5px; | ||
|  |     font-size: 15px; | ||
|  | 	font-weight: 400; | ||
|  | } | ||
|  | ol, ul { | ||
|  | 	list-style: none; | ||
|  | } | ||
|  | blockquote, q { | ||
|  | 	quotes: none; | ||
|  | } | ||
|  | blockquote:before, blockquote:after, | ||
|  | q:before, q:after { | ||
|  | 	content: ''; | ||
|  | 	content: none; | ||
|  | } | ||
|  | table { | ||
|  | 	border-collapse: collapse; | ||
|  | 	border-spacing: 0; | ||
|  | } | ||
|  | a { | ||
|  |     outline: none; | ||
|  | } | ||
|  | 
 | ||
|  | a:hover, a:focus, a:active{ | ||
|  | 	text-decoration: none; | ||
|  |     outline: none; | ||
|  | } | ||
|  | /*********************************** | ||
|  | ************************************ | ||
|  | Responsive media queries | ||
|  | ************************************ | ||
|  | ***********************************/ | ||
|  | .header { | ||
|  |     background: url('../img/network.jpg') no-repeat fixed; | ||
|  |     background-size: cover; | ||
|  |     height: 100vh; | ||
|  |     position: relative; | ||
|  | } | ||
|  | .navbar-default { | ||
|  |     background-color: transparent; | ||
|  | 	border: 0px; | ||
|  |     padding: 20px 0; | ||
|  |     transition: all 0.3s; | ||
|  | } | ||
|  | .navbar-brand { | ||
|  |     font-size: 25px; | ||
|  | } | ||
|  | .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { | ||
|  |     color: #fff; | ||
|  |     outline: none; | ||
|  | } | ||
|  | .navbar-default .navbar-nav > li > a{ | ||
|  | 	font-size: 14px; | ||
|  | 	font-weight: 400; | ||
|  | 	color: #fff; | ||
|  |     outline: none; | ||
|  | } | ||
|  | .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { | ||
|  |     color: #fffde0; | ||
|  |     background-color: transparent; | ||
|  | } | ||
|  | .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { | ||
|  |     color: #fffde0; | ||
|  |     background-color: transparent; | ||
|  | } | ||
|  | 
 | ||
|  | .top-nav-collapse { | ||
|  |     padding: 0; | ||
|  | 		border-bottom-style: solid; | ||
|  | 		border-bottom-color: #606060; | ||
|  |     background: rgba(0,0,0, 1); | ||
|  | } | ||
|  | 
 | ||
|  | .bg-color{ | ||
|  | 	background-color: RGBA(0, 0, 0, 0.2); | ||
|  | 	height: 100vh; | ||
|  | } | ||
|  | .navbar-border{ | ||
|  | } | ||
|  | .banner-text{ | ||
|  | 	border-left: 5px solid #BE2525; | ||
|  | 	padding: 15px 40px; | ||
|  | 	color: #fff; | ||
|  | 	margin-top: 170px; | ||
|  | } | ||
|  | .banner-text h2, .banner-text p{ | ||
|  | 	font-weight: 400; | ||
|  | 	font-family: 'Questrial', sans-serif; | ||
|  | } | ||
|  | .banner-text h2 { | ||
|  | 	font-size: 50px; | ||
|  | } | ||
|  | .banner-text p { | ||
|  | 	font-size: 30px; | ||
|  | } | ||
|  | .overlay-detail{ | ||
|  | 	margin: 0 auto; | ||
|  | } | ||
|  | .overlay-detail a i { | ||
|  |     text-align: center; | ||
|  |     position: absolute; | ||
|  |     bottom: -140px; | ||
|  |     font-size: 24px; | ||
|  |     color: #fff; | ||
|  |     width: 40px; | ||
|  | 	height: 40px; | ||
|  | 	border: 1px solid #fff; | ||
|  | 	line-height: 40px; | ||
|  | 	border-radius: 50%; | ||
|  | } | ||
|  | #about{ | ||
|  | 
 | ||
|  | /*	margin-bottom: -3px;*/ | ||
|  | } | ||
|  | .section-padding{ | ||
|  | 	padding: 60px 0px; | ||
|  | } | ||
|  | .title{ | ||
|  | 	font-size: 24px; | ||
|  | 	margin-bottom: 50px; | ||
|  | } | ||
|  | .title-text{ | ||
|  | 	padding: 0px 25px 0px 0px; | ||
|  | 	border-right: 5px solid #BE2525; | ||
|  | 	font-size: 24px; | ||
|  | } | ||
|  | .abt-list li{ | ||
|  | 	padding: 5px 0px; | ||
|  | 	font-size: 18px; | ||
|  | 	font-weight: 400; | ||
|  | } | ||
|  | section { | ||
|  | 	background-color: #3a3a3a; | ||
|  | 	color: white; | ||
|  | } | ||
|  | .grid-padding{ | ||
|  | 	padding: 0 8px; | ||
|  | } | ||
|  | .grid-padding img{ | ||
|  | 	margin-bottom: 15px; | ||
|  | } | ||
|  | .padding-right-zero{ | ||
|  | 	padding-right: 0px !important; | ||
|  | } | ||
|  | #myGrid{ | ||
|  | 	margin-top: 50px; | ||
|  | } | ||
|  | .test-sec blockquote { | ||
|  |     background: #eee; | ||
|  |     display: block; | ||
|  |     font-size: 14px; | ||
|  |     line-height: 20px; | ||
|  |     padding: 15px; | ||
|  |     position: relative; | ||
|  | } | ||
|  | .test-sec blockquote::after { | ||
|  |     content: ''; | ||
|  |     position: absolute; | ||
|  |     bottom: -14px; | ||
|  |     margin-left: 10px; | ||
|  |     border-top: 14px solid #eee; | ||
|  |     border-left: 14px solid transparent; | ||
|  |     border-right: 14px solid transparent; | ||
|  | } | ||
|  | blockquote { | ||
|  |     padding: 10px 20px; | ||
|  |     margin: 0 0 20px; | ||
|  |     font-size: 17.5px; | ||
|  |     border-left: 5px solid RGBA(0, 0, 0, 0.18); | ||
|  | } | ||
|  | .test-sec .carousel-info span { | ||
|  |     display: block; | ||
|  | } | ||
|  | .test-sec span.testimonials-name { | ||
|  |     color: #62646f; | ||
|  |     font-weight: 600; | ||
|  |     margin: 16px 0 5px; | ||
|  | } | ||
|  | #contact { | ||
|  |     width: 100%; | ||
|  |     background-color: RGBA(8, 7, 7, 0.92); | ||
|  | } | ||
|  | 
 | ||
|  | #contact .btn-primary { | ||
|  |     background: #BE2525; | ||
|  |     border: 1px solid #BE2525; | ||
|  | } | ||
|  | 
 | ||
|  | .validation { | ||
|  |     color: red; | ||
|  |     display:none; | ||
|  |     margin: 0 0 20px; | ||
|  |     font-weight:400; | ||
|  |     font-size:13px; | ||
|  | } | ||
|  | 
 | ||
|  | #sendmessage { | ||
|  |     color: green; | ||
|  |     border:1px solid green; | ||
|  |     background: #fff; | ||
|  |     display:none; | ||
|  |     text-align:center; | ||
|  |     padding:15px; | ||
|  |     font-weight:600; | ||
|  |     margin-bottom:15px; | ||
|  | } | ||
|  | 
 | ||
|  | #errormessage { | ||
|  |     color: red; | ||
|  |     display:none; | ||
|  |     border:1px solid red; | ||
|  |     text-align:center; | ||
|  |     padding:15px; | ||
|  |     font-weight:600; | ||
|  |     margin-bottom:15px; | ||
|  |     background: #fff; | ||
|  | } | ||
|  | 
 | ||
|  | #sendmessage.show, #errormessage.show, .show { | ||
|  | 	display:block; | ||
|  | } | ||
|  | 
 | ||
|  | footer { | ||
|  |     padding: 40px 0; | ||
|  |     background: #F2F3EB; | ||
|  | } | ||
|  | 
 | ||
|  | .footer a { | ||
|  |     color: #BE2525; | ||
|  | } | ||
|  | 
 | ||
|  | .footer__navigation li, .social-list li{ | ||
|  | 	display: inline-block; | ||
|  | } | ||
|  | .contact-sec h2 { | ||
|  |     font-size: 28px; | ||
|  |     color: #fff; | ||
|  |     font-weight: 600; | ||
|  |     padding: 15px 0px; | ||
|  | } | ||
|  | .footer__navigation li a | ||
|  | { | ||
|  | 	display: inline-block; | ||
|  | 	color: #767676; | ||
|  | 	font-weight: 600; | ||
|  | 	font-variant-ligatures: common-ligatures; | ||
|  | 	font-size: 1.2em; | ||
|  | 	line-height: 1.625em; | ||
|  | 	margin-top: 0; | ||
|  | 	margin-bottom: 1.625em; | ||
|  | 	padding-right: 10px; | ||
|  | } | ||
|  | .contact-sec p { | ||
|  |     color: #fff; | ||
|  |     font-size: 18px; | ||
|  |     padding: 16px 0px 24px; | ||
|  | } | ||
|  | .contact-sec i{ | ||
|  | 	padding-right: 15px; | ||
|  | } | ||
|  | .contact-sec a { | ||
|  |     color: #FFF; | ||
|  |     background-color: RGBA(174, 142, 142, 0.7); | ||
|  |     display: inline-block; | ||
|  |     padding: 16px 34px; | ||
|  |     font-size: 18px; | ||
|  |     transition: all 0.5s ease-in 0s; | ||
|  | } | ||
|  | .carousel-info, blockquote { | ||
|  |     float: left; | ||
|  | } | ||
|  | .social-list li{ | ||
|  | 	transition: 0.2s linear; | ||
|  | 	-webkit-transition: 0.2s linear; | ||
|  | 	-moz-transition: 0.2s linear; | ||
|  | 	opacity: .5; | ||
|  | 	display: inline-block; | ||
|  | 	margin: 0; | ||
|  | } | ||
|  | .social-list li a{ | ||
|  | 		font-size: 28px; | ||
|  | 		margin-right: 15px; | ||
|  | } | ||
|  | .type-underline, .type-underline:hover{ | ||
|  | 	color: #767676; | ||
|  | } | ||
|  | .footer__lower { | ||
|  |     margin-top: 3.25em; | ||
|  | } | ||
|  | .type--fine-print{ | ||
|  | 	color: #767676; | ||
|  | } | ||
|  | .navbar-toggle { | ||
|  |     position: relative; | ||
|  |     background-color: #fff; | ||
|  |     border-radius: 4px; | ||
|  | } | ||
|  | .navbar-nav > li > a { | ||
|  |     padding-top: 24px; | ||
|  |     padding-bottom: 24px; | ||
|  | } | ||
|  | .navbar-brand{ | ||
|  | 	margin-top: 9px; | ||
|  | } | ||
|  | .grid-item { width: 200px; } | ||
|  | .grid-item--width2 { width: 400px; } | ||
|  | 
 | ||
|  | /*********************************** | ||
|  | ************************************ | ||
|  | Responsive media queries | ||
|  | ************************************ | ||
|  | ***********************************/ | ||
|  | @media (min-width: 551px) and (max-width: 980px){ | ||
|  | 	.title-text{ | ||
|  | 	margin-bottom: 15px; | ||
|  | 	} | ||
|  | } | ||
|  | @media (min-width: 100px) and (max-width: 550px) { | ||
|  | 
 | ||
|  | 	.navbar-nav > li > a { | ||
|  |     padding-top: 15px; | ||
|  |     padding-bottom: 15px; | ||
|  | 	} | ||
|  | 	.navbar-brand{ | ||
|  | 		margin-top: 0px; | ||
|  | 	} | ||
|  |     .carousel-info { | ||
|  |     	margin-bottom: 30px; | ||
|  | 	} | ||
|  | 	.type--fine-print{ | ||
|  | 		text-align: center; | ||
|  | 	} | ||
|  | 	.text-center-xs{ | ||
|  | 		text-align: center !important; | ||
|  | 	} | ||
|  | 	.social-list{ | ||
|  | 		margin-bottom: 15px; | ||
|  | 	} | ||
|  | 	.banner-text h2, .banner-text p { | ||
|  |     font-size: 30px; | ||
|  | 	} | ||
|  | 	.title-text{ | ||
|  | 	margin-bottom: 15px; | ||
|  | 	} | ||
|  | } |