Custom CSS code for SPAN doesnt work.

Hi,

I have span tag in p tag. But i want to customize span for mobile version. Below custom.css code doesnt work. Can you help me?

<p data-animate="fadeInUp" data-delay="400" style="font-weight:bold">Perakende sektöründe <span class="vurgu"> Mobil </span> çözümler </p>

span.vurgu{
color:#FFC400 ;
font-size: 300%;
font-weight: normal;
font-family: 'Monoton', cursive;

}

@media(max-width: 767px){
span.vurgu {
color: #5C67DB ;
font-size: 100%;
}
}

@media(max-width: 640px){
span.vurgu {

	color:#5C67DB;
    font-size: 200%;
}

}

@media(max-width: 320px){
span.vurgu {
color:#5C67DB;
font-size: 200%;
}
}

kirk2.co

i was linked in my HTML code like responsive or dark.css . Is there anything else i need to do?

<link rel="stylesheet" href="css/custom.css" type="text/css" />

/* ----------------------------------------------------------------
Custom CSS

Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Hanlding Updates

-----------------------------------------------------------------*/

.device-xxs .slider-caption p { font-size: 23px; }

@media (max-width: 767px) {
#copyrights .col_half:last-child {
display: block;
margin-top: 30px;
float: none;
text-align: center !important;
}

#copyrights .col_half:last-child .fright { float: none !important; }

#copyrights .col_half:last-child .social-icon {
    float: none !important;
    display: inline-block !important;
}

}

if you look at my application via mobile version, easily you can see the issue in slider panel. Text in slider not responsive.