/*=============================
  GENERAL 
=============================*/	
html { font-size: 62.5%; }
html, body, #intro { height: 100%; }
body, p, div, ul, li, a { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1.6rem; }
p, ul { color: #666; line-height: 2.5rem; }
h1 { font-family: 'Monoton', Arial, Helvetica, cursive; text-transform: uppercase; }
h2, h3 { font-weight: 500; }
a { cursor: pointer; }

/*=============================
  HEADER 
=============================*/	
#quangbar {
	padding: 10px 0px;
	background: white;
	opacity: 1.0;
}

#quangbar img {	max-width: 50px; display: block; }

#quangbar nav a {
	line-height: 50px;
	color: #666;
	text-decoration: none;
	cursor: pointer;
	padding: 0px 7px;
}

#quangbar nav a.first { padding-left: 0px; }
#quangbar nav a.last  { padding-right: 0px; }
#quangbar nav a:hover { color: #ef5350; text-decoration: none; }

/*=============================
  INTRO 
=============================*/	
#intro { 
	margin-top: 73px;
	background: #ef5350;
    height: 500px;
    color: white;
    text-align: center; 
    /* For absolute centering, with flexbox */
    display: -webkit-flex;
   	display: flex;
   	-webkit-flex-direction: row;
   	flex-direction: row;
   	-webkit-align-items: center;
   	align-items: center;
   	-webkit-justify-content: center;
   	justify-content: center;
}

#intro h1 { 
	font-size: 7.0rem;
	padding: 0;
	margin: 0;
}

#name {
	font-weight: 500;
	font-size: 3.0rem;
	padding-bottom: 15px;
	margin: 0;
	text-transform: uppercase;
}

#tag {
	padding: 15px 15px 25px 15px; 
	border-radius: 15px;
	background: white; 
	margin: 0 auto;
	width: 25%;
	color: #ef5350;
}

#quang {
	font-weight: 300;
	font-size: 4.8rem;
	line-height: 60px;
}

#spell {
	font-weight: 300;
	font-size: 2.0rem;
}

#tagline {
	color: white;
	padding-top: 30px;
	font-size: 3.0rem;
}

@media screen and (max-width: 768px) {
	#intro h1 { font-size: 6.0rem; }
	#name { font-size: 2.4rem; padding-bottom: 10px; }
	#tag { width: 70%; }
	#tagline { padding-top: 20px; font-size: 2.4rem; }	
}

/*=============================
  WORK 
=============================*/	
#work {
	color: #ef5350;
	text-align: center;
	padding: 40px 0px 20px 0px;
}

#work h1  { font-size: 6.0rem; }

#sencanada   { background: url(../images/sencanada.jpg) no-repeat 50% 0%; background-size: cover; }
#legas01   { background: url(../images/legas.png) no-repeat 50% 0%; background-size: cover; }
#mint01    { background: url(../images/mint01.jpg) no-repeat 50% 0%; background-size: cover; }
#mint02    { background: url(../images/mint02.jpg) no-repeat 50% 0%; background-size: cover; }
#mint03    { background: url(../images/mint03.jpg) no-repeat 50% 0%; background-size: cover; }
#mint04    { background: url(../images/mint04.jpg) no-repeat 50% 0%; background-size: cover; }
#mint05    { background: url(../images/mint05.jpg) no-repeat 50% 0%; background-size: cover; }
#rogerscup    { background: url(../images/rogerscup.jpg) no-repeat 50% 0%; background-size: cover; }
#dday    { background: url(../images/dday.jpg) no-repeat 50% 0%; background-size: cover; }
#armistice    { background: url(../images/armistice.jpg) no-repeat 50% 0%; background-size: cover; }
#nikead    { background: url(../images/nikead.jpg) no-repeat 50% 0%; background-size: cover; }
#sparklogo    { background: url(../images/sparklogo.jpg) no-repeat 50% 0%; background-size: cover; }
#boxingday    { background: url(../images/boxingday.jpg) no-repeat 50% 0%; background-size: cover; }
#boyziimen    { background: url(../images/boyziimen.jpg) no-repeat 50% 0%; background-size: cover; }
#orbs      { background: url(../images/orbs.jpg) no-repeat 50% 0%; background-size: cover; }
#chopstick { background: url(../images/chopstick.png) no-repeat 50% 0%; background-size: cover; }
#coughmall   { background: url(../images/coughmall.jpg) no-repeat 50% 0%; background-size: cover; }
#sorryeh   { background: url(../images/sorryeh.jpg) no-repeat 50% 0%; background-size: cover; }
#candamonium   { background: url(../images/candamonium.jpg) no-repeat 50% 0%; background-size: cover; }
#mechanicpanic { background: url(../images/mechanicpanic.jpg) no-repeat 50% 50%; background-size: cover; }
#nyc       { background: url(../images/nyc.jpg) no-repeat 50% 0%; background-size: cover; color: white; }
#banff     { background: url(../images/banff.jpg) no-repeat 50% 0%; background-size: cover; color: white; }
#raymond   { background: url(../images/raymond.jpg) no-repeat 50% 0%; background-size: cover; color: white; }
#dunkey   { background: url(../images/dunkey.jpg) no-repeat 50% 0%; background-size: cover; color: white; }
#japan   { background: url(../images/japan.jpg) no-repeat 50% 0%; background-size: cover; color: white; }

