@import url('https://fonts.googleapis.com/css?family=Play&display=swap');
@import url('https://fonts.googleapis.com/css?family=El+Messiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

body {margin:0; color:#000000; font-family:'Merriweather'; font-size:16px; line-height:32px; overflow-x:hidden; background:#1B1E25}

a {text-decoration:none; color:#005593; border-bottom:solid 1px #A1C0D7}

a:hover {color:#937300; border-bottom:solid 1px #D8CDA5}

p {margin-top:0px; margin-bottom:14px}

h1 {margin:0 0 60px 0; letter-spacing:2px; line-height:1.7; text-align:center}

hr {border:0; height:1px; background:#fff}
hr {background-image:-webkit-linear-gradient(left, #1B1E25, #fff, #1B1E25)}
hr {background-image:-moz-linear-gradient(left, #1B1E25, #fff, #1B1E25)}
hr {background-image:-ms-linear-gradient(left, #1B1E25, #fff, #1B1E25)}
hr {background-image:-o-linear-gradient(left, #1B1E25, #fff, #1B1E25)}

.header a,
.bottom a,
.website a {color:#DE911E; border-bottom:solid 1px #7B5622}

.header a:hover,
.bottom a:hover,
.website a:hover {color:#DECB1E; border-bottom:solid 1px #7B7321}

.header .name a,
.bottom .name a {border-bottom:none}

.triagle        {position:relative}
.triagle:before {content:''; position:absolute; top:-40px; width:0px; height:0px; border-bottom:40px solid #fff; border-left:100vw solid transparent}

.triagle_dark         {position:relative}
.triagle_dark:before  {content:''; position:absolute; top:-40px; width:0px; height:0px; border-bottom:40px solid #1B1E25; border-left:100vw solid transparent; background:#fff}

.header {width:100%; height:320px; background:url('/images/hello.jpg') center center; background-size:cover; display:flex; justify-content:space-between}

.header .name,
.header .contacts {margin:80px}

.header .name {font-family:'El Messiri'; color:white; font-size:48px; width:660px; height:120px}

.header .name div:nth-child(1) {font-size:60px; line-height:54px}

.header .name div:nth-child(2) {margin-top:42px; line-height:24px}

.header .contacts {color:white; font-size:28px; width:300px; height:100px; margin:80px}

.header .contacts div {line-height:20px}

.header .contacts div:nth-child(2) {font-family:'Play'; margin-top:60px}

.info {width:100%; min-height:480px; height:auto; display:flex; justify-content:space-between; background:white}

.info_alter {min-height:0; height:180px}

.info_alter2 {min-height:0; height:300px}

.info div:nth-child(1) {width:45%; height:auto; margin:80px 0 80px 80px}

.info div:nth-child(2) {width:34%; height:auto; margin:80px 80px 80px 0; font-size:12px; line-height:24px}

.info .portfolio {font-size:18px; line-height:36px; width:100% !important; margin-right:80px !important}

.info .body {width:60% !important; margin:40px auto 120px auto !important}

.info .body .date {text-align:right; color:#959595; font-size:12px}

.info .body .img {text-align:center}

.info .body .img .img100 {width:100%}

.website {width:100%; height:auto; display:flex; justify-content:space-between; background:#1B1E25; color:white}

.website div.last {font-family:'El Messiri'; width:540px; height:auto; margin:80px 0 120px 80px}

.website div.last div:nth-child(1) {height:200px; font-size:60px; line-height:90px}

.website div.last div:nth-child(2) {height:100px; margin-top:40px; font-size:18px; line-height:30px}

.website div.links {width:34%; height:auto; margin:80px 80px 80px 0; font-size:12px; line-height:24p}

.slider {display:flex; flex-wrap:wrap; align-content:flex-start; height:420px; padding:80px 80px 120px 80px; width:auto; margin:0 auto; background:white}

.slider .left,
.slider .right {cursor:pointer; display:flex; width:40px; height:100%; align-items:center}

.slider .slides {width:calc(100% - 80px); height:100%; position:relative}

.slider .slides .slide {width:100%; height:100%; position:absolute; top:0; opacity:0; display:flex; justify-content:space-between}

.slider .slides .slide:nth-child(1) {opacity:1}

.slider .slides .slide .text,
.slider .slides .slide .unsplash {margin:0 20px; width:600px; height:100%}

.slider .slides .slide .text {width:560px; font-family:'El Messiri'; display:flex; align-content:space-between; flex-wrap:wrap}

.slider .slides .slide .text div:nth-child(1) {width:500px; font-size:72px; line-height:113px}

.slider .slides .slide3 .text div:nth-child(1) {width:300px}

.slider .slides .slide .text div:nth-child(2) {font-size:22px; line-height:37px}

.slider .slides .slide1 .unsplash {background:url('/images/unsplash_1.jpg') center center; background-size:cover}
.slider .slides .slide2 .unsplash {background:url('/images/unsplash_2.jpg') center center; background-size:cover}
.slider .slides .slide3 .unsplash {background:url('/images/unsplash_3.jpg') center center; background-size:cover}
.slider .slides .slide4 .unsplash {background:url('/images/unsplash_4.jpg') center center; background-size:cover}
.slider .slides .slide5 .unsplash {background:url('/images/unsplash_5.jpg') center center; background-size:cover}

.slider .circles {width:100%; height:60px; text-align:center; display:flex; align-content:center; justify-content:center}

.slider .circles img {cursor:pointer; width:20px; margin:10px 5px; opacity:0.2}

.slider .circles img:nth-child(1) {opacity:1}

.bottom {width:100%; height:100px; display:flex; justify-content:center; flex-wrap:wrap; align-content:center; background:#1B1E25; color:white; font-size:14px}

.bottom .name {margin-left:80px; flex-grow:1}

.bottom .email {margin:0 80px}

@media all and (max-width:1520px) {
                                     .slider {padding:80px 60px 120px 60px; height:320px}

                                     .slider .slides .slide .text,
                                     .slider .slides .slide .unsplash {margin:0 20px; width:460px}

                                     .slider .slides .slide .text {width:420px}

                                     .slider .slides .slide .text div:nth-child(1) {font-size:60px; line-height:90px}

                                     .slider .slides .slide .text div:nth-child(2) {font-size:20px; line-height:34px}

                                     .info .body .img .width_parent {width:100%}
                                  }

@media all and (max-width:1480px) {
                                     body {font-size:14px; line-height:28px}

                                     .header {height:300px}

                                     .header .name {font-size:37px; width:500px; height:100px}

                                     .header .name div:nth-child(1) {font-size:46px; line-height:40px}

                                     .header .name div:nth-child(2) {margin-top:36px}

                                     .header .contacts {font-size:22px; height:80px; width:240px}

                                     .header .contacts div:nth-child(2) {margin-top:40px}

                                     .info div:nth-child(2) {font-size:12px; line-height:24px}

                                     .website div.last {width:500px}

                                     .website div.last div:nth-child(1) {height:160px; font-size:55px; line-height:83px}

                                     .website div.last div:nth-child(2) {height:80px; font-size:16px; line-height:30px}

                                     .website div.links {font-size:12px; line-height:24p}
                                  }

@media all and (max-width:1200px) {
                                     .slider {height:600px}

                                     .slider .slides .slide {flex-direction:column}

                                     .slider .slides .slide .text {height:auto; margin-bottom:20px}

                                     .slider .slides .slide .text div:nth-child(1) {height:80px; margin-bottom:20px}

                                     .slider .slides .slide .text div:nth-child(2) {height:auto}

                                     .slider .slides .slide .text,
                                     .slider .slides .slide .unsplash {width:calc(100% - 40px)}

                                     .slider .slides .slide .text div:nth-child(1) {width:100%; text-align:center}

                                     .bottom {flex-direction:column; height:240px; align-items:center; flex-wrap:nowrap}

                                     .bottom div {margin:20px 0px !important}

                                     .bottom .name {text-align:center; flex-grow:0}
                                  }

@media all and (max-width:1160px) {
                                     body {font-size:12px; line-height:24px}

                                     .header {height:280px}

                                     .header .name {font-size:28px; width:380px; height:80px}

                                     .header .name div:nth-child(1) {font-size:35px; line-height:35px}

                                     .header .name div:nth-child(2) {margin-top:21px}

                                     .header .contacts {font-size:17px; height:60px; width:180px}

                                     .header .contacts div:nth-child(2) {margin-top:20px}

                                     .info div:nth-child(2) {font-size:10px; line-height:20px}

                                     .website div.last {height:220px; width:45%}

                                     .website div.last div:nth-child(1) {height:120px; font-size:42px; line-height:63px}

                                     .website div.last div:nth-child(2) {font-size:14px; line-height:24px; height:auto}

                                     .website div.links {font-size:10px; line-height:20p}
                                  }

@media all and (max-width:1000px) {
                                    .slider .slides .slide .text {align-content:flex-start}

                                    .slider .slides .slide .text div:nth-child(1) {height:auto; font-size:50px; line-height:58px}

                                    .slider .slides .slide .text div:nth-child(2) {font-size:15px; line-height:26px}
                                  }

@media all and (max-width:920px) {
                                    .header {height:300px; flex-direction:column; justify-content:flex-start}
                                    
                                    .header .name,
                                    .header .contacts {margin:0px auto; margin-top:40px; text-align:center}

                                    .info div:nth-child(1) {margin:40px 0 80px 40px; height:auto}

                                    .info div:nth-child(2) {margin:40px 40px 40px 0}

                                    .info .portfolio {font-size:16px; line-height:32px; margin-right:40px !important}

                                    .info .body {width:80% !important}

                                    .website div.last {margin:40px 0 80px 40px}

                                    .website div.links {margin:40px 40px 80px 0}

                                    .slider {padding:40px 40px 120px 40px; height:500px}

                                    .slider .slides .slide .text div:nth-child(1) {font-size:46px; line-height:69px}

                                    .slider .slides .slide .text div:nth-child(2) {font-size:15px; line-height:26px}
                                 }

@media all and (max-width:800px) {
                                    .slider .slides .slide .text div:nth-child(1) {font-size:35px; line-height:53px}

                                    .slider .slides .slide .text div:nth-child(2) {font-size:12px; line-height:20px}
                                 }

@media all and (max-width:720px) {
                                    .website {min-height:280px; height:auto}

                                    .website div.last {height:auto}

                                    .website div.last div:nth-child(1) {font-size:26px; line-height:42px; height:auto}

                                    .website div.last div:nth-child(2) {font-size:12px; line-height:20px; height:auto; margin-top:20px}

                                    .slider {height:460px}
                                 }

@media all and (max-width:580px) {
                                    h1, p {margin-left:20px; margin-right:20px}

                                    .info {flex-direction:column; min-height:auto}

                                    .info div:nth-child(1),
                                    .info div:nth-child(2) {width:calc(100% - 80px); margin:0px auto; margin-top:40px}

                                    .info div:nth-child(2) {margin-bottom:80px}

                                    .info .portfolio {font-size:16px; line-height:32px; margin-top:20px !important; margin-bottom:60px !important}

                                    .info .body {width:90% !important}

                                    .info .body img {width:calc(100% - 20px)}

                                    .website {flex-direction:column}

                                    .website div.last,
                                    .website div.links {margin:0 auto; margin-top:40px; width:calc(100% - 80px)}

                                    .website div.last div:nth-child(1) {height:80px; text-align:center}

                                    .website div.last div:nth-child(2) {text-align:center}

                                    .website div.links {margin-bottom:80px}

                                    .slider {padding:40px 0 120px 0}

                                    .bottom {height:200px}

                                    .bottom div {margin:10px 0px !important}
                                 }

@media all and (max-width:460px) {
                                    body {font-size:12px; line-height:24px}

                                    .header {height:300px; flex-direction:column; justify-content:flex-start}

                                    .header .name,
                                    .header .contacts {margin-top:40px}

                                    .header .name {font-size:18px; height:60px; width:100%}

                                    .header .name div:nth-child(1) {font-size:28px}

                                    .header .name div:nth-child(2) {margin-top:10px}

                                    .header .contacts {margin-top:40px}

                                    .info div:nth-child(1),
                                    .info div:nth-child(2) {width:calc(100% - 40px)}

                                    .info .portfolio {font-size:14px; line-height:28px}

                                    .website div.last,
                                    .website div.links {width:calc(100% - 40px)}

                                    .slider .slides .slide .text,
                                    .slider .slides .slide .unsplash {width:100%; margin:0}

                                    .slider .slides .slide .text div:nth-child(1) {margin:0}

                                    .bottom {font-size:11px; height:180px}

                                    .bottom .name {width:calc(100% - 40px)}

                                    .info_alter {height:240px}

                                    .info_alter2 {height:240px}
                                 }

@media all and (max-width:330px) {
                                    .info_alter {height:270px}

                                    .info_alter2 {height:270px}
                                 }