@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
        
body{
    background:#4281A4;
}
h3{
    font-family: 'Roboto', sans-serif;
}
xmp{
    font-family: 'Roboto', sans-serif;
    font-size:20px;
}
.container{
    height:100%;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.logo{
    position: absolute;
    left:50%;
    margin-left:-100px;
    top:30px;
}
.contents{
    width:320px;
    height:auto;
    border:solid 5px #fff;
    padding:15px;
    border-radius:20px;
    margin-top:-10%;
}
.contents h3{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color:#21313c;
    font-size:22px;
    margin:0px 0px 20px 120px;
}
.links{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
}
.links a{
    color:#FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size:30px;
    transition:.3s;
    text-decoration: none;
}
.links a:hover{
    transform: scale(1.3);    
    color:#7EE081;
}
.close{
    position:absolute;
    top:15px;
    right:15px;
    cursor:pointer;
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:26px;
}
.finalproj{
    position:absolute;
    left:20%;
    bottom:15%;
}
.finalproj a img{
    transition:.3s;
}
.finalproj:hover a img{
    transform:scale(1.05);
}
.vid{
    position:absolute;
    right:20%;
    bottom:15%;
}
.vid a img{
    transition:.3s;
}
.vid:hover a img{
    transform:scale(1.05);
}
.proj{
    position:absolute;
    left:50%;
    bottom:15%;
    margin-left:-100px;
}
.proj a img{
    transition:.3s;
}
.proj:hover a img{
    transform:scale(1.05);
}
.frm input, .frm textarea{
    border-radius:15px;
    width:185px;
    padding:15px;
    font-family: 'Roboto', sans-serif;
    background-color:white;
    border:none;
    font-weight:bold;
    transition:border 0.3s, width 0.3s;
}
.frm input:focus, .frm textarea:focus{
    border:solid 2px black;
    width:200px;
}
.frm input[type=submit]{
    width:100px;
    transition:border 0.3s, width 0.3s;
}
.frm input[type=submit]:hover{
    cursor:pointer;
    border:solid 2px black;
}
.frm textarea{
    height:100px;
}
.g-recaptcha {
    transform:scale(0.74);
    transform-origin:0 0;
}

.contact{
    position:fixed;
    top:0px;
    left:100%;
    z-index:1000;
    height:0%;
    width:400px;
    background-color: rgba(0,0,0,0.5);
}
.closeEmail{
    position:absolute;
    top:23px;
    right:130px;
    color:white;
    cursor:pointer;
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:22px;
    z-index:1020;
    text-shadow:2px 2px black;
}
.contact h3{
    font-family: 'Roboto', sans-serif;
    color:white;
    font-size:23px;
    text-shadow:2px 2px black;
}
.email{
    position: absolute;
    top:20px;
    left:20px;
    cursor:pointer;
    transition:0.3s
}
.email:hover{
    transform:rotate(5deg);
}
.book{
    position: absolute;
    top:20px;
    left:120px;
    cursor:pointer;
    transition:0.3s
}
.book:hover{
    transform:rotate(5deg);
}
.zoom{
    position: absolute;
    top:20px;
    left:220px;
    cursor:pointer;
    transition:0.3s
}
.zoom:hover{
    transform:rotate(5deg);
}
.success,.fail{
    position: fixed;
    left:100%;
    top:50%;
    margin-top:-40px;
}
.success img, .fail img{
    z-index: 1050;
}
/*****MOBILE*****/
@media(max-width:1160px){

h3{
    font-family: 'Roboto', sans-serif;
}
xmp{
    font-family: 'Roboto', sans-serif;
    font-size:20px;
}
.container{
    position:relative;
    width: 100%;
    justify-content: center;
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 390px 100px 100px 100px;
    grid-row-gap: 20px;
    grid-template-areas: "content" "finalp" "video" "files"; 
}
.contents{
    grid-area:content;
    width:290px;
    position:absolute;
    left:50%;
    border:solid 5px #fff;
    padding:15px;
    border-radius:20px;
    margin-top:100px;
    margin-left:-160px;
}
.contents h3{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color:#21313c;
    font-size:20px;
    margin:0px 0px 20px 110px;
}
.contents img{
    height:140px;
}
.links{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
}
.links a{
    color:#FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size:30px;
    transition:.3s;
    text-decoration: none;
}
.links a:hover{
    transform: scale(1.3);    
    color:#7EE081;
}
.close{
    position:absolute;
    top:15px;
    right:15px;
    cursor:pointer;
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:26px;
}
.finalproj{
    grid-area:finalp;
    position:absolute;
    left:50%;
    margin-left:-100px;
}
.finalproj a img{
    transition:.3s;
}
.finalproj:hover a img{
    transform:scale(1.05);
}
.vid{
    grid-area:video;
    position:absolute;
    left:50%;
    margin-left:-100px;
}
.vid a img{
    transition:.3s;
}
.vid:hover a img{
    transform:scale(1.05);
}
.proj{
    grid-area:files;
    position:absolute;
    left:50%;
    margin-left:-100px;
}
.proj a img{
    transition:.3s;
}
.proj:hover a img{
    transform:scale(1.05);
}
    
}