CSS Style Guide...tst

Expand All

.lightgray-wrap, .gray-wrap, .dark-wrap, .orange-wrap, .blue-wrap, .darkblue-wrap, .space-wrap, .white-wrap, purple-wrap {
	padding: 80px 0 60px;
	background-color: #fff
}
.lightgray-wrap {
	background-color: #f9f9f9;
}
.gray-wrap {
	background-color: #efefef;
	padding: 80px 0 60px
}
.dark-wrap {
	background-color: #2B303B;
	color: #fff
}
.orange-wrap {
	background-color: #e38a2d;
	color: #fff
}
.purple-wrap {
	background-color: #802145;
	color: #fff
}
.orangegrad-wrap {
	background: linear-gradient(360deg, #e38a2d 30%, #bb5b0b 100%);
	color: #fff
}
.blue-wrap {
	background-color: #83AADA;
	color: #fff
}
.darkblue-wrap {
	background-color: #001225;
	color: #fff
}
.space-wrap {
	border-top: 12px solid #f4f8fb;
	border-bottom: 12px solid #f4f8fb
}

.normal {
	font-weight: normal !important
}
.regular {
	font-size: 16px !important
}
.medium {
	font-size: 18px !important
}
.small {
	font-size: 14px;
	line-height: 1.43
}
.large {
	font-size: 20px;
	line-height: 1.6
}
.x-large {
	font-size: 24px
}
.xx-large {
	font-size: 30px
}
.xxx-large {
	font-size: 36px
}
.xxxx-large {
	font-size: 42px
}
.bg-lightblue {
	background-color: #acc6e5;
}
.bg-blue {
	background-color: #83aada
}
.bg-darkorange {
	background-color: #bb5b0b
}
.bg-orange {
	background-color: #e38b2d
}
.bg-darkblue {
	background-color: #002347
}
.bg-darkgray {
	background-color: #393939
}
.bg-white {
	background-color: #fff
}
.gray-bg {
	background-color: #efefef
}
.white {
	color: #ffffff !important
}
.blue {
	color: #83aada !important
}
.darkorange {
	color: #bb5b0b !important
}
.orange {
	color: #e38b2d !important
}
.red {
	color: #e5364d;
}
.darkblue {
	color: #002347 !important
}
.darkgray {
	color: #393939 !important
}
.padding-bottom-half {
	padding-bottom: 15px
}
.padding-bottom {

	padding-bottom: 30px
}
.padding-bottom-l {
	padding-bottom: 40px
}
.padding-bottom-xl {
	padding-bottom: 50px
}
.padding-top-small {
	padding-top: 10px
}
.padding-top-half {
	padding-top: 15px
}
.padding-top {
	padding-top: 30px
}
.padding-top-l {
	padding-top: 40px
}
.padding-top-xl {
	padding-top: 50px
}
.padding-small {
	padding-top: 10px;
	padding-bottom: 10px
}
.padding-top-small {
	padding-top: 10px;
}
.padding-half {
	padding-top: 15px;
	padding-bottom: 15px
}
.padding {
	padding-top: 30px;
	padding-bottom: 30px
}
.padding-l {
	padding-top: 50px;
	padding-bottom: 30px
}
.padding-xl {
	padding-top: 100px;
	padding-bottom: 30px
}
.zero-padding {
	padding-top: 0 !important;
	padding-bottom: 0 !important
}
.zero-padding-top {
	padding-top: 0 !important
}
.zero-padding-bottom {
	padding-bottom: 0 !important
}
.space-bottom-xxl {
	margin-bottom: 60px
}
.space-bottom-xxxl {
	margin-bottom: 70px
}
.space-top-small {
	margin-top: 7px
}
.space-top-half {
	margin-top: 15px
}
.space-top {
	margin-top: 30px
}
.space-top-l {
	margin-top: 40px
}
.space-top-xl {
	margin-top: 50px
}
.space-top-xxl {
	margin-top: 60px
}
.space-top-xxxl {
	margin-top: 70px
}
.space-small {
	margin-top: 10px;
	margin-bottom: 10px
}
.space-half {
	margin-top: 15px;
	margin-bottom: 15px
}
.space {
	margin-top: 30px;
	margin-bottom: 30px
}
.space-l {
	margin-top: 50px;
	margin-bottom: 30px
}
.space-xl {
	margin-top: 100px;
	margin-bottom: 30px
}
.button1, .button2, .button3 {
	padding: 12px 30px;
	letter-spacing: .2em;
	margin-bottom: 25px;
	display: inline-block;
	border-radius: 30px;
	text-transform: uppercase;
	background-color: transparent;
        text-align:center;
}
.button1, .button1:focus {
	border: 1px solid #fff;
	color: white;
}
.button1:hover {
	background-color: #fff;
	color: #393939
}
.button2, .button2:focus {
	border: 1px solid #aaa;
	color: #393939;
}
.button2:hover {
	background-color: #aaa;
	color: white;
}
.button3, .button3:focus {
	border: 1px solid #E38B2D;
	color: #E38B2D;
}
.button3:hover {
	background-color: #E38B2D;
	color: white
}
.button4 {
	padding: 8px 25px;
	display: inline-block;
	border-radius: 30px;
	text-transform: uppercase;
	background-color: transparent;
	margin: 15px 0
}
.button4, .button4:focus {
	border: 1px solid #aaa;
	color: #393939;
}
.button4:hover {
	background-color: #aaa;
	color: white;
}