@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
		
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;
}

/*fonts here*/
/* Frank-Regular on all fonts */
@font-face {
        font-family: 'Frank';
        src: 
                url('../fonts/FrankNew-Regular.eot'),
                url('../fonts/FrankNew-Regular.woff2') format('woff2'),
                url('../fonts/FrankNew-Regular.woff2') format('woff'),
                url('../fonts/FrankNew-Regular.ttf') format('truetype');
        font-weight:	normal;
        font-style:	 normal;
        font-stretch: normal;
}
@font-face {
        font-family: 'Frank';
        src: 
                url('../fonts/FrankNew-Regular.eot'),
                url('../fonts/FrankNew-Regular.woff2') format('woff2'),
                url('../fonts/FrankNew-Regular.woff2') format('woff'),
                url('../fonts/FrankNew-Regular.ttf') format('truetype');
        font-weight:	normal;
        font-style:	 italic;
        font-stretch: normal;
}
@font-face {
        font-family: 'Frank';
        src: 
                url('../fonts/FrankNew-Regular.eot'),
                url('../fonts/FrankNew-Regular.woff2') format('woff2'),
                url('../fonts/FrankNew-Regular.woff2') format('woff'),
                url('../fonts/FrankNew-Regular.ttf') format('truetype');
        font-weight:	bold;
        font-style:	 normal;
        font-stretch: normal;
}
@font-face {
        font-family: 'Frank';
        src: 
                url('../fonts/FrankNew-Regular.eot'),
                url('../fonts/FrankNew-Regular.woff2') format('woff2'),
                url('../fonts/FrankNew-Regular.woff2') format('woff'),
                url('../fonts/FrankNew-Regular.ttf') format('truetype');
        font-weight:	bold;
        font-style:	 italic;
        font-stretch: normal;
}
/*icons*/
/* Ico Iconfont Regular */
@font-face {
font-family: 'IcoIcons';
         font-style:normal;
         font-weight:normal;
         src: 
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Regular.eot'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Regular.woff') format('woff'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Regular.ttf') format('truetype'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Regular.svg') format('svg');
}

/* Ico Iconfont Bold */
@font-face {
font-family: 'IcoIcons';
         font-style:normal;
         font-weight:bold;
         src: 
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Bold.eot'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Bold.woff') format('woff'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Bold.ttf') format('truetype'),
                 url('http://cdn.iconstorm.services/webfonts/icowebsite/IcoIconfont-Bold.svg') format('svg');
}

@font-face {
    font-family: 'anyfit';
    src: url('../fonts/anyfit_iconfont_1.8-webfont.woff2') format('woff2'),
         url('../fonts/anyfit_iconfont_1.8-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*definitions*/
html, body {
        font-family: "Frank", "Myriad Pro", Helvetica, Arial, "sans-serif";
        padding:0px;
        margin:0px;
        overflow-x: hidden;
		/*background-image: url("../share-10.png");
		background-position: right;
		background-attachment: fixed;
		background-repeat: no-repeat;*/
}
		
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
	
	
}
		
header {
    width:auto;
    height:72px;
	background-color:#fff;
 /*   background-image: url(../img/wud-ffm-bg.png);
    background-size: cover;
    background-position: center center;
*/
    position:relative;
}
#brandimg {
        position:absolute;
        top:0px;
        right:0px;
        max-width:50%;
        max-height:66.666666%;
}

/* content */
.contentdiv div.chapter {
    padding-top: 4.6em;
}

h5 {
	text-transform:uppercase;
	font-size:0.825rem;
	letter-spacing: 0.2em;
	margin-top:0em;
	line-height:2em;
	color:#7F7F7F;
	display:block;
	border-top: 1px solid #FF4F39;
	padding-top:1rem;
}
.socialcta h5 {
        border-top:0px;
        margin-top:5rem;
}

