@import url('https://fonts.googleapis.com/css?family=Playfair+Display:100,200,300,400,600,700,800,900|Montserrat:100,200,300,400,600,700,800,900');
@font-face { font-family:'Century Gothic'; src:url('include/fonts/century-gothic.ttf'); } body { font-family:'Century Gothic'; width:100%; height:100%; }
    .col-act{
         padding-top:4%; 
         padding-bottom:4%; 
    }
    
    .M-logo{
        width: 10%; 
        position: relative; 
        object-fit: contain;
    }

.row{
    margin-right: 0px;
    margin-left: 0px; 
}
.form-horizontal .control-label {
    text-align: left;
    width:35%;
    font-family: 'Century Gothic';
    font-size:14px;
    font-weight: 200;
}
.form-control{
    height: 30px;
    border-radius: 0px;
}
.input{
    width:65%;
}
.big-title{
    font-family: 'Century Gothic'; 
    position: absolute;
    font-size: 20px;
    /*font-weight: 700;*/
}
.small-title{
  	font-family: 'Century Gothic'; 
  	font-size:16px; 
  	font-weight:200; 
  	font-style: italic; 
  	left: 17%;
}
.process-step .btn:focus{
    outline:none;
}

.process{
    display:table;
    width:100%;
    position:relative;
    font-family: 'Century Gothic';
}
.process-row{
    display:table-row;
}

.process-step button[disabled]{
    opacity:1 !important;
    filter: alpha(opacity=100) !important;
}
.process-row:before{
    top:13px;
    bottom:0;
    position:absolute;
    content:" ";
    width:100%;
    height:1px;
    background-color:#ccc;
    z-order:0;
}
.process-step{
    display:table-cell;
    text-align:center;
    position:relative;     
    width: 190px;
}
.process-step p{
    margin-top:4px
}

.btn-circle{
    width:25px;
    height:25px;
    font-family: 'Century Gothic';
    text-align:center;
    font-size:14px;
    border-radius:50%;
}
.btn{
    padding: 2px 4px;
}
.btn-info{
    background-color: #2e82f9; 
    border-color:#2e82f9;

}
.btn-common{
	padding: 4px 10px;
    border-radius: 0px;
    width: 120px;
    font-size: 14px;
}
.btn-common:hover{
    background-color: #ec008c;
    color:white;
    border:1px solid #ec008c;
}
.dropdown{
    padding-top: 5%;
    padding-left: 3%;   
    cursor: pointer;
}
.dropdown-menu{
    font-family: 'Century Gothic';
    left: 3%;
    padding: 0px 0;
    cursor: pointer;
}
.dropdown-menu > li > a:hover{
    font-family: 'Century Gothic';
    color:white;
    background-color: #2e82f9;
}

.col {
    display: inline-flex;
    padding: 15px;
    border: 2px solid transparent;
    color:#fff;
}

.col:focus{
  	display: inline-flex;
    padding: 15px;
  	border:2px solid white;
}

.login-btn{
    border:1px solid white;
    width:18%; 
    text-align: center; 
    background-color: transparent;
    padding: 4px 10px;
    width:120px;
}

.login-btn:hover{
    background-color: #ec008c;
    color:white;
    border:1px solid #ec008c;
}
.btn-preview{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 0px;
}
.modal{
    background: rgba(0,0,0,0.9);
}
.modal-dialog{
    width: 100%;
    height: 100%;
    margin: auto;
}

.modal-header{
    position: relative;
    border-bottom:none;
    font-family: 'Montserrat', Geneva, sans-serif;
}
.modal-header .close{
    color: white;
}
.close{
    opacity:0.7;
}
.modal-content{
    position: fixed;
    width:70%;
    height:100%;
    top:30%;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background-color: transparent;
    color: white;
    box-shadow: none;
    border:none;
    opacity: 1;
}

.step2{
    padding-top: 8%;
}

@media only screen and (max-width: 767px)
{
    .col-md-5{
        display:none;
    }
    .col-act{
         padding-top:10%; 
         padding-bottom:10%; 
    }
    .M-logo{
        width:15%;
    }
    .form-horizontal .control-label {
        width:100%;
    }
    .input{
        width: 100%;
    }
    .pull-right{
        padding-top:20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px)
{
    .col-md-5{
        display:none;
    }
    .col-act{
         padding-top:10%; 
         padding-bottom:10%; 
    }
    .M-logo{
        width:10%;
    }
    .form-horizontal .control-label {
        width:100%;
    }
    .input{
        width: 100%;
    }
    .pull-right{
        padding-top:20px;
    }
    .step2{
        padding-top: %;
    }
}
