/*=========================================
            320px RESPONSIVE
=========================================*/


/*-------------------------
        HEADER
--------------------------*/

header{
	min-height:60px;
	padding:5px 10px;
	align-items:center;
}

header > div{
	width:100%;
	padding-top:0px;
	align-items:center;
}

header > div img{
	width:40px;
	height:auto;
}

header > div h5{
	font:500 16px poppins_semibold;
	padding:2px 0px 0px 10px;
	line-height:16px;
	text-align:center;
}

header > div h5 > p{
	font:400 10px notosans;
}

header > div figure{
position:relative;
top:5px;
}


/*-------------------------
      DESKTOP MENU
--------------------------*/

nav#menu{
	display:none;
}


/*-------------------------
      ACTION BUTTON
--------------------------*/

div#action_div{
	display:none;
}


/*-------------------------
    MOBILE MENU ICON
--------------------------*/

div#mobile_menu_icon{
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	width:42px;
	height:42px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:8px;
	background:rgb(232,178,71);
	cursor:pointer;
}

div#mobile_menu_icon svg{
	width:22px;
	height:22px;
	color:black;
}

/*-------------------------
      MOBILE MENU
--------------------------*/

nav#mobile_menu{
	position:fixed;
	top:0px;
	right:-100%;
	width:240px;
	height:100vh;
	background:white;
	display:flex;
	flex-direction:column;
	padding-top:65px;
	box-shadow:-5px 0px 25px rgba(0,0,0,.15);
	transition:.35s;
	z-index:9999;
}

nav#mobile_menu.active{
	right:0px;
}

nav#mobile_menu a{
	display:flex;
	align-items:center;
	gap:12px;

	padding:18px 20px;

	text-decoration:none;

	font:14px notosans;

	color:#222;

	border-bottom:1px solid rgb(240,240,240);
	transition:.2s;
}

nav#mobile_menu a svg{
	width:18px;
	height:18px;
}

nav#mobile_menu a:hover{
	color:rgb(232,178,71);
	background:rgb(248,248,248);
}

div#action_div p{
display:none;
padding:auto;
align-item:center;
justify-content:center;
width:100%;
text-align:center;
margin-top:30px;
}

/*---------------hero---------------*/
div#hero_section{
height:500px;
/*border:1px solid red;*/
}

div#slider figure img{
position:relative;
top:-10px;
display:block;
height:100%;
width:100%;
object-fit:cover;
}

div#hero_info_wrapper > div:nth-child(1){
position:relative;
padding:10px 0px 0px 10px;
}

div#hero_info_wrapper > div:nth-child(1) h5{
font:14px notosans;
color:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(1) h2{
font:32px Playfair;
color:rgb(255,255,255);
}

div#hero_info_wrapper > div:nth-child(1) span{
display:block;
height:2px;
width:100px;
background:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(1) h4{
font:48px Playfair;
color:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(2){
position:absolute;
width:100%;
height:200px;
right:0px;
left:0px;
bottom:0px;
box-sizing:border-box;
}

#designer_model_div{
padding:20px 4%;
background:#faf9f7;
}

/*-----------------*/
/*-------------------------
    DESIGNER / MODEL
--------------------------*/

#designer_model_div{
	padding:50px 15px;
}

#designer_model_div h4{
	font-size:1.6rem;
	margin-bottom:45px;
}

#designer_model_div h4::after{
	width:60px;
}

#designer_model_div h4::before{
	width:8px;
	height:8px;
}


/*-------------------------
      CONTAINER
--------------------------*/

.portal_container{
	flex-direction:column;
	gap:20px;
}


/*-------------------------
         CARD
--------------------------*/

.portal_card{
	flex-direction:column;
	align-items:center;
	text-align:center;

	padding:30px 20px;

	gap:20px;
}


/*-------------------------
         ICON
--------------------------*/

.portal_icon{
	width:75px;
	height:75px;
}

.portal_icon svg{
	width:35px;
	height:35px;
}


/*-------------------------
        CONTENT
--------------------------*/

.portal_content{
	align-items:center;
}

.portal_content h3{
	font-size:1.45rem;
	margin-bottom:10px;
}

