<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<!--
www.ebubekirbastama.com
Slider Düzenleme
-->
<html>
<head>
<meta charset="UTF-8">
<title>Eçk Yazılım</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="slider.css" rel="stylesheet" type="text/css"/>
<link href="footer.css" rel="stylesheet" type="text/css"/>
<link href="menu.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Ebubekir Bastama</h1>
<p>Başarmak istiyorsanız durmaksızın çalışın.</p>
</div>
</div>
<!--Menu kodları-->
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="www.ebubekirbastama.com">Logo</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li><a href="http://www.ebubekirbastama.com">Ana Sayfa</a>
</li>
<li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">Ürünler</a>
</li>
<li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">Hakkımızda</a>
</li>
<li><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">İletişim</a>
</li>
</ul>
</div>
</div>
</div>
<!--Menu kodları-->
<!--slider-->
<div id="content-slider" class="clr">
<div class="wrap-slider clr">
<h1 class="main-title">Haberler</h1>
<!-- ========================Thumbnail ControlNav====================================== -->
<input type="radio" id="a-1" name="a" >
<input type="radio" id="a-2" name="a" >
<input type="radio" id="a-3" name="a" >
<input type="radio" id="a-4" name="a" >
<nav id="main">
<label for="a-1" class="first"></label>
<label for="a-2" class="first"></label>
<label for="a-3" class="first"></label>
<label for="a-4" class="first"></label>
<!-- <label for="a-5" class="first"></label> -->
</nav>
<!-- ============================================================== -->
<nav id="control">
<label for="a-1" ></label>
<label for="a-2" ></label>
<label for="a-3" ></label>
<label for="a-4" ></label>
<!-- <label for="a-5" class="first"></label> -->
</nav>
<!-- ============================================================== -->
<!-- IMAGE NAVIGATION pic -->
<span id="b-1" class="th" tabindex="10">
<img src="https://github.com/lime7/slider/blob/master/images/pic-1.png?raw=true" alt="" id="p-1">
<div class="title-1">
<h1>PAK FA T-50</h1>
<p>Stealth multirole fighter</p>
<a href="">read more...</a>
</div>
</span>
<span id="b-2" class="th" tabindex="11">
<img src="https://github.com/lime7/slider/blob/master/images/pic-10.png?raw=true" alt="" id="p-2">
<div class="title-2">
<h1>Kamov Ka-50 "Black Shark"</h1>
<p>Attack helicopter</p>
<a href="">read more...</a>
</div>
</span>
<span id="b-3" class="th" tabindex="12">
<img src="https://github.com/lime7/slider/blob/master/images/pic-3.png?raw=true" alt="" id="p-3">
<div class="title-3">
<h1>Sukhoi Su-27</h1>
<p>Air superiority fighter</p>
<a href="">read more...</a>
</div>
</span>
<span id="b-4" class="th" tabindex="13">
<img src="https://github.com/lime7/slider/blob/master/images/pic-4.png?raw=true" alt="" id="p-4">
<div class="title-4">
<h1>mil mi-28</h1>
<p>Attack helicopter</p>
<a href="">read more...</a>
</div>
</span>
<!-- ______________IMAGES_________________________________________ -->
<div class="slider">
<div class="inset">
<figure>
<figcaption class="title-1">
<h1>PAK FA T-50</h1>
<p>Stealth multirole fighter</p>
<a href="">read more...</a>
</figcaption>
<img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-1" class="f">
</figure>
<figure>
<figcaption class="title-2">
<h1>Kamov Ka-50 "Black Shark"</h1>
<p>Attack helicopter</p>
<a href="">read more...</a>
</figcaption>
<img src="https://github.com/lime7/slider/blob/master/images/10.png?raw=true" alt="" id="i-2" class="f">
</figure>
<figure>
<figcaption class="title-3">
<h1>Sukhoi Su-27</h1>
<p>Air superiority fighter</p>
<a href="">read more...</a>
</figcaption>
<img src="https://github.com/lime7/slider/blob/master/images/3.png?raw=true" alt="" id="i-3" class="f">
</figure>
<figure>
<figcaption class="title-4">
<h1>mil mi-28</h1>
<p>Attack helicopter</p>
<a href="">FIND OUT MORE</a>
</figcaption>
<img src="https://github.com/lime7/slider/blob/master/images/4.png?raw=true" alt="" id="i-4" class="f">
</figure>
<figure>
<figcaption class="title-5">
<h1>PAK FA T-50</h1>
<p>Stealth multirole fighter</p>
<a href="">read more...</a>
</figcaption>
<img src="https://github.com/lime7/slider/blob/master/images/1.png?raw=true" alt="" id="i-5" class="f">
</figure>
</div>
</div>
</div>
</div>
<!--slider-->
<!--resim ve yazılar orta-->
<div class="container-fluid bg-3 text-center">
<h3>Projelerimiz</h3><br>
<div class="row">
<div class="col-sm-3">
<p>Sıfırdan C# Eğitim Seti</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Sıfırdan Otomasyon Eğitim Seti</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Adisyon Eğitim Seti</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Güvenli Yazılım Eğitimi</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br>
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-3">
<p>Bootsrap Login Page</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Responsive Tema</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Chat Programı</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Pc Log Programı</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br><br>
<!--resim ve yazılar orta-->
<footer class="container-fluid text-center">
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">Hakkımızda</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programlar</h4>
<p class="footertext">C#,vb.net,java,.net,c#,android<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Tasarım</h4>
<p class="footertext">Adobe Cs6<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Tasarım</h4>
<p class="footertext">Bootstrap,Responsive,Css3,Html5,JavaScript<br>
</center>
</div>
</div>
<div class="row">
<p><center><a href="http://www.ebubekirbastama.com/2018/08/bootstrap-html-responsive-template.html">İletişim İçin Tıklayınız</a> <p class="footertext">Copyright 2018</p></center></p>
</div>
</div>
</div>
</footer>
</body>
</html>
/* Footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(http://images.cdn.fotopedia.com/_avPIZmqM3w-7z161LH_268-hd.jpg);
}
/* Custom footer CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
.footertext {
color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(10, 9, 9, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-color: rgba(42, 212, 36, 1);
border-bottom-width: 1px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(0, 0, 0, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(98, 16, 128, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(232, 9, 9, 1);
background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #2ad424;
}
#content-slider {
line-height: 1;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
font-size: 10px; /* font-size 1em = 10px = 62.5%*/
/*background: #4e616d;*/
}
/* ------------------------------- > Clearfix */
.clr {
*zoom: 1;
}
.clr:before,
.clr:after {
display: table;
content: "";
line-height: 0;
}
.clr:after {
clear: both;
}
/* ---------------------------------> wrapper */
#content-slider .wrap-slider {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 1200px;
/*max-height: 400px;*/
height: 100%;
width: 100%;
margin: 0px auto;
position: relative;
text-align: right;
}
#content-slider .wrap-slider.full {
width: 100%;
max-width: 100%;
text-align: center;
border: none;
}
/* --------------------------------> Link style */
#content-slider *:focus {
outline: 0;
}
#content-slider a:hover {
color: #7FD4FD !important;
text-decoration: underline !important;
}
#content-slider a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#content-slider a:hover,
#content-slider a:active {
outline: 0;
}
/* --------------------------------> Responsive images (ensure images don't scale beyond their parents) */
#content-slider img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
/*---------------
Main
---------------------------*/
#content-slider .slider {
margin-top: 5%;
position: absolute;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
#content-slider .inset {
width: 500%;
line-height: 0;
-webkit-animation: 10s slidy infinite;
-moz-animation: 20s slidy infinite;
-ms-animation: 20s slidy infinite;
-o-animation: 20s slidy infinite;
animation: 20s slidy infinite;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#content-slider h1.main-title {
text-align: center;
color: #00ABFA;
font-weight: 200;
font-size: 32px;
text-transform: uppercase;
line-height: 52px;
letter-spacing: 0.1em;
margin: 5px 0 0px 0;
}
#content-slider .slider [class*='title-'] {
background: rgba(0, 0, 0, 0.51);
padding: 1% 1%;
display: inline-block;
width: 40%;
/*width: 385px;*/
height: auto;
position: absolute;
z-index: 12;
margin: 15px 0 0 15px;
/*margin-bottom: -15%;
left: -65%;*//*
margin-left: -40%;*/
line-height: normal;
overflow: hidden;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#content-slider .th>[class*='title-'] {
width: auto;
height: auto;
position: absolute;
top: 0em;
right: 0em;
text-align: right;
margin: 5px 10px 0 0;
opacity: 1;
line-height: normal;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*------------------------------*/
/* ------------------------------------------------> article */
/*------------------------------*/
#content-slider .slider h1,#content-slider .th h1 {
color: #fffefe;
text-transform: uppercase;
padding: 0;
margin: 0;
font-weight: bold;
}
#content-slider .slider p,#content-slider .th p {
color: #fffefe;
text-transform: uppercase;
padding: 0;
margin: 0;
}
#content-slider .slider a,#content-slider .th a {
font-weight: bold;
color: #00ABFA;
text-decoration: none;
text-transform: uppercase;
}
/*------------------------------*/
/* -----------------------------------------------> article img slider*/
/*------------------------------*/
#content-slider .slider h1 { font-size: 3.0em; line-height: 2em; }
#content-slider .slider p { font-size: 2.3em; line-height: 1.2em; }
#content-slider .slider a { font-size: 1.7em; line-height: 1.5em; }
/*------------------------------*/
/* -----------------------------------------------> article img prewiew*/
/*------------------------------*/
#content-slider .th h1 { font-size: 2em; line-height: 1.2em; }
#content-slider .th p { font-size: 1.2em; line-height: 1.7em; }
#content-slider .th a { font-size: 1.55em; line-height: 1.55em; }
#content-slider .th img {
position: relative;
max-width: 100%;
height: auto !important;
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-ms-filter: brightness(50%);
-o-filter: brightness(50%);
filter: brightness(50%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#content-slider .th:hover img {
-webkit-filter: brightness(100%);
-moz-filter: brightness(100%);
-ms-filter: brightness(100%);
-o-filter: brightness(100%);
filter: brightness(100%);
}
/* ---------------------------------------------> main img */
#content-slider figure {
margin: 0;
padding: 0;
width: 20%;
float: left;
cursor: pointer;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#content-slider figure img {
width: 100%;
position: relative;
}
/* --------------------------------------------> max contrloS img preview*/
#content-slider span.th {
width: 25%;
margin: 34% 0% 0 0%;
float: left;
text-align: center;
display: inline-block;
position: relative;
z-index: 1000;
cursor: pointer;
}
#content-slider input[type='radio'] {
width: 10px;
height: 10px;
display: none;
position: relative;
/*left: 0%;
bottom: 0%;*/
display: none;
}
#control{
position: absolute;
left: 3%;
z-index: 5;
top: 55%;
width: 95%;
}
#content-slider label.first{
width: 9px;
height: 9px;
margin: 33% 1% 0 0%;
/*float: left;*/
text-align: center;
display: inline-block;
position: relative;
z-index: 1000;
cursor: pointer;
border-radius: 100%;
background: #00ABFA;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#content-slider #main>label:after{
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #fff;
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
opacity: 0;
visibility: hidden;
z-index: 9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#content-slider input[type='radio'] {
width: 10px;
height: 10px;
display: none;
position: relative;
/*left: 0%;
bottom: 0%;*/
display: none;
}
#content-slider #control{
position: absolute;
left: 3%;
z-index: 15;
top: 0%;
width: 95%;
margin-top: 10%;
display: none;
}
#content-slider label.first{
width: 9px;
height: 9px;
/*margin: 33% 1% 0 0%;*/
margin: 0% 1% -30% 0%;
/*float: left;*/
text-align: center;
/*display: inline-block;*/
position: relative;
z-index: 1000;
cursor: pointer;
border-radius: 100%;
background: #00ABFA;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: none;
}
#content-slider #main>label:after{
content: '';
display: inline-block;
width: 7px;
height: 7px;
background: #fff;
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
opacity: 0;
visibility: hidden;
z-index: 9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/*_____________________________________________________________________________________________*/
/*-------------------------------------------------------------------
CoNTROLS
-------------------------------------------------------------------*/
#main>label:hover { width: 9px; height: 9px; background: #FFF; border: 1px solid #00ABFA; }
input#a-1:checked ~ .slider .inset { margin-left: 0%; }
input#a-2:checked ~ .slider .inset { margin-left:-100%; }
input#a-3:checked ~ .slider .inset { margin-left:-200%; }
input#a-4:checked ~ .slider .inset { margin-left:-300%; }
input#a-5:checked ~ .slider .inset { margin-left:-400%; }
input#a-1:checked ~ #main>label:nth-child(1):after { opacity: 1; visibility: visible; }
input#a-2:checked ~ #main>label:nth-child(2):after { opacity: 1; visibility: visible; }
input#a-3:checked ~ #main>label:nth-child(3):after { opacity: 1; visibility: visible; }
input#a-4:checked ~ #main>label:nth-child(4):after { opacity: 1; visibility: visible; }
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1),
input#a-5:checked ~ #control>label:nth-child(1),
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) {
width: 50px;
height: 50px;
top: 12em;
display: inline-block;
position: relative;
cursor: pointer;
}
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1) {
background: url(https://github.com/lime7/slider/blob/master/images/right.png?raw=true) no-repeat;
float: right;
right: 0.3%;
}
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) {
background: url(https://github.com/lime7/slider/blob/master/images/left.png?raw=true) no-repeat;
float: left;
left: 0.3%;
}
span#a-1:focus ~ .slider .inset { margin-left: 0%; }
span#a-2:focus ~ .slider .inset { margin-left:-100%; }
span#a-3:focus ~ .slider .inset { margin-left:-200%; }
span#a-4:focus ~ .slider .inset { margin-left:-300%; }
span#a-5:focus ~ .slider .inset { margin-left:-400%; }
span#b-1:focus ~ .slider .inset { margin-left: 0%; }
span#b-2:focus ~ .slider .inset { margin-left:-100%; }
span#b-3:focus ~ .slider .inset { margin-left:-200%; }
span#b-4:focus ~ .slider .inset { margin-left:-300%; }
span#b-5:focus ~ .slider .inset { margin-left:-400%; }
#content-slider input:checked ~ .slider>.inset {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#content-slider span:focus ~ .slider>.inset {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
#content-slider span:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
/*---------
ANIMATION img
----------------------------*/
@keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-webkit-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-moz-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-o-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@media only screen and (max-width: 1040px) and (min-width: 640px) {
#content-slider .th h1 { font-size: 1.2em; line-height: 1em; }
#content-slider .th p { font-size: 1.0em; line-height: 0.7em; }
#content-slider .th a { font-size: 0.55em; line-height: 0.55em; }
}
/*@media only screen and (max-width: 940px) {
#content-slider .slider [class*='title-'] { margin-bottom: -20%; }
}*/
@media only screen and (max-width: 640px) {
#content-slider .slider [class*='title-'] { display: none; }
#content-slider span.first { display: none; }
#content-slider span.th { width: 98%; cursor: default; margin-top: 37%; }
#content-slider span.th img { float: left; width: 40%; margin-right: 5%; padding: .7% 0 0 0; }
#content-slider .th>[class*='title-'] { right: 0%; width: 55%; text-align: left; }
#content-slider #b-2 { margin: 5% auto 0 auto; }
#content-slider #b-3, #content-slider #b-4 { margin-top: 5%; }
#content-slider span#b-2:focus { opacity: 1; } span#b-2:focus ~ span#b-5 { display: none; }
#content-slider span#b-3:focus { opacity: 1; } span#b-3:focus ~ span#b-5 { display: none; }
#content-slider span#b-4:focus { opacity: 1; } span#b-4:focus ~ span#b-5 { display: none; }
#content-slider #control { display: block; }
#content-slider #main { padding: 1% 0; width: 100%; margin-top: 29.2%; z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); }
#content-slider label.first { display: inline-block; margin-bottom: 0; }
}
@media only screen and (max-width: 480px) {
#content-slider #main { padding: 1% 0; width: 100%; /*bottom: -15.5em;*/ z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); }
#content-slider label.first { margin-bottom: 0; }
/*#content-slider span.th { display: none; }*/
#content-slider span.th img { display: none; }
#content-slider .th>[class*='title-'] { width: 98%; margin: 2% auto; position: relative; text-align: center; }
#content-slider #control { margin-top: 12%; }
}
