@import 'form.css';
@import 'ar_fonts.css';
@import 'font-awesome.css';
@import 'line-awesome/css/line-awesome.css';
@import 'flaticon/flaticon.css';
@import 'flaticon2/flaticon.css';
@import 'fontawesome-free/css/all.min.css';
@import 'css/elements/heading.css';
@import 'css/elements/buttons.css';
@import 'css/elements/list.css';
@import 'css/elements/timeline.css';
@import 'css/elements/animate.css';
@import 'css/elements/animate.css';
@import 'css/elements/box.css';
@import 'css/elements/note.css';
@import 'css/elements/animate.css';
@import 'css/elements/box.css';
@import 'css/elements/image-caption.css';
@import 'css/elements/services.css';
@import 'css/elements/member.css';
@import 'css/elements/social-share.css';
@import 'css/elements/table.css';

/*
@import 'css/bootstrap.min.css';
@import 'css/elements/accordion.css';
@import 'css/elements/breadcrumb.css';
@import 'css/elements/calltoaction.css';
@import 'css/elements/carousel.css';
@import 'css/elements/flipbox.css';
@import 'css/elements/form.css';
@import 'css/elements/modal.css';
@import 'css/elements/note.css';
@import 'css/elements/pricing-tables.css';
@import 'css/elements/progress-bar.css';

@import 'css/elements/tabs.css';
@import 'css/elements/testimonial.css';
@import 'css/elements/timeline.css';
*/


/*bootstrap----------------------------------------------------------------
 */

#properties {
    display: block;
}

