* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}

label,
label input,
label textarea {
    display:block;
}
label {
    margin-bottom: 20px;
    color:#97A2AA;
    font-size:1.4em;
}
button,
input,
textarea {
    margin-top:5px;
    padding:4px 8px;
}
input,
textarea {
    border:1px solid #B2BAC0;
}
input {
    width:100%;
    height:1.8em;
}

textarea { 
    height:200px;  
    width:100%;  
}

img {
    max-width:100%;
    height:auto;
}

body {
    font-size: 12px;
    font-family: Raleway;
    font-weight:500;
}
.iw-header,
.iw-content,
.iw-footer {
    _width:640px;
    max-width:640px;
    margin:0 auto;
}

.ow-header {
    position:relative;
    
}
.iw-header {
    
    margin-top:20px;
}    


.iw-header .logo {
    position:relative;
    z-index: 100;
} 
.iw-content {
    padding-top:80px;
    margin-bottom:20px;
}

.speach {
    margin-top:2em;
}
.speach h1 {
    font-size:2em; 
    color:#B2BAC0;
    margin:0;
    padding:0;
    text-transform: uppercase;
    font-weight:300;
}

.speach ul {
    list-style:none;
    color:#FF0066;
    margin:0;
    font-size:1.6em; 
}
.speach h1 .web {
    display:block;
    font-size:4em;
    margin-top: -0.25em;
}    

.contact-us {
    font-size: 15px;
    
    text-transform: uppercase;
    display: block;
    margin-top: 10px;    
}


.work {
    margin-bottom:80px;
    display: block;
}
a.work:link,
a.work:visited {
    color:#000;
    text-decoration:none;
}

.contact-form {
    border-bottom: 1px solid #B2BAC0; 
    padding-bottom:2em;
    background:url('world.png') center bottom no-repeat;
}
.contact-form h3,
.contact-form button {
    background-color:#B2BAC0; 
    text-transform: uppercase;
    font-weight:300;
    color:#fff;    
}
.contact-form h3 {      
    padding:50px 10px 10px;
    font-size: 2em;

}
.contact-form form {
    padding:1em;
}
.contact-form button {
    padding:0 3em;
    height:1.8em;
    font-size:1.4em;
    border:none;
}

.iw-footer {
    padding:1em;
}

@media screen and (min-width: 500px) {

    .ow-header {
        height:400px;    
    }   
  
}
@media screen and (min-width: 700px) {
    input {
        width:auto;
    }
    textarea {
        width:400px;
    }
    .ow-header { 
        background:url('bg.jpg') bottom repeat-x; 
    }      
    .speach {
        width:571px;
        height:262px;
        background: url('speach.png') bottom center no-repeat;
        position:absolute;
        bottom:23px;
        right:0;
    }    
    .speach h1 {
        padding-left:3em;
    }  
    .speach ul {
        margin-left: 10.5em;
    }    
    .speach li {
        position:relative;
    }   
    li.backend {
        left:-100px;
    }
    li.frontend {
        left:-75px;
    }
    li.aplicaciones-web {
        left:-50px;
    }
    li.intranet {
        left:-25px;
    }
    li.carritos {
        left:0;
    }
    li.diseño {
        left:25px;
    }
    .contact-us {
        bottom: 203px;
        position: absolute;
        right: 0;
        color:#fff;
        width:175px;
        text-decoration: none;
        margin-top:0;
    }    
 
}
@media screen and (min-width: 1200px) {
    body {
        margin:0;
    }
    .speach {
        right:20%;
    } 
    .contact-us {
        right: 20%;
    }   
    .iw-header,
    .iw-content,
    .iw-footer {
        width:960px;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }   
    
    .work {
        clear:both;
    }
    .work .description {
        float: left;
        width:220px;
    }
    .work img {
        position:relative;
        right:0;
    }
    
    
    .contact-form {
        clear: both;
    }
    .contact-form form {
        margin-left:10em;
        padding:0;
    }
    .contact-form h3 {     
        background-image:url('stripe.png');
        background-repeat:no-repeat;
        background-position: -50px center;        
        padding-left: 5em;
    }
    .iw-footer {
        padding:0;
    }
}