@import url("https://fonts.googleapis.com/css?family=Roboto:400,900");

*,
::after,
::before {
	box-sizing:border-box;
}
*:before,
*:after {
	box-sizing:border-box;
	padding: 0;
    margin: 0;
}

body,
html {
	height:100%;
	width:100%;
}
body {
	font-family:Roboto,Verdana;
	font-size:1.5em;
	color:#fff;
	background:#0049bf url(/assets/img/concrete-wall.png) repeat 0 0;

	display:flex;
	flex-direction:column;
	overflow-x:hidden;
}
html {
	background:#ee0b3b url(/assets/img/concrete-wall.png) repeat 0 0;
	box-shadow:inset 0 0 20px -1px rgba(0,0,0,0.5);
}

img {
	max-width:100%;
	height:auto;
	margin:1rem;
	border:1px solid rgba(177,177,177,.5);
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-white {
    color: #fff;
}

.fl-right{float:right}
.fl-left{float:left}

h1 {
	font-weight:900;
	margin:.5rem 0 1.5rem;
	padding-bottom:.5rem;

	border-bottom:.25rem solid #bbb;

	text-shadow:1px 1px 0 #333;
	text-align:center;
	font-size:2.1em;
}
h4 {
	font-size:1.25em;
}

.wrap {
	min-width:61.25rem;
	margin:5rem auto 0;
	padding-top:0;
	position:relative;
	top:-1rem;
}

@media (max-width:63rem) {
	html {
		font-size:15px;
	}
	.wrap {
		max-width:none;
		min-width:100%;
		width:100%;
		padding:1rem;
		padding-bottom:0;
	}
}
@media (max-width:45rem) {

	img {
		max-width:320px;
		margin:.5rem auto;
		text-align:center;
	}
	.wptexas-logo {
		max-width:200px;
	}

	.wrap0,
	.brand {
		padding-top:50px !important;
	}

	.fl-left,
	.fl-right {
		display:block;
		float:none;
		/*margin:0 30px;
		padding:0 30px;*/
		text-align:center;
	}
}

/* CONTAINER | FLEX */

.container {
    max-width: 1000px;
    margin: 0 auto;
}
.flex {
    display: flex;
}
.col {
    flex: 1;
    margin: 0 15px;
}
.col-2 {
    flex: 2;
    margin: 0 15px;
}
.col-3 {
    flex: 3;
    margin: 0 15px;
}

/* NAV */

.logo {
	display:inline-block;
	vertical-align:middle;
	border:0 none;
	padding:3px;
	margin:0;
	border-radius:32px;
}

nav {
    color: #fff;
    font-family: Roboto,Verdana;
    font-size: 22px;
    font-weight: 500;
    position: fixed;
    transition: all 0.2s;
    width: 100%;
    z-index: 1000;
}
.nav {
    display: flex;
    padding: 0px 30px;
    justify-content: space-between;
    transition: background 0.2s;
}
.nav span {
    margin-top: 35px; /*30*/
	font-weight:bold;
	text-shadow:1px 1px 0 #444;
}
.nav-items {
    display: flex;
}
.nav-items a,
.nav span a {
    box-sizing: border-box;
    padding: 30px 0 5px 0;
    margin: 0 30px;
    text-decoration: none !important;
	font-weight:bold;
    /*color: white;*/
    transition: padding 0.2s;
}
.nav span a {
	margin-left:0;
	color:#f0f0f0;
	padding-top:0;
}
.nav span a:hover {
	color:#fff;
}
.nav-items a:hover {
    border-bottom: 3px solid #e0ebfe;
    padding-top: 25px;
}
.nav-items a:last-child {
    display: none;
}
.nav-items a:last-child:hover {
    cursor: pointer;
    border: none;
    color: #e0ebfe;
    /*background-color: #0099c4;*/
}

	/* scrolling down */

.nav-scroll {
	background:#00245b url(/assets/img/concrete-wall.png) repeat 0 0;
    /*background:#00245b;*/
    color: white;
    font-size:87.5%;
    transition: all 0.1s;
}
.nav-scroll span {
    margin-top:5px;
}

.nav-scroll .nav-items a {
    padding:15px 0;
    color: white;
    border: none;
    border-top: 3px solid transparent;
}
.nav-scroll .nav-items a:hover {
    border-color: #7793c4;
}
.nav-scroll .nav-items a.active {
    color:#afc7f2;
    border-color:#afc7f2;
}

.nav-scroll span a {
	padding-bottom:0;
	padding-top:20px;
	vertical-align:middle;
}
.nav-scroll span a img {
	vertical-align:middle;
	max-height:48px;
}

.nav-scroll .nav-items {
	transform:rotate(0deg) !important;
}

	/* */

.nav-overlay {
    height:100vh;
    width:0;
    position:fixed;
    z-index:10000;
    background-color:#00245b; /*5b0012*/
    overflow-x:hidden;
    transition:all 0.2s;
    padding-top:20px;
    text-align:center;
}
.nav-overlay a {
    padding: 15px;
    text-decoration: none !important;
    font-size: 22px;
	font-weight:bold;
	letter-spacing:2px;
	text-shadow:1px 1px 0 rgba(0,0,0,1);
    /*color: #E8F4F7;*/
	background-color:rgba(255,255,255,0.3);
    display: block;
    transition: 0.2s;
	margin:5px auto;
}
.nav-overlay a:hover {
    color: #fff;
	background-color:rgba(255,255,255,0.6);
}

.nav-overlay .logo,
.nav-overlay .logo:hover {
	background:transparent none;
	border-radius:64px;
	display:inline-block;
}

.nav-overlay .toggle-nav {
    position:absolute;
    top:0;
    right:0;
    padding:20px;
    font-size:22px;
	background-color:rgba(255,255,255,0);
}
.nav-overlay .toggle-nav:hover {
    cursor: pointer;
    background-color: #a6233c;
}

/* */

img.fl-left {
	border-radius:20px;
}
.img-shadow {
	box-shadow:2px 2px 5px -1px rgba(0,0,0,0.5);
	border-radius:20px;
}

.centered {
	text-align:center !important;
	position:relative;
	top:0;
	margin-bottom:20px;
}

/* */

.wrap {
	position:inherit;
	/*display:flex;*/

	max-width:60%;
	/*min-width:61.25rem;*/
	margin:3rem auto 0;

	top:-3.5rem;
}
.wrap-next {
	top:0;
}

.wrap0,
.wrap1,
.wrap2,
.wrap3 {
	background:transparent url(/assets/img/concrete-wall.png) repeat 0 0;
	display:block;
	position:relative;
	top:0;

	box-shadow:inset 0 0 20px -1px rgba(33,33,33,0.5),0 0 20px -1px rgba(33,33,33,0.5),inset -10px -10px 20px 5px rgba(33,33,33,0.25);
}
.wrap2,
.wrap3 {
	box-shadow:inset 0 0 20px -1px rgba(0,0,0,0.5);
}

.wrap0 {
	background-color:#ee0b3b; /* red */
	padding-top:100px;
	color:#fff;
}
.wrap1 {
	background-color:#0051d3;
	z-index:1;
}
.wrap2 {
	background:#f7f7f7 url(/assets/img/concrete.png) repeat 0 0; /*003b9a*/
	color:#000;
	padding-bottom:100px;
}
.wrap3 {
	background:#181d21 url(/assets/img/noisy.png) repeat 0 0; /*152063*/
	z-index:1;
}

.wrap1:before,
.wrap1:after,
.wrap3:before {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	background:inherit;
	z-index:-1;
	bottom:0;
	left:0;
	transform-origin:left bottom;
	transform:skewY(-4deg);
}
.wrap1:before {
	transform:skewY(-3.4deg);
}
.wrap1:after {
	transform:skewY(3.3deg);
}

/* */

.shape {
	position:absolute;
	z-index:0;
}

/* */

hr {
	display: block;
	clear: left;
	margin: 1em 0;
	height:1px;
	color:#5270a5;
	border:2px solid #5270a5;
}

a,
a:link,
a:active,
a:visited {
	color:#b1ccfd;
	text-decoration:underline;
	transition:.15s;
}
a:hover {
	color:#e0ebfe;
}

/* */

.features,
.interest-box {
	clear:both;
	display:block;
	margin:20px 0;
	padding-top:30px;
}
.features {
	margin-top:60px;
}
.interest-box {
	padding-top:0;
	margin-bottom:-110px; /*-163*/
}

.list {
	list-style-type:none;

	font-family:'Open Sans',Roboto,Verdana;
	font-size:92%;
	/*font-weight:bold;*/
	line-height:1.85rem;
	padding:10px 0;
	text-shadow:1px 1px 0 rgba(0,0,0,.2);
}
.list > li {
	margin:10px auto 40px;
	text-align:center;
}
.list > li i {
	font-size:3rem;
	display:inline-block;
	margin:2px;
	color:#333;
	text-align:center;
}

.box {
	display:block;
	padding:1rem;
	background:#345faa;
	background:linear-gradient(0deg, rgba(11,19,76,.8) 0%, rgba(5,12,61,.9) 30%, rgba(27,38,117,.6) 100%);
	color:#fff9e6;
	border-radius:10px;
}

.highlight {
	color:#1a30b6;
	display:inline-block;
	padding:3px 6px;
	border-radius:10px;
	background:linear-gradient(0deg, rgba(94,53,12,.35) 0%, rgba(189,154,108,.1) 100%);
	text-shadow:none;
	font-size:120%;
	font-weight:bold;
}

/* SECTIONS */

section {
	position:relative;
}

.brand { /* first section */
	background-color:#ee0b3b; /* red */
	padding-top:100px;
}
.brand .container {
    position:inherit;
	z-index:1;
}

	/* second section */

.title {
	z-index:1;
}

.site-title {
	max-width:940px;
	margin:0 auto;
	text-align:center;
}

.wptexas-logo {
	border:0 none;
	display:inline-block;
	background:rgba(255,255,255,1) url(/assets/img/concrete.png) repeat 0 0;
	padding:10px;
	border-radius:40px;
}

	/* third section */

.features-list {

}

	/* fourth section */

.warp,
.nav .nav-items {
	transform:rotate(-2deg);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.nav .nav-items {
	transform:rotate(-3.4deg);
}

.footer {
	z-index:1;
}

.copy-text {
	margin:10px auto;
	font-size:70%;
	font-style:italic;
	padding-top:5px;
	padding-bottom:12px;
}

/* */


@media only screen and (max-width: 1023px) {
	h1 {
		font-size:140%;
	}

	.box {
		margin-left:30px;
		margin-right:30px;
	}

	.features-list {
		padding-left:20px;
		padding-bottom:40px;
		font-size:85%;
		word-wrap:break-word;
	}
}

@media screen and (max-width: 900px) {
	.nav {
		padding-right:0;
	}
	.nav span {
		margin:0 auto;
		margin-top:20px; /*10*/
		display:inline-block;
	}
	.nav-scroll span {
		margin-top:10px;
	}
	.nav-scroll {
		min-height:65px;
	}
	.nav-scroll .nav {
		text-align:center;
	}

	.nav-scroll span a img {
		max-height:48px;
	}

	.nav .nav-items {
		transform:rotate(0deg) !important;
	}
	.nav-items a {
		 display:none;
		 padding: 0;
	}
	.nav-items a:last-child {
		display: block;
		padding: 30px;
		margin: 0;
		border-bottom: none;
	}
	.nav-scroll .nav-items a:last-child {
		padding: 20px;
	}

	.flex {
		flex-direction:column;
	}

	.box {
		margin-left:20px;
		margin-right:20px;
	}

	.interest-box {
		margin-bottom:-120px; /*-100*/
	}
}