.shadow9 {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.shadow1,
.shadow2,
.shadow3,
.shadow4,
.shadow5,
.shadow6,
.shadow7,
.shadow8 {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset
}

.shadow1 h3,
.shadow2 h3,
.shadow3 h3,
.shadow4 h3,
.shadow5 h3,
.shadow6 h3,
.shadow7 h3,
.shadow8 h3 {
    width: 87%;
    height: 100px;
    margin-left: 6%;
    border: 2px dashed #F7EEEE;
    border-radius: 5px
}

.shadow1:before,
.shadow1:after {
    position: absolute;
    content: "";
    bottom: 12px;
    left: 15px;
    top: 80%;
    width: 45%;
    background: #9B7468;
    z-index: -1;
    -webkit-box-shadow: 0 20px 15px #9B7468;
    -moz-box-shadow: 0 20px 15px #9B7468;
    box-shadow: 0 20px 15px #9B7468;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.shadow1:after {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    transform: rotate(6deg);
    right: 15px;
    left: auto
}

.shadow2:before {
    position: absolute;
    content: "";
    width: 80%;
    top: 140px;
    bottom: 15px;
    left: 30px;
    background-color: #9F8641;
    z-index: -1;
    -webkit-box-shadow: 0 23px 17px 0 #9F8641;
    -moz-box-shadow: 0 23px 17px 0 #9F8641;
    box-shadow: 0 23px 17px 0 #9F8641;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.shadow3:before,
.shadow3:after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 2px;
    left: 15px;
    right: 15px;
    z-index: -1;
    border-radius: 100px/30px;
    -webkit-box-shadow: 0 0 30px 2px #1cb09a;
    -moz-box-shadow: 0 0 30px 2px #1cb09a;
    box-shadow: 0 0 30px 2px #1cb09a
}

.shadow4:before,
.shadow4:after {
    position: absolute;
    content: "";
    top: 14px;
    bottom: 14px;
    left: 0;
    right: 0;
    box-shadow: 0 0 25px 3px #548E7F;
    border-radius: 100px/10px;
    z-index: -1
}

.shadow5:before,
.shadow5:after {
    position: absolute;
    content: "";
    box-shadow: 0 10px 25px 20px #518C96;
    top: 40px;
    left: 10px;
    bottom: 50px;
    width: 15%;
    z-index: -1;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

.shadow5:after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto
}

.shadow6:before,
.shadow6:after {
    position: absolute;
    content: "";
    top: 100px;
    bottom: 5px;
    left: 30px;
    right: 30px;
    z-index: -1;
    box-shadow: 0 0 40px 13px #486685;
    border-radius: 100px/20px
}

.shadow7:before,
.shadow7:after {
    position: absolute;
    content: "1";
    top: 25px;
    left: 20px;
    bottom: 150px;
    width: 80%;
    z-index: -1;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.shadow7:before {
    box-shadow: 10px -10px 30px 15px #984D8E
}

.shadow7:after {
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    transform: rotate(7deg);
    bottom: 25px;
    top: auto;
    box-shadow: 10px 10px 30px 15px #984D8E
}

.shadow8 {
    box-shadow: -6px -6px 8px -4px rgba(250, 254, 118, 0.75), 6px -6px 8px -4px rgba(254, 159, 50, 0.75), 6px 6px 8px -4px rgba(255, 255, 0, 0.75), 6px 6px 8px -4px rgba(0, 0, 255, 2.75)
}

.pname {
    width: auto;
    background: rgba(34, 44, 44, 0.3);
    color: # FF0;
    padding: 10px 5px;
    border-left: 0 solid #77a1af;
    font-size: 32px;
    text-align: left;
    font-family: 'JF Flat Regular', Sans-Serif;
    line-height: 30px
}

.pdesc {
    width: auto;
    background: rgba(34, 44, 44, 0.3);
    color: #fff;
    padding: 10px 5px;
    border-left: 0 solid #77a1af;
    font-size: 17px;
    text-align: left;
    font-family: 'JF Flat Regular', Sans-Serif;
    line-height: 20px
}

.my_img1 {
    height: 610px;
}

.my_img2 {
    height: 240px;
}

.my_img3 {
    height: 240px;
}

.my_img4 {
    height: 240px;
}

.my_img5 {
    height: 240px;
}

.my_img6 {
    height: 240px;
}

.my_img7 {
    height: 240px;
}

.banner_tit {
    color: #002d62;
    text-align: center;
    font-size: 24px;
    position: absolute;
    width: 100%;
    top: 40%
}

.my_show {
    display: none;
}

.my_hidd {
    display: block
}

.bannertext1 {
    color: #e32429;
    font-size: 38px;
    font-family: 'GETWO', sans-serif;
    text-shadow: -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc, 1px 1px 0 #ccc;
    padding-top: 15px
}

.my_banner1 {
    padding-top: 220px;
}

.my_banner2 {
    padding-top: 270px;
    text-align: center;
    width: 100%;
    max-width: 500px;
    display: block;
    margin: auto
}

.navo {
    background: #e32429;
    border-top: 4px solid #e32429;
    border-bottom: 4px solid #e32429
}

.slider_title1 {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 35px;
}

.slider_title2 {
    font-size: 70px;
    letter-spacing: 5px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    border-bottom: 1px solid #000;
}

.slider_title3 {
    font-size: 16px;
    color: #666;
}

@media only screen and (min-width:720px) and (max-width: 1300px) {
    .my_hidd {
        display: block
    }
    .my_show {
        display: none
    }
    .navo {
        background: #e32429;
        border-top: 4px solid #e32429;
        border-bottom: 4px solid #e32429
    }
    .my_img1 {}
    .my_img2 {}
    .my_img3 {}
    .my_img4 {}
    .my_img5 {}
    .my_img6 {}
    .my_img7 {}
}

@media only screen and (max-width:719px) {
    #properties {
        display: none;
    }
    .pname {
        padding: 3px 2px;
        font-size: 12px;
        line-height: 17px
    }
    .pdesc {
        padding: 3px 2px;
        font-size: 10px;
        line-height: 17px
    }
    .my_hidd {
        display: none
    }
    .column,
    .columns {
        margin: 1% 0;
        overflow: hidden
    }
    .one {
        width: 100%
    }
    .two {
        width: 100%
    }
    .three {
        width: 100%
    }
    .four {
        width: 100%
    }
    .five {
        width: 100%
    }
    .six {
        width: 100%
    }
    .seven {
        width: 100%
    }
    .eight {
        width: 100%
    }
    .nine {
        width: 100%
    }
    .ten {
        width: 100%
    }
    .eleven {
        width: 100%
    }
    .twelve {
        width: 100%
    }
    .arrow_left {
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px;
        border-color: transparent transparent #262626;
        position: absolute;
        right: 45%;
        z-index: 2;
        top: 97%
    }
    .arrow_right {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0;
        border-color: #262626 transparent transparent;
        position: absolute;
        left: 45%;
        z-index: 2;
        top: 0
    }
    .banner_tit {
        color: #1d7dee;
        font-size: 12px;
        bottom: 10px
    }
    .my_img1 {
        height: auto
    }
    .my_show {
        display: block
    }
    .bannertext1 {
        font-size: 0;
        padding-top: 1px
    }
    .my_banner1 {
        padding-top: 5px
    }
    .my_banner2 {
        padding-top: 30px
    }
    .navo {
        background: #e32429;
        border-top: 0 solid #e32429;
        border-bottom: 0 solid #e32429
    }
    .my_img1 {
        height: 250px;
    }
    .my_img2 {}
    .my_img3 {}
    .my_img4 {}
    .my_img5 {}
    .my_img6 {}
    .my_img7 {}
    .slider_title1 {
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 15px;
    }
    .slider_title2 {
        font-size: 20px;
        letter-spacing: 0px;
        padding-bottom: 20px;
        margin-bottom: 10px;
        font-weight: 700;
        border-bottom: 1px solid #000;
    }
    .slider_title3 {
        font-size: 0px;
        color: #666;
    }
}

.shadow1,
.shadow2,
.shadow3,
.shadow4,
.shadow5,
.shadow6,
.shadow7,
.shadow8 {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset
}

.shadow1 h3,
.shadow2 h3,
.shadow3 h3,
.shadow4 h3,
.shadow5 h3,
.shadow6 h3,
.shadow7 h3,
.shadow8 h3 {
    width: 87%;
    height: 100px;
    margin-left: 6%;
    border: 2px dashed rgba(0, 0, 0, 0.3);
    border-radius: 5px
}

.shadow1:before,
.shadow1:after {
    position: absolute;
    content: "";
    bottom: 12px;
    left: 15px;
    top: 80%;
    width: 45%;
    background: #9B7468;
    z-index: -1;
    -webkit-box-shadow: 0 20px 15px #9B7468;
    -moz-box-shadow: 0 20px 15px #9B7468;
    box-shadow: 0 20px 15px #9B7468;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.shadow1:after {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    transform: rotate(6deg);
    right: 15px;
    left: auto
}

.shadow2:before {
    position: absolute;
    content: "";
    width: 80%;
    top: 140px;
    bottom: 15px;
    left: 30px;
    background-color: #9F8641;
    z-index: -1;
    -webkit-box-shadow: 0 23px 17px 0 #9F8641;
    -moz-box-shadow: 0 23px 17px 0 #9F8641;
    box-shadow: 0 23px 17px 0 #9F8641;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.shadow3:before,
.shadow3:after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 2px;
    left: 15px;
    right: 15px;
    z-index: -1;
    border-radius: 100px/30px;
    -webkit-box-shadow: 0 0 30px 2px #1cb09a;
    -moz-box-shadow: 0 0 30px 2px #1cb09a;
    box-shadow: 0 0 30px 2px #1cb09a
}

.shadow4:before,
.shadow4:after {
    position: absolute;
    content: "";
    top: 14px;
    bottom: 14px;
    left: 0;
    right: 0;
    box-shadow: 0 0 25px 3px #548E7F;
    border-radius: 100px/10px;
    z-index: -1
}

.shadow5:before,
.shadow5:after {
    position: absolute;
    content: "";
    box-shadow: 0 10px 25px 20px #518C96;
    top: 40px;
    left: 10px;
    bottom: 50px;
    width: 15%;
    z-index: -1;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

.shadow5:after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto
}

.shadow6:before,
.shadow6:after {
    position: absolute;
    content: "";
    top: 100px;
    bottom: 5px;
    left: 30px;
    right: 30px;
    z-index: -1;
    box-shadow: 0 0 40px 13px #486685;
    border-radius: 100px/20px
}

.shadow7:before,
.shadow7:after {
    position: absolute;
    content: "1";
    top: 25px;
    left: 20px;
    bottom: 150px;
    width: 80%;
    z-index: -1;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg)
}

