@charset "utf-8";
/* CSS Document */

html{margin:0; padding:0; width:100%; height:100%; /*scroll-behavior:smooth;*/}
body{margin:0; padding:0; width:100%; height:100%; font-size:14px; color:#4C4C4C; font-family:"Helvetica Neue", Helvetica,Arial, sans-serif; font-weight:400;}
p{margin:0 0 15px 0;}
a{color:#1e61af; text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
a:focus, a:active{outline:none;}
ul{margin:0 0 15px 0; padding:0 0 0 35px;}
li{margin:0 0 5px 0; padding:0;}

small{color:#7E7E7E;}

img{border:none 0;}

.left{float:left;}
.right{float:right;}
.center{text-align:center;}
.justify{text-align:justify;}
.leftText{text-align:left !important;}
.rightText{text-align:right !important;}
.clear{clear:both;}

h1{font-size:28px; margin:0 0 20px 0; padding:0; font-weight:300;}
h2{font-size:28px; margin:0 0 20px 0; padding:0; font-weight:300; color:#c7181e;}

.colorGreen{color:#47991f;}
.colorRed{color:#c7181e;}

/* HEADER */
header{width:100%; height:43px; padding:5px 0; position:fixed; top:0; left:0; margin:0; z-index:1000; -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); background-color:#FFF;}

header .backButton{width:20%; float:left; text-align:left;}
header .backButton a{display:inline-block; padding:12px 18px 7px 18px;}
header .rightButton{width:20%; float:right; text-align:right; padding-right:5px; box-sizing:border-box;}
header .logo{width:180px; height:43px; float:left; text-align:center; padding:8px 0 0 0; box-sizing:border-box; position:absolute; left:50%; margin-left:-90px;}

header .btn-navbar{background:none; border:none 0;  margin:0; padding:12px 15px 12px 15px; width:auto; height:auto; position:relative; cursor:pointer; min-width:0;}
header .btn-navbar .icon-bar{background-color:#ed1c24; height:3px; width:22px; margin:0 0 4px 0; display: block;}
header .btn-navbar .text{font-size:11px; text-align:center; position:absolute; bottom:-3px; left:12px; font-weight:500; color:#000;}
/* HEADER end */

/*section{padding:53px 0 0 0;}*/

.page{max-width:1200px; margin:20px auto; overflow:hidden; padding-top:40px;}
.page .text{width:50%; float:left; padding:30px; padding-top:40px; box-sizing:border-box;}
.page .screens{width:50%; float:right; padding:15px; box-sizing:border-box; background-color:#e6e7e8; text-align:left;}

.ecran{display:inline-block; padding:0 10px; max-width:48%; box-sizing:border-box; margin-bottom:20px; text-align:center; vertical-align:top;}
.ecran img{max-width:100%; height:auto;}
.ecran span, .ref{background-color:#c7181e; -webkit-border-radius:100%; border-radius:100%; color:#FFF; text-align:center; display:inline-block; width:24px; height:24px; font-size:14px; font-weight:300; line-height:24px; margin-top:5px;}
.ref{width:16px; height:16px; line-height:16px; font-size:11px;}

.blueBox{background-color:#e1eaf5; padding:10px; -webkit-border-radius:5px; border-radius:5px; font-size:12px;}

.cuprins{padding:20px 30px 0 30px; padding-top:30px; background-color:#383838; color:#FFF;}
.cuprins ul{float:left; width:200px; margin:0 20px 20px 0; padding:0; list-style:none;}
.cuprins a{color:#FFF; display:block; padding:2px;}

@media screen and (max-width:820px){
	h1{font-size:24px; margin:0 0 15px 0;}
	h2{font-size:24px; margin:0 0 15px 0;}
	.page{margin:10px 0;}
	.page .text, .page .screens{width:100%; float:none; padding:15px 10px 5px 10px;}
	.page .text{padding-top:35px;}
	
	.ecran{margin-bottom:15px;}
	.ecran span{width:20px; height:20px; line-height:20px; font-size:12px;}
}

@media screen and (max-width:420px){
	h1{font-size:18px;}
}