﻿.inner{
	
	padding: 15px;
}
.inner h2:first-of-type{
	    margin:0;
	    color: #2083CC;
	    position:relative;
	    top:-10px;
	    text-align: center;
	    padding: 10px 0;
}

.inner h2
{
    text-align:center;
}
.inner input,select{
	padding: 8px;
    margin: 7px;
    width: 85%;
    -ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box; 
	box-sizing:content-box;
	border:1px solid #ccc;
} 


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
input[type=file]{
	width: 85%;
}

textarea
{
    padding: 10px;
    margin: 7px 7px 0 7px;
    width: 85%;
    height: 100px;
    resize: none;
     -ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box; 
	box-sizing:content-box;
	border:1px solid #ccc;
}
.con-tarea > textarea{
	padding: 10px;
    width: 94%;
    height: 100px;
    resize: none;
     -ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box; 
	box-sizing:content-box;
	border:1px solid #000;
}
input[type=submit]{
	width: 35%;
    background-color: green;
    border: none;
    border-radius: 5px;
    color: white;
    box-shadow: 3px 5px 13px grey;
    padding: 6px;
    cursor: pointer;
    transition: all .3s;
    margin-top
    }
    input[type=submit]:hover{
	
    background-color: black;
    }

    .inner span{
    	margin-left: 3%;
    }
.button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } 
#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } 
#jobapplication 
{
     min-height: 698px;
    width: 23%;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    z-index: 9999;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    } 
#event { min-height: 698px;
    background: white url("login.png") no-repeat scroll 0 0;
    border: 5px solid #cccccc;
    border-radius: 10px;
    display: none;
    left: 40%;
    margin: 0 auto;
    position: fixed;
    top: 135px;
    width: 23%;
    z-index: 1000;
    } 
#jobapplication:target, #jobapplication:target + #cover{ display:block; opacity:2; } 
#event:target, #event:target + #cover{ display:block; opacity:2; } 

.cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold;cursor:pointer; } 

.element text1:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}  
input:focus,textarea:focus,select:focus { 
    background-color: #E4F3FF;
    border-style: solid;
    border-color: #237ABB;
    transition: 1s;
}

@media (max-width: 1024px){
	#jobapplication {
    min-height: 720px;
    width: 50%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
     margin-top: -48%;
     left:25%;
}
	#event {
    min-height: 720px;
    width: 50%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    margin-top: -48%;
    left:25%;
}
}



@media screen and (max-width: 800px){
	#jobapplication {
    min-height: 698px;
    width: 80%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    left:10%;
}

	#event {
    min-height: 698px;
    width: 80%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    left:10%;
}
input[type=file]{
	width: 85%;
}
}
@media (max-width: 580px){
	#jobapplication {
    min-height: 836px;
    width: 80%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    margin-top: -122%;
}
	#event {
    min-height: 836px;
    width: 80%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    margin-top: -122%;
}
input[type=file]{
	width: 90%;
}


}

@media (max-width: 480px){
	#jobapplication {
    min-height: 690px;
    width: 95%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    margin-top: -152%
}
#event {
    min-height: 690px;
    width: 95%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
    margin-top: -152%
}
input[type=file]{
	width: 90%;
}

}
@media screen and (max-width: 360px)
{
	#jobapplication 
	{
        min-height: 690px;
        width: 95%;
        left:2%;
        z-index: 10;
        display: none;
        background: url(login.png) no-repeat;
        border: 5px solid #cccccc;
        border-radius: 10px;
        background-color: white;
        margin-top: -10%;
    }

    #jobapplication h2:first-of-type
    {
        font-size:25px;
        margin-top:0;
    }

    #jobapplication .inner input,
    #jobapplication .inner textarea
    {
        border:1px solid #ccc;
    }
    
    #event 
	{
        min-height: 690px;
        width: 95%;
        left:2%;
        z-index: 10;
        display: none;
        background: url(login.png) no-repeat;
        border: 5px solid #cccccc;
        border-radius: 10px;
        background-color: white;
         margin-top: -10%;
    }

    #event h2:first-of-type
    {
        font-size:25px;
        margin-top:0;
    }

    #event .inner input,
    #event .inner textarea
    {
        border:1px solid #ccc;
    }
    input[type=file]
    {
	    width: 85%;
    }
    
    input[type=submit]
    {
	    padding:5px;
	    font-size:14px;
    }
#a
{
    display:none;
}
}
@media (max-width: 320px){
	#jobapplication {
    min-height: 690px;
    width: 95%;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
     margin-top: -10%;
}
input[type=file]{
	width: 90%;
}

.con-tarea > textarea{
    width: 86%;
	
}
#a
{
    display:none;
}

}
@media (max-width: 280px){
	#jobapplication {
    min-height: 690px;
    width: 95%;
    margin: 0 auto;
    position: fixed;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
     margin-top: -391%;
}

	#event {
    min-height: 690px;
    width: 95%;
    margin: 0 auto;
    position: fixed;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
    background-color: white;
   margin-top: -391%;
     
     
}
input[type=file]{
	width: 90%;
}
.eventbtn
{
    display:none;
}

}