.shadow7:before {
    box-shadow: 10px -10px 30px 15px #984D8E
}

.shadow7:after {
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    transform: rotate(7deg);
    bottom: 25px;
    top: auto;
    box-shadow: 10px 10px 30px 15px #984D8E
}

.shadow8 {
    box-shadow: -6px -6px 8px -4px rgba(250, 254, 118, 0.75), 6px -6px 8px -4px rgba(254, 159, 50, 0.75), 6px 6px 8px -4px rgba(255, 255, 0, 0.75), 6px 6px 8px -4px rgba(0, 0, 255, 2.75)
}


/* Special grids ----------------------------------------------------------------------- */

.column,
.columns {
    display: block;
    float: left;
    margin: 0 1%
}

.one {
    width: 6.333%
}

.two {
    width: 14.666%
}

.three {
    width: 22.999%
}

.four {
    width: 31.332%
}

.five {
    width: 39.665%
}

.six {
    width: 47.998%
}

.seven {
    width: 56.331%
}

.eight {
    width: 64.664%
}

.nine {
    width: 72.997%
}

.ten {
    width: 81.33%
}

.eleven {
    width: 89.663%
}

.twelve,
.full {
    width: 98%
}

.oneHalf,
.twoFourths,
.half {
    width: 47.998%
}

