/*==========  Desktop First Method  ==========*/

/* --- Large Devices, Wide Screens ------------------------------> 1300 <--- */
@media (min-width: 1100px) and (max-width : 1320px) {
    .container {padding: 0 20px;}
#section1 .container, #section2 .container {padding:0;}
.plus-text {height: 140px; width: 260px;}
.select2-container--default .select2-selection--single, .select2-container {width:240px !important;}
.contact1 {width: 500px;}
}
/* --- Medium Devices, Desktops ----------------------------------> 992 <--- */
@media (min-width: 768px) and (max-width: 1099px) {
    .container {padding: 0 20px;}
.head {padding-top:100px;}
.main-title {font-size: 42px;}
.form1 {margin-top: 50px; text-align: center;}
.form1 input {width:200px;}

#tabbox1 .resp-tabs-list, #tabbox2 .resp-tabs-list {margin: 0 10%;}
#tabbox1 .tab-photo, #tabbox1 .tab-info, #tabbox2 .tab-photo, #tabbox2 .tab-info {float: none; margin: auto;}
#section4 .col-md-4 {float: left; width:50%;}
.plus-text {height: 130px; width: 280px;}

.adds {max-width: 100%;}
.adds .col-md-4 {float:left; width:auto;}
.adds .col-md-4 p {margin-bottom:20px;}
.add2, .add3 {margin-left:10px;}
.form2 input {background-color: rgba(0,0,0,0.4);}
.form3 input {width: 200px;}
#section5 .col-md-3 {float: left; width:50%;}
.set img {height:120px; width:120px;}
.set p {font-size: 16px;}
.set .btn6 {width: 120px;}
#section8 .title-f4 {max-width: 100%; text-align:center; width: 100%;}
.form4 {margin:0 auto; text-align: center;}
.form4 input {margin-bottom:20px; width:30%;}
.form4 .f4-phone {/*border-radius:0 30px 30px 0; border-right: 2px solid #7ed321;*/}
.form4 .f4-email {border-radius:0 30px 30px 0; border-right: 2px solid #7ed321;}
.form4 .btn_f1 {margin:0 auto 20px;}
#section9 {min-height: auto;}
#section10 .col-md-6 {/*display:block; float:none;*/}
.contact1 {float: left; /*margin:0 auto;*/ padding: 0 20px 10px; width: 50%;}
#section10 .title1 {/*padding-top: 40px; text-align: center;*/}
.map iframe {width: 100%;}
}

/* --- Small Devices, Tablets ------------------------------------> 768 <--- */
@media only screen and (max-width : 767px) {
    body {font-size:14px;}
    .container {padding-left:20px; padding-right:20px; overflow: hidden;}
.title1, .title2 {font-size: 32px;}
.title3 {font-size:18px;}
.title4 {font-size:24px;}
.phone1, .main-title {font-size: 28px;}
.main-title {font-family: Circe-Bold, sans-serif; margin-bottom:30px;}
.header {background-image: url('../images/bg/bg1b.jpg'); min-height: 600px;}
.topbar .fl_r {float:left; width: 100%;}
.topbar {text-align: left;}
.head {padding-top:40px;}

.form1, .form3 {margin: 10px auto; text-align: center;}
.form1 input, .form3 input {font-size:16px; margin-bottom: 20px;}
.form1 .f1-name, .form3 .f3-name {width:150px;}
.form1 .f1-phone, .form3 .f3-phone {border-radius:0 30px 30px 0; width:170px;}
.form1 .btn_f1, .form3 .btn_f1 {display:block; margin: 0 auto 20px;}
.bg1a {background-size: 100%; height: 120px; width: 150px;}

.plus {text-align: center;}
.plus-text {text-align: left;}

#tabbox1 .tab-photo, #tabbox2 .tab-photo {width: 100%;}
#tabbox1 .tab-photo img, #tabbox2 .tab-photo img {height: 100%;}
#tabbox1 .resp-tabs-container, #tabbox2 .resp-tabs-container {max-width: 100%;}
#tabbox1 .tab-info, #tabbox2 .tab-info {padding:20px; width: 100%;}

.adds {max-width: 280px;}
.adds .col-md-4 {float:left;}
.adds .col-md-4 p {margin-bottom:20px;}
.add2, .add3 {margin-left:0;}

#section3 .container {padding-left:40px;}
.form2 input {background-color: rgba(0,0,0,0.4);}

.selectbox {text-align: center;}
.select2-container {text-align: left;}
.slider_works #nav_button3 .owl-prev {left:0;}
.col-20 {width:50%;}
.set {margin-bottom: 20px;}
#section8 .title-f4 {max-width: 100%; text-align:center;}
.form4 {margin:0 auto;}
.form4 input, .form4 .btn_f1 {margin-bottom:20px; width:50%;}
.form4 .f4-phone {border-radius:0 30px 30px 0; border-right: 2px solid #7ed321;}
.form4 .f4-email {border-radius:30px; border-left:2px solid #7ed321; border-right: 2px solid #7ed321;}
.form4 .btn_f1 {margin-left:0; box-shadow:none;}

#section9 {min-height: auto;}
#section10 .col-md-6 {display:block; float:none;}
.contact1 {float: none; margin:0 auto; padding: 0 20px 10px; width: 100%;}
#section10 .title1 {padding-top: 40px; text-align: center;}
.contact2 p {font-size:16px;}
.map iframe {width: 100%;}
.copyright .fl_l, .copyright .fl_r {display: inline-block;}
}

/* --- Extra Small Devices, Phones -------------------------------> 480 <--- */
@media only screen and (max-width : 480px) {

.container{max-width:440px; overflow: hidden;}
.title1, .title2 {font-size: 24px;}
.title3 {font-size:18px;}
.title4 {font-size:24px;}
.bg1a, #section8 {display:none;}
#section1, #section2, #section3, #section4, #section5, #section6, #section7 {padding:40px 0;}
#section3 .titlebox, #section4 .titlebox, #section6 .titlebox {margin-bottom: 10px;}
.header {min-height: 500px;}

.logo img {width: 230px;}
.phone1, .main-title {font-size: 20px;}
.time1 {font-size: 16px;}

.form1 input, .form3 input {font-size:16px; margin-bottom: 20px;}
.form1 .f1-name, .form3 .f3-name {width:45%;} /*150*/
.form1 .f1-phone, .form3 .f3-phone {border-radius:0 30px 30px 0; width:55%;} /*170*/
.form1 .btn_f1, .form3 .btn_f1 {background-color: #bd0fe1; margin-left:0; width: 100%;}

/* 2 */
.ti-color img {margin:0 10px 0 0;}
.ti-color span {max-width: 180px;}

#tabbox1 .tab-photo, #tabbox2 .tab-photo {width: 100%;}
#tabbox1 .tab-photo img, #tabbox2 .tab-photo img {height: auto;}
#tabbox1 .resp-tabs-container, #tabbox2 .resp-tabs-container {max-width: 100%;}
#tabbox1 .tab-info, #tabbox2 .tab-info {padding:20px; width: 100%;}
#tabbox1 .ti-1 {margin-bottom: 20px;}
#tabbox1 .ti-2, #tabbox1 .ti-3 {width:130px;}

.adds {max-width: 280px;}
.adds .col-md-4 p {margin-bottom:20px;}
.add2, .add3 {margin-left:0;}
#tabbox2 .ti-1 {margin-bottom: 20px;}
#tabbox2 .ti-2, #tabbox2 .ti-3 {width:130px;}

/* 4 */
.form2 input {background-color: rgba(0,0,0,0.4);}
.form2 input, .form2 .btn_f2 {width: 100%;}
.plus {margin-bottom:20px; margin-top: 10px;}
.num {/*font-size: 50px;*/ height: auto;}
.plus-text {height: auto; width:200px;}

.col-20 {width:100%;}
.sets {margin:0;}
.set {margin-top: 40px;}
.set img {float: left; height:120px; margin-top:-20px; width:120px;}
.set p {font-size: 16px;}

#section7 {min-height: auto;}
.about-link .col-md-6 {margin-top:30px;}
.about-link a {max-width: 140px;}
.about-link img {height:80px; width:80px;}

#section9 {min-height: auto;}
#owl-12.owl-carousel .owl-item .otz_img {height:40px; width:40px;}
.otz_text {margin-left: 50px; padding:15px;}
#section10 .col-md-6 {display:block; float:none;}
.contact1 {float: none; margin:0 auto; padding: 0 20px 10px; width: 100%;}
#section10 .title1 {padding-top: 40px; text-align: center;}
.contact2 p {font-size:16px;}
.map {height:300px;}
.map iframe {width: 100%;}

.footer {padding:20px 0;}
.footer p {line-height: 2;}
.copyright .fl_l, .copyright .fl_r {float:none; text-align:center; width: 100%;}

}

@media (min-width: 768px) and (max-width: 1099px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 740px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 750px;}
}
@media only screen and (max-width : 767px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 740px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 860px;}
}
@media only screen and (max-width : 667px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 900px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 720px;}
}
@media only screen and (max-width : 506px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 900px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 700px;}
}
@media only screen and (max-width : 480px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 870px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 690px;}
}
@media only screen and (max-width : 380px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 860px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 670px;}
}
@media only screen and (max-width : 344px) {
.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 1000px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 760px;}
}

