.contents{
    width: 80%;
    max-width: 1200px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    padding-top: 40px;

}

.rigt{
    position: relative;
   margin-left: 20px;
}


.contactform{
    position: relative;
   
    width: 370px;
    padding: 5px;
    background-color: #333;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
}

.contactform .title{
    position: relative;
    margin-top: 15px;

    color: #eee;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.contactform .title.er{

    font-size: 20px;

}

.contactform .abouttext{
    position: relative;
    margin-top: 35px;
    font-size: 12px;
    color: rgba(238, 238, 238, 0.70);
    left: 50%;
    transform: translatex(-50%);
    width: 60%;
    text-align: center;
margin-bottom: 50px;
}

.select{
    margin-top: 20px;
    position: relative;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}


select{
    font-size: 1rem;
    padding: 0.5em 6em 0.5em 1em ;
    font-family: "BPG Arial Caps", sans-serif;
    background: #444444;
    color: #eee;
    outline: none;
    border: none;
    cursor: pointer;
    max-width: 313px;
}

.custom-arrow{
    position: absolute;
    display: block;
    background-color: #444444;
    height: 35px;
    width: 35px;
    top: 0;
    right: 0;
    pointer-events: none;
    cursor: pointer;
}

.custom-arrow::before{
    position: absolute;
    content: "";
    height: 2px;
    background-color: #999999;
    width: 40%;
    margin-left: 15px;
    top: 45%;
    left: -30.6%;
    transform: rotatez(45deg);
}


.custom-arrow::after{
    position: absolute;
    content: "";
    height: 2px;
    background-color: #999999;
    width: 40%;
    margin-left: 15px;
    top: 45%;
    left: -3%;
    transform: rotatez(-45deg);
}




.namecont{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    max-width: 313px;
    padding: 0.5em 6em 0.5em 1em ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
}

.lastnamecont{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    max-width: 313px;
    padding: 0.5em 6em 0.5em 1em ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
}




textarea{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    max-width: 300px;
    padding: 6.5px ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
    resize: vertical;

}


.btns{
    position: relative;
    width: 313px;
    display: flex;
    justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}



.btns .cancel{
    position: relative;
    padding: 0.7em 2em 0.7em 2em ;
    font-size: 1rem;
    color: #eee;
    
    background: #C62121;
}





.btns .accept{
    position: relative;
    padding: 0.7em 2em 0.7em 2em ;
    font-size: 1rem;
    color: #eee;
    background: #006A4E;
}

.information{
    position: relative;
    margin-top: 40px;
}

.information li{
    position: relative;
    color: #333;
    margin-left: 30px;
}

.lineinfo{
    position: relative;
    display: flex;
flex-wrap: nowrap;
}

.image{
    position: relative;
    left: 0;
    width: 30px;
}


.information{
    position: relative;
    top: 60px;
}

.lineinfo .image::after{
    position: absolute;
    content: "";
    height: 100px;
    background-color: #999999;
    width: 2px;
    margin-left: 20px;
    top: 50%;
    transform: translateY(-50%);
}


.image img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.mapfull{
 position: fixed;
 width: 80vw;
 height: auto;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 z-index: 1000;
}


/* 1284 */



@media screen and (min-device-width: 0px) and (max-device-width: 1284px){
  
.map{
    width: 90%;
}


}






@media screen and (min-device-width: 0px) and (max-device-width: 781px){
  
    .contents{
        flex-wrap: wrap;
        width: min-content;
    }

    .map{
        position: relative;
        margin-top: 50px;
        width: 100%;
    }

    .mapfull{
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0%) translateX(0%);
    }

}





@media screen and (min-device-width: 0px) and (max-device-width: 378px){
  
  
.contactform{
    position: relative;
   
    width: 300px;
    padding: 5px;
    background-color: #333;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
}

select{
    margin-top: 20px;
    position: relative;

    width:90%;
    left: 50%;
    
    transform: translateX(-50%);
}
.custom-arrow{
    height: 35px;
    top: 20px;
    right: 15px;
}

.namecont{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    width: 58%;
    padding: 0.5em 6em 0.5em 1em ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
}


.lastnamecont{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    width: 58%;
    padding: 0.5em 6em 0.5em 1em ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
}



textarea{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    width:  90%;
    padding: 6.5px ;
    font-size: 1rem;
    background-color: #444444;
    color: #eee;
    outline: none;
    border: none;
    font-family: "BPG Arial Caps", sans-serif;
    resize: vertical;

}




}