html, body {
margin:0;
padding:0;
height:100%;
background:rgba(240,240,240,1);
background-size:cover;
}

body::-webkit-scrollbar { display: none; }

* { padding:0px;margin:0px;box-sizing:border-box; }

ul, ol, li { list-style:none; }

img { padding:0px;margin:0px;border:none; }

:focus { outline:none; border:none; } 

@font-face {
font-family:'NeoSansArabic';
src:url('../fonts/NeoSansArabic.eot');
src:local('☺'), url('../fonts/NeoSansArabic.woff') format('woff'), url('../fonts/NeoSansArabic.ttf') format('truetype'), url('../fonts/NeoSansArabic.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'sfctc';
src:url('../fonts/sfctc.eot'); 
src:url('../fonts/sfctc.eot?#iefix') format('embedded-opentype'), url('../fonts/sfctc.woff') format('woff'), url('../fonts/sfctc.ttf') format('truetype'), url('../fonts/sfctc.svg#sfctc') format('svg');
font-weight: normal;
font-style: normal;
}

.scrolldown {
position:absolute;
width:23px;
height:40px;
top:80%;
right:-5px;
bottom:0px;
left:0;
margin:auto;
box-shadow: inset 0 0 0 1px rgba(255,194,0,1);
border-radius:25px;
z-index:2;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.scrolldown:before {
position:absolute;
content: '';
width:5px;
height:5px;
background: #fff;
margin-left:9px;
top: 2px;
border-radius: 4px;

-webkit-animation: scroll 1.5s infinite;
animation: scroll 1.5s infinite;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.page_title {
display:block;
position:relative;
width:20%;
height:55px;
font:normal 32px 'NeoSansArabic';
color:rgba(7,57,80,1);
text-align:center;
border-bottom:solid 3px rgba(0,0,0,0.15);
margin:130px auto 0px auto;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.page_title span {
display:block;
position:absolute;
width:50%;
height:3px;
text-align:center;
top:0;
right:0;
bottom:-54px;
left:0;
margin:auto;
border-radius:5px;
background:rgba(255,194,0,1);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.chart {
display:block;
position:relative;
width:754px;
height:613px;
margin:50px auto 50px auto;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.chart img {
display:block;
width:100%;
height:100%;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

section {   
display:table;
position:relative;
width:100%;
height:auto;
overflow:auto;
}

.ss-window {
display:table;
}

body section:nth-child(1){background:none; min-height:100%; }
body section:nth-child(2){background:rgba(255,255,255,1)url(../img/about_bg.jpg) fixed no-repeat; background-size:cover;  min-height:50%; }
body section:nth-child(3){background:rgba(245,245,245,1); min-height:50%; }
body section:nth-child(4){background:rgba(255,255,255,1) url(../img/project_bg.jpg) fixed no-repeat; background-size:cover; min-height:50%; }
body section:nth-child(5){background:rgba(245,245,245,1); min-height:50%; }
body section:nth-child(6){background:rgba(255,255,255,1) url(../img/chart_bg.jpg) fixed no-repeat; background-size:cover; min-height:50%; }
body section:nth-child(7){background:rgba(245,245,245,1); min-height:77%; }


@media only screen and (max-width: 768px) {

.page_title {
width:90%;
font:normal 24px 'NeoSansArabic';

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.chart {
display:block;
width:90%;
height:auto;
margin:40px auto 40px auto;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}


}

/*media query*/
@media only screen and (max-width: 384px) {

.page_title {
width:90%;
font:normal 24px 'NeoSansArabic';

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.chart {
display:block;
width:90%;
height:auto;
margin:40px auto 40px auto;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.scrolldown {
top: 70%;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

}

/*animations*/
@-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(35px);
transform: translateY(35px);
}
}

@keyframes scroll {
0% {
opacity: 1;
}

100% {
opacity: 0;
-webkit-transform: translateY(35px);
transform: translateY(35px);
}
}