/* --- Custom, iPhone Retina --------------------------------------> 320 <---*/
@media only screen and (max-width : 320px) {
.container{max-width:280px; overflow: hidden;}
.header {min-height: 550px;}
.head {padding-top: 20px;}
.form1 .f1-name, .form1 .f1-phone {border-radius:30px; width: 100%;}
.form1 .btn_f1, .form3 .btn_f1 {background: #bd10e0; border-radius:300px; width:100%;}
.form3 .btn_f1 {margin-left:0;}
.form1 .f1-phone:focus {border-left: 2px solid #e95124;}
.form3 .f3-name, .form3 .f3-phone {border-radius:30px; border: 2px solid #bd0fe1; margin-bottom:20px; width: 100%;}

.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {min-height: 1000px;}
.tab7, .tab8, .tab9, .tab10, .tab11 {min-height: 760px;}
#tabbox1 .tab-photo img, #tabbox2 .tab-photo img {height: auto;}

.select2-container--default .select2-selection--single, .select2-container {width:100% !important;}

.plus {margin-bottom:20px; margin-top: 10px;}
.num {font-size: 50px; height: auto;}
.plus-text {height: auto; width:100%;}
.set img {float: none; height:160px; margin-top:0; width:160px;}
#section7 {min-height: auto;}
.about-link .col-md-6 {margin-top:30px;}
.about-link a {max-width: 140px;}
#section9 {min-height: 550px; padding: 40px 0 20px 0;}
#section9 .title2 {line-height: 1; margin:0 auto; width:50%;}
#section9 .slider_works {margin-top:40px;}
.contact1 {width: 260px;}

}