html,
      body {
        height: auto;
		width:100%;
		margin: 0;
		padding:0;
		font-family: 'DM Sans',sans-serif;
        position:relative;
        background:rgba(24,23,23,1);
        background: radial-gradient(circle, rgba(84,84,84,1) 0%, rgba(24,23,23,1) 100%);
        background-size:cover;
        background-repeat:no-repeat;
      }	 
	  .doc-wrap{
        width: 100%;
		display: flex;
        flex-wrap: wrap;
        margin: 0;
		align-items:center;
		justify-content:center;
		position:relative;
	  }
	  .doc-a4{
		background-color:#ffffff;
		padding:48px;
		width:992px;
		height:1440.2px;/*1403.2px;*/
		margin:48px auto;
		position: relative;
		z-index:99;
		box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 35%);
	  }
      .loading, .loading body{height:100%;}
      
    .loading .doc-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        justify-content: center;
        margin: auto;
        height: 100%;
        width: 100%;
        z-index:9;
    }
       .loading .doc-intro-container, .loading .doc-right{padding:0;}
       .loading .doc-intro-container, 
       .loading .doc-photo-container{
        text-align: center; 
        margin:0 auto; 
        width:100%; 
        padding-bottom:30px;}
        .loading .doc-intro-container p{display:none;}
        .loading .doc-wrap, .loading .doc-a4{position:unset; margin:0; padding:0; height:0; width:0;}
        .loading .doc-background{position:absolute; top:0; bottom:0; right:0; left:0;} 
        .loading .doc-a4 *:not(.doc-loader, .doc-loader *, .doc-header, .doc-header *){display:none;}

        .loading  .doc-intro-container h1.doc-text-uppercase::before{
            content:'WELCOME';
            color:#fff;
            font-weight:normal;
        }
        .loading  .doc-intro-container h5::before{
            content:'BRADLEY B DALINA';
            color:#ddd;
            font-weight:normal;
        }
        .loading{position:relative;}
        
        .doc-loader{
            position: fixed;
            top: 0;
            left: 0;
            right:0;
            bottom:0;
            width: 100%;
            height: 100%;
            z-index: 8;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loaded .doc-loader{
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all .3s 1s ease-out;
            transition: all .3s 1s ease-out;
        }         
        .doc-loader-background-right{right:0;}
        .doc-loader-background-left{left:0;}
        .doc-loader-section{
            background-color: #2d3242;
            position: fixed;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        .loaded .doc-loader-background-left {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        }
        .loaded .doc-loader-background-right {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        }
        .loaded .doc-loader-section{
            -webkit-transition: all .7s .3s cubic-bezier(.645,.045,.355,1);
            transition: all .7s .3s cubic-bezier(.645,.045,.355,1);
            animation: fadeout 7s;
        }  
        @keyframes fadeout {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        .loading span.doc-fancy-divider{
            position:relative;
            display:block;
        }

        span.doc-fancy-divider{
            position:relative;
            display:none;
        }

        .doc-intro-container h1.doc-text-uppercase::before{
            content:'BRADLEY B DALINA';
            color:#000;
            font-weight:normal;
        }
        .doc-intro-container h5::before{
            content:'BS INFORMATION TECHNOLOGY';
            color:#555;
            font-weight:normal;
        }

        
        span.doc-fancy-divider::before {
            content: "";
            height: 5px;
            width: 30px;
            background-color: #6d84b4;
            position: absolute;
            margin:0 auto;
            text-align: center;
            display: block;
            right: 0;
            left: 0;            
            bottom:-2px;
        }
        span.doc-fancy-divider::after {
            content: "";
            display: block;
            height: 1px;
            width: 0;
            background-color: #fff;
            margin: 20px auto;
            border-left: solid 125px #ddd;
            border-right: solid 125px #ddd;
        }

       .loading .doc-photo-container .doc-circular-effect{
            z-index: 9;
            border-left: solid 5px #6d84b4;
            border-top: solid 5px #fff;
            border-right: solid 5px #6d84b4;
            border-bottom: solid 5px #fff;
            position: absolute;
            display: block;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            margin: auto;
            border-radius: 50%;
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -moz-animation-name: rotate;
            -moz-animation-duration: 1.5s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-timing-function: linear;
            top:0;
            left:0;
        }
        @-webkit-keyframes rotate {
            from {
                -webkit-transform: rotate(0);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
            }
            @-moz-keyframes rotate {
            from {
                -moz-transform: rotate(0);
            }
            to {
                -moz-transform: rotate(360deg);
            }
        }
        .loading img.doc-photo{
            border:solid 10px transparent;}

     .doc-header,
      .doc-data{
		display:flex;		
		justify-content: space-between;
		flex-basis: content;
	  }
      .doc-header{align-items:center;}
      .doc-data{align-items:start;}	   
	  
	  .doc-photo-container, .doc-left{width:28.9%; padding-bottom:24px;}
	  img.doc-photo {			
			display:block;
            width:calc(100% - 20px);
            object-fit: cover;   
            border-radius:50%;
            border:solid 5px #fff;
		}

        .doc-photo-container .doc-photo-wrap {
                margin: 0 auto;
                max-height: 225px;
                max-width: 225px;
                border-radius: 50%;
                display: block;
                overflow: hidden;
                position:relative;
            }
            
    .loaded .doc-photo-container .doc-photo-wrap { margin-left: 0;}
	  .doc-left{color:#fff;}
	  .doc-intro-container, .doc-right{width:71.1%; padding-bottom:24px;  padding-left:32px;}
	  
	  .doc-intro-container h1{text-transform:uppercase; font-weight:bold;font-size:45px; margin-bottom: 4px;margin-top:0;}
	  .doc-intro-container h5{text-transform:uppercase;font-size: 20px; margin-top:0; color:#898989;}
	  .doc-padding-bottom-30{padding-bottom:24px;}
	  .doc-text-uppercase{text-transform:uppercase;}

	  .doc-h2-title{text-transform:uppercase; margin-bottom:24px;padding-bottom:8px;}
	  .doc-left .doc-h2-title{border-bottom:solid 1.6px #fff; color:#fff;}
	  .doc-right .doc-h2-title{border-bottom: solid 1.6px #313849;}
	  .doc-background{display:flex; position:absolute; height:100%; width:100%; bottom: 0;left: 0; z-index:-1;}
	  .doc-left-background{ width:30%; background-color:#313849;}
	  .doc-right-background{ width:70%; background-color:#ffffff; }
	  
	  ul{list-style:none; margin:0; padding:0; 
		position:relative;}
	  ul ul{
		padding-left:17.6px;
		list-style:circle;
	  }
	  
	  ul li{padding: 4px 0; }
	  .doc-left ul li{padding-right: calc(15px - 20%);}
	  .doc-work-experience > ul{padding-left:50px; padding-bottom:24px;}
	  .doc-work-experience > ul:last-child{padding-bottom:0px;}
	  
	  .doc-work-experience > ul::before{
		content: "";
		display: block;
		border: solid 1.6px #313849;
		width: 9.6px;
		height: 9.6px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 6.4px;
		background-color: #fff;
		z-index: 1;
	  }
	  .doc-work-experience > ul::after{
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		position: absolute;
		left: 6px;
		top:6.4px;
		background-color: #313849;
	  }
	  .doc-work-experience > ul:last-child::after{height:calc(100% - 16px);}
	  .doc-education > ul > li strong{font-size:14.4px;}
	  .doc-contact > ul > li i{margin-right:12px;}
	  .doc-box {margin-bottom: 48px;}
	  .doc-margin-bottom-40::after{display:block; margin-bottom:20px !important; content:" ";}
      ul ul{margin-left:50px;}
	  .doc-references{display:flex; flex-wrap: wrap; align-items:start; justify-content:space-between;}
	  .doc-references ul{white-space: initial; flex: 1 0 calc(50% - 10px);
		box-sizing: border-box;}
	  .doc-controls {
			position: absolute;
			top: 36px;
			right: 34px;
		}
		.doc-controls a{cursor:pointer; 
				padding: 6px 8px;
				color: #313849;
				border-radius: 50%;
			}
        .doc-references{
            column-gap:20px;
        }
        .doc-references ul li {             
                text-align: justify;
            }

        @media only screen and (max-width:1100px) {  
        .loaded .doc-photo-container .doc-photo-wrap { margin-left: auto;}          
        img.doc-photo{border:solid 5px #313849;}
            .doc-header{flex-direction: column;}
            .doc-a4{height:auto;}
            .doc-left-background{background:none;}
            span.doc-fancy-divider{
                position:relative;
                display:block;
            }
            .doc-left {
                color: #000;
            }
            .doc-left .doc-h2-title {
                border-bottom: solid 1.6px #313849;
                color: #000;
            }
            .doc-intro-container, .doc-right {
                width: 100%;
                padding-bottom: 24px;
                padding-left: 0;
                text-align: center;
            }
            .doc-photo-container, .doc-left{width: 100%; }
            .doc-data{
                flex-direction: column-reverse;
            }
            .doc-work-experience > ul::before{
                content: "";
                display: block;
                border: 0;
                width: 0;
                height: 0;
                border-radius: 0;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #fff;
                z-index: 1;
            }
            .doc-work-experience > ul::after{
                content: "";
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                left: 0;
                top:0;
                background-color: #313849;
            }
            .doc-work-experience > ul{padding-left: 0;}
            .doc-work-experience, .doc-references{text-align:left;}
            .doc-h2-title {
                text-align: left;
            }
            .doc-a4{margin:0;}
            .doc-intro-container p{font-size:1.3em;}
            .doc-references ul li {
                white-space: initial;                
                text-align: justify;
            }
            .doc-references{
                flex-direction: column;
            }
            .doc-right .doc-box:last-child, .doc-left .doc-box:last-child{margin-bottom:0;}
        }