/*RESET*/
*
{
margin:0;
padding:0;
border:0;
outline:0;
line-height:1;
box-sizing:border-box;

font-size:1rem;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-family:'Times New Roman';
vertical-align:baseline;
text-overflow:ellipsis;
overflow-wrap:break-word;
text-shadow:0px 0px 1px hsla(0,0%,0%,.4);

color:hsla(0,0%,0%,1);
background:transparent;
} 
/*==-- PRELIMINARIES STYLE --==*/
body
{
width:calc(100%);
height:calc(100vh); 
background:hsla(0,0%,100%,1);
background:radial-gradient(circle at center,  hsla(0,100%,50%,1) 0%,hsla(0,95%,30%,1) 64%,hsla(15,95%,65%,1) 64.1%,hsla(315,100%,98%,1) 68%,hsla(214,6%,24%,1) 72%,hsla(215,15%,75%,1) 75%,hsla(270,4%,27%,1) 79%,hsla(215,15%,75%,1) 82%,hsla(15,95%,65%,1) 85%,hsla(0,95%,20%,1) 85.1%);
}
header,main,footer{display:block;max-width:1200px;margin:0 auto;}
h1,h2,h3,h4,h5,h6{text-align:center;}
img,object,video,embed{max-width:100%;display:block;position:relative;top:0;left:0;}
article header,article footer{width:calc(100%);margin:0 auto;}
footer{clear:both;}										
a{text-decoration:none;color:hsla(0,0%,0%,1);}
ol,ul{list-style:none;}
:focus{outline:0;}
@media screen and (max-width:1200px){
header,main,footer
{
width:calc(100%);
}
}
/*--------------------------------------------*/
/*==-- HEDER --==*/
.header
{
min-height:calc(96px);
padding:1rem;
box-shadow:.1rem .1rem 2rem hsla(0,0%,0%,.6)inset,-.1rem -.1rem 2rem hsla(0,0%,0%,.6)inset;

background:url("images/logo.png") no-repeat 90% 15px hsla(360,100%,30%,1);
background-size:64px 64px;
}
.h1
{
width:calc(260px);
margin:0 auto;

font:100 1.6rem/1.4 'Times New Roman',serif;
color:hsla(0,0%,100%,1);
text-shadow:0px 1px 1px hsla(0,0%,0%,1);

background: hsla(0,0%,0%,0);
}

/*=-- navigator [ header ] --=*/
.h_nav
{
width:calc(100%);
}
.h_ul
{
width:calc(100%);

display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content: flex-start;
}
.h_ul-li
{
border-bottom:1px solid hsla(0,0%,100%,1);
margin-left:30px;

text-shadow:0px 1px 1px hsla(0,0%,0%,1);
font:100 1rem/1 'Times New Roman',serif;
color:hsla(0,0%,100%,1);
}
.h_ul-li:hover
{
cursor:pointer;
}
.h-a
{
text-shadow:0px 1px 1px hsla(0,0%,0%,1);
font:100 1rem/1 'Times New Roman',serif;
color:hsla(0,0%,100%,1);
}
/*==-- correction[ heder ] --==*/
@media screen and (max-width:690px) {

}
@media screen and (max-width:490px) {
.header
{
background:url("images/logo.png") no-repeat 95% 25px hsla(360,100%,30%,1);
background-size:48px 48px;
}
.h1
{
width:calc(260px);
margin:0;
}
}
/*==-- end_correction[ heder ] --==*/

/*==-- MAIN --==*/ 
.main
{
/*min-height:calc(100vh - 10.5rem);*/
margin:0 auto;
padding:0 5px 0 5px;

box-shadow:inset hsla(0,0%,0%,1) 0px 0px 5px;

background:hsla(0,100%,20%,1);
}
/*==-- correction[ main ] --==*/
@media screen and (max-width:690px) {
.main
{

}
}
/*==-- end_correction[ main ] --==*/