.chapter h5:first-of-type {
        border-top:none;
        padding-top:0px;
		/*margin-bottom: 0.75em;
		border-bottom: 1px solid #FF4F39;
		padding-bottom: 0.75em;*/
}

content a {
        color:#53B599;
        text-decoration:none;
        letter-spacing:0.02em;
}
content figure {
        clear: both;
        padding-top:1.5rem;
}
    content figure img {
            max-width:100%;
            float:none;
            height:auto;
            border-radius: 4px;
			position:absolute; 
			z-index:-2; 
			width:112%; 
			top:-4px; 
			left:-10%; 
			max-width: none; 
		 	box-shadow: 0px 2px 16px #dddddd;

    }
    
    content figure .imgwrap {
            float: left;
            margin-right:2.5em;
            margin-bottom:1.5rem;
            width: 43%;
			box-sizing: border-box;
    }
    
content figure figcaption {
        float: right;
        width: 50%;
		box-sizing: border-box;
}
content figure figcaption b, content figure figcaption strong {
        font-size:2.5rem;
	line-height: 1.25em;
        display:block;
        padding-bottom:0rem;
        margin-bottom:1rem;
		margin-top:.5rem

} 
content figure::after {
        content:" ";
        height:0px;
        width:100%;
        display:block;
        clear: both;
        overflow: hidden;
}

/* navigation */
nav {
    background: none;
    position:absolute;
    bottom:0px;
    width:100%;
    font-size:1.5rem;
}

nav ul {
    list-style: none;
    float:right;
    margin-right:1.5em;
    text-transform: lowercase;
}
nav ul li{
    display:inline;
    color:white;
}
nav ul li a{
    display:inline-block;
    margin-right:1em;
    text-decoration: none;
    color:gray;
    line-height:3em;
}
nav ul li.current a, nav ul li a.current, nav ul li a:hover{
    color:black;
}
nav ul li.current a {
    cursor:auto;
}

nav ul li ul{
    display:none;
}

nav ul li.archive {
        position:relative;
}
nav ul li.archive ul {
        background-color: #C53B30;
        padding-top:1rem;
        padding-bottom:1rem;
}
nav ul li.archive ul li {
        width:auto;
        white-space: nowrap;
        padding-left:1rem;
        line-height:1rem;
}
nav ul li.archive ul li a {
        line-height:2em;
}
@media screen and (min-width:900px){
    nav ul li.archive:hover ul {
            display:block;
            width:auto;
            position:absolute;
            top:100%;
            right:0px;
            margin-right:0px;
    }
}


/* stickynav */
.stickyonly {
    /*display: none;*/
    font-size: 40px;
    color:#FF4F39;
    line-height: 72px;
    padding-left: 7%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
	width: auto;
}
.colorblock {
	display:none;/*
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    z-index: 4;
    background-color: #D2F3EA;
    display: block;
    width: 120px;    
}
.colorblock:before {
    content: " ";
    height: 50%;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    z-index: 4;
    background-color: #E13D31; */
}

.scrolled .stickyonly {
    display: block;
}