.portal_content span{
	width:70px;
	margin-bottom:18px;
}

.portal_content p{
	width:100%;
	font-size:14px;
	line-height:26px;
	margin-bottom:25px;
}


/*-------------------------
         BUTTON
--------------------------*/

.portal_btn{
	width:100%;
	justify-content:center;
	padding:14px 0px;
	font-size:14px;
}


/*-------------------------
   BACKGROUND IMAGE
--------------------------*/

.portal_bg{
	right:-20px;
	top:50%;
	transform:translateY(-50%);
	opacity:.05;
}

.portal_bg img{
	width:120px;
}


/*-------------------------
         FOOTER
--------------------------*/

#footer{
	padding-top:50px;
}


/*-------------------------
     FOOTER CONTAINER
--------------------------*/

.footer_container{
	width:90%;
	flex-direction:column;
	gap:40px;
}


/*-------------------------
     FOOTER SECTION
--------------------------*/

.footer_section{
	width:100%;
	align-items:center;
	text-align:center;
}

.footer_section h2{
	font-size:1.6rem;
	margin-bottom:15px;
}

.footer_section h3{
	font-size:1.2rem;
	margin-bottom:15px;
}

.footer_section p{
	font-size:14px;
	line-height:25px;
	margin-bottom:20px;
}


/*-------------------------
      QUICK LINKS
--------------------------*/

.footer_section ul{
	width:100%;
}

.footer_section ul li{
	margin-bottom:12px;
}

.footer_section ul li a{
	display:block;
	padding:5px 0px;
	font-size:14px;
}

.footer_section ul li a:hover{
	padding-left:0px;
}


/*-------------------------
        SOCIALS
--------------------------*/

.footer_socials{
	justify-content:center;
}

.footer_socials a{
	width:42px;
	height:42px;
}

.footer_socials svg{
	width:18px;
	height:18px;
}


/*-------------------------
     WHATSAPP BUTTON
--------------------------*/

.whatsapp_btn{
	width:100%;
	justify-content:center;
	padding:15px 0px;
	font-size:14px;
}


/*-------------------------
      FOOTER BOTTOM
--------------------------*/

.footer_bottom{
	margin-top:45px;
	padding:20px 15px;

	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:10px;

	text-align:center;
}

.footer_bottom p{
	font-size:12px;
	line-height:20px;
}

.footer_bottom strong{
	display:block;
	margin-top:3px;
}
/*----------------checker page---------------*/
div#checker_body_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:734px;
box-sizing:border-box;
}

div#checker_content_wrapper{
position:relative;
min-height:480px;
/*border:1px solid red;*/
padding:0px 0px 0px 0px;
}

div#checker_div{
width:99%;
height:180px;
margin:5px auto auto auto;
background:white;
/*box-shadow:0px 0px 10px rgba(100,100,100,.2);*/
border-radius:5px;
box-sizing:border-box;
/*border:1px solid red;*/
}

div#checker_div > h5{
text-align:center;
font:16px notosans;
margin:0px auto 30px auto;
background:#FFF455;
padding:5px;
color:black;
width:90%;
box-sizing:border-box;
border-radius:25px;
}

div#checker_div form{
width:95%;
margin:auto;
}

div#student_id_div{
position:relative;
height:50px;
border:1px solid rgb(200,200,200);
border-radius:5px;
box-sizing:border-box;
padding:2px;
}

div#student_id_div input{
display:block;
height:100%;
width:100%;
box-sizing:border-box;
border:0px;
padding:5px 0px 5px 10px;
font:16px notosans;
}

div#student_id_div label{
position:absolute;
top:12px;
left:10px;
font:16px notosans;
color:rgb(100,100,100);
transition:.3s all;
}

div#submit_div{
position:relative;
margin:10px 0px 0px 0px;
height:40px;
}

div#submit_div input[type="submit"]{
display:block;
height:100%;
width:100%;
cursor:pointer;
background:black;
color:white;
border:0px;
font:16px roboto_regular;
border-radius:5px;
}

