*{
	
	margin:0px;
	padding:0px;
}

/* @font-face {

    font-family: 'MaSuperPolice';

    src: url('https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJ');

} */
/* @font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url("https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
} */

/* @font-face {
  font-family: "Aileron";
  font-style: normal;
  font-weight: 400;
  src: url("https://static.oc-static.com/fonts/aileron/woff2/Aileron-Regular.woff2") format("woff2"), url("https://static.oc-static.com/fonts/aileron/woff/Aileron-Regular.woff") format("woff"), url("https://static.oc-static.com/fonts/aileron/ttf/Aileron-Regular.ttf") format("truetype");
} */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../font/Roboto-Light.ttf") format("truetype");
  /* src: url("roboto/Roboto-thin.ttf") format("truetype"); */
} 

html, body{
	
	color: #212121;
	/* font: 400 16px/24px verdana, sans-serif; */
	font: 400 14px/20px verdana, sans-serif;
	width:100%;
	height:100%;
	/* position:relative; */
	/* overflow-x:hidden; */
	/* display:flex;
	flex-direction: column; */
	background-color:white;
	/* overflow-x: hidden; */
	/* background: #000 url('../../img/b_bg_2.png'); */
}

main{
	
	/* border:1px red solid; */
}

#layout{
	
	padding-top: 120px;
	background-color:#fff;
}


section > *, nav,.detail_more, .middle_div{
	
	width:83%;  
	margin:auto;
}

nav,.detail_more, .middle_div{
	
	/* width:72%; */
	width:84%;
	margin-left:auto;
	margin-right:auto;

}
section > div{
	
	/* width:72%;   */
	margin:0px auto;
	text-align:center;
	border:0px red solid;
}

ul{
	/* margin:0px;
	padding:0px; */
}

li{
	
	list-style: none;
}

section h3{
	
	/* font-size: 2.3rem; */
	/* line-height: 2.8125rem; */
	/* font-weight:300; */
	/* font-family:roboto; */
	/* display:none; */
	padding: 20px 0 5px 0;
	margin:0 auto;
	/* border-bottom: 2px orange solid; */
	text-align: center;
	/* width: 80%;	 */
	
}

#main{
	
	border:0px solid red;
	margin-top:110px; border:0px red solid;
	text-align:left;
}

hr{
	
	background: transparent url(../img/divider.png) no-repeat center 0;	
	border: 0;
	margin: 22px 0 22px 0;
	height: 5px;
	margin:auto; 
	margin-bottom:30px;
	margin-top:20px;
	width:45%;
	display:none;
	
}