.item { 
	height: 350px;
	margin: 20px 0px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border: 1px solid #f2f2f2;
}

.item img { width: 100%; }
.item:hover .overlay { opacity: 1; }
.item a { text-decoration: none; color: white; }

.overlay {
    color: white;
	background:rgba(0, 0, 0, .10);
    text-align:center;
    opacity:1;	  
    width:100%;height:100%; 
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.overlay div {
	width: 40%;
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -85%);
	border-radius: 7px;
	background: #ef5350;
	padding: 7px;
	font-size: 1.5rem;
}

.desc {	margin: 20px 0px; }

.btn-view {
	text-decoration: none;
	color: white;
	background: rgba(239,83,80,1);
}

.btn-view:hover { color: white; background: rgba(239,83,80,0.85); }

@media screen and (max-width: 768px) {
	.item { height: 250px; }
}

/*=============================
  ABOUT 
=============================*/	
#about { background: #ef5350; padding-bottom: 40px; }
#about header {
	padding: 40px 0px 0px 0px;
	color: white;
	text-align: center;
}

#about h1  { font-size: 6.0rem; }
#about img { width: 300px; }
#about h2 { color: white; font-weight: 500; font-size: 3.0rem; }
#about p, #about ul, #about li { color: white; }
#about ul { padding-left: 20px; }

/*=============================
  CONTACT 
=============================*/	
#contact { text-align: center; padding-bottom: 40px; }

#contact h1  { font-size: 6.0rem; }
#contact header { padding: 40px 0px 20px 0px; color: #ef5350; }

.social a {	text-decoration: none; color: rgba(239,83,80,1); }

.social a:hover { color: rgba(239,83,80,0.85); }

/*=============================
  FOOTER
=============================*/	
footer {
	border-top: 1px solid #f2f2f2;
	padding-top: 10px;
	text-align: center;
}

/*=============================
  PRELOADER 
=============================*/	
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1031;
}

#loaders {
	position: relative;
	left: 50%;
	top: 50%;
	width: 116px;
    height: 116px;
    margin: -58px 0 0 -58px;
    z-index: 1001;
}

#loader01 {
    content: "";
    position: absolute;
    top: 17px;
    left: 17px;
    right: 17px;
    bottom: 17px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fff;

    -webkit-animation: spin 0.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 0.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader02 {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fff;

    -webkit-animation: spin 0.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 0.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader03 {
    content: "";
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    bottom: 11px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fff;

    -webkit-animation: spin 0.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
     animation: spin 0.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}


#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #ef5350;
    z-index: 1000;
    -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0);  /* IE 9 */
    transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left { left: 0; }
#loader-wrapper .loader-section.section-right { right: 0; }

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(-100%);  /* IE 9 */
            transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.2s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
            transition: all 0.2s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(100%);  /* IE 9 */
            transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.2s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	        transition: all 0.2s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loaders {
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;  
            transition: all 0.2s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;

    -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateY(-100%);  /* IE 9 */
            transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.2s 1s ease-out;  
            transition: all 0.2s 1s ease-out;
}

@-webkit-keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* JavaScript Turned Off */
.no-js #loader-wrapper { display: none; }
.no-js h1 { color: #222222; }

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

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    #work h1, #about h1, #contact h1 { font-size: 3.0em; }
}