/* --------------------  This is the CSS for the phone -------------------- */

/*-----Prevents iPhone from resizing in landscape mode -----*/
html {-webkit-text-size-adjust: none; }

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


$main-color: #fff;
$accent-color: #01a6d3;
$text-color: #707070;
$highlight-color: #0099cc;
$alt1-color: #eee;
$alt2-color: #6ebe45;

$main-font: 'Lato', sans-serif;
$light: 300;
$medium: 400;
$size: 32px;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}


/*---------  BODY ----------- */
body {
	font-size: $size * .5;  /* MATH OPERATOR */
	font-family: $main-font; /* VARIABLE  */ 

}

/*-----CONTAINER -----*/
#container {
	background-color: $main-color;   /* becomes the nav background color */
	min-width: 320px;
	max-width: 960px;
}

/*-----HEADER -----*/
header {
	border-bottom: 5px solid $alt2-color; /* VARIABLE  */ 

h1 {
	font-size:1.5em;
}
    
h2 {
	color:$accent-color;
	margin: -15px 0 10px 72px;
	font-size:.85em;
}
} /* ----- END OF HEADER NESTING ------- */

/* -----  NAVIGATION ----- */

nav {

    
ul li a {
	text-align: center;
	padding: .7em;
	text-decoration: none;
	display:block;
    background-color:$accent-color;  /* VARIABLE  */ 
	color:#fff;
    @include border-radius(10px);
	margin: .5em;
	font-size: .85em;
}
    
ul li a:hover {
	background-color:#07667c;
}
    
ul li.active a {
	background-color: #ccc;
	color:$text-color;  /* VARIABLE  */ 
}
    
} /* ------- END OF NAV NESTING -------- */


/* ------------  CONTENT -------------- */
#content {
	min-height: 5em;

article {
	margin: 0 2%;

.mortgage {
	margin-left:1.5%;
	color:$text-color;  /* VARIABLE  */ 
}

.news, .tweet {
	background-color: $alt1-color;
	margin-top: .5em;
	margin-bottom: .5em;
	padding-bottom: .5%;
}
    
} /* ------ END OF ARTICLE NESTING  -----  */

figcaption {
    margin-top:-.95em;
}
} /* ------ END OF CONTENT NESTING ------- */

article.news h2, article.tweet h2 {
	color:$main-color;  /* VARIABLE  */ 
	font-size: .8em;
	padding: .5em;
}

article.news h2 { 
    background-color: $alt2-color; /* VARIABLE  */ 
    padding-left: 1%; margin-top:-1px;
}
article.tweet h2 { 
    background-color: $accent-color; /* VARIABLE  */ 
    padding-left: 1%; margin-top:-1px;
}

article.news h3, article.tweet h3 {
	font-size: 1em;
	padding: .5em 0 0 1%;
}

article.news h3 { color: $alt2-color;}    /* VARIABLE  */ 
article.tweet h3 { color: $accent-color;} /* VARIABLE  */ 

article.news p, article.tweet p {
	color: #666;
	font-size: .8em;
	padding-right: 1%;
	line-height: 1rem + 0.5rem;  /* Math Operator */
}

h1,h2,h3,h4,h5 {
	margin: 1% 0;
}

p {
	margin: 1% 1%;
    line-height: 1rem + 0.5rem; /* Math Operator */
}
.financing {
	margin: 1% 1%;
	color:#014f91;
	font-size:1.2em;
	font-weight: $medium;   /* VARIABLE  */ 
}

article .highlight {
    color:$highlight-color; /* VARIABLE */ 
    margin-bottom:2em;


.backToTop {
    @extend .highlight; /* DEMONSTRATION OF EXTEND/INHERITANCE  */
}
} /* END OF ARTICLE HIGHLIGHT NESTING */


/* ----- IMAGES ------*/

figure.w100 {
    background-image: url(../images/home-phone.jpg);
    background-repeat: no-repeat;
    height: 245px;
}

figure.my30photo {
    width:30%; 
    float: right;
}

figure.w33 {
    width:96%;
    height: 173px; 
	border: 1px solid #999;
	margin: .3em 0 .3em 2%;
}
figure img {
	width: 100%;
}

#content figcaption {
	text-align: center;
	font-size: .85em;
	color:#777;
    padding: 1em.4em;
}

/* ------------------ DEMONSTRATION OF EXTEND/INHERITANCE ------------------- */

span.button {
    border: 1px solid #666;
    border-radius: 15px 5px;
    display: block;
    padding: .4em 1em .4em 1em;
    margin: .3em 0;
    max-width: 100%;
    font-size: .9em;
    font-weight: $medium;
    color: #000;

}
span.stepone {
    @extend span.button;
    background-color: #00bfff;
    	
}
span.steptwo {
    @extend span.button;
    background-color: #00ffff;
}
span.stepthree {
    @extend span.button;
    background-color: #00ffbf;
}
span.stepfour {
    @extend span.button;
    background-color: 	#00ff80;
}
/* --------------  END OF DEMONSTRATION OF EXTEND/INHERITANCE ------------------ */



/*----- FOOTER -----*/
footer {
	clear: both;
	text-align: center;
	padding: .65em;
	background-color: $alt2-color;  /* VARIABLE  */ 
	font-size: .75em;
    color: #000;
    text-decoration: none;
}

footer ul#socialmedia {
    text-align: center;

}
footer ul#socialmedia li {
    display: inline-block;
}

footer ul#socialmedia li a {
    font-size: 2.25em;
    margin: 0 .2em;
}
.companyInfo {
    margin: 1em auto;
    font-size: 1.3em;
    font-weight: bolder;
}
.companyInfo a {
    color: #000;
}

i { 
    color: #000; 
    text-decoration: none;
}