/*
ALL TARGER
*/

body{
    color: #707070;
    margin: 0; 
    font-family: sans-serif;
    font-size: 0.9em;
}

h1{
    margin: 0;
    padding: 0
}

h3{
    color: #282222
}

br{
    display: none;
}

*{
    box-sizing: border-box;
}

/*  
HIDDEN MENU 
*/
 
.main-menu, .try{
    display: none;
}

.mbtn{
    position: absolute;
    right: 0;
    top: 0;
    padding: 54px 0;
    width: 25%;
    text-align: center;
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
}

/*
NAVIGATION BAR
*/

nav{
    position: fixed;
    width: 100%;
    height: 140px;
    margin: 0;
    padding: 0;
    top:0;
    background-color: #353535;
}

.upper li{
    display: inline-block;
    width: 50%;
    margin-left: -3px;
    text-align: right
}

.upper .right-li{
    text-align: left;
    border-left: solid 1px white;
}

nav img{
    width: 228px;
    height: 96px;
    display: block;
    margin: 20px 0
}

.main-menu{
    padding: 5px;
    background:  #4d4d4d;
    width: 100%;
    color:white;
    margin-top: 0;
}

#menu li{
    list-style-type: none;
    padding: 5px;
}

#menu ul{
    text-align: center;
    padding: 0
}

#menu ul a{
    text-decoration: none;
    color: white;
    width: 100%;
    display: block;
}
 
/*
HEADER MAIN
*/

.header{
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}

.headerCompany{
    margin-top: 140px;
    background-image: url(ob1.jpg);
}

.headerServices{
    margin-top: 140px;
    background-image: url(ob2.png);
}

.head{
    max-width: 358px;
    padding: 40px 20px;
    margin: 0 auto 0 0 ;
    color: white;
}

.head h1,.head p{
    padding: 0;
    margin: 0;
    text-shadow:  2px 0 3px rgba(0,0,0, .4);
    line-height: 1.2em;
}

.head h1{
    font-size: 1.7em;
    line-height: 1.2em;
}

/*
SELECTOR MAIN
*/

.selector2 h1{
    text-align: center;
}

.selector1{
    color: #707070;
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid grey;
}

.selector2{
    display: flex;
    padding: 20px;
    border-bottom: solid 1px grey;
    justify-content: center;
}

.selector1 p,
.selector2 p{
    line-height: 1.2rem;
    color: #4b4b4b
}

.selector2 li{
    color: red;
}

/*
COLUMN MAIN
*/

.colone{
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.colone div{
    padding: 20px 0;
}

.colone p{
    line-height: 1.2rem;
}

.link{
    display: block;
    background-color: #282828;
    color: white;
    text-decoration: none;
    padding: 16px 25px;
    width: 72%;
    margin: auto;
}

/*
FORM MAIN
*/

form{
    width: 86%;
    margin: 0 auto;
}

input{
    width: 70%;
    height: 49px;
    margin: 10px 0;
    float: right
}

label{
    margin: 25px 0; 
    width: 30%;
    vertical-align: central;
    font-size: .8rem;
    float: left
}

label[for="name"]{
    float: left;
    margin: 17px 0;
}

#send{
    background-color: #e32528;
    border: 0;
    width: 50%;
    color: white;
    font-size: 17px;
    float: right
}

textarea{
    float: right;
    width: 70%;
    min-height: 156px;
    margin: 10px 0;
}

.right{
    padding-top: 10px;
    width: 85%;
    margin: auto;
}

.area{
    vertical-align: top;
    margin-top: 20px;
}

#info br{
    display: block

}

#info{
    background: #282828;
    color: white;
    padding: 20px;
}

.mp-icons{
    vertical-align: bottom;
}

.mp-icons,
.text-icons{
    display: inline-block;
}

.text-icons div{
    height: 30px;
    text-align: center;
    padding: 10px 0 0 10px;
    margin-bottom: 13px
}

div .mldown{
    padding-top: 10px;
    margin-bottom: 0;
    text-decoration: underline;
}

.num{
    font-weight: bold;
}

/*
FOOTER MAIN
*/

