*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body {width:100%; height:100%; margin:0px; padding:0px;}
body {color:#fff; font-family:'Cairo', Arial, Helvetica, sans-serif; font-size:12px; text-align:center;}
h1, h3 {font-family:'Righteous', Arial, Helvetica, cursive; text-shadow:1px 1px 3px rgba(0, 0, 0, .3); padding:0; margin:0 0 15px;}
h1 {font-size:5em;}
h3 {font-size:1.9em;}
p {font-size:1.45em; line-height:1.4em; text-shadow:1px 1px 3px rgba(0, 0, 0, .3);}
a, a:focus, a:active {outline:0;}
.container {width:100%; max-width:1200px; padding-top:60px;}
.arr-d {margin:30px 0 50px;}
.fade {-webkit-transition:all 0.4s ease-in; transition:all 0.4s ease-in; background-color:transparent !important;}
.fade-down {opacity:0; -webkit-transform:translateY(-5vh); transform:translateY(-5vh);}
.fade-down.fade-in {opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}
#sect-1, #sect-2, #sect-3 {height:100vh; position:relative;}
#sect-1 {background:#5b267b; background:-moz-linear-gradient(-45deg, #5b267b 0%, #1ccadc 100%); background:-webkit-linear-gradient(-45deg, #5b267b 0%, #1ccadc 100%); background:linear-gradient(135deg, #5b267b 0%, #1ccadc 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b267b', endColorstr='#1ccadc', GradientType=1);}
#sect-2 {background:#c63565; background:-moz-linear-gradient(-45deg, #c63565 0%, #fad88a 100%); background:-webkit-linear-gradient(-45deg, #c63565 0%, #fad88a 100%); background:linear-gradient(135deg, #c63565 0%, #fad88a 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c63565', endColorstr='#fad88a', GradientType=1);}
#sect-3 {background:#00787e; background:-moz-linear-gradient(-45deg, #00787e 0%, #4aca62 100%); background:-webkit-linear-gradient(-45deg, #00787e 0%, #4aca62 100%); background:linear-gradient(135deg, #00787e 0%, #4aca62 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00787e', endColorstr='#4aca62', GradientType=1);}
.corner-r {background-image:url("../img/img-corner-r.png"); background-repeat:no-repeat; display:block; width:422px; height:377px; position:absolute; top:0; right:0;}
.corner-l {background-image:url("../img/img-corner-l.png"); background-repeat:no-repeat; display:block; width:387px; height:297px; position:absolute; bottom:0; left:0;}
.logo {float:left; margin:35px 0 0 100px; width:184px;}
.mob {position:absolute; bottom:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
ul.works {padding:0; margin:0;}
ul.works li {list-style:none; padding:0; margin:0; width:33.33%; float:left;}
ul.works li h3 {margin:15px 0 25px;}
ul.works li:first-child {margin-left:16.66%;}
ul.works li:nth-child(2) {margin-right:16.66%;}
ul.works li>span {background-image:url("../img/icn-works.png"); background-repeat:no-repeat; display:block; width:211px; height:218px; margin:0 auto;}
ul.works li:nth-child(2)>span {background-position:0 -219px;}
ul.works li:nth-child(3)>span {background-position:0 -438px;}
ul.works li:nth-child(4)>span {background-position:0 -657px;}
ul.works li:last-child>span {background-position:0 -876px;}
.contactus_form {width:540px; margin:50px auto 0;}
.contactus_form input, .contactus_form textarea {width:100%; padding:10px 15px; margin-bottom:15px; box-shadow:none; border:none; font-size:1.45em; height:auto; border-radius:10px;}
.contactus_form input.btn {background-color:rgba(0, 0, 0, .25); font-weight:bold; transition:all .3s ease;}
.contactus_form input.btn:hover {color:#fff; background-color:rgba(0, 0, 0, .4);}
.contactus_form input.btn:focus {border:none; color:#fff; outline:0;}
.footer {position:absolute; width:calc(100% - 200px); bottom:10px; left:100px;}
.footer a {color:#fff; margin:0 5px;}
.foot-l {float:left;}
.foot-r {float:right;}
a.scrolltop {position:fixed; bottom:50px; right:50px; color:#fff; background-color:rgba(0, 0, 0, .3); width:50px; height:50px; border-radius:25px; font-size:20px; line-height:47px; display:none;}
a.scrolltop:hover, a.scrolltop:focus, a.scrolltop:active {text-decoration:none;}
@media only screen and (max-width: 1700px) {
    h1 {font-size:3.5em;}
    h3 {font-size:1.8em;}
    .corner-r, .corner-l {opacity:.2;}
    .mob {width:600px;}
    .arr-d {margin:30px 0;}
    ul.works li>span {background-size:cover; width:150px; height:155px;}
    ul.works li:nth-child(2)>span {background-position:0 -156px;}
    ul.works li:nth-child(3)>span {background-position:0 -312px;}
    ul.works li:nth-child(4)>span {background-position:0 -468px;}
    ul.works li:last-child>span {background-position:0 -624px;}
}
@media only screen and (max-width: 1365px) {
    h1, h3 {margin:0 0 10px;}
    p {font-size:1.2em;}
    .container {padding-top:30px;}
    .logo {margin:20px 0 0 50px;}
    .corner-r {width:280px; height:250px; background-size:cover;}
    .corner-l {width:280px; height:215px; background-size:cover;}
    .arr-d {margin:20px 0;}
    .mob {width:500px;}
    .arr-d img {width:40px;}
    ul.works li>span {width:120px; height:124px;}
    ul.works li:nth-child(2)>span {background-position:0 -125px;}
    ul.works li:nth-child(3)>span {background-position:0 -250px;}
    ul.works li:nth-child(4)>span {background-position:0 -375px;}
    ul.works li:last-child>span {background-position:0 -500px;}
    .contactus_form {margin:25px auto 0;}
    .contactus_form input, .contactus_form textarea {padding:7px 10px; margin-bottom:10px; font-size:1.2em;}
    .footer {width:calc(100% - 100px); left:50px;}
}
@media only screen and (max-width: 1199px) {
    h1 {font-size:3em;}
    h3 {font-size:1.5em;}
    .container {padding-top:20px;}
    .logo {margin:2% 2% 0; width:150px;}
    .mob {width:400px;}
    .footer {width:96%; left:2%;}
    a.scrolltop {bottom:25px; right:2%; width:30px; height:30px; border-radius:15px; font-size:20px; line-height:27px;}
}
@media only screen and (max-width: 640px) {
    h1 {font-size:2.3em;}
    .container {padding:5% 2% 0;}
    .corner-r, .corner-l {display:none;}
    .mob {width:96%; margin:0 auto;}
    .contactus_form {width:96%;}
    .footer {width:96%; left:2%;}
    .foot-l, .foot-r {float:none;}
}
@media only screen and (max-width: 480px) {
    h1 {font-size:1.9em;}
    h3 {font-size:1.3em;}
    p {font-size:1.1em;}
    .container {padding-top:15px;}
    .logo {width:130px;}
    .arr-d {margin:20px 0;}
    ul.works li h3 {margin:10px 0 15px;}
    ul.works li>span {width:100px; height:103px;}
    ul.works li:nth-child(2)>span {background-position:0 -104px;}
    ul.works li:nth-child(3)>span {background-position:0 -208px;}
    ul.works li:nth-child(4)>span {background-position:0 -312px;}
    ul.works li:last-child>span {background-position:0 -416px;}
    .contactus_form input, .contactus_form textarea {font-size:1.1em;}
}
@media only screen and (max-width: 320px) {
    p {font-size:1em;}
    ul.works li>span {width:80px; height:83px;}
    ul.works li:nth-child(2)>span {background-position:0 -83px;}
    ul.works li:nth-child(3)>span {background-position:0 -166px;}
    ul.works li:nth-child(4)>span {background-position:0 -249px;}
    ul.works li:last-child>span {background-position:0 -332px;}
    .contactus_form input, .contactus_form textarea {font-size:1em;}
}
@media only screen and (max-width: 896px) and (orientation:landscape) {
    #sect-1, #sect-2, #sect-3 {height:100%;}
    #sect-2 {padding-bottom:30px;}
    .corner-r, .corner-l {display:none;}
    .mob {position:relative; left:0; transform:translateX(0);}
    .footer {position:relative; padding-top:25px;}
}
@media only screen and (device-width: 768px) and (device-height:1024px) and (orientation:portrait) {
    h1, h3 {margin:0 0 15px;}
    h1 {font-size:4em;}
    h3 {font-size:1.9em;}
    p {font-size:1.45em;}
    .logo {margin:2% 2% 0; width:auto;}
    .container {padding-top:60px;}
    .arr-d {margin:30px 0 50px;}
    .arr-d img {width:40px;}
    .mob {width:96%; margin:0 auto;}
    ul.works li>span {width:150px; height:155px;}
    ul.works li:nth-child(2)>span {background-position:0 -156px;}
    ul.works li:nth-child(3)>span {background-position:0 -312px;}
    ul.works li:nth-child(4)>span {background-position:0 -468px;}
    ul.works li:last-child>span {background-position:0 -624px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 1024px) and (device-height:768px) and (orientation:landscape) {
    .container {padding-top:40px;}
    h1 {font-size:4em;}
    h3 {font-size:1.9em;}
    p {font-size:1.45em;}
    .mob {width:700px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 1024px) and (device-height:1366px) and (orientation:portrait) {
    h1, h3 {margin:0 0 25px;}
    h1 {font-size:5em;}
    h3 {font-size:2.3em;}
    p {font-size:2em;}
    .container {padding-top:60px;}
    .logo {margin:2% 2% 0; width:auto;}
    .arr-d img {width:57px;}
    .mob {width:auto;}
    .arr-d {margin:30px 0 50px;}
    ul.works li>span {width:211px; height:218px;}
    ul.works li:nth-child(2)>span {background-position:0 -219px;}
    ul.works li:nth-child(3)>span {background-position:0 -438px;}
    ul.works li:nth-child(4)>span {background-position:0 -657px;}
    ul.works li:last-child>span {background-position:0 -876px;}
    .contactus_form {width:540px; margin:50px auto 0;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 1366px) and (device-height:1024px) and (orientation:landscape) {
    h1, h3 {margin:0 0 25px;}
    h1 {font-size:5em;}
    h3 {font-size:2.3em;}
    p {font-size:2em;}
    .container {padding-top:60px;}
    .logo {margin:2% 2% 0; width:auto;}
    .arr-d img {width:57px;}
    .mob {width:auto;}
    .arr-d {margin:30px 0 50px;}
    ul.works li>span {width:211px; height:218px;}
    ul.works li:nth-child(2)>span {background-position:0 -219px;}
    ul.works li:nth-child(3)>span {background-position:0 -438px;}
    ul.works li:nth-child(4)>span {background-position:0 -657px;}
    ul.works li:last-child>span {background-position:0 -876px;}
    .contactus_form {width:540px; margin:50px auto 0;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 414px) and (device-height:896px) and (orientation:portrait) {
    h1 {font-size:3em;}
    h3 {font-size:1.5em;}
    p {font-size:1.45em;}
    .container {padding-top:35px;}
    #sect-2 .arr-d {margin:20px 0 50px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) and (orientation:portrait) {
    h1 {font-size:3em;}
    h3 {font-size:1.5em;}
    p {font-size:1.45em;}
    .container {padding-top:35px;}
    #sect-2 .arr-d {margin:20px 0 50px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.45em;}
}
@media only screen and (device-width: 375px) and (device-height:667px) and (-webkit-device-pixel-ratio:2) {
    h1 {font-size:2.8em;}
    h3 {font-size:1.5em;}
    p {font-size:1.2em;}
    .container {padding-top:35px;}
    #sect-2 .arr-d {margin:20px 0 30px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.2em;}
}
@media only screen and (device-width: 414px) and (device-height:736px) and (-webkit-device-pixel-ratio:3) {
    h1 {font-size:2.8em;}
    h3 {font-size:1.5em;}
    p {font-size:1.2em;}
    .container {padding-top:35px;}
    #sect-2 .arr-d {margin:20px 0 30px;}
    .contactus_form input, .contactus_form textarea {padding:10px 15px; margin-bottom:15px; font-size:1.2em;}
}
@media only screen and (device-width: 320px) and (device-height:480px) and (-webkit-device-pixel-ratio:2) and (device-aspect-ratio:2/3) {
    h1, h3 {margin:0 0 7px;}
    .contactus_form {margin:15px auto 0;}
    .contactus_form input, .contactus_form textarea {padding:7px 10px; margin-bottom:10px;}
    .arr-d {margin:10px 0;}
    .arr-d img {width:30px;}
}