/* This CSS file is part of the HTML5 / CSS3 tutorial on http://www.lingulo.com */

/* GLOBAL */
body
{
        border-top:5px solid #CDD6DC;
        background:#97a9b7;
        font-family: 'Open Sans', sans-serif;
        color:#4A463B;
}

input
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
/*        border:2px;*/
        width:250px;
        background: #ffffff;
        border-radius:5px;
}

textarea
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
/*        border:2px;*/
        width:500px;
        height:200px;
        background: #ffffff;
        border-radius:5px;
}

input[type=submit], input[type=reset]
{
        width:auto;
        padding: 5px 18px;
        line-height:25px;
        text-shadow:none;
        cursor:pointer;
        box-shadow: none;
        background: #333333;
        color: #fff;
}

h4
{
        font-weight: bold;
        margin-top: 24px;
}

p
{
        margin:5px 0;
        line-height:25px;
}

a
{
        text-decoration:none;
        color:inherit;
        transition: color .5s ease;
}

strong
{
        font-weight:bold;
}

figcaption strong
{
        border-bottom: 1px solid #D6D0C1;
        padding-bottom:10px;
        margin: 10px 0;
        display:block;
        text-align: center;
}

figcaption
{
        line-height: 25px;
        font-size:14px;
        width:280px;
        text-align: center;
}

figure
{
        text-align: center;
}
hr
{
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}


/* HEADER */

header
{
        position:relative;
        width:auto;
        max-width:900px;
        margin: 0 auto 20px auto;
}

header h1
{
        margin:35px 0 0 165px;
        font-size:55px;
        color:#000000;
        font-family: 'Prata', serif;
}

header img
{
        position:absolute;
        top: -35px;
        left: 0px;
}

header p
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        color: #4A463B;
        margin-left:62px;
}

nav
{
        position:absolute;
        right:0;
        bottom:0;
}

nav ul
{
        list-style:none;
}

nav ul li
{
        display:block;
        float:left;
        padding:3px 15px;
}

nav ul li a
{
        text-transform:uppercase;
}
a
{
        font-family: 'Open Sans', sans-serif;
        transition: all .25s ease;
        color:#0000FF;
}

a:hover
{
        color:#E56038;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #E56038;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #CC5836;
}

#mobileMenu ul li a
{
        padding: 12px 30%;
}

.toggleMobile
{
        display: none;
}

#design_flow
{
        display: none;
}

#slider_content1, #slider_content2, #slider_content3, #slider_content4, #slider_content5
{
        line-height: 25px;
        font-family: 'Open Sans', sans-serif;
        width:350px;
        max-width:900;
        position:absolute;
        top:15%;
        left:15%;
        display:none;
        z-index:11;
}

#slider_content1 h3, #slider_content2 h3, #slider_content3 h3, #slider_content4 h3, #slider_content5 h3
{
        color:#97a9b7;
        font-size:25px;
        font-weight:bold;
        margin-bottom:10px;
        background-color:#333333;
        padding:10px 15px;
        border-radius: 15px 0 15px 0;
        display:inline-block;
}

#slider_content1
{
        display:block;
}

#slider_content1 p, #slider_content2 p, #slider_content3 p, #slider_content4 p, #slider_content5 p
{
        margin:0 0 30px 0;
        color:#4a463b;
        background-color:#97a9b7;
        padding:10px 15px;
        border-radius: 5px;
}

/* form */
.form-item-required
{
        font-weight: bold;
}

.form-item-text
{
        font-weight: bold;
		vertical-align: top;
}


/* BUTTONS */