.last{
    background-color: #282828;
    padding:  24px 0;
    text-align: center;
    font-size: 14px;
    color: white
}

/*
RESPONSIVE MAIN
*/

/*
FOR TABLET SCREEN
*/
@media only screen and (min-width:700px){

/* all */
    body{
        font-size: 1rem
    }

    br{
        display: block
    }
    
/* menu */ 

    .main-menu{
        width: 200px;
        margin-left: auto ;
    }
    
/* columns */

    .colone{
        flex-direction: row;
        flex-wrap: wrap;
        width: 80%;
        margin: 0 auto;
        vertical-align: bottom
    }

    .colone div{
        flex-basis: 50%;
    }

    .colone p{
        min-height: 100px;
        padding: 20px 0;
        margin: 0;
    }

    .colone h3{
        margin: 20px 0 0;
    }

    .setMinHeight{
        min-height:  154px !important
    }
    
/* selectors */

    .selector2{
        width: 100%
    }

    .selector2 h1{
        text-align: center;
        width: 100%;
        min-width: 700px
    }

    .col{
        display: inline-block;
        width: 50%;
        margin-left: -5px;
        vertical-align: top;
    }
/* form */

    .php{
        display: inline-block;
        width: 50%;
        margin-right: -5px
    }

    .right{
        display: inline-block;
        width: 50%;
        vertical-align: top;
        padding-left: 10%
    }

    .mp-icons{
        display: inline-block
    }

    .contact{
        padding-left: 49px;
        padding-bottom: 50px
    }

    .contact p {
        margin: 0
    }

}

/*
FOR PC SCREEN
*/

@media only screen and (min-width:930px) {
    
/*hide menu*/
    
    .try{
        display: block
    }
    
    .main-menu{
        visibility: hidden
    }
    
/*spaceing*/

    .head,
    .space{
        max-width: 1024px;
        margin: 0 auto;
    }
    
/*big menu*/

    #show{
        display: none;
    }

    nav li,
    #menu,
    nav img,
    .try{
        display: inline-block;
        background: none;
    }

    nav ul{
        display: flex;
        margin: 0
    }

    .try{
        padding: 35px 0;
        height: 130px;
        width: 100%;
        background: none;
    }

    .bigmenu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 2px
    } 

    .upper{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 10px;
        margin-right: 0;
    }

    .upper li{
        width: auto;
        height: 25px;
        padding: 0;
        margin: 0;
        border-bottom: 2px red
    }

    .mtext li{
        padding: 0;
        margin: 10px 30px;
        margin-right: 0;
        border-bottom: 2px red
    }

    .mtext a{
        padding: 10px 0
    }
    
    #menu a:hover{
        border-bottom: solid;
        transition: 100ms
    }
    
/*header*/

    .header{
        height: 650px;
        background-size: 100% 100%;
        font-size: 1.5rem;
        line-height: none;
    }
    
    .head{
        padding-top: 190px
    }
    
/*selections*/

    .selector2,
    .selector1{
        padding: 40px 0;
    }
    
    .selector1,
    .selector2 p{
        font-size: 1.2rem;
        width: 100%
    }
    
    
/*columns*/  

    .colone div{
        flex-basis: 33.333%;
    }

    .colone{
        width: 100%;
        padding: 40px 0;
        margin: 0;
    }
    
/*form*/

    #info{
        padding: 40px 0;
    }
    
    label{
        font-size: 1rem
    }
    
    .right{
        padding-left: 25%;
        font-size: 1.05rem
    }

/*row order*/
    
    .row1{
        order: 1
    }
    .row2{
        order: 2
    }
    .row3{
        order: 3
    }
    .row4{
        order: 4
    }
    .row5{
        order: 5
    }
    .row6{
        order: 6
    }
    
}

/*
CLEARFIX
*/

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*
Fixed navmenu scroll fix
*/

.anchor{
  display: block;
  height: 140px; /*same height as header*/
  margin-top: -140px; /*same height as header*/
  visibility: hidden;
}

tool:active{
    color: red
}


.upper .activebtn{
    color: #ff3333;
}