/* -------Landscape-------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {

/*----- navigation -----*/
.navbar-brand {
padding: 28px 15px;
}

.navbar-brand .logofont {
font-size: 30px;
}

.navbar-default {
padding-top: 0px;
}

#navbarCollapse ul li a, .navbar-header span {
font-size: 13px;
}

#navbarCollapse ul li {
padding: 10px 15px 0 15px;
}

/*----- hello -----*/
.adjustCenter {
margin-top: 7%;
}

.fontTitle {
font-size: 39px;
}

.adjustDrawHello {
/* width: 5%; */
width: 4%;
right: 21%;
}

.hrLine {
margin-top: -28px;
}

.pink {
border: 3px solid #F05A28;
}

.yellow {
border: 3px solid #FFF100;
}

.green {
border: 3px solid #00A69C;
}

.symbolSize {
padding: 6px 3px;
margin: 0 44px;
position: relative;
top: 10px;
}

.adjustSymbol {
display: block;
margin: 0 0px 20px 50px;
}

.adjustSymbol .fontIntruc {
font-size: 13px;
}

.space {
letter-spacing: -7px;
}

.opacityWhite {
width: 150%;
left: -58%;
}

/*----- overview -----*/
.fontOverview {
font-size: 30px;
}

.line:before, .line:after {
width: 26%;
}

.fontDesc {
font-size: 12px;
top: 0px;
}

.drawCircle {
padding: 15px 10px;
}

.iconSize {
font-size: 40px;
}

.fontIntruc {
font-size: 16px;
/* top : 0px; */
}

.fontOverviewCircle {
font-size: 14px;
}

/*----- animation -----*/
.adjustAnimation {
margin-left: 12%;
}

.draw {
margin: 20px 3px;
}

.iconPlay {
padding: 5px 1px 5px 5px;
}

/*----- compabitility-----*/
#compatibility .tryLine {
margin-right: 8%;
}

.lineCompa:before {
width: 35%;
}

.lineCompa:after{
width: 4%;
}

.adjustCompa1{
width: 90%;
}

#compatibility .readMore .fontIntruc{
top:0px;
}

/*----- feature-----*/
.adjustImage {
width: 80%;
}

.inner {
margin-top: 114px;
margin-left: -672px;
height: 316px;
width: 556px;
}

/*----- subscribe-----*/
.widthLine {
width: 95%;
margin-left: 1%;
}

.icon {
font-size: 25px;
}

.fontCopyRight {
font-size: 11px;
}

.hrLineBack {
margin-top: -17px;
}

/*----- gallery-----*/
#carousel{
margin-top:-538px;
margin-bottom: 10%;
margin-left: 4px;
}
}

/* ############ for portrait layout  ##############*/
@media only screen 
and (min-width:768px)
and (max-width:1024px)
and (orientation:portrait){

/*----- navigation -----*/
/* .navbar-default {
height: 8%;
} */

.navbar-nav {
top: 10px;
}

#navbarCollapse ul li {
padding: 0px 0px 0 0px;
}

#navbarCollapse ul li a:hover {
padding-bottom: 29px;
}

#navbarCollapse ul li a:hover {
border-bottom: 10px solid #FFFFFF;
padding-bottom: 15px;
}

/*----- hello -----*/
.adjustCenter {
margin-top: 10%;
}

.adjustHello {
padding: 20px 0;
height: 53%;
}

.positionPhone {
width: 100%;
margin-top: 80%;
}

.opacityWhite {
width: 100%;
left: 0%;
}

.adjustDrawHello {
width: 6%;
right: 9%;
}

.adjustSymbol {
margin: 0 0px 20px 0px;
}

/*----- overview -----*/
.line:before, .line:after {
width: 18%;
margin-left: 10px;
margin-right: 10px;
}

/*----- animation -----*/
.fullAnimation {
margin: -19% -22%;
width: 450px;
}

.adjustAnimation {
margin-left: 21%;
}

.animate2 {
margin-left: 43%;
}

/*----- compatibility -----*/
.adjustCompa1 {
width: 75%;
margin-left: 15%;
}

.lineCompa:before {
width: 12%;
}

.lineCompa:after {
width: 1%;
}

.adjustCompaElement {
margin-right: 7%;
}

.adjustParaCompa {
padding: 0 8%;
}

.readMore {
margin-left: 9%;
width: 39%;
}

/*----- feature-----*/
.inner {
top: 243px;
left: 181px;
height: 234px;
width: 411px;
}

/*----- subscribe-----*/
.inputSubscribe {
height: 40px;
}

.icon-ok {
font-size: 25px;
}

.btn {
margin-left: -7px;
height: 40px;
}
}