﻿
.form { 
    background: #fff;
    /*border: 1.5px solid;*/
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-color: #cccccc;
    border-radius: 2px;
    padding: .5em;  
    /*padding: 20px ;  
    border: 1px solid #cccccc; 
    position:relative;
    background-color:#fff;*/
    /*box-shadow: 1px 1px 8px rgba(4, 4, 4, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    */

    box-shadow:0 20px 20px -20px rgba(0, 0, 0, 0.6);    
}


/*@media (max-width: 480px) {
    .form {
        margin: 1em !important;
    }
}*/

.form h3, .grid h3 {  
    color: #2C3E50;
    font-size: 1.5em;
    text-align: center;
    width: auto;
    margin: .5em 0;
}

    .form h1 {
        color: #053460;
    font-size: 1.9em;
    text-align: center;
    width: auto;
    margin: .5em 0;
    }

.form label, .grid label {  
    cursor: pointer;
    display: block; 
    margin-bottom: 0.1875em;
    text-align: left;
    /*white-space: nowrap;*/ 
    font: bold .85em/1em Arial, Helvetica;
}


.input {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; 
}

.input__text, .input__select {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
     

}
 

.input__button { 
    background: rgba(147,128,108,.15);
    font: inherit;
    font-weight: 400;
    cursor:pointer;
}

.input__text, .input__button {
    border: 1px solid rgba(18, 18, 17, 0.25);
    /*padding: 0.30em;*/

}
 


input[type="text"]:disabled, [disabled="disabled"], select[disabled="disabled"] {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ede9e9 !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
} 


.form input[type="text"],
.form input[type="password"],
.form input[type="date"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="month"],
.form input[type="week"],
.form input[type="email"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="time"],
.form input[type="url"],
.form textarea,  .form select,
.grid input[type="text"],
.grid input[type="password"],
.grid input[type="date"],
.grid input[type="datetime"],
.grid input[type="datetime-local"],
.grid input[type="month"],
.grid input[type="week"],
.grid input[type="email"],
.grid input[type="number"],
.grid input[type="search"],
.grid input[type="tel"],
.grid input[type="time"],
.grid input[type="url"],
.grid textarea,  .grid select {
    background-color: white;
    font-family: inherit;
    border: 1px solid #c3c0c0; 
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 0.875em; 
    padding: 0.5em;
    height: 2.3125em;
    width: 100%;  
    vertical-align:middle;
}

 
 

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus, select:focus {
    background: #f2f1f1;  
}
 
 
 

/*MEDIA*/

.media {
    width: 200px;
    height: 200px; 
    margin: 0 auto;
     z-index:100;
     text-align: center;
}

.media--left {
    float: left;
}

.media__element {       
    width:100%;
    max-width:100%; 
    text-align:center;
}

.media__text {
    text-align:center;
}
  

/*.media img{ 
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out; 
}

.media img:hover {border-color:#5e5223;background:#e0d8b7;border-width:1px;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}*/
 
    
.media img {
    width: 310px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.media--transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}