/*----------------CSS Document for Screens----------------*/


/* 
--------------COLORS---------------
        fae8d5 - magnolia
        8c5366 - rouge
        4b154f - plum
        6f5b96 - lilac
        282828 - charcoal
        e0e5e0 - ash
*/


@charset "UTF-8"
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family='Bebasneue');

body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #282828; margin:0; padding:0; background-color: #fae8d5;}

#page { width:100%;max-width: 1200px; margin: auto; position: relative; background-color: #fae8d5; /*background-image: url("../img/bedge_grunge.png")*/; height: auto;
}

/*  text  */
h1{ margin:0 0 0.5em 0; font-size: 1.6em; font-weight: 700; color: #282828;}
h2{ font-size: 1.1em; font-weight: 600; line-height:1.1em; color: #282828; text-align: left; padding:0;}
h3{ margin:0 0 0.4em 0; font-size: 1.2em; font-weight: 700; }
h4{ margin:0 0 0.3em 0; font-size: 1em; font-weight: 600; color: #282828; text-align: center;}

p { margin: 0 0 1em 0; text-align: left;}
a {text-decoration: none;}


header {
 height:50px; padding:30px 30px; background-color: #fae8d5;
position:relative; width:100%; border-bottom:solid 1px #e0e5e0; border-top:solid 1px #e0e5e0;    
}

.burger {
    width:30px; 
    position:absolute;
    display:none;
}


header img {
width: 60px; display: inline; float:left;
}
/*-------NAV-------*/
nav {    
display:inline-block;
width:100%;
position:absolute;
font-weight:300;
font-size:1em;
text-align: center;
font-family: "helvetica", "Tahoma", "Arial", sans-serif;
font-weight: 600; 
z-index: 100; 
float:left; 
   
}

nav ul {width:100%; list-style: none; float:left; padding-left: 0;}

nav ul li {
    font-size:0.6em;
    display:inline;
    padding: 5px 5px 5px 5px;
    float:left;
    width:15%;
    margin-right: 7px;
    }

nav ul li a {
color:#282828;    
}


a.current {text-decoration: underline;}


section.main{ display:block; width:100%; height:500px; margin:auto; float:none; padding:3% 0 3% 0; background-color: #fae8d5; }
section.mainWork{ display:block; width:70%; height:500px; margin:auto; float:none; padding:3% 0 3% 0; background-color: #fae8d5; }

img.image{
    display:block;
    position:relative;
    width:100%; 
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:20px;
}

div.gifcontainer{width:100%;}

img.image_gif{
    display:block;
    width:50%; 
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
}


embed {width:100%;}


div.left {
    width:50%; float:left; display:inline; background-color: #e0e5e0; padding:2%;
}

div.right {
width:45%; height:auto; float:left; display:inline;background-color: #fae8d5; height:100%;
}
div.right img {width:100%;}

.cornerDecoLeft{width:10px;height:10px;border-color:#282828;border-width:5px 0 0 5px;border-style: solid;}

.cornerDecoRight{width:10px;height:10px;border-color:#282828;border-width:0px 5px 5px 0px;border-style: solid; float:right;}

.offer{
position: relative;    
display:block;
float:left;    
background-color:#e0e5e0;
color:#282828;
height:auto;
width:100%;
padding:3% 3% 0 3%;
margin-top:2%;
margin-bottom:2%;    
    
}

.offerElement{
width:15%;
text-align: center;
float:left;
margin-right:10px;
margin-top:10px;    
}


.offerElement img{
width:60%;
}

.offerElement h5{
margin-top:10px;
line-height: 1;    
}

.footer p{
display:inline;
text-align: center;
font-size:0.8em;
width:40%; 
margin:2%;
}

.footerWrapper{
display:block;
text-align: center;
width:90%;
margin:auto;
}

.footer {
position: static;
display:block;    
right: 0;
bottom: 0;
left: 0;
padding: 2%;
width:100%;
height:auto;
margin-top:20px;    
}

iframe {height:400px; width:100%; border:0px; margin:auto; }

/*-------------Media Queries-----------------------------------------------------------------*/

/*-------------430--------------*/
@media screen and (max-width: 430px) {
    
}

/*-------------480--------------*/
     
}

/*-------------540--------------*/
@media screen and (max-width: 540px) {

    
#page{ 
max-width: 1200px; margin: auto; position: relative; /*background-color: #e0e5e0;*/ background-image: url("../img/bedge_grunge.png"); height: auto;
background-image: none;
background-repeat:no-repeat;
background-position:top 0px;}
    
    
header{
    top:0; 
    height:13%; 
    width:100%; 
    padding:0 0 0 0;
    position:fixed;  
    background-color: #e0e5e0; 
    z-index: 102; 
    border-bottom: #f7e7d7 solid 1px;
    margin: 0;
}    
    
header img {width:15%; position:relative; margin-left:5%; margin-top:5%; display:block;  float:none;    
}

.burger{background-color: #f7e7d7; border-radius: 50%; width:50px; height:50px; font-weight: 800; display:block; position: fixed; right:5%; top:2%; z-index:110; float:none;}

.burger p{line-height: 50px; text-align: center; cursor:pointer;}    
    
nav {  
    background-color: none;    
    display:none;
    position:fixed;   
    font-weight:600;
    font-size:1em;
    top:13%;
    width:100%;
    margin: auto;
    font-family: "helvetica", "Tahoma", "Arial", sans-serif;    
    }

    
nav ul { list-style: none;  width:100%;  margin: 0%;
    }

    
nav ul li {
    width:100%;
    border-bottom: #f7e7d7 solid 1px;
    border-top:0px;
    font-size:1.6em;
    display:block;
    background-color:#e0e5e0;
    float:right;
    margin: auto;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;    
    }

    
nav ul li a {
    color:#282828;
    }
    

img.image{
    dispaly:block;
    position: relative;
    width:100%; 
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 5%;
    }    

    
section.main {
    padding-top:30%;
    padding-bottom:5%;
    width:70%;
    height:800px;
    }   

    
section.mainWork{
    display:block; width:70%; margin:auto; margin-top:100px; float:none; background-color: #fae8d5;  
    }
   
    
div.right{width:100%; height:auto;}   
div.left{width:100%;}      

    

}


/*-------------750--------------*/
@media screen and (max-width: 750px) { 
    div.right{width:100%; height:auto;}   
    div.left{width:100%; padding:4%;}
    
section.main {
    padding-top:3%;
    padding-bottom:5%;
    width:80%;
    height:800px;
    } 

.offer{
position: relative;    
display:block;
float:left;    
background-color:#e0e5e0;
color:#282828;
height:auto;
width:100%;
padding:3% 3% 0 3%;
margin-top:2%;
margin-bottom:2%;    
}

    
/*
.offerWrap{
width:100%;
height:auto;
display: block;
margin: auto;
position: absolute;
}  */  
    
.offerElement{
width:40%;
text-align: center;
float:left;
margin-right:10px;
margin-top:10px;    
}


.offerElement img{
width:60%;
}

.offerElement h5{
margin-top:10px;
}   
    
section.mainWork{ display:block; width:90%; height:500px; margin:auto; float:none; padding:3% 0 3% 0; background-color: #fae8d5; }    
    
}
   
/*-------------980--------------*/
@media screen and (max-width: 980px) { 
}