header{
	
	/* background-color:rgba(247, 247, 247, 0.9);  */
	background-color:rgba(255, 255, 255, 1);
	background-image: linear-gradient(to bottom, #FFF 0%, #ECECEC 100%);
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    /* font-size: 13px; */
	box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
	/* background-color:#f7f7f7; */
	position:fixed; top:0; left:0; z-index:2; width:100%;
	z-index:30;
	opacity: 0.95;
}

header nav{
	
	/* width:100%;  */
	margin:0px auto; 
	padding:0px; 
	border:0px red solid; 
	display:flex; 
	justify-content:center;
	/* background-color:#fff;  */
}

nav>ul {
	
	/* padding: 0px 15px; */
	padding: 0;
	display:flex;
}

nav > ul >li{
	
	display: inline-block;
	border-bottom: 3px solid transparent;
	/* border-top: 3px solid transparent;	 */
	/* padding-top:5px;
	padding-bottom:5px; */
	margin: 0 5px;
	
}
nav li.logo{
	
	/*background:url('img/sservtec.png') no-repeat top left;*/
	width:auto; border:0px blue solid; padding:3px;
	font-weight:initial;
	/*padding-right:50px;*/
}
nav ul.main_mnu li.logo:hover{
	
	color:initial;
	border:0px blue solid;

}
nav ul.main_mnu a{
	color: rgba(0,0,0,.54);
	/* font: 700 14px sans-serif; */
	margin: 0px;
	padding: 20px 24px;
	text-decoration:none;
	/* text-transform: uppercase; */
	transition: color .2s;
	border:0px red solid;
	display:block;
	text-shadow: 0px 1px white;	
	letter-spacing: 1px;
}

nav > ul.main_mnu >li:hover{
	
	border-bottom: 3px solid #ff9800;
	transition: border-bottom .2s;
	
}
nav li>div>ul{ 
	background-color: #ede9dd; 
	border: solid 1px #ded6c7; 
	border-top:0px; 
	min-width:180px; 
	padding:10px 0;
	padding-bottom:0;
}

nav li>div>ul>li{ border: solid 1px transparent; }
nav li>div>ul>li:hover{ 
	background-color: #f2e6cb; 
	/* border: solid 1px red;  */
	background-color: #ffa5006e;
}

nav li>div{
	position:absolute;
	left:0; 
	top: calc(100% - 6px);
	border:0px red solid;
	display:none;
}
nav li.m_mnu ul a{padding:8px;}
nav li.m_mnu{position:relative; }
nav > ul.main_mnu >li.m_mnu:hover{border-bottom: 3px solid transparent;}
nav li.m_mnu>a{border: solid 1px transparent; border-top:0; border-bottom:0px;}
nav li.m_mnu:hover>a{background-color: #ede9dd;  border: solid 1px #ded6c7; border-top:0; border-bottom:0px; transition: border-bottom .2s;}
nav li.m_mnu:hover>a+div{display:block}
nav li.m_mnu>a>i{  
	border: solid black;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 2px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin-left:5px;
}
nav .m_mnu>div>ul>li a{position:relative; font-size: 0.9em; padding:0; margin: 10px 0;}
nav .m_mnu>div>ul>li a:before{
	content: "";
	display:inline-block;
	vertical-align:top; 
	/* position:absolute; 
	top:0; left:-30px; */ 
	margin:0px 5px;
	height:27px; width:27px; border:0px black solid; margin:0 10px;
	background:transparent url('../_ilrn/img/icon/ssswtf.png') no-repeat;	
	/* display:none; */
}
nav .m_mnu>div>ul>li.fb a:before{background-position: 0px 0px;}
nav .m_mnu>div>ul>li.lkdin a:before{background-position: -28px 0px;}
nav .m_mnu>div>ul>li.utub a:before{background-position: -55px 0px;}
#man a:before{background-image: inherit; content: "!"; text-align:center; font-size:16px; font-weight:bold;}

nav .m_mnu>div>ul>li.fb:hover>a:before{background-position: 0px -27px;}
nav .m_mnu>div>ul>li.lkdin:hover>a:before{background-position:-28px -27px;}
nav .m_mnu>div>ul>li.utub:hover>a:before{background-position:-55px -27px;}
/* nav ul.s_mnu{
	position:absolute;
	bottom:0; left:0; 
	top: calc(100% - 6px);
	display:block;
	min-width:150px;

}
ul.s_mnu >li{display:block; background-color: #ede9dd; padding:0px 5px;}
ul.s_mnu >li>a{padding:10px 0;} */

/* header  ul.log_mnu a{ */

    /* border: 1px solid; */
    /* border-radius: 4px; */
    /* box-shadow: 0px 2px 5px #b0b0b0; */
    /* text-transform: uppercase; */
    /* font-size: 9pt;	 */
	/* text-decoration:none; */
	
	
/* } */

ul input{
	
	width:10%;
	margin:0 auto;
	padding:0px;
}



header  ul.log_mnu a.h_btn{
	border: 1px solid #e49607;
    border-radius: 5px;
	color: #fff;
	font-size: 11px;
	background-color:transparent;
    box-shadow: 0px 1px 2px #b0b0b0;
    text-transform: uppercase;	
	text-decoration:none;	
	transition: .2s;
	box-shadow: 0px 2px 5px #b0b0b0;	
	width:100px;
	text-align:center
}
.btn{
	background-color:#000;
	text-shadow: 0px 1px gray;
	color: #fff;
	font-size: 11px;	
	border: 0px solid #e49607;
    border-radius: 5px;	
	text-transform: uppercase;	
	text-decoration:none;	
	transition: .2s;
	box-shadow: 0px 2px 5px #b0b0b0;	
	width:100px;
	text-align:center
}
.btn:hover{
	background-color:#000b;
	/* box-shadow: initial; */
	
}
.btn:active{
	background-color:#000;
	box-shadow: initial;
}	
header  ul.log_mnu a#btn_cnx{

	/* background-image: linear-gradient(to bottom, #FFF 0%, #ECECEC 100%);
	background-image: linear-gradient(to bottom, orange 0%, #f39d00 100%); */
	/* font-weight: bold; */
	/* text-shadow: 0px 1px gray; */
}

header  ul.log_mnu a#btn_cnx:hover{
	
	/* color:#ff0000; */
	/* color:#fff;
	border:1px orange solid; */
	/* background-color:#fff; */
	/* box-shadow: initial; */	
}
	
