@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
body{width:100%; text-align:center;margin:0;padding:0;background:#FFF;color:#000;-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}
body{font-size:13px;}
td,th{font-family:Arial, sans-serif; color:#000;}
a img{border:none;}

.container { width:980px;}


#gnheader.gbhdr table{padding:0!important;}
#gh{background:#FFF;}
.pagewidth{width:100%; max-width:980px; text-align:left;margin:0 auto 0 auto;background:transparent;}
.pagelayout{background:url(../images/bgct.gif) #FFF repeat;}
.pagecontainer{background:url(../images/whitespace.jpg) repeat-x transparent;position:relative;}
.stBadge{ margin:0;}

.pagecontainer > table:nth-child(5){ position:relative; border-bottom:350px solid #FFFFFF;}

#glbfooter{background:#FFF;margin-bottom:-10px;margin-top:-8px;}


.mnslicontent > div:nth-child(1) > a:nth-child(1) > img:nth-child(1) { max-width:100%; margin-bottom:5px;}
.content h2 { color:#db0f16;!important}

footer .paddedbor { padding-left:10px; padding-right:10px;}

.sfooter{width:100%;background: #000;display:block; padding-top:10px; color:#303031}
.pagecontainer .sfooter{position:absolute; left:0; right:0; bottom:0;min-height:200px;}

.footer{width:100%;display:block;}
.footer .logoident{position:absolute;}

.footerlogo{}

.sfooter h3{ text-align:left;}
.sfooter .onefourth{ display:inline-block; width:25%; float:left;}
.sfooter .padthis{ display:block; padding:10px;}
.sfooter p{ font-size:13px; text-align:left; color:#FFFFFF}
.sfooter ul{ padding:0; margin:0;}
.sfooter li{}
.sfooter li a{color:#FFFFFF;font-size:13px; text-align:left; text-decoration:none;}
.sfooter li a:hover{color:#63B6DB;}
footer .column { text-align:left;}
footer ul.footerlinks{ margin:0; padding:0; list-style:none;}
footer ul.footerlinks li, footer ul.footeraddress li { text-align:left;}


td.v4accent,td.v4hspacer{display:none!important;}
td#LeftPanel{width:18.36%!important;padding-left:10px;}
table.tb_v4bc{background:#FFF;}

.main{position:absolute;width:100%;height:1px;} 
.wdse{float:left;}
.sidebar2{ position:absolute; right:10px; top:15px; width:17.4489%;}

#LeftPanel table.v4acp{width:171px!important;margin-bottom:0;}
.v4mid{background:url(../images/menbg.png) no-repeat bottom;}
table.v4midBox{border:none;}
tr.v4footr td.v4footd{display:none;}
table.v4acpcont:nth-child(1){ display:none;}
#LeftPanel span.cnt{display:none!important;}

table.v4acpcont,div.lcat,table.v4midBox tbody{ width:100%; border-collapse:inherit; display: table;}

table.v4midBox,.hlinks,.q1,.q2,a.q3cats,a.q4cats,a.q5cats  {
	width:100%;
	display:block;
    background: #FFFFFF;
    padding: 0px 10px;
    border: 1px solid #E8E8E8;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-box-shadow: 2px 2px 2px #ddd;
    -webkit-box-shadow: 2px 2px 2px #ddd;
    box-shadow: 2px 2px 2px #ddd;
	margin-bottom:10px;

}
.lcat .link{display:none;}
td.v4accent,td.v4hspacer{display:none!important;}
table.v4acp td.v4baccent{display:none!important;}
.r3_cm,.r3_c,.r3{padding:0;border:0 none}
.r3_hm,.r3_c,.r3_s{border:0 none;}
.g-hdn{font-size:13px;}
td.v4mid label{font-size:13px;color:#FFF;}
.v4mid input{color:#FFF;border:none;height:20px;margin-top:3px;font-size:10px;width:45px;background:url(../images/men_hv.png) repeat-x #4e9af4 center;}
.v4sbox{margin-top:3px;width:95px!important;background:#FFF!important;border:none;font-size:13px;color:#000!important;height:20px;margin-left:3px; text-indent:10px;}
#LeftPanel table.gallery{padding:3px;}
table.gallery img { border-radius:8px; margin-top:10px;}

.v4ilist a:link{color:#000;text-decoration:none;}
.whiter-s_nf { display:none;}

.lview { background:#FFF;}
.li td.prices .g-b{ font-size:14px;}
.li td.pay, .li td.trs{ display:none;}

table.gallery table.fixed div.time2{padding-right:0;margin-top:2px;color:#000;white-space:nowrap;display:none;}
table.gallery table.fixed div.time2 span.label{color:#000;white-space:nowrap;}
td.basics{width:100%;}
table.gallery td{margin-top:5px;}

table.gallery table.fixed tbody tr:nth-child(1) td:nth-child(1){ display:none;}
table.gallery table.fixed tbody tr:nth-child(1) td:nth-child(2){ text-align:center; width:100%;}
table.grid > tbody:nth-child(1) > tr:nth-child(1) > td > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > div:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1){ width:100%; text-align:center;}

table.gallery td.picture div.image { margin-bottom:0px;}
table.gallery div.ttl{ margin-top:0; text-align:center; padding-left:4px; padding-right:4px;}
table.gallery div.clearFullDiv{margin-top:2px;font-size:14px;white-space:nowrap;color:#000; width:100%; text-align:center;}

table.gallery td.picture { padding:0px 10px;}

.g-b{color:#44444;font-weight:normal;font-size:18px;font-family: 'Open Sans', sans-serif;}
.li td.time{color:#000;}
.li td.ship,.li td.prices span.ship{color:#000;}
.li td.bids img{}
span.ship{color:#000;font-size:13px;}
span.fshp,.li td.fshp{color:#41c200}
span.fshp{margin-left:5px;font-size:12px;}
td.gallery tr .details .ttl.g-std a:link, td.gallery tr .details .ttl.g-std a:visited, td.gallery tr .details .ttl.g-std a:hover{color:#000!important;font-size:13px;}
table.gallery div.subtitle{margin:2px 0;color:#000;font-size:11px; text-align:center; padding-left:3px; padding-right:3px;}
.ship.fee{color:#000;text-align:right;}div.anchors div.group{display:none;}
table.gallery table.fixed{margin-top:5px;font-size:13px;white-space:nowrap; width:100%;}
table.pgbc{border:none; background:#db0f16 url(../images/pgbc.png) repeat-x;} .pgbc { background:transparent;}
.pgbc td{ padding-top:10px; padding-bottom:10px;}
.dynpg span.page{color:#FFF;}
.r3_t,.r3_t b,.r3_bl,.r3_bl b{background:none;font-size:0;display:none;}
.cmpBr{border:none;background:url('https://www.rightpak.co.uk/catalog/view/theme/default/image/bg_red.jpg') repeat #db0f16;height:35px;margin-top:10px;}
.cmsg{display:none;}
.fpcc .matchClass, div.v4stabl, span.pdmt .label {color:#db0f16;}
div.cmpb{border:none;background-repeat:repeat;padding:5px 0;margin-bottom:2px;background:#db0f16;color:#FFF;}div.cmpb a{color:#FFF;}
.ctrlbr{border:none;padding:0;margin-top:5px;margin-bottom:5px;}
.fpcc .smuy{white-space:nowrap;font-size:small;display:inline;margin:0;}

#q_10{ background:#db0f16; color:#FFFFFF; border:#db0f16 solid 1px; border-radius:9px; padding:5px 8px;}



div.fpcc{clear:both;margin:0;padding:0;}div.fpcc{border:none;}
.rs_box{border-top:none;clear:both;}


.fpcc span.keywordClass{font-family:Arial;font-weight:bold; background:transparent;white-space:nowrap;cursor:default;margin:0;display:inline;}
.fpcc .countClass, .fpcc span.keywordClass,span.pdmt .cur,div.v4stabl a{color:#303031;}

td#CentralArea div.dynpg{border:none;margin:0;background:none;padding:0;}


.cmpBr,.r3_cm, .r3_c, .r3,.rs_box,td#CentralArea,.grid,.ctrlbr,td#CentralArea div.v4stabl,div.fpcc,.cezent,td#CentralArea div.dynpg,table.pgbc,.brandblock{width:589px; max-width:589px;}


.img-responsive{ max-width:100%; height:auto;}

.hlinks ul,#eBayCategories ul{margin:0;padding:0;list-style-type:none;text-align:left;}

.lcat .ttl a,.lcat .ttl,.lev1 a:link,.lev1 a:visited, .oc a:link,.oc a:visited, .hev1 li a:link, .hev1 li a:visited, #eBayCategories a,.lev1 a:hover, .oc a:hover, .hev1 li a:hover, .lcat .ttl a:hover, .lev1 span,.lcat .lev2 li span, .oc span,#eBayCategories a:hover,table.v4clp li span,.oc ul .v4f span{padding:8px 3px 8px 15px; text-decoration:none;}


.lcat .ttl,.lcat .ttl a{ display:none;}

.lcat .lev1 li, .lcat .lev2 li, .lcat .lev3 li, .hlinks .hev1 li,#eBayCategories li{list-style-type:none;margin:0; padding:0; display:block; font-weight:normal; font-family: 'Open Sans', sans-serif;}
.lcat .lev2,.lcat .lev3{padding:0;}
.lcat .lev2 li span{color:#FFF;}

.lcat .lev1 li+li,.hlinks .hev1 li+li,
.v4clp .oc ul li a{}




.lev1 a:link,.lev1 a:visited, .oc a:link,.oc a:visited, .hev1 li a:link, .hev1 li a:visited, #eBayCategories a
{
	font-family: 'Open Sans', sans-serif;
-moz-osx-font-smoothing: grayscale;
	padding: 10px 5px;
margin: 0;
display: block;
font-weight: 700;
color: #333;
border-bottom: 1px solid #EAEAEA;
	
	
	
	}
.lev1 a:hover, .oc a:hover, .hev1 li a:hover, .lcat .ttl a:hover, .lev1 span,.lcat .lev2 li span, .oc span,#eBayCategories a:hover
{ 
background: #db0f16;
color: #FFF;


}

.dcat .hev1 li a:link,.dcat .hev1 li a:hover{padding:8px 3px 8px 15px;}



.probelows{ display:block; max-width:590px;}
.fifty{ display:inline-block; width:50%;}
.paddeditpo{ padding:5px 5px 0px;}
.blockimgpro{ max-width:100%; width:100%;}


table.v4clp li span{ color:#FFF; background:url(../images/men_hv.png) repeat-x #4e9af4; display:block; font-size:14px;}

.oc ul .v4f span{background:#303031;color:#FFF;text-transform:uppercase;display:block;font-size:13px;}
#LeftPanel td.oc ul,#LeftPanel td.oc ul li,#LeftPanel td.oc{list-style-image:none!important;list-style-type:none!important;margin:0;padding:0;display:block;}

.lcat ul,#LeftPanel td.oc ul,.hlinks ul{ padding:0px;}




table.v4clp li{list-style-type:none;margin:0!important;text-indent:0;}
table.v4midBox tr.v4acp_mid td.v4mid{padding:0;overflow:hidden; background:transparent;}
table.v4clp td ul{list-style-type:none;margin:0!important;}
td#CentralArea div.v4stabl{padding-bottom:3px;margin-top:15px;}

div.itemseparator{display:none;}


.rs-pview{padding:0;}


.stBadge-accent{display:none;}
td.gallery{background:url('../images/itembg.png') #FFF no-repeat center top;height:280px; border:1px #e3e2e2 solid}
.grid{background:#f6f6f6;}
.grid td.left{border-left:1px solid #E3E2E2;}

table.gallery{width:100%;border-left:none;}
td.details{width:100%;}
table.gallery .mi{display:none;}




#rhd, #LeftPanel td.v4title,#thd,#schd{
	background: #db0f16 url('https://www.rightpak.co.uk/catalog/view/theme/default/image/bg_red.jpg') repeat;
padding: 10px;
color: #FFF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
text-align:left;
	
	
	}
.r4title, .v4title h2, #LeftPanel td.v4title font{
	
	
color: #FFF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
	
	
	
	}
.v4title{ padding-left:15px;}
header .links { margin-bottom:25px;}

#gh-logo { max-width:none;}

.li td img{border:0;}
.li td.pic a.pic{display:block;overflow:hidden;border:none;}
.li{border-collapse:collapse;width:100%;border-bottom:1px solid #000;}
.li a{color:#000!important;}

.cptextb,.tab_container{}
.cptextb h1{ text-align:left!important; font-weight:800;}
.cptextb{width:590px;float:left;text-align:left;padding:10px; }
.cptextb ul li{text-align:left;font-size:14px;color:#000;}




#tabbed p,.bodytext,.des p{color:#303031;text-align:left;font-size:13px; font-family: 'Signika', sans-serif;line-height:16px;}
.bodytext a{ color:#f04e59; text-decoration:underline; font-weight:bolder;}
.bodytext strong{ color:#DC181C;}
li.bodytext{ line-height:17px; margin-bottom:15px; }

.pagecontainer > table:nth-child(8) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1){ display:none;}

.head1{font-size:1.077em;font-weight:bold;text-align:left;color:#1B252F;}

#snheader{display:none; width:100%; position:relative;}
.designedby{font-size:13px;;color:#FFF;float:right;height:25px; position:absolute; right:0; top:-70px;}
.designedby a{color:#FFF;text-decoration:none;margin-right:9px;background:url('../../../../../images/list_sn.png');display:block;height:22px;width:214px;font-size:0;text-indent:-10000px;}

.eBaycontainer{ width:980px; position:relative; margin-left:auto; margin-right:auto; display:block;}
.hdse{margin:0px auto; position:relative;background:url() no-repeat #FFF; min-height:190px; border-top:1px solid #EAE9EB; }


.slogan{ position:absolute; right:415px; bottom:65px;}
.fav{position:absolute; left:580px; top:20px;}
.cntc{ position:absolute; left:540px; top:20px;}
.payments{ position:absolute; right:15px; bottom:70px;}
.logoident{ display:inline-block; float:left; margin-top:15px; margin-bottom:15px; margin-left:10px;}
.logoheader{ max-width:100%; margin-bottom:20px; margin-top:20px;}


header .button-search {
    position: absolute;
    right: 0px;
	padding:0;
    bottom: 0;
    background: url('https://www.rightpak.co.uk/catalog/view/theme/default/image/button-search.png') #db0f16 center center no-repeat;
	font-size:0;
    width: 35px;
    height: 35px;
    cursor: pointer;
	border:none;
}

.fa-phone-square{ background:url(../images/telephone.png) center no-repeat; width:40px; height:40px; display:inline-block;float:left; }

.fa-truck{ background: url('../images/fast-delivery.png') center no-repeat; width:70px; height:55px; display:block; float:left; margin-right:3px;}
.fa-arrow-down{ background: url('../images/lowest.png') center no-repeat; width:70px; height:55px; display:block; float:left; margin-right:3px;}
.fa-refresh{ background: url('../images/free-return.png') center no-repeat; width:70px; height:55px; display:block; float:left; margin-right:3px;}




.telelphonenumb{
	padding:0; margin:0;
	display:inline-block;
    font-size: 25px!important;
	line-height:40px;
    font-weight: 300;
    margin-top: 0px;
	float:left;

}

.telephone{float:left;}

.searchbut { position:relative;}
header #search { display:table; width:100%;}


header #search input.button-search {
    font-family: 'Open Sans', sans-serif;
    padding: 1px 1px 1px 10px;
    border: 1px solid #db0f16;
	background:#db0f16 url('../../catalog/view/theme/default/image/button-search.png');
    font-size:0px;
    height: 35px;
}



.ssear{position:absolute;right:15px; top:65px; background:#FFF;text-align:right;border:solid 1px #e3e2e2; width:40.8163%; height:auto; overflow:hidden;}
.ssear input{ margin:0; padding:0; border:none;}
.seaintext{
	font-family: 'Open Sans', sans-serif;
background: #FFF;
padding: 1px 1px 1px 10px;
border: 1px solid #db0f16;
font-size: 16px;
height: 35px;}


.inmenu,.hdmnu{ padding:0; margin:0;}


nav{ clear:both;width: 100%; display:block; background:transparent; padding:0; margin:0; height:auto; }
nav ul{margin:0;padding:0;list-style:none;}
nav li{margin:0;padding:0px;display:inline-block; width:15.6666%; text-align:center;}
nav li a:link,nav li a:visited{
	font-size: 14px;
	font-weight: 800;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
display: block;
z-index: 6;
position: relative;
padding: 0px 9px;
line-height: 25px;
border-right:3px solid #FF0004;
	
	
	
	
	
	}
nav li a:hover{color: #333333;
background: #fafafa; }





.account{background:#EAE9EB;clear:both;overflow:hidden; display:inline-block; float:right; margin-bottom:10px; border-bottom:1px solid #e5e5e5;}
.account ul{margin:0;padding:0;list-style:none; float:right;}
.account li{margin:0;padding:0;display:inline-block;float: left; text-align:left; }
.account li a{font-size:12px;text-decoration:none;display:block; color:#db0f16; font-family: 'Signika', sans-serif;padding:5px 10px;}
.account li a:hover{ background:#db0f16; color:#FFF;}



#ppal{width:200px;height:54px;background:url(../../../../../images/paypal.png) no-repeat;clear:both;margin-top:20px;}
#deliv{width:200px;height:143px;background:url(../../../../../images/del.png) no-repeat;clear:both;margin-top:20px;}
.holiday{ display:none;}

#dsexpand{width:100%;height:40px;background:url();background-repeat:no-repeat;background-position:center;}
#pssexpand{margin-top:10px;height:251px;background-repeat:no-repeat;width:171px;margin-left:auto;margin-right:auto;display:block;clear:both;}

#costtable{width:500px;}
.hdtable{text-indent:0;}
.cphdone{ color:#000; font-size:1.154em ; font-family: 'Open Sans', sans-serif;}
.v4snexp ul{color:#000;}
.v4snexp div{color:#000;}
td#CentralArea div.msg{color:#000;}
.v4snexp a{color:#000!important;}
table.fixed img{background:#FFF;display:none;}
.bbc-txtBx,.bbc-btn,.bbc-nav{color:#000;}


.welmsg{display:block;height:50px;background:url(../images/hdwel.png) #db0f16 center no-repeat;clear:both;}

.intmsg{ display:block;max-width:592px; color:#303031;text-align:center;margin:0px 0px 10px; padding:10px 40px; clear:both; font-family: 'Open Sans', sans-serif;}
.pezent .intmsg { max-width:100%;}

#ukbased{height:100px;display:block;}
input#v4-2{width:12px;height:12px;}
.lcat a.all_cats{display:none;}
#sModule{display:none;}
.dynpg .next a.enabled, td.pages a{color:#FFFFFF;}
.dynpg .prev a.disabled, .dynpg td.pages a.disabled,.dynpg td.pages a.disabled:visited, .dynpg .r .form{color:#FFF!important;}
.dynpg .r .form input.page { background:#FFFFFF; color:#db0f16; border:#FFFFFF; height:27px; border-radius:8px;}


#sizeguide{background:url(../images/sizeguide.gif);width:520px;height:168px;}span.bids{color:#d10212;}
table.gallery table.fixed span.label{color:#000;}
span.bin{}

#cev1{width:171px;clear:both;overflow:hidden;}
#cev1 ul{margin:0;padding:0;list-style:none;}
#cev1 li{float:left;margin:0;padding:0;display:inline-block;font-size:0;}

.qtuh a.contactushere{display:inline-block; padding:10px 20px!important;color:#FFFFFF!important;background:#db0f16;font-size:15px;text-align:center; text-decoration:none;font-family: 'Open Sans', sans-serif;}
.qtuh a.contactushere:hover{background:#EAE9EB;color:#6184DB!important; }



.cezent{}
.pezent{ width:980px;}



.q1,.q2{ margin-bottom:10px; display:block; clear:both; overflow-y:auto;}
.q1{ background:#FFF url(../images/q1.png) right top no-repeat; }
.q2{ background:#FFF url(../images/q2.png) 5px 10px no-repeat; }

.padthis{display:block; overflow-y:auto; padding-top:10px;}
.q1 p,.q2 p{ margin-top:0px;}
.q1 p{font-family: 'Open Sans', sans-serif;font-size:12px; text-align:left; line-height:14px; width:70%; }
.q2 p{font-family: 'Open Sans', sans-serif;font-size:12px; text-align:right; line-height:14px; width:60%; float:right; }
 
.q1 p strong,.q2 p strong{ color:#db0f16;}

a.q1cats:link,a.q1cats:visited{ display:inline-block; padding:6px 15px; background:#db0f16; color:#FFF; text-decoration:none; float:left;font-family: 'Open Sans', sans-serif; margin-bottom:10px;}
a.q2cats:link,a.q2cats:visited{ display:inline-block; padding:6px 15px; background:#db0f16; color:#FFF; text-decoration:none; float:right; font-family: 'Open Sans', sans-serif;margin-bottom:10px;}
a.q1cats:hover,a.q2cats:hover{ background:#db0f16;}


.q3cats img,.q4cats img,.q5cats img{ margin-bottom:10px; display:block; max-width:100%;}
a.q3cats{ display:block; clear:both;}

div.rowofthree{ display:block;}
.promooon{ display:inline-block; float:left; width:33.3333%;}
.promooon a{ margin:3px; display:block;}
.promooon a img{ display:block; background:#db0f16; min-height:100px; line-height:50px;}

.hppro1,.hppro2,.hppro3,.hppro4,.hppro5,.hppro6{ display:inline-block;}
.hppro2,.hppro3,.hppro5,.hppro6{ float:left;}



.yelrounded{ background:#FFC100; margin-bottom:24px; border-radius:8px;}
.blurounded{ background:#00AFF3; border-radius:8px; margin-bottom:14px;}
.rounded h3{ margin:0; margin-bottom:5px; padding:0; font-weight:700; font-size:20px;}
.rounded p{ margin:0 0 5px 0; padding:0;}

.colleftstr{ float:left; width:181px; background:#EAE9EB; min-height:294px;}
#slicontent{ float:right; width:790px;}

.rowit{ display:block; clear:both; overflow-y:auto; margin-bottom:15px;}
.col-left{ float:left; width:50%;}
.col-right{float:right; width:50%;}
.paddedit{ padding:10px;}

.promo1{ display:block; margin-bottom:10px; width:100%;}
.promo2{ display:block; margin-bottom:10px;}

.promo3{ display:block; margin-bottom:10px;}

.promo4{ display:block; margin-bottom:10px; width:100%;}
.promo5{ display:block; margin-bottom:10px;}
.promo6{ display:block; margin-bottom:10px;}

.v4snexp { max-width:590px;}



/* For demo page, just to adjust position of the slider on the screen. */
.s_container {
    margin:0px 0px;
}

/* Actual Plugin CSS */
        
/* Styling the parent container div. */
.s_container {
    position:relative;
    max-width:590px;
    max-height:280px;
    overflow:hidden;
    -webkit-box-shadow:0px 0px 1px 0px rgba(0,0,0,0.8); /* For Chrome 4.0+ and Safari 3.5+ */
    -moz-box-shadow:0px 0px 1px 0px rgba(0,0,0,0.8); /* For Firefox */
    box-shadow:0px 0px 1px 0px rgba(0,0,0,0.8); /* Standard syntax */
}

/* For autoplaying slides. */
input[name|=playstop]:checked ~ .slider {
    -webkit-animation:autoplay 15s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-iteration-count:infinite; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:autoplay 15s; /* For Firefox 5.0+ */ 
    -moz-animation-iteration-count:infinite; /* For Firefox 5.0+ */
    -o-animation:autoplay 15s; /* For Opera 12.0+ */
    -o-animation-iteration-count:infinite; /* For Opera 12.0+ */
    animation:autoplay 15s; /* Standard Syntax */
    animation-iteration-count:infinite; /* Standard Syntax */   
}

/* For hiding media icons, arrows and bullets during autoplay. */
input[name|=playstop]:checked ~ .s_media-back .s_media, input[name|=playstop]:checked ~ .s_bullets, input[name|=playstop]:checked ~ .s_forward-arrow, input[name|=playstop]:checked ~ .s_backward-arrow {
     opacity:0;
    -webkit-animation:downall 0.1s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-delay:0.25s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:downall 0.1s; /* For Firefox 5.0+ */ 
    -moz-animation-delay:0.25s; /* For Firefox 5.0+ */
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:downall 0.1s; /* For Opera 12.0+ */
    -o-animation-delay:0.25s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */
    animation:downall 0.1s; /* Standard Syntax */
    animation-delay:0.25s; /* Standard Syntax */
    animation-fill-mode:forwards; /* Standard Syntax */
}

/* Styling the autoplay icon's container. */
.toggle_playpause {
    position:absolute;
    left:10px;
    top:-20px;
    cursor:pointer;
    -webkit-transition:top 0.6s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:top 0.6s; /* For firefox 4.0+ */
    -o-transition:top 0.6s;  /* For Opera 10.5+ */ 
    transition:top 0.6s; /* Standard syntax */
    z-index:100;
}

/* Styling tooptip on autoplay icon. */
.toggle_playpause:hover:before {
    position:absolute;
    content:'Autoplay';
    overflow:hidden;
    background-color:#292929;
    font-family:Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    font-size:12px;
    color:white;
    top:30px;
}

/* Styling the autoplay icon. */
.toggle_playpause span {
    -webkit-transition:opacity 0.4s, text-shadow 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:opacity 0.4s, text-shadow 0.4s; /* For firefox 4.0+ */
    -o-transition:opacity 0.4s, text-shadow 0.4s;  /* For Opera 10.5+ */ 
    transition:opacity 0.4s, text-shadow 0.4s; /* Standard syntax */
    opacity:0.3;
    color:white;
    font-size:20px;
}

/* Sliding down of autoplay icon when .s_container div is hovered. */
.s_container:hover .toggle-back .toggle_playpause {
    top:10px;
}

/* For brightening up of autoplay icon when it's hovered. */
.toggle_playpause:hover span {
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Firefox */
    text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* Standar syntax */
    opacity:1;
}

/* For holding autoplay icon's opacity and shadow upon clicking it. */
input[name|=playstop]:checked ~ .toggle-back .toggle_playpause span{
    opacity:1;
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Firefox */
    text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* Standar syntax */
}

/* Fixing the position of autoplay icon when it's clicked. */ 
input[name|=playstop]:checked ~ .toggle-back .toggle_playpause {
    top:10px;
}

/* Hiding checkboxes and radio buttons. */
input[name|=common], input[name|=playstop], input[name|=mediashare] {
    display:none;
}

/* Manual sliding of images. */ 
.one-radio:checked ~ .slider {
    left:0%;
}
.two-radio:checked ~ .slider {
    left:-100%;
}
.three-radio:checked ~ .slider {
    left:-200%;
}
.four-radio:checked ~ .slider {
    left:-300%;
}
.five-radio:checked ~ .slider {
    left:-400%;
}

/* Layering arrows. */
.one-radio:checked ~ .s_forward-arrow label:nth-of-type(1),
.two-radio:checked ~ .s_forward-arrow label:nth-of-type(2),
.three-radio:checked ~ .s_forward-arrow label:nth-of-type(3),
.four-radio:checked ~ .s_forward-arrow label:nth-of-type(4),
.five-radio:checked ~ .s_forward-arrow label:nth-of-type(5),
.one-radio:checked ~ .s_backward-arrow label:nth-of-type(1),
.two-radio:checked ~ .s_backward-arrow label:nth-of-type(2),
.three-radio:checked ~ .s_backward-arrow label:nth-of-type(3),
.four-radio:checked ~ .s_backward-arrow label:nth-of-type(4),
.five-radio:checked ~ .s_backward-arrow label:nth-of-type(5) {
    z-index:0;
    visibility:hidden;
}
.one-radio:checked ~ .s_forward-arrow label:nth-of-type(2),
.two-radio:checked ~ .s_forward-arrow label:nth-of-type(3),
.three-radio:checked ~ .s_forward-arrow label:nth-of-type(4),
.four-radio:checked ~ .s_forward-arrow label:nth-of-type(5),
.five-radio:checked ~ .s_forward-arrow label:nth-of-type(1),
.one-radio:checked ~ .s_backward-arrow label:nth-of-type(5),
.two-radio:checked ~ .s_backward-arrow label:nth-of-type(1),
.three-radio:checked ~ .s_backward-arrow label:nth-of-type(2),
.four-radio:checked ~ .s_backward-arrow label:nth-of-type(3),
.five-radio:checked ~ .s_backward-arrow label:nth-of-type(4) {
    z-index:2;
    visibility:visible;
}

/* Active image bullet. */
.one-radio:checked ~ .s_bullets label:nth-of-type(1),
.two-radio:checked ~ .s_bullets label:nth-of-type(2),
.three-radio:checked ~ .s_bullets label:nth-of-type(3),
.four-radio:checked ~ .s_bullets label:nth-of-type(4),
.five-radio:checked ~ .s_bullets label:nth-of-type(5) {
    background-color:rgba(0,0,0,0.9);
    border-color:rgba(250,250,250,0.1);
    opacity:1;
}
        
/* Styling images' container. */
.slider {
    position:relative;
    width:500%;
    z-index:1;
    -webkit-transition:left 0.6s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transitionleft 0.6s; /* For firefox 4.0+ */
    -o-transition:left 0.6s;  /* For Opera 10.5+ */ 
    transition:left 0.6s; /* Standard syntax */
}

/* Styling images. */
.slider img {
    position:relative;
    float:left;
    max-width:100%;
    height:auto;
    width:20%;
    margin-bottom:-2px;
}

/* Styling arrows' containers. */
.s_forward-arrow, .s_backward-arrow {
    position:absolute;
    overflow:hidden;
    width:50%;
    height:100%;
    top:0%;
    z-index:2;
   -webkit-transition:opacity 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:opacity 0.4s; /* For firefox 4.0+ */
    -o-transition:opacity 0.4s;  /* For Opera 10.5+ */ 
    transition:opacity 0.4s; /* Standard syntax */
}

/* Positioning 'next' and 'previous' arrows. */
.s_forward-arrow {
    right:-60px;
}
.s_backward-arrow {
    left:-60px;
}

/* Styling labels that contain arrow icons. */
.s_forward-arrow label, .s_backward-arrow label {
    position:absolute;
    top:50%;
    cursor:pointer;
    -webkit-transition:all 0.6s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:all 0.6s; /* For firefox 4.0+ */
    -o-transition:all 0.6s;  /* For Opera 10.5+ */ 
    transition:all 0.6s; /* Standard syntax */
    opacity:1;
    -webkit-transform:translate(0%, -50%); /* For Chrome 4.0+, Safari 3.2+ and Opera 15.0+ */
    -moz-transform:translate(0%, -50%); /* For Firefox 3.5+ */
    -o-transform:translate(0%, -50%); /* Opera 10.5, 12.1+ */
    transform:translate(0%, -50%); /* Standard Syntax */
}

/* Positioning arrows' containers. */
.s_forward-arrow label {
    right:0px;
}
.s_backward-arrow label {
    left:0px;
}

/* Styling arrow icons. */
.s_forward-arrow span, .s_backward-arrow span {
    font-size:26px;
    color:white;
}

/* Position the arrows' containers when .s_container div is hovered. */
 .s_container:hover .s_forward-arrow label{
    right:130px;
}
.s_container:hover .s_backward-arrow label{
    left:130px;
}

/* Assigning animations to arrow icons when .s_container div is hovered. */
.s_container:hover .s_forward-arrow label span {
    -webkit-animation:rotateAntiClock 0.6s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:rotateAntiClock 0.6s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:rotateAntiClock 0.6s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:rotateAntiClock 0.6s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
}
.s_container:not(:hover) .s_forward-arrow label span {
    -webkit-animation:rotateClock 0.6s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:rotateClock 0.6s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:rotateClock 0.6s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */
    animation:rotateClock 0.6s; /* Standard Syntax */
    animation-fill-mode:forwards; /* Standard Syntax */
}
.s_container:hover .s_backward-arrow label span {
    -webkit-animation:rotateClock 0.6s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:rotateClock 0.6s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:rotateClock 0.6s; /* For Opera 12.0+ */     
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */
    animation:rotateClock 0.6s; /* Standard Syntax */
    animation-fill-mode:forwards; /* Standard Syntax */
}
.s_container:not(:hover) .s_backward-arrow label span {
    -webkit-animation:rotateAntiClock 0.6s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:rotateAntiClock 0.6s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:rotateAntiClock 0.6s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */
    animation:rotateAntiClock 0.6s; /* Standard Syntax */
    animation-fill-mode:forwards; /* Standard Syntax */
}

/* Styling bullets' container. */
.s_bullets {
    position:absolute;
    width:100%;
    height:16px;
    background-color:white;
    z-index:3;
    bottom:-60px;
    text-align:center;
    background-color:red;
}

/* Styling bulltes. */
.s_bullets label {
    position:relative;
    background-color:rgba(250, 250, 250, 0.9);
    border-radius:100%;
    display:inline-block;
    width:10px;
    height:10px;
    margin:0px 5px;
    bottom:0px;
    cursor:pointer;
    border:1px solid rgba(20, 20, 20, 0.6);
    -webkit-transition:bottom 0.6s, opacity 0.4s, text-shadow 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:bottom 0.6s, opacity 0.4s, text-shadow 0.4s; /* For firefox 4.0+ */
    -o-transition:bottom 0.6s, opacity 0.4s, text-shadow 0.4s;  /* For Opera 10.5+ */ 
    transition:bottom 0.6s, opacity 0.4s, text-shadow 0.4s; /* Standard syntax */
    opacity:0.3;
}

/* For wavy movement of bullets when .s_container div is hovered. */
.s_bullets label:nth-of-type(1) {
    -webkit-transition-delay:0s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0s; /* For firefox 4.0+ */
    -o-transition-delay:0s;  /* For Opera 10.5+ */ 
    transition-delay:0s; /* Standard syntax */
}
.s_bullets label:nth-of-type(2) {
    -webkit-transition-delay:0.05s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.05s; /* For firefox 4.0+ */
    -o-transition-delay:0.05s;  /* For Opera 10.5+ */ 
    transition-delay:0.05s; /* Standard syntax */
}
 .s_bullets label:nth-of-type(3) {
    -webkit-transition-delay:0.1s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.1s; /* For firefox 4.0+ */
    -o-transition-delay:0.1s;  /* For Opera 10.5+ */ 
    transition-delay:0.1s; /* Standard syntax */
}
.s_bullets label:nth-of-type(4) {
    -webkit-transition-delay:0.15s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.15s; /* For firefox 4.0+ */
    -o-transition-delay:0.15s;  /* For Opera 10.5+ */ 
    transition-delay:0.15s; /* Standard syntax */
}
.s_bullets label:nth-of-type(5) {
    -webkit-transition-delay:0.2s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.2s; /* For firefox 4.0+ */
    -o-transition-delay:0.2s;  /* For Opera 10.5+ */ 
    transition-delay:0.2s; /* Standard syntax */
}

/* Hover state of bulltes. */
.s_bullets label:hover {
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Firefox */
    text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* Standar syntax */
    opacity:1;
}

/* For sliding up of bullets. */
.s_container:hover .s_bullets label {
    bottom:80px;
}

.s_media-share{
    display:none;
}

/* For styling media icons' container. */
.s_media {
    position:absolute;
    width:100%;
    z-index:5;
    text-align:center;
    top:-60px;
}
        
/* Styling media icons. */
.s_media a {
    margin:0px 20px;
    position:relative;
    display:inline-block;
    -webkit-transition:top 0.6s, opacity 0.4s, text-shadow 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:top 0.6s, opacity 0.4s, text-shadow 0.4s; /* For firefox 4.0+ */
    -o-transition:top 0.6s, opacity 0.4s, text-shadow 0.4s;  /* For Opera 10.5+ */ 
    transition:top 0.6s, opacity 0.4s, text-shadow 04s; /* Standard syntax */
    top:0px;
    opacity:0.3;
    text-decoration:none;
}
/* Hover state of media icons -- it's conatiner. */
.s_media a:hover {
    opacity:1;
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* For Firefox */
    text-shadow:0px 0px 5px rgba(0,0,0,0.6); /* Standar syntax */
}

/* For wavy movement of media icons when .s_container div is hovered. */
.s_media .one-media {
    -webkit-transition-delay:0s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0s; /* For firefox 4.0+ */
    -o-transition-delay:0s;  /* For Opera 10.5+ */ 
    transition-delay:0s; /* Standard syntax */
}
.s_media .two-media {
    -webkit-transition-delay:0.05s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.05s; /* For firefox 4.0+ */
    -o-transition-delay:0.05s;  /* For Opera 10.5+ */ 
    transition-delay:0.05s; /* Standard syntax */
}
.s_media .three-media {
    -webkit-transition-delay:0.1s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.1s; /* For firefox 4.0+ */
    -o-transition-delay:0.1s;  /* For Opera 10.5+ */ 
    transition-delay:0.1s; /* Standard syntax */
}
.s_media .four-media {
    -webkit-transition-delay:0.15s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition-delay:0.15s; /* For firefox 4.0+ */
    -o-transition-delay:0.15s;  /* For Opera 10.5+ */ 
    transition-delay:0.15s; /* Standard syntax */
}

/* Styling tooptips on media icons. */
.s_media .one-media:hover:before {
    position:absolute;
    content:'Facebook';
    overflow:hidden;
    background-color:#292929;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    font-size:12px;
    color:white;
    top:30px;
}
.s_media .two-media:hover:before {
    position:absolute;
    content:'Twitter';
    overflow:hidden;
    background-color:#292929;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    font-size:12px;
    color:white;
    top:30px;
}
.s_media .three-media:hover:before {
    position:absolute;
    content:'Pinterest';
    overflow:hidden;
    background-color:#292929;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    font-size:12px;
    color:white;
    top:30px;
}
.s_media .four-media:hover:before {
    position:absolute;
    content:'Instagram';
    overflow:hidden;
    background-color:#292929;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    font-size:12px;
    color:white;
    top:30px;
}
/* For sliding down of media icons. */
.s_container:hover .s_media a {
    top:80px;
}

/* Styling media icons. */
.s_media a i {
    font-size:26px;
    color:rgba(250, 250, 250, 0.9);
}

/* Hover state of media icons. */
.s_media i:hover {
    -webkit-animation:jello 1s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-origin:center; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:jello 1s; /* For Firefox 5.0+ */ 
    -moz-animation-origin:center; /* For Firefox */
    -o-animation:jello 1s; /* For Opera 12.0+ */
    -o-animation-origin:center; /* For Opera */
    animation:jello 1s; /* Standard Syntax */
    animation-origin:center; /* Standard Syntax */
}

/* Styling elements for devices of screen size < = 768px */
@media screen and (max-width:768px) {

/* Main container. */
.s_container {
    border:2px solid white;
    max-height:407px;   
}

/* Styling autoplay icon (including it's container). */   
.toggle_playpause {
    margin-top:30px;
    top:-20px;
    -webkit-transition:none; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:none; /* For firefox 4.0+ */
    -o-transition:none;  /* For Opera 10.5+ */ 
    transition:none; /* Standard syntax */
}
.toggle_playpause span {
    color:white;
    -webkit-transition:opacity 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:opacity 0.4s; /* For firefox 4.0+ */
    -o-transition:opacity 0.4s;  /* For Opera 10.5+ */ 
    transition:opacity 0.4s; /* Standard syntax */
    opacity:0.5;
}

/* Positioning the autoplay icon to a fixed place when .s_container div is hovered, and not hovered. */
.s_container:hover .toggle_playpause {
    margin-top:0px;
}
.s_container:not(:hover) .toggle_playpause {
    margin-top:30px;
}

/* Hover state of autoplay icon. */
.toggle_playpause span:hover {
    opacity:1;
    -webkit-text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* For Firefox */
    text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* Standar syntax */
}

/* Fixing autoplay icon's opacity and position when it's triggered. */
input[name|=playstop]:checked ~ .toggle-back .toggle_playpause span {
    opacity:1;
    -webkit-text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* For Firefox */
    text-shadow:0px 0px 3px rgba(20,20,20,0.3); /* Standar syntax */
}
input[name|=playstop]:checked ~ .toggle-back  .toggle_playpause  {
    margin-top:0px;
}

/* Styling the parent container div of media icons. */
.s_media-back {
    position:absolute;
    top:0px;
    right:10px;
    width:100%;
    height:97px;
    z-index:99;
    padding:0;
    margin:0;
}

/* Styling share icon's container. */
.s_media-share {
    position:absolute;
    right:0px;
    top:10px;
    cursor:pointer;  
    display:inline; 
}

/* Styling share icon. */
.s_media-share span {
    font-size:20px;
    color:white;
    -webkit-transition:opacity 0.4s, text-shadow 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:opacity 0.4s, text-shadow 0.4s; /* For firefox 4.0+ */
    -o-transition:opacity 0.4s, text-shadow 0.4s;  /* For Opera 10.5+ */ 
    transition:opacity 0.4s, text-shadow 0.4s; /* Standard syntax */
    opacity:0.3;
}

/* Styling tooltip on share icon. */
.s_media-share:hover:before {
    position:absolute;
    content:'Share';
    overflow:hidden;
    background-color:#292929;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-animation:showhide 5s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-fill-mode:forwards; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:showhide 5s; /* For Firefox 5.0+ */ 
    -moz-animation-fill-mode:forwards; /* For Firefox 5.0+ */
    -o-animation:showhide 5s; /* For Opera 12.0+ */
    -o-animation-fill-mode:forwards; /* For Opera 12.0+ */    
    animation:showhide 5s; /* Standard Syntax */    
    animation-fill-mode:forwards; /* Standard Syntax */
    padding:5px;
    right:0px;
    font-size:12px;
    color:white;
    top:30px;
}
/* For displaying media icons' container with animation. */
.media-icons:checked ~ .s_media {
    display:block;
    -webkit-animation:jello 1s; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -webkit-animation-origin:center; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation:jello 1s; /* For Firefox 5.0+ */ 
    -moz-animation-origin:center; /* For Firefox */
    -o-animation:jello 1s; /* For Opera 12.0+ */
    -o-animation-origin:center; /* For Opera */
    animation:jello 1s; /* Standard Syntax */
    animation-origin:center; /* Standard Syntax */
}

/* Hover state of share icon. */
.s_media-share:hover span{
    -webkit-text-shadow:0px 0px 3px rgba(0,0,0,0.3); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 3px rgba(0,0,0,0.3); /* For Firefox */
    text-shadow:0px 0px 3px rgba(0,0,0,0.3); /* Standar syntax */
    color:white;
    opacity:1;
}

/* For share icon, when it's clicked. */
.media-icons:checked ~ .s_media-share span{
    color:rgba(0,0,0,0.5);
    -webkit-text-shadow:0px 0px 3px rgba(250,250,250,0.3); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 3px rgba(250,250,250,0.3); /* For Firefox */
    text-shadow:0px 0px 3px rgba(250,250,250,0.3); /* Standar syntax */
    opacity:1;
}

/* Styling media icons' parent container. */
.s_media {
    display:none;
    position:absolute;
    top:35px;
    max-width:250px;
    right:0px; 
    margin:0px 0px;
    height:auto;
    background-color:white;
    padding:12px 0px 11px 0px;
    -webkit-text-shadow:0px 0px 5px 0px rgba(20,20,20,0.5); /* For Chrome and Safari */
    -moz-text-shadow:0px 0px 5px 0px rgba(20,20,20,0.5); /* For Firefox */
    text-shadow:0px 0px 5px 0px rgba(20,20,20,0.5); /* Standar syntax */
    text-align:center;
}

/* For cancelling trasnition effects and other styles for media icons' container. */    
.s_media a {
    -webkit-transition:none; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:none; /* For firefox 4.0+ */
    -o-transition:none;  /* For Opera 10.5+ */ 
    transition:none; /* Standard syntax */
    opacity:1;
    margin:0px 15px;
    -webkit-text-shadow:none; /* For Chrome and Safari */
    -moz-text-shadow:none; /* For Firefox */
    text-shadow:none; /* Standar syntax */
}

/* Hover state of media icons. */
.s_media a:hover {
    -webkit-text-shadow:none; /* For Chrome and Safari */
    -moz-text-shadow:none; /* For Firefox */
    text-shadow:none; /* Standar syntax */
}

/* Styling media icons. */
.s_media a i {
    font-size:26px;
    color:#666666;
}
            
/* For ending sliding down of media icons when .s_container div is hovered. */
.s_container:hover .s_media a {
    top:0px;
}
            
/* For changing color and size of 'next' and 'previous' arrows. */
.s_forward-arrow span, .s_backward-arrow span {
    font-size:26px;
    color:#666666;
}
            
/* Aligning all bullets vertically in the middle. */
.s_container .s_bullets label {
    top:50%;
    -webkit-transform:translate(0%, -50%); /* For Chrome 4.0+, Safari 3.2+ and Opera 15.0+ */
    -moz-transform:translate(0%, -50%); /* For Firefox 3.5+ */
    -o-transform:translate(0%, -50%); /* Opera 10.5, 12.1+ */
    transform:translate(0%, -50%); /* Standard Syntax */
}
            
/* For ending sliding up of bullets when .s_container div is hovered. */
.s_container:hover .s_bullets label {
    top:50%;
}
            
/* For fixing 'previous' arrow container. */   
.s_backward-arrow {
    background-color:white;
    position:relative;
    width:20%;
    height:56px;
    float:left;
    left:0px;
    border-top:1px dashed grey;
}
            
/* For fixing bullets container. */  
.s_bullets {
    width:60%;
    position:relative;
    top:0px;
    height:56px;
    float:left;
    background-color:white;
    border-top:1px dashed grey;
}

/* Styling bullets. */
.s_bullets label {
    -webkit-transition:opacity 0.4s; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:opacity 0.4s; /* For firefox 4.0+ */
    -o-transition:opacity 0.4s;  /* For Opera 10.5+ */ 
    transition:opacity 0.4s; /* Standard syntax */
    opacity:0.5;
    background-color:#eeeeee;
    border-color:rgba(0,0,0,0.2);
}

/* For fixing 'next' arrow container. */  
.s_forward-arrow {
    background-color:white;
    position:relative;
    float:left;
    height:56px;
    width:20%;
    right:0px;
    border-top:1px dashed grey;
}
            
/* For cancelling tansition effects of 'next' and 'previous' arrows, and positioning them. */
.s_forward-arrow label {
    right:40px;
    -webkit-transition:none; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:none; /* For firefox 4.0+ */
    -o-transition:none;  /* For Opera 10.5+ */ 
    transition:none; /* Standard syntax */
}
.s_backward-arrow label {
    left:40px;
    -webkit-transition:none; /* For Chrome 4.0+ and Safari 3.1 to 6.0 */
    -moz-transition:none; /* For firefox 4.0+ */
    -o-transition:none;  /* For Opera 10.5+ */ 
    transition:none; /* Standard syntax */
}
.s_container:hover .s_forward-arrow label { 
    right:40px;
}
.s_container:hover .s_backward-arrow label {
    left:40px;
}

/* For cancelling animations of 'next' and 'previous' arrows. */
.s_container:hover .s_forward-arrow label span, .s_container:not(:hover) .s_forward-arrow label span, .s_container:hover .s_backward-arrow label span, .s_container:not(:hover) .s_backward-arrow label span {
   -webkit-animation-name:none; /* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
    -moz-animation-name:none; /* For Firefox 5.0+ */ 
    -o-animation-name:none; /* For Opera 12.0+ */
    animation-name:none; /* Standard Syntax */
}

/* Hiding share icon all other divs and in autoplay mode. */ 
input[name|=playstop]:checked ~ .s_backward-arrow, input[name|=playstop]:checked ~ .s_forward-arrow, input[name|=playstop]:checked ~ .s_bullets, input[name|=playstop]:checked ~ .s_media-back .s_media-share {
    display:none;
}

}

/* Styling when device's screen size is <= 420px. */
@media screen and (max-width:420px) {

/* Changing size of arrows' container. */
.s_forward-arrow, .s_backward-arrow {
    width:12%;
}

/* Changing size and positions of arrows. */
.s_forward-arrow span, .s_backward-arrow span {
    font-size:24px;
}
.s_forward-arrow label {
    margin-top:2px;
    right:15px;
}
.s_backward-arrow label {
    margin-top:2px;
    left:15px;
}
.s_container:hover .s_forward-arrow label { 
    right:15px;
}
.s_container:hover .s_backward-arrow label {
    left:15px;
}

/* Changing size of bullets' container. */
.s_bullets {
    width:76%;
}

/* Changing the size of media icons and its parent containers. */
.s_media {
    max-width:180px;
    padding:11px 0px 10px 0px;
}
.s_media a {
margin:0px 10px;    
}
.s_media a i {
    font-size:20px;
}
    
}

/*--------------------------------- Animations --------------------------------- */
        
/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes autoplay{
0%, 15% {
    left:0%;
}
20%,35% {
    left:-100%;
}
40%, 55% {
    left:-200%;
}
60%, 75% {
    left:-300%;
}
80%, 95% {
    left:-400%;
}
100% {
    left:0%;
}
}    
/* For Firefox 5.0+ */ 
@-moz-keyframes autoplay{
0%, 15% {
    left:0%;
}
20%,35% {
    left:-100%;
}
40%, 55% {
    left:-200%;
}
60%, 75% {
    left:-300%;
}
80%, 95% {
    left:-400%;
}
100% {
    left:0%;
}
}
/* For Opera 12.0+ */
@-o-keyframes autoplay{
0%, 15% {
    left:0%;
}
20%,35% {
    left:-100%;
}
40%, 55% {
    left:-200%;
}
60%, 75% {
    left:-300%;
}
80%, 95% {
    left:-400%;
}
100% {
    left:0%;
}
}
/* Standard Syntax */
@keyframes autoplay{
0%, 15% {
    left:0%;
}
20%,35% {
    left:-100%;
}
40%, 55% {
    left:-200%;
}
60%, 75% {
    left:-300%;
}
80%, 95% {
    left:-400%;
}
100% {
    left:0%;
}
}
               
/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes jello {
from, 11.1%, to {
    -webkit-transform:none;
    transform:none;
}
22.2% {
    -webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
    transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    -webkit-transform:skewX(6.25deg) skewY(6.25deg);
    transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    -webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
    transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    -webkit-transform:skewX(1.5625deg) skewY(1.5625deg); 
    transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    -webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);
    transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    -webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
    transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
    -webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
/* For Firefox 5.0+ */
@-moz-keyframes jello {
from, 11.1%, to {
    -moz-transform:none;
    transform:none;
}
22.2% {
    -moz-transform:skewX(-12.5deg) skewY(-12.5deg);
    transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    -moz-transform:skewX(6.25deg) skewY(6.25deg);
    transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    -moz-transform:skewX(-3.125deg) skewY(-3.125deg);
    transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    -moz-transform:skewX(1.5625deg) skewY(1.5625deg);
    transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    -moz-transform:skewX(-0.78125deg) skewY(-0.78125deg);
    transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    -moz-transform:skewX(0.390625deg) skewY(0.390625deg);
    transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
    -moz-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
/* For Opera 12.0+ */
@-o-keyframes jello {
from, 11.1%, to {
    -webkit-transform:none;
    -o-transform:none;
    transform:none;
}
22.2% {
    -webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
    -o-transform:skewX(-12.5deg) skewY(-12.5deg);
    transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    -webkit-transform:skewX(6.25deg) skewY(6.25deg);
    -o-transform:skewX(6.25deg) skewY(6.25deg);
    transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    -webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
    -o-transform:skewX(-3.125deg) skewY(-3.125deg);
    transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    -webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
    -o-transform:skewX(1.5625deg) skewY(1.5625deg);
    transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    -webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);
    -o-transform:skewX(-0.78125deg) skewY(-0.78125deg);
    transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    -webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
    -o-transform:skewX(0.390625deg) skewY(0.390625deg);
    transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
    -webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
    -o-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
/* Standard Syntax */
@keyframes jello {
from, 11.1%, to {
    transform:none; 
}
22.2% {
    transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
    transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
    transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
    transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
    transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
    transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
    transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
        
/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes rotateAntiClock {
0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(-360deg);
    transform:rotate(-360deg);
}
}
/* For Firefox 5.0+ */
@-moz-keyframes rotateAntiClock {
0% {
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -moz-transform:rotate(-360deg);
    transform:rotate(-360deg);
}
}
/* For Opera 12.0+ */
@-o-keyframes rotateAntiClock {
0% {
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    transform:rotate(-360deg);
}
}
/* Standard Syntax */
@keyframes rotateAntiClock {
0% {
    transform:rotate(0deg);
}
100% {
    transform:rotate(-360deg);
}
}
        
/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes rotateClock {
0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}
}
/* For Firefox 5.0+ */
@-moz-keyframes rotateClock {
0% {
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}
}
/* For Opera 12.0+ */
@-o-keyframes rotateClock {
0% {
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(-360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}
}
/* Standard Syntax */
@keyframes rotateClock {
0% { 
    transform:rotate(0deg);
}
100% {
    transform:rotate(360deg);
}
}

/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes showhide {
0% {
    opacity:0;
}
10% {
    opacity:0;
}
40%, 80% {
    opacity:1;
}
100% {
    opacity:0;
}
}
/* For Firefox 5.0+ */
@-moz-keyframes showhide {
0% {
    opacity:0;
}
10% {
    opacity:0;
}
40%,80% {
    opacity:1;
}
100% {
    opacity:0;
}
}
/* For Opera 12.0+ */
@-o-keyframes showhide {
0% {
    opacity:0;
}
10% {
    opacity:0;
}
40%, 80% {
    opacity:1;
}
100% {
    opacity:0;
}
}
/* Standard Syntax */
@keyframes showhide {
0% {
    opacity:0;
}
10% {
    opacity:0;
}
40%, 80% {
    opacity:1;
}
100% {
    opacity:0;
}
}

/* For Chrome 4.0+, Safari 4.0+ and Opera 15.0 */
@-webkit-keyframes downall {
from, 0% {
    z-index:100;
}
to, 100% {
    z-index:-10;
}
}
/* For Firefox 5.0+ */
@-moz-keyframes downall {
from, 0% {
    z-index:100;
}
to, 100% {
    z-index:-10;
}
}
/* For Opera 12.0+ */
@-o-keyframes downall {
from, 0% {
    z-index:100;
}
to, 100% {
    z-index:-10;
}
}
/* Standard Syntax */
@keyframes downall {
from, 0% {
    z-index:100;
}
to, 100% {
    z-index:-10;
}
}











@media screen and (max-width:480px){
#LeftPanel,.sidebar2,.dynpg span.page,.leftna,.rightna,nav,.ksb,.account,.payments,.cntc,.fav,table.gallery div.clearFullDiv{ display:none;}
.logoheader,.ssear,.slogan{ position:relative;}
.logoident{ float:none;}
.logoheader{left:auto; top:0; }



.pagecontainer > table:nth-child(8) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(2){ margin:0; padding:0; float:none;}

.ssear{ width:100%; margin-left:auto; margin-right:auto; right:auto;}
.slogan{ right:auto; left: auto;bottom:0; margin-left:auto; margin-right:auto;}

.hdse{ min-height:230px;}
.cmpBr,.r3_cm, .r3_c, .r3,.rs_box,td#CentralArea,.grid,.ctrlbr,td#CentralArea div.v4stabl,div.fpcc,.cezent,td#CentralArea div.dynpg,table.pgbc,.stBadge,.eBaycontainer{ width:480px; max-width:480px;}
.stBadge{ min-width:480px;}
td.gallery { width:29%;}
table.gallery td.picture{ padding:0 0;}
table.gallery img { max-width:110px;}


}