@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,500,700');
@font-face {
    font-family: 'icons';
    src: url('icons.ttf') format('truetype')
}

.mp0{margin: 0;padding: 0}

[data-edit-text], [data-edit-image], [data-gallery]{cursor: pointer}

html, body,.cv-template{height: 100%;}
.cv-template *{margin:0;box-sizing: border-box}
body.mp0, .cv-template input,.cv-template textarea,.cv-template select{font-family: 'Montserrat', sans-serif}
.cv-template a{text-decoration: none}
.cv-template .icon{font-family: 'icons' !important;line-height: 1;vertical-align: middle}

.cv-template header{margin-top: 180px}
.cv-template header li{list-style: none;font-weight: 500;}
.cv-template header li a{padding: 5px 10px;font-size: 1.2em;display:inline-block}


.cv-template .c{width: 1200px;margin:0 auto}
.cv-template .btn{padding: 10px 30px;display: inline-block;font-size: 1em;font-weight: 500;text-transform: uppercase;;border-radius: 50px}
.cv-template .h{font-size: 5em;display: block}
.cv-template .h2{font-size: 2em;display: inline-block;padding:10px 0;border-bottom-width: 2px;border-bottom-style: solid}

.cv-template .c0 h1{font-size: 5em;font-weight: 600}
.cv-template .c0 .img{margin: 0 auto -180px}
.cv-template .c0 .img,.cv-template #contact .img{width:300px!important;height:300px!important;border-radius: 150px;overflow: hidden;}
.cv-template .c0 .img img,.cv-template #contact .img img{height:100%;object-fit: cover}

.cv-template .c2 #skills .skill{padding:7px;margin-bottom: 45px}
.cv-template .c2 #skills .skill span{display:block;font-weight: 500}
.cv-template .c2 #skills .skill .bar{border-width: 2px;border-style: solid;border-radius: 7px}
.cv-template .c2 #skills .skill .bar div{height:10px;border-radius: 7px}

.cv-template .c2 .coor{padding: 0}
.cv-template .c2 .coor li{font-weight: 600;font-size: .9em;margin-bottom: 8px;list-style: none;margin-right: 30px}
.cv-template .c2 .coor li:last-child{margin-right: 0}
.cv-template .c2 .coor .icon{margin-right: 10px;text-transform: none}

.cv-template .c3{position: relative}
.cv-template .c3 .title{position: relative;}
.cv-template .c3 .title div{position: -webkit-sticky;position: sticky;top: 43%;margin: 400px 0}
.cv-template .c3 .title h2{transform: rotate(-90deg);}

.cv-template #portfolio .img{height: 500px;width:50%;}
.cv-template #portfolio .img img{height: 100%;object-fit: cover}

.cv-template .c3#contact .title div{margin: 400px 0 200px}


.cv-template form input:not(.btn),.cv-template form textarea{background-color: transparent;border-width:2px;border-style: solid;;padding: 20px;display: block;margin-bottom: 20px;font-size: 1em;border-radius: 50px}
.cv-template form textarea{border-radius: 30px}
.cv-template form input[type=submit]{cursor: pointer;border: none}

.cv-template .share a{display: block;font-size: 1.5em;margin-right: 20px}
.cv-template .share a:last-child{margin-right: 10px}

span.menu-res{display: none}

@media (max-width : 960px) {


    .cv-template header{padding:0;z-index: 9999!important;width:100%;margin-top: 0}
    .cv-template header .logo{display:none}

    .cv-template header.flex{align-items: start}
    .cv-template header .share{padding:0}
    .cv-template .h{font-size: 2em}

    span.menu-res{display: block;position: fixed;top: 30px;right: 30px;transition: 0.15s linear;padding: 10px;font-size: 1.6em;cursor: pointer;border-radius: 50px}
    .mn .menu-res{right: 180px;z-index: 9999;}
    .mn nav{right:0;}

    header nav{z-index: 9999;position: fixed;margin:0;right:-250px;top: 0;bottom: 0;width: 250px!important;transition: 0.15s linear;text-align: start;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.06);}
    .cv-template header ul{display: block;padding:90px 20px 20px;height: 100%;}
    .cv-template header ul li{display: block;font-weight: bold;margin:0}
    .cv-template header ul li a{padding: 10px;}
    .cv-template header ul li ul{position: relative;margin-left: 20px;box-shadow: none;left: 0;display: block;padding: 0;}
    .cv-template header li ul h3{display: none}
    .cv-template header li ul .mn,.cv-template header nav li ul li{width: 100%;margin-right: 5px}
    .cv-template header ul li ul li a{margin-bottom: 8px}

    .cv-template .c0{padding:50px 30px}
    .cv-template .c0 h1{font-size: 3em}
    .cv-template .c0 .p30{padding:0}
    .cv-template .share.flex{display:flex;}
    .cv-template .c0 .img{margin:0}
    .cv-template .c0 .img, .cv-template #contact .img{width:100%!important;height:100%!important;text-align: center;border-radius: 0}
    .cv-template .c0 .img img, .cv-template #contact .img img{width:200px!important;height:200px!important;border-radius: 150px;margin: 30px auto}

    .cv-template .c1{margin:0;padding:60px 30px}
    .cv-template .c2 .p80{padding:60px 30px}

    .cv-template .c3 .title div,.cv-template .c3#contact .title div{position:initial;margin:0}
    .cv-template .c3 .title h2{transform: rotate(0deg)}
    .cv-template #portfolio {margin-top: 0}
    .cv-template .c3 .title{padding:30px}
    .cv-template #portfolio .img{width:100%;height:400px}

    .cv-template #contact.flex{display: flex;flex-wrap: wrap;flex-direction: column-reverse}
    .cv-template #contact.flex > div{width:100%}
    .cv-template #contact .p80{padding:0 30px 40px}
    .cv-template #contact .p60{padding:0 30px}
    .cv-template .c0 .img, .cv-template #contact .img{height:auto!important}

    .cv-template form{margin-top: 30px}
    .cv-template form .flex input{width:100%!important}

    .cv-template footer{padding:30px}
    .cv-template footer .flex{display:flex;flex-wrap: wrap;justify-content: start}
    .cv-template footer a{margin-bottom:15px;margin-right: 15px}
    .cv-template footer a:last-child{margin-right: 0}

}