div#checker_bg{
position:absolute;
padding:10px;
width:37%;
margin:auto;
width:200px;
left:50%;
transform:translateX(-50%);
/*border:1px solid red;*/
z-index:5;
display:none;
}

div#checker_bg img{
display:block;
margin:auto;
}

div#display_designer_info{
position:relative;
width:90%;
padding:10px 0px 20px 0px;
margin:0px auto 0px auto;
/*border:1px solid red;*/
box-sizing:border-box;
}

div#name_card{
display:flex;
flex-wrap:wrap;
padding:10px 0px 5px 20px;
border:1px solid rgb(200,200,200);
border-radius:5px;
width:100%;
margin:auto;
}

div#name_card figure{
/*border:1px solid red;*/
width:130px;
margin:auto;
}

div#name_card figure img{
display:block;
margin:auto;
}

div#name_card h2{
font:bold 16px rubik;
text-align:center;
margin:0px 0px 10px 0px;
text-transform:uppercase;
}


div#name_card > div{
/*border:1px solid red;*/
padding:0px 10px 0px 5px;
width:98%;
}

div#card_info  > div{
display:flex;
margin:0px 0px 2px 0px;
padding:2px;
}

div#card_info  > div:not(div#card_info  > div:last-of-type){
border-bottom:1px solid rgb(240,240,240);
}

div#card_info  > div > h5{
font:bold 14px notosans;
margin:0px 0px 0px 0px;
}

div#card_info  > div > p{
font:14px notosans;
padding:0px 0px 0px 5px;
}

div#fetch_models_wrapper{
position:relative;
margin:10px 0px 0px 0px;
}

div#fetch_models_wrapper h3{
font:bold 16px rubik;
}

div#designer_model_pair_wrapper{
position:relative;
/*border:1px solid red;*/
margin:10px 0px 0px 5px;
max-height:200px;
overflow:scroll;
}


div.designer_model_pair{
margin:0px 0px 15px 0px;
box-sizing:border-box;
padding:10px;
position:relative;
box-shadow:0px 0px 8px rgba(150,150,150,.3);
margin:0px auto 20px auto;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
width:98%;
}

div.designer_model_pair > div{
box-sizing:border-box;
height:50px;
width:100%;
padding:5px 0px 20px 20px;
}

div.designer_model_pair > div h5{
font:bold 14px notosans;
}

div.designer_model_pair > div p{
font:14px notosans;
}

div.model_name_data{
width:100%;
padding-bottom:10px;

border-bottom:1px solid rgb(240,240,240);
}

div.designer_model_pair > div:not(div.model_name_data){
width:100%;
margin:0px 5px;
border:0px;
border-bottom:1px solid rgb(240,240,240);
}

div.designer_model_pair > div:is(div.div_phone){
border:0px;
}

div.designer_model_pair span{
display:block;
position:absolute;
z-index:5;
width:20px;
height:20px;
border-radius:50%;
background:black;
color:white;
text-align:center;
font:12px roboto_regular;
box-sizing:border-box;
padding:3px 0px 0px 0px;
left:5px;
top:5px;
}

a.back_home{
width:100px;
height:40px;
display:block;
margin:20px auto auto auto;
/*border:1px solid red;*/
background:url('../images/return_arrow.png') no-repeat;
padding:3px 0px 0px 30px;
text-decoration:none;
font:16px roboto_regular;
color:black;
}

.err_msg{
padding:5px 20px 5px 20px;
background:#FFC0CB;
text-align:center;
border-radius:5px;
color:rgb(50,50,50);
font:16px notosans;
}

.table_err_msg{
padding:5px;
background:#FFC0CB;
text-align:center;
color:rgb(50,50,50);
font:16px notosans;
margin:10px 0px 0px 0px;
border-radius:25px;
}

/*--------- model checker page--------*/
div#model_check_designer_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:733px;
box-sizing:border-box;
}

div#checker_designer{
position:relative;
width:95%;
margin:1% auto auto auto;
min-height:180px;
border:1px solid rgb(240,240,240);
padding:10px 10px 20px 10px;
box-sizing:border-box;
}

