/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18-dec-2015, 15:29:22
    Author     : MediaLab3
*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);

html{padding: 0; margin: 0; -webkit-font-smoothing: antialiased; background: url('../images/bg.jpg') fixed no-repeat center center; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; width: 100%; height: 100%;}
body{padding: 0; margin: 0; position: relative; font-family: 'roboto'; font-weight: 300; min-height: 100%}

h1{font-weight: normal;}
h2{font-weight: normal;}
h3{font-weight: normal;}

*:focus{outline: none;}

#logo{position: absolute; left: 10%; top: 30px; display: block; background: rgba(0,0,0,0.8) url('../images/djschool-logo.png') center no-repeat; width: 280px; height: 170px;}
#logo h1{text-indent: -9999px; display: block; width: 100%; height: 100%; padding: 0; margin: 0;}
#logo h1 a{display: block; width: 100%; height: 100%;}

#social{position: absolute; left: 10%; top: 210px;}
#social ul{list-style-type: none; padding: 0; margin: 0;}
#social ul li{display: inline-block; vertical-align: top;}
#social ul li a{display: block; width: 25px; height: 25px;}
#social ul li + li{margin-left: 20px;}

#social ul li.instagram{background-image: url('../images/instagram-icon.png'); background-repeat: no-repeat; background-position: center;}
#social ul li.facebook{background-image: url('../images/facebook-icon.png'); background-repeat: no-repeat; background-position: center;}
#social ul li.twitter{background-image: url('../images/twitter-icon.png'); background-repeat: no-repeat; background-position: center;}

#pagecontent{position: relative; left: 0; padding-top: 300px; width: 100%; min-height: 400px; margin-bottom: 120px; z-index: 10;}
#pagecontent .content{background: rgba(0,0,0,0.8); color: #fff; width: 40%; font-family: 'roboto'; padding-left: 10%; padding-top: 40px; padding-bottom: 40px; padding-right: 40px;}
#pagecontent .content h2{padding: 0; margin: 0; font-weight: 900; font-size: 64px; text-transform: uppercase; line-height: 58px;}
#pagecontent .content h2 span{color: #ee7421;}
#pagecontent .content h3{font-weight: 500; text-transform: uppercase; margin-top: 30px;}
#pagecontent .content h3 span{color: #ee7421;}
#pagecontent .content a{color: #ee7421; text-decoration: none;}
#pagecontent .content p{line-height: 24px;}

span.mobile{background: #ee7421; position: fixed; bottom: 0; z-index: 20; left: 0; width: 100%; text-align: center; height: 40px; line-height: 40px; font-weight: 900; color: #fff; text-transform: uppercase; cursor: pointer;}
span.close{display: none;}

#contactform{position: fixed; top: 30px; font-size: 14px; right: 10%; width: 25%; height: auto; padding-bottom: 40px; background: rgba(0,0,0,0.8); z-index: 20;}
#contactform #contact-area{width: 80%; margin: 0 auto;}
#contactform #contact-area h3{padding: 0; margin: 0; text-align: center; text-transform: uppercase; color: #ee7421; font-size: 22px; font-weight: 900; padding-top: 40px;}
#contactform #contact-area h4{padding: 0; margin: 0; text-align: center; text-transform: uppercase; color: #fff; font-size: 16px; font-weight: 900;}
#contactform #contact-area form{margin-top: 30px;}

#contactform #contact-area input{border: none; padding: 0; margin: 0; color: #fff; font-weight: 900; background: none; -webkit-appearance: none; width: 90%; padding-left: 5%; padding-right: 5%; line-height: 35px; height: 35px; border: 1px solid #ccc; text-transform: uppercase;}
#contactform #contact-area input:hover{border: 1px solid #fff;}
#contactform #contact-area input + input{margin-top: 20px;}
#contactform #contact-area input.submit-button{background: #ee7421; color: #fff; text-align: center; border: none; width: 100%; cursor: pointer; font-weight: 700;}
#contactform #contact-area input.submit-button:hover{color: #ee7421; background: #fff;}

#contactform #contact-area select{border: none; padding: 0; margin: 0; color: #fff; font-weight: 900; background: none; -webkit-appearance: none; width: 100%; padding-left: 5%; padding-right: 5%; border-radius: 0px; line-height: 35px; border: 1px solid #ccc; text-transform: uppercase; margin-top: 20px; margin-bottom: 20px;}
#contactform #contact-area select option{color: #000;}
#contactform .onder{text-align: center; color: #fff; display: block; margin: 0 auto; margin-top: 30px;}
#contactform .onder a{color: #fff; text-decoration: underline;}
#contactform .onder a:hover{color: #ee7421;}

#footer{position: absolute; bottom: -80px; left: 10%; width: 80%;}
#footer .left{background: url('../images/footer-logo.png') left center no-repeat; height: 35px; color: #fff; font-size: 14px; font-weight: 300; padding-left: 60px; line-height: 35px;}
#footer .left span{color: #ee7421;}
#footer #social{position: absolute; right: 10%; left: auto; top: 15px;}