.button
{
        padding:7px 14px;
        border: 1px solid #c3532e;
        background-image: linear-gradient(bottom, #E56038 0%, #ff8c66 100%);
        background-image: linear-gradient(to bottom, #ff8c66 0%, #E56038 100%);
        background-color: #eb653c;
        color: #EBE8DE;
        text-shadow: 1px 1px 0px #ff8155;
        text-decoration:none;
        border-radius:5px;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

.button:hover
{
        background:none #EBE8DE;
        border-color: #EBE8DE;
        text-shadow:none;
        color: #4A463B;
}



/* THREE COLUMNS */

#three_columns, #text_columns, #design_flow 
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        clear:both;
        width:auto;
        max-width:900px;
        margin:0 auto;
}

#three_columns h2, #text_columns h3, #design_flow h2
{
        font-size:20px;
        border-bottom: 1px solid #D6D0C1;
        padding: 20px 0;
        margin-bottom: 20px;
}

.img-item
{
        float:left;
        margin-right:10px;
        margin-left:10px;
}

.img-item a
{
        position:relative;
        display:block;
}

.thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0;
        background: #000 url(../img/zoom.png) center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
}

#three_columns .thumb-screen
{
        width:100%;
        height:113px;
}

#design_flow .thumb-screen
{
        width:100%;
        height:121px;
}

.thumb-screen:hover
{
        opacity:0.5;
}


/* TWO COLUMNS */

#text_columns .column1, #text_columns .column2, #text_columns .full_width
{
        margin: 20px 10px;
        font-size:14px;
        float:left;
        width:45%;
}

#text_columns .full_width
{
        width:100%;
}

#text_columns ul
{
        list-style:disc inside;
}

.row
{
        position:relative;
        margin: 40px 0 0 50px;
        float:right;
        width:350px;
}

.row img
{
        float:left;
}

.row p
{
        margin-left: 100px;
}


/* FOOTER */
footer
{
        position:relative;
        clear:both;
        width:auto;
        background:#333333;
}

footer .wrapper
{
        line-height:25px;
        margin: 0 auto;
        padding-top:30px;
        width:auto;
        max-width:900px;
        font-size:14px;
}

#copyright
{
        background: #1D1D1D;
        height:70px;
        bottom:0;
        left:0;
        width:100%;
}
#copyright .wrapper
{
        font-family: 'Open Sans', sans-serif;
        padding-top:25px;
        color: #5e5e5e;
        font-size:14px;
        position:relative;
}
#copyright .wrapper a
{
        color: #ABABAB;
}

#copyright .wrapper a:hover
{
        color: #fff;
}

/* SKIPLINK */
.go-top
{
        position: fixed;
        bottom: 2em;
        right: 2em;
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 1em;
        display: none;
}

.go-top:hover
{
        background-color: rgba(0, 0, 0, 0.6);
}


/* SLIDESHOW */
/* Prevent the slideshow from flashing on load */
.slidesjs-container
{
        border-top: 1px #97a9b7 solid;
}
.slidesjs-control
{
        /*limit picture size*/
        max-width: 900px 
}
#slides
{
        display: none
}

/* Center the slideshow */
.container
{
        width:auto;
        margin: 0 auto;
        position:relative;
        /*limit picture size*/
        max-width: 900px 
}


#slides .slidesjs-previous {
  margin-right: 5px;
  margin-top:5px;
  float:left;
}
#slides .slidesjs-next {
  margin-right: 5px;
  margin-top:5px;
  float:left;
}

.slidesjs-pagination {
    margin:6px 0 0;
    float: right;
    list-style: none;
}

.slidesjs-pagination li {
    float: left;
    margin: 0 1px;
}

.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(../img/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px }

.slidesjs-pagination li a:hover { background-position: 0 -26px }

#slides a:link, #slides a:visited { color: #333 }

#slides a:hover, #slides a:active { color: #9e2020 }


/* Show active item in the pagination */
.slidesjs-pagination .active
{
        color:red;
}

#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p  .responsive_button, #slider_content4 p  .responsive_button, #slider_content5 p  .responsive_button
{
        display:none;
        color:#000;
}


/* MISC */
.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 916px)
{
        figcaption
        {
                width:260px;
        }
}
@media (max-width: 856px)
{
        figcaption
        {
                width:240px;
        }
}
@media (max-width: 796px)
{
        figcaption
        {
                width:220px;
        }
}
@media (max-width: 736px)
{
        figcaption
        {
                width:200px;
        }
}
@media (max-width: 676px)
{
        figcaption
        {
                width:180px;
        }
}

@media (max-width: 616px)/* back to single columns*/
{
        figcaption
        {
                width:100%;
        }
        .img-item
        {
                float:initial;
        }
        #text_columns .column1, #text_columns .column2
        {
                width:auto;
        }

}
@media (max-width: 780px)
{
        header
        {
                height:120px;
        }
        header nav
        {
                right: auto;
                bottom: auto;
                left: 50%;
                top:100px;
                margin-left: -184px;
        }
}

@media (max-width: 580px)
{
        .container
        {
                height:1px;
                top: -1500px;
        }

        #mobileMenu
        {
                display: block;
                z-index: 990;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #EDA28C;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        #design_flow
        {       
                display:block;
        }
        header nav
        {
                display:none;
        }
        header img
        {
                left:70px;
                top:-60px;
        }
        header h1
        {
                font-size:40px;
                margin: 60px 0 0 0;
        }
        header p
        {
                margin-left: 60px;
                font-size:14px;
        }
}
/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}