div#checker_designer h2{
text-align:center;
font:16px notosans;
margin:0px auto 5px auto;
background:#FFF455;
padding:5px;
color:black;
width:90%;
box-sizing:border-box;
border-radius:25px;
}

form#model_serach_designer_form{
display:block;
width:95%;
margin:auto;
position:relative;
top:20px;
font:14px notosans;
}

form#model_serach_designer_form div#model_name_find{
position:relative;
border:1px solid rgb(200,200,200);
border-radius:5px;
padding:2px;
}

div.finder_str{
height:40px;
margin:0px 0px 10px 0px;
}

form#model_serach_designer_form div#model_name_find label{
display:block;
position:absolute;
top:10px;
left:10px;
transition:.8s all;
}

form#model_serach_designer_form div#model_name_find input{
position:relative;
display:block;
width:100%;
height:100%;
box-sizing:border-box;
border:0px;
padding:5px 0px 5px 10px;
}

form#model_serach_designer_form input[type='submit']{
display:block;
background:black;
color:white;
border:0px;
height:100%;
width:100%;
cursor:pointer;
border-radius:5px;
}

.moveUp{
transform:translateY(-35px);
}

.moveDown{
transform:translateY(0px);
}

div#model_name_suggest{
position:relative;
/*border:1px solid red;*/
margin:0px 0px 0px 0px;
}

div#model_name_suggest ul{
position:relative;
list-style:none;
display:block;
padding:0px 0px 10px 0px;
}

div#model_name_suggest ul li{
/*border:1px solid red;*/
margin:0px 0px 10px 0px;
padding:2px;
}

div#model_name_suggest ul li label{
position:relative;
display:flex;
gap:20px;
font:16px notosans;
/*border:1px solid red;*/
}

div#model_name_suggest ul li > span{
display:block;
}

div#model_name_suggest ul li label > span.model_name_checkbox{
display:block;
height:20px;
width:20px;
position:absolute;
cursor:pointer;
background:rgb(240,240,240);
border-radius:50%;
}

div#model_name_suggest ul li label > input{
position:absolute;
left:0px;
top:0px;
border:0px;
opacity:0;
}

div#model_name_suggest ul li label > input:checked + span.model_name_checkbox{
background:url('../images/check.png') no-repeat center;
border:0px;
}

span.name_text{
cursor:pointer;
margin:0px 0px 0px 25px;
display:block;
width:90%;
}

.nameSuggestDrop{
height:100px;
box-sizing:border-box;
margin:0px 0px 10px 0px;
padding:10px 10px 20px 0px;
overflow:scroll;
}

.norm{
height:0px;
margin:0px;
padding:0px;
}

div#fetch_design_infos{
position:relative;
}

div#fetch_design_infos h3{
font:bold 16px rubik;
margin:10px 0px 10px 0px;
}

div#display_found_designers{
position:relative;
margin:10px auto 0px auto;
width:90%;
box-sizing:border-box;
}

div#display_designers_wrapper{
position:relative;
max-height:200px;
overflow:scroll;
margin:5px 0px 0px 0px;
}

div#display_designers_wrapper h3{
font:bold 16px rubik;
margin:10px 0px 10px 0px;
}

div#display_designers_wrapper > div{
position:relative;
box-shadow:0px 0px 8px rgba(180,180,180,.3);
margin:0px auto 20px auto;
padding:10px 20px 10px 40px;
display:flex;
flex-wrap:wrap;
gap:5px;
width:95%;
box-sizing:border-box;

}

div#display_designers_wrapper > div > div{
box-sizing:border-box;
padding-bottom:10px;
}

div#display_designers_wrapper > div > div:first-of-type{
width:100%;
border-bottom:1px solid rgb(240,240,240);
}

div#display_designers_wrapper > div > div:not(.designer_name_data){
width:95%;
}

div.designer_info_data:not(div.designer_info_data:last-of-type){
border:0px;
border-bottom:1px solid rgb(240,240,240);
}

div#display_designers_wrapper > div > div h5{
font:bold 14px notosans;
}

div#display_designers_wrapper > div > div p{
font:14px notosans;
}