header  ul.log_mnu a#btn_dcnx{
	

	background-image: linear-gradient(to bottom, #FFF 0%, #ECECEC 100%);
	/* background-image: linear-gradient(to bottom, orange 0%, #f39d00 100%); */
	/* font-weight: bold; */
	text-shadow: 0px 1px white;
	color:black;
	border:1px gray solid;
}

header  ul.log_mnu a#btn_dcnx:hover{
	
	
	/* color:#ff0000; */
	color:orange;
	border:1px orange solid;
	/* background-color:#fff; */
	box-shadow: initial;
	
	
}

header ul.main_mnu a:hover{
	
	color:#000;
	/* background-color:white; */
	
}

footer{
	
	/* position:absolute;
	bottom:0; */
	font-family:arial;
	margin-top:150px;
	display:none;
	

}

footer li{
	
	/* display:inline-block; */
	/* padding:45px; */
	/* height:100px;
	width:100px; */
	margin: 2px 5px;
	/* border:1px red dashed; */
	/* border-radius: 100%;
	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
	
}

.overlay-content h1 {
	
    /* font-family: arial; */
    text-shadow: 1px 1px 3px #fff;
    margin: 0px;
    margin-bottom: 0px;
    margin-bottom: 25px;
	text-align:left;
	padding: 10px;
	color:#000000b6;
}

h1{
	
	/* color:#000000; */
	font-family:Roboto;
	color: #77909c;
	/* font-size: 45px; */
	font-weight: 300;	
	line-height: 112%;
	margin: 0;
	text-align:left;
	margin-bottom:35px;
}

h2{
	
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 2.875rem;
	text-transform: uppercase;
	margin: 5px 0 15px;

}

h3{
	
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 2.875rem;
	/* text-transform: uppercase; */
	margin: 10px 0 5px 0;
	

}

input, textarea, select{
	
	/* padding: 10px 8px; */
	padding: 7px 8px;
	/* padding: 8px 30px 8px 10px !important; */
	/*margin:10px auto; */
	margin-top:10px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	border-radius:3px;
	border:1px #cdcdcd solid;
	box-shadow: 1px 2px 2px #808080;

	
	/* font-size: .875rem; */
	font-weight: 300;
	/* font: .875rem tahoma; */
	font: 15px tahoma;
	/* line-height: 1.4em; */
	/* height: 1.4em;	 */
	/* font-size: medium; */
	
}

fieldset{
	
	
	border:0;
	
}

.champ_div{
	
	width:68%;
	/* margin-top:10px; */
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;	
	border:0px red dashed;
	/* padding:0px 5px; */
	display:table;
	text-align:left;
}

.champ_div input, .champ_div select, .champ_div textarea{
	
	display:table-cell;
	margin-top:0;
	/* width:auto!important; */
	width:auto;
	
}

.champ_div input[type="date"]{
	
	font:inherit;
	
}

.champ_div select{
	
	margin:0;
	margin-right:5px;	
}

.button {
	
    padding: 12px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    /* color: #4285f4; */
	color: #999;
	color: #ff9901;
    font-size: 12px;
	font-weight:bold;
    background-color: transparent;
    /* box-shadow: 0px 2px 5px #b0b0b0; */
    text-transform: uppercase;
    text-decoration: none;
	text-align:center;
    transition: .2s;
	margin-bottom:10px; 	
	display:block;
	/* background-image: linear-gradient(to bottom, #FFF 0%, #ECECEC 100%); */
	text-shadow:1px 1px 1px #fff;
	/* color:#000000df; */
	font-weight:500;
	box-shadow:0px 1px 5px gray;
}

a.button:hover{
	
	background-color:transparent;
	color:#ff9901;
	box-shadow: initial;
}


select{
	
	/*background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);*/
    border: 1px solid rgba(0, 0, 0, 0.25);
	/* font-size: 80%; */
}

/* input, textarea{
	
	display:block;	
}
 */
 
input[type="hidden"]{

	/* visibility:hidden; */
	margin:0px;
	padding:0px;
	width:auto;
	/* background-color:#ddd; */

} 
 
