.logo_main { 
position: relative; width: 500px;
} 
.logo-left #navigation { 
text-align: center !important; 
}
.logo-left #branding, .logo-classic #branding {
display:none !important;
}
.logoM { 
display: block; z-index: 99; position: relative; margin: 0 0 10px;
}
.logo_sub { 
display: block; z-index: 99; position: relative; 
}
.logo_sub > h3 { color:#ffffff !important; font-style:italic !important; font-weight: bold !important; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5) !important; }
body, #page {background: #000000 !important;}
.bmenu li a {text-decoration: inherit;}
.cb-slideshow li div h3 {font-family: "Architects Daughter", sans-serif !important;}
.logo_sub {
font-family: 'GmarketSansMedium', 'notokr-regular', 'Nanum Gothic', 'Nanum Gothic Coding' !important;
color: #eaeaea !important;
font-size: 17px;
}
@media (min-width:1241px) {
#main {
padding: 50px 150px !important;
}
#main > .wf-wrap, #bottom-bar > .wf-wrap, #footer > .wf-wrap {
width: 100% !important;
}
.logo_sub {
margin-left:20px;
}
.logo_main {
margin: 50px 0 0 !important;
}
.logoM img {
-webkit-animation: spinIt 2.2s infinite alternate linear;
animation: spinIt 2.2s linear;
animation-iteration-count: infinite;
animation-direction : alternate;
}
}
@media (min-width:1920px) and (min-height:1080px) {
#wrapper #main .fullwidth-box .fusion-row {
max-width: calc(1440px + 0px) !important;
}
#main {
padding: 100px 200px !important;
}
.logoM img {
min-width: 120% !important;
height: auto;
}
.logo_sub {
font-size: 24px;
}
.bmenu {
width: 300px !important;
}
.bmenu li {
font-size: 24px !important;
}
.bmenu li a {
padding:14px 30px 10px 30px !important;
}
}
@media screen and (max-width:1240px) { 
.logo_main {
margin: 8% auto 6% !important;
} .container_audio {    
margin: 20px auto 0 !important;
left: auto !important;
transform: none !important;
float: none !important;
width: auto !important;
}
.logoM {
width: 100%;
text-align: center;
}
.logoM img{
} 
.bmenu { 
width: 250px !important;
margin:0 auto !important; margin-top:50px !important; 
position: relative;
}
.logo_sub { margin-left: 0px;
text-align: center;
} 
#audioplayer {
display:none !important;
}
#main {
padding: 35px 0 35px 0 !important;
}
}
@media screen and (max-width:600px) {
.logo_main {
width: 260px !important;
height: auto !important;
margin: 0 auto 20px !important;
}
.logo_sub { 
font-size: 16px !important;
}
}
@-webkit-keyframes spinIt {
0% { transform: rotate(-1deg); -webkit-transform: rotate(-1deg) }
100% { transform: rotate(1deg); -webkit-transform: rotate(1deg) }
}
@-moz-keyframes spinIt {
0% { transform: rotate(-1deg) }
100% { transform: rotate(1deg) }
}
@keyframes spinIt {
0% { transform: rotate(-1deg) }
100% { transform: rotate(1deg) }
}.content ul { 
list-style:none !important;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
margin: 0;
padding: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(https://jcolbyl.com/images/home_new/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0px !important;
left: 0px !important;
color: transparent !important;
background-size: cover !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden !important;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'Kaushan Script', 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif !important;
font-size: 160px;
font-weight: 700;
padding: 35px 30px;
line-height: 120px;
color: rgba(255,255,255, 0.8);
text-shadow: 0 0 20px #999;
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQd5Jy7JCuxCf1oJhk6YfqoNnedsYXR0SCFG3vz5SKs_h6onqCD-CN2Gii_S1tMddMHHVsR_z1QMNa1TVxNppu6EYoiEd2bMF2LruyFYN2vZ62zptkp0esAg7fKGEGOBNVcHDqh2ArhClmsnMJ-35dTtzru3Agc88Lu2ce8NuShyphenhyphenXo3b6hoT10Trvl0Q/s16000/1.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNAFGi43Ws2ZFQmd1gT_qVC0oqGquNvnowWQSHbTK98kMSISE-_Jx8Upw8b-ha4k-1Vjq4UG0fslmsMoOP3Zz6U0v06o-t_sHa_uis1odojUTOPy-6R7xEuQ_EaMlJqDgZD9I0DkAWbdaVoRQCNNjJd6iPBkfYzPndtB2eEegIYsOO7khBXL4LdDhlQ/s1600/A2O.jpg); background-position: center 35% !important; -webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7D4E22rSWuvttKZvrwkUsfdFt3mvw2E6byLgl_Kr-yz3dKHqKMOHzMa2isPNGA9h7IZq96c-jCPR7q3Vepy0qExQb5gxkUo-Pi-JUYkMZVt1H1Q8unBmJoa25NHx8V0AsWj3tfx2GNSgCoYggTtCNPbk1JCsMSNUgVrIOUUht2V0kfYf02ehdubeHg/s1600/3e779547-2920-4637-ad62-fdc3d6ede4ef.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirY1Q6FjeZR5wifNDFXeorXJUy9shobkfz0f-BNRuBFENCwxfqoL35WmztyvmODkp0LJT1g4al7BneLnINsdPeB7xDj5pV1O1lg8VtK5fCfDxauhkz1COn6DGPCskKkfo2Jv61F9AokjsEy-_hHLz_i-8I4M-4oRUg8_GJVCULsnlSk5MiNQgI7fV5Fg/s16000/baek2.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVFmwWcvLyCh37kvSpkgD89nXiz2avO3MrsFmwYnWVaqsJbLFhOLFBb2n79XV7r8RMDQKRMbdPsj4C07M8A-SG0tQAifNi8x64bsrg3F5NTZx3OMBxC_q9aF5iaeo731lhWLvOIfz4COh2NObzNRzlkREHCVX1hU4RVqGiPiCHJjicS3zAj2yF6JcPA/s16000/2026010715141389561_1.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zjLcQYFaKHaB1q2x9HmMlrXb3wGp1c65j0lMvrw8a0ydqX1nEU7M1PDPGeikKkBQOXzWsGJJClncYB69-UAL4k_rklkpsVVyKChHGghY8BMAuzPQHD4Yq5ufmQjrfLCYw-VFikwUY_vMVncRxNoZiJj-kFaXdXE9oxUSWQ6hpuPbhncBsYkd3kPTNA/s16000/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation { 
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation { 
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation { 
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation { 
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
} .no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1280px) { 
.cb-slideshow li div h3 { font-size: 120px }
}
@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 50px }
}
@media screen and (max-width: 500px) { 
.cb-slideshow li div h3 { font-size: 35px }
}@color-bg: 				#40424c;
@color-primary: 		#FFF;
@color-secondary: 	#999;
@color-tertiary: 		#000; p.track {
text-transform: uppercase;
color: @color-primary;
span {
color: @color-secondary;
}
}
button_1 {
background-color: rgba(255, 255, 255, 0);
border: 1px solid @color-primary;
border-radius: 50%;
color: @color-primary;
text-align: center;
display: inline-block;
vertical-align: middle;
transition: all 0.2s ease 0;
&[data-am-button^="large"] {
width: 60px;
height: 60px;
margin: 0 5px;
i {
font-size: 25px;
}
}
&[data-am-button^="small"] {
width: 40px;
height: 40px;
i {
font-size: 14px;
}
}
&:hover {
color: @color-secondary;
border-color: @color-secondary;
}
&:focus {
outline: none;
}
}
#progress-bar { 
width: 100%;
background-color: @color-tertiary;
height: 5px;
position: relative;
margin: 1em 0;
#progress {
background-color: @color-secondary;
height: 5px;
position: absolute;
left: 0;
transition: width 2.5s linear 0;
}
}#load {
background-color: #000 !important;
}
body {
margin: 0;
background-color: #40424c;
font-family: Arial, Helvetica, sans-serif ;
}
.container_audio {
position: relative;
top: 0;
width:250px;
z-index: 99;
margin: 20px 0 25px 20px;
}
p.track {
text-transform: uppercase;
color: #ffffff;
}
p.track span {
color: #999999;
}
button {
background-color: rgba(255, 255, 255, 0);
border: 1px solid #ffffff;
border-radius: 50%;
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
transition: all 0.2s ease;
cursor : pointer;
} .fa-play:not(.loaded):before {
width: 19.65px !important;
height: 25px !important;
}
.fa-volume-up:not(.loaded):before {
width: 13px !important;
height: 14px !important;
}
.fa-stop:not(.loaded):before {
width: 12px !important;
height: 14px !important;
}
button[data-am-button^="large"] {
width: 60px;
height: 60px;
margin: 0 5px;
}
button[data-am-button^="large"] i {
font-size: 25px;
}
button[data-am-button^="small"] {
width: 40px;
height: 40px;
}
button[data-am-button^="small"] i {
font-size: 14px;
}
button:hover {
color: #D8D8D8;
border-color: #D8D8D8;
}
button:focus {
outline: none;
}
#progress-bar {
width: 100%;
background-color: #000000;
height: 5px;
position: fixed;
margin: 1em 0 0 0;
opacity: 0.25;
bottom: 0;
left: 0;
z-index: 99;
}
#progress-bar #progress {
background-color: #999999;
height: 5px;
position: absolute;
left: 0;
transition: width 2.5s linear 0;
}