/*
Tutorial Name: Modernize Your Site: Building a YouTube Video Background 
Author: Samuel Dalusung
*/


/* =========================================================
GENERAL STYLES
========================================================= */
html {
    height:100%
}

body {
    margin: 0;
    padding: 170px 0 0 0;
    height: 100%;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
}
body#toppage,
body#dc-reason,
body#policy-privacy_DC,
body#policy-security_DC,
body#company-about_DC,
body#company-access_DC,
body#dc-research,
body#dc-research-article,
body#works_other {
    padding: 0;
}
@media (max-width: 900px) {
    body {
        padding: 0;
    }
}

.bgVideo_wrapper {
    z-index:600;
    position:relative
}

.pattern {
    /*background-image: url(../../images/bg_pattern_dot_square.png);*/
	background-image: url(../images/bg_pattern_sprite_light.png);
    background-repeat: repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}

.divider {
    background-image:url(../../js/images/divider.png);
    display:block;
    width:300px;
    height:35px;
    margin:10px auto
}



/* =========================================================
BIG VIDEO BACKGROUND
========================================================= */
.big-background {
    /*z-index:550;*/
    text-align:center;
    height:100%;
    min-height:100%;
    position:relative;
    overflow:hidden
}

.big-background .big-background-container {
    width:830px;
    max-width:100%;
    display:inline-block;
    position:absolute;
    top:60%;/* default: 50% + header's height */
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

#dc-toppage .big-background .big-background-container {
		top: 50%;
}

.big-background-title {
    /*font-family:'Raleway',sans-serif;
    font-size:78px;
    color:#fff;
    font-weight:300;*/
    text-transform:uppercase;
    text-align:center;
    /*margin-bottom:22px;
    padding-top:20px;*/
    display:inline-block;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center
}

a.big-background-btn {
    font-family:'Lato',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    background:transparent;
    border:2px solid #fff;
    padding:10px 14px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
}

.big-background-btn:hover {
    color:#fff;
    background:rgba(255,255,255,0.20)
}

.big-background-default-image {
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}

.big-background-readText {
	margin-top: 48px;
	color: #fff; 
}

/* =========================================================
SMALL VIDEO BACKGROUND 
========================================================= */
.bg-transparent-dark {
    position: relative;
    width: 100%;
    overflow: hidden;
	background-color: transparent;
	background-image: url(../images/bg_pattern_sprite_dark.png);
    background-repeat: repeat;
    background-attachment:scroll;
	color: #fff !important;
}
/*.bg-transparent-layer {
    background-color: rgba(0,0,0,0.5);
}*/
.small-background-container {
    position: relative;
}


/* SOCIALS
================================================== */
.socials a {
    color:#fff
}

.socials a:hover {
    color:#bdc3c7
}




/* MEDIA QUERIES
================================================== */

@media screen and (max-width: 768px) {
.about-section-title {
    line-height:1
}
}

@media screen and (max-width: 480px) {
.small-background-title {
    line-height:1
}

/*.player{ display: none;}  -> If you want to remove the video bg on a specific viewport w/o plugin*/
}

@media screen and (max-width: 360px) {
.big-background-title,#colorize {
    line-height:1
}
}

@media screen and (max-width: 320px) {
}