/*input[name="nom_stg[]"]{
	 
	text-transform:uppercase;
 }  
 input[name="pnom_stg[]"]{
	 
	text-transform:capitalize;
 }*/
 input[type="radio"]{
	 
	margin:20px 5px;
 } 
 
 input[type="submit"], input[type="button"], select{
	 
	width:70%;
 }
 
input[type="submit"], input[type="button"]{

	/* background-color:#d61c1d; */
	background-color:#000;
	/* background-color:gray; */
	color:#fff;
	/* font-weight:bold; */
	border:0px;
	box-shadow: 0px 1px 2px #555;
	cursor: pointer;
	margin-top:15px;
	display:block;
	
} 

input[type="submit"]:hover, input[type="button"]:hover{

	background-color:#000c;
	
}

input[type="submit"]:active, input[type="button"]:active{

	background-color:#000;
	
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"] {

	/* height:30px;
	padding:12px 8px; */
	width: 68%;
	/* padding-right:30px; */
	
}	

optgroup option, optgroup option::before {
	margin:0;
	padding:0;
}

ul.nav{
	
	display:table;
	width:100%;
	margin:auto;
	/* border-bottom: 1px solid gray; */
	/* padding:10px; */
	padding-bottom:0px;
	/* border-bottom:1px gray solid; */
	border-bottom: 1px #d2d2d2 solid;
	text-align: center;
}

ul.nav li{
	
	display: table-cell;
	padding:0px 4px;
	/* border:0; */
	/* border-bottom:3px transparent solid; */
	/* padding:5px 20px; */
	/* /* padding-top:5px; */
	/* padding-bottom:5px; */
	/* margin: 0 0px; */
	
}

ul.nav li a{
	
	/* border:0; */
	/* border-bottom:3px transparent solid;	 */
	font: 500 14px sans-serif;
	margin: 0px;
	padding: 20px 24px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s;
	display: block;
	
	color: #000;
	font-weight: 100;	
	
}

ul.nav li a:hover{
	
	/* border-bottom:3px orange solid; */
	border-bottom:3px #d61c1d solid;
	
}

.step{

	/* padding:25px 0; */
	padding:20px 0;
	padding-bottom:0;
}

.line{

	/* margin-left: 3%;
	margin-top: -3px; */
	margin:0px auto;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	width: 65%;	
	border:0px red solid;
}

.line > span {
	
    display: inline-block;
    position: relative;
}

.line > span::before, .line > span::after {
	
    background: #ced0d4;
    content: "";
    height: 1px;
	position: absolute; 
    top: 50%;
    width: 9999px;
	
}

.line > span::before {

    margin-right: 15px;
    right: 100%;

}

.line > span::after {

    margin-left: 15px;
    left: 100%;

}

.dark_overlay {
	
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
	font-family: verdana;
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
	z-index:-1;
	opacity:0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.45); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.6s;
	display:flex;
	justify-content:flex-end;
	overflow-y:hidden;
}

.overlay{
	
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
	font-family: verdana;
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    /* left: 100%; */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.75); /* Black w/opacity */
	background-color:transparent;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	/* display:flex; */
	/* justify-content:flex-end; */
	/* display:table; */
	overflow-y:hidden;
	position:relative;
	background-color: rgba(255, 0, 0, 0.53);
	
}

.overlay-content {
	/* vertical-align: middle; */
    /* width: 40%; */ /* 100% width */
    text-align: center; /* Centered text/links */
	/* border:1px red solid; */
	/* display:table-cell; */
	/* vertical-align:middle; */
	/* background-image:linear-gradient(to right, #fff 0%, #ececec 3.5%); */
	width:35%;
	height:100%;
	overflow-y:auto;
	overflow-x:hidden;
	background-color: #fbfbfb;
	box-shadow: 0px 2px 4px gray;
	position: absolute;
}

.overlay-content .tt{
	
	background-color: #F6F6F6;
}

.overlay_content_slide{
	
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
	font-family: Helvetica, Arial, sans-serif;
	margin: 0 auto 40px;
	margin-top: 0px;
	position: relative;	
}

.overlay_content_windows>*{
	display:table-cell; vertical-align:middle;
	border-radius: 3px;
	/* box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);	 */
	margin:auto;
	text-align:center;	
}
.overlay_content_windows{
	
	font-family: Helvetica, Arial, sans-serif;
	margin:auto;
	width:45%;
	height:100%;
	/* position: absolute;
	top:15%;
	left:25%; */
	position:relative;
	border:1px blue solid;
}

