/* CSS START */

/* ------------------------GLOBAL------------------------ */

* {margin: 0;padding: 0;}

body {
	margin: 0;padding: 0;
    font-family: Square721 BT, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
    color: snow;
	background: fixed #5BD4C1}

p {padding: 0px 0px;line-height: 30px;text-shadow: snow 0px 0px 3px;}

a:hover {text-decoration: none;}
a:active {outline: none;}
a:focus {outline-style: none;}

/* ------------------------BRB DEX------------------------ */

#brbdex {width: 100%;margin: 0;padding: 0;backface-visibility:hidden;}
#brbdex img {width:100%;}

/* ------------------------ANIMATION------------------------ */

/* djm logo animation */
.djmlogo {
	left:0;
	animation: djmlogo ease-in 4s;
	-webkit-animation: djmlogo ease-in 4s;
	-moz-animation: djmlogo ease-in 4s;
	-o-animation: djmlogo ease-in 4s}
	}

@keyframes djmlogo {
	0% {opacity:0;}
	100% {}
}
@-webkit-keyframes djmlogo {
	0% {opacity:0;}
	100% {}
}
@-moz-keyframes djmlogo {
	0% {opacity:0;}
	100% {}
}
@-o-keyframes djmlogo {
	0% {opacity:0;}
	100% {}
}

#cpbox {width:70%;margin-left:auto;margin-right:auto;}
#cpbox img {width:64px;}
 
/* social animation */
.social, .social img {
	margin-left:auto;margin-right:auto;
	text-align:center;
	animation: scdisp ease-in 4s;
	-webkit-animation: scdisp ease-in 4s;
	-moz-animation: scdisp ease-in 4s;
	-o-animation: scdisp ease-in 4s}
	
.social img {
	margin-top:10px;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;}
	
.social img:hover, .social img:active {
	transform: scale(1.2);
	backface-visibility: hidden;}

@keyframes scdisp {
	0% {opacity:0;}
	100% {}
}
@-webkit-keyframes scdisp {
	0% {opacity:0;}
	100% {}
}
@-moz-keyframes scdisp {
	0% {opacity:0;}
	100% {}
}
@-o-keyframes scdisp {
	0% {opacity:0;}
	100% {}
}
 
/* ------------------------MEDIA QUERIES------------------------ */

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) {
	#brbdex {margin-top:5%;}
	#cpbox p {font-size:0.9em;}
	#cpbox img {width:40px;}
}

@media only screen and (min-device-width: 641px) and (max-device-width: 1024px) {
	#cpbox {width:92%;}
	#cpbox p {font-size:1em;}
	#cpbox img {width:60px;}
}

@media only screen and (min-device-width: 1025px) {
	#cpbox p {font-size:1.3em;}
	#cpbox img {width:90px;}
}

/* CSS END */