.oneThird {
    width: 31.332%
}

.twoThirds {
    width: 64.664%
}

.oneFourth,
.oneQuarter {
    width: 22.999%
}

.threeFourths {
    width: 72.997%
}

.myy {
    float: left;
    display: block;
}

.box100 {
    width: 100%;
}

.box90 {
    width: 90%;
}

.box80 {
    width: 80%;
}

.box70 {
    width: 70%;
}

.box60 {
    width: 60%;
}

.box50 {
    width: 50%;
}

.box40 {
    width: 40%;
}

.box30 {
    width: 30%;
}

.box20 {
    width: 20%;
}

.box10 {
    width: 10%;
}

.box33 {
    width: 33.333333333333336%;
}

.box66 {
    width: 16.66666666666667%;
}

.box77 {
    width: 14.28571428571429%;
}

.box88 {
    width: 12.5%;
}

.box25 {
    width: 25%;
}

.box20 {
    width: 20%;
}

.side {
    display: block;
}


/* Laptop/Tablet (1024px) */

@media only screen and (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
    .box100 {
        width: 100%;
    }
    .box90 {
        width: 90%;
    }
    .box80 {
        width: 80%;
    }
    .box70 {
        width: 70%;
    }
    .box60 {
        width: 60%;
    }
    .box50 {
        width: 50%;
    }
    .box40 {
        width: 40%;
    }
    .box30 {
        width: 30%;
    }
    .box20 {
        width: 20%;
    }
    .box10 {
        width: 10%;
    }
    .box33 {
        width: 33.333333333333336%;
    }
    .box66 {
        width: 16.66666666666667%;
    }
    .box77 {
        width: 14.28571428571429%;
    }
    .box88 {
        width: 12.5%;
    }
    .box25 {
        width: 25%;
    }
    .box20 {
        width: 20%;
    }
    .side {
        display: none;
    }
}


/* Tablet Portrait (768px) */

@media only screen and (min-width: 321px) and (max-width: 500px) and (orientation: portrait) {
    .box100 {
        width: 100%;
    }
    .box90 {
        width: 100%;
    }
    .box80 {
        width: 100%;
    }
    .box70 {
        width: 100%;
    }
    .box60 {
        width: 100%;
    }
    .box50 {
        width: 100%;
    }
    .box40 {
        width: 100%;
    }
    .box30 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box10 {
        width: 100%;
    }
    .box33 {
        width: 100%;
    }
    .box25 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box66 {
        width: 100%;
    }
    .box77 {
        width: 100%;
    }
    .box88 {
        width: 100%;
    }
    .side {
        display: none;
    }
}


/* Phone Landscape (480px) */

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
    .box100 {
        width: 100%;
    }
    .box90 {
        width: 100%;
    }
    .box80 {
        width: 100%;
    }
    .box70 {
        width: 100%;
    }
    .box60 {
        width: 100%;
    }
    .box50 {
        width: 100%;
    }
    .box40 {
        width: 100%;
    }
    .box30 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box10 {
        width: 100%;
    }
    .box33 {
        width: 100%;
    }
    .box25 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box66 {
        width: 100%;
    }
    .box77 {
        width: 100%;
    }
    .box88 {
        width: 100%;
    }
    .side {
        display: none;
    }
}


/* Phone Portrait (320px) */

@media only screen and (max-width: 320px) {
    .box100 {
        width: 100%;
    }
    .box90 {
        width: 100%;
    }
    .box80 {
        width: 100%;
    }
    .box70 {
        width: 100%;
    }
    .box60 {
        width: 100%;
    }
    .box50 {
        width: 100%;
    }
    .box40 {
        width: 100%;
    }
    .box30 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box10 {
        width: 100%;
    }
    .box33 {
        width: 100%;
    }
    .box25 {
        width: 100%;
    }
    .box20 {
        width: 100%;
    }
    .box66 {
        width: 100%;
    }
    .box77 {
        width: 100%;
    }
    .box88 {
        width: 100%;
    }
    .side {
        display: none;
    }
}