.overlay_content_windows .tt{
	
	background-color:#f6f6f6;
	box-shadow: 0 2px 4px gray;
}
.overlay_content_windows .step{
	
	padding:20px 0;
	padding-bottom:0;
}

.overlay_content_windows .step .foot{
	
	padding:10px;
	border:1px gray solid;
}

.overlay_content_windows .step .foot input[type="button"]{
	
	margin: 0 auto;
}

.overlay-content form {
    
	width:100%;
	border:1px blue solid;
	/* padding:20px; */
	text-align:center;
	margin:auto;
	
}

.overlay-content div {
    
	/* width:100%; */
	/* text-align:center; */
	/* margin:auto;	 */	
}

/* Position the close button (top right corner) */

.closebtn{
	
    position: absolute;

    /* font-size: 60px !important; */
    font-size: 40px !important;
	z-index:100;	
	
}


fieldset .closebtn{

	/*background-color:#d41c1d;*/
	top: -10px;
	right: 0;
	
	
}

.overlay .closebtn {
    top: 0px;
    right: 5px;	
}

.overlay a.closebtn {
	
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: .3s;
}

.overlay a.closebtn:hover, .overlay a.closebtn:focus, .overlay2 a.closebtn:hover {
	
    color: #d61c1d;
	/* color: #ff9901; */
}

fieldset{
	
	position: relative;
	
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
/* @media screen and (max-height: 450px) {
	
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 20px;
        top: 15px;
        right: 35px;
    }
} */

input:hover, textarea:hover {
	
    box-shadow: 1px 3px 5px #808080CC;
}

div.champ_div label.help{
	
	width:100%;
	margin:1px;
}

label.help{

	width: 58%;
	display:block;
	margin:1px auto;
	/* margin-top:2px; */
	padding:5px;
	/* text-align:left	; */
	/* border-left:1px #999 solid; */
	border-left:1px red solid;
	font-size:11px;
	color:#666;
	text-shadow: 0px 1px white;
	line-height:normal;
	margin-top:20px; margin-bottom:5px;	

}

label.info{

	/* width: 58%; */
	width: 65%;	
	display:block;
	margin:1px auto;
	/* margin-top:2px; */
	padding:5px;
	/* text-align:left	; */
	/* border-left:0px #999 solid; */
	font-size:9px;
	color:#666;
	text-shadow: 0px 1px white;
	line-height:normal;

}

label{
	
	text-align: left;
	border: 0px red solid;
	/* font-family: arial; */
	font-size: 13px;
	margin-top: 5px;
	text-shadow: 0px 2px 2px white;
	display:block;
}

p.cours a{
	
	display:inline-block;
	padding:5px;
	border-radius:10px;
	background-color:white;
	margin:15px 10px;
	text-decoration:none;
	/* box-shadow: 0 5px 10px 0px rgba(0,0,0,0.8); */
	background-color: transparent;
	border: gray 1px solid;
	color: #202121;	
	
}

#subs_frm{
	
	display:none;
}

#log_frm{
	
	display:none;
}

.stg_frm_visible{
	
	display:block;
}

.stg_frm_hide{
	
	display:none;
}

.mnuExp{
	
	margin:0 5px;
}
.mnuExpHi{
	
	margin:0 5px;
	border:1px solid red;
	height:20px;
	width:20px;
}

.expMnu{
	
	margin:0 5px;
	margin-bottom:2px;
}

.expMnu a:hover, .expMnu a:active, .expMnu a:focus{
		
		/* font-weight:bold;
		font-size:12pt; */
		color:#d61c1d;
		color:orange;
		color:#000;
		text-shadow:0 1px 1px white;
}

.expMnu a{
		
	display: inline-block;
	/* width: 25px; */
	border: 0px red solid;
	font-weight:bold;
}

ul.cours{
	
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;	
	display:flex; 
}

ul.cours li{
	
	width: 230px;
	height:338px;
	display: block;
	text-decoration: none;
	/* border-radius: 5px;
	box-shadow: rgba(121,121,121,.35) 1px 10px 20px; */
	cursor: pointer;
	outline: 0;
	position: relative;
	overflow: hidden;
	display:inline-block;

}
.loader {
  height: 4px;
  width: 70%;
  margin:auto;
  position: relative;
  overflow: hidden;
  background-color: #ddd;
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -100px;
  width: 100px;
  height: 4px;
  background-color: #2980b9;
  background-color: #d61c1d;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}