div#display_designers_wrapper > div span{
display:block;
position:absolute;
left:5px;
right:5px;
z-index:5;
width:20px;
height:20px;
border-radius:50%;
background:black;
color:white;
text-align:center;
font:12px roboto_regular;
box-sizing:border-box;
padding:3px 0px 0px 0px;
}

/*--------------------*/
footer{
padding:5px 5px 5px 5px;
display:flex;
flex-wrap:wrap;
justify-content:center;
background:rgb(200,200,200);
box-sizing:border-box;
gap:0px;
position:relative;
}

footer div{
/*border:1px solid red;*/
box-sizing:border-box;
width:100%;
}

footer div:nth-child(2){
padding-top:2px;
}

footer div:nth-child(3){
padding-top:2px;
position:relative;
right:0px;
}

footer p{
text-align:center;
font:14px roboto_regular;
color:rgb(10,10,10);
}


div#login_form_wrapper{
position:relative;
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:center;
box-shadow:none;
width:90%;
min-height:500px;
margin:20px auto auto auto;
border-radius:6px;
}

div#login_form_wrapper > div{
position:relative;
/*border:1px solid red;*/
width:100%;
box-sizing:border-box;
}

div#login_div{
/*border:1px solid red;*/
padding:20px 0px 0px 0px;
}

div#report_div{
width:60%;
margin:10px auto auto auto;
display:none;
}

.error_msg{
background:#ff8080;
padding:10px;
border-radius:5px;
font:14px notosans;
text-align:center;
}

div#login_form_wrapper > div h5{
text-align:center;
font:24px poppins_semibold;
}

div#login_form_wrapper > div form{
display:block;
position:relative;
box-sizing:border-box;
width:90%;
margin:50px auto auto auto;
/*border:1px solid red;*/
}

div#login_form_wrapper > div form input{
display:block;
padding:5px 0px 5px 15px;
}

div#login_form_wrapper > div form div.form_struct{
position:relative;
width:100%;

}

div.form_struct label{
display:block;
position:absolute;
z-index:2;
cursor:text;
top:30%;
left:15px;
font:16px notosans;
transition:all 0.2s ease-out;
color:rgb(100,100,100);
}

div#username_div,div#password_div{
position:relative;
border-radius:5px;
border:1px solid #4D869C;
}

div#username_div{
margin:10px 0px 50px 0px;
padding:5px;
height:50px;
width:300px;
box-sizing:border-box;
}

div#password_div{
width:300px;
box-sizing:border-box;
}

div#username_div input{
display:block;
height:100%;
width:100%;
box-sizing:border-box;
border:0px;
font:16px notosans;
}

.form_input:valid ~ label.input_label,.form_input:focus ~ label.input_label{
transform:translateY(-40px);
}

div#password_div > div{
display:flex;
flex-wrap:nowrap;
box-sizing:border-box;
position:relative;
height:50px;
padding:5px;
width:100%;
}

div#password_div > div > input{
display:block;
height:100%;
width:90%;
box-sizing:border-box;
border:0px;
font:16px notosans;
}

div#password_div > div > span{
display:block;
/*border:1px solid red;*/
width:10%;
box-sizing:border-box;
padding-top:6px;
cursor:pointer;
}

div#password_div > div > span img{
display:block;
margin:auto;
}

div#submit_div{
position:relative;
margin:10px 0px 0px 0px;
width:300px;
height:50px;
}

div#submit_div input{
display:block;
height:100%;
width:100%;
background:#263238;
border:0px;
cursor:pointer;
color:white;
font:16px notosans;
}

div#login_form_wrapper > div:nth-child(1){
box-shadow:0px 0px 10px rgba(200,200,200,.3);
order:2;
margin:20px 0px 0px 0px;
padding:0px 0px 10px 0px;
}

div#login_form_wrapper > div:nth-child(2){

}

div#login_form_wrapper > div:nth-child(2) figure{
/*border:1px solid blue;*/
height:200px;
width:95%;
margin:10px auto auto auto;
aspect-ratio:3:2;
}

div#login_form_wrapper > div:nth-child(2) figure img{
display:block;
height:100%;
width:100%;
}