.scrolled nav {
    background-color:#ffffff;
	/*background-image: url(../img/wud-ffm-bg.png);
	background-size: cover;
	background-position: center center;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 72px;
    line-height: 72px;
}

/* social */
.socialcta a {
    color: #000;
    font-size: 30px;
    display: inline-block;
    margin-right: 15px;
    font-family: IcoIcons;
    font-weight: bold;
}
.socialcta a:hover {
    color: #FF4F39;
}

content {
    margin-bottom:10rem;

}

content:after {
    content:" ";
    display:block;
    clear:both;
    height:10rem;

}

content .ctadiv {
    position: fixed;
    top: 72px;
    right: -41%;
    bottom: 0;
    width:33.33333%;    
    background-color: #D2F3EA;
    height:auto;
    display: block;
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.ctadiv {
        /*display:none;*/
        padding:2rem;
}

.scrolled content .ctadiv {
    right: 0;
    opacity: 1;
}

.socialcta {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;
}

footer {

}
	
.contentdiv {
    width:50%;
    margin:0px 7%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img.make-bg { /*make img sticky in the back*/
	position: fixed;
	z-index: -100;
	max-width:50%;
	max-height:60%;
	right:-4%;
	bottom:10%;
}

.registercta {
    font-size:2.5rem;
}
.registercta a {
    font-size:1.5rem;	
    color:black;
    background-color:#6BEAC7;
    text-decoration: none;
    border-radius: 2px;
    line-height:1em;
    padding:0.25em 0.5em;
    text-transform: lowercase;
}
 a.btn {
    font-size:1em;	
    color:black;
    background-color:#6BEAC757;
    text-decoration: none;
    border-radius: 2px;
    line-height:1em;
    padding:0.5em 0.5em;
    text-transform: lowercase;
}
 a.more-info {
    font-size:0.8em;	
    color:#6BEAC;
    border-radius: 2px;
    text-transform: lowercase;
}
header .registercta {
    color:white;
    position:absolute;
    top:50%;
    margin-top:-6rem;
}

/*h1 {
    text-transform:uppercase;
    font-size:0.75rem;
    letter-spacing: 0.2em;
    margin-top:2em;
    line-height:2em;
    margin-bottom:4em;
}*/
h1 {
    /*part of the header so customized*/
    font-size: 40px;
    color:#FF4F39;
    line-height: 72px;
    padding-left: 0;
}
h2 {
    font-size: 2.5rem;
	margin-top: 0;
	line-height: 1.25em;
	margin-bottom: 0.75em;
	border-bottom: 1px solid #FF4F39;
	padding-bottom: 0.75em;
}
p {
        line-height:1.5em;
        margin-bottom:1.5em;
        font-size:20px;
}

	
	.contentdiv li {
		line-height:1.5em;
        margin-bottom:0.5em;
        font-size:20px;
	}

/* Smaller displays */
@media screen and (min-width:900px) and (max-width:1120px) {
   
    nav ul li a,
    nav ul li     {
        font-size: 1.2rem;
    }
    content .ctadiv    {
        width: 20%;
    }
    .ctadiv .registercta {
        font-size: 1.5rem;
    }
    .ctadiv .registercta a {
        font-size: 1rem;
    }
    .contentdiv {
        width: 66%;
        margin: 0px 2%;
    }
    figcaption {
        font-size: 0.8em;
    }
    content figure figcaption b, content figure figcaption strong {
        font-size: 2rem;
    }
	content figure content figure .imgwrap {
            float: left;
            margin-right:0
            margin-bottom:1.5rem;
            width: 50%;
			box-sizing: border-box;
	}
	content figure img {
            max-width:100%;
            float:none;
            height:auto;
            border-radius: 4px;
            position: relative;
			width:100%;
           	left:0;
			top:0px;
			max-width: none; 
    }
    .stickyonly {
        font-size: 28px;
		padding-left:2%;
    }


}

.menu-toggle {
    display: none;
    text-decoration: none;
    color: white;
    line-height: 40px;
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    right: 15px;
    text-transform: uppercase;
}
.menu-toggle:after {
    content: "m";
    font-family: anyfit;
    text-transform: none;
    font-size: 1.4rem;
}
.menu-toggle.open:after {
    content: "x"
}

footer {
    display: none;
}

.showmobile {
    display: none;
}


/* Smartphone view */
@media screen and (max-width:899px) {
    
    .showmobile {
        display: inline-block;
    }
    
    .scrolled nav {
        height: 40px;
        line-height: 40px;
    }
    
    .stickyonly {
        font-size: 24px;
        line-height: 40px;
        padding-left: 85px;
    }
    
    content figure figcaption {
        font-size: 1rem;
		width: 49%;
    }
    
    content figure figcaption b, content figure figcaption strong {
        font-size: 1.5em;
    }
    content figure content figure .imgwrap {
            float: left;
            margin-right:0;
            margin-bottom:1.5rem;
            width: 50%;
			box-sizing: border-box;
	}
	content figure img {
            max-width:100%;
            float:none;
            height:auto;
            border-radius: 4px;
            position: relative;
			width:100%;
           	left:0;
			top:0px;
			max-width: none; 
    }
    p {
        font-size: 16px;
    }
    
    /*h1 {
        font-size: 10px;
        margin-bottom: 0;
    }*/
	header {
		height: 40px;
	}
	h1 {
		font-size: 24px;
		line-height: 40px;
	}
	.contentdiv div.chapter {
		padding-top: 2em;
		max-width:600px;
	}
	.stickyonly {
		padding-left: 15px;
	}
    
    h2 {
        text-transform: lowercase;
        font-size: 24px;
		line-height: 1.5em;
    }
    
    .hidemobile {
        display: none;
    }
	
	img.make-bg { /*make img sticky in the back*/
		float:right;
		position: relative;
		z-index: 0;
		max-width:100%;
		max-height:300px;
		right:-5%;
		bottom:auto;
	}
	img.make-bg {
		display:none;
	}
    
    header .registercta {
        font-size: 2rem;
        clear: both;
        padding-top: 70px;
        position: initial;
        top: 0;
        margin: 0;
    }
    
    #brandimg {
        max-width: 70%;
        height: auto;
        max-height: 100%;
        position: initial;
        float: right;
    }
    
    #nav {
        display: none;
        background-color: #FF4F39;
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;       
        z-index: 99;
        padding: 75px 0;
        margin: 0;
    }
    
    nav ul#nav li ul {
        display: block;
    }
    
    nav ul {
        float: none;
        margin: 0;
    }
    
    nav ul#nav li.archive ul {
        background-color: transparent;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    nav ul#nav li.archive {
        margin-top: 40px;
    }
    
    nav ul#nav li.archive ul li {
        width: auto;
        white-space: nowrap;
        padding-left: 0;
        margin-left: 0;
        line-height: 1;
    }
    
    nav ul#nav li.archive ul li a {
        line-height: 30px;
    }
    
    .scrolled #nav {
        top: 40px;
    }
    
    #nav li {
        display: block;
        float: none;
        clear: both;
        margin-left: 85px;
        line-height: 1em;
    }
    
    #nav > li:nth-child(-n+6) {
        margin-left: 70px;
        padding-left: 15px;
        border-left: 2px solid #fff;
    }
    
    #nav > li.current:nth-child(-n+6) {
        border-left: 2px solid #000;
    }
    
     #nav li a {
        display: block;
        font-size: 24px;
        line-height: 30px;
    }
    
    #nav li.sml {
        font-size: 12px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
    }
    
    
    /*.menu-toggle {
        display: none;
		color:black;
    }*/
    
    content .ctadiv    {
        display: none;
    }
    
    .contentdiv {
        width: auto;
        margin: 0;
        padding: 0 15px;
    }
    
    footer {
        display: block;
    }
    
    footer a {
        color: black;
        text-decoration: none;
        padding: 0;
        text-transform: lowercase;
        background-color: #6BEAC7;
        line-height: 40px;
        font-size: 14px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999;
    }
    
    .colorblock {
        width: 70px;
        height: 40px;
    }
    
}

@media screen and (max-width:599px) {
    
    #brandimg {
        max-width: 95%;
    }
    
    content figure .imgwrap {
            float: none;
            margin-right:0;
            margin-bottom:1.5rem;
            width: auto;
    }

    content figure figcaption {
            float: none;
            width: auto;
    }
    
}

@media screen and (max-width:460px) {
	img {
		max-width: 100%;
	}
    content figure img {
        max-width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
}

@media screen and (max-height:460px) {
    
    #nav {
        padding: 35px 0;
    }
    
}