// -------------------------------------------------------------------------
// COMMENTS
// -------------------------------------------------------------------------

// This sheet: Styling for layout sections like the header, nav, main body, and footer.

// -------------------------------------------------------------------------
// HEADERS 
// -------------------------------------------------------------------------

#main-header {
    padding: 3em 0 5em 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
    color: white;
    position: relative;
    background: #000;
}

#main-header .container {
    position: relative;
    z-index: 2;
}

#main-header:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/evergreen.jpg) repeat center center;
    opacity: .6;
}

#main-header h1 {
    margin: .9em 0 .5em 0;
    letter-spacing: 8px;
}

#main-header p {
    font-weight: 700;
}

header {
    text-align: center;
}

.body-header {
    margin:0 0 4em 0;
}

// -------------------------------------------------------------------------
// BOTH CALLS TO ACTION 
// -------------------------------------------------------------------------

.call-to-action {
    background: #EDEFEE;
    padding: 1em 0 1em 0;
    border-bottom: 1px solid #ddd;
}

.cta-container {
    width: 90%;
	max-width: 600px;
	margin: auto;
}

.call-to-action p {
    float: left;
}

.call-to-action a {
    float: right;
}

.cta-2 {
    border-bottom: none;
}

// -------------------------------------------------------------------------
// MACBOOK SECTION 
// -------------------------------------------------------------------------

#macbook {
    text-align: center;
    padding: 4em 0 0 0;
}

#macbook img {
    margin: 5em 0 0 0;
    width: 80%;
}

// -------------------------------------------------------------------------
// SUMMARY SECTION 
// -------------------------------------------------------------------------

#summary {
    width: 100%;
    text-align: center;
    position: relative;
    padding: 4em 0 6em 0;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
    background: #AA7742;
}

#summary .container {
    position: relative;
    z-index: 2;
}

#summary:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/summary.jpg) repeat center center;
    opacity: .3;
}

#summary p {
    margin: 0 0 2.7em 0;
}

#summary a, .slider a {
    color: white;
    border-bottom: 1px solid white;
}

#summary .btn, .slider .btn {
    background: transparent;
    border: 2px solid #FCFCFC;
    -webkit-transition: background-color .2s ease-out;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: initial;
    -moz-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    -ms-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    transition-delay: initial;
}

#summary .btn:hover, .slider .btn:hover {
    background: rgba(255,255,255,.2);
    color: white;
}

// -------------------------------------------------------------------------
// THREE IMAGES SECTION 
// -------------------------------------------------------------------------

#three-images {
    padding: 4em 0 6em 0;
}

.img-circle-div {
    .column(4);
    text-align: center;
}

#three-images img {
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

// -------------------------------------------------------------------------
// SLIDER SECTION
// -------------------------------------------------------------------------

#slider-main {
    padding: 4em 0 3em 0;
    color: white;
}

.slider {
    position: relative;
    overflow: auto;
    color: white;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
}

.slider ul {
    list-style-type:none !important;
    padding: 0;
    margin: 0;
}

.slider li {
    list-style: none !important;
    height: 25em;
    position: relative;
}

.slider ul li {
    float: left;
    padding-top: 8em;
}

.slider h2, .slider p {
    width: 90%;
    max-width: 1000px;
}

.slider h2 {
     margin: .9em auto .9em auto;
}

.slider p {
     margin: 0em auto 2.7em auto;
}

#left-arrow, #right-arrow {
    position: absolute;
    z-index: 100;
    margin-top: 15em;
}

#left-arrow {
    background-position: 0 0;
    left: 40px;
}

#right-arrow {
    background-position: 0 0;
    right: 40px;
}

#left-arrow a, #right-arrow a {
    color: white;
    border-bottom: none;
}

// Slides ------------------------------

.slide h2, .slide p, .slide a {
    position: relative;
    z-index: 2;
}

.slide:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#slide1 {
    background: #547293;
}

#slide1:after {
    background: url(../images/slide1.jpg) repeat center center;
    opacity: .3;
}

#slide2 {
    background: #C1B04D;
}

#slide2:after {
    background: url(../images/slide2.jpg) repeat center center;
    opacity: .3;
}

#slide3 {
    background: #89587E;
}

#slide3:after {
    background: url(../images/slide3.jpg) repeat center center;
    opacity: .3;
}

#slide4 {
    background: #AA7742;
}

#slide4:after {
    background: url(../images/slide4.jpg) repeat center center;
    opacity: .3;
}

// -------------------------------------------------------------------------
// LIST SECTION
// -------------------------------------------------------------------------

#list {
    padding: 4em 0 4em 0;
}

#list i {
    position: absolute;
}

#list h3 {
    margin: 0 0 20px 70px;
}

#list article p {
    margin: 0 0 0 70px;
}

.list-row {
    .row(12);
    margin: 3em 0 3em 0;
    padding: 0 0 3em 0;
    border-bottom: 1px solid #ddd;
}

.list-row:last-child {
    border-bottom: 0;
    padding:0;
}

.list-item {
    .column(6,12);
}

hr {
    color: #ddd;
}

// -------------------------------------------------------------------------
// FOOTER 
// -------------------------------------------------------------------------

footer {
    padding: 3em 0 3em 0;
    height: 25px;
}

.social-boat {
    float: left;
}

.social-boat div {
    display: inline-block;
}

#footer-text {
    float: right;
}

#footer-text p {
    margin: 0;
}