/*=-- ARTICLE --=*/
.article
{
margin:0 auto;
box-shadow:hsla(0,0%,0%,.8) 0px 5px 10px;

background:hsla(0,0%,60%,1);
overflow:hidden;
}
/*==-- header [ article ] --==*/
.a_header
{
min-height:calc(32px);

background:hsla(0,0%,100%,1);
}
.h2
{
text-shadow:0px 0px 1px hsla(0,0%,0%,.4);
font:100 1.8rem/1.4 Georgia, serif;
letter-spacing:2px;


color:hsla(0,0%,0%,1);
}
/*==-- correction[ article ] --==*/
@media screen and (max-width:690px) {

}
@media screen and (max-width:490px) {

}
/*==-- end_correction[ article ] --==*/

/*==-- SECTION element descendants[article]--==*/
.section
{
/*min-height:calc(100vh - 210px);*/

background:hsla(0,0%,100%,1);
}
.h3
{
font:100 1rem/.5 sans-serif;
color:hsla(0,100%,50%,1);
text-shadow:0px 1px 1px hsla(0,0%,0%,1);
}
/*======-- indicator ---=======*/
/*===--- animation ---===*/
@keyframes arrow_prev{
from
{
background-position:center center;
}
to
{
background-position:-1rem center;
}
}
@keyframes arrow_next{
from
{
background-position:center center;
}
to
{
background-position:+3rem center;
}
}
.indicator_nav
{
position:relative;
width:calc(100%);

z-index:9999;
display:none;
}
.arrow_prev,.arrow_next
{
border-radius:50%;
width:calc(3rem);
height:calc(3rem);
position:absolute;
top:calc(((100vw - (100vw - 1200px)) / 5) - 50px);

cursor:pointer;
z-index:9999;
}
.arrow_prev
{
background:url("images/prev.png") no-repeat center center hsla(0,0%,100%,1);
background-size:1rem 1rem;
}
.arrow_next
{
left:calc(100% - 48px);

background:url("images/next.png") no-repeat center center hsla(0,0%,100%,1);
background-size:1rem 1rem;
}
.arrow_prev:hover
{
animation:arrow_prev 1s infinite .2s linear;
}
.arrow_next:hover
{
animation:arrow_next 1s infinite .2s linear;
}
.indicator
{
padding-top:3px;

display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;

transition:all .2s ease;
}
.indicator-li
{ 
width:10px;
height:6px;
margin-right:2px;
padding:.6rem;

border-radius:50%;
box-shadow:inset hsla(0,0%,0%,1) 0rem 0rem .4rem,hsla(0,0%,20%,1) 0rem -.1rem .2rem;
background:hsla(120,100%,50%,1);

transition:background .4s linear 0s;
}
.indicator-li:hover
{
cursor:pointer;
box-shadow:inset hsla(0,0%,0%,1) 0rem 0rem .4rem,hsla(0,0%,20%,.1) 0rem 0rem .2rem;
}
/*==-- correction[ section ] --==*/
/*=======----- 1200 -----=====*/
@media screen and (max-width:1200px) {
.arrow_prev,.arrow_next
{
top:calc((100vw / 5) - 44px);
}
}
/*=======----- 890 -----=====*/
@media screen and (max-width:890px) {
.arrow_prev,.arrow_next
{
top:calc((100vw / 5) - 38px);
}
.arrow_next
{
left:calc(100% - 40px);
}
.arrow_prev,.arrow_next
{
width:calc(40px);
height:calc(40px);
}
}
/*=======----- 690 -----=====*/
@media screen and ( max-width:690px){
.arrow_prev,.arrow_next
{
top:calc((100vw / 5) - 40px);
}
.arrow_next
{
left:calc(100% - 32px);
}
.arrow_prev,.arrow_next
{
width:calc(32px);
height:calc(32px);
}
}
/*=======----- 590 -----=====*/
@media screen and ( max-width:590px){
.arrow_prev,.arrow_next
{
top:calc((100vw / 3) - 20px);
}
}
/*==-- end_correction[ section ] --==*/

/*============-- BELT --==========*/
.belt
{
background:url("images/stop.jpg") no-repeat right center hsla(0,0%,0%,0);
background-size:15vw 100%;

overflow:hidden;
}

/*===-- container_belt --===*/
.belt_container
{
position:relative;
overflow-x:scroll;

transform:translate3d(0px, 0px, 0px);
transition:all .4s ease 0s;

display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.belt_cadre
{
min-width:calc((100vw - (100vw - 1200px)) / 2);
max-width:calc((100vw - (100vw - 1200px)) / 2);
min-height:calc((100vw - (100vw - 1200px)) / 3.4);
max-height:calc((100vw - (100vw - 1200px)) / 3.4);
margin-left:10px;
padding:10px;
box-shadow:hsla(0,0%,0%,.6) 2px 3px 6px, hsla(0,0%,0%,.6) -2px 3px 6px;

background:hsla(0,0%,100%,1);

overflow:hidden;
}
.cadre_p
{ 
border-top:1px solid hsla(0,0%,100%,1);
width:calc(100%);
height:calc(32px);

box-shadow:hsla(0,0%,90%,1) 0 2px 10px;

text-align:center;
background:hsla(0,0%,0%,1);
}
.cadre_strong
{
letter-spacing:2px;
font:100 1.2rem/1.6 'Arial Narrow', sans-serif;
color:hsla(0,0%,100%,1);
}
.demo
{
font:100 .9rem/.8 ksl, sans-serif;
color:hsla(0,0%,100%,1);
}

/*======-- preview_replica --======*/
.replica_a
{
position:relative;
display:block;
width:calc(100%);
height:calc(((100vw - (100vw - 1200px)) / 3.4) - 52px);

background:hsla(0,0%,0%,0);
}
.replica_div
{
width:calc(100%);
height:calc(((100vw - (100vw - 1200px)) / 3.4) - 52px);
}
/*======-- preview_text --======*/
.text_div
{
border-top:1px solid hsla(0,0%,80%,1);
position:absolute;
top:calc((((100vw - (100vw - 1200px)) / 3.4) - 52px) / 2);
width:calc(100%);
height:calc((((100vw - (100vw - 1200px)) / 3.4) - 52px) / 2);
padding:20px;

box-shadow:hsla(0,0%,90%,.8) 0px -5px 6px;

background:hsla(0,0%,0%,.8);
}
.text-h6
{
word-wrap:break-word;
letter-spacing:1px;
text-align:left;

text-shadow:0px 1px 1px hsla(0,0%,0%,1);
font:100 1.2rem/1.4 'Arial Narrow', sans-serif;
color:hsla(0,0%,100%,1);
}
.text-p
{
padding-left:10px;
text-shadow:0px 1px 1px hsla(0,0%,0%,1);

font:italic 100 1rem/1 'Arial Narrow', sans-serif;
color:hsla(0,0%,100%,1);
}
/*====---- div_collection ---======*/
.div-1
{
background:url("images/drupal.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-2
{
background:url("images/postcard.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-3
{
background:url("images/gremyache.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-4
{
background:url("images/electrical.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-5
{
background:url("images/autoparts.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-6
{
background:url("images/drons.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-7
{
background:url("images/evacuator.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
.div-8
{
background:url("images/taxicab.jpg") no-repeat center center hsla(0,0%,0%,1);
background-size:100% 100%;
}
/*==-- correction[ belt ] --==*/
/*=======----- 1200 -----=====*/
@media screen and (max-width:1200px) {
.belt_cadre
{
min-width:calc(100vw / 2);
max-width:calc(100vw / 2);
min-height:calc(100vw / 3.4);
max-height:calc(100vw / 3.4);
}
.replica_a
{
height:calc((100vw / 3.4) - 52px);
}
.replica_div
{
height:calc((100vw / 3.4) - 52px);
}
.text_div
{
top:calc(((100vw / 3.4) - 52px) / 2);
height:calc(((100vw / 3.4) - 52px) / 2);
}
}
/*=======----- 890 -----=====*/
@media screen and (max-width:890px) {
.belt
{
background-size:20vw 100%;
}
.text_div
{
top:calc(((100vw / 3.4) - 82px) / 2);
height:calc(((100vw / 3.4) - 22px) / 2);
}
.text-h6
{
font-size:1rem;
font-size:calc(100%);
}
.text-p
{
font-size:14px;
font-size:calc(100% - 2px);
}
}
/*=======----- 690 -----=====*/
@media screen and (max-width:690px) {
.belt
{
background-size:18vw 100%;
}
.text_div
{
top:calc(((100vw / 3.4) - 104px) / 2);
height:calc((100vw / 3.4) / 2);
}
.text-p
{
font-size:12px;
font-size:calc(100% - 4px);
}
}
/*=======----- 590 -----=====*/
@media screen and (max-width:590px) {
.belt
{
background-size:14vw 100%;
}
.belt_cadre
{
min-width:calc(100vw - 100px);
max-width:calc(100vw - 100px);
min-height:calc((100vw - 100px) / 1.6);
max-height:calc((100vw - 100px) / 1.6);
}
.cadre_strong
{
font-size:calc(100%);
}
.replica_a
{
height:calc((100vw - 100px) / 2);
}
.replica_div
{
height:calc((100vw / 2) - 52px);
}
.text_div
{
top:calc(((100vw / 2) - 52px) / 2);
height:calc(((100vw / 2) - 52px) / 2);
}
.text-h6
{
font-size:18px;
font-size:calc(100% + 2px);
}
.text-p
{
font-size:1rem;
font-size:calc(100%);
}
}
@media screen and (max-width:490px) and (orientation:portrait){
.belt_container
{
flex-direction:column;

background:hsla(0,0%,100%,1);
}
.belt_cadre
{
min-width:calc(100vw - 30px);
max-width:calc(100vw - 30px);
min-height:calc((100vw - 20px) / 1.9);
max-height:calc((100vw - 20px) / 1.9);
margin-bottom:10px;
}
.cadre_strong
{
font-size:calc(100% - 2px);
}
.text_div
{
padding-top:10px;
}
.text-h6
{
font-size:calc(100% - 2px);
}
.text-p
{
font-size:12px;
font-size:calc(100% - 4px);
}
}
@media screen and (max-width:390px) and (orientation:portrait){
.text_div
{
padding-top:0px;
}
.text-h6
{
font-size:calc(100% - 4px);
}
.text-p
{
font-size:calc(100% - 6px);
}
}
/*==-- end_correction[ belt ] --==*/

/*==-- ASIDE --==*/
/*------ animate ------*/
@keyframes spin
{
from
{transform:rotateY(0);
}
to
{
transform:rotateY(-360deg);
}
}
/*------ main aside ------*/
.aside
{
border:1px solid hsla(0,0%,100%,1);
min-height:calc((100vw - (100vw - 1200px)) / 7);
margin:0 auto;

background:url("images/logo.png") no-repeat center center hsla(120,100%,10%,1);
background-size:calc((100vw - (100vw - 1200px)) / 7);

overflow:hidden;
}
#container 
{
border:1px solid hsla(0,0%,0%,0);
width:calc(50%);
margin:0 auto;

perspective:800px;
perspective-origin:50% 230px;
}   
#shape
{
position:relative;
margin: 0 auto;
margin-top:calc(86px);
width:calc(85px);
height:calc(85px);

transform-style:preserve-3d;
}
.plane 
{
position:absolute;
width:calc(85px);
height:calc(85px);

transition:transform 2s, opacity 2s;
backface-visibility:hidden;
}
    
#shape
{
animation:spin 24s infinite linear;
}

/* ---------- ring styles ------------- */
.one
{
transform:translateZ(280px);

background:url("images/programming/html5.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 100%;
}
.two
{
transform:rotateY(51deg) translateZ(280px);

background:url("images/programming/css3.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 100%;
}
.three
{
transform:rotateY(104deg) translateZ(280px);

background:url("images/programming/js.png") no-repeat center center hsla(0,0%,100%,0);
background-size:70% 100%;
}
.four
{
transform:rotateY(158deg) translateZ(280px);

background:url("images/programming/ajax.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 50%;
}
.five
{
transform:rotateY(210deg) translateZ(280px);

background:url("images/programming/drupal.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 50%;
}
.six
{
transform:rotateY(260deg) translateZ(280px);

background:url("images/programming/php.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 70%;
}
.seven
{
transform:rotateY(310deg) translateZ(280px);

background:url("images/programming/sql.png") no-repeat center center hsla(0,0%,100%,0);
background-size:100% 100%;
}
/*==-- correction[ aside ] --==*/
/*=======----- 1200 -----=====*/
@media screen and (max-width:1200px) {
.aside
{
min-height:calc(100vw / 6.9);

background-size:calc(100vw / 6.9);
}
#shape
{
margin-top:calc(90px);
width:calc(80px);
height:calc(80px);
}
.plane 
{
width:calc(80px);
height:calc(80px);
}
}
/*=======----- 890 -----=====*/
@media screen and (max-width:890px) {
.aside
{
min-height:calc((100vw / 6.9) - 12px);

background-size:calc((100vw / 6.9) - 12px);
}
#shape
{
margin-top:calc(85px);
width:calc(70px);
height:calc(70px);
}
.plane 
{
width:calc(70px);
height:calc(70px);
}
}
/*=======----- 690 -----=====*/
@media screen and (max-width:690px) {
#shape
{
margin-top:calc(60px);
}
.one
{
transform:translateZ(180px);
}
.two
{
transform:rotateY(51deg) translateZ(180px);
}
.three
{
transform:rotateY(104deg) translateZ(180px);
}
.four
{
transform:rotateY(158deg) translateZ(180px);
}
.five
{
transform:rotateY(210deg) translateZ(180px);
}
.six
{
transform:rotateY(260deg) translateZ(180px);
}
.seven
{
transform:rotateY(310deg) translateZ(180px);
}
}
/*=======----- 590 -----=====*/
@media screen and (max-width:590px) {
.aside
{
min-height:calc(100vw / 4);

background-size:calc(100vw / 4);
} 
#shape
{
width:calc(80px);
height:calc(80px);
}
.plane 
{
width:calc(80px);
height:calc(80px);
}
}
@media screen and (max-width:490px) and (orientation:portrait){

}
@media screen and (max-width:390px) and (orientation:portrait){

} 
/*==-- end_correction[ aside ] --==*/

/*==-- FOOTER --==*/
.footer
{
/*min-height:calc(32px);*/
padding:20px 0;

box-shadow:.1rem .1rem 2rem hsla(0,0%,0%,.6)inset,-.1rem -.1rem 2rem hsla(0,0%,0%,.6)inset;

background:hsla(360,100%,30%,1);
}
/*===---- RUNNING ----=====*/						 	 						
.cells 
{
border:4px solid hsla(0,0%,100%,1);
position:relative;  
width:calc(98%);
min-height:2rem;
max-height:2rem;
margin:0 auto;

background:url(images/diod1.gif) repeat hsla(0,0%,20%,1);

overflow:hidden;
}
#line 
{
position:absolute;
top:4px;
width:calc(100%); 
}
#line div 
{
position:absolute;
width:1px;
height:1px;

background:hsla(120,100%,50%,1);

overflow:hidden;
}
/*==-- correction[ footer ] --==*/
@media screen and (max-width:690px) {

} 
/*==-- end